Transcript Prototyping - University of Texas at El Paso

Introduction: Human Computer
Interface Design
Adapted from: Sommerville, I. Software Engineering 8th
ed.. Reading, MA: Addison-Wesley Publishing Co., 2006
.
The User Interface
• User interfaces should be designed to match the skills,
experience and expectations of its anticipated users.
• System users often judge a system by its
interface rather than its functionality.
• A poorly designed interface can cause a user to make
catastrophic errors.
• Poor user interface design is the reason why so many
software systems are never used.
Human Factors
 Limited short-term memory
 People can instantaneously remember about 7 items of
information.
 If you present more than this, they are more liable to
make mistakes.
 People make mistakes
 When people make mistakes and systems go wrong,
 Inappropriate alarms and messages can increase stress
and hence the likelihood of more mistakes.
 People are different
 People have a wide range of physical capabilities.
 Designers should not just design for their own
capabilities.
 People have different interaction preferences
 Some like pictures, some like text.
1
2
http://www.dell.com/us/p/d/campaigns/tablet-comparison.aspx
Human Computer Interface Design
Requires:
 Creation of different models
 Understanding of human and computer oriented
tasks to achieve functionality
 Adherence to design issues and guidelines
 Understanding of user-system interaction
Principles of HCI Design:
Recognize the diversity-1
 Depict profile of end users
 age
 sex
 physical abilities
 education
 culture/ethnic backgrounds
 motivation and goals
 Identify tasks
 Use case scenarios
 Examine task frequencies (frequent should be simple)
 Determine interaction style
Principles of HCI Design:
Recognize the diversity-2
Types of Users
 Novice
 No syntactic knowledge
 Mechanism of interaction requires interface to be
effective with little sense of application
 Knowledgeable, intermittent users
 Reasonable semantic knowledge
 Low recall of syntactic information
 Knowledgeable, frequent user
 Good semantic and syntactic knowledge
 Wants shortcuts and abbreviated modes of operation
Principles of HCI Design:
Recognize the diversity-3
Tasks
 Understand task
 Identify real-world objects needed to
accomplish intentions
 Identify actions that will be applied to objects.
 Decompose objects and actions (individual
steps)
 Create metaphor representations of objects and
actions for interface
Principles of HCI Design:
Use rules of interface design.
 Strive for consistency.
 Enable frequent users to use shortcuts.
 Offer informative feedback.
 Design dialogs to yield closure.
 Permit reversal of actions.
 Reduce short-term memory load.
Principles of HCI Design:
Prevent errors.
 Correct matching pairs (put both in one stroke).
 Complete sequences (put in single action).
 Correct commands (automatic command
completion)
 Improve error messages
 Specific and constructive
 Positive in tone
Microsoft Money 2007 Home & Business
Types of Interfaces:
Direct Manipulation




Presents user with model of their information space
Users interact with direct actions
Examples: word processors, screen editors, forms
Advantages
 Users in control
 Learning time short
 Users get immediate feedback
 Disadvantages
 Not suited for casual use
 In some cases consumes more computer resources
Types of Interfaces:
Metaphor and Control Panel Models
 Metaphor helps define a consistent model
 Example: desktop metaphor
 Not suitable for complex applications
 Control panel
 Graphical representation of system commands
 Command icons that match menu command





Buttons (Print, Quit)
Switches
Indicators
Displays
Sliders
Types of Interfaces:
Menu Systems
 Users select one of a number of
possibilities
 Types: pull down or pop up
 Scrolling: Menu scrolls to display next
choice
 Hierarchical: Current menu is replaced by
next
 Walking: Form of hierarchical that creates
menu adjacent to it
 Associated control panels
Types of Interfaces:
Menu Systems
 Advantages
 No need to know command names
 Some user error prevented (disable invalid
choices)
 Context-dependent help can be provided
 Disadvantages
 Need to structure large menus
 May need time to understand menu choices
Types of Interfaces:
Command Line Interface
 User types command to system.
 Not suitable for casual or inexperienced users
 Advantages
 Interface can be made concise with little typing
 Can be combined with other approaches
 Disadvantages
 Need to learn command language
 Errors can be introduced
Summary: Interaction styles
Interaction
style
Main advantages
Main disadvantages
Application
examples
Direct
manipulation
Fast and intuitive
interaction
Easy to learn
May be hard to implement.
Only suitable where there is a
visual metaphor for tasks and
objects.
Video games
CAD systems
Menu
selection
Avoids user error
Little typing required
Slow for experienced users.
Can become complex if many
menu options.
Most generalpurpose systems
Form fill-in
Simple data entry
Easy to learn
Checkable
Takes up a lot of screen space.
Causes problems where user
options do not match the form
fields.
Stock control,
Personal loan
processing
Command
language
Powerful and flexible
Hard to learn.
Poor error management.
Operating systems,
Command and
control systems
Natural
language
Accessible to casual
users
Easily extended
Requires more typing.
Natural language understanding
systems are unreliable.
Information
retrieval systems
Information Presentation
• Static information
 Initialized at the beginning of a session. It does not
change during the session.
 May be either numeric or textual.
• Dynamic information
 Changes during a session and the changes must be
communicated to the system user.
 May be either numeric or textual.
Information Display Factors
 Is the user interested in precise information or




data relationships?
How quickly do information values change?
 Must the change be indicated immediately?
Must the user take some action in response to
a change?
Is there a direct manipulation interface?
Is the information textual or numeric?
 Are relative values important?
Analog or Digital Presentation?
• Digital presentation
 Compact - takes up little screen space;
 Precise values can be communicated.
• Analog presentation
 Easier to get an 'at a glance' impression of a
value;
 Possible to show relative values;
 Easier to see exceptional data values.
Presentation Methods
1
4
0
2
10
3
Dial with need le
Pie char t
Th er mometer
Horizo ntal b ar
20
Data Visualization
• Concerned with techniques for displaying large amounts of
information.
• Visualization can reveal relationships between entities and
trends in the data.
• Possible data visualizations are:
 Weather information collected from a number of
sources;
 The state of a telephone network as a linked set of nodes;
 Chemical plant visualized by showing pressures and
temperatures in a linked set of tanks and pipes;
 A model of a molecule displayed in 3 dimensions;
 Web pages displayed as a hyperbolic tree.
Information Presentation: Color
 Limit number of colors on screen (no more than 4)
 Use color to support user’s task
 Highlight anomalies
 Highlight similarities
 Highlight change in status
 Color communicates meaning (know users)
 Driver: Red=stop; Chemist: Red=hot
 Be aware of color blindness: 10% of males
 Avoid bad pairings.
If you can
 Use color in a consistent fashion.
read
this you are my
hero!!!
Information Presentation: Error
Messages
 Context: Keep system aware of what user is doing
 Experience: allow user to control detail in message
 Skill level
 Message for a novice is different than the message for
experienced user
 Include terminology familiar to user
 Style
 Positive and not negative
 Active rather than passive
 Professional
 Culture differences
ERROR!
 Error #27: invalid patient ID.
Error
Patient Joe Hernandez is not registered.
Click on Patient for a list of registered patients.
Click on Retry to re-enter information.
Click on Help for more information.
User Interface Design Principles
Principle
Description
User familiarity
The interface should use terms and concepts which are drawn
from the experience of the people who will make most use of the
system.
Consistency
The interface should be consistent in that, wherever possible,
comparable operations should be activated in the same way.
Minimal surprise
Users should never be surprised by the behaviour of a system.
Recoverability
The interface should include mechanisms to allow users to
recover from errors.
User guidance
The interface should provide meaningful feedback when errors
occur and provide context-sensitive user help facilities.
User diversity
The interface should provide appropriate interaction facilities for
different types of system user.
Other Considerations
 Learnability
 How long will it take a user to become productive?
 Speed of operations
 How well does the system response match the user’s work
practice?
 Robustness
 How tolerant is the system of user error?
 Adaptability
 How closely is the system tied to a single model of work?
The UI Design Process
• UI design is an iterative process involving close
liaisons between users and designers.
• The 3 core activities in this process are:
 User analysis. Understand what the users will do
with the system;
 System prototyping. Develop a series of prototypes
for experiment;
 Interface evaluation. Experiment with these
prototypes with users.
The Design Process
User Analysis
• If you don’t understand what the users want to do with
a system, you have no realistic prospect of designing an
effective interface.
• User analyses have to be described in terms that users
and other designers can understand.
• Scenarios where you describe typical episodes of use,
are one way of describing these analyses.
What is a Prototype?
 Views of prototype
 A model that presents an interface of system
 A “working” model with limited functionality
 Purpose
 Understand and elicit requirements
 Verify and validate
 Requirements
 Designs
 Technology
 Involve customers and assist in communication
 Reduce risk
Other Reasons
 Verify an algorithm will work.
 Verify an interface will be usable.
 Experiment with alternate approaches.
 Understand uncertain system functions.
 Evaluate time and memory requirements.
Prototype Approaches
 Approaches
 Pen and paper
 Storyboards
 PICTIVE (Michael Muller)
 Users participate in construction of their own storyboard



Poster board
Construction paper
Sticky notes
 Scenarios
 Videos
 Support
 High-level languages (Lisp, Prolog, Visual Basic)
 Database (4GLs, SQL, report generators)
 Components (Swing, AWT, Python)
 Tools (JBuilder)
Hints on HCI Prototype
 Avoid making interface look too slick.
 Customers reluctant to suggest changes
 Customers will think it’s finished
 Do not impose your view of an acceptable
user interface on users.
Soon to Come Assignment
 Identify tasks and actions
 Define comprehensible mental image
(metaphor)
 Create appropriate organization of data,
functions, tasks and roles
 Be attentive to efficient navigation among
these data, functions, tasks and roles
 Pay attention to quality appearance (the look)
and effective interaction sequencing (the feel)
 Create a paper or powerpoint prototype
All GUI examples taken from:
 http://www.buigallery.com