News

Usability and Design for Rich Web Experiences

• By Lee Thé
• September 11, 2007

He demonstrated this idea through two online games (Desktop Tower Defense and Line Rider) that owe their popularity to quality of interaction rather than Halo3-class graphics. In Desktop Tower Defense you populate your desktop with a variety of point defense emplacements (gun towers and the like). Then waves of little soldiers attack your defenses, testing them to see whether you've discovered a way to block them.

One way of gauging the game's popularity is by looking it up on YouTube. Hundreds of end users have posted their favorite defenses, with the most popular garnering about 94,000 viewings over the past five months.

The YouTube results for Line Rider are even more spectacular: nearly 34,000 users have posted their line drawing landscapes, using simple tools provided by the game's Web site. The most popular user design has had nearly 4.7 million viewers over the last ten months, or one every six seconds. And all the game does is send a little guy on a toboggan down the line you've drawn, obeying the game's laws of physics as he goes. The main trick is to get the rider to jump from one line to another without crashing.

As Hoyt says, it's a rich Web experience, even though it's just lines. The end user feels it to be so. In both games, the landscape that the user builds is vastly simpler than the average game's landscape. But the important point is that it's the user's landscape. And, as YouTube proves, even other end users find other user-generated game designs to be fascinating.

Context Matters
Hoyt's key concepts for Web design are usability testing, paper prototyping and user-centered design. He wraps up these concepts in his admonition: "Don't study design, study life." And of course, this advice applies to applications as much as it does to games.

The application Hoyt chose to demonstrate is one everyone at the conference was sure to know: the IRS Form 1040. Apparently the Internal Revenue Service has a mandate to make the 1040 form more friendly and experiential to the taxpayer. Turbo Tax and other tax software companies have made a business out of improving the form's usability because people find it so hard. The IRS now wants to change that, and Hoyt is working on the project.

He has his work cut out for him. The online IRS Form 1040 provides a comprehensive example of the opposite of rich Web design. It's a data-centric application with many areas the user must fill in, but there's no context. If you scroll down you get line after line after line to enter. And then, say on line 23, you're offered a chance to attach a form, but that can't be done with the online version. And you'll see things such as "see page 29" -- in an entirely different document. And if you want to ask the UI for assistance, you can click on the Help button…but you'll get Adobe Acrobat help, not IRS help. Moreover, if you start filling out the form fields and get lost, the thumbnails available to the left of the document don't help you find your place, because the type is too small to read.

Turn Form 1040 Into a Rich Web App
Hoyt is reengineering the 1040 to be a Web page, not an Adobe Reader page (despite being an Adobe employee), to give users context. He did point out that much as you might hate Readers, there are over two million PDFs on the Web alone. The PDF isn't going anywhere soon.

Hoyt proceeded to demonstrate a Form 1040 prototype to show what he was talking about. It included contextual help throughout. For example, he replaced all of the "see page X" references with question marks you could click on. These will bring up a video that demonstrates how to do the function in question.

Next, he said he plans to make the form interactive with the IRS itself, so users could get live online help in filling out the form. He's reducing the form itself to a wizard, letting you fill in one field at a time in a logical flow, hit Next to go on, Back to go back as far as needed. This also enables the form builder to maintain less state at any given time. So it's easier to build as well as to use.

He also demonstrated an insurance company car accident report as an example of rich Web design. The form tends to eliminate the diatribes that can pepper claims when they're filled out by hand.

When using the form, you select the car's make, model and color. An image of the car appears onscreen (this could be done with HTML/AJAX). You can alternate between the image and the form, with the car becoming more detailed with each pass, culminating in the damage appearing on the onscreen car as well. Then you select the location of the accident, with that again becoming clearer as the user specifies more details.

The image helps the user to refine the claims description. The process generates a claim like the way a police sketch artist works with a witness.

Think Inside the Box
Hoyt said his takeaway here is that the desktop matters -- make it seamless. Use known entities with known patterns. Think inside the box -- use images and concepts already familiar to the user. Use resources such as the Windows Interface Guidelines, the Apple Human Interface Guidelines, and the Java Look and Feel Design Guidelines.

Next, Hoyt demonstrated Google Maps and Yahoo Maps, showing how their competition has led both to continuously enrich the user experience. Noteworthy developments include using mashups of user ratings with locations like hotels, routing from one place to another, and checking live traffic data for problems.

His bottom-line message is that richness isn't overrated, it's profit. Consider going rich, or your competition will. He cited research by Forrester indicating the effects of poor user experiences. They cause e-businesses to forfeit 25 percent of revenue and e-commerce sites to lose 44 percent of potential sales. Moreover, 72 percent of shopping carts are abandoned as the result of poor user experiences. On the other hand, rich Web sites increase online reservations by 35 percent, and they increase repeat site visits by 75 percent.

In general, Hoyt said customers are demanding desktop application-level usability combined with the global reach of the Web for both desktop apps and Web sites. Hoyt touted the new eBay San Dimas desktop application project as a "most excellent" example. (It was kind of an inside joke. San Dimas was the hometown of the characters in the Bill & Ted's Excellent Adventure movie and the app was named after that.)

Hoyt wound up the talk by proposing four areas of improvement to deliver a rich Web experience. Developers should work on making their sites "seamless, focused, connected and aware."

A site that is seamless provides "immediate feedback, responsive interaction and continuous workflow," he said. A site is focused when it is "small and simpler, efficient and adapted, and does one thing really well." Your site is connected when it has "automatic detection, location transparency and graceful degradation." Lastly, making Web sites aware means that they are "context sensitive" and they feature "acceleration and automation" and "transparent adaptation."

He noted that his employer's Adobe Integrated Runtime (AIR) product provides a cross-operation system runtime that allows developers to leverage their existing Web development skills in building and deploying desktop RIAs.