![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
In this article I will go into more detail, identifying and comparing specific aspects of the GUI and Web environments, and suggesting some design strategies for dealing with the differences. Many of the differences result from fundamentally different user models. Referring back to the iceberg analogy, this is the part below the water line and beyond simple look and feel.
Strategies for dealing with user model differences are beyond the scope of this article. For these differences my intent is to create an awareness and appreciation, to stimulate your thinking, and motivate you to investigate further. A good place to start is the Design section of IBM's Ease of Use Web site (see Resources). At a minimum, everyone who reads this article should take away at least this: Do not blindly copy GUI techniques in Web applications. Some are OK, others are entirely inappropriate. You can avoid disaster by always involving users during design. Understand who your users are, and have them experience the design even if it's only pencil sketches on paper. A variety of approaches for getting users involved in early design are well proven (see Resources for starting points).
A few of the GUI-Web style differences are quite concrete and appropriate subjects for design guidelines. I'll provide some design guidelines for key aspects specific to designing easy-to-use, Web-based applications in future articles, including use of UI controls in forms; Web page navigation issues and approaches; the use of presentation elements such as windows, dialogs, and messages; user assistance techniques; and aspects of visual style.
The term GUI, as used here, includes aspects of the desktop metaphor, the traditional windows, icons, menus, and pointers (WIMP) interface elements. Web-style aspects reflect primarily the evolution of information-centric sites to e-commerce and e-business sites. The differences between GUI application designs and traditional information-centric Web sites are marked. There will be pressure to close the gap on many GUI-Web differences with the continued evolution toward a full e-business application paradigm. Here, I identify causes of the differences between GUI and Web styles, note how these differences affect users as they go about their work, and encourage further thinking about the application-centric evolution that is already underway on the Web. I hope to facilitate a better understanding of the options and approaches available to us as designers in seeking to create the best possible user experience.
As a framework for this analysis, I've identified a few key aspects of the human-computer interface apparent in both GUI and Web-style interfaces:
- Install/setup
- Key user concepts
- The userÂ’s space
- Presentation elements
- Navigation
- Interaction
- Visual style
- User assistance
- Capability & efficiency
- Integration & consistency
- Security/availability
- Uninstall/cleanup
In many ways, using a GUI is similar to using the Web, but there are significant differences as well. In general, people find surfing the Web easy -- easier than using a word processor, for example. But surfing is not a very complex task. Except for the browser mechanisms (such as bookmarks and browser options) the user model, or set of concepts that users must understand, is pretty simple. Users do get lost and disoriented while surfing. This is often a reflection of a poorly conveyed sense of place or location, so conceptual aspects of a user's model do come into play even in simple Web browsing.
A perhaps more relevant and important set of issues arise when we consider the evolution of the Web to support a rich set of business-to-business (B2B) applications, such as employee benefits, purchase orders, inventory control, and the like. Each of these applications will present a user model consisting of a variety of concepts, not at all unlike today's GUI applications and even their "green screen" counterparts. The list of aspects presented here are key to creating the user experience for such applications. However, they represent a snapshot in time that is likely to change due to additional differences and new approaches that will become evident as more and more businesses adopt the B2B paradigm.
GUI users install, configure, personalize, and upgrade programs.
Web users link to pages, read them, fill out forms, register for services, occasionally download and save things, and sometimes install a plug-in, although such installations are becoming fairly transparent.
Except for the browser itself, the Web user has no notion of programs. With "Internet appliance" devices the browser is the entire environment. Web users tend to be much less aware of the mechanics of the computer. However, setup for the Web often involves dial-up and other connection parameters that can be daunting to even the most experienced user.
In general, users in both environments do not want to install or set up anything. They simply want functions to work out of the box. The more automatic and transparent you can make install and setup tasks, the more youÂ’ll please most users.
In the GUI world an operating system runs programs that users employ like tools to perform some task. While the modern OS trend is to a more object-orientation that allows users to focus on their data, programs are still quite evident. Users start programs and open data files.
In the Web world a browser is used to display pages from various Web sites, which typically represent a company, an organization, or a significant subdivision of one. Users navigate to a site and browse its pages. Some users participate in transactions for e-commerce and e-business. Occasionally users download something.
A key user concept to be reinforced on the Web is the sense of place. Users need reassurance and stability. They need to know where they are, where they can go, and which links will take them somewhere else within the current place versus to a different place. Web page designs employing aspects of visual consistency across all pages can contribute significantly to creating a sense of place. Similarly, by adopting some conventions for the visual presentation or layout of links, you can convey the result of taking the link (whether it's within your site or to a different site, for example).
The GUI environment controls and constrains a user's access to data and the space made available to them in which they can store and manage their data. The immediately accessible data typically resides on a local disk drive or LAN that is owned and organized by the user, or the user's associates. Data is typically created and used by known and trusted sources. There are notions of private and shared data, the user's space is finite in size, and the properties and general capabilities are dependent on which file system is used.
The Web -- at least the Internet part, as opposed to intranets -- is full of unknown content, with highly variable organization, and little accommodation for supplying or organizing personal data. The browser's bookmarks provide some opportunity for organizing links to information, and personal portals provide an additional potential for organization, but for data supplied by others not by the user. Typical users don't put information onto the Web. Some may be able to publish their own pages, but it's not the norm. There's not a strong private data-store notion. The size of the space is immense, essentially infinite from the perspective of most users.
Web users need capabilities that help them organize information they use repeatedly and access it quickly. Current capabilities as implemented in typical browsers are rudimentary and problematic. Web portals tend to be too restrictive in terms of the information that can be organized. Users need capabilities to identify information anywhere on the Web, to organize their views of it, and to provide easy access to it.
The main presentation elements for GUI applications are: primary windows, with a client area for the presentation of data; secondary windows for dialogs and messages; and menu bars, toolbars, and pop-up menus. All applications use essentially the same basic presentation elements provided by the platform's toolkit, except for some entertainment, multimedia, and 3D applications that take over or establish their own environment. Many of the GUI presentation elements are also highly transient, dynamically appearing and disappearing, such as pop-up windows, dialogs, menus, and messages.
Most Web users experience two worlds. The browser is typically a GUI application so users see many of the traditional GUI presentation elements. However, the client area of the browser displays the Web page, which can present any combination of text, images, animation, audio, and video. Web page tools make eclectic designs easy to generate. Web page designers sometimes get carried away with this flexibility, frequently to the confusion of the users. There are fewer standards than in the GUI world, but common toolkits and conventions are being proposed and adopted.
Web-specific characteristics, such as latency and some users' reluctance to enable scripting and other page-embedded techniques, significantly influence design options for page presentation.
GUI users employ menus, trees, lists, dialogs, and wizards, and receive near instant response time. Navigation mechanisms are standardized by UI toolkits and style guides. They are supplementary to the information in the client area. Navigation is a weakly-established concept in GUI applications -- function/action dominates, and navigation is sometimes a side effect. Some push buttons cause navigation, others don't. For example, the OK, Cancel, and Help buttons shift the user's focus to a different window while Apply does not. The ellipsis on "routing" menu choices, like "Save as..." conveys a fairly strong sense of navigation. Wizards also create a strong sense of navigation forward and backward in a basically straight-line sequence of dialogs.
For Web users, navigation is a significant and highly visible concept. Web users employ links and bookmarks, and they type URLs. Latency is very significant. Only a few standards are well established, such as the Back button. Navigation mechanisms are more typically an inherent part of the page design, therefore there tends to be quite a bit of variation, or lack of consistency. This is one of the most confusing aspects for users.
The notion of place, or establishing a context so that users know where they are and where they can go is extremely important on the Web. Designers can employ two basic paradigms -- go to and bring to me. In the "go to" paradigm users consciously choose to go elsewhere, and are aware when they take such a link. The context changes distinctly and users are not surprised. In the "bring to me" paradigm, users essentially ask that information be "brought to them" within the context of the current page. This paradigm preserves context, stability, and a sense of place. Each paradigm is appropriate to specific situations, but that's another article.
The standard interaction techniques for GUI designs include double-clicking, drag-and-drop, cut/copy/paste, clicking menu choices, pushing buttons such as OK and Cancel, expanding and collapsing trees, and selecting choices from lists. These interactions typically apply within a context established by the client area of the window representing the currently active program.
The basic Web page interaction is a single-click on a link. This simple click, however, can cause major changes in context, such as switching to a different Web site, or changing the displayed information and the content of a navigation frame that provides links to other pages. These results are often subtle and are frequently overlooked by users. In addition, the browser provides parallel and sometimes confusing mechanisms like the Back button, History list, and so forth. The distinction between an action and a link, or navigation, is not very tangible. For example, some e-commerce Web sites implement Checkout using a pushbutton while others use a simple HTML link.
Except for entertainment and multimedia applications, visual design in the GUI environment has been typically prescribed and constrained by the platform toolkit. Visual creativity in the client area was allowed but not made extremely easy, usually requiring the skills of both a graphics designer and graphics programmer. While some user options and style choices were provided, there was little potential for significant user choice or personalization.
Visual design is what the Web is all about. The Web fosters a more artistic, individual, and unrestricted style. Visual designers have great freedom in the use of visual metaphors, even though issues such as bandwidth sometimes limit them. Visual design is also complicated by having to constantly adapt an idealized presentation to changing window sizes and aspect ratios, and a visual design often must accommodate lowest-common-denominator browser and display capabilities. However, users still have limited options, provided by the browser and sometimes by site-specific choices. For many companies and organizations the Web site reflects their identity and image. They labor over its appearance and are loathe to allow others to change it.
The adaptation of more traditional B2B applications on the Web may cause a swing back toward more traditional GUI designs, but we will not want to give up the visual appeal gained from the Web, so resulting interfaces are likely to be richer hybrids.
The help system is perhaps the most ubiquitous aspect of many GUI environments in which it is an adjunct to the system and each application. It is accessed through standard mechanisms such as the F1 key and Help menus. Platform-supplied help systems support authoring and use of hypertext-linked help information. Information and status areas, pointer-based hover-over or fly-over help, and tips are typical for quick mind-jogging assistance. Online user manuals, tutorials, readme files, and technical support contact information are also commonly provided.
Web pages offer no similar prescribed help system. Assistance information is typically integrated within the page itself, and hover-over or fly-over help gives a quick preview of a link's destination. There are no user manuals, at least not distinguishable from the other pages of the site. Most assistance information is built-in. While many sites do provide some sort of customer service or technical support, it is more often associated with a product or service they offer, as opposed to providing assistance on using the site itself. The ability to send e-mail to the webmaster is often the only site-oriented assistance provided. Because the browser is typically a GUI application, it may provide assistance on its use through the platform's Help system. The user sees two different and separate assistance approaches.
In both environments, the most successful applications will be those that require little, if any, Help, in the traditional sense. An easy-to-use interface typically embodies any information the user may require. For example, providing lists of choices is known to be superior to the use of entry fields in most every case. Over the years, many such "assistance" mechanisms have become so widely used that we take them for granted. This is a good trend. Types of additional user assistance that are often useful answer the following user questions:
- What is this?
- What does it do?
- How do I make it do it?
- What is its role in the overall scheme of things?
The answers to these questions, in terms of design strategies and interface design techniques, will be presented in a subsequent article specifically addressing user assistance.
Capability and task efficiency
It's often said that "you can do anything with programming," and that's about as limited as the GUI world gets. Capabilities are proportional to the speed, memory size, and configuration of the hardware platform, and sophistication of the software.
On the other hand, the Web world is a bit more constrained. In addition to constraints imposed by the hardware platform, the Web world is subject to the limitations of the browser, (D)HTML, Java technologies, JavaScript, the willingness of the client site to provide and support such functions, and the willingness of the user to allow them, based on latency, security, and privacy concerns.
As with capability, the efficiency of performing a task in a GUI environment is subject, to a large extent, to the amount of programming that will be undertaken to support it. In any case, the programming is typically targeted to a specific audience with specific tasks in mind.
The Web introduces some inherent limits on efficiency, such as the design of the browser, and widely varying network capabilities. Tasks are frequently intended for anyone and everyone, and the actual user audience is often not well understood. The need for this to change will become more evident in B2B applications, maybe even more so because many of the constraints of the GUI world are removed with Internet access from anywhere at any time.
Much work has been done attempting to determine optimum splits of function across client-server and multi-tier networks. So many variables are involved, it's not practical to attempt a discussion here. What should be kept in mind at all times is the user experience. Whatever the design strategy and network configuration, remember to validate the overall design from the user's perspective, considering such factors as number of time-delayed interactions, length of delays, and exposures to security and privacy compromise.
Consistency within a GUI environment is frequently a prime directive, and cross-application consistency has been a primary goal of each platformÂ’s UI toolkit. Self-consistency within a platform allows users to transfer knowledge gained using one application to the use of another, at least the knowledge involving the mechanics of the interface itself, if not the concepts of the applications involved.
On the Web, each site tends to establish its own identity. With few constraints imposed globally, through the use of common capabilities such as (D)HTML and Java technology, it has been up to each site to establish a scope of design consistency. Many organizations enforce standards throughout their site, whether defined by audience, geography, topic, or sub-organization. Transfer of users' knowledge with respect to knowing where they are, where other relevant and needed information resides, and how to get there, are still compelling reasons for self-consistency at some level.
The second prime directive for GUI applications has been integration and interoperability. All applications are expected to integrate seamlessly into the platform environment (supporting cut/copy/paste to the clipboard, for example), and most major applications go to great extents to provide import/export capabilities that enhance interoperability. The GUI toolkits and components are key elements in allowing program developers to easily support these facilities.
A basic level of integration is apparent within most Web sites, for functions such as navigation, printing, and so forth. But this is more an example of self-consistency than integration. Web sites tend to seek individual distinction -- platform independence and identity are the goals as opposed to interoperability between sites. This is likely to change with the evolution to a more business-to-business environment.
Consistency is always relative. That is, something is consistent with respect to something else. What is so often overlooked is the major opportunity for consistency with the most important aspect -- the user's expectations. Perhaps the origins of self-consistency should lie more with the user than with platforms, applications, or sites. What if a user could access applications and content, and use interface mechanisms that were all adapted to fit his or her specific needs and expectations?
Both security and reliability can be tightly controlled in the GUI environment, proportional to a willingness to invest. Data access can be closely controlled even though most of the typical sources and users are trusted. Data sharing and password protocols are common. Security has not previously been an issue that the typical home PC user had to be concerned with, or that required any more than some physical level of access control. Reliability is typically a statement about the client computer and sometimes a local area network, which are both within the control of the user or the user's organization.
The Web is renowned for security exposures, which remain a major inhibitor to use for businesses and consumers alike. Browser-provided security options are typically not understood by average users, and when employed often have undesirable, function-limiting side effects, such as evident when cookies are disabled. Attempts are being made to simplify and create a more trustworthy appearance through security levels, and the use of passwords is becoming more common, although problematic as well as the numbers of passwords required and password mechanisms such as wallets increase. On the Web, reliability exposures are spread across the Internet and a variety of suppliers. In addition to local user-controlled elements, users are subject to disruptions caused by phone line and cable providers, Internet service providers, and hosting servers, as well as the remotely accessed sites and applications themselves.
Access control issues are greatly amplified on the Web, especially when users become persistently connected. These issues will become extremely relevant to everyday use. Users will seek reassurance that the environment is safe and they will expect it to be so automatically with little, if any, effort required on their part. They will also expect reliable connections and access to Internet services and applications. Design strategies should provide for backups and alternate routings to create the appearance of 100% availability. After all, what good is anytime, anywhere access that lacks completely reliable availability? UsersÂ’ expectations are being raised significantly.
While supported in the GUI world, uninstall is not a frequently-used action. However, when it is used it is often problematic, leaving behind residue -- or worse, removing files required by other programs and directories full of temporary files.
Uninstall is currently not a relevant concept in the Web world, with the possible exception of browser plug-ins, which is beyond understanding for typical users. While cleanup of bookmarks, caches, and other out-of-date information is relevant, these are not actions that users want to do or even be aware of. Users expect such maintenance to be done automatically and transparently.
Design strategies should target automatic maintenance and tuning that keeps the user's environment running in tip-top shape. When actions are provided to allow users to remove function from a system, they should be based on a good understanding of users' needs, and be fail-safe.
Think about the differences between designing for the Web and designing traditional GUI applications. In some cases specific design guidelines are available. In the other cases, consider how the two environments differ when you design, at least to the extent that you don't blindly copy GUI designs in Web applications. Overall, the best design approach is one that involves users at every step. Only by understanding users, their goals, strategies, tasks, and motivations, can we as designers provide an appropriate mapping to the various design environments.
-
Visit the IBM ease-of-use site
for the latest in design guidelines, from designing for the Web to out-of-box-experience.
Also, find out how you can participate in IBM's annual worldwide conference
on ease-of-use: "Make it easy 2001."
- Usability Professionals' Association
Web site offers a variety of approaches for getting users involved
early in the design process.
Dick Berry is a Distinguished Engineer with the IBM Ease of Use Architecture and Design team in Austin, Texas. His focus since 1980 has been the design of human-computer interfaces, user object models, and methodologies for ease of use design and development. He was the lead architect for several generations of IBM’s Common User Access (CUA), a user interface style initially published in 1987. Dick has also been an innovator in designs for visual programming, and the use of virtual-reality techniques to create a productive 3D user environment for office tasks (IBM RealPlaces). Dick has 45 US patents in the field of user interface design. He is an elected member of the IBM Academy of Technology and an author of IBM's Ease of Use Web site. You can contact him at reberry@us.ibm.com.
Table of contents
- A framework for analysis
- Install/setup
- Key user concepts
- The user's conceptual space
- Presentation elements
- Navigation mechanisms
- Interaction
- Visual style
- User assistance
- Capability and task efficiency
- Integration and consistency
- Security and reliability
- Uninstall/cleanup
- Conclusion
- Resources
- About the author
- Comments
Next steps from IBM
WebSphere Application Server can take you to the next step in the evolution of Web Development that lends itself to the creation of rich Web 2.0 user interfaces.
- Try: Download a free trial version of WebSphere Application Server Community Edition, a pre-integrated, lightweight Java 5 application server built on Apache Tomcat and other best-of-breed open source software such as OpenEJB, Apache Axis, and Apache Derby..
- Article: This article introduces you to the web development with WebSphere Application Server Feature Pack for Web 2.0. Its a good look at solutions for creating Ajax-based web apps and mashups.
- Tutorial: This tutorial takes you through the PHP and Java steps to master Facebook application Web development with the no-charge WebSphere Application Server Community Edition Web server.
- Demo: This demo showcases the WebSphere Application Server Community Edition administrative console feature set and walks you through deployment of a Web application.
- Buy: WebSphere Application Server - Express
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
