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