UIEtips Article: Five Usability Challenges of Web-Based Applications

Jared Spool

December 4th, 2007

Over the past few years, we’ve been studying the emergence of web-based applications and the usability and design challenges that accompany bringing them to light. We’ve also been concerned with the best practices for overcoming these issues to create web apps that actually delight users. During this time, we’ve been asking ourselves, “Are these best practices unique to web-based applications, or do these best practices apply to all web site design?”

The question has turned into a bit of a conundrum, with the answer being yes and the answer being no. While good design practice is good design practice and it applies no matter what you’re designing, you need to know who your users are, what they are trying to do, and how they expect to do it. You need to watch the users work with the designs you create, so you can learn where the designs are working for them and where they are failing.

However, designing for web apps is different than just designing a web site. It lives in a browser, it has complicated activities and edge conditions, and little things can have big implications, especially when they go awry. You need to know different things when designing for web apps than when designing for any other type of interaction.

In today’s UIEtips, we’re reprinting an article I wrote last year detailing five of the greatest usability challenges that web-app designers face. The problems and constraints designers are still dealing with today make this article just as pertinent as ever.

Read today’s article.

What challenges have you faced when developing web-based applications? How have you overcome these? We’d love to hear from you. Leave your thoughts below.

[Overcoming the challenges of web-based applications is just part of what we'll be talking about at the upcoming Web App Summit, March 26-28, 2008 in San Diego, CA. You can be part of that event and receive your limited edition Web App Summit iPod nano by registering before 12/11. More details here.]

One Response to “UIEtips Article: Five Usability Challenges of Web-Based Applications

  1. Paul Willard Says:

    Challenge: Site visitors do not read. This can be true for all but content web sites, but it is an especially important consideration for web applications.

    Solution: Create a site that can convert whatever activity you are hoping your visitor/customer will accomplish without needing to read (much), while ensuring depth of information is available to those that want it.
    - Color is key in design. The bulk of your content and site (60%ish) should be a base color that is pretty neutral. Think black or blue here. 30% should be your accent color which is used to divide sections of the page and highlight or frame logical places that contain attention. And 10% should be the action color, reserved for wherever you want the user to click for “next”. Over-use of the action color or even the accent color is very distracting to web apps and hurts conversion.
    - Accept greater back-end complexity to avoid error messages and simplify the front-end. For example, when taking a dollar amount in a filed, accept “$”, “,”, “.” and interpret them appropriately rather than presenting the user with an error message when they put a dollar sign ($) in front of the amount. Even though you put a $ visual in front of the text input box to let them know they did not NEED to enter a dollar sign, if they enter it, accept it and move on. Due to the scale affect mentioned in Jared’s article, it is worth your time to develop robust input parsing rather than returning the dsu (dumb-sh*t user) error message.
    - Develop and adhere to standards as much as possible. Use a standard page title size, location, tone, and tense. Have the standard action button, a standard action color highlighting what you want visitors to accomplish, put the button in a standard location (bottom right?) above the fold. Use standards to show required fields throughout your site, either footnoting or bolding required fields or optional fields depending on what will keep your interface simplest. Adhere to standard web page layouts which users have become accustomed to such as logo in upper left linking to corporate home page, utility navigation in upper right next to search input text box, footer nav with site terms, site map, and corporate non-consumer uses, top tab and/or left nav structure with breadcrumbing, etc.
    - Create a header, footer and navigation which blends in as a single ignorable unit so as not to distract from whatever you are trying ot focus the visitor on. Of course, navigation clarity is paramount, but you can design it in such a way that once a user has glanced at it and figured it out, it becomes like wallpaper on your site and only gets a visitor’s attention when the visitor actively applies their attention to it.
    - Create a way for users to get more information about fields if desired while maintaining the simplest application possible. A new web standard developing along these lines might be dashed underlines (half-hyperlinked?) for keywords with brief descriptions in rollover text and more extensive descriptions available in old school pop-up windows or web 2.0 foldouts.
    - Allow configurability, but do it in a way that does not overcomplicate for the new and casual users of the site. A good example here is the google search preferences settings. There is quite a bit of back end complexity, configurability, and power available, but only a small hypertext link on the main page, not a control for every field in the output. Balance this carefully, showing the coplexity only to those that want to find it and can handle it.

Add a Comment