Cooper Part II
Making Well-Behaved Products
Different Needs and Visual Design
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 632
User Interface Design and Development
Cooper Ed4, Ch 16-17
Outline
1. Designing for Different Needs (ch 16)
2. Integrating Visual Design (ch 17)
1 July 2016
© Jeff Offutt, 2004-2014
2
Learnability and Help
• Command modalities are distinct techniques for letting
users issue instructions
–
–
–
–
–
Direct manipulation objects
Drop-down and pop-up menus
Toolbars
Keyboard accelerators
…
• Provide different modalities for the same command
– Supports different users
– Beginners / intermediates / experts
– Mobile apps cannot provide as many different modalities
• For example, keyboard shortcuts don’t make sense
1-Jul-16
© Jeff Offutt, 2004-2014
3
Commands That Teach
• Dialogs and command menus have enough text to teach
as well as offer functionality
– Great for beginners and intermittent intermediates
• Pedagogic commands are partly there to teach the UI
– Must be self explanatory and easy to find
• Direct-manipulation controls, keyboard shortcuts, and
gestures are immediate and invisible
– Intermediates and experts want speed and power
– Must be memorized
– Matching the user’s mental model is essential for memorization
1-Jul-16
© Jeff Offutt, 2004-2014
4
Information in the World
Information in the Head
• Examples of information in the head :
– Labels : Names of people, Mom’s phone number
– Location of classes
– Which car is yours
Norman, Design of
Everyday Things
• Examples of information in the world :
– Signs : Street, room numbers, house numbers, restaurants
– Contact info on pocket computers
– Maps and navigation systems
Digital devices created a massive migration
of information from our heads to the world
1-Jul-16
© Jeff Offutt, 2004-2014
5
World and Head
• Information in your head
– Faster and easier to use
– Private
– You must learn, remember, and keep it up to date
• Information in the world
– Slower to use
– Public
– Not limited by your memory
• Invisible commands must be in your head
• Pedagogic commands can be in the world
Usable UIs have lots of information
in the world (in the UI)
1-Jul-16
© Jeff Offutt, 2004-2014
6
Customizability
• Users like to change UIs for several reasons
– Self expression (personalization)
– Shortcuts for functions or sequences of functions that they use
frequently
• How much customization to allow is policy decision
• How to provide customization is hard to design
• Configuration : Moving, adding, or deleting persistent
objects
– Menus, toolbar controls
– Experts need configuration and will be frustrated if they cannot
• Idiosyncratic behavior : Allowing users to choose a default
behavior when there is no obvious default
1-Jul-16
© Jeff Offutt, 2004-2014
7
Localization and Globalization
• Localization : Translating a UI for a particular group
• Globalization : Making a UI work universally across as
many groups as possible
• Making an interface usable outside the US requires careful
thought :
– Language must be translated
– Culture must be considered
– Local conventions must be used
1-Jul-16
© Jeff Offutt, 2004-2014
8
Language Issues
• Diacriticals: A sign that modifies the sound of a letter
– Ö, Ò, Ó, Ô, Õ, …
– English has none
– ASCII: 7 bits is okay for English, but most European languages
need 8 bits
– Japanese has 8000 characters, Chinese has > 100,000!
– Unicode has 16 bits
• Sorting: the rules vary by language
• Capitalization: Rules differ by dialect
– Canadian: é  É
– French: é  E
1-Jul-16
© Jeff Offutt, 2004-2014
9
Language Issues (2)
• Hyphenation: varies by language
• Name orderings differ: Jeff Offutt, Li Nan
• Numeric formats
– Currency symbols ($, £, ¥, …)
• Location varies
– Separators
• Time: 4:30 .. 4.30
• Large numbers: 5,000,000 .. 5.000.000 .. 500,0000
–
–
–
–
1-Jul-16
Dates: May 13, 2014 – 05/13/14 .. 13/05/014 .. 2014/13/05
Time: 4:30 .. 16:30
Clocks
Telephone numbers
© Jeff Offutt, 2004-2014
10
Suggestions for Commands
•
•
•
•
•
•
•
Avoid acronyms and abbrevs
Do not be informal (could be condescending or rude)
No slang
Avoid national, religious, racial stereotypes
Warning : Text will expand when translated !
Avoid complex terms
Use consistent terminology
1-Jul-16
© Jeff Offutt, 2004-2014
11
Suggestions for Icons
• Use very simple designs
• Check for international standards (road signs)
– Compare with local common icons
• Avoid text (translation will not fit)
• Test with new users
• Some countries prohibit certain icons
– Chinese flag cannot be used for commercial purposes
• Avoid culture-specific icons:
US rural delivery
1-Jul-16
© Jeff Offutt, 2004-2014
12
Testing Globalized UIs
1.
2.
3.
4.
Test by yourself locally
Run the test remotely
Hire a local usability consultant
Ask local branch office to run tests
Be sure to get local users to
test the UI
1-Jul-16
© Jeff Offutt, 2004-2014
13
Accessibility
• Can your GUI, website, web app, or mobile app be used
by people with disabilities or impairments?
• Section 508 compliance : Standards for accessing
technology
– Government site : http://www.gsa.gov/portal/content/105254
– Free website checker : http://www.508checker.com/
• Accessibility goals
– Users can understand instructions, information, and feedback
– Users can manipulate controls and inputs
– Users can navigate easily and know where they are
• It is acceptable to have a different UI (accessible)
1-Jul-16
© Jeff Offutt, 2004-2014
14
Accessibility Guidelines
•
•
•
•
•
•
•
•
•
•
Use tools in the OS
Don’t override user-selected settings
Enable keyboard access methods
Use display options for visually impaired users
Provide visual-only and audible-only output
Don’t flash, flicker, or blink
Use simple, and clear language
Allow users to slow down the UI
Keep layouts and flow consistent
Provide text for visual elements
1-Jul-16
© Jeff Offutt, 2004-2014
15
Outline
1. Designing for Different Needs (ch 16)
2. Integrating Visual Design (ch 17)
1 July 2016
© Jeff Offutt, 2004-2014
16
Ch 17 : Integrating Visual Design
• Visual elements are “words” in the language that
computers use to communicate with users
• Visual elements are powerful communication devices
• But also very difficult to design well !
• Requires lots of skills :
–
–
–
–
Computing
Communication
Knowledge of language
Graphical design
Don’t expect to find all those
skills in one person!!
1-Jul-16
© Jeff Offutt, 2004-2014
17
Use of Visual Elements
Visually show what – Textually show which
Big picture
Details
Abstraction
• Graphic design is too much to teach in this course
• GUI designers must have some knowledge of visual
interface design
•
1-Jul-16
And should also seek help from experts
© Jeff Offutt, 2004-2014
18
How the Eyes See Color
Focal point
Retina
Retina
1 July 2016
Lens
Lens adjusted for green
Lens
© Jeff Offutt, 2001-2014
Lens adjusted for red
19
Color
• Hue: What we usually see as color
• Luminance: Amount of light entering eye
• Brightness: Perceived amount of light
(blue appears brighter than white)
• Saturation: Purity of color
• Lightness: Amount of light an object reflects
1 July 2016
© Jeff Offutt, 2001-2014
20
Color Spectrum
Color
Purple
Blue
Green
Yellow
Orange
Red
Wavelength
< 430 nm
450 – 480 nm
500 – 550 nm
570 – 590 nm
610 – 630 nm
> 640 nm
See the Java Applet color wheel at:
http://www.ficml.org/jemimap/style/color/wheel.html
1 July 2016
© Jeff Offutt, 2001-2014
21
Color Wheel – Opposites
1-Jul-16
© Jeff Offutt, 2004-2014
22
Notes on Human Eyes
• Lens are adjusted for green when relaxed
• It is easiest to discriminate among red colors
• It is hardest to discriminate among blue colors
• The number of hues we can perceive shrinks as we
age
– Starting about age 24 …
1 July 2016
© Jeff Offutt, 2001-2014
23
Color Contrast
• Relative brightness of signal over background
• Greater contrast – better perception
• Opponent colors yield better contrast
(orange:blue, red:green)
• Dark on light has better contrast than light on dark
– This is true on paper and on computer screens
– This effect is reversed when projecting
1 July 2016
© Jeff Offutt, 2001-2014
24
Color Contrast
• Relative brightness of signal over background
• Greater contrast – better perception
• Opponent colors yield better contrast
(orange:blue, red:green)
• Dark on light has better contrast than light on dark
– This is true on paper and on computer screens
– This effect is reversed when projecting
1 July 2016
© Jeff Offutt, 2001-2014
25
Color Guidelines
• Avoid highly saturated opponent colors at the same time
–
Use opponent colors for higher contrast (emphasis)
• Do not use blue for text, thin lines, and small shapes
• Older users need more brightness
• Use brighter, spectrum-centered colors for text
–
(black, white, yellow, red)
• Do not require color discrimination in small areas
• Use color for relative differences, but not numeric
information
• Use greater intensity for hues that indicate larger amounts
• Use two different background colors to split screen
1-Jul-16
© Jeff Offutt, 2004-2014
26
More Color Guidelines
• Use color to categorize information and controls
• Group elements using a common background color
–
Use color to indicate “regions” in web sites
• Use similar colors to imply similar meanings
• Use brightness and saturation for highlighting
• The same color may have different meanings in different
cultures
• Use redundant coding of shape and color
–
–
–
1-Jul-16
Round / green for beginners
Square / blue for intermediate
Diamond / black for advanced
© Jeff Offutt, 2004-2014
27
VIM with HTML
HTML tags
Attributes
Content
Comments
Values
1 July 2016
© Jeff Offutt, 2001-2014
28
Object-verb vs. Verb-object
• Carr, “Programmers at Work”, pg 220
• Originated at Xerox Parc : All commands should act on
data that is already selected
– Think of this as “object-oriented” UI design
• Verb-object : Choose copy, system asks you what to copy
– User is in a reactive mode
• Object-verb : Choose the file, then copy
– User is in control
V-O is natural for command languages
O-V is better for GUIs
1-Jul-16
© Jeff Offutt, 2002-2014
29
Visual Interface Suggestions
• Avoid too many visual elements
• Users need to distinguish and organize elements
– Contrast
– Similarity
– Layering
• Provide structure and flow
• Imagery that is cohesive and consistent
• Integrate style and functions
1-Jul-16
© Jeff Offutt, 2004-2014
30
Clutter
• Clutter uses up mental energy
– Both in messy rooms and in messy UIs
• Avoid complicated visual elements
• Smaller and simpler is usually better
• Leverage: A visual element that has multiple purposes
– An icon that indicates type and that can be opened
Clutter is a tax on people who
pay attention to details
1-Jul-16
© Jeff Offutt, 2004-2014
31
Contrast and Layering
• Contrast helps users
– Distinguish among active interfaces elements
– Distinguish among passive elements
• Don’t include contrast that does is not meaningful
• Active, or manipulable, controls should stand out clearly
• Spatial contrast : Put related items close to each other
– Remember people read left-right and top-bottom
– Users make assumptions about shape
• Layering : Putting visual elements on top of other
elements
– Use contrast to separate layers
1-Jul-16
© Jeff Offutt, 2004-2014
32
Provide Visual Structure and Flow
• GUI organization
– Visual elements in groups (PPT: icons in toolbars and screen)
– Groups organized into panes (PPT: several panes)
– Panes organized into screens or pages (PPT: each page in file)
• Line things up
–
–
–
–
Align labels with each other: left justify
Line sets of controls up
Line up controls even across different panes
Follow a grid structure (GUI development tool should help)
• The flow should support the user’s mental model
1-Jul-16
© Jeff Offutt, 2004-2014
33
Imagery
• Icons are part of a language that communicate information
to users
• Function or active icons :
–
–
–
–
Represent both action and object
Metaphors may mean different things to different users
Don’t make icons too detailed
Reuse icons in different parts of the interface
• Elements that behave differently should look different
1-Jul-16
© Jeff Offutt, 2004-2014
34
Style and Functions
• All stylistic elements should be designed together
– Otherwise you will get a consistency headache
• Communication is more important than beauty
– What’s better, a well-dressed professor with a poor lecture, or
a poorly dressed prof with a good lecture?
•
Tufte : Good visual design is “clear thinking made visible”
•
Two problems :
1. It is hard to display multidimensional information on a screen
2. Screens cannot show as much information as paper
1-Jul-16
© Jeff Offutt, 2004-2014
35
Seven “Grand” Principles
1.
2.
3.
4.
5.
6.
7.
1-Jul-16
Enforce visual comparisons
Show causality
Show multiple variables
Integrate text, graphics, and data into one display
Ensure the quality, relevance and integrity of the content
Show things adjacently in space, not stacked in time
Do not de-quantify quantifiable data
© Jeff Offutt, 2004-2014
36
1. Enforce Visual Comparisons
Users should be able to compare variables visually, not
just textually
– Related variables
– Trends
– Before and after scenarios
2000
58
2001
55
2002
31
2003
168
2004
134
2005
142
100
2006
179
50
2007
155
0
2008
165
2009
171
Student Enrollment
200
150
Student Enrollment
1-Jul-16
© Jeff Offutt, 2004-2014
37
2. Show Causality
• Show relationships between cause and effect
• Three mile Island (1979)
– A valve was open that needed to be closed
– Red indicated closed, green indicated open
– The operator saw green, thought “green is good,” and didn’t
close the valve for several crucial seconds …
– Current control stations show a picture of the valve
• Challenger disaster (1986)
– O-rings failed, causing the shuttle to blow up on launch
– O-rings failed because of a deep freeze
– Better charts could have clarified the causality between
temperature and O-ring failures
1-Jul-16
© Jeff Offutt, 2004-2014
38
3. Show Multiple Variables
• If data are affected by multiple variables that are related,
all variables should be visible
• Users should be able to hide some variables
1-Jul-16
© Jeff Offutt, 2004-2014
39
4. Integrate Text, Graphics, and
Data
• Pictures give an overview, but text and data give precision
• Simply sticking both on-screen isn’t enough, because users
may have a hard time connecting them
1-Jul-16
© Jeff Offutt, 2004-2014
40
5. Ensure Quality, Relevance and
Integrity
• Don’t show data just because it’s available
• Consider the users’ goals
• Display information or data only if it supports those
goals
• Incorrect or unneeded data :
– Slows users down
– Damages their trust
– Increases errors on the part of users
1-Jul-16
© Jeff Offutt, 2004-2014
41
6. Show Things Adjacent in Space
Sept 4: Project assigned
Sept 11: Statement of intent
Sept 18: User Profile
Sept16:
Oct
Nov
2:
13:
20:
4:Techno
11:
18:
25:
Project
Screen
Projects
Projects–non-Demos
Statement
User
Interface
Profile
Demo
assigned
Designs
- Demos
Goals
of intent
Sept 25: Interface Goals
Oct 2: Techno Demo
Oct 16: Screen Designs
Nov 13: Projects - Demos
Nov 20: Projects–non-Demos
1-Jul-16
© Jeff Offutt, 2004-2014
42
7. Do Not De-quantify
Quantifiable Data
Charts are good, but the numbers need to be available
25
20
20
20
18
18
16
16
14
14
12
12
15
10
5
10
10
8
8
6
6
4
4
2
0
2
0
SWE 632
0
SWE 632
CS
Other
INFS
poor
1-Jul-16
SWE 632
ISA
SWE
CS
Other
INFS
ISA
OK
© Jeff Offutt, 2004-2014
SWE
CS (7)
Other (2)
ISA (1)
SWE (20)
INFS (12)
better
43
Visual Element Summary
A visual interface must be
based on visual patterns
1-Jul-16
© Jeff Offutt, 2004-2014
44
Summary
Some users have very different needs
Good UIs support all users
Visual design is more than just
including pictures
1-Jul-16
© Jeff Offutt, 2004-2014
45