Computer Science HCI UI Assignment

••

CHAPTER

• ExP.er.ie mce

Words are sometimes sensitive instruments of precision

with which delicate operations may be performed and ,, swift, elusive truths may be touched.

Helen Merrell Lynd On Shame and the Search for Identity

CHAPTER OUTLINE 12.1 Introduction

12.2 Display Design

12.3 View (Window) Management

12.4 Animation

12.5 Webpage Design

12.6 Color

12.7 Nonanthropomorphic Design

12.8 Error Messages

425

426 Chapter 12 Advancing the User Experience

1 2. 1 Introduction

Interface design is edging closer to match the art, trendiness, and techniques taught in design schools. In an era of smartphones, tablets, the thinnest of laptops, and wearables, competition over design has intensified. Early automobiles were purely functional, and Henry Ford could joke about customers getting any color as long as it was black, but modem car designers have learned to balance function and fash­ ion. This chapter deals with seven design matters that are functional issues within user experience (UX) evaluation criteria but also leave room for varying styles to suit a variety of customers: display design, view (window) management, anima­ tion, webpage design, color, nonanthropomorphic design, and error messages.

Another opportunity for design improvements lies in the layout of informa­ tion on a display (Section 12.2). Cluttered displays may overwhelm even ki1owl­ edgeable users, but with only modest effort, designers can create well-organized, information-abundant layouts that reduce search time and increase subjective satisfaction. Issue s related to universal usability, user-generated content, and the proliferation of web design and development techniques are also addressed .

View (window) management has become more standard ized, but an under­ standing of the motivations for multiple -window coordination could lead to improvements and to novel proposals (Section 12.3). Animation enhances the user experience when used wisely (Section 12.4). Webpage designs are improv­ ing as standard s and tool s emerge to address webpage design and development, user-generated content, and universal usability (Section 12.5).

High-resolution color displays, large or sma ll, offer many possibilities and chalJenges for designers. Guid elines for color design are useful, but experienced designers know that repeated testing is needed to ensure success (Section 12.6).

Message s are sometimes meant to be conversational, as modeled by human ­ human communication, but this strategy has limits because people are different from compu ters. This fact may be obvious, but a section on nonanthropomor­ phic design (Section 12.7) seems necessary to steer designers toward compre­ hensible , predictable, and contro llable interfaces.

User experiences with computer-system prompts, exp lanations, error diag ­ nostics, and warnings play a critical role in influencing acceptance of software systems . The wording of messages is especially impo rtant in systems designed for novice users, but experts also benefit from improved messages (Section 12.8).

Recognition of the creati, re challenge of ba lancing function and fashion might be furthered by having designers put their names and photos on a title or credits page, just as authors do in a book. Such acknowledgment is common in games and in some educational software, and it seems appropriate for all software . Credits provide recognition for good work and identify the people responsible. Having their names in lights may also encourage designers to work even harder, since their identities will be public.

See also :

Chapter 6, Design Case Studies

Chapter 8, Fluid Navigation

Chapter 13, The Timely User Experience

12.2 Display Design 427

Chapter 14, Documentation and User Support (a.k.a. Help)

12.2 Display Design

For most interactive systems, the displays are a key component of successful design s (Fig. 12.1) and are the source of many lively arguments. Dense or clut­ tered displays can provoke anger, and inconsistent formats can inhibit perfor­ mance. The complexity of this issue is suggested by the 162 classic guidelines

Global Ice Viewer Ice, which covers 10 peroen1 of Earth's surface, is disappearing rapidty. See how ctimate change has affected g1aciers, sea ice and continental ice sheets worldwkte.

– CARBON DIOXIDE GLOBAL TEM PERA TURE

403. 19 ., ' ..• ·

FIGURE 12.1

' •

ARCTIC ICE fJU~HMUI .I

13. 4 · ., ,.

r

I )

I

CLICK TO EXPAND

UNOICf

Groonland 100 lo~ 1996 anCI 2005

. . .

Webby Award w inner NASA climate website illustrating an elegant visual design.

428 Chapter 12 Advancing the User Experience

(see Box 12.1) for data display offered by Smith and Mosier (1986). Display design will always have elements of art and require invention, but perceptual principles are becoming clearer, and theoretical foundations have emerged (Galitz, 2007; Johnson, 2014). Innovative information visualizations witll user interfaces to support dynamic control are a rapidly emerging theme (Chapter 16).

Designers should begin, as always, with a thorough knowledge of the users' tasks, free from the constraints of display size or available fonts. Effective dis­ play designs must provide all the necessary data in the proper sequence to carry out the task. Meaningful groupings of items (with labels suitable to the users' knowledge), consistent sequences of groups, and orderly formats all support task performance. The Ges talt Laws of Perception (rules of the organization of perceptual scenes) app ly here and are discussed further in Johnson (2014). Groups can be surrounded by blank spaces or boxes. Alternatively, related items can be indicated by highlighting, background shading, color, or special fonts. Within a group, orderly formats can be accomplished by left or right justi­ fication, alignment on decimal points for numbers, or markers to decompose lengthy fields.

Graphic designers, originally working in a world of print media, ada pted principles for display design. Mullet and Sano (1995) offer thoughtful advice with examples of good and bad design in commercial sys tems . They propose six categories of principles that reveal the complexity of the design­ er's task:

1. Elegance and simplicity: Unity, refinement, and fitness

2. Scale, contrast, and proportion: Clarity, harmony, activity, and restraint

3. Organization and visual structure: Grouping, hierarchy, relationship, and balance

4. Module and prograni: Focus, flexibility, and consisten t application

5. Iniage and representation: Immediacy, generality, cohesiveness, and cl1aracteriza tion

6. Style: Distinctiveness, integrity, comprehens iveness, and appropriateness

As expected, a mobile (small) screen display requires special treatment due to display real estate available. One study looks at phones and tablets and how the user experience varies among these devices. For example, the convenience of tou chscreens and portability must be trad ed off with smaller screen size, con­ necti vity issues, wide variability in app design, and one window open on a smartphone. Nielsen Norman Group (2015) published a detailed definition of design guidelines for the mobile user experience.

This sect ion continu es with some additional display design issues, offering empirical support for concepts where available. Keep in mind that there is not consensus on how user experience is measured (Law, 2011).

12.2 Display Design 429

BOX 12.1 Examples of the 162 data-disp lay guidelines from Smith and Mosier ( 1986). (Courtesy MITRE Corporate Archives : Bedford, MA) .

• Ensure that any data that a user needs, at any step in a transaction sequence, are available for display.

• Display data to users in directly usable forms; do not require that users convert displayed data.

• Maintain a consistent format for any particular type of data display from one display to another.

• Use short, simple sentences.

• Use affirmative statements rather than negative statements.

• Adopt a logical principle by which to order lists; where no other principle applies, order lists alphabetical ly.

• Ensure that labels are sufficient ly close to their data fields to indicate association yet are separated from their data fields by at least one space.

• Left-justify columns of alphabetic data to permit rapid scanning.

• Label each page in multi-paged displays to show its relation to the others.

• Begin every display with a tit le or header, describing briefly the contents or purpose of the display; leave at least one blank line between the title and the body of the display.

• For size coding, make larger symbols be at least 1.5 times the height of the next-smaller symbo l.

• Consider color coding for applications in which users must distinguish rapidly among severa l categories of data, particularly when the data items are dispersed on the display.

• For a large table that exceeds the capacity of one display frame, ensure that users can see column headings and row labe ls in all disp layed sec­ tions of the table. Note that one study at the University of Texas pub lished guidelines for tab les to reduce any pat ient safety impacts when using large, tabula r d isplays of patient data (University of Texas, 2013).

• Provide a means for users (or a system administrator) to make necessary changes to disp lay functions, as data-display requirements may change (as is often the case).

12.2. 1 Field layout Exploration with a variety of layouts can be a helpful pro cess. These design alterna ­ tives should be developed directly on a display screen. An employee record with information about a spouse and children could be displa yed crudel y as follows:

Poor: TAYLOR. SUSAN THOMAS ANN ALEXANDRA

3478733 1 10292014 082120 15 090820 12

WILLIAM TAYLOR

430 Chapter 12 Advancing the User Experience

This record may contain the necessary information for a task, but extracting the informatio11 will be slow ai1d error-prone. As a first step at improving the format, blanks and separate lines can distinguish fields:

Better : TAYLOR' SUSAN THOMAS ANN ALEXANDRA

34787331 10292014 08212015 09082012

WILLIAM TAYLOR

The children's names can be listed in chronological order, with the dates aligned. Familiar separators for the dates also aid recognition:

Better : TAYLOR' SUSAN ALEXANDRA THOMAS ANN

34787331 09-08-2012 10-29-2014 08-21-2015

WILLIAM TAYLOR

The reversed order of "last name, first name" for the employee may be desired to highlight the lexicographic ordering in a long file, but the "first name, last name" order for the spouse is more readable. Consistency is important, however, so a compromise might be made:

Better: SUSAN TAYLOR ALEXANDRA THOMAS ANN

34787331 09-08-20 12 10-29-2014 08-21-20 15

WILLIAM TAYLOR

For frequent users, this format may be acceptable, since labels have a cluttering effect. For most users, howe ver, labels will be helpful. Indenting the information about children will also help to convey the grouping of these repeating fields:

Better: Emp 1 oyee: Spouse: Chil dren:

SUSAN TAYLOR ID Number: 34787331 WILLIAM TAYLOR Names ALEXANDRA THOMAS ANN

Birthdates 09-08-2012 10-29-2014 08-21-2015

Mixed upper- and lowercase letters l1ave been used for the labels to distin­ guish them from the record information, but the coding migl1t be switched to use boldface and mixed upper- and lowercase for the contents. The employee 11ame and ID number can also be placed on the same line to tighten up the display:

Better : Emp 1 oyee: Spouse: Children:

Susan Taylor ID Number: 34787331 William Taylor Names Birthdates Alexandra 09-08-2012 Thomas 10-29-2014 Ann 08-21-2015

12.2 Display Design 431

Finally, logical groupings can be created by using shading or borders to delineate sets of related information:

Better: Emp 1 oyee: Spouse:

Susan Taylor ID Number: 34787331 William Taylor

Children: Names Birthdates 09-08-2012 10-29-2014 08-21-2015

Alexandra Thomas Ann

For an international audience, the date format might need to be clarified (month-day-year). Even in this simp le example, the possibi lities are numerous. Further improvements could be made wi th other coding strategies, such as the use of background shading, color, or graphic icons. In any situation, a variety of designs should be explored. An experienced graphic designer can be a great benefit to the design team. Pilot testing with prospective t1sers can yield subjec­ tive satisfac tion scores, objective times to comp lete tasks, and error rates for a var iety of proposed formats.

12.2.2 Empirical results Guidelines for display design were an early topic in human-computer interac­ tion research because of the importance of displa ys in control-room and life­ critical applications (Section 3.3). As technology evolved and high-resolution graphical color displays became available, new empirically validated guidelines became necessary. Then web-based markup languages, user-genera ted content, and the need to accommodate older adults and provide universal usability pre­ sented further design challenges. User contro l of font size, window size, and brightness meant designers had to ensure that the information architecture could be understood, even as some display elements changed. Now, as small-, wall-, and mall-sized displays have opened further possibilities, there is again renewed interest in disp lay design.

Early studies with alphanumeric displays laid the foundation for design guidelines and predictive metrics. These studies clearly demonstrated the ben­ efits of eliminating unnecessary information, grouping related information, and emphasizing information relevant to required tasks. Simple changes could cut task performance times almost in half.

Expert users can deal with dense displays and may in fact prefer these dis­ plays because they are familiar with tl1e format and they must initiate fewer actions. Performance times are likely to be shorter with fewer but denser dis­ plays than with more 11umerous but sparse displays. This improvement will be especially noticed if tasks require comparison of information across displays. Systems for stock-marke t data, air-traffic contro l, and airline reservations are

432 Chapter 12 Ad vanc ing the Use r Exper ience

FIGURE 12.2 U.S. Navy air -tra ff ic-control work environment, w ith mu ltiple, speciali zed, data-i ntens ive disp lays.

examples of successful applications that have dense packing, multiple displays, and highly coded fields (see Fig. 12.2).

Award-winning designs, for examp le in websites and mobile apps, can be exciting, captivating, and efficient to use. One NASA site (Fig. 12.1) illustrates such a design. The site won a Webby Award (NASA, 2015). Groups that select award-winning designs are worth noting, and their websites contain many examples. These award organizations include the Webbys (http:/ /webbyawards .com) and the Awwwards (http:/ /www.awwwards.com – yes, wi th WWW as part of its name).

12.2.3 Sequence of displays Sequences of displays should be similar throughout the system for similar tasks, but exceptions will certainly occur. Within a sequence, users should be offered some sense of how far they have come and how far they have to go to reach the end (Figs. 12.3 and 12.4). It shou ld be possib le to go backward in a sequence to correct errors, to review decisions, or to try alternatives.

Relevant to display design is a discussion on scrolling . For example, scrolling on sma ller screens (mobile and tablet) is a constant challenge. The next section discusses how to manage multip le views and windows. See also Chap ter 8 (Fluid Navigation) for addit iona l discuss ion on scrolling.

12.3 View (Window) Management 433

CHI 2016 Attendee Registration Mow0o1a11o1

Details

Registrant

.!) Steven Jacobs

FIGURE 12.3

Email

Personal Information

Type

Agenda & feH

• Checkout

Acaons

ACM or SIGCHI Profess ional Member (please have your ACM or Make • teven .jacobs@nau .edu SIGCHI number available) Changes

This page from ACM SIGCHI CHI 2016 web site allows users to register for the conference. The progress indicator in the midd le indicates the user is working in the 3rd step of a 4-step sequence of displays, giv ing users a sense of how far they have gone .

Syncing "Catherine Plaisant's iPhone" (Step 2 of 8) Backing up

FIGURE 12.4

An example of a progress indicator with the status of a backup process in iTunes.

12.3 View (Window) Management

Computer users frequently have to consu lt documents, forms, e-mail mes ­ sages, webpages, and more to complete their tasks. Designers have long strug ­ gled with strategies to offer users sufficient information and flexibility to accomplish their tasks while reducing window-housekeeping actions and minimizing distracting clutter . If users' tasks are well understood and regu lar, there is a good chance that an effective 1nultiple-window display strategy can be developed.

If window-housekeeping actions can be reduced, users can comp lete their tasks more rapidly and probably with fewer mistakes. The visual nature of window use has led many designers to app ly direct -manipu lation strategies (Chapter 7) to window actions. To stretch, move, and scroll a window, users can

434 Chapter 12 Advancing the User Experience

point at appropriate icons on the window border and simply click on the mouse button and drag. Since the dynamics of windows have a strong effect on user perception s, the animations for transitions (zooming boxes, repainting when a wit1dow is opened or closed, blinking outlines, or highlighting during draggit1g) must be designed carefully.

Window design evolved rapidly in the 1980s from influential designs at Xerox PARC to innovative syntheses by Apple (Figs. 1.1 and 1.2) and finally Micro­ soft's modest refinements, which led to the highly successful Windows series (Fig. 1.3). Overlapping, draggable, resizable windows on a broad desktop have become the standard for most users. Advanced users who work on multiple tasks can switch among collections of windows called "workspaces" or "rooms"; each workspace holds several windows whose sta tes are saved, allowing easy resumption of activity. Mucl1 progress has been made, but ther e is still ai1 oppor­ tunity to reduce dramatically the housekeeping chores tied to individual win ­ dows and to provide task-related, multiple-window coordination.

12.3. 1 Coordinating multiple views (windows) Designers may break through to the next generation of window managers by developing coordinat ed windows: windows that appear, change contents, resize automatically, and close as a direct result of user actions in the task domain. For example, in a medical insurance claims-processing application, when the agen t retrieves information about a client, such fields as the client 's address, telephone number, and membership number should be automatica lly filled in on the dis­ play. Simultaneously, and with no additional commands, the client's medical history might appear in a second window, and the record of previous claims might appear in a third window. A fourth window might contain a form for the agent to complete to indicate payment or exceptions. Scrolling the medical­ history window might produce a synch roni zed scroll of the previous-claims window to show related information. When the claim is completed, all wiI1dow contents sl1ould be saved and all the windows should be closed wi th one action. Such sequences of actions can be established by designers or by users with end­ user programming tools.

Similarly, for web browsing, job-hunting users should be able to select the five most it1teresting position-description links and ope11 them all with a sit1gle click. Then it should be possible to explore all of them synchronously to com­ pare the job details (description, location , salary, etc.) using one scrolling action. When one posi tion is selected, it should fill the screen, and the other four sho uld close automatically.

Coordination is a task concept that describes how information objects change based on user actions. A careful study of user tasks can lead to the development of task-specific coordinations based on sequences of actions . The especially interes tmg case of work with large images such as maps, circui t diagrams, or

12.3 View (Window) Managem ent 435

magazine layouts is covered in the next section. Other important coordinations that might be supported by interface designers include:

• Synchronized scrolling. A simple coordination is synchronized scrolling, in which the scroll bar of one windo,v is coupled to another scroll bar, and action on one scroll bar causes tl1e other window's contents to scroll in parallel. This technique is useful for comparing two versions of a program or document. Synchroniza tion might be on a line-for-lii,e basis, on a proportional basis, or keyed to matching tokens in the two windows.

• Hierarchical browsing. Coordinated windows can be used to support hierarchi­ cal browsing (Fig. 12.5). For example, if one window contains a book's table of contents, selection of a chapter title by a pointing device should lead to the display, in an adjoining window, of that chapter's con tent s. Hierarcl,ical browsing has been integrated into Windows File Explorer to allow users to browse hierarchical directories, into Outlook to enable browsing of folders of e-mails, and into many other applications.

• Opening/closing of dependent windows. One option on opening a window is to simultaneously open dependent windows in a nearby and convenient location. For example, when a user browsing a program opens a main soft­ ware procedure, the dependent set of procedures could open up automatically,

= J

•• ,L .; 9

> II .. ,«hmerc s

) -~(~ • o_,t,a~.•~

• 1J n«J"ocll.l(tio- v I a 2..f't'I.Med…-orl.tex

• l_lOCUSitl£.>!t;ltf&'t

a 4_rnuluplc_.$1Tatq1e..

• S.<IISC11$slon.!CX

) .. tibles

a 1Uttt1ruh

a maln.teK

FIGURE 12.5

tvcg201Whlrp

'

. . foeui. Vi,….,, -•yuc, pr«u~," – ttltitty to bt t901't ropid llt.ffl date whne h reduced ond pottems ore likel y to be no~ dhco11crol>h: Wien eto YOr-iety h t,-1.,…d ,

) The onoytic (00,,1$rs prdl• is oho beit"Q

4

oddrtUtd to ot.hitr Htldl ,ueh OS k"°"'l «f9t disco11cry Md ~UIQ, but t lli s poPff fl1'Ms11u teq,orol _,..,t ~s. •he re point ond int cl"YCI 111tnu or, Of'9(11'11ttld Into r tcords, for ~t, hi hcohllcot'e, pol1't ewnh ..ay represent diXtor VUU. or tuts Mile ir.tuvo events .-oy ~ o week-ton, h0$p«all:wth)tl or toli:1.ng o llfdl«ttlori k>r 6 -,nt~. A pohent r.GOrd con ~ rec,n,sienlcd o, o 5equencc of ewnu, eodl event betng of o portCllllor t11ent cot to()o")'. OH<:r(jl:tillt (nf or~l on w:,y M tar r ie d in ~ol"d ottributu <•·II· the ~ of tht pottent), ond -t ottnbutu (e.g. t…., .- of the physlcton ""O poc,e,d tf'le ordtr),

$ A 9ro-1ng ~ of vuuol analytics ord 5Ul'hsttc.o1 tools h011e bf"" 111,,Ht for t(llfl>(lrot evtl'lt ~o . TlleH tools ofttn NYt difficulty'" Ol!Otil'IQ ~UI

the gro,ri.119 vol,_ oncl voriety of doto:

• 1 • bt9in (ittflH } & itoe textbf {Vol…-.e of cloto:} o ~ w,y consut

of ,.;ni~ of ~s ond lu>dreds of n itlo,15 of tve nts, IIMCl'I MQS t l'loNI to lood OICI My t-.Wlt in long iMCf'orti.Ye lat ency during uplorotlor1.

, tt "" t111tbf {Vorl•ty of pc,tttrn.,: } o si11Ql• reoord IIOY contoi11 tl'O.lurlds or 111lhons of tYMU tNt foll int o thousorli:b. of dtffcrcnt cve1tt cotqpncs. Cllen ti sro ll tt MO~~ the HMn.tlol ll'(ttt.-m, Of IIOlt l'Kord$ ON t.rllc,.,t ol'ld this ll'Onety … , t difficult to IJ'Ml"Ole on OYerviar.> or to -1 COfflOn l)OtttrM '11'111 O'ICIMliH. Thh cteflnltlOtl of Pottem 110,-l.-ty co,,ptn•'IU ~ trod tlOf'Ol dehnitiOlt of YOM.d)' UI big doto IIMcl'I ~fers to the 11oriety of Mt4 SOlll'«'S •· st r lctllttl:f, u11,tru«ul'ff, •~m.

le end {ite-tie t 11 lZ Whth: 1.t ts UiM"ful to~ o.-ortntSS of the .»to

,

:::; Recomplle

oping w 1 Volume and Variety in Temporal Event Sequences: Slrategies for Sharpening

Analytic Focus

—–·———–_..__ … _ … ___________ _ ….. _., ____ , …. _,, __ ..,_,.. _____ _ _________ .. _________ _ ____________ "' _____ _ ____ (JII __ .., _______ … ., … _,,_

———·———-· -.. ————————————————– •— -, ,.,, ___ T .. ,.–.—..– …. – —-. .. ..-.- ……….. .,,__ _______ ….,….,.,. … –~ ……. — …. _. ……. -w- ___ . ,… _____ _ _ .,. _____ _…_,~ ———.. _…._.._ __ ,,, _ _.,_ -~._,.,_. .. ""' __ ""'_ ______ ..,, .. __ _. .._ ….. ~ –·–~-…. -.-……. -~– ·..,._""' __ __ … __________ ,.,.. ______ .. __ ., _____ ,….. ___ … _ —–.. –… –………………. ~-___ .,, ___ ….., __ _ ….,…,___….,., __ ,…_ –·——­——–··———– —- .,, __ …,._.. … …_ __ • …,., … ;-r:-c::·· …… -lo _._… .. .., _____ … …., —.. ——-·–­…….. ,…._,….._….,_,___ -,……, __ _. __ __, __ … …..,.., .. _,_. _ _,…,.__ __ .. ______ ., ……… … -·—–i,-•-· ..,,_.,. ___ .. __ … _ ………. – …….. •–""•-" .,….,.__ ___ ,.~I-~ ,___.""' … ….- … -,-., __ .,._,… _____ " __ __ ._··—-~ ..,_ .. …, …. _., __ …,,_ __ ——- …… ..-..,,.,;.,.,,..,.,._……__ ……… ……. …. ,,,,_ … __ .. _ … _ , … 1 …………… ——·-"' … ,..,_~-..-… – _.,. ___ .. __ .,_….,.. ,.,. ….. .. _ .. – .. —·–·" ______ .,….__ ___ .,_. … …,._ _ _. __ =~ … -..!: .. .!'!:!:'-""2:.'!.~~

I

SharelaTeX allows users to edit a structured LaTeX document and see the resulting formatted document. On the left is the hierarchical list of document sections. The "1. Introduction" section is selected and highlighted in red, and its text can be edited in the midd le. The preview of the output is shown on the right. After selecting a passage in one view, it is possible to see the corresponding location on the other view.

436 Chapter 12 Advancing the User Experience

for example, in a deve lopment tool environment. Similarly, when filling in a form, a user might automatically be presented with a dialog box listing a choice of preferences. That dialog box might lead the user to activate a pop -up or error-message window, which in turn might lead to an invocation of the help window. After the user indicates the desired choice il1 the dialog box, it would be convenient to have automatic closing of all the windows.

• Saving/opening of window state. A natural extension of saving a document or a set of preferences is to save the current state of the display with all the win ­ dows and their contents.

• Tabbed browsing. Bro,-vser tabs allow users to view multiple webpages in the same browser without the need to open a new browser session.

• Tiled or overlapping windows. Windows can automatically be resized and ar­ ranged so that they do not overlap each other. Overlapping windows are sometimes referred to as overlaid or cascading windows (Fig. 12.6).

• Ribbon interface. The Microsoft Office interface is designed to make it easier for users to find the features they need to get their work done. Microsoft calls this its "Fluent" user interface .

.,a ,_ • .,,,.~ .. -,m. .. .,,,… .. J,1..,,_.,v… … s-,.i ..

JU UII 11."# l'IIQC.(1 M.O 0000 lt,t.M N$1QII $Q. 100l.S 1$1

O • Q IIIJ' ► c.t-• , :il • ■ 0

,.,,. ( i,,t ;. .. ; ;.a,.,,wt.tob•i-t,,_.; io) ( p.ou n … , >( I .•) • (1/l,..,,c,,h) J loof,ut,.._; p. •H fLH U(l,1) • (W-t,col.o) I 1-t.ooh; p,oun .. uu,n – i.v 1t J,•t•lll I tts.•1 p, ot<floot >( I, )} – llp"( l},dtt•(IJ / 2'S,t: p. otd lo• U( I,.-) • flvfJ}.clot•flJ I 1'~.t;

I po-Utl( "llc-llo … 1 •••• ' );

tr,t (•l; , .. , ,…_ …. ~. fflU.,6<-l->.

r….c r 1t … h ( cv_,o,ocm_QSo<'Y_rtlWltJT_;tt1 , 11, 1. t),

I i nt colo,,tWI, f.,. ( 1,,t l .. ; 1<1•; l-. ) (

0 CO)Of"<ll] • Pn/( hl)J

~l .. u•r..t • "'" l ( ln..,1.,-, l,oflo't.<-t,I,. C,,_Ut); t_. ( t,,t l .. ; hi.r,,.,t.coh•l-t.,-; S … ) {

~ (ll'l, l «:OVll; .tllltYll 'NHXM •W

-. c..6. c: Ill , • ' • T SI~•- –

·•-

d~u …… t( f~ O(ill-t,C.U, W.-t .~b) • < f)o,t tJ ((Olwl (b nt.tllbth.•t< SftU(t,l) J ll •

<1'otu,…~•wtel0,C< l"U •fd, CV_e.l) ; I ….,..,c·<1 .. , t ~d· , <1 .. ,t,…,.>;

I ~-. -• • OJ .. , • OJ . "' • (♦l • OJ . . ,

~.,, '1 -lto •(" i;.oM< …….. l•, J .. . , •t.. .. ••""') I

–… ..,. • .,_ • • "'- I IIOk WflCIII

FIGURE 12.6

. ,,, – •

ft –· .. •• ft

•• ~

~

t. r

. …

p – f!I X

– s.-~ . • ,. ~ – b·l!t:Jeo> ~

! –..,….-«- ·) p. ;;)Swb~~ ·o.,… ~ 1-,(,o,, … ..-.,,s.; …. , . ffl–0—11-­ii '-•fM

• Q s…-,-,. .,……., • •• S..t«..<fi>

.. • • ~ • • • –

Example of Visua l Studio Integrated Development Environment (IDE) il lustrating coordinated window views. The project files are listed on the right in a hierarchical browser. The selected fi le (i.e., "source .cpp") is hig hlighted in the list and displayed on the left. A breakpoin t was set in the code (red dot ) at the line start ing with "color[i]" so the bottom left window shows the values of the color array of the breakpoint. All windows are titled, except for the output window (the colorful image of heat sensor data), which overlaps all the other windows .

12.3 View (Window) Managem ent 437

• Design patterns. Managing interface design elements and design patterns are de­ scribed in Chapter 4 and in Tidwell (2011). In software design, design patterns are a reusable solution to a commonly occurring problem within a given context.

• Start menus. Like the Windows Start menu, th e start-up proce ss for software or devices needs to be easy to use (restarts and shutdowns, too).

There are many interface schemes that allow users to work in and move between focused and contextual views of screens. These interface schemes have been studied and categorized according to the interface mechanisms used to separate and blend views (Cockburn et al., 2009). The four approaches are spa tial separation, typified by overview + detail interfaces; temporal separation, typified by zoomable inter­ faces; seamless focus + context, typified by fisheye views; and cue-based techniques that selectively highlight or suppress items within the information space.

12.3.2 Browsing large views A 2-dimensional cousin of hierarchical browsing is image browsing, which enabl es us ers to work wi th larg e maps, circu it diagrams, magazine layou ts, pho­ tos, or artwork. Users see an overview in one window and the details in a sec­ ond window. They can move a field-of -view box in the overview to adjust the detail-view content. Similarly, if users pan in the detail view, the field-of-view box should move in the overview. Well-designed coordinated windows have matching aspect ratios in the field-of-view box and the detail view, and a change to the shape of either produces a corresponding change in the other.

Similarly, examples appear in Google and MapQuest maps. The magnification from the overview to the detail view is called the zoo1n factor. When the zoo m fac­ tors are between 5 and 30, the coordinated overview and detail view pair are effective; for larger zoom factors, however, an additional intermediate view is needed. For example, if an overview shows a map of France, a detail view show­ ing the Paris region is effective. However, if the overview were of the entire world, intermediate views of Europe and France would preserve orientation (Fig. 12.7).

Side-by-side placement of the overview and detail views is the most common layout, since it allows users to see the big picture and the details at the same time. However, some systems provide a single view, either zooming smoothly to move in on a selected point (Bederson, 2011) or simply replacing the overview with the detail view. This zoom -and-replace approach is simple to implement and gives the maximal screen space for each view, but it denies the users the chance to see the overview and detail view at the same time. A variation is to have the detail view overlap the overview, but it may obscure key items . Semantic zooming, in which the way objects are represented changes depending on their magnification, might help users see an overview by rapidly zooming in and out (Hornbaek et al., 2002).

Attempts to provide detail views (focus) and overviews (context) ,-vithout obscuring any thing have motivated interest in fi sheye viezvs (Sarkar and Brown, 1994; Bartram et al., 1995; Baudisch et al., 2004). The focus area (or areas) is

438 Chapter 12 Advancing the User Experience

GLOBAL VIEW

Wor

D FIELD-OF-VIEW

+

FIGURE 12 7

urope INTERMEDIATE VIEWS

-~ …. _ • …, –

France ~- • ti",

,_ -.._ …. ~ ,r

+ + + COORDINATED PAIRS

DETAIL VIEW

Paris

+ +

Globa l and intermediate views, which provide overviews for the detail view of Paris. Movements of the field-of-view boxes change the content in the detail view (Plaisant et al., 1995).

magnified to show detail while preserving the context, all in a single display (Fig. 12.8). This distortion -based approach is visually appealing, even compel­ ling, but the continually changil1g magnified area may be disorienting, and the zoom factor in published examples rarely exceeds 5.

FIGURE 12.8 Fisheye view of U.S. cities, with the focus on St. Louis. The context is preserved, although the distortions can be disorienting (Sarkar and Brown, 1994).

12.4 Animation 439

The bifocal display (similar to the fisheye approach) was arguably the first demonstration of the use of distortion to provide a focus + context view of infor ­ mation. A user can focus on one or two documents, for example, and at the same time have an overall view of the whole of the information space (Spence, 2001).

One success story with a fisheye view approach is the Mac OS X Dock (Fig. 1.2), a menu of program and file icons that appears typically at the bottom of the screen. Scrolling over an icon magnifies the item to highlight readiness for that icon (application/file) to be selected. The distortion is still present, but the highlighting is visually apparent.

The design for image browsers should be governed by the users' tasks, which can be classified as follows (Plaisant et al., 1995):

• Image generation. Paint or construct a large image or diagram.

• Open-ended exploration. Browse to gain an understanding of the map or . image.

• Diagnostics. Scan for flaws in an entire circuit diagram, medical image, or newspaper layout.

• Navigation. Have kno,-vledge of the overview, but need to pursue details along a highway or vein.

• Monitoring. Watch the overview and, when a problem occurs, zoom in on details.

Within these high-level tasks, users carry out many low-level actions, such as moving the focus Qumping from city to city on a map), comparing (viewing two harbors at the same time to compare their facilities or viewing matching regions in x-ray images of left and right lungs), traversing (following a vein to look for blockages), or marking locations to return to them at a later time.

12.4 Animation

Small animations now pepper many applications to create an attractive look and feel. Perceiving and interpreting motion is a fundamental element of human perception. Our eyes are attracted to moving objects in the real world, and items moving in the same direction are interpreted as a group. Done well, ani­ mation is compelling. Done poorly, it can distract, irritate, and and waste time (see Box 12.2).

Smooth animations are now expected to keep users oriented during screen layout reorganizations such as zooming and panning on maps and opening and closing of windows. Individual screen elements use animation to guide users; for example, a flashing down arrow encourages tablet users to scroll down, and a left-to-right animation illustrates how a swiping movement is needed to

440 Chapter 12 Advancing the User Experience

BOX 12.2 Possible roles for animation.

• Keeping user oriented during transition

• Indicating an affordance, inviting interaction

• Entertaining

• Indicating background activity (e.g., progress bar)

• Storytel Ii ng

• A lerting

• Providing a virtua l tour (e.g., for architectural designs)

• Explaining a process

• Conveying uncertainty and randomness

unlock a phone. Showing changes over time is a natura l application and particu ­ larly effective when coupled with voice narration (Rosling, 2015).

Application software used by Gapminder (2015) ilJustrates major global deve lopmen t trends using statistical data. That statistical data are visua lized with an excellent use of animation (Fig. 12.9). See more examples of data visualization in Chapter 16.

Complex animations benefit from being decomposed in multiple clearly sep­ arated steps. For example, to facilitate the comparison of two lists of items, ani­ mation may be used to first move the identica l terms to the center of the screen, then (after a short pause) move the unique terms further to the right or left, and after another pause bring similar items closer together (Plaisant et al., 2015). If instead all the objects had moved at the same time, it would be difficult to follow them and understand the meaning of the final layout. User controls may be needed to pause, skip, or replay the animation. The timing of the animation needs to be carefully crafted and tested. For example, an alert box sliding slow­ ing into view can provide an effective, calm notification.

Still, animation can be hard to design and is not always helpful. A website may fail if the flashy animations take too long to load or users become frustrated by gratuitous animations that distract or slow do.-tn interaction. Parallax scrolling (which involves the background movil,g at a slower rate to tl,e foreground, creat­ ing a 3-D effect as you scroll down the page) is the latest fashion (Parallax, 2015) but can also distract when overdone and often fails on small displays. However, some ,-veb designers use parallax scrolling effectively. Recent awards for parallax scrolling websites appear at http:/ /www.awwwards.com/websites/parallax/.

Doubts remain about the usefulness of animation to explain complex processes, even if creating the animation itself may be beneficial to students and facilitate learning (Tversky et al., 2002). Zooming as a general navigation paradigm is key

12.5 Webpage Design 441

Chart Map ( '? Howtou• ) '(81SMr•tri!!:J :■: f!ull lCfMl'I] Color

• 😕 §

0 • •

Play► , ltanlolUH

FIGURE 12.9

1800 1900 2 2018

Time • lln …

o+ogniphle r.QIOn• ..

Select

□-­□-…. □- □-­□– □- □- □–…. □- □- □- □- • … ..__….1-1 Q o.Mlte:t• • "' -=-

Siu T otlll popvl•tlon . w'lt… •

~ 0-200$

Gapminder uses animation to compare how the income per person of five countries changed over time. The round markers leave a trai l that can also be seen in the printed version. Here the user has selected India and is replaying the animation for that country (http://www.gapminder.org).

to map or document navigation, and tools such as Prezi (http:/ /www.prezi .com) make very engaging preserltations, but the vision of a zooming desktop has not been materialized (Bederson, 2011).

An interesting study of communicative functions (e.g., signal change of sta­ tus, signal different con text) vers us animation types (e.g., change of place, change of size) yielded an animation use model of the approp riatene ss of the various combinations of animation types and communicative functions (Novick et al., 2011). While animation is often engaging, further studies are needed to sharpen our und ers tanding of which situation s benefit from animation and which ones do not.

12.5 Webpage Design

Webpage designers have dramatically improved their outpu t in recent years. Numerous guidelirles and internet sources contribute to maturity in this disci­ pline. Visual layout has a strong impact on (human) performance and is a critical factor in webpage design. Newer studies illustrate more specific patterns of

442 Chapter 12 Advancing the User Experience

BOX 12.3 The top 10 mistakes of web-based presentation of information (from Tullis, 2005).

Top 10 Mistak es

1. Burying information too deep in a website

2 . Overloading pages with too much material

3. Providing awkward or confusing navigation

4. Putting information in unexpected places on the page

5. Not making l inks obvious and clear

6. Presenting information in bad tables

7. Making text so small that many users cannot read it

8. Using color combinations for text that many users cannot read

9 . Using bad forms

10. Hiding (or not providing) features that cou ld help users

performance with webpages that ma y reflect some difference s between webpage and traditional GUI design.

Webpage designers can easily mak e mistakes that may not be immediately apparent but can result in distracting or misleading the user. Tullis (2005) has compiled a top 10 list of common design mistakes made in presenting informa ­ tion on the web (Box 12.3), based on the human- factors literature. Nie lsen Norman Group (2011) also has a numb er of lists documenting top 10 mistakes of web design, which are insightful and certainly worth reviewi ng. Note that "bad search" is the number-one mistake item listed (also see Chapter 15 regarding information search).

Web-based designs are dramatically different because the broad er consumer ­ oriented audience appreciates colorful graphics and man y site designers use eye-catching photos. The race is on to create cool designs, enticing images, and attention-grabbing layouts. User preferences become crucial, especially if mar ­ ket researchers can demonstrate that site visitors stay longer and buy more products at ,,isually compe J)jng websites. The downside of the increased use of graphics is download times. Interesting design choices have to be made espe­ cially when how much data a website uses is an issue for laptop or mobile devices (Chetty et al., 2012; Mathur et al., 2015). Constraints of data usage and optimization have to play a role in the design.

Webpage designs have recently changed to accommodate tablets, smart­ phone displays, and other touchscreen interaction. The term responsive design refers to developing websites that provide an optimal viewing and interaction experience . There is a trend to push much more content onto each webpage.

12.5 Webpage Design 443

That content is designed for more touchscreen scrolling and with larger buttons, graphics, or photos for selection tasks. People browsing the internet using a more traditional desktop with mouse input have had to adjust to this new design paradigm. There are not yet many studies on this transition, but it is cer­ tain that in this case the pervasive touchscreen technology available has driven webpage design decisions to work with these devices.

Also technology-related, webpage designs provide more animatio11 (e.g., ani­ mated GIFs, animation, and video links). Icon links to social media sites for ease in sharing and commenting are a webpage design requirement that has become the de facto standard. Designers need to be sensitive to accessibility issues and potential distraction of constant webpage animations. Constantly running advertisements with repeated animations or eye-catching auto-play video win­ dows (often using unnecessary data) prompt tl1e user to click for sound or addi­ tional information about the topic. This not only can be an accessibility challenge but also is distracting to all users. One may find it annoying to read news on some news sites while a video starts automatically when the page is loaded – in this case, the user will have to stop the video in order to concentrate on the writ­ ten content below the video. The user wants to limit the data, but the design prevents it.

More recent ly, seemjngly endless scrolling webpage design has become the trend (which contradicts some of the ideas proposed by Tullis (Box 12.3) only a decade earlier). Best practices in recent years had suggested much less scrolling, particularly on home pages – that users would have preferred quicker point­ and-click, menu-style navigation to the desired information. With the advent of mobile devices, people are given large buttons and the ability to scroll on one very, very long page to navigate to the desired information. News and sports websites jumped on this approach as their user studies proved more people were viewing their content on mobile devices (smartphones and tablets). Those without touchscreens (desktops or laptops not enabled for touch) are forced to scroll long pages using the scroll bar or spinning the mouse thumbwheel. When Windows 8 was first introduced, there was shock by some that the Start button was essentially replaced by a large, tiled "metro" interface (and later returned in a subsequent version of Windows). It almost seems like a battle of dialog styles was held, where the direct manipulation proponents beat the menu-driven, mouse-clicking navigation team as the prevailing dialog style.

AI1other recent trend is toward dynamic and real-time updates to webpages. There is a convergence of web design toward other application design, while other apps (e.g., mobile apps) incorporate web views that may just load HTML­ based webpages. Actually, the evolution of HTML both enables and limits web design in terms of widgets, layouts, and so on.

Universal usability again is a key factor in webpage design. Web usability for low-vision users can be enl1anced by larger display fonts, brightness settings, and audio assistance.

444 Chapter 12 Advancing the User Experience

Web content presentation issues can be broken up into site-level issues, page­ level issues, and "special" types of information (Tullis, 2004). Site-level issues are, obviously, apparent throughout the entire website rather than only on indi­ vidual pages; they include the depth versus breadth of the site, the use of frames, and the presentation of navigation options. Page-level issues are observed at the individual page level; they include components of pages, such as tables, graphs, forms, and controls, as well as issues such as page layout and presentation of links. "Special" web con tent can include si te maps, search fun ctions, user assistance, and feedback.

Many users have indicated preferences for large pages that have a columnar organization, limited animated graphical ads, average link text kept to two to thr ee words, sans serif fonts, and colors used to highlight text and headings. Usability study results may indicate desigi1ers accommodatit1g high personal preference-for example, comprehensibility, predictability, familiarity, visual appeal, and relevant content.

Numerous guidelines for web designers are availabl e on the web and can be incorporated into the design process to ensure consis tency and adherence to emerging standards. Examples include but are not limited to:

• The Java Look and Feel Design Guidelines (Oracle, 2015)

• Research-Based Web Design & Usability Guidelines (Usabili ty, 2015)

• The World Wide Web Consortium's Web Accessibility Initiative (Web Accessibility Initiative, 2015)

• The Web Style Guide (Lynch and Horton, 2008)

There are numerous websites that address web design, some of which were created as companions to relevant books:

• Web 2.0 How-To Design Guide (Hunt, 2015)

• Web Bloopers (Johnson, 2003- updated 2008 online)

• Building Scalable Web Sites: Building, Scaling, and Optimizing the Next Generation of Web Applications (Henderson, 2006)

12.6 Color

Color displays are attractive to users and can often improve task performance, but the danger of misuse is high. Color can do all of the following:

• Soot he or str ike the eye

• Add accen ts to an uninteresting display

12.6 Color 445

• Facilitate subtle discriminations in complex displays

• Emphasize the logical organization of information

• Draw attention to warnings

• Evoke strong emotional reactions of joy, excitement, fear, or anger

The principles developed by graphic artists for using color in books, maga­ zines, highway signs, ai1d other print media have been adapted for t1ser it1ter­ faces (Marcus, 1992; MacDonald, 1999; Stone, 2003). h1teractive-systems designers have learned how to create effective computer displays and to avoid pitfalls (Brewer et al., 2003; Galitz, 2007).

There is no doubt that color makes video games more attractive to users, con­ veys more information on power-plant or process-control diagrams, and is nec­ essary for realistic images of people, scenery, or 3-dimensional objects (Foley et al., 2002; Weinman, 2002). These app lication s require color. However, greater controversy exis ts about the benefits of color for alphanumeric displays, spread­ shee ts, graphs, and user-interface componen ts.

No simple set of rules governs use of color, but these guidelines are a starting point for designers:

• Use color conservatively. Man y programmers and novice designers are eager to use color to brighten up their displays, but the results are often counter­ productive. One home-information system displayed the seven letters of its name in a large font, each in a different color. At a distance, the display ap­ peared inviting and eye-catching; up close, however, it was difficult to read.

vlhen the colors do not show meaningful relationships, they may mislead users into searching for relationships that do not exist. Using a different color for each of 12 unrelated items in a menu produces an overwhelming effect. However, using four colors (such as red, blue, green, and yellow) for the 12 items will mislead users into thinking that all the similar ly colored items are related. An appropriate strategy might be to show all the menu items in one color, the title in a second color, the instructions in a third color, and error messages in a fourth color, but even this strategy can be overwhelming if the colors are too visually striking. A safe approach is to always use black letters on a white background, with italics or bold for emphasis, and to reserve color for special highlighting.

• Limit the number of colors. Many design gt1ides suggest limiting the number of colors in a single display to four, with a limit of seven colors in the entire sequence of displays. Experienced users may be able to benefit from a larger number of color codes, but for novice users, too many color codes can cause confusion .

• Recognize the pozver of color as a coding technique. Color speeds recognition for many tasks. For example, in an accounting application, if data lines with ac­ counts overdue more than 30 days are coded in red, they will be readily visible among the non-overdue accounts coded in green. In an air-traffic-control

446 Chapter 12 Advancing the User Experience

system, high-flying planes might be coded differently from low-flying planes to facilitate recognition. In some programming languages, keywords are color­ coded differently from variables.

• Ensure that color coding supports the task. Be aware that using color as a coding techniqu e can inhibit performance of tasks that go against the grain of the coding scheme. If, in the above accounting application with color coding by days overdue, the task is to locate accounts with ba lances of more than $55, the existing coding scheme may inhibit performance on the second task. De­ signers shou ld attempt to make a close linkage between the users' tasks and the color coding and offer users control where possible.

• Have color coding appear with minin1al user effort. In general, users should not have to activate color coding each time they perform a task; rather, the color cocting should appear automatically. For example, when the users start the task of checking for overdue accounts, the color cocting should be set automatically; when they click on the task of locating accounts with balances of more than $55, the new color-coding scheme should also take effect automatically.

• Place color coding under user control. When appropriate, the users should be able to turn off color coding. For example, if a spelling checker highlights possibly misspelled words in red, the us er shou ld be able to accep t or change the spelling and to turn off the coding. The presence of the highly visib le red coding is a distraction from reading the text for comprehension.

• Design for 1nonochro1ne first. The primary goal of a display designer shou ld be to lay out the contents in a logical pattern. Related fields can be shown by contigui ty or by similar stru ctural patterns; for example, successive employee records may have the same indentation pattern. Related fields can also be grouped by a box drawn around the group. Unrelated fields can be kept sepa ­ rate by inserting blank space (at least one blank line vertically or three blank characters hori zontally).

• Consider the needs of color-deficient users. One important aspect to consid­ er is readability of colors by users w ith color-vision impairments (either red/ green confusion, the most common case, or total color blindness). Color impairment is a very common condition. Approximately 8% of males and less than 1 % of females in North America and Europe have some permanent color deficiency in their vision. Many others have temporary deficiencies due to ill­ ness or medications. They may, for example, confuse some shades of orange or red with green or not see a red dot on a black background. Designers can easily address this problem by limiting the use of color, using double encod ­ ing when appropriate (that is, using symbols that vary in both shape and color or location and color), providing alternative color palettes to cl1oose from, or allowin g users to customize the colors themselves. For example, the SmartMoney ® Map of the Market provides two choices of color schemes: red/green and blue/yellow. Various tools, such as Vischeck, are avai lable to

Number of data d asses: [1__j

Nature of your data: i l) St"quential dNerging u qualitative

Pick a color scheme:

Only show: I 3-class 8r8G

g colomllnd sat, 0 !):( J CO l;l pmt frl .. cly [ HEX , 0 !—r-+-, ~ .,.t/

l""I photocwt safe J ~

= l d8b36S

Context: I #fSfSfS

L roads I C cities •. 1Sab4ac

~ borders

Background:

solld color [B O tenaln

00101 tfanspar'el'Cy

o C)ndl~ 8rtW«, Marl Harrower anll The Pcrns)tv,1nla Stxt unt,,rnq …… BM:k 10 n,uh wnion ~k 10 Co!o18rt'lt.1"I 1.0

FIGURE 12.10

12.6 Color 447

@ axismops

ColorBrewer helps designers select co lor schemes for maps and other grap hics (Brewer et al., 2015). Controls also allow users to narrow down the choices to colors that are visible to users with color impairments.

both simulate color-vision impairments and optimize graphics for some of the various forms of color impairment that exist. Black on white or whjte on black will work '"'ell for most users. ColorBrew er (see Fig. 12.10), an online tool designed to help people select good color schemes for maps and other graphics, offers guidelines on color schemes that work for those with color ­ vision impairments (Brewer et al., 2015; Brewer, 2015).

• Use color to help in forn1atting. In densely packed displays where space is at a premium, similar colors can be used to group related items. For example, in a police dispatcl1er's tabular display of assignments, the police cars on emer­ gency calls might be coded in red, and the police cars on routine calls might be coded in green. Then, when a new emergency arises, it will be relatively easy to identify the cars on ro11tine calls and to assign one to the emergency. Dissimilar colors can be used to distinguish physically close but logically dis­ tinct fields. In a block -structured programming language, designers could show the nesting levels by coding the statements in a progression of colors ­ for exampl e, dark green, Light green, yellow, light orange, dark orange, red, and so on.

448 Chapter 12 Advancing the User Experience

• Be consistent in color coding. Use the same color-coding rules throughout the sys­ tem. If some error messages are displayed in red, make sure that every error message appears in red; a change to yellow may be interpreted as a change in the importance of tl1e message. If the various system desigr1ers use colors differ­ ently, users will hesitate as they attempt to assign meaning to the color changes.

• Be alert to common or cultural expectations about color codes. Designers need to speak to users to determine what color codes are applied in the task domain. From automobile-driving experience, red is commonly considered to indicate stop or danger, yellow is a warning, and green is all clear or go. In investment circles, red is a financial loss an d black is a gain. For chemical engineers, red is hot and blue is cold. For mapmakers, blue means water, green means forests, and yellow means deserts. These differing conventions can cause problems for designers. Designers might consider using red to signal that an engine is warmed up and ready, but users might interpret the red coding as an indica­ tion of danger. A red light is often used to indicate that power is on for electri­ cal equipment, but some users are made anxious by this decision since red has a strong association with danger or stopping. When appropriate, indicate the color-code interpretations on the display or in a help panel.

• Be alert to problems with color pairings. If saturated (pure) red and blue appear on a display at the same time, it may be difficult for users to absorb the infor­ mation. Red and blue are on the opposite ends of the visible spectrum, and the muscles surrounding the human eye will be strained by attempts to pro­ duce a sharp focus for both colors simultaneously: The blue wiJJ appear to re­ cede and the red will appear to come forward. Blue text on a red background wou ld present an especially difficu lt challenge for users to read. Other com ­ binations (yellow on purple, magenta on green) will similarly appear garish and be difficult to read. Too little contrast also is a problem: Imagine yellow letters on a white background or brown letters on a black background.

• Use color changes to indicate status changes. For automobile speedometers with d igital readouts and a wireless receiver of the dri, ring speed limits, it might be helpful to change from green numbers below the speed limit to red above the speed limit to act as a warning. Similarly, in an oil refinery, pressure indicators might change color as the value goes above or below acceptable limits. In this way, color acts as an attention -getting method. This technique is potentially valuable when there are hundreds of values displayed continuously.

• Use color in graphic displays for greater inforrnation density. In graphs with multiple plots, color can be helpful in showing which line segments form the full graph. The usual strategies for differentiating lines in black-on-white graphs-such as dotted lines, thicker lines, and dashed lines- are not as effective as using sepa­ rate colors for each line. Architectura l p lans benefit from color coding of electri­ cal, telephone, hot -water, cold -water, and natural -gas lines. Similarly, maps can have greater information density when color coding is used.

12.6 Color 449

Color displays are becoming nearly uni versal, even in mobile devices, and designers usually ma ke heavy use of color in in terface designs. There are undo ubtedly benefits in terms of increase d user satisfaction and often enhanced perform ance, but there are also real dan gers in misusing color. Care should be taken to make appr opriate design choi ces and to conduct thorough eva lua tions (Box 12.4).

BOX 12.4 Guide lines that highlight the complex potentia l benefits and dangers of using color coding.

Guid elin es for using color

• Use color conservatively : Lim it the number and amount of co lors.

• Recognize the power of color to speed or slow tasks .

• Ensure that color coding supports the task.

• Make co lor coding appear with m inimal user effort.

• Keep color coding under user control.

• Design for monochrome first.

• Consider the needs of color -deficient users .

• Use color to help in formatting.

• Be consistent in color coding .

• Be alert to common expectat ions about color codes .

• Be alert to problems with color pairings.

• Use color changes to ind icate status changes .

• Use color in graphic displays for greater information density.

Benefit s of using color

• Various colors are soothing or str iking to the eye.

• Color can improve an uninteresting display .

• Color facilitates subtle discriminations in complex disp lays.

• A color code can emphasize the logical organization of information .

• Certain colors can draw attention to warnings .

• Color coding can evoke more emotional reactions of joy, excitement , fear, or anger.

Dangers of using color

• Color pairings may cause problems .

• Color fidel ity may degrade on other hardware .

• Printing or conversion to other med ia may be a problem .

450 Chapter 12 Advancing the User Experience

12.7 Nonanthropomorphic Design

There is a great temptation to have computers "talk" as though they are people. Chil­ dren accept l1uman-like references and qualities for almost any object, from Humpty Dumpty to Sponge Bob TM. Some adults still reserve anthropomorphic references for objects of special attraction, such as cars, ships, computers, and even cellphones.

"People treat computers as if tl1ey were people" was a quote from the late Clifford Nass at Stanford who had performed significant research on human-computer interaction, people multitasking, improved automobile design, and more. One book of his insights deals with computers and relationships (Nass and Yen, 2010).

The words and graphics in user interfaces can make important differences in people's perceptions, emotional reactions, and motivations. Attributi ons of intellige11ce, autonomy, free will, or knowledge to computers are appealing to some people, but to others such characterizations may be seen as deceptive, con­ fusing, and misleading. The suggestion that computers can think, know, or und ers tand may give users an erro neous model of how comp ut ers work and what the machines' capacities are. Ultimately, the deceptio11 becomes apparent, and users may feel poorly treated.

A second reason for using nonanthropomorphic phrasing is to clarify the dif ­ ferences between people and comp ut ers . Relationships with people are different from relationships with comp ut ers. Users opera te and control computers, but the y respect the unique identities and autonomy of individuals. Furthermore, users and designers must accept responsibility for misuse of computers rather than blaming the machines for errors.

A third moti,rat ion is that, although an anthrop omorphic interface may be attractive to some peop le, it can be distracting or produce anxiety for others. Some people express anxiety about using computers and believe that computers "make you feel dumb." Presenting the computer through the specific functions it offers may be a stronger stimulus to user acceptance than promoting the fan­ tasy that the computer is a friend, parent, or partner. As users become engaged, the computer becomes transparent, and they can concentrate on their writing, problem solving, or exploration. At the end, they have the experience of accom­ plishment and mastery rather than the feeling that some magical machine has done their job for them. Anthropomorphic interfaces may distract users from their tasks and waste their time as they consider how to please or be socia lly appropriate to the onscreen characters.

Experts in consumer product interface design often speak of making technology invisible (Bergman, 2000). Designers have fielded interfaces on such items as mall kiosks, postage dispensers, and interactive voice response (IVR) sys tems that anthropomorphize, giving an impression to the novice user that the com­ puter systems are doing some intelligent reasoning while adding stress on and

12.7 Nonanthropomorphic Design 451

disempowering the user. IVR systems are notorious for anthropomorphizing interfaces. Here are some current examples: One airline reservation system says, "OK, I can help with that … " after you request to initiate a domestic reservation; an automated banking system says, "Please l1old while I check your account balance … "; a mail-order pharmacy says, "Would you like me to send your prescription to the address on record?" Think about experiences users may have had that are humorous interactions with SiriTM_ The speech-recognition technology for many of these systems is improving (see Chapter 9) but still may cause user frustration.

Individual differences in the desire for internal locus of control are important, but there may be an overall advantage to clearly distinguishing human abilities from computer powers for most tasks and users (Shneiderman, 1995). On the other hand, there are persistent advocates of creating anthropomorphic interfaces, often called virtual humans, lifelike autonomous agents, "chatbots," or embodied conversational agents (Cassell et al., 2000; Gratch et al., 2002; D'Mello et al., 2007).

Advocates of anthropomorphic interfaces assume that human-human com­ mu1ucation is an appropriate model for human operation of computers . It may be a useful starting point, but some designers pursue the human-imitation approach long after it becomes counterproductive. Mature technology has man­ aged to overcome the obstacle of animisni (animism refers to non-human things like animals, plants, and inanimate objects possessing a spiritual essence), which has been a trap for technologists for centuries (Mumford, 1934); a visit to the Museum of Automata in York, England, reveals the ancient sources and persis ­ tent fantasies of animated dolls and robotic toys.

Historical precedents of failed anthropomorphic bank tellers, such as Tillie the Teller, Harvey Wallbanker, and BOB (Bank of Baltimore), and of abandoned talking automobiles and soda machines do not seem to register with some designers. The bigger-than-life-sized Postal Buddy was supposed to be cute and friend ly while providing several useful automated services, but users rejected this pseudo-posta l clerk after the project had incurred costs of more than $1 bil­ lion. Advocates of anth ropomorphic interfaces suggest that they may be most useful as teachers, salespeop le, therapists, or entertainment figures. Animated characters that range from cartoon- like to realistic have been embedded in many interfaces, but evidence is growing that they increase anxiety and reduce perfor­ mance, especia lly for users with an external locus of control.

011e specific design controversy is over the use of first-person pronouns in an interface. Advocates believe it makes the interaction friendly, but such interfaces may be counterproductive because they can deceive, mislead, and confuse users. It may seem cute on the first encounter to be greeted by "I am SOPHIE, the sophisticated teacher, and I will teach you to spell correctly." By the second ses­ sion, however, this approach strikes many people as silly; by the third session, it cai1 be an annoying distraction from the task . The alternative for the interface designer is to focus on the user and to use third-person-singu lar pronouns or to

452 Chapter 12 Advancing the User Experience

avoid pronouns altogether. Impro ved messages may also suggest a higher level of user control. For example:

Poor:I wi ll begin the lesson when you press RETURN. Be tte r: You can begin the lesson by pressing RETURN. Bette r ye t: To begin the 1 esson , press RETURN.

The you form seems preferable for introductions; however, once the session is under way, reducing the nt1mber of pronouns and words avoids distractions from the task .

The issue of pronoun usage reappears in the design of interactive voice­ response telephone interfaces, especially if speech recognition is employed. Advo­ cates argue that greetings from a rental-car reservation service , for example, might be more appealing if they simulate a human operator: "Welcome to Thrifty Car Rentals . I'm Emily, let me help you reserve your car. In what city will you need a car?" While most users won't care about the phrasing, opponents claim that this deception does annoy and worry some users and that the expedient solution of dele ting the chatty second sen tence produces higher customer sa tisfaction.

Some designers of children's educational software believe that it is appropriate and acceptable to have a fantasy character, such as a teddy bear or busy beaver, serve as a guide through a lesson. A cartoon character can be drawn on the screen and po ssibly animated, adding visual appeal, speak ing to users in an encouraging style, and pointing to relevant items on the display. Successful educationa l soft­ ware packages such as Leap Frog® and some empirical research (Mayer, 2009) pro ­ vide support for this position. Child-computer interac tion is now a research and development field unto itself-see the text by Hourcade (2015) and by Druin (2009).

Unfortunately, cartoon characters were not successfu l in BOB, a heavily pro­ moted but short -li, ,ed home -computing product from Microsoft. Users could choose from a variety of onscreen characters that spoke in cartoon bubbl es with phra ses such as: "Wha t a team we are," "Good job so far, Ben," and "What shall we do next, Ben?" This style might be acceptable in children 's games and educa­ tional software, but it is probably not acceptab le for adults in the workplace. Interfaces shoul d neither compliment nor condemn us ers, just provide compre­ hen sible feedback so users can move forward in achieving their goals. How ever, anthropomorphic characters will not necessarily succeed here, either. Micro ­ soft's ill-fated Clippy character (a lively paper-clip cartoon character) was designed to provide helpful suggestions for users. It amused some but annoyed many, and it was soon demoted to an optional extra. Defenders of anthropo­ morphic interfaces found marly reason s to explain Clippit's rejection (primarily its disruptive interference with users). Others believe that successful anthropo­ morphic interfaces require socially appropriate emotional expressions as well as well-timed head movements, nods, blinks, and eye contact.

An alternative instructional design approach that seems acceptable to many users is to present the l1uman author of a lesson or software package. Through an

12.7 Nonanthropomorphic Design 453

audio or video clip, the author can speak to user s, much as television news announcers speak to viewers. Instead of making the computer into a person, designers can show identifiable and appropriate human guides. For example, the Secretary-Ge11eral might record a video welcome for visitors to a website about the United Nations, or Bill Gates might provide greetings for new users of Windows.

Once past these introductions, several styles are possible. One is a continua­ tion of the guided-tour metaphor, in which the respected personality introduces segme11ts but allows user s to control the pace, to repeat segme nts, and to decide when they are ready to move on. A variant of this approach creates an inter ­ view-like experience in which users read from a set of three prompts and issue spoken commands to get pre-recorded video segments by noted figures su ch as former Senator John Glenn. This approach works for mu seum tour s, tutorial s on software, ai1d certain educational lectures.

Another strategy is to support user control and enhance the user experience by showing an overview of the modules from which users can choose. Users decid e how much time to spend visiting part s of mu seum s, browsing a timeline with detail s of events, or jumping between articles in a hyperli nked encyclope­ dia. These overviews give users a sense of the magnitude of information ava il­ able and allow them to see their progress in covering the topics. Overviews also support users' needs for closure, give them the satisfaction of compl etely tour ­ ing the contents, and offer a comprehensible environm ent with pr edic tabl e actions that foster a comforting sense of control. Furthermore, they support the need for replicability of actions (to revisit an appealin g or confusin g module or to show it to a colleague) and reversi bility (to ba ck up or return to a known land­ mark). While in games users may enjoy the challenge of confu sion, hidd en con­ trols, and unpredictability, this is not the case in most applications; rather, designers must strive to make their products comprehensible and predictable. A summary of nonanthropomorphic guidelines appears in Box 12.5.

BOX 12.5 Guidelines for avoiding anthropomorphism and building appealing interfaces.

Nonanthropomorphic guideline s

• Be cautious in presenting computers as peop le, either with synthesized or cartoon characters.

• Design comprehensible, predictable, and user-controlled interfaces .

• Use appropriate humans for audio or video introductions or guides.

• Use cartoon characters in games or children's software, but avoid them elsewhere.

• Provide user-centered overviews for orientation and closure.

• Do not use pronoun / when the computer responds to human actions .

• Use you to guide users, or just state facts.

454 Chapter 12 Advancing the User Experience

12.8 Error Messages

Error messages are a key part of an overall interface design strategy of guidance for the user. The strategy should ensure integrated, coordinated error messages that are consistent across one or multiple applications.

Design disasters have appeared in systems and websites where error mes­ sages written by multiple authors read quite obviously as though they were written by multiple authors. Th ere are several "hall of shame" error-message websites where communities of users and developers share bizarre and mis­ leading error-message experiences. Some are critical and humorous, while others are informative, providing lessons learned and suggestions for improvement; an example is the error-message discussion on the Microsoft Developers Network (2015).

Solutions for avoiding error-message design disasters include discussing help and error handling in a style guide for all designers to review and follow and ensuring that error messages are designed into a computing system or website rather than being added as a final step or afterthought.

One problem that is sometimes seen is when error messages do not clearly correspond with the help provided, illustrating an obvious information gap in transitioning from the error message to assisting the user in performing the cor­ rective action. With respect to international user interfaces, designers can run into troubl e when having third-party language experts transl ate error messages, help text, prompts, and other support features. Experienced designers isolate the error messages and help text information into separate files (not hard-coded) for ease of translation during the development phase and later maintenance updat es. This also permits on-site, local languag e selection when a sys tem is install ed in a country other than the one where the software v.ras originally created.

Normal prompts, advisory messages, and system responses to user actions may influence user perceptions, but the phrasing of error messages and diag­ nostic warnings is critical. Since errors occur because of lack of knowledge, incorrect understanding, or inadvertent slips, users are likely to be confused, to feel inadequate, and to be anxious when they encounter these messages. Error messages with an imperious tone that condemn users can heighten anxiety, making it more difficult to correc t the problems and increasing the chances of further errors. Unhelpful help content is another source of stress.

These concerns are especially important with respect to novices, whose lack of kno,vledge and confidence amplifies the stress that can lead to a frustrating sequence of failures. The discouraging effects of a bad experience in using a computer are not easily overcome by a few good experiences. In some cases,

12.8 Error Messages 455

interfaces are remembered more for what happens when things go wrong than for when things go right. Although these concerns apply most forcefully to novice computer users, experienced users also suffer. Experts in one interface or part of an interface are still 11ovices in many situations.

Improving error messages is one of the easiest and most effective ways to improve an existing interface. If the software can capture the frequency of errors, designers can focus on optimizing the most important messages. Error­ frequency distributions also enable interface desigi,ers and maintainers to revise error-handling procedures, to improve documentation and tutorials, to alter online help, or even to change the permissible actions. The complete set of mes­ sages should be reviewed by peers and managers, tested empirically, and included in user documentation.

Specificity, constructive guidance, a positive tone, a user-centered style, and an appropriate physical format are recommended as the bases for preparing error messages (Box 12.6). These guidelines are especially important when

BOX 1 2.6 Error-message guidelines for the end product and for the development process. These guidelines are derived from practical experience and empirica l data .

End product

• Be as specific and precise as possible. Determine necessary, relevant error messages.

• Be constructive. Indicate what the user needs to do.

• Use a positive tone. Avoid condemnation. Be courteous.

• Choose user -centered phrasing . State the problem, cause, and solution.

• Consider multiple levels of messages. State brief, sufficient information to assist with the corrective action .

• Maintain consistent grammatical forms, terminology, and abbreviations.

• Maintain consistent visual format and placement.

Development process

• Increase attention to message design.

• Establish quality control.

• Develop and enforce guidelines .

• Carry out usability tests.

• Consider conducting "error handling" reviews.

• Record the frequency of occurrence for each message .

456 Chapter 12 Advancing the User Experience

the users are novices, but they can benefit experts as well. The phrasing and contents of error messages can significantly affect user performance and satis­ faction, thereby advancing the overall user experi ence .

12.8. 1 Specificity Messages tha t are too general make it difficult for the novice to determine what has gone wrong. Simple and condemning me ssages are frustrating becau se they provide neither enough information about what has gone wrong nor the knowl ­ edge to set things right. Therefore, the right amount of specificity is important. Here are some exampl es:

Poor :SYNTAX ERROR Better: Unmatched left parenthesis

Poor :INVALID DATA Better: Days range from 1 to 31

Poor :BAD FILE NAME Better: The fi l e C: demodata . txt was not found

Poor:??? Better: Touch icon twice to start app

One interface for hotel cl1eck-in required the desk clerk to e11ter a 40- to 45-character string containing the name, room number, credit-card information, and so on. If the clerk made a data-entry error, the only message was INVALID

I NPUT. YOU MUST RETYPE THE ENTIRE RECORD. Tl1is led to frustration for users and delay s for irritated guests. Interacti ve systems should be de signed to minimize input errors by use of proper form fill-in strategies (Chapter 8); when an error occurs, the users should have to repair only the incorrect part.

For example, one good design that is apparent on some websites prompts a user to complete a form fill-in task and then submit the form. If there are any errors, the form is again presented to the user highlightn1g wl1at informatio11 needs to be correctly entered. The user makes the corrections and then resub ­ mits the form (without being forced to complete the entire form again). Using a combination of form fill-in and menu interac tion sty les (Chapter 8) can also red uce errors (e.g., selecting a country from a list rather than having the user type the country name into the form).

12.8 Error Messages 457

12.8.2 Constructive guidance and positive tone Rather than condemnjng users for what they have done wrong, messages should, where possible, indicate what users need to do to set things right:

Poor:Run-Time error '-2147469 (800405)': Method ' Private Profile String' of object 'System' failed.

Better: Virtual memory space consumed. Close some programs and retry.

Poor :Network connection refused. Better: Password was not recognized. Please retype.

Poor: Invalid date. Better: Arri val date must come after departure date .

Unnecessarily l1ostile messages using viole11t terminology can disturb non­ technical users. An interactive legal-citation-searcrung system uses trus mes­ sage: FATAL ERROR' RUN ABORTED. Similarly, an early operating system threatened many users with CATASTROPHIC ERROR; LOGGED WITH OPERATOR. There is no excuse for the se hostile messages; they can easily be rewritten to provide more information about what has happened and wl1at must be done to set things right. Where possible, be constructive and positive. Such negative words as ILLEGAL, ERROR, WRONG, INVALID, or BAD should be eliminated or used infrequently.

It may be difficult for the sof tware writer to create a program that accurately determines the user's intention, so the advice to "be constructive" is often diffi­ cult to apply. Some designers argue for automatic error correction, but the dis­ advantage is that u sers may fail to learn proper syntax and may become dependent 011 alteration s that the sys tem makes. Envision the elementary-school language teacher trying to train schoolcruldren in spelling when the papers stu­ dents hand in are spell-checked, grammar-checked, and even autocorrected as th ey are typed; the students will have no incentive to self-correc t, and the teacher will not be able to see what mistakes they are making . Another approach is to inform users of the possible alternatives and to let them decide. A preferred strategy is, where possible, to prevent errors from being made (Section 3.3.5).

12.8.3 Appropriate physical format Most users prefer and find it easier to read mixed uppercase and lowercase mes­ sages. Uppercase-only messages should be reserved for brief, serious warnings. Messages that begin with a lengthy and mysterious code number serve only to

458 Chapter 12 Advancing the User Experience

remind the user that the designers were insensitive to the users' real needs. If code numbers are needed at all, they migl1t be enclosed in parentheses at the end of a message or as a "provide more details" function.

There is disagreement about the optimal placement of messages in a dis­ play. One schoo l of thought argues that the messages should be placed on the display near where the problem has arisen. A second opinion is that the messages clutter the display and should be placed in a consistent position on the bottom of the display. The third approach is to display a dialog box near to, but not obscuring, the relevant problem. It seems all too common to have an error message pop up in the center of the page, halting all activity and forcing the user to move the dialog box or to click a confirmation (e.g., "OK") to continue.

Some applications sound a tone wl1en an error has occurred. This alarm can be useful if the operator might otherwise miss the error, but it can be embarrass ­ ing if other people are nearby, and it is potentially annoying even if the operator is alone.

Designers must walk a narrow path between calling attention to a problem and avoiding embarrassment to users. Considering the wide range of experience and temperament in users, maybe the best solution is to offer users contro l over the alternatives – this approach coordinates well with the user-centered principle.

Improved messages will be of the greates t benefit to novice users, but regular users and experienced professionals will also benefit. As examp les of excellence proliferate, complex, obscure, and harsh interfaces will seem increasingly out of place. The crude environments of the past will be replaced gradually by inter­ faces designed wi th the users in mind. Resistance to such a transition sho uld not be allowed to impede progress toward the goal of serving the growing user community.

Practitioner's Summary

Pay careful attention to display design, and develop a local set of guidelines for all desigi1ers. Use spacing, indentation, columnar formats, and field labels to orga­ nize the display for users. De11ser displays, but fewer of them, may be advanta­ geous. Organizations can benefit from careful study of display-design guidelines documents and from the creation of their own sets of guidelines tailored to local needs (Section 3.2). These documents should also include lists of local termino l­ ogy and abbreviations. Consistency and thorough testing are critical.

Current web technologies and new web design guidelines provide new tools and emerging methods for user -generated content to be easily and

Researcher's Agenda 459

rapidly inserted into websites. Universal usability is also addressed by current web design guidelines. Good window design methods can enhance the user experience.

Color can improve some displays ai1d can lead to more rapid task perfor­ mance with higher satisfaction. However, improper use of color can mislead, distract, and slow users.

When giving instructions, focus 011 the user and the user's tasks. In most ap­ plications, avoid anthropomorphic phrasing. Use the you form to guide the nov­ ice user. Avoid judging the user. Simple statemen ts of status are more succinc t and usually are more effective.

The wording of system messages may have an effect on users' performance and attitudes, especially for novices, whose anxiety and lack of knowledge put them at a disadvantage. Designers might n1ake improvements by merely using more specific diagnostic messages, offering constructive guidance rather than focusing on failures, employing user-centered phrasing, choosing a suitable physical format, and avoiding vague terminology or numeric codes .

Researcher's Agenda

Increase designer knowledge utilizing World Wide Web tools and methods as they apply to websi te design to advance the user experience, facilitate user­ generated content, and promote universal usability.

Basic understanding and cognitive models of visual perception of displays as display technology improves conti11ue to be a need. Do users follow a scan­ ning pattern from the top left? Would research using eye-tracking sys tems clar­ ify reading and focus of attention patterns? Do users whose native language reads from right to left or users from different cultures scan displays differently? Does use of white space around or boxin g of items facilitate comprehension and speed int erpre tation? When is a single dense display preferable to two sparse displays? How does color coding reorganize or disrupt the pattern of scanning? What about research in recent trendy webpage designs like those using parallax scrolling: easy (and fun) to use or confusing for a novice user?

Experimental testing could refine the error-message guidelines proposed here and could iden tify the sourc es of user anxiety and confusion . Message placement , highlighting techniques , and multiple- level message strategies are candidates for exp loration. Improved analysis of sequences of user actions to provide more effective messages automatically would be useful. Since anthro­ pomorphic designs are rare ly successfu l, believers in hum an- like agents should conduct empirical studies to test their efficacy.

460 Chapter 12 Advancing the User Experience

WORLD WIDE WEB RESOURCES

www. pearsonglobaleditions . com / shneiderman

Guidelines for disp lay design, webpages, and window management exists on t he Wor ld Wide Web with some empirica l results, but the most informat ive and enjoyable experience is simply browsing through the lively and co lorfu l websites. Web and other interface styles and fashions come and go quick ly.

Discussion Questions

l. Effective display designs must provide all the necessary data in the proper se­ quence to carry out the task. Identif y a recent personal user experience where it either was very clear or very unclear about what the sequence of steps was necessary to complete a task. What made that experience memorable?

2. List a few reasons for using animation in display design.

3. Briefly explain the term "responsive design".

4. Color displays are attractive to users and can often improve task perfor­ mance, but the danger of misuse is high. List five guidelines for using color and give an example of each.

5. For the following three items, find the problems in each of the following error messages produ ced by a sour ce code comp iler. Briefly state your reasoning and suggest a better message.

SYNTAX ERROR

INCORRECTLY FORMED RHS OF EXPRESSION. BAILING OUT ON LINE 6.

ILLEGAL OPERATION. PROCESS KILLED!!!

6. What problems do anthropomorphic interface s pose for the users?

References

Bartram, Lyn, Ho, Albert, Dill, John , and Henigman, Frank, The continuous zoom: A constrained fisheye technique for viewing an d navigatin g large information spaces, Proceedings of the ACM Symposium on User Interface Software and Technology (UIST), ACM Press, New York (1995), 207-215.

Baudisch, P., Lee, B., and Hanna, L., Fishnet, a fisheye web browser with sea rch term popouts: A co1nparative evaluation with overview and linear view, Proceedings of the

Refe rences 461

Working Conference on Advanced Visual Interfaces, ACM Press, New York (May 2004), 133-140.

Bederson, Ben, The promise of zoomable user interfaces, Behaviour & Information Tech­ nologi; 30, 6 (2011), 853- 866.

Bergman, Eric, Infonnation Appliances and Beyond: Interaction Design for Consun1er Prod­ ucts, Morgan Kaufmann, San Francisco, CA (2000).

Brewer, Cynthia A., Hatchard, Geoffrey W ., and Harrower, Mark A., ColorBrewer in print: A cata log of color schemes for maps, Cartography and Geographic Information Science 30, l (2003), 5-32.

Brewer, C., Harrower, M., Shees ley, B., Woodruff A., and Heyman, D. (2015). Available at http://colorbrewer2.org/ .

Brewer, C., Desigiiing Better Maps, 2nd Edition, ESRI Press, Redlands, CA (2015).

Cassell, Justine, Sullivan, Joseph, Prevost, Scott, and Churchill, Elizabeth, Embodied Conversational Agents, MIT Press, Cambridge, MA (2000).

Chetty, M., Banks, R., Bernheim Brush, A. J., Donner, J., and Grin ter, R. E., You're capped: Understanding the effec ts of broadband caps on broadband use in the home, Proceedings of the ACM Conference on Hu,nan Factors in Co,nputing Systerns, ACM Press, New York (2012).

Cockb urn, A., Kar lson, A., and Bederson, B., A review of overview + detai l, zooming, and focus+ con text interfaces, ACM Con1puting Survei;s 41, 1, ACM Press, New York (2009), Article 1.

D'Mello, S. K., Picard, R., and Graesser, A. C., Toward an affect-sensitive AutoTutor, IEEE Intelligent Syste1ns 22, 4 CTuly / August 2007), 53-6 1.

Druin, A., Mobile Technology for Children: Designing for Interaction and Learning, Morgan Kaufmann (2009).

Foley, James D., van Dam, Andries, Feiner, Steve n K., and Hughes, John F., Computer Graphics: Principles and Practice, 2nd Ed ition in C, Addison-Wes ley, Reading, MA (2002).

Ga litz, Wi lbert 0., The Essential Guide to User lnte,face Design: An Introduction to GUT Design Principles and Techniques, 3rd Edition, Jolu1 Wiley & Sons, New York (2007).

Gap min der (2015). Availa ble at http://www.gaprninde r.org/ about-gapminder /.

Gratc h, J., Ricke l, J., Andre, E., Bad ler, N., Cassell, J., and Petajan, E., Creating in teract ive virtua l humans: So1ne assembly required, IEEE Intelligent Syste111s 17, 4 (2002), 54-63.

Henderso n, Cal, Building Scalable Web Sites: Building, Scaling, and Optimizing the Next Generation of Web Applications, O'Rei lly Media, Inc. (2006).

Hornbaek, K., Bederson, B. B., and Plaisant, C., Navigation patterns and usability of zoomable user interfaces with an d without an overview, ACM Transactions on Computer-Hu,nan Interaction 9, 4 (December 2002), 362- 389.

Hourcade, J.P., Child Com.puter Interaction (2015). Available at http:/ /homepage .cs.u iowa.edu/-hourcade/book/index .php.

Hunt, Ben, Web 2.0 How-To Design Guide (2015). Available at http:/ /webdesignfromscratch .com/ web-design/ web-2-0-design-sty le-guide/.

462 Chapter 12 Advancing the User Experience

Johnson, Jeff, Web Bloopers, Morgan Kaufmann, San Francisco, CA (2003). Updates avail­ able at http:/ /www.web-bloopers.com/ (2008).

Johnson, Jeff, Designing uJith the Mind in Mind: Sirnple Guide to Understanding User Inter­ face Design Rules: 2nd Edition, Morgan Kaufmann, San Francisco, CA (2014).

Jon es, M. C., Floyd, I. R., Rathi, D., and Twi dal e, M. B., Web mash-ups and patchwork prototyping: User-driven technological innovation with Web 2.0 and open source software, Proceedings of the 40th Annual Hawaii International Conference on Syste1n Sci­ ences (HICSS '07), IEEE Press, Los Alamitos, CA (2007).

Law, E. L. C., The measurab ility and predictabi lity of user exper ience, Proceedings of the 3rd ACM SIGCHI Syn1posiun1 on Engineering Interactive Cornputing Systerns, ACM Press, New York (2011).

Lynch, Patrick J., and Horton, Sarah, Web Style Guide: Basic Design Principles for Creating Web Sites, 3rd Edition, Yale University Press, New Haven, CT (2008). Available online at http://websty leguide.com/.

MacDonald, L., Using color effectively in computer graphics, IEEE Co1nputer Graphics & Applications 19, 4 (July/ August 1999), 20-35.

Marc1.ts, Aaron, Graphic Design for Electronic Docurnents and User Interfaces, ACM Press, New York (1992).

Mathur, A., Schlotfeldt, B., and Chetty, M., A mixed-methods study of mobile users' data usage practices in South Africa, Proc. ACM International Joint Conference on Pervasive and Ubiquitous Computing (UbiCamp 2015), Osaka, Japan (2015).

May er, Richard E., Multimedia Learning, 2nd Edition, Cambridge University Press, Nev.1

York (2009).

Microsoft Developers Network, Error messages (2015). Available at https:/ /msdn .microsoft.com/ en-us/ library/ dn7 42471.aspx .

Mullet, Kevin, and Sano, Darrell, Designing Visual Interfaces: Conimunication Oriented Techniques, Sunsoft Press, Englewood Cliffs, NJ (1995).

Mumford, Lewis , Technics and Civilization, Harcourt Brace and World, New York (1934), 31- 36.

NASA, NASA wins 2015 Wehby Awards (2015). Available at http:/ /www.jpl.nasa .gov/ news/ news.php ?feature=4566.

Nass, Clifford, and Yen, Corina, The Man Who Lied to His Laptop: What Machines Teach Us About Hun·tan Relationships, Penguin Group (2010).

National Cancer Institute, U.S. Department of Health and Human Services, Research­ Based Web Design & Usability Guidelines (2008). Ava ilabl e at http: / /"vww.usability .gov/ pdfs / guidelines.html.

Nielsen Norman Group, Top 10 Mistakes in Web Design (2011). Available at http: / /www .nngroup. com/ articles/ top-10-mi sta kes-web -des ign / .

Nielsen Norman Group, User Experience for Mobile Applications and Websites, 3rd Edition (2015). Available at https:/ /www .nngroup.com/reports/mobile-website-and­ app lication-usability /.

Refe rences 463

Novick, D ., Rhode s, J., and Wert, W., The communicative functions of animation in user interfaces, Proceedings of the 29th ACM International Conference on Design of Com,nuni­ cation (SIGDOC '11), Ne,.v York (2011), 1- 8.

Oracle, Java Look and Feel Design Guidelines (2015). Available at http:/ /ww1.v .oracle.com/ technetwork/ java /j l f-135985.htmJ.

Parallax, 50 great parallax scrolling websites (2015). Available at http:/ /,.vww.creativeb loq .com/ web-design/ parallax-scrolling-1131762.

Plaisant, Catherine, Carr, David, and Shne iderman, Ben, Image browsers: Taxonomy and design gujde lines, TEE£ Softzvare 12, 2 (March 1995), 21-32.

Plaisant, C., Shneiderman, B., and Chao, T., Twinlist: Novel Interfaces for Medication Reconciliation (2015). Avai lable at http: / /www.youtube.com/watch?v= YXkq9hQpp0>V.

Rosling, Hans, 200 years that changed the world (2015). Available at https:/ /www. you tube .com/ watch ?v=BPtSElTQMig.

Sarkar, Manojit, and Brown, Marc H ., Graphical fisheye views, Cornmunications of the ACM 37, 12 (July 1994), 73-84.

Shneider1nan, Ben, Looking for the bright side of agents, ACM Interactions 2, 1 (January 1995), 13-15.

Smith, Sid L., and Mosier, Jane N., Guidelines for Designing User Interface Software, Report ESD-TR- 86-278, Electronic Systems Division, MITRE Corporation, Bedford, MA (1986). Availab le from the National Technical Informa tion Service, Springfie ld, VA.

Spence, Robert, Infonnation Visualization, Addi son-Wesley, Reading, MA (2001).

Stone, Maureen, A Field Guide to Digital Color, A. K. Peters, Wellesley, MA (2003).

Tid,.vell, Jennifer, Designing Interfaces, Patterns for Effective Interface Design, 2nd Edition, Sebastopol, CA: O'Reilly Media Inc. (2011), 8-24.

Tullis, T. S., Information presentation, in Proctor, R., and Vu, K. (Editors), Handbook of Hu1nan Factors in Web Design., Routledge, Ne,.v York (2004).

Tullis, T. S., Web-based presentation of infor1nation: The top ten mistakes and why they are mistakes, Proceedings of the HCI International 2005, Las Vegas, NV, Lawrence Erlbaum Associates (July 2005).

Tversky, B., Morrison, J.B., and Betrancourt, M., Animation: Can it facilitate?, International Journal of Hu1nan-Con1puter Studies 57, 4 (2002), 247-262.

University of Texas, National Center for Cognitive Informatics & Decision Making in Healthcare, Effective Table Design SEDB-G02 (2013). Avai lable at https:/ /sbmi.ut h .edu/ need/SEO /Briefs/ sedb-g02.htm.

Usability, Research-Based Web Design and Usability Guidelines (2015). Availab le at http:// guidelines. usability .gov/.

Web Accessibility Initiative, World Wide Web Consortiun1 (W3C) (2015). Available at http: //www. w3. org /standa rds / webdesign/ accessibility.

Weinman, Lynda, Designing Web Graphics, 4th Edition, New Riders, Indianapolis, IN (2002).

~ – se? c__-.,

r • e.,_cudi09 11erge co1111'iS

— –

CHAPTER

'' Stimula tion is the indispensable requ isite for pleasure in an

experience, and the feeling of bare time is the least ,, stimulating experience we can have.

William James Principles of Psychology, Vo lume I, 1890

'' N othing can be more useful to a man than a '' determination not to be hurried.

CHAPTER OUTLINE 13.1 Introduction

13.2 Models of System Response Time (SRTI Impacts

13.3 Expectations and Attitudes

13.4 User Productivity and Variability in SRT

13.5 Frustrating Experiences

Henry David Thoreau

Journal

465

466 Chapter 13 The Timely User Experience

13.1 Introduction

For years, user perception of computer speed was determined by response time for mathematical computations, program compilations, or database searches. With the emergence of the World Wide Web, user expectations for expanded services grew, along with still more complex explanations of delays. Consider the speed (and accuracy) of weaving through internet search results. Users who wait many seconds for an app to load on their phones know why response time is ai1 attraction.

Users do not always understand the impact among text, graphics, high­ resolution images, video, and animation to appreciate the huge variations in server loads, network congestion, and proximity to wireless and the wireless speed. They also have to understand the multiple sot1rces of problems, such as dropped connections, unavailable websites, and network outages. This complex set of concerns is usually discussed under the umbrella term Quality of Service (QoS). This term was originally derived from the telecommunications industry and still "rings true" here (pun not intended) where Quality of Service can be measured in terms of telephone call quality, lost connections, customer satisfaction, connection time, cost, and other factors.

Concern over the timely user experience stems from a basic human value: Time is precious. tlhen externally imposed delays impede progress on a task, many people become frustrated, annoyed, and eventually angry . Apps may be abandoned within minutes if performance is inadequate. Customers will leave the website and order the same product from a competitor if they suspect the user experience will be better. Some users accept the situation with a shrug of their shoulders, but most users prefer to work as quickly as the software and connection allow.

Discussions of the timely user experience must also take into account a second basic human value: Harmful mistakes should be avoided. However, baJancing rapid performance with low error rates sometimes means that the pace of work must slow. If users wo rk too quickly, they may learn less, read with lower comprehension, commit more data -entry errors, and make more incorrect decisions. Stress can build in these situations, particularly in life­ critical systems.

A third aspec t of the timely user experience is reducing user frustra tion. Users may become frustrated enough to make mistakes or give up working. Delays are often a cause of frustration, but there are others, such as crashes that destroy data, software bugs that produce incorrect results, and poor designs that lead to user confusion. Ne tworked environments generate further frus tra­ tions: unreliable service providers, the ever-present e-mail phishing or spam messages, and malicious viruses.

13.1 Introduction 467

Timely user experience discussions usually focus on the decisions to be made by network designers and operators. This is appropriate because their decisions have a profound influence on many users. They also have the tools and knowledge to be helpful, and increasingly, they must adl1ere to legal and regulatory controls. Interface designers and builders can also make design decisions that dramatically influence the user experience. For exa1nple, they can optimize webpages to reduce byte counts and numbers of files or provide previews (e.g., thumbnails or coverage maps) of materials available in digital libraries or archives to help reduce the number of queries and accesses to the network (Fig. 13.1 and Section 15.1). For users, the main user experience is the system response tin1e (SRT), also referred to simply as "response time."

Human psycl1ophysics provides context for the human factors related to time delays that lead to the timely user experience. People cannot perceive any difference in event times less than 25 milliseconds and have trouble perceiving them until those times approach 100 milliseconds. Humai1 reaction time is another factor. Reaction time varies for each user (e.g., age difference, situation, operating an application in a stressed or life-critical environment versus a more

FIGURE 13.1 The Earthdata Search (http://search .earthdata.nasa.gov) indicates the geographic and tempora l coverage of datasets before the data are down loaded. Here the user has selected two datasets. The MODIS dataset is tagged with the color blue, and the A IRS dataset is tagged with orange . Those colors are used on the timelines and on t he map revealing where and when the two datasets overlap. Providing previews of data availabi lity helps users find what they need with fewer queries and network accesses.

468 Chapter 13 The Timely User Experience

See also :

Chapter 4, Design

Chapter 12, Advancing the User Experience

casual one). In practice, users do not seem to be bothered much by 1-second delays in changing screens for PC applications and appear to tolerate somewhat longer times for websites to fully load.

Section 13.2 begins by discussing a model of SRT impacts, looks at SRT issues, reviews short-term human memory, and identifies the sources of human error. Section 13.3 focuses on the role of users' expectations and attitudes in shaping their subjective reactions to the timely user experience. Section 13.4 deals with user productivity and variability with respect to SRTs. Section 13.5 examines the severity of frustrating experiences, including spam and viruses.

13.2 Models of System Response Time (SRT) Impacts

SRT is defined as the number of seconds it takes from the moment a user initiates an action-usually by touching an icon, pressing the Enter key, or clicking a mouse – until the computer begiI1s to present feedback. See Fig. 13.2 for the stages of this mode l.

When the response is completed, the user begins formulating the next action. The user think tinie is the number of seconds that elapse between the computer's response and the user's initiation of the next action. In this simple stages-of­ action model, users (1) initiate, (2) wait for the computer to respond, (3) watcl1 while the results appear, (4) scroll through results, (5) think for a while, and then initiate again.

FIGURE 13.?.

User initiates activ ity

Computer responds

… 1 •1- — SRT — …. 11~ – – user think t ime – –

Simple stages of action mode l of SRT and user thin k time.

User starts typing

User initiates activity

13.2 Models of System Response Time (SRT) Impacts 469

SRT

Computer begins

response

Computer completes response

User planning time • User think time►

FIGURE 13.3 Model of SRT, use r planning time, and user think time. This mode l is more realis t ic t han t he one in Fig. 13.2.

In a more realistic model (Fig. 13.3), users plan while interpreting results, while typing/ clicking or touching an icon, and while the computer is generating results or retrieving information across the network. Most people will use what­ ever time they have to plan ahead; thus, precise measurements of user think time are difficult to obtain. The computer's response is usually more precisely defined and measurable, bu t there are problems here as well. Some in terfaces respond with dis trac ting messages, informative feedback, or a simple prompt immediate ly after an action is initiated, but actual resu lts may not appear for a few seconds. Users prefer to have minimal, if any, delays for responses from networked devices (e.g., print status).

Designers who specify response times and ne twork managers who seek to provide high system performance have to consider the complex interaction of technical feasibility, costs, task complexity, user expectations, speed of task performance, error rates, and error-handling procedures.

Although some people accep t slower responses (latency) for some tasks (e.g., calculations), users prefer rapid interactions. Overall productivi ty depends not on ly on the speed of the interface but also on the rate of human error and the ease of recovery from those errors. Lengthy (longer than 5 seconds) response times are generally detrimental to productivity, increasing error rates and decreasing satisfaction . More rapid (less than 1 second) inte ractions are generally preferred and can increase productivity, but they may also increase erro r rates for complex tasks. The high cost of providing rapid response times and the loss from increased errors must be evaluated in the choice of an optimum pace.

13.2. 1 Website SRT Website display performance was studied by evaluating de lay plus two website design var iables (site breadth and content familiar ity) to examine interaction effects on user performance, attitudes, stress, and behavioral in tentions. The three experimental factors (delay, familiar ity, and breadth) were demonstrated to collective ly affect the cognitive costs and penalties that users incur when

470 Chapter 13 The Timely User Experience

making choices in their search for target information (Galletta, 2006; Galletta et al., 2006). Interactive latency is explored by experiments in user behavior and knowledge discovery by Liu and Heer (2014). They found that interactive v isualization s sho uld provide improved SRTs to support effective exploration ­ that increased delays caused users to shift exploration strategy.

One study looks at measuring website performance after conducting thousands of experiments witl1 users (Kohavi et al., 2014). Example rules of thumb s from the Kohavi et al. (2014) study include "Speed Matters A LOT" and "Small Changes Can Have a Big Impact to Key Metrics." These rules, based on thousands of controlled experiments with large, popular websites, guide designers in improving and organizing their sites so as to improve user satisfaction and performance.

Co11sumer demand is a key factor in promoting rapid performance. Websites often distinguish themselves with rapid performance – an attribute that surfers expect from Google or Yahoo! and buyers demand at Amazon.com or eBay (King, 2008).

Shortcuts to pre-stored consum er account information (e.g., shipping address) can improve the user experience for the online shopper. Another example is when an online shopper is prompted to enter the postal (zip in the Uni ted States) code first and then the city and state are automatically popuJated from a directory. That is a bit of order shift in en tering address data, but the frequent shopper appreciates the keystroke savings. In addition, this promotes better accuracy and consistency in the address database.

13.2.2 Network impacts to SRT Broadband service providers typical ly do not offer the same upload and download speeds. Those who require faster upload times-for example, webmasters, software developers working on collaborative projects, those uploading large conte11t (e.g., video) to social media sites, or users who regularly tran sfer large files- might find that their broadband service providers l1ave left much to be desired in terms of upload times. In an era of user-generated content, for an it1creasing number of users, it is important for upload speeds to keep pace with download capability.

Broadband service capability varies by country. According to a rece11t report (Akamai, 2015), South Korea leads the world with average internet connection speeds of 23.1 Mbps. Hon g Kong is second with Japan third. The U.S. is 20th.

There are web tools that can permit comput er users to assess their download and upl oad speeds (to find them, run a search for "download upload speed test"). Running this test gives users a better idea of the timely user experience and provides them with useful information to present to their broadband service providers when asking for better service or an upgrade to meet their network response- time needs.

13.2 Models of System Response Time (SRT) Impacts 471

Wired versus wireless networking (or both) is sti ll a decision made by organizations and individuals, but with the vast improvement in wireless capability, the performance differences for many users have become unnoticeable. Entire communities embracing wireless networking aid in universal usability.

Some tasks (for example, videoconferencing, voice over IP telephony, and streaming multimedia) require rapid performance because intermittent delays cause jumpy images and broken sound pat terns tha t seriously disrupt users . Promoters of these services see the need for ever-faster and higher-capacity networks.

While improvements are being made in the technology of computer-to­ compu ter communica tion, user task performance times will not automatically improve at the same rate. Improved throughput does not necessarily imply improved productivity.

13.2.3 Factors for SRT modeling A comp lete predictive mode l tha t accounts for SRT, designing inter faces, and formulating management policies may neve r be real ized, but even fragments of such a model are useful to designers. Cognitive shifts (e.g., switching from scan­ ning a news story to watching a video of the same news story) also can be diffi­ cul t to measure in terms of produc tivity.

Alhen using an interactive device, users may formu late plans and then have to wait while they execute each step in the plan. If a step produces an unex­ pected result or if the delays are long, the users may forget part of the plan or be forced to review the p la11 co11tinually. This model leads to tl1e conjecture that, for a given user and task, there is a preferred response time. Long response times lead to wasted effort and more errors because the solution plan must be reviewed repeatedly. On the other hand, short SRTs may generate a faster pace in which solution plans are prepared has tily and incomple tely. More data from a variety of situa tions and users wou ld clarify these conjec tures.

The speed/ accuracy tradeoff that is a harsh reality in so many domains is also apparent in interface usage. A related factor is performance in paced ver­ sus unpaced tasks. In paced tasks, ilie comp ut er forces decisions wi thin a fixed time period, thereby adding pressure . Such lugh-stress in terfaces may be appropriate with trained users in life -critical situations or in manufacturing, where high productivity is a requirement. However, errors, poor -quality work, and opera tor bt1rnout are ser ious concerns. In unpaced tasks, users decide when to respond and can work at a more relaxed pace, taking their time to make decisions.

Life-critical systems (e.g., avionics) provide an environment where a timely user experience can prevent catastrop he. One study looked at mixed cri tica(jty sys tems, where some features are safe ty-critical and some are not safe ty-critical.

472 Chapter 13 The Timely User Experience

This study looked at scheduling and execution times resulting in an optimal priority assignment approach to yield sufficient SRTs. (Baruah et al., 2011). Another study found that a reduction of variability in response times led to improved user performance (Weber et al., 2013).

SRT has been investigated and analyzed for years. Many factors have been measured with the results sometimes debated (Dabrowski and Munson, 2011):

• Users' accuracy and error rates with different levels of SRT

• User performance speed and the efficiency of the commands used

• How user interactions with the computer changed as a result of changes inSRT

• How their bodies reacted physiologically to changes

• How happy, satisfied, anxious, or annoyed users were as SRTs changed

This paper does a nice job of addressing the contrast between "control" and "conversation" tasks, where control tasks alv.rays want delay minimized but conversation tasks can tolerate modest delays without bothering users.

Accepted wisdom in the field is that car driving offers a useful analogy. Although higher speed limits are attractive to many drivers because they lead to faster completion of trips, they also lead to higher accident rates. Since automo ­ bile accidents can have dreadful consequences, drivers accept speed limits. When incorrect use of computer systems can lead to damage to Life, property, or data, should speed limits be provided?

13.3 Expectations and Attitudes

How long will users wait for the computer to respond before they become annoyed? This simple question has provoked much discussion and many experiments. There is no simple answer, though, and more importantly, it may be the wrong question to ask. More refined questions focus on users' needs: Will users more happily wait for a valued document than an undesired advertisement?

The first factor influencing acceptable SRT is that people have established expectations based on their past experiences of the time required to complete a given task. If a task is completed more quickly than expected, people will be pleased, but if the task is completed much more quickly than expected, they may become concerned that something is wrong . Similarly, if a task is com­ pleted mucl1 more slowly than expected, users are likely to become concerned or frustrated.

13.3 Expectations and Attitudes 473

An important design issue is that of rapid start-up. Users are annoyed if they have to wait for a device to be ready for usage or have to follow a complex set of "Getting Started" steps to get their device operational. Fast starts are a strong distinguishing feature in consumer electronics.

A second factor influencing SRT expectations is the individual's tolerance for delays. There are large variations in what individuals consider acceptable waiting time. These variations are influenced by many factors, such as personality, cost, age, mood, cultural context, time of day, noise, and perceived pressure to complete work. The laid-back web surfer may enjoy chatting with friends while pages load, but the anxious deadline-fighting journalist may start banging on his or her desk, device, or keyboard in a vain attempt to push the computer along.

Other factors influencing SRT expectations are the task complexity and the users' familiarity with the task. For simple, repetitive tasks that require little problem solving, users want to perform rapidly and are annoyed by delays. For complex problems, users will typically perform well even as SRT grows, as they can use the delays to plan ahead. Users are highly adaptive and can change their working styles to accommodate different response times.

Users may achieve rapid task performance, low error rates, and high satisfaction if the following criteria are met:

• Users have adequate knowledge of the objects and actions necessary for the problem-solving task.

• The solution plan can be carried out without delays.

• Distractions are eliminated .

• User anxiety is low.

• There is accurate feedback about progress toward the solution.

• Errors can be avoided or, if they occur, can be handled easily.

These conditions for optimum problem solving, ,vith acceptable cost and technical feasibility, are the basic constraints on design. However, other conjectures may play a role in choosing the optimum interaction speed:

• Novices may exhibit better performance with somewhat slower response times.

• Novices prefer to work at speeds slower than those chosen by knowledge ­ able, frequent t1sers.

• When there is little penalty for an error, users prefer to work more quickly.

• When the task is familiar and easily comprehended, users prefer more rapid action.

• If users have experienced rapid performance previously, they will expect and demand it in future situations.

474 Chapter 13 The Timely User Experience

BOX 13.1 Primary factors.

1. Previous experiences

2. Individua l personality differences

3. Task differences

An increasing number of tasks place high demands on rapid system performance; examples are user-controlled 3-0 animations, flight simuJations, graphic design, and dynamic queries for data visualization. In these applica­ tions , users are continuously adjLtsting the input controls, and they expect changes to appear with no perceived delay.

Three primary factors that influence user expectations and attitudes regarding SRT appear in Box 13.1.

Three conjectures emerge:

1. Individual differences are large, and users are adap tive. They will work faster as they gain experience and will change their working strategie s as SRTs change. It may be useful to allow people to set their own pace of interaction.

2. For repetitive tasks, users prefer and will work more rapidly with short response times.

3. For comp lex tasks, users can adapt to working with slow SRTs with no loss of productivity, but their dissatisfaction increases as response times lengthen.

13.4 User Productivity and Variability in SRT

Shorter SRTs usually lead to higher productivity, but in some situations, users who encounter long SRTs can find clever shortcuts or ways to do concurrent processing to reduce the effort and time required to accomplish a task. Working too quickly, though, may lead to errors that reduce productivity.

In computing, just as in driving, there is no general ruJe about whether the high-speed highway or the slower, clever shortcut is better. The designer must

13.4 User Productivity and Variabi lity in SRT 475

survey each situation carefully to make the optima l choice. The choice is not critical for occasional usage, but it becomes worthy of investigation when the frequency is great. When computers are used in high-volume situations, more effort can be expended in discovering the proper response time for a given task and set of users. It should not be surprising that a new study must be conducted when the tasks and users change, just as a new route evaluation must be done for each trip.

An alternative solution is masking delay by displaying important, crucial information first while the background is filling in. Well-designed websites often download critical information first; likewise, web designers may choose to download the intriguing information first so the user is motivated and encouraged to wait during any download delay to see the end result. Some news websites download the textual headlines first to motivate the news reader to remain patient while the remainder of the article is downloaded. The user can tllen start reading an article while additional animatio11s, advertisements, and so on, download, until eventually the screen is fully painted with its intended information .

The nature of the task has a strong influence on whether changes in SRT alter user productivity. A repetitive control task involves monitoring a dis­ play and issuing act ions in response to changes in the display. With shorter SRTs, the operator picks up the pace of the system and works more quickly, but decisions on actions may be less than optima l. On the other hand, with short SRTs, the pena lty for a poor choice may be small because it may be easy to try another action. In fact, operators may learn to use the interface more quickly with short SRTs because they can explore alternatives more easi ly.

vlben using computers, users cannot see into the machines to gain reassur ­ ance that their actions are being executed properly, but the SRT can provide a clue. If users come to expect a response time of 3 seconds for a common action, they may become apprehensive if this action takes 0.5 or 15 seconds. Such extreme variation is unsettling and should be prevented or acknowledged by the interface, with some indicator for an unusually fast response or a progress indicator for an unusua lly slow response. Progress indicators need to be truthful representations of the state of affairs (Fig. 13.4). Providing time estimates is best, but when that information is difficult to calculate, other progress indicators-such as the name of the file being processed or percent complete-can be updated at regular intervals. How often have computer users been lulled into an increasingly frustra ting state of anticipation, for examp le, watching a webpage download-indicator status bar show that the page is loading, only to find that the internet connection has been lost or the server is down? A survey of progress indicators with guidance for timing was performed by Sherwin (2014).

476 Chapt er 13 The Timely User Experience

0 0 0 58% – Upload Manager

Forest preserve View Online I Finished: 26 items uploaded (message sent) l Clear l Pumpki ns [ cancel J Uploading – 12 of 16 (1% comp lete)

Quito-Minda [ cancel ] 21 items queued

f ✓ j Conserve bandwidth

l Pause [ dear oimpleted J [ Hide ] FIGURE 13.4 Progress indicators reassure users that the process of up loading photos from Picasa to the web is under way and how far it has gone already. They also allow users to see the resu lts or to cancel up loads.

13.5 Frustrating Experiences

Many teclmology promoters argue that the quality of user experiences witl1 computers has been improving, pointing to steadily increasing memory, storage, and network capacities. However, critics believe frustration from interface and technology complexity, network disruptions, and malicious interference has grown. Recent research has begun to document and help explain the sources of user frustration with contemporary user interfaces.

Interruptions appear to be troubling to users regardless of whether they originate from the current task or an unrelated task, but surprisingly, people have been shown to complete interrupted tasks in less time than uninterrupted tasks and with no difference in qua lity (Mark et al., 2008). The authors of this study conjectured that people compensate for interruptions by working faster; however, this comes at the price of more stre ss and higher frustration, time pressure, and effort. An appropriate interface design change would aJlo,.v users

13.5 Frustrating Experiences 477

to limit interruptions, reducing their negative effects and thus reducing the time it takes to solve problems.

There are numerous reports and trade journal articles about time wasted at work due to distractions, technology, and office layout or people issues. There are differences in the office versus student work environment and how those contribute to user frustration. One study of 107 student computer users and 50 workplace computer users shows high levels of frustration and loss of 1/3 to 1/2 of time spent (Lazar et al., 2006).

Focusing on technological (not people) reasons for poor productivity, frequent complaints include network performance during peak periods, application crashes, long SRTs, and confusing error handling. The major sources of problems were the popular applications for web browsing, e-mail, social media, and word processing. Recommendations for reducing frustration i11clude interface redesign, software quality improvement, and network reliability increases. Other recommendations focus on what users can do through increased learning, carefu l use of services, and self-con trol of their attitud es.

Infra structure improvements to server capac ity and network speed and reliability will improve user experiences. Impro ved network performance and reliability promote trust in users, easing their concerns and ultimately improving work performance and outpu t. Consequently, untimely user exper ience is a still greater difficulty in emergmg markets and developing nations, where infrastructure reliability remains a problem.

Since user traming can have a profound influence on reducing frustrating experiences, efforts to improve education through schools and workplaces cou ld improve user experiences. Improved ed ucationa l programs and refined user interfaces are likely to have the largest effect on poorly educated ttsers, whose difficulties in using internet services undermine efforts to provide e-learnmg, e-commerce, and e-government services.

Networked serv ices, especially e-mai l, are among the most valued benefits of information and communications techno logies. There are numerous sources of information on netiquette, proper usage, and productivity to guide users in the proper use of e-ma il. Many corporations publish e-mail guidelines not only to coach their emp loyees on the proper use of e-mail in the workplace but also to address bes t practices for reducing e-mail irtformation overload, thus enhancing workp lace productivity.

E-mail has become the source of frustrating span1 (tl1e pejorative term given to unwanted, unsolicited e-mail, including advertisements, personal solicitations, and pornographic invitations). Much spam comes from small companies and individuals who take advan tage of the low cost of e-mail to send blanket notices to huge lists of unfiltered e-mail addresses. Anti-spam legislation has passed in many nations, but the internet's international reach and open policies limit the success of legal controls. Much of tl1e spam is intercepted or filtered (by system or user tools), but users still complain of too much spam .

478 Chapter 13 The Timely User Experience

Another frustrating problem for users is the prevalence of malicious viruses that, once installed on a machine, can destroy data, disrupt usage, or produce a cancerous spread of the virus to everyone on the user's e-mail contact list. Viruses are created by malevolent programmers who want to spread havoc, usually via e-mail attachments. Unsuspecting recipients may get an infected e-mail from a known correspondent, but the absence of a meaningful subject line or message is often a clue that the e-mail contains a virus. Deceptive mes­ sages tl,at mention previous e-mails or make appealing invitations complicate user decisions, but safety-conscious users will not open attachments from unknown or deceptive senders.

Universal usability presents its own set of challenges in terms of user frustra­ tion. In one research project, 100 blind users, using time diaries, recorded their frustrations using ilie web (Lazar et al., 2007). Tl,e top causes of frustratio11 reported were (1) page layout causing confusing screen -reader feedback; (2) conflict between the screen reader and the application; (3) poorly designed, unlabeled forms; (4) no alternative text for pictures; and (5) a three-way tie between misleading links, inaccessible PDFs, and screen-reader crashes. In this study, the blind users reported losing, on average, 30.4% of their time due to these frustrating situations. Web designers concerned with universal usability can improve matters by using more appropriate form and graphic labels and avoiding confusing page layouts.

Since frustration, distractions, and interruptions can impede smooth prog ­ ress, design strategies should enable users to maintain concentration. Three initial strategies can reduce user frustration: reduce short-term and working memory load, provide information-abundant interfaces, and increase automa­ ticity (Shneiderman and Bederson, 2005). Automatic ity in this context is the pro ­ cessing of information (in response to stimuli) in a way that is automatic and involuntary, occurring without conscious control. An example is when a user performs a complex sequence of actions with only a light cogni tive load, like a driver following a familiar route to work wi th little apparent effort.

Practitioner's Summary

The timely user experience is a constant concern for users and providers on net­ works, computers, and mobile devices. Rapid SRTs with fast screen refresl,es are necessary because these factors are determinants of user productivity, error rates, working style, and satisfaction (Box 13.2). In most situations, shorter response times (less than 1 second) lead to higher productivity. For mouse actions, multimedia performances, and interactive animations, even faster per­ formance is necessary (less than 0.1 second). Satisfaction generally increases as the response time decreases, but there may be a danger from stress induced by

Practitioner's Summary 479

a rapid pace. As users pick up the pace of the system, they may make more errors. If these errors are detected and corrected easily, productivity will gener­ ally increase. However, if errors are hard to detect or are excessively costly, a moderate pace may be most beneficial.

Designers can determine the optimal SRT for a specific application and user community by measuring productivity, errors, and the cost of providing short response times. Managers must be alert to changes in work style as the pace quickeI1s; productivity is measured by correctly completed tasks rather than by interactions per hour. Novices may prefer a slower pace of interaction. Methods for helping the successful user transition from novice to expert are described in one study where the state of the art of user interfaces that promotes exper­ tise development is examined, based on the human factors of learning and skill developmeI1t (Cockburn et al., 2014).

Modest variations around the mean SRT are acceptable, but large variations (less than one-quarter of the mean or more than twice the mean) should be accompa­ nied by informative messages. An alternative approach for overly rapid responses is to slow them down and thus to avoid the need for explanatory messages .

BOX 13.2 SRT guidelines .

• Users prefer shorter response times.

• Longer response times (> 15 seconds) are disruptive .

• Users' usage profiles change as a function of response time.

• Shorter response time leads to shorter user think time.

• A faster pace may increase productivity, but it may also increase error rates.

• Error-recovery ease and time influence optimal response time.

• Response time should be appropriate to the task:

– Typing, cursor motion, mouse selection: 50-150 mi lliseconds

– Simple, frequent tasks: 1 second

– Common tasks: 2-4 seconds

– Complex tasks: 8-12 seconds

• Users should be advised of long delays.

• Strive to have rapid start-ups.

• Modest variability in response time is acceptable.

• Unexpected de lays may be disruptive.

• Offer users a choice in the pace of interaction .

• Empirical tests can help to set suitable response times.

480 Chapter 13 The Timely User Experience

BOX 13.3 Reducing user frustration.

• Increase server capacity, network speed, and network reliability.

• Improve user training, on line help, and on line documentation including tutorials.

• Redesign instructions and error messages.

• Continue the battle to stay ahead of the technology to protect users against spam, viruses, and pop-up advertisements.

• Organize consumer-protection groups.

• Increase research on user frustration.

• Catalyze public discussion to raise awareness.

A continuing concern is the fru stra tion level of the increas ingly diverse set of comput er users (Box 13.3). In an era of user-generat ed content and pervas ive social media involvement, a satisfying user experience is determined by a pre ­ ferred or, at least , an acceptab le level of system timeline ss. Malicious spreader s of spam and viru ses are a serious threa t to the expand ing community of inter­ net users . Appli cation crashes, confu sing er ror messages, and network disrup ­ tions are problems that could be addressed by improved interface and software design.

Practit ioners could look at othe r ways of helpin g users to become experts (e.g ., how to pro vid e shortcut s). Remind er regardin g univ ers al usability: Aiding new users to learn gesture s for new touchscreen or wearable devices should be easier.

Researcher's Agenda

The increa sed understandin g of the timel y user experience issues toda y is balanced by the richness of new technolo gies and applic ations. The taxonom y of issues pr ovides a framework for research, but a finer taxonom y of tasks, of relevant cogniti ve-s ty le differences, and of appli cations is needed. Next, a refined theory of problem solving and consumer beha vior is necessary to gener ate useful de sign hypothe ses.

Researcher's Agenda 481

It would be productive to study error rates as a function of SRT for a range of tasks and users. Another goal is to accommodate the real-world inter­ ruptions that disrupt planning, interfere with decision making, and reduce productivity.

It is understandable that error rates vary with SRT, but how else are users' work styles or consumers' expectations affected? Is employee multitasking coupled with routine office distractions adding stress and drastically reduc­ ing productivity, ultimately affecting corpora te profits? Can modern t1sers be trained to better manage their time among diverse applications and tasks? Can users be encouraged to be more careful in their decisions by merely lengthening response times and degrading the timely user experience? Does th e profile of actions shift to a smaller se t of more familiar actions as the SRT shor ten s?

Many other questions are also worthy of investigation. When technical fea­ sibility prevents short responses, can users be satisfied by diversionary tasks, or are progress reports sufficient? Do warnings of long responses or apologies relieve anxiety or simply further frustrate users?

Future SRT research is needed to analyze the impact of delays (both human and system-caused), cognitive load, and variabi lity to optimize user performance. M.ethods for assess ing user frustration levels are con troversial. Time diaries may be more reliable than retrospective surveys, but how could automated logging and observational techniques be made more effective? How can designers more effectively use big data and web analytics and reporting (e.g., Google Analytics) to better manage organizations? How cou ld software developers and network providers construct reliable reports to gauge improvements in the timel y user experience and reductions in user frustration?

WORLD WIDE WEB RESOURCES

www. pearsonglobaleditions.com / shneiderman

SRT (System Response Time) issues have an increasing presence on the internet, although the issue of long network delays gets discussed frequently. User frustration is a lively topic, and many websites point out flawed inter­

faces and related frustrating experiences. The New Computing movement's website suggests ways to help bring about change:

• New Comput ing: http:/ /www.cs.umd.edu/hcil/newcomputing

482 Chapter 13 The Timely User Experience

Discussion Questions

For questions 1-4 , refer to the followin g scenario: A group decision system is being built over a ne twork, which has inherent delays due to network lag. Suggest the longest acceptable amount of time the delay could last without affecting the user negatively. Provide an argument for the time you selected.

1. System confirming the user's password when logging on.

2. Synchronous group editing of a document.

3. Asynchronous critiquing of other participants' work.

4. Voting on serious issues.

5. Discuss three human values that are necessary to be understood by interface designers in order to ensure a timely user experience.

6. How are download de lays masked by we ll-des igned websites?

7. State a few system response time (SRT) guidelines.

References

Akamai, State of the Internet: Q3 2015 Report (2015), 14-23. Availab le at https:/ /www .sta teoftheinternet.com /resources-report-state-of-the-interne t.html.

Baruah, S., Bums, A., and Davis, R., Response time analysis for mixed criticality systems, 2011 IEEE 32nd Real-Tirne Syste,ns Sy,nposhan (RTSS) (and IEEE Explore Digital Library), (November 2011), 34-43.

Cockburn, A., Gu twin, C., Scarr, J ., and Malacria, S., Supporting novice to expert transi ­ tions in user interfaces, ACM Computing Surveys 47, 2 (November 2014), Artic le 31.

Dabrowski, J., and Munson, E., 40 years of searching for the best computer system response time, Interacting with Cornputers 23, 5 (2011), 555- 564.

Galletta, Dennis F., Understanding the direct and interaction effects of web de lay and related factors, in Galletta, Dennis F., and Zhang, Ping (Editors), Hun1an-Co1nputer Interaction and Manage,nent Information Systems: Applications (Advances in Management Inforrnation Systen-zs), M. E. Sharpe, Armonk, New York (2006), 29-69.

Galletta, Dennis F., Henry, Raymond, McCoy, Scott, and Polak, Peter, When the wait isn't so bad, lnforrnation Systen1s Research 17, l (March 2006), 20-37.

King, Andrew B., Website Opti,nization: Speed, Search Engine & Conversion Rate Secrets, O'Reilly Media, Sebastopol, CA (2008).

Kohavi, R., Deng, A., Longbotham, R., and Ya Xu, Y., Seven rules of thumb for ,-veb site experimenters, Proceedings of the 20th ACM SIGKDD international Conference on Knowledge Discovery and Data Mining (KOO '14) (2014), 1857- 1866.

References 483

Lazar, J., Allen, A., Kleinman, J., and Malarkey, C., What frustrates screen reader users on the Web: A study of 100 blind users, International Journal of Hun1an-Con1puter Interaction 22, 3 (May 2007), 247- 269.

Lazar, J., Jone s, A., Hackley, M., and Shne ide rman, B., Sever ity and impa ct of computer user frustr ation: A comparison of student and ,vorkplace users, Interacting with Computers 18, 2 (March 2006), 187-207.

Liu, Zhicheng, and Hee r, Jeffrey, The effects of interactive latency on exploratory visual analysis, IEEE Transactions Visualization & Con1puter Graphics (Proc. Info Vis) (2014).

Mark, Glor ia, Gudi th, Danjela, and Klocke, Ulrich, The cost o f interrupted work: Mor e spe ed and stress-Don't int errupt me, Proceedings of the Conference on Hun1an Factors in Cornputing Systerns, ACM Press, New York (2008), 107- 110.

Sherwin, Katie, Progress indi cators make a slow system less insufferable (2014). Available at http://www.nngroup .com/ artic les/ progress -indicators/.

Shneider1nan, Ben, and Bederson, Ben, Maintaining concentration to achieve task completion, Proceedings of the Conference on Designing for User Experiences 135, ACM Press, Ne,,v York (November 2005), 2- 7.

Weber, F., Haering, C., and Thoma schke, R., Impro ving the human-computer dia logue w ith increase d temporal predictab ility, Hurnan Factors: The Journal of the Human Factors and Ergonornics Society 55 (October 2013), 881-892.