Web Usability Engineering Trends

11.6 Web Usability Engineering Trends

Motivated by the increasing awareness of the significance of usability, particularly in Web engineering, the state-of-the-art in usability engineering has continually improved. This section introduces the concept of usability patterns and issues relating to the usability of mobile applications and accessibility as good examples for innovative methodologies, new fields of use or specific objectives.

11.6.1 Usability Patterns If we want to reuse or transfer knowledge from good design practices we need a sufficiently

abstract form of representation to be able to adapt the knowledge to be transferred to a new context. On the other hand, it should be specific enough to be able to identify a design’s quality. Many design guidelines slip off this narrow ridge, being either too trivial or not generally applicable.

A solution based on pattern languages originally suggested by Christopher Alexander for town planning and urban construction had been transferred successfully to the field of software design at the beginning of the 1990s. Since the end of the 1990s, attempts have been made to use this concept for know-how transfer in the field of user interface design (HCI patterns, usability patterns).

A pattern is a conceptual tool that captures the nature of a successful solution for a recurring architectural (software) problem. A set of relating (interlinked) patterns is called pattern language and generally published in a catalog. Such a catalog serves to support problem-oriented lookup, which means that it plays a similar role for design reuse as the documentation of a class or function library plays for code reuse.

According to Alexander, a single pattern should be described in three parts: a problem or goal, a solution, and a context (Alexander et al. 1977). This system has been used to document expertise in diverse fields, and additional patterns have been introduced, with the basic consensus being the use of a canonic (and thus easily understandable and searchable) representation that describes at least the three classic pattern dimensions. Figure 11-7 illustrates a typical example of

a usability pattern, the Card Stack pattern from a usability pattern language designed by Jenifer Tidwell.

240 Usability of Web Applications

Figure 11-7 Example from the usability pattern language by Tidwell (2005).

11.6 Web Usability Engineering Trends 241 The entries in this example are highlighted in bold, and their meaning should be self-

explanatory. However, it appears appropriate to add a few comments: The “Use when” entry defines contradictory aspects that may have to be evened out, which means that it virtually sets the stage for a potential solution. The “How” entry explains the usage and shows how the pattern is connected to other patterns from the same pattern language (as Closable Panels in this example). Wherever possible, a pattern should also include a characteristic example in the form of an image as a memory aid to facilitate working with the pattern catalog. Most other pattern languages additionally support the catalog structure by stating pattern categories. An important pattern component is a list of known implementations of the pattern to justify its addition to the pattern catalog. In Tidwell’s pattern language additional known uses are listed under “Examples” for these purposes. The Card Stack example is shortened to one additional example. Most usability pattern languages are currently available on the Web, for example the well-known examples by (Tidewell and van Welie 1999, Tidwell 2002, van Welie 2005), which deal with Web usability, among other things. A good overview is found in (Borchers 2001) and (Tidwell 2005). Figure 11-8 lists the Web usability pattern catalog of van Welie to give an insight into the content and extent of such a usability pattern language.

11.6.2 Mobile Usability UMTS introduced fast data transfer for mobile devices, so that nothing appears to be in the

way of the mobile revolution. Currently, however, evolutionary changes seem to be more likely to happen, because the cognitive capabilities of humans are even more limited in the mobile context than in conventional contexts. For example, a study published in Connect Magazine revealed that mobile phone users have a longer response time, even when using hands-free equipment, than a reference group of people with a blood-alcohol level of 0.8 (Connect, Nr. 6/2002). Consequently, it doesn’t appear realistic to assume that all information channels can actually be used everywhere merely because of the potentially ubiquitous information supply.

Regarding such user attention problems it has been shown that resource competition is very real and seriously constrains mobile interaction. The data analyzed conveys the impulsive, fragmented, and drastically short-term nature of attention in mobility. Continuous attention to the mobile device fragmented and broke down to bursts of just 4 to 8 seconds, and attention to the mobile device had to be interrupted by glancing the environment up to 8 times during a subtask of waiting for the loading of a Web page (Oulasvirta et al. 2005).

From the usability engineering perspective, no revolutionary development may be expected, since the methodology remains the same. If we want to achieve a certain acceptance of mobile Web applications over the medium term, we explicitly have to consider the characteristics of mobile usage contexts. These characteristics include the hardware properties of mobile devices, the usage conditions, and the specific user behavior in such situations. However, a large number of issues need to be solved when implementing a safe, easy-to-use and preferably automated way of assisting users to manage their mobile content with context metadata. Technical details should be hidden from the user and user effort should be minimized while maximizing user benefit (Sorvari et al. 2004). Figure 11-9 shows an example of adaptation to different hardware contexts.

242 Usability of Web Applications

Site Types

Page Elements

Ecommerce

· Artist Site

· Booking process · Automotive Site

· Customizable Window

· Constrained Input

· Case study

· Branded Promo Site

· Country Selector

· Login

· Campaign Site

· Date Selector

· Newsletter

· Commerce Site

· Premium Content Lock · Community Site

· Details on Demand

· Product Advisor · Corporate Site

· Footer Bar

· Product Comparison · Multinational Site

· Forum

· Product Configurator · Museum Site

· Home Link

· Purchase Process · My Site

· Hotlist

· Language Selector

· Registration

· News Site

· Shopping cart · Portal

· Message Ratings

· Store Locator · Web-based Application

· News box

· News ticker

· Testimonials

· Outgoing Links

· Virtual Product Display

Basic Page Types

· Poll · Send-a-Friend Link

· Article Page

· Thumbnail

User Experiences

· Blog Page

· Community Building · Contact Page

· To-the-top Link

· Fun

· Event Calendar · Information Seeking · Form

· Bread crumbs

· Shopping

· Guest Book

· Directory

· Input Error Message

· Doormat Navigation

· Processing Page

· Double tab

Searching

· Printer-friendly Page

· Advanced Search · Product Page

· Faceted Navigation

· Fly-out Menu

· FAQ

· Header-less Menu

· Help Wizard

Basic Interactions

· Icon Menu

· Search Area

· Image Browser

· Search Tips

· Action Button

· Search Results · Enlarged Clickarea

· Main Navigation ·

· Simple Search · Paging

Map Navigator

· Meta Navigation

· Site Index

· Stepping

· Minesweeping

· Site Map

· Tabs

· Overlay Menu

· Topic Pages

· Wizard

· Repeated Menu · Retractable Menu · Scrolling Menu

Managing Collections Visual Design

· Shortcut Box

· Collector

· In-place Replacement · Center stage

· Alternating Row Colours

· Split Navigation

· Teaser Menu

· List builder

· Colour-coded Areas

· Trail Menu

· List Sorter

· Font Enlarger · Overview by Detail · Grid-based Layout

· Parts Selector · Liquid Layout

· Table Filter · Table Sorter · View

Figure 11-8 Web usability pattern catalog of van Welie (2005).

11.6 Web Usability Engineering Trends 243

Figure 11-9 Adaptation to different hardware contexts.

Mobile devices like PDAs and smart phones are primarily characterized by relatively small screens and poor ergonomic input mechanisms. This translates to requirements like very concise text formulations, mostly doing without space-intensive representations like redundant images, a very simple navigation concept, and extreme minimization of text input, e.g., replacing keyboard input by selection sequences (which may, indeed, be longer), or by storing and reusing previous inputs, etc.

Typical mobile usage conditions include one-hand device operation (which means that we cannot use interfaces that are exclusively operated with a pen), heavily changing light conditions (which may cause difficulties, for example, in the use of colors), distracted attention, and to some extent expensive network connections with different billing models.

What we can conclude from various side conditions for the user behavior is that current surfing in mobile contexts will be replaced by a particularly targeted way of “hunting” for information. Users want to get the information they desire as easily as possible and are hardly willing to look for alternatives. This trend further increases the significance of the quality of contents and the quality of service for system acceptance. While a piece of information “last updated in 2000” is annoying even in stationary Web surfing, in a mobile scenario in which a Web page supplies the address of a restaurant that went broke in 2004 to a hungry user has a prohibitive effect. The situation is similar with the quality of positioning information. Some mobile phone owners get a kick out of having their phone’s localization service tell them how far they are from the restaurant they are sitting in. . .

We can see that also in the mobile environment effectiveness, efficiency, and satisfaction are key requirements for systems to be accepted. If they are met, very specific and slim services can be extremely successful indeed, as the SMS example demonstrates. The possibility of asynchronous communication, the limited cost, and the confidence in its smooth functioning have helped the SMS service gain an enormous market penetration.

11.6.3 Accessibility An increasingly important additional aspect of usability is accessibility. The need for accessibility

emerged from the fact that more and more people with different kinds of disabilities use the Web as a communication and information medium, and the consequent demand that the Web should by definition be accessible and usable for everybody. “The power of the Web is in its

244 Usability of Web Applications

universality. Access by everyone regardless of disabilities is an essential aspect” (Tim Berners Lee, “inventor” of the World Wide Web). To make this happen, however, a set of criteria to overcome users’ handicaps have to be met.

Various studies suggest that about 20% of the world’s entire population have disabilities or handicaps in one or more sensory organs. Visual disabilities are the most relevant for Web usability. Complying with a few general design guidelines with regards to color, font, ALT attributes (see section 11.4), etc., can be supportive to these people. For example, careful use of ALT attributes and other alternatives to images can help blind users to read the content of a Web page by use of a special output device (screen reader software and Braille displays).

Motoric, acoustic, or cognitive disabilities can also play an important role in Web usability, in addition to visual handicaps. Very small elements, such as clickable icons or entries in popup menus, can cause difficulties in a mouse-based navigation system, e.g., for older people (see also section 11.4.2). Acoustic aspects are currently negligible in conventional Web sites, however, this channel will also become increasingly important in view of the growing significance of multimedia. Specific cognitive abilities, such as spatial power of imagination, logical thinking, or understanding of complex contexts, which are normally relatively strong in application developers, cannot be expected from average users. This results in the requirement for simple and intuitive Web applications, for which neither very specific cognitive competences nor special

Figure 11-10 Components and guidelines for Web accessibility (World Wide Web Consortium (W3C) 2005).

11.7 Outlook 245 know-how is needed. Classic examples include the formulation of search queries. An IT engineer

who masters Boolean algebra may find it hard to imagine that an “extended search” with Boolean operators can represent an intellectual hurdle for some users.

The initiatives and guidelines 11 resulting from accessibility requirements clear the way to Web applications for people with disabilities and, as a nice side effect, improve the usability for non-handicapped users. Someone in a situation where he or she needs to visit a Web site over a mobile phone will want to disable the representation of images as well, which means that the site should support alternative navigation aids.

However, Web browsers, media players, assistive technologies, and other user agents have to support accessibility features consistently. Figure 11-10 shows how Web accessibility depends on several components working together. Improvements in specific components could substantially improve Web accessibility (World Wide Web Consortium (W3C) 2005).

Many of the aspects mentioned in this section can be tested relatively easily. For example, the Web sites at ( http://webxact.watchfire.com ), or ( http://www.vischeck.com ) offer tests to check accessibility, graphic-independent navigation, and color design. LIFT Online, available at ( http://www.usablenet.com ) is another website testing solution that centralizes accessibility management. To check the suitability of your Web application for blind people, Webspeech ( http://www.webspeech.de ), to mention just one example, lets you install a special tool.