Ajax for Java developers: Build Dynamic Java Applications

The page-reload cycle presents one of the biggest usability obstacles in Web application development and is a serious challenge for Java™ developers. In this series, author Philip McCarthy introduces a groundbreaking approach to creating dynamic Web application experiences. Ajax (Asynchronous JavaScript and XML) is a programming technique that lets you combine Java technologies, XML, and JavaScript for Java-based Web applications that break the page-reload paradigm.

McCarthy, Philip. IBM (2006). Articles>Web Design>Interaction Design>Ajax

Big Architect, Little Architect

First came the primordial soup. Thousands of relatively simple single-celled web sites appeared on the scene, and each one was quickly claimed by a multi-functional organism called a "webmaster." A symbiotic relationship quickly became apparent. Webmaster fed web site. Web site got bigger and more important. So did the role of the webmaster. Life was good. Then, bad things started to happen. The size and complexity and importance of the web sites began to spiral out of control. Mutations started cropping up. Strange new organisms with names like interaction designer, usability engineer, customer experience analyst, and information architect began competing with the webmaster and each other for responsibilities and rewards. Equilibrium had been punctuated and we entered the current era of rapid speciation and specialization.

Morville, Peter. Argus Center (2000). Articles>Web Design>Interaction Design>Project Management

Editable HTML Content

One of the little known features of DHTML, at least within Internet Explorer 5.5 or above, is an attribute known as contentEditable. This attribute can be used to make areas of text within a Web page editable by the user. This is very different from a form element, such as a text box, as contentEditable can make a table cell, or a standard paragraph editable.

HyperWrite (2005). Articles>Web Design>Interaction Design>DHTML

The End of Web Design

Websites must tone down their individual appearance and distinct design in all ways: visual design; terminology and labeling; interaction design and workflow; and information architecture. These changes are driven by four different trends that all lead to the same conclusion.

Nielsen, Jakob. Alertbox (2000). Articles>Usability>Web Design>Interaction Design

Interaction Modeling: User State-Trace Analysis

Interaction modeling is a good way to identify and locate usability issues with the use of a tool. Several methods exist. Modeling techniques are prescriptive in that they aim to capture what users will likely do, and not descriptive of what users actually did.

Queen, Matt. Boxes and Arrows (2006). Articles>Web Design>Usability>Interaction Design

The Lack of Interactivity and Hypertextuality in Online Media  

The main focus of this article is related to the forms of mediated content that are offered in online space. Two specific aspects of new cyber-textuality are discussed--the notion of hypertextuality and the potential of interactivity. Both characteristics are understood as new challenges that reflect specific communication potentials of the internet. In an empirical sense, the article tries to show the extent these significant forms of mediation are used in online media news. For this reason a comparison between media content in print and online media has been made. The findings reveal the lack of interactivity in practice and explore its diversity as a communication form between media producers and reader. Regarding the hypertextuality, the analysis shows the complexity of this concept, which in the realm of news media online is still maturing.

Oblak, Tanja. International Communication Gazette (2005). Articles>Web Design>Hypertext>Interaction Design

Living Multiple Lives — The New Technical Communicator

In this podcast, Noz Urbina talks about how Web 2.0 is changing the role of the technical communicator into one who drives product R&D and interaction design. The interview covers how the role of the technical communicator has evolved into a diversity of roles; how awareness of user needs and requirements allows technical communicators to get involved in product R&D and user interaction design; and how implementing a backwards flow of data from hundreds of internal and external users changes the role of a technical writer to one who aggregates, synthesizes, and ensures quality rather than one who merely writes.

Urbina, Noz and Tom H. Johnson. Tech Writer Voices (2008). Articles>Interviews>Web Design>Interaction Design

Mastering Ajax, Part 1: Introduction to Ajax

Ajax, which consists of HTML, JavaScript™ technology, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together -- from an overview to a detailed look -- to make extremely efficient Web development an easy reality. He also unveils the central concepts of Ajax, including the XMLHttpRequest object.

McLaughlin, Brett D. IBM (2006). Articles>Web Design>Interaction Design>Ajax

Mastering Ajax, Part 1: Introduction to Ajax

Ajax, which consists of HTML, JavaScript™ technology, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together -- from an overview to a detailed look -- to make extremely efficient Web development an easy reality. He also unveils the central concepts of Ajax, including the XMLHttpRequest object.

McLaughlin, Brett D. IBM (2006). Articles>Web Design>Interaction Design>Ajax

Mastering Ajax, Part 2: Make Asynchronous Requests with JavaScript and Ajax

Most Web applications use a request/response model that gets an entire HTML page from the server. The result is a back-and-forth that usually involves clicking a button, waiting for the server, clicking another button, and then waiting some more. With Ajax and the XMLHttpRequest object, you can use a request/response model that never leaves users waiting for a server to respond. In this article, Brett McLaughlin shows you how to create XMLHttpRequest instances in a cross-browser way, construct and send requests, and respond to the server.

McLaughlin, Brett D. IBM (2006). Articles>Web Design>Interaction Design>Ajax

Now Serving Interactive Information Units  

Interactive information units (IIUs) are online, interactive HTML documents that modify their content based on user input. You can use IIUs to document tasks that are not performed frequently enough to merit a wizard and are too complex for traditional documentation. Content is essential in IIUs and appearance varies. You can provide interactive function with a variety of languages. HTML makes production faster and cost efficient. The Internet makes updating transparent. IIUs are just another example of a great idea brought about by new technology.

Cromarty, Valerie Christensen. STC Proceedings (1998). Articles>Web Design>Interaction Design

Quick and Easy Flash Prototypes: Bring Your Wireframes to Life

To tackle the classic “how to prototype rich interactions” problem, Alexa Andrzejewski developed a process for translating static screen designs (from wireframes to visual comps) into interactive experiences using Flash. Requiring some fairly basic ActionScript knowledge, these prototypes proved to be a quick yet powerful way to bring interaction designs to life.

Andrzejewski, Alexa. Boxes and Arrows (2008). Articles>Web Design>Interaction Design>Flash

Scrolling and Scrollbars

Despite posing well-known risks, websites continue to feature poorly designed scrollbars. Among the ongoing problems that result are frustrated users, accessibility challenges, and missed content.

Nielsen, Jakob. Alertbox (2005). Articles>Web Design>Human Computer Interaction>Usability

The Standards Way to Do Dynamic Data

Somewhere in between presenting static information graphics and complex, interactive data dashboards there’s a need for a way to visualize moderately dynamic data on the web. Oftentimes the solutions you see implemented are clunky, for example, manually creating multiple frames of various data points and uploading them by hand.

Madden, Sean. Vitamin (2008). Articles>Web Design>Standards>Interaction Design

Want to know what’s RED HOT? Adobe Flex

I am not going to insult your intellence and try to teach you how to use Adobe Flex because frankly, I am just learning. Over the past few months, every major project and intitiative I’ve heard about has components built using Adobe Flex. With the emergence of Flash as a usable technology and ActionScript as a top notch coding language, Adobe Flex has quickly become the hottest new tool in ubertrendy web development circles.

Robbins, Kyle. ReEncoded (2008). Articles>Web Design>Flash>Interaction Design

Web Credibility Destroyers

When users visit your web site, their immediate impression of its credibility is based on appearance, colors, text fonts. Then, as they explore your site, other factors contribute to its credibility impact. Lose users here, and they probably will never return.

Streight, Steven. Blogger.com (2004). Articles>Web Design>User Centered Design>Interaction Design

Web Interactivity: Connecting People and Knowledge

We humans are wired to seek interaction with other people. Complex language and reasoning powers support your interactive nature. Your brain can retrieve and store unlimited amounts of information from everyday interactions and use that information to think, analyze, and solve complex problems.

Girolami, Frank. Between the Lines (2007). Articles>Web Design>Interaction Design>User Centered Design

What Does 'Rich' Mean?

Amid the current hype of Web 2.0, rich has become the de facto buzzword suggesting fresh, sexy digital products, often marked by glossy buttons with AJAX-driven behaviors. But what does rich mean to a UI (user interface) designer who wants to craft intelligent, compelling, and memorable interactions? Given current digital and technological trends, today's UI designers must deepen their understanding of richness. Such an effort will strengthen designers' vocabularies (adding legitimacy and weight to client discussions), and enable designers to temper judgment when it comes to applying rich capabilities.

Gajendar, Uday. Boxes and Arrows (2007). Articles>Web Design>Interaction Design

What's Wrong with (Almost) All Web Sites

The vast majority of web sites commit usability and design violations that make it hard for users to find relevant content and functions. These problems are not difficult to diagnose or remedy. How many of these "user crimes" is your web site guilty of committing?

Streight, Steven. Blogger.com (2004). Articles>Web Design>User Interface>Interaction Design

Winning Considerations for Interactive Content

User interface designers have more interactive options than ever for presenting content. So, we can make meaningful strides toward offering users the right content in the right place, at the right time, in the right amount. However, these rich options for interactively presenting content also come with a challenge.

Jones, Colleen. UXmatters (2008). Articles>Web Design>Interaction Design

Zebra Striping: More Data for the Case

I recently conducted a study into the helpfulness (or lack thereof) of zebra striping—the shading of alternate rows in a table or form. The study measured performance as users completed a series of tasks and found no statistically significant improvement in accuracy—and very little statistically significant improvement in speed when zebra stripes were implemented.

Enders, Jessica. List Apart, A (2008). Articles>Web Design>Human Computer Interaction>User Interface

Premium Rate Culture: The New Business of Mobile Interactivity    

This article considers a neglected but crucial aspect of the new business of mobile interactivity: the premium rate data services industry. It provides an international anatomy of this industry model and the ways in which it has been used to capitalize upon the surprising success of short message service (SMS) to provide a basis for the development of consumer markets for mobile data services. It situates this analysis within a wider consideration of the role of premium rate culture in the social shaping of interactivity in convergent media. Specifically, it looks at how premium rate services are being constructed in relation to telecommunications, television and the internet. The article concludes that although premium rate culture has rejuvenated innovation in broadcast television, potentially it may constrain the interactive potential of the mobile internet.

Goggin, Gerard and Christina Spurgeon. New Media and Society (2007). Articles>Business Communication>Wireless Web>Interaction Design

jQuery-Based Popout Ad: Part 1

Today I’d like to start an article series of three parts, the result of which will be a popout-style, jQuery-based box like the one pictured above, which I think strikes a nice balance on the obtrusion-scale.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Interaction Design>Ajax

jQuery-Based Popout Ad: Part 2

We're going to take the ad we built last week and animate it, as well as provide the user with a means to open and close the ad. We’ll be using jQuery for most of what we do, so you’ll need to include the jQuery library script at the top of your document for this to work (see the source of the example page to see how this is done).

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Interaction Design>Ajax

Generating Automatic Website Footnotes with jQuery

Generating footnotes for HTML documents in the past was always a slow, painful task — and every time I did it, I wondered why there wasn’t a better, easier way. Today, I’m happy to announce that I’ve come up with a better solution to web footnotes using the jQuery JavaScript framework and a few tags and attributes that already exist in XHTML.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Interaction Design>Ajax