three overlapping concerns…athena.ecs.csus.edu/~buckley/csc238/cooper_ch16_f2016.pdf · 2016. 5....

BBuckley - 1

CSc 238 Human Computer Interface Design

Part II Making Well-behaved Products

Chapter 16

Designing for Different Needs

ABOUT FACE

The Essentials of Interaction Design

Cooper, Reimann, Cronin, and Noessel

Generalizable patterns of user needs

Design efforts require not only the specific focus

provided by personas… but also consistent and

generalizable patterns of user needs

Strategies for serving user needs:

• Learnability and help

• Customizability

• Localization and globalization

• Accessibility

2

Learnability and Help

… are useful in sorting out the needs of users with

different levels of experience

Methods of helping users understand and learn an

interface:

1. Command modalities

2. Working sets

3. Contextual help and assistive interfaces

4. Traditional online help

3

Command modalities

Commands that activate functions require users to figure out what

commands are available & how they are used

Command modalities are techniques for allowing user to issue

instructions to an application

Considerate user interfaces provide multiple (redundant)

command modalities for critical functions

(menu items, toolbar items, keyboard accelerators, gestures or direct

manipulation controls)

Redundancy serves users with different skill sets

4

Command modalities

• Pedagogic, immediate and invisible commands• Information in the world versus information in the head

• Memorization vectors

Commands that teach their behavior using inspection

Beginners: Menus

Intermediates & Experts: want immediate effect… invisible

commands

(drag handles, sliders & knobs, pushbuttons…)

Keyboard accelerators and jesters (memorized!)

keystroke combinations, swipes, pinches, flicks of the finger

5

Command modalities

• Pedagogic, immediate and invisible commands

• Information In the world versus In the head• Memorization vectors

Different ways to access information

In the world: explicit

For example, a Kiosk with a map providing exact locations

In the head: knowledge learned and memorized

Pedagogic (invisible) commands are designed to be learnable

Immediate access, but user is responsible for the learning

Menu item or dialog contains the information

6

Command modalities

• Pedagogic, immediate and invisible commands

• Information in the world versus information in the head

• Memorization vectors

Users want immediate commands for frequent use… how?

First, provide both immediate/invisible commands and pedagogic ones

Second, provide a path for users to learn the pedagogic commands… the

memorization vector

user documentation… no

online help… no

integrate memorization vector into the main interface

MS Word: Alt+F and then S (note. no feedback is provided indicating S

occurred)

modal ToolTips are provided by “hovering” the cursor over the toolbar

icon

7

Working sets

Memorized features… Minimal working set:

Commands that most used by users… for intermediates

Commands easy and quick to invoke

Designers must also provide means for adding other commands

to the “working set”

For beginners… must be provided with pedagogic versions to

enable users to learn the interface

Exception!

Erase all, Clear, Abandon changes… no short-cut

commands

8

Contextual help and assistive interfaces

Golden rule: “… providing assistance when and where

in the interface it is needed without breaking the users

work flow

How?

• Guided tours and overlays

• Galleries and templates

• Input and content area hints

• Pros and cons of wizards

• ToolTips and ToolTip overlays

9


• Guided tours and overlays• Galleries and templates




Common with mobile apps… with little screen real estate

Guided tours… introduce features and interface behaviors with a

sequence of screens containing text and images

e.g. Describing basic functions… creating, editing & sharing a

document… screen to screen by a swipe or a tap

Launched automatically … with skip button provided

Overlays… a transparent sheet laid over the interface on which

arrows & descriptions are embedded

Best suited for relatively simple apps

10

Snapseed app overlay11



• Galleries and templates• Input and content area hints



12

Offer users a gallery of

ready-to-use templates

DESIGN

PRINCIPLE




• Input and content area hints• Pros and cons of wizards


Hints… small and often grayed back text providing brief

directions or examples of use in input fields

13





• Pros and cons of wizards• ToolTips and ToolTip overlays

For initial configuration of a hardware device… iPhone, iPads

Attempt to guarantee success… stepping users through a series of

steps… providing choices rather than asking questions

… do not require mindless confirmation type messaging

… do not obscure questions (e.g. referencing IP address)

Authors message to developers & designers

… putting raw implementation model interfaces on complex

features with the belief that with a wizard users will have “no

problem”

14







Usually triggered by tapping a help button (or cursor hovering)

15

Traditional online help

Beginners need guided tours, overlays and other “quick

start” aids

A complex application must come with a reference

document!

• Full-text search versus indexing• Overview descriptions

• In-app user guides

“If a help text or its index does not capture a user’s way of

phrasing or thinking, the help system will fail”

More goal-directed thinking in creating text and an index is a

must

Note: … easier to rework the interface to improve learnability

than to create a really good interface

16


• Full-text search versus indexing

• Overview descriptions• In-app user guides

Users need to know “scope, effect, power, upside, downside,

general process” and why they might want to use the application

“Be sure and lead your sections with overviews to explain these

fundamental concepts.”

17


• Full-text search versus indexing

• Overview descriptions

• In-app user guides

While apps are now delivered online, the need for good reference

documentation is a must

… detailed information on using the functionality provided

Guides included within the application are the reference for detailed

information… and do not require the user to search the Web

18

Customizability

Should users be able to customize software products?

Dilemma: users need to have things done their way and the

problem this creates when navigation suffers due to familiar

elements being moved or hidden

A different approach to deal with this dilemma:

1. Personalization

2. Configuration

3. Idiosyncratically modal behavior

19

Customizability

1. Personalization2. Configuration


Users do change things around to suit themselves… even beginners

MS Word… user can change font, font size

Tools for personalizing must be simple and easy to use… and allow

users to preview their changes

… and to undo their changes

20

Customizability

1. Personalization

2. Configuration3. Idiosyncratically modal behavior

Describes moving, adding, or deleting persistent objects

… for experienced users … a necessity for expert users

Moving controls around on toolbars is a form of personalization

The left most toolbar controls (File New, File Open, and File Save)

are common and should be considered persistent objects)

21

Customizability

1. Personalization

2. Configuration


To accommodate a division in a user population's preferences

“When the user population splits on preferred idioms, … designers

must offer both idioms.”

Windows example

Click a menu bar to make menu appear … hold down the button,

drag down the menu and release the button on your choice … or …

click and release on the menu bar item to make the menu appear

22

Localization and globalization

Localization: translating an application for a particular

language and culture

Globalization: making an application as universal as

possible across many languages and cultures

Symbols used in Toolbar buttons … ensure that colors

and symbols convey the appropriate meaning in

different cultures

Pedagogic interfaces … menu items, field labels,

ToolTips… must be language-independent

23

Localization and globalization

Issues to be aware of when creating interfaces:

The words and phrases in some languages may tend to be longer

(German words longer than English equivalent… Spanish

sentences may be some of the longest

Words may be difficult to sort alphabetically (e.g. Japanese)

Ordering of day-month-year and use to 12 or 24 hour notation

may vary

Decimal points in numbers and currency represented differently

Some countries use week numbers and not names (50 in mid-

December)

24

Accessibility

Design for users with cognitive, sensory, or motor

impairments due to age, accident or illness – as well as

hose without such impairments

1. Goals of accessibility

2. Accessibility personas

3. Accessibility guidelines

For both impaired and unimpaired users can:

• Perceive & understand all instructions, information & feedback

• Perceive & understand, and easily manipulate any controls &

input

• Users can navigate easily, and always be aware of where they

are in an interface & navigational structure

25

Accessibility







… need to interview users or potential users… who

have disabilities that would affect their use

… or create a provisional persona to help focus on accessibility

issues

… or create a provisional persona to focus on accessibility issues

on a less targeted way

26

Accessibility







A starting point to understanding and approaching

accessible application design

27

Accessibility Guidelines

• Leverage OS accessibility

tools and guidelines

• Don’t override user-selected

system settings

• Enable standard keyboard

access methods

• Incorporate display options

for those with limited vision

• Provide visual-only and

audible-only output

• Don’t flash, flicker, or blink

visual elements

• Use simple, clear, brief

language

• Use response times that

support all users

• Keep layouts and talk flows

consistent

• Provide text equivalents for

visual elements

28

Leverage OS accessibility tools and guidelines

For instance, your app:

Should not use keystrokes or gestures that are already

committed t enabling OS-level accessibility features

for application functions

Should work properly when accessibility features are

turned on

Should use standard application programming

interfaces (APIs) for input and output when possible

to ensure compatibility with OS and 3rd party

assistive technologies, such as screen readers

29

Incorporate display options for those with

limited vision

Support a range of options for visually impaired users:

• High-contrast display option, using predominantly

black text on white backgrounds

• Options for enlarging the typeface and increasing its

weight (ideally, these are independent settings)

• An option for color-blind-friendly information

display, if applicable

• An option for minimizing motion and animation in UI

elements, if these are used in the default interface

30

Accessability- Google

Published on Nov 25, 2015

Join Alice Boxhall to learn about all the work that Chrome has

been doing to make Accessibility simple for developers.

Alice Boxhall is a software engineer working on accessibility

features for Chrome, and the creator of the Accessibility

Developer Tools extension and library.

Laura Palmaro is the Accessibility Program Manager for the

Chrome and Chrome OS teams at Google. She collaborates with

the engineers, designers, and product managers to make Chrome

accessible and usable across platforms, for people of all abilities.

31

three overlapping concerns…athena.ecs.csus.edu/~buckley/csc238/cooper_ch16_f2016.pdf · 2016. 5....

Documents