Two More Usability Challenges for Designing Web Apps

by Jared M. Spool

Jared M. Spool compiled a list of three usability challenges design teams will want to keep their eye on when building web applications. In this article, Jared continues his commentary with two more challenges.

At Boston Coach, it’s clear they pride themselves on the quality of their town car service with a great on-time record, clean cars, and well-dressed, experienced drivers. Of course, that great experience needs to start from the first touch point—when the customer books their reservation. That’s why they invested in a sophisticated booking engine on BostonCoach.com.

Unfortunately, the great online experience only happens for users that visit (at press time) with a later version of Internet Explorer. Users with Firefox, Safari, and other browsers are out of luck—the site displays, but the auto-populating dropdown lists refuse to let users find nearby airports and other locations critical to booking the reservation.

Since Boston Coach mostly appeals to executives at large corporations, many of which are IE-only, most users have no problem with the site. However, with the gaining popularity of other browsers, more users will likely experience similar problems.

Designing an application to work well on all the popular browsers is just one challenge developers have. Last week, we discussed three challenges we suggest our clients keep their eye on. This week, we look at another two.

Challenge #4: Handling Contingencies and Exceptions

If you’re a TiVo owner, the company will occasionally notify you of a new service or software upgrade available for your recorder. The TiVo folks, knowing that you may be very excited to get the new features, gives you a chance to sign up for the priority upgrade list, allowing you to be one of the first in your neighborhood to get the newest and greatest.

Signing up is straightforward. The only information you need is your TiVo Service Number—a unique 15-digit-and-letter code that identifies your TiVo subscription. What? You don’t have your number memorized? No problem. If you’re a TiVo Online User, the very same web site that is asking you for the number has it stored away for you to access. Visiting your account information has it ready for you to access.

The problem happens when users try to get a little clever and utilize a common operating system feature: copy and paste. If the user selects the service number, copies it to their clipboard, navigates to the upgrade page, and pastes it into the requested form field, the system will present an error message.

This is because the account page displays the number with hyphens, which the input field can’t accept. We use hyphens and spaces in long codes and numbers to help us break them into usable chunks, such as when we’re copying them down or reading them to a customer service representative. If we glance away from the number for a second, it’s easier to find our place when there are convenient breaks.

However, applications get into trouble when they don’t follow these conventions and require users to strip out the hyphens and spaces. Not only does it inconvenience the copy-and-paste function, it’s more likely to produce input errors, since users are likely to miss skipped or duplicated digits.

Developers need to be ready to accept all sorts of information from users. Hotel site, BestWestern.com, uses an auto-completion suggestion mechanism, common on many sites, to help travelers find a place to stay on their trip. As the user types the first few letters, a menu suggests the matching locations.

Two things make the BestWestern.com example unusual. First, when the user finally selects a destination from the menu, not only is the city field filled in, but the state and country fields too.

Second, (and this is the really cool part,) they include cities that they don’t have hotel properties in. For example, typing in “new” finds “Newburgh, New York”. Best Western doesn’t have a hotel in Newburgh, but in neighboring Poughkeepsie. Suggesting cities, even those neighboring their property locations, helps reduce user errors and increase the likelihood of a reservation.

To handle this challenge, we suggest application developers carefully review the input fields. The team will want to look at the error messages, validation procedures, and review how they are handling special conditions, such as blank fields or extraneous characters. In addition, conducting usability testing and field studies, particularly watching users working with their own information, can help catch conditions the team might not otherwise think of. (We suggest 37signal’s book, Defensive Design for the Web, as a framework for the contingencies and exceptions we need to consider.)

Challenge #5: Living Inside the Browser

BostonCoach.com’s issues with cross-browser incompatibilities are a harsh reminder that web-based applications live within the shell of the browser. There are others challenges we see because of the world of browsers.

It doesn’t take long for a development team to realize that the Back button becomes their nemesis. Users, desiring to return to the previous page of an application, sometimes press back, almost instinctively. This is complicated by POSTDATA refresh prompts and potential data loss, even if all they do is hit Back, followed by Forward.

In our studies, when users desire to hit Back, it’s often because of a need to ‘undo’ or ‘cancel’ an operation. They’ve gotten to a state where they don’t want to continue and feel the need to return. It could be because they’ve gone down the wrong path, aren’t prepared to work with this page, or wish to adjust information on a previous page.

Once you’ve indicated you wish to purchase a ticket for a selected flight on Orbitz.com, each screen of the purchase process includes a “Continue” and a “Back” button. By explicitly providing a “Back Button”, Orbitz can save any appropriate user input before bringing the user, in a server-controlled context, to the previous page in the sequence.

Similarly, understanding when a user might want to print or share a page is also important. At computer retailer Dell.com, they understand that computers are a complex, expensive purchase that often requires approval from a higher authority, such as a boss or spouse. They provide functionality in their system configuration application to quickly allow users to email or print the desired computer description, making sharing and reviewing much simpler.

Again, spending time watching users interact with the application will help identify places where its life in the browser may present a challenge. This is particularly effective if the team can spend time in the user’s natural environment, such as their office or home, where they can see how they work and what equipment and software they’re employing.

Published here on March 11, 2008.