Transcript User Interface Design

Software Engineering
Chapter 16
User Interface Design
Ku-Yaw Chang
[email protected]
Assistant Professor
Department of Computer Science and Information Engineering
Da-Yeh University
Objectives
Understand a number of user interface design principles
Have been introduced to several interaction styles and
understand when these are most appropriate
Understand when to use graphical and textural
presentation of information
Know what is involved in the principal activities in the
user interface design process
Understand usability attributes and have been
introduced to different approaches to interface evaluation
Ku-Yaw Chang
User Interface Design
2
Preamble
Software engineers often take responsibility for
user interface design

Only large organizations employ specialist interface
designers
Focus on the design process for user interfaces

Graphical user interfaces
Ku-Yaw Chang
User Interface Design
3
Preamble
Take into account the physical and mental
capabilities of the people

People have a limited short-term memory
Seven items of information

People make mistakes
Warning messages and alarms put more stress on users

People have a diverse range of physical capabilities
See better / color-blind

People have different interaction preferences
Pictures or text
Ku-Yaw Chang
User Interface Design
4
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.
Ku-Yaw Chang
User Interface Design
5
Contents
16.1 Design issues
16.2 The UI design process
16.3 User analysis
16.4 User interface prototyping
16.5 Interface evaluation
Ku-Yaw Chang
User Interface Design
6
Design Issues
Two key questions


How should the user interact with the computer
system?
How should information from the computer system be
presented to the user?
Ku-Yaw Chang
User Interface Design
7
User Interaction
User interaction

Issue commands and associated data to the
computer system
Five primary styles





Direct manipulation
Menu selection
Form fill-in
Command language
Natural language
Ku-Yaw Chang
User Interface Design
8
Interaction Styles
In te raction
style
Mai n advan tages
Mai n di sadvan tages
Appl ication
e xam ple s
Direct
manipulat ion
Fast and intuit ive
interact ion
Easy to learn
May be hard to implement.
Only suitable where there is a
visual metaphor for tasks and
object s.
Video games
CAD systems
Menu
select ion
Avoids user error
Lit t le typing required
Slow for experienced users.
Can become complex if many
menu options.
Most generalpurpose systems
Form fill-in
Simple data ent ry
Easy to learn
Checkable
Takes up a lot of screen space.
Causes problems where user
opt ions do not match the form
fields.
Stock control,
Personal loan
processing
Command
language
Powerful and flexible
Hard to learn.
Poor error management .
Operat ing systems,
Command and
cont rol systems
Natural
language
Accessible to casual
users
Easily extended
Requires more typing.
Natural language understanding
systems are unreliable.
Informat ion
retrieval systems
Ku-Yaw Chang
User Interface Design
9
Multiple User Interfaces
Unix s hell
in ter face
(k sh /cs h)
Grap hical us er
in ter face
(Gno me/KDE)
Command
lang ua g e
in terpreter
X-wind ows GUI
man a g er
Linu x op eratin g sy stem
Ku-Yaw Chang
User Interface Design
10
LIBSYS Search Form
LIBSYS: Sea rch
Cho os e collectio n
All
Key word o r p hrase
Search us in g
Title
Adjacent wo rd s
Search
Ku-Yaw Chang
Yes
Reset
No
Can cel
User Interface Design
11
Information Presentation
A good design guideline

To keep the software required for information
presentation separate from the information
itself
Ku-Yaw Chang
User Interface Design
12
Information Presentation
Ku-Yaw Chang
User Interface Design
13
Model-View-Controller
Ku-Yaw Chang
User Interface Design
14
Alternative Information Presentations
Jan
2 8 42
Feb
28 51
Mar
3 16 4
Ap ril
2 78 9
May
12 73
Ju ne
2 83 5
Feb
Mar
Ap ril
May
Ju ne
4000
30 00
2 0 00
1 0 00
0
Jan
Ku-Yaw Chang
User Interface Design
15
Presentation Methods
1
4
0
2
10
20
3
Dial with need le
Ku-Yaw Chang
Pie char t
Th er mometer
User Interface Design
Horizo ntal b ar
16
Displaying Relative Values
Pres su r e
0
Ku-Yaw Chang
100
20 0
Temp er atur e
30 0
4 00
0
User Interface Design
25
50
75
10 0
17
Design Factors in Message Wording
Factor
Description
Context
Wherever possible, the messages generated by the system should reflect the current
user context. As far as is possible, the system should be aware of what the user is doing
and should generate messages that are relevant to their current activity.
Experience
As u sers become familiar with a s ystem they become irritated by long, ŌmeaningfulÕ
messages. However, beginners find it difficult to understand short terse statements of a
problem. You should provide both types of me ssage and allow the user to control
message conciseness.
Skill level
Messages should be tailored to the userÕsskills as well as t heir experience. Messages
for the diff erent classes of user may be ex pressed in different ways depending on the
termi nology that is familiar to the reader.
Style
Messages should be positive rather than negative. They should use the active rather
than the passive mo de of address. They should never be insulting or try to be funny.
Culture
Wherever possible, the designer of messages should be familiar with the culture of the
country where the system is sold. There are distinct cultural diff erences between
Europe, Asia and America. A suitable message for one culture might be unacceptable
in another.
Ku-Yaw Chang
User Interface Design
18
Color Displays
Color adds an extra dimension to an
interface and can help the user
understand complex information structures.
Color can be used to highlight exceptional
events.
Common mistakes in the use of color in
interface design include:


The use of color to communicate meaning;
The over-use of color in the display.
Ku-Yaw Chang
User Interface Design
19
Color Use Guidelines
Limit the number of colors used and be conservative in
their use.


4 to 5 in a window
7 in a system interface
Use color change to show a change in system status.
Use color coding to support the task that users are trying
to perform.
Use color coding in a thoughtful and consistent way.
Be careful about color pairings.

Red and blue
Ku-Yaw Chang
User Interface Design
20
User Error
Assume that a nurse misspells the name of a
patient whose records he is trying to retrieve.
Please typ e the p atien t’s name in th e bo
x th en c lick on OK
Patien t’s n ame
MacDo nald , R.
OK
Ku-Yaw Chang
Can cel
User Interface Design
21
Good and Bad Message Design
Ku-Yaw Chang
User Interface Design
22
Contents
16.1 Design issues
16.2 The UI design process
16.3 User analysis
16.4 User interface prototyping
16.5 Interface evaluation
Ku-Yaw Chang
User Interface Design
23
The UI Design Process
An interactive process

User interact with designers and interface prototypes
Three core activities

User analysis
An understanding of the tasks that users do, their working
environment, how they interact with other people and so on

System prototyping
The evolution of the interface

Interface evaluation
Collect information about users’ actual experience
Ku-Yaw Chang
User Interface Design
24
UI Design Process
Ku-Yaw Chang
User Interface Design
25
Contents
16.1 Design issues
16.2 The UI design process
16.3 User analysis
16.4 User interface prototyping
16.5 Interface evaluation
Ku-Yaw Chang
User Interface Design
26
Analysis Techniques
Task analysis

Models the steps involved in completing a task.
Interviewing and questionnaires

Asks the users about the work they do.
Ethnography

Observes the user at work
Ku-Yaw Chang
User Interface Design
27
Hierarchical Task Analysis
Retriev e p ictures
from remo te
libraries
do 1, 2,
3 un til pictu res fo u nd , 4
1
Discov er
p oss ib le
so urces
2
Establish
search
terms
3
Search fo r
p ictu res
4.
Req uest
p ho tocop ies
of found items
d o 3 .1 , 3 .2,
3 .3 un til pictu res fo un d,
3 .4 if n ecess ary , 3.5
3 .1
Select
library
3 .2
Log in to
catalog ue
3 .3
Search fo r
p ictu res
3 .4
Mod ify
search terms
3 .5 Reco rd
relev an t
items
d o 3 .3 .1, 3. 3. 2, 3.3 .3
3 .3. 1
Enter search
terms
Ku-Yaw Chang
3 .3. 2
In itiate
search
3 .3. 3
Rev iew
resu lts
User Interface Design
28
Hierarchical Task Analysis
A high-level task is broken down into subtasks
Advantage

Force you to consider each of the tasks and to decide
whether these should be decomposed
Problem

Best suited to sequential processes only
Ku-Yaw Chang
User Interface Design
29
Contents
16.1 Design issues
16.2 The UI design process
16.3 User analysis
16.4 User interface prototyping
16.5 Interface evaluation
Ku-Yaw Chang
User Interface Design
30
User Interface Prototyping
Aim


Allow users to gain direct experience with the
interface
Judge the usability of an interface
A two-stage process


Early in the process, paper prototypes may be used;
The design is then refined and increasingly
sophisticated automated prototypes are then
developed.
Ku-Yaw Chang
User Interface Design
31
Prototyping Techniques
Script-driven approach

Develop a set of scripts and screens using a tool such
as Macromedia Director. When the user interacts with
these, the screen changes to the next display.
Visual programming languages

Use a language designed for rapid development such
as Visual Basic
Internet-based prototyping

Use a web browser and associated scripts.
Ku-Yaw Chang
User Interface Design
32
Contents
16.1 Design issues
16.2 The UI design process
16.3 User analysis
16.4 User interface prototyping
16.5 Interface evaluation
Ku-Yaw Chang
User Interface Design
33
Usability attributes
Attribute
Description
Learnability
How long does it take a new user to become productive with
the system?
Speed of operation
How well does the system response match the user’s work
practice?
Robustness
How tolerant is the system of user error?
Recoverability
How good is the system at recovering from user errors?
Adaptability
How closely is the system tied to a single model of work?
Ku-Yaw Chang
User Interface Design
34
The End