Effective display designs must provide all the necessary data in the proper sequence to carry out the task. Identify a recent personal user experience where

••

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 c

Collepals.com Plagiarism Free Papers

Are you looking for custom essay writing service or even dissertation writing services? Just request for our write my paper service, and we'll match you with the best essay writer in your subject! With an exceptional team of professional academic experts in a wide range of subjects, we can guarantee you an unrivaled quality of custom-written papers.

Get ZERO PLAGIARISM, HUMAN WRITTEN ESSAYS

Why Hire Collepals.com writers to do your paper?

Quality- We are experienced and have access to ample research materials.

We write plagiarism Free Content

Confidential- We never share or sell your personal information to third parties.

Support-Chat with us today! We are always waiting to answer all your questions.