This blog post is the fourth and last part in a series on web application usability. As stated in the first post, users will get frustrated and stop using an application if it is not easy to use. In this series of blog posts some examples are given on improving the usability of web applications. These examples also hold for ‘normal’ websites, but are specifically important for web applications. In this final blog post in the usability series the topic is the back button.

Standard usability guidelines
Next to the three examples which were elaborated on in the previous posts, all normal usability guidelines should be followed as well. To name just a few:

The application should be accessible in different browsers and in different screen-resolutions. Do not exclude, for example, all users with a firefox browser. For the same reason that a market sales-person sells his apples to everybody, and not suddenly decides not to sell to people wearing a hat (or blue shoes or….).

Menu items, action buttons and hyperlinks should be labeled descriptively so you do not have to guess what will happen after selection. Next to that, the active menu item or process step should be displayed differently (for example in a different color) to make it clear where the user is.

Do not only show flags as a language selector, but also show the name of that language. A fine example is the language selector of Last.fm. See the two screenshots on the right.

Wrap-up
The usability guidelines for web applications have many similarities with the guidelines for websites. The foundations of website usability stem from traditional software development. But actually user requirements for web applications are a lot stricter than they are for traditional software.

This blog post is the third part in a series on web application usability. As stated in the first post, users will get frustrated and stop using an application if it is not easy to use. In this series of blog posts some examples are given on improving the usability of web applications. These examples also hold for ‘normal’ websites, but are specifically important for web applications. In this specific blog post the topic is the back button.

Back button
The back button is the second-most used navigation feature on the web (the most-frequently used is following hypertext links). Users know that they can try any link on a webpage with the certainty to get back to familiar terrain by one or two clicks on the back button. The back button therefore enables a website visitor to ‘explore’ the website. In traditional software applications the ‘undo’ command serves this purpose. It has been a strict design guideline to include an ‘undo’ functionality in software applications. So it is important that the functionality of the back button works in web applications.

The two screenshots on the right give a good example of how the function of the back button is broken in a (flash) web application. In the first screenshot the starting point is displayed. In the second screenshot the color of the shirt is changed. Unfortunately it is not possible to undo the color change (note that the back button is not clickable). On the upper right in the application there is a reset button but that resets everything. In the present tool it is not possible to undo the latest change. It would be possible to build in an undo button within the application, but since it is a web application users expect the back button to have that function.

Next up in the series ‘Usability in web applications’ is standard usability guidelines.

This blog post is the second part in a series on web application usability. As stated in the previous post, users will get frustrated and stop using an application if it is not easy to use. In this series of blog posts some examples are given on improving the usability of web applications. These examples also hold for ‘normal’ websites, but are specifically important for web applications. In this specific blog post the topic is nonstandard scrollbars.

Nonstandard scrollbars
According to Jacob Nielsen in several applications, users missed many of the options because of nonstandard scrollbars. A scrolling control is a standard user interface element in application design, and (as always with usability) it should be designed in accordance with users’ expectations. As stated by Nielsen, users often overlook nonstandard scrolling controls, and thus never get to scroll the lists to see the hidden options. So only use scrollbars that actually look like scrollbars. Horizontal scrolling is another point to avoid. On the web, users only expect vertical scrolling and no horizontal scrolling. And like stated before, all standard design elements should meet user expectations.

According to Nielsen there are five essential usability guidelines for scrolling and scrollbars:

• Offer a scrollbar if an area has scrolling content. Don’t rely on auto-scrolling or on dragging, which people might not notice.
• Hide scrollbars if all content is visible. If people see a scrollbar, they assume there’s additional content and will be frustrated if they can’t scroll.
• Comply with GUI standards and use scrollbars that look like scrollbars.
• Avoid horizontal scrolling on Web pages and minimize it elsewhere.
• Display all important information above the fold. Users often decide whether to stay or leave based on what they can see without scrolling.

Next up in the series ‘Usability in web applications’ is the back button.

Usability is a quality attribute for ease of use. Research has shown that usability is a very important factor for websites. It actually is a limiting condition. If a site is not easy to use, a lot of visitors will navigate to other websites to find what they are looking for. That is the cruel thing about the web: competition is just one click away. Usability is also a key factor for web applications. If an application is not easy to use, users will get frustrated and stop using the application. This blog post is the first part, written by Jurjan Huisman, in a series on web application usability. In these blog posts some examples are given on improving the usability of web applications. These examples also hold for ‘normal’ websites, but are specifically important for web applications.

Electronic forms
In electronic forms the required fields should be marked to actually show that these fields are required. When a user fills out the form and presses the submit button, all the required fields that have not been filled out should show an error message. This error message should not be displayed in a pop-up, but right next to the relevant input field. To take this even one step further, ajax-technology can be used to display error messages on the fly. For example, ajax can be used to notify the user of a wrongly spelled e-mailadress.

As an addition to the error messages other aspects of electronic forms are important as well: the cursor should automatically be positioned in the first data entry field and pressing the Tab-key must lead the user through the input fields in a logical reading order. Obviously, it is a big plus when information that can be filled out automatically is done so. For example, when someone fills out his or her postal code and house number, the streetname and city fields are automatically filled out. Next to that, when you hit the back button of the browser, all the previously filled in data of an electronic form must not be lost.

Next up in the series ‘Usability in web applications’ is nonstandard scrollbars.