Previous l Next

 

Good GUI Design: Desktop vs. Web Environments

by Rob Harris

Good graphical user interface (GUI) design is more important than ever, given the proliferation of software applications and Web sites. GUI design principles were first defined for desktop-oriented software applications, when the Internet was barely known by most software users. Those GUI design principles were later adopted and modified for use in Web design. This article reviews some basic rules of good GUI design in the desktop environment, explores why those rules might differ in the Web environment, and, finally, summarizes the similarities and differences in good GUI design for both environments.

Background

Although the GUI emerged as the interface of choice in the 1980s, when software creators developed programs to work with Apple and Microsoft-driven computers, it was not until the 1990s that GUI design became widespread. Early pioneers focused on developing features to please their technically savvy colleagues, who were willing to grapple with command line interfaces and embedded codes to navigate their way though an application. But as software use spread in the 1990s, software developers were forced to design for the growing population of non-technical users, and hence good GUI design became paramount.

Desktop GUI Design Basics

There are as many GUI designs as there are GUIs themselves. And, of course, what constitutes good design is subjective to some degree. One of the best papers I found on the subject was “Principles of Good GUI Design,” by James Hobart (Hobart, 1995). I will use the principles and rules he outlines as the basis for my article.

According to Hobart, one of the first rules of good GUI design is that software programs must be intuitive, with little or no explanation needed to understand how to navigate the application (Hobart, 1995). Hobart further contends that maintaining a high rate of speed, or quick responsiveness, is also important, as users grow impatient and abandon an application when it fails to respond quickly enough (Hobart, 1995). With those two guiding principles, Hobart lists the basic rules for good GUI design, which I have condensed to the following six (Hobart, 1995):

1. Understand People. People learn by recognition, rather than by recall, and respond better to, say, multiple-choice prompts than requests to provide data from memory.

2. Be careful of Different Perspectives. Words, symbols and metaphors do not always translate across cultures and societies.

3. Design for Clarity and Consistency. Application interfaces will often contain several words that describe the same thing. Designers should use words that are commonly understood and use them consistently throughout an application.

4. Provide Visual and Audible Feedback. Users appreciate message boxes that include progress indicators when a step or operation takes longer than 10 seconds. Audible feedback can be useful to notify the user of an impending serious problem. But be careful not to overuse audio feedback, as it can annoy users, and may even disturb other users sitting nearby.

5. Provide Keyboard Support. While users embrace the mouse as the primary navigation tool, keyboard accelerators (e.g., F1 – F12, Ctrl and Alt keys) can also be incorporated. Hobart recommends complete and equal keyboard and mouse support for all menu and window operations.

6. Provide Traceable Paths. Designing an intuitive menu structure is the first step, but descriptive title bars within dialog boxes can be a big help to users who find themselves lost in an application

Desktop GUI Design vs. Web Design

Although Hobart drafted his rules to address the PC desktop environment, many of the rules apply to good Web design. Before highlighting which rules do and do not apply to both environments, it might be instructive to first review the differences between the PC desktop and Web environments and their users’ expectations and needs.

Different Environments, Expectations, and Needs

First, most desktop applications are self-contained environments. They can look entirely unique, and employ application-specific terminology that users learn and adopt over time. For example, when designing GUIs for an application, a developer’s choice of colors might be limited to only those colors that adhere to the application manufacturer’s standards. Similarly, the developer might have to use terminology unique to a particular application, technical field, or audience.

Secondly, external influences may provide incentives for the software user. For example, the application may be a required tool of the user’s employer, or the software may greatly simplify an onerous manual task, so the user feels inclined to overlook its faults. Users may also have a great deal of time to learn how to navigate the application, and they may even receive training on it.

Web site designers, in contrast, do not have the captive audience a software application designer may have. Web users typically do not seek or receive training to use a particular Web site. Instead, users want to intuitively grasp how to navigate a site and quickly locate information or perform a function. As Jakob Nielson pointed out in his article “The Difference between Web Design and GUI Design”:

It is rare for a user to spend more than a few minutes at a time in any given site, and users’ navigation frequently takes them from site to site as they follow the hyperlinks. Because of this rapid movement, users feel that they are using the Web as a whole rather than a specific site.… [Users] demand the ability to use a site on the basis of Web conventions they have picked up as an aggregate of their experience using other sites. (Neilson, 2003)

And while designers of desktop software can use deep hierarchical structuring for their applications, this approach does not work as well in a Web environment. Web users seem to prefer less hierarchy in a Web site, as they grow disoriented and discouraged if they have to click numerous times to locate something on a site.

The increasing number of companies trying to simplify their Web sites is evidence that consumers are growing dissatisfied with deep hierarchical structures in Web sites. For example, Dell Computer recently revamped its Web site to display a broader selection of offerings, and then redesigned the paths to each product to reduce the number of clicks it takes a customer to get to a product. After the redesign, Dell reported an increase in usage of its site, particularly those areas of the site it wished to emphasize. (Tedeschi, 2003)

Similarities

There are many more similarities than differences between good desktop GUI design and good Web design. The two overriding principles of good GUI design that Hobart outlined, the importance of intuitiveness and quick response time, are also key in designing for the Web. Designers must ensure that users can figure out on their own how to navigate their Web site, as there will be no time to educate them on how to proceed. And quickly responding to user input is vital on the Web. Consequently, the graphics included on Web sites should not be allowed to bog down the transmission lines. (Batschelet, 2001) Designers should flatten out the structure of their sites, as users want to access information using the shortest number of clicks possible. (Neilson, 2003)

Returning to Hobart’s rules, I have identified and listed other similarities and differences:

1. Understanding People is still absolutely critical, particularly understanding one’s target audience. Search engines like Google provide users with multiple Web sites to choose from, and users can abandon a site quickly if it does not speak to them.

2. Designing for Different Perspectives is required on the Web, as Web sites can be reached by people from very diverse backgrounds. Many sites (like software applications) are available in multiple languages, and targeted toward specific countries and regions.

3. Clarity and Consistency is very important on the Web. A Web site does not exist in a vacuum, but is instead connected to a larger whole, as Neilson pointed out. Thus it is imperative that Web designers use conventional language and terms as they are most commonly defined and understood.

4. Providing Visual & Audible Feedback. Visual feedback is perhaps even more important on the Web, because remote access can often slow down transmissions, and lead to user frustration. Based on personal experience, I appreciate knowing how long I may need to wait to complete an operation, particularly if the operation takes longer than 5 seconds. However, I would argue that audible feedback (as a navigational tool) is probably less important to most Web users than to desktop users. Navigating the Web is still largely a visual experience. Because users do not typically receive audible cues, they will not likely understand a cue’s meaning.

5. Keyboard Support is far more important in desktop environments than on the Web. People generally use a mouse to navigate the Web, and only rely on the keyboard to key in alphanumeric data. Also, unlike with PC-based applications, most users do not have the time to learn how various accelerator keys are defined, and it seems unlikely that users would learn such short cuts for individual Web sites.

6. I would also underscore the need for Traceable Paths, as users need to feel secure, and not lost, on a Web site, especially those sites with deep hierarchical structures. Moreover, telecommunication lines can falter and a user’s ability to navigate back and forward may be cut short at any time. It also seems likely that traceable paths would contribute to the sense of flow, which Barnes describes as critical to a Web users sense of “a more positive subjective experience.” (Barnes, 2003)

Conclusion

Although the desktop and Web environments are very different, both can benefit from similar rules of good GUI design. For example, both environments benefit from intuitive GUIs, and techniques for reducing the time between command selection and application response. Desktop designers can define the terms used in their applications, and can offer unique navigational methods to the user. Web designers, in contrast, must take into account the users’ “aggregate experience” with other Web sites, and always remember their own Web site is part of the users’ larger WWW experience. Thus the terms, language, and navigational methods used on Web sites should conform to widely understood standards. A sense of flow is also probably more appreciated on the Web than in a desktop environment. Accordingly, Web designers should be sure to provide traceable paths that will likely contribute to a positive user experience.


Sources

Barnes, Susan B. Computer Mediated Communication: Human Interface Across the Internet. (Boston, MA: Allyn and Bacon, 2003), 177

Batschelet, Margaret. (2001) Web Writing/Web Designing. Needham Heights, MA: Longman Publishers, 37.

Hobart, James. “Principles of Good GUI Design.” Monitor. September 1995 <http://axp16.iie.org.mx/Monitor/v01n03/ar_ihc2.htm>

Neilson, Jakob. “The Difference Between Web Design and GUI Design.” Alertbox. 1 May 1997. <http://www.useit.com/alertbox/9705a.html> (May 1997).

Tedeschi, Bob. “Web Redesigns for the Holidays.” New York Times, 27 October 2003, Sec. C. <http://www.nytimes.com/2003/10/27/technology/27ecom.html>