Ajax, Adobe Flex and Microsoft Silverlight have changed the web app landscape which is at the crossroads of growth and evolution. In this article, we examine web app usability as a key element of developing successful web apps.
Basics of Web App Usability
Usability is all about the user’s acceptance of the application as the right way of accomplishing the tasks. There have been many challenges in web app usability are because web apps are half desktop applications and half websites.
The following are the key challenges from a web app’s usability perspective
1. Navigation
Web apps need to clearly identify what type of navigation they are using.
Conventionally, users are used to the mental model of web page navigation including the hyperlinks, the back button, navigation out of a site with a hyperlink.
Bruce Tognazzini says that the web is an invisible navigation space and the user is unable to see anything of the vast spaces between pages. Hence, a web app should have a well defined navigation where the user can understand, comprehend and complete each task easily.
Each web app has to choose its navigation model whether it needs to be web oriented (eg. Facebook and other social networking apps) or it needs to be desktop like (Scrapblog, etc). Donna Maurer argues that if the web pages model is broken by an RIA, the interface should be such that users can clearly identify the navigation model that the RIA uses.
Key elements to be considered in navigation include
a. Back button / Full Screen mode
Users believe that the back button gives them control over the Internet and it is best to let it happen that way.
Opening the application in full screen mode and disability the traditional browser buttons indicates a direct defiance of the traditional web model. This challenge should be taken only if the users are going to find the application significantly useful and are willing to rise up the navigation curve to explore. Also it is usually a good idea to develop such applications for a niche segment rather than the mass market as users may need guidance.
RetouchMAX, a photo retouching services provider, has successfully used this approach and its users are comfortable with the added disadvantage of a new browser window opening up as it reduces the application turnaround time for service.
b. Refreshing part of a screen
Updating a part of the screen rather than reloading the page is a good idea provided the user understands what is happening in the application. Users find Amazon’s new designs incorporating customer review ratings in Ajax as cool.
2. Undo, Redo, Save, Autosave Features
Users may or may not expect undo or redo features based on their perception of the application. If the application has an undo and redo feature, usually it is in direct conflict with the back button. There should be a clear understanding of what features are undoable, which are redoable and how the user can use these features.
Desktop applications give the facility to save and backup files and folders as part of the operating system. Desktop applications also have a “Save as” or versioning of the application files. These facilities are not directly available in web apps. Where the web app is emulating a traditional desktop based app, the ability to autosave, save as a different version, backup and restore can be quite important.
From a usability perspective, the challenge is to create an interface that is consistent and enables the user to quickly learn to utilize these facilities of web apps.
3. Use of cues
Desktop applications are standardized in terms of the menu design and functionality, whereas web apps are not as consistent. The usage of the application should be clear to users, and where they may be some chances of confusion, there need to be enough visual cues to clarify the functionality of the task.
Perceptual Cues can also accelerate the discovery and use of hidden functionality to the users. Perceptual cues can be in terms of change of mouse cursors, hover effects like color change, small tooltip, highlighting of borders on mouseover for draggable components, title highlighted by a different color and bold sign, etc.
Standards for web apps are evolving and following pattern libraries like Yahoo design pattern library may improve the chances of user acceptance as many applications would use these.
4. Multi user collaboration
The single differentiator between web and desktop is interconnectivity within users. Most of the web applications share more data between users in comparison to desktop applications. E.g. BaseCamp allows project collaboration of remote teams, not easily possible with Microsoft Project, users share google documents, Salesforce enables online CRM, and social networking platforms.
Users expects to know what information will be shared and to whom. Web apps need to clearly identify the levels of users, how user personal and other details will be shared, what level of control the user has regarding that, etc. For example, in SlideShare, the presentation that I make can be shared to my contacts, the general public or by myself only. I can also delete the presentation at any time and others can comment on my presentation.
5. Differentiation with desktop applications
Web apps should NOT ape desktop applications, especially in design. The argument is aptly described by Bill Higgins in his article “the Uncanny Valley of user interface design” where he describes that minor deviations in web apps from the desktop counterparts would be amplified if the web apps resemble their desktop versions. He has given the example of Zimbra mail being quite like Outlook, but not exactly like it and hence being disliked. On the contrary, gmail is refreshing different than Outlook.
EBay developed a desktop application based on Adobe AIR to enable users to use the app as an alternative medium. The application has been redesigned from the start and is not a “Me too” of the EBay site.
RIA Design
. I am looking at finding something similar for Flex, till then we will have to be satisfied with black, the current background selected color for Flex.