itijij IijIIi ii.

i
3 1155 06067687 6

SHNEIDERMAN • PLAISANT • COHEN • JACOBS • ELMQVIST

SIXTH EDITION

DESIGNING THE USER INTERFACE

STRATEGIES FOR EFFECTIVE
inift/iAM rnr/iDHTCD INTERACTION
 • COHEN • JACOBS • ELMQVIST

SIXTH EDITION
CCD
I INTERFACE
( trl-tl TIVF
INTERACTION

NOTE: This material may be protected by copyright law (Title 17 U.S. code\
This copy is being furnished for private research use only.

PEARSON
Boston Columbus Indianapolis New York San Francisco Hoboken
Amsterdam Cape Town Dubai London Madrid Milan Munich Paris Montreal Toronto
Delhi Mexico City Sao Paulo Sydney Hong Kong Seoul Singapore Taipei Tokyo
 CHAPTER

Wl
Design Case Studies

Prototyping helps you get ideas out of your head and into
something more tangible —something you can feel, experience,
work through, play with and test . . . you can't afford not to
prototype on your next project. 99
Todd ZakiWarfel

66 Prototyping: A Practitioners Guide, 2009

a thousand meetings.99
A prototype is worth
Mike Davidson
Vice President of Design for Twitter*

CHAPTER OUTLINE
6.1 Introduction

6.2 Cose Study 1: Iterative Design Evaluation of Automated Teller

Machines (ATMs)

6.3 Case Study 2: Design Consistency at Apple Computer

6.4 Case Study 3: Data-Driven Design at Volvo

6.5 General Observations and Summary

•[Link]
181

9
182 Chapter 6 Design Case Studies

6.1 Introduction

This chapter's case studies present design contexts and applications to let readers
see how tradeoffs and choices are made. Readers may find the case studies valu­
able for encapsulating design learning and showing the challenges of a design
context so that they can be shared within teams or across an organization.
The three case studies were chosen to cover this book's design methods. One
example of the design methods is whiteboard or digital sketching (Buxton, 2007;
Greenberg et al., 2011), where prototype screen designs are presented for dis­
cussion and collaboration using whiteboard drawing. A number of tools and
apps exist to support this technique.
User-interface designs are often proposed on a napkin at a favorite coffee
shop. Wireframes ([Link], 2015) and supporting wireframing tools are
popular to define an interface design. Other design methods include sticky
notes placed strategically on a whiteboard sketch or computer-based mockup of
a screen. Higher-fidelity screen prototypes can be generated to illustrate the
state of the design by adding navigation options, icons, and animation for clari­
fication of design decisions.
Case Study 1 is titled "Iterative Design Evaluation of Automated Teller
Machines (ATMs)," a study in the user-interface process of developing ATMs
with details on how to perform usability testing of ATMs. This case study is a
good example of how an iterative HCI process could be performed, exposing
potential roadblocks while illustrating in a specific example the processes described
in previous chapters regarding user-interface design and development: observe,
refine, design, implement, evaluate, iterate.
Case Study 2 is titled "Design Consistency at Apple Computer" (Apple,
2015a). This case study is part of the Apple Human Interfaces Guidelines (Apple,
2015b) that results in a perspective and suggested approach for practitioners.
Many product manufacturers besides Apple have developed style guidelines to
ensure a consistent user interface across multiple products. For example, a com­
pany developing multiple technology products would prefer that its user inter­
face be consistent across the product lines, follow a corporate style that reflects
branding, and ensure that it is easy for a new user to master a new product from
the same manufacturer. Although arguably Apple may be one of the best at this,
other industries, such as automobile manufacturers and medical equipment
companies, work hard to pursue this goal.
Case Study 3: "Data-Driven Design at Volvo" (Wozniak et al., 2015) shows
successful collaboration methods in action to solve a diverse, distributed corpo­
rate data-analysis problem. By using user-interface development process meth­
ods, data are retrieved and presented in a tailorable format that empowers the
users to achieve their business and organization goals.
6.2 Case Study 1: Iterative Design Evaluation of AutomatedTeller Machines (ATMs) 183

See also:
° Chapter 4, Design
• Chapter 5, Evaluation and the User Experience
* Chapter 12, Advancing the User Experience

rhe chapter concludes with general observations and a summary that com­
pares and contrasts all three case studies and their importance. There are many
design process models and user experience evaluation approaches. While read­
ing about the case studies in this chapter, reflect on the process steps required
for a successful outcome.

6.2 Case Study 1: Iterative Design Evaluation of

Automated Teller Machines (ATMs)

Most of us have become familiar with ATMs of varying styles and sizes. Drive-
thru, stand-up, kiosk-style, standalone ATM structure, part of a bank wall or
lobby—these machines are everywhere. One can go to another bank and pay a
fee if he or she needs cash right away. An individual can travel the world and
get cash in the local currency just by inserting his or her ATM/debit card, enter­
ing the PIN, and making a few choices, hopefully in a language that the user
understands. Many ATMs have multi-lingual options now. Many banking
mobile apps allow for many of the same transactions that an ATM provides
except getting cash. So, let's limit this case study to just physical ATMs, an
example of which appears as Fig. 6.1.
As for any device, the user interface for ATMs has evolved, from a more prim­
itive electronic keypad to a magnificent, immersive experience of touchscreen
displays with animated advertisements, tones signaling completion of task steps
or key presses, color and font choices to improve the appearance while remain­
ing consistent with the bank brand, and the latest security features such as small
mirrors to see behind the customer, security cameras recording the customer's
presence for safety, copious lighting at night, and card entry points that hinder
"skimming" or copying of ATM cards by thieves and fraudsters.
When learning about usability of the user interface for an ATM, after reviewing
Chapters 1-5 of this text, go visit the nearest ATM. (Disclaimer: The authors cer­
tainly understand it takes more than a few minutes to understand usability meth­
ods and techniques, but please read on regarding this usability "experiment.")
 184 Chapter6 Design Case Studies

I
I

FIGURE 6.1
Sample ATM.

Designers could run a stopwatch as the user withdraws a specified amount at

multiple ATMs, record their movements, watch them move from keypad for
PIN entry to touchscreen for the withdrawal step(s) with prompting for receipt—
the experienced user is like a one-person band playing multiple instruments—to
get that end result (cash in hand, with or without receipt, ATM card returned,
account updated, quickly and safely). Visualize the statistical data that can be
captured from this usability "experiment":
• Time to complete all tasks over a statistically significant set of ATMs
• Time expended for these ATM steps or "subtasks":
1. Entrance into ATM (approach ATM, read instructions to get started, insert
card, enter PIN, continue following prompted instructions)
2. Enter commands to make withdrawal
3. Receive cash, optional receipt, and card returned (with the preferred goal
of leaving a positive balance in the account)
• Objective and subjective user feedback and contextual observation regarding
user performance of the above ATM steps
To complicate things, let's add an eye-tracker, key-logging tool to record key­
board and/or touchscreen data entries, record any errors, document navigation
steps taken, and have the user enunciate steps taken with commentary in a
think-aloud protocol—for example, "I am now going to insert my ATM card
6.2 Case Study 1: Iterative Design Evaluation of AutomatedTeller Machines (ATMs) 185

into the machine." Consider having a team record this event in a video to
analyze later as is done in user experience labs. An excellent set of guiding
principles for user experience appears in Hartson and Pyla (2012).
The amount of data to analyze is growing! The previous chapter (Chapter 5)
discusses how to structure this usability evaluation to make this process practi­
cal and finite.
Designers who study neighborhood ATMs and review current literature
from ATM developers or other vendors can develop a useful competitive fea­
ture analysis. One intriguing design for an ATM kiosk in developing countries
is discussed in Birnie (2011). Numerous ATM screenshot examples and ATM
designs can be found by a quick web search, illustrating style alternatives world­
wide of current ATM machine design.
Look al the ATM design for accessibility, i.e., universal usability (see Chapter 2).
Consider some of the guidelines, principles, and theories that drive the design
(Chapter 3), often resulting in a style guide that merges these concepts with
product branding to ensure an end result that fits the business objective for the
ATM. Of course, manage the design process in an organized, well-defined, user­
centered, iterative fashion (Chapter 4).
Once this usability experimentation and literature search is complete, design­
ers could enter the next life-cycle (design) phase. Think of this as an incremental
continuous improvement. The data collected can be analyzed to arrive at con­
crete, data-driven design interventions that may improve the user experience.
These alternative designs can then be sketched and prototyped as discussed in
Buxton (2007) and Greenberg et al. (2011). Make sure to review Chapters 4-5 of
this book for design and evaluation processes.
Designs can then be documented, tradeoffs between alternative designs evalu­
ated, and specifications written for an improved ATM design. Iterative design is the
best approach here, with design prototypes developed, evaluated, and improved.
Again, striving to make this process complete yet finite is the challenge. Typically, a
delivery deadline will drive the depth and fidelity of any prototyping effort—for
example, the next-generation prototype ATM needs to appear and be operational at
a trade show on a specific date and location. Some clients require "capability dem­
onstrations," where the increasing fidelity of the prototype is shown in "proof of
concept" demonstrations following a planned, incremental development strategy.
Sales commitments are made, final implementation continues, ATMs built,
delivered, and fitted into a physical structure and integrated into the banking
network, bank personnel are trained, customers are notified, and so on, to bring
these products online.

Observations
Does the analysis of the usability of the newly installed ATM stop here? Certainly
not. Continue gathering feedback from customers and monitoring implementation
success. Consider rolling out test sites (e.g., beta testing) to first ensure new designs
186 Chapter 6 Design Case Studies

are accepted on a smaller scale. These business decisions are tightly coupled to the
design and usability results discussed here. Ultimately, as in many user-interface
designs, the success of a product is often judged by the user interface.
At this point in the life cycle of the ATM case study, the following possible
scenario could occur: In the ideal situation, everything works perfectly and the
bank clients love the new design. System performance is terrific, cost per trans­
action drops, profits are up, and customers flock to the bank to use the new
ATMs.
Realistically, some changes may need to be made. There could be numerous
unanticipated user transition and acceptance issues. The bank could hire someone
to independently develop an alternative user experience. The bank captures data
from the deployed systems to methodically (like a software upgrade) roll out
improvements to the ATM network. The feedback loop continues.
The remainder of this chapter focuses on two specific design case studies and
how the organizations approached their user-interface challenges.

6.3 Case Study 2: Design Consistency at

Apple Computer

Case Study 2 examines the process and decisions reflected in an Apple document
titled "From Desktop to iOS" (Apple, 2015a, 2015b). In this analysis, Apple examined
products and design decisions made for Keynote' (for presentations), Mail (e-mail
for iPhone), and web content.
The case study reviews style guidelines from the Apple Development Guide­
lines and how these were applied in bringing apps to iOS-enabled devices. For
more information on related issues, see the iOS Human Interface Guidelines in
the iOS Developer Library that Apple provides (Apple, 2015b). Following are a
few samples of the referenced iOS Human Interface Guidelines (explanation,
use, and screenshot illustrations are given for the guidelines):
• Take advantage of the whole screen
• Reconsider visual indicators of physicality and realism
• Let translucent user interface elements hint at the content behind them
• Let color simplify the user interface
• Ensure legibility by using the system fonts
• Use depth to communicate
There are guidelines for icons and image design, iOS technologies, user inter­
face elements, and more.
Keynote has presentation development tools, graphics and toolbars for rapid
generation of presentations. An example screenshot appears as Fig. 6.2.
 6.3 Case Study 2: Design Consistency at Apple Computer 187

l.?■
Undo Mountain C«n-.pu5 9

tr .3^0^^kOe
Tap a trurrtxTj I to lUtrp to a t2<3«.
0’3? to recrCc* or groco
JR™!!!
ChjrQe
cooctw«j txrt |

c< ; I Add trar».tcn» and eH <

'4
leil, -’--53e5. and cZ>;*ctv pmrrtet notes, and men. I

Lr Jrn more XXKrt

FIGURE 6.2
Sample Keynote display with help text.

Presentation (graphics) styles as well as human interaction for touchscreen

devices are included in the case study, illustrating the product's ease of use. iOS
device-enabled features apply direct manipulation and gesturing interaction
(see Chapter 7) that are easy to use.
Next the Apple study looks at Mail for iPhones. Fig. 6.3 illustrates Apple's
intuitive, predictable navigation for Mail that has a user interface consistent
with the Apple product line.
The case study finishes with a discussion on Safari on iOS devices, where
again the mobile web-viewing user experience on iOS devices is easy to use and
consistent with the product line and gives web designers valuable insight as
to the portability and ease of development of web content for iOS devices.
References to iOS Design Strategies consistent with the teachings in this text are
included—specify the app, determine who the users are, identify desired fea­
tures (requirements collection), preliminary and detailed design, build and
development, evaluation and testing.

Observations
Some general observations are worth noting with respect to this case study. The
years of experience with the referenced Apple Fluman Interface Guidelines are
brought to bear on the problem. There is a consistent style across all products
188 Chapter 6 Design Case Studies

Cance-: Re: Garden pix Send < Inbox Edit

'■ M.-.r.i G Maria G

To: Mana G .•
o Maha G
Bcc F:
Garden pix Garden pix
August 20. 2013 at 10:58 AM
Re: Garden pix

Here arc some of the results of that great

Wow! Awesome flowers! Maha G
gardening adv ice you gav e me!
You're such a talented gardener. Out of the ot'.cc

Sent from my iPod

Kent H
| On Aug 20. 2013. a’ 10:5S AM Reminder C: this Saturday

O W E R T Y U I O P
Kent H
Can’t make t.~< t ng today
ASDFGHJKL

Z X C V B N M <a Maria G

.7123 space return

Sample iPhone Mail screens.

and devices that makes device operation comfortable and intuitive. Rapid
device technology improvements (lighter weight, faster, more colors, more pix­
els, improved throughput, etc.) result in a constant reevaluation of the user
interface and improvements of the guidelines applied. Still, the principles dis­
cussed in this text also hold true in this case study, universal usability, guide­
lines based on principles and theory, iterative user-centered design processes,
and a keen appreciation of the user experience and of style.
The following case study shows a successful collaboration in a large cor­
poration utilizing user-interface development process methods to solve a
data-analysis challenge.

6.4 Case Study 3: Data-Driven Design at Volvo

The development of Volvo's big data service provides a terrific example of a

case study with big data analytics used in the corporate world that contains a
strong user-interface design component (Wozniak et al., 2015). But first a defini­
tion: big data is defined (Google, 2015) as

Extremely large data sets that may be analyzed computationally to reveal

patterns, trends, and associations, especially relating to human behavior and
interactions.
 6.4 Case Study 3: Data-Driven Design atVolvo 189

In this case study, stakeholders were identified and empowered to help

design the service (toolset) that would be used by the company. A diverse set of
stakeholders (including many users) proved to be a success-oriented approach
for this participatory design team. Stakeholders included the internal IT organi­
zation, an invited (external) expert on big data implementations, database engi­
neers, and business intelligence analysts. Workshops were held for the
stakeholders as well as users of the data such as the organizations in charge of
vehicle maintenance. The workshop attendees (representative stakeholders)
strived to define how the results might appear and how they could be applied to
the various stakeholder group missions. Attendees were encouraged to "think
outside the box" in terms of potential uses for the data. They had to make sure
the data were indeed collectable and would make sense to improve organiza­
tion performance.
Taking huge datasets of Volvo truck service data and essentially prototyping
the analysis output that could be performed worked successfully to identify the
needed data in useful formats. In the workshop, a low-fidelity prototype was
developed (see Fig. 6.4).
Through a series of refinements with representative users worldwide, this
prototype evolved into something useful for all concerned. Fig. 6.5 shows a
sample final version. Users could bring up advanced information about their
products (vehicles) such as service history statistics, perform queries on market­
specific issues, see maps of vehicle usage, highlight interesting values, and more.

rBc«< In'O

V|N YV2ASWOA6805OOO9672
Chossis nr B 500A72
* *
E • Uq mo** t Ch
Component Dote replaced
VO-41565 2012-10-09
VO-65856 2012-09-28
| Seyice hiatory |
VO-84123 2011-03-12
F><
VO-41565 2012-10-09
Cotfitry UK
VO-65856 2012-09-28
Prod ddc 200802 18
VO-84123 2011-03-12
R»0 no P1UMC0
E
7060*3
cz Z)
KEY W10CAT0AS

Owner Advanced Trucks AB

% of t *n« co loo g«s 81,4%

No of drivers 4 A»g IqwJ co^i on tcp 2^.412 l/10C«»n *

100*m 34,2
*

Loot service visits

2013-02-04 0
2012-10-09
2012-09-28

(± 3

FIGURE 6.
Low-fidelity prototype resulting from big data analysis of truck service statistics.
190 Chapter6 Design Case Studies

vr.
Ghana
Single view of vehicle I
VetucU owrvOT. .’.c* • VT3

Indotort' 'jr-t-'S a)
Total UJ«»CV Trtji i v<r

iei»

Top o«»» dal

Brpublkon y»lf
Owe Trill t.-i
Ceerbo
Aoblve
Oucm Hevgtt

Engine o^eilped
::: .n

Me Icoiier S »-?• »> .-c ncn

U^eege L-r-.Z"

Fvihe* Ug

Coctract Wo . (T>.

CeWrectBb Tjpe ttm Dne Orte US. Cots

rud Comur'pt-on «od tperd L‘ '

I A
Tavewnc"
i
£
Ut’3

71
> owe t. cio G>oup Teo! eairtiji

Pece

' < f 7. Cveier

I - Poccr Tremmcuon

Br»U

Body. Cab M Menor

BrweCwarovt. Special I «"C*ooi

Un itw-

FIGURE 6.5
Fully functional dashboard prototype.

A big data service was developed with user-customizable reports. Custom­

ization played a crucial role in the design. Users involved in the process knew
they would be able to choose features and rearrange views based on market-to-
market differences. The study showed how following a user-interface develop­
ment paradigm or development methodology led to a successful result that
had buy-in from a distributed set of users. Indeed, if brokering organizational
support is desired for a new innovation or product, a design-thinking work­
shop of the sort practiced in this use case can be an effective technique.
The performers of the study learned to first identify sources of data while
empowering the stakeholders of the data to choose what data they could use
 6.5 General Observations and Summary 191

(and how) in order to get their jobs done. Also, there were discussions in the
workshops to analyze the data outputs. The final output was corporate big data
policies that led to stakeholder-customizable report formats to better improve
internal corporate communication and decision making. The tool is now used in
all European Volvo truck dealerships.

Observations
There are some general observations worth making here. What was essentially a
process for developing a big data analysis strategy, service design, and support­
ing tools for a company to use to increase internal communication and profit­
ability turned out to apply methods and processes taken from the world of user
experience design and designing user interfaces! The authors applied a well-
known methodology and an interface design paradigm—the process worked.
Often, user-interface processes are applied to business processes without the
persons leading the change realizing its origin. For example, to analyze patient
flow in a hospital (patient recordkeeping, scheduling of resources, sendee bottle­
necks, prioritization of patient needs, etc.) may sound to some like a simple data­
base or queueing problem or an application of business-process reengineering.
However, when humans are mixed with sources of diverse data often in a time­
sensitive environment, quick and easy access to critical data can make an organi­
zation rim more smoothly, better allocate resources, and lead to better decisions to
improve customer satisfaction and patient outcomes. "Knowing thy user," opti­
mizing access to meaningful data, iteratively gathering feedback data, getting
stakeholder buy-in, and so on, can all be accomplished using user-interface design
and development methods as was performed in this case study.

6.5 General Observations and Summary

This chapter's case studies are "a tip of the iceberg" in what can be accomplished
by designers of user-interface systems. The case studies were chosen strategi­
cally to highlight design contexts, various applications, and incremental contin­
uous improvement.
The ATM design example illustrated where what may have started out as a
relatively straightforward task turned into a methodical study of how to improve
a user interface to the machines and was not only accepted but embraced by the
general banking customers. Clearly a competitive edge and source of profitability
are the extension of the banking functions for customers via well-designed ATMs.
192 Chapter 6 Design Case Studies

The Apple guidelines case study shows one company's approach to a consis­
tent, easy-to-to use style for all the company's products and iOS-enabled
devices. Lastly, the Volvo study shows how following a good user-interface
design process can result in a successful conclusion with a large, data-intensive
problem.
Additional sources for interesting user-interface case studies can be found on
the web and in Snyder (2003), Righi and James (2007), Karat and Karat (2010),
and Warfel (2011).

Practitioner's Summary

Interface designers are aware of the challenge of working with multi-disciplinary

teams while striving for consensus in a timely manner to address the require­
ments for a new or updated system. The challenge here is that many use varying
applications of interface design methodologies that are not standardized. What
might work for one company, organization, or industry may not work for
another.
Make sure to do some preliminary work up front to appreciate and under­
stand the differences in development methodologies and to apply what makes
sense for the application. This same rule applies to any software develop­
ment task. Organizations can benefit from methods used elsewhere but must
be carefully managed in order to achieve a successful result within schedule
constraints. Defining the user and characterizing end user needs make up the
engine to drive the successful user experience analysis.
Review interface designs for value-sensitive design issues—designs that cen­
ter on human well-being, human dignity, justice, welfare, and human rights.
Ensure interface designs meet universal usability—the design of information
and communications products and services that are usable for every citizen
(Friedman et al., 2013).

Researcher's Agenda

There is ample opportunity for research and experimentation with different

interface design methodologies and how they interface with software develop­
ment process models. Not starting from scratch, there are often examples on the
web of similar development challenges that can be extrapolated for a need or
application. It would be beneficial to develop a characterization of the nuances
in different user-interface development methodologies and how they interact
with current software development processes.
 References 193

WORLD WIDE WEB RESOURCES

r~~ ~-a [Link]/cs-resources
L._______ „
Case study examples have a significant presence on the internet and are
growing. Check out ACM SIGCHI "CHI" conferences, which hold practitio­
ner's sessions. SIGCHI publishes "CHI Extended Abstracts" with example
case studies available via the ACM Digital Library.
■> ACM SIGCHI "CHI" conferences: [Link]

Reverences

Apple, From Desktop to iOS (2015a). Available at [Link]

ios/documentation/UserExperience/Conceptual/MobileHIG/DesktopToiOS.
html#//apple_ref/doc/uid/TP40006556-CH51-SWl.
Apple, iOS Human Interface Guidelines (2015b). Available at [Link]
com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/.
Birnie, S., The pillar ATM: NCR and community centered innovation, DPPl '7 7 Proceed­
ings of the 2017 Conference on Designing Pleasurable Products and Interfaces, ACM (2011).
Buxton, W., Sketching User Experiences: Getting the Design Right and the Righ't Design (In­
teractive Technologies), New York: Morgan Kaufmann (2007), 77-80,135-138.
Friedman, B., Kahn Jr., P. FI., Borning, A., and Huldtgren, A., Value sensitive design
and information systems, in Doorn et al. (Editors), Early Engagement and New Tech­
nologies: Opening Up the Laboratory, Springer (2013), 55-95.
Google, Big Data (2015). Available at [Link]
Greenberg, S., Carpendale, S., Marquardt, N., and Buxton, B., Sketching User Experiences:
The Workbook, San Francisco: Morgan Kaufmann (2011), 29-66.
Flartson, R., and Pyla, P., The LIX Book: Process and Guidelines for Ensuring a Quality User
Experience, Morgan Kaufmann (2012).
Karat, C., and Karat, J., Designing and evaluating usable technology in industrial research
three case studies, Synthesis Lectures on Human-Centered Informatics 3,1 (2010), 1-118.
Righi, C., and James, J., User-Centered Design Stories: Real-World UCD Case Studies (Inter­
active Technologies), San Francisco: Morgan-Kaufman (2007).
Snyder, C., Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces,
San Francisco: Morgan Kaufmann (2003).
[Link], Wireframing (2015). Available at [Link]
and-tools/methods/[Link].
Warfel, T. Z., Prototyping: A Practitioner's Guide, Rosenfeld Media (2011).
Wozniak, P., Valton, R., and Fjeld, M., Volvo single view of vehicle: Building a Big Data
service from scratch in the automotive industry, CHI EA '15: Proceedings of the 33rd
Annual ACM Conference Extended Abstracts on Human Factors in Computing Systems,
ACM (2015), 671-678.