COMP 388/441 HCI: 09 - Balancing Function and Fashion

09 - Balancing Function
and Fashion
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Lecture 09 - Overview

 “This lecture deals with five design matters that are

functional issues [...] but also leave room for varying
styles to suite a variety of users.”

1. Error Messages
2. Nonanthropomorphic Design
3. Display Design
4. Window Design
5. Color
COMP 388/441 HCI: 09 - Balancing Function and Fashion

Error Messages
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Error Messages
Overview
 User experience with computer-system prompts,
explanations, error diagnostics, and warnings is crucial
in influencing acceptance of SW systems
 Why do errors occur?
Lack of knowledge, incorrect understanding, inadequate slips
 What is the consequence?
Users are likely to be confused, are anxious or feel inadequate
 What is a solution?
Make error messages as user-friendly as possible; this is
especially important for novice users as they commonly have a
lack of knowledge, confidence, and are sometimes easily
frustrated or discouraged
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Error Messages
Improving Error Messages

 Measure where errors occur frequently, focus

on these issues
 Improve messages but also revise error
handling procedures, improve documentation
and training manuals, change permissible
actions, etc.
 All error messages should be reviewed by
peers, managers, should be tested empirically,
and be included in user manuals
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Error Messages
Guidelines
 Product
 Be as specific and precise as possible
 Be constructive: Indicate what the user needs to do
 Use a positive tone: Avoid condemnation
 Choose user centered phrasing
 Consider multiple levels of messages
 Maintain consistent grammatical forms, terminology, and abbreviations
 Maintain consistent visual format and placement
 Process
 Increase attention to message design
 Establish quality control
 Develop guidelines
 Carry out usability tests
 Record the frequency of occurrence for each message
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Error Messages
Examples - 1/2
 Specificity
 Avoid being too general (e.g., “Syntax Error”)
 This makes it difficult to understand what went wrong and how
it can be fixed
 Constructive Guidance and Tone
 Avoid hostile messages and violent terminology
 Do not only focus about what went wrong (give guidance)
 Eliminate negative words (e.g., error, illegal, fatal, bad,
catastrophic)
 Options for guidance: Automatic error correction, present
possible alternatives, avoid errors from occurring
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Error Messages
Examples - 2/2
 User Centered Phrasing
 User initiates more than responds
 Avoid negative and condemning tone
 Be brief but provide more information if needed
 Appropriate Physical Format
 Upper vs. lower case: Use “all upper case” only in specific
situations
 Never use code numbers or, if you must, place them at the end
of the message or hide them from users that can not deal with
the codes
 Sound may be important if there is a chance that something will
otherwise be overlooked; however, be always careful with
using sound
COMP 388/441 HCI: 09 - Balancing Function and Fashion

Nonanthropomorphic
Design
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Nonanthropomorphic Design
Overview

 Deals with conversational messages between

humans and computers
 Meaningful design of such dialogs is crucial to
create comprehensible, predictable and
controllable interfaces
 Questions: Why not let computers talk as they
were people, appear as being intelligent,
human, emotional, autonomous?
Controversy: appealing, productive vs. deceptive,
confusing, misleading, ...
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Nonanthropomorphic Design
Arguments for Nonanthropomorphic Design

 People feel disillusionment, distrust computers

if they can not live up to their expectations
 Clarification of the difference between humans
and computers. Can we blame the computer?
 People feel less responsible for their
actions/performance if they interact with an
anthropomorphic interface
 Distraction from the actual task
 Anxiety, which leads to less accuracy in task
performance
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Nonanthropomorphic Design
Guidelines
 Be cautious in presenting computers as people, either
with synthesized or cartoon characters
 Use appropriate humans for audio or video
introductions or guides
 Use cartoon characters in games or children’s software,
but usually not elsewhere
 Provide user-centered overviews for orientation and
closure
 Do not use “I” when the computer response to human
action
 Use “you” to guide users, or just state facts
COMP 388/441 HCI: 09 - Balancing Function and Fashion

Display Design
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Display Design
Overview
 Deals with layout of information on the display
 Goal: Avoid clutter, reduce search time, increase subjective
satisfaction
 Task performance goes up!
 For most interactive systems the display is key
component of successful design
 General rule: Always start with task analysis without
consideration of display size
 Consider:
 Provide all necessary data in a proper sequence to carry out
the task
 Meaningful grouping of items (with labels suitable to users’
knowledge)
 Use consistent sequences of groups and orderly formats
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Display Design
Example Guidelines
 Ensure that any data 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 the users convert displayed data
 Maintain a consistent format, for any particular type
of data display, from one display to another
 Use short, simple sentences
 Ensure that labels are sufficiently close to their data
fields to indicate association, yet are separated at
least by one space
 ... more on page 491, Box 12.3
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Display Design
Example Principles
1. Elegance and simplicity: Unity, refinement and
fitness
2. Scale, contrast, and proportion: Clarity, harmony,
activity, restraint
3. Organization and visual structure: Grouping,
hierarchy, relationship, balance
4. Style: Distinctiveness, integrity, comprehensiveness,
appropriateness
5. ...
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Display Design
Some specific guidelines for web-based design

 These examples of guidelines are based on

studies:
 Use a columnar organization
 Limit the use of animated graphical adds
 Average link text: 2-3 words
 Use Sans-Serif fonts
 Vary colors to highlight text and headings
COMP 388/441 HCI: 09 - Balancing Function and Fashion

Window Design
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Window Design
Overview
 For many tasks it is required to deal with multiple
documents, windows, forms
 Problem: There is a limit of how many of such
documents etc. can be displayed simultaneously
 Goal: Offer sufficient information and flexibility to
accomplish the task while reducing window
housekeeping actions and minimizing distracting
clutter
 This leads to users being able to complete their
task more rapidly and most likely with fewer
mistakes
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Window Design
More concrete
 How to coordinate multiple windows?
 Synchronized scrolling: One scrollbar (window 1) is
connected to another scrollbar (window 2); enables, for
instance, simultaneous document review
 Hierarchical browsing (e.g., Windows Explorer)
 Opening/closing of dependent windows
 Saving/opening of window state
 Image Browsing
 Good example: Google Maps!
COMP 388/441 HCI: 09 - Balancing Function and Fashion

Color
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Color
Overview
 The use of colors can be highly influential in regard to
the acceptance of interfaces. With the high-resolution
color display that are available and common today, this
brings challenges for the designer
 Influence of color:
 Soothes or strikes the eye
 Adds accents to an uninteresting display
 Facilitates subtle discrimination in complex displays
 Emphasizes the logical organization of information
 Draws attention to warning
 Evokes string emotional reactions of joy, excitement, fear,
or anger
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

Color
Guidelines for alphanumeric displays, spreadsheets, graphs, ...
 Use color conservatively
 Limit the number of colors
 Recognize the power of color as a coding technique
 Ensure that color coding supports the task
 Have color coding appear with minimal user effort
 Place color coding under user control
 Design for monochrome first
 Consider the needs of color-deficient users
 Use color to help in formatting
 Be consistent in color coding
 Be alert to common expectations about color codes
 Be alert to problems with color pairings
 Use color changes to indicate status changes
 Use color in graphic displays for greater information density
 COMP 388/441 HCI: 09 - Balancing Function and Fashion

The End

Questions?