About Face 2'0

1
About Face 2.0
Section Two Designing Behavior and Form Part IV
Applying Visual Design Principles
Next

• Chapter 19 Designing Look and Feel
• Chapter 20 Metaphors, Idioms, and Affordances

2
Designing Look and Feel

• Graphical User Interfaces (GUIs) are better than
  character-based user interfaces
• True?
• It is too easy to design GUIs that are as hard to
  use (in a different way) than command-line
  interfaces
• We need to understand the role of visual design
  in the creation of user interfaces

3
Visual Art vs. Visual Design

• The visual medium is common to practitioners of
  visual art and practitioners of visual design
• But they use the medium towards different ends
• Visual art provoke an aesthetic response self
  expression
• Visual design communicate some specific
  information
• Visual interface designers are concerned with
  finding the representation best suited to
  communicating the behavior of the software that
  they are designing

4
Graphic Design and Visual Interface Design

• Aesthetic concerns are one of a number of
  concerns to visual interface designers
• Understand the basics of color, typography, form,
  and composition
• Understand interaction the behavior of software
• Graphic design
• Conventional printed medium of packaging,
  advertising, document design, etc.
• Current digital medium of computer-based,
  pixilated display
• Excel at creating beautiful and appropriate
  surfaces of the interface and interweaving
  corporate branding
• Concerns, in order
• Legibility and readability of information
• Tone, style, and framework that communicate a
  brand
• Communicating behavior through affordances

5
Visual Interface Design and Visual Information
Design

• Visual interface designers focus on
• Organizational aspects of design
• How affordances communicate behavior to users
• Function, then content
• Use the visual structure of the interface to
  integrate the logical structure of the user and
  the logical structure of the program
• Communication of program state
• User perception of functions (layout, grids,
  figure-ground issues, etc.)
• Visual information designers focus on
• Content and navigation, then interaction
• Controlling information hierarchy through the use
  of visual language
• Especially important for content-oriented web
  design

6
Industrial Design

• Industrial designers focus on
• Shapes
• Skins (textures, colors, etc.)
• Logical mapping of physical controls and device
  behaviors to user behaviors
• Ergonomics
• As more physical artifacts become
  software-enabled and include sophisticated visual
  displays, it will become more important that
  interaction designers, industrial designers, and
  visual designers work closely together to produce
  usable products

7
Principles of Visual Interface Design

• The human brain excels at making sense of dense
  quantities of visual (and other sensory)
  information
• Discern and process visual patterns
• Visual interface design must take advantage of
  our innate visual processing capabilities to help
  programs communicate their behavior and function
  to users
• Visual interfaces should
• Avoid visual noise and clutter
• Use contrast, similarity, and layering to
  distinguish and organize elements
• Provide visual structure and flow at each level
  of organization
• Use cohesive, consistent, and contextually
  appropriate imagery
• Integrate style and function comprehensively and
  purposefully
• Reference Kevin Mullet and Darrell Sano

8
Avoid Visual Noise and Clutter

• Visual noise superfluous visual elements that
  distract from those visual elements that directly
  communicate software function and behavior
• Over-embellished and unnecessarily dimensional
  elements
• Overuse of rules and other visual elements to
  separate and group controls
• Inefficient use of white space between visual
  elements
• Inappropriate or overuse of color, texture, and
  typography
• Cluttered interfaces attempt to provide too much
  functionality in a constrained space

9
Ways to Avoid Visual Noise and Clutter

• Use simple geometric forms
• Use minimal contours
• Use less-saturated colors
• Typography should not vary widely
• One or two typefaces in a few sizes
• Similar elements that serve a similar or
  logically related purpose should be similar in
  shape, size, texture, color, weight, orientation,
  spacing, and alignment
• Elements intended to stand out should be visually
  contrasted with regularized elements
• Make interfaces visually efficient
• Take away elements that do not contribute to
  clarity
• Leverage use an element for multiple, related
  purposes

10
Use Contrast and Layering to Distinguish and
Organize Elements

• Provide visual contrast between active,
  manipulable elements and passive, non-manipulable
  elements
• Provide visual contrast between different logical
  sets of active elements communicate their
  distinct functions
• Avoid unintentional or ambiguous use of contrast
• Users will try to attribute a meaning to the
  differences
• Contrast can provide visual patterns that users
  register and remember, allowing them to rapidly
  orient themselves
• Contrast provides a gross means of indicating the
  most or least important elements in an
  interfaces visual hierarchy
• A visual interface is based on visual patterns

AXIOM
11
Dimensional, Tonal, and Spatial Contrast

• Manipulable controls should visually stand out
  from non-manipulable regions
• Use dimensional contrast (such as pseudo-3D) to
  give the feel of a manual affordance
• Buttons and other items to be clicked or dragged
  are given a raised look
• Data entry areas are given indented looks
• Use tonal contrast (hue, saturation,
  value/brightness) to distinguish controls from
  background and to group controls logically
• Vary along a single access, not all at once
• Variation along hue is a poor choice for those
  with color perception problems
• Use spatial contrast to make logical distinctions
• Spatially group related things
• Communicate sequence with left-to-right
  top-to-bottom (for example)
• Shape example check boxes are square radio
  buttons are round
• Orientation up, down, left, right, angles
• Size broadness of scope, importance, frequency
  of use

12
Layering

• Organize interfaces by layering visual cues in
  individual elements or in the background on which
  the active elements rest
• Color
• Dark, cool, desaturated colors recede
• Light, warm, saturated colors advance
• Size
• Large elements advance
• Small elements recede
• Positional overlapping
• Maximize differences between layers minimize
  differences between items within a layer

13
Figure and Ground

• Humans perceive a difference (tension) between
  the figure (the focus of attention) and the
  ground (the background on which the figure
  appears)
• Perceive light objects as figure dark objects as
  the ground
• Poorly positioned and scaled figure elements may
  end up emphasizing the ground
• Figure and ground should be about equal in their
  scale and visual weight
• Figure should be centered on the ground

Compare your perceptions of the figure/ground
scale on the last few slides
14
The Squint Test, Mirror Test, and Upside Down Test

• Use the squint test to assess whether a visual
  interface design employs contrast effectively
• Close one eye and squint at the screen with the
  other
• Which elements pop out?
• Which elements are fuzzy?
• Which items group together?
• Which is dominant figure or ground?
• Mirror test look at the design in the mirror
• Look at the design upside down

15
Visual Structure and Flow at Each Level of
Organization

• Align grouped elements horizontally and
  vertically
• Align labels (use left justification)
• Align within a set of related controls
• Align across different groups of controls
• Follow a regular grid structure for larger-scale
  elements groups, panes, screens
• Use clear, simple grids with relatively large
  atomic grid unit
• Users logical path should be left-to-right,
  top-to-bottom
• In Western countries

16
Symmetry and Balance

• Interfaces that dont employ symmetry tend to
  look unbalanced
• Achieve asymmetrical balance by controlling the
  visual weight of individual elements
• Use the squint, mirror, and upside down test to
  recognize lopsided balance

17
Spatial Harmony and White Space

• Certain proportions seem to be more pleasing than
  others to humans
• Golden Section ratio 1 1.618
• Unfortunately, computer monitors have a ratio of
  1.33 1
• Use white space
• Like books enforce proper margins and spacing
  between paragraphs, figures, and captions
• Make proportions bold, crisp, and exact
• Almost a square is no good
• Almost a double square is no good
• etc.

1
1
1
1
1
1
1
18
Cohesive, Consistent, Contextually Appropriate
Imagery

• A good understanding of personas and their mental
  models should provide a solid foundation for
  textual and visual language used in an interface
• Consider cultural differences, such as
• Color red is not a warning color in China
• Do not use a thumbs up in Turkey
• Octagon does not mean stop in all countries
• Consider domain-specific color encoding
• Yellow in a hospital means radiation red means
  life threatening

19
Function-Oriented Icons

• Represent an abstract concept in iconic, visual
  language
• Use idioms over visual metaphors
• Represent the action and the object acted upon
• Nouns and verbs
• Beware of metaphors and representations that may
  not have the intended meanings for your target
  audience
• Group related functions visually
• Keep icons simple avoid excessive visual detail
• Dont draw undue attention to the icon visuals
• Reuse elements when possible, so users need to
  learn them only once
• But dont reuse them for different meanings

20
What are the Actions? The Objects?
21
Associating Visual Symbols to Objects

• Create unique symbols for types of objects in the
  interface
• Support quick user recognition
• Faster than text recognition
• Often idiomatic, rather than representational or
  metaphoric
• Enforce the connection use the symbol wherever
  the object is represented on the screen
• Visually distinguish elements that behave
  differently

AXIOM
22
Visualize Behaviors

• Show the user what the results will be
• Visually communicate function and behavior

AXIOM
It would be great if I could also graphically
manipulate the margin (Allow input wherever you
output)
23
Integrate Style and Function Comprehensively and
Purposefully

• Apply stylistic elements from a global
  perspective, not just to individual controls or
  other elements
• Form versus function
• Designers must be careful not to affect the basic
  shape, visual behavior, and visual affordance of
  controls in the effort to adapt them to a visual
  style
• Educational and entertainment applications can
  take more liberty with style
• Branding
• The user interface should carry the branding
  strategy of the company developing and/or using
  the application
• Choice of color, image style, logos, etc.
• Notice the branding elements of the design of
  these slides

24
Principles of Visual Information Design

• Edward Tufte
• Two important problems in information design for
  computer-based information display
• Displaying multi-dimensional information on a
  two-dimensional surface
• The display resolution of the screen is much less
  than paper (but computers add motion)
• Visually displayed information should

• Enforce visual comparisons
• Show causality
• Show multiple variables
• Integrate text, graphics, and data in one display

• Ensure the quality, relevance, and integrity of
  the content
• Show things adjacently in space, not stacked in
  time
• Not de-quantify quantifiable data

25
Use of Text in Visual Interfaces For Navigation

• For navigation purposes, text words are best
  considered as visual elements short, easily
  recognized, easily remembered
• WORDS IN ALL CAPS ARE HARDER TO READ
• The words lose their shape that we recognize
• Recognizing words is different from reading
  (where we interpret meaning in context)
• Minimize reading in navigation
• Use visual symbols and idioms to identify the
  type of object, then use text to identify which
  particular object
• Visually scan for object type
• Visually show what textually show which

AXIOM
26
Use of Text in Visual Interfaces For Reading

• When text must be read in interfaces
• Make sure the text is in high contrast with the
  background
• Do not use conflicting colors
• Choose an appropriate typeface and point size
• Point sizes less than ten are difficult to read
• For brief text (label, etc.) use a crisp,
  sans-serif font, like Arial
• For paragraphs of text, use a serif font
• Phrase text to make it understandable by using
  the least number of words necessary to convey
  meaning
• Phrase clearly
• Avoid abbreviations use standards abbreviations
  when necessary

27
Use of Color in Visual Interfaces

• Color is part of the visual language of an
  interface design
• Users will impart meaning to the use of color
• Uses
• Color draws attention
• Color improves navigation and scanning speed
• Color shows relationships
• Misuse of color

• Too many colors
• Use of complementary colors
• Excessive saturation

• Inadequate contrast
• Inadequate attention to color impairment

No Blue on Red
No Red on Blue
28
Consistency and Standards

• Consistency implies a similar look, feel, and
  behavior across the various modules of a software
  product or across products
• Standards benefits
• Improves user ability to quickly learn an
  interface
• Enhances productivity, throughput, accuracy due
  to predictable behavior
• Reduces the number of design decisions to make
• Improves design and code reuse
• Standards risks
• Following standards that are poor or
  inappropriate
• Assuming that standards guide interaction (they
  only guide look and feel)

29
Consistency and Standards

• Standards are guidelines
• Sometimes you must bend the rules to best serve
  your users and their goals
• Or the goals of other stakeholders
• Obey standards unless there is a truly superior
  alternative
• Consistency doesnt imply rigidity

AXIOM
AXIOM
30
About Face 2.0
Section Two Designing Behavior and Form Part IV
Applying Visual Design Principles

• Chapter 19 Designing Look and Feel
• Chapter 20 Metaphors, Idioms, and Affordances

Next
31
Metaphors, Idioms, and Affordances

• Metaphors, especially physical and spatial
  metaphors, have an extremely limited place in the
  design of most information-age, software-enabled
  products
• Metaphors tie interfaces to the workings of the
  physical world
• There arent many good metaphors
• Metaphors do not scale well
• e.g., file folders when there are tens of
  thousands of files
• Metaphors are often difficult to recognize
• Metaphors do not cross cultural boundaries well

32
Interface Paradigms

• Implementation-centric interfaces
• Based on an understanding of how things work
• Metaphoric interfaces
• Based on intuiting how things work
• Idiomatic interfaces
• Based on learning how to accomplish things
• A natural, human process

Preferred
33
Implementation-Centric Interfaces

• Implementation-centric user interfaces are
  designed based exclusively on the implementation
  model
• One button per function, one dialog per module of
  code, commands and processes that reflect the
  internal data structures and algorithms
• The user must learn how the program works in
  order to successfully use the interface
• Users would rather be successful than
  knowledgeable
• A preference that is often hard for engineers to
  understand

AXIOM
34
Metaphoric Interfaces

• Metaphoric interfaces rely on intuitive
  connections that the user makes between the
  visual cues in an interface and its function
• Usually visual metaphors a picture used to
  represent the purpose or attributes of a thing
• Images on toolbar buttons to the entire screen
• Scissors on a Cut button to a full-screen
  checkbook in Quicken
• Again, metaphor-based interfaces are problematic
• Metaphors tie interfaces to the workings of the
  physical world
• There arent many good metaphors
• Metaphors do not scale well
• Metaphors are often difficult to recognize
• Metaphors do not cross cultural boundaries well
• Never bend your interface to fit a metaphor

AXIOM
35
The Success of the Mac

• The Apple Macintosh succeeded because
• It defined a tightly restricted but flexible
  vocabulary for users to communicate with
  applications, based on a very simple set of mouse
  actions
• It offered sophisticated direct manipulation of
  rich visual objects on the screen
• It used square pixels at high resolution,
  enabling screen output to match printed output
• Not because of a desktop metaphor

36
Idiomatic Interfaces

• Idiomatic design is based on the way we learn and
  use idioms
• Idiom a phrase or expression whose meaning
  cannot be understood from the ordinary meanings
  of the words in it
• How do you do? (Howdy? Fine!)
• I have caught cold
• The World Book Dictionary, 1971
• Idiomatic interfaces focus on learning simple,
  non-metaphorical visual and behavioral idioms to
  accomplish goals and tasks
• We understand the idiom simply because we have
  learned it and because it is distinctive

37
Idiomatic Interfaces (continued)

• Graphical interfaces are largely idiomatic
• Windows, title bars, close boxes, scroll bars,
  hyperlinks, drop-downs, etc. are things we learn
  idiomatically
• The mouse is an easily-learned idiom
• Scotty in Star Trek IV speaks into a mouse as the
  user interface idiom
• Toddlers can easily use a mouse
• All idioms must be learned good idioms need to
  be learned only once

AXIOM
38
Building Idioms Well-Formed Vocabularies
Idioms Application-specific commands and feedback
Delete, create, draw
Scrolling, sorting, dialogs
Compounds Generic input and output actions and
symbols
Edit fields, checkboxes, highlighting
Double-click, buttonclick, selection
Primitives Indivisible actions and feedback
mechanisms
Point, click, drag, keypress
Cursor, text
Output
Input

• Idioms combine and structure compounds using
  domain knowledge of the problem under
  consideration
• Open the vocabulary to the information in the
  problem domain
• In a GUI labels on visual elements

39
Manual Affordances

• Affordance the perceived and actual properties
  of the thing, primarily those fundamental
  properties that determine just how the thing
  could possibly be used Donald Norman, The
  Psychology of Everyday Things
• What is a pushbutton on the wall by the front
  door?
• A doorbell!
• Why?
• Because we learned it
• Because it looks pushable
• Things that say, push me, grab me, talk to
  me, etc.
• Intuitive to our tool-manipulating nature as
  humans
• What will happen when we push/pull, etc.?
• We learn it
• Image or text tells us
• But, with software, we cant predict based on
  mechanical inspection
• So it better do what we expect!

40
Homework