User interface design


Designing effective interfaces for software
systems
Objectives
•
•
•
•
To suggest some general design principles for user
interface design
To explain different interaction styles
To introduce styles of information presentation
To introduce usability attributes and system
approaches to system evaluation
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 1
The user interface





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
Most users of business systems interact with these
systems through graphical user interfaces (GUIs)
In some cases, legacy text-based interfaces are
still used
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 2
GUI characteristics
Characteristic
Windows
Icons
Menus
Pointing
Graphics
©Ian Sommerville 2000
Description
Multiple windows allow different information to be
displayed simultaneously on the user’s screen.
Icons different types of information.
On some systems,
icons represent files; on others, icons
represent
processes.
Commands are selected from a menu rather than
typed
in a command language.
A pointing device such as a mouse is
used for selecting
choices from a menu or indicating items of interest
in a
window.
Graphical elements can be mixed with text
on the same
display.
Software Engineering, 6th edition. Chapter 15
Slide 3
GUI advantages

They are easy to learn and use.
•

The user may switch quickly from one task to
another and can interact with several different
applications.
•

Users without experience can learn to use the system
quickly.
Information remains visible in its own window when
attention is switched.
Fast, full-screen interaction is possible with
immediate access to anywhere on the screen
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 4
User interface design process
An aly se and
u nd ers tan d us er
acti vi ti es
P ro du ce pap erb as ed des ig n
p ro to ty pe
Des ig n
p ro to ty pe
Ev al uate d esig n
wi th en d-us ers
P rodu ce
dy nami c desig n
pro tot ype
Ex ecut abl e
p ro to ty pe
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Ev al uate d esig n
wi th en d-us ers
Im pl em ent
fin al us er
i nt erface
Slide 5
UI design principles

User familiarity
•
•

Consistency
•
•

The interface should be based on user-oriented terms and concepts
rather than computer concepts
E.g., an office system should use concepts such as letters, documents,
folders etc. rather than directories, file identifiers, etc.
The system should display an appropriate level of consistency
Commands and menus should have the same format, command
punctuation should be similar, etc.
Minimal surprise
•
If a command operates in a known way, the user should be able to
predict the operation of comparable commands
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 6
UI design principles (cont.)

Recoverability
•
•

User guidance
•

The system should provide some resilience to user errors and allow
the user to recover from errors
This might include an undo facility, confirmation of destructive
actions, 'soft' deletes, etc.
Some user guidance such as help systems, on-line manuals, etc.
should be supplied
User diversity
•
•
Interaction facilities for different types of user should be supported
E.g., some users have seeing difficulties and so larger text should be
available
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 7
User-system interaction

Two problems must be addressed in interactive
systems design
•
•

How should information from the user be provided to the
computer system?
How should information from the computer system be presented
to the user?
User interaction and information presentation
may be integrated through a coherent framework
such as a user interface metaphor
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 8
Interaction styles

Direct manipulation
•
•

Menu selection
•
•

Ease of use, simple data entry
Tedious, takes a lot of screen space
Command language
•
•

User effort and errors minimized
Large numbers and combinations of choices a problem
Form fill-in
•
•

Easiest to grasp with immediate feedback
Difficult to program
Easy to program and process
Difficult to master for casual users
Natural language
•
•
Great for casual users
Tedious for expert users
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 9
Information presentation



Information presentation is concerned with presenting
system information to system users
The information may be presented directly or may be
transformed in some way for presentation
The Model-View-Controller approach is a way of
supporting multiple presentations of data
Info rm at io n t o
b e di sp lay ed
©Ian Sommerville 2000
P resen tati on
s oft ware
Software Engineering, 6th edition. Chapter 15
Di s pl ay
Slide 10
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?
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 11
Analog vs. 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
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 12
Alternative information presentations
Jan
2 84 2
F eb
2 85 1
M ar
3 16 4
Jan
F eb
M ar
Ap ri l
2 78 9
M ay
1 27 3
Ju ne
2 83 5
M ay
Ju ne
4 00 0
3 00 0
2 00 0
1 00 0
0
©Ian Sommerville 2000
Ap ri l
Software Engineering, 6th edition. Chapter 15
Slide 13
Information display
1
4
0
2
10
20
3
Di al wi th need le
©Ian Sommerville 2000
P i e chart
Th erm o m et er
Software Engineering, 6th edition. Chapter 15
Ho rizo nt al bar
Slide 14
Displaying relative values
Press u re
0
1 00
©Ian Sommerville 2000
2 00
Temp er a tu re
3 00
4 00
0
25
Software Engineering, 6th edition. Chapter 15
50
75
1 00
Slide 15
Textual highlighting
!
T h e fi len a me y o u h ave ch o sen h as b een
u s ed . P lea se ch o os e an oth er n a me
C h . 1 6 U ser i nt erface d esi gn
OK
©Ian Sommerville 2000
Ca n cel
Software Engineering, 6th edition. Chapter 15
Slide 16
Data visualisation



Concerned with techniques for displaying large
amounts of information
Visualisation can reveal relationships between
entities and trends in the data
Possible data visualisations are:
•
•
•
•
•
Weather information
State of a telephone network
Chemical plant pressures and temperatures
A model of a molecule
Hyperweb
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 17
Colour displays



Colour adds an extra dimension to an interface
and can help the user understand complex
information structures
Can be used to highlight exceptional events
What are some common mistakes in the use of
colour?
•
•
The use of colour to communicate meaning
Over-use of colour in the display
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 18
Error messages



Error message design is critically important.
Poor error messages can mean that a user
rejects rather than accepts a system
Messages should be polite, concise, consistent
and constructive
The background and experience of users
should be the determining factor in message
design
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 19
Nurse input of a patient’s name
Please type the patient name inthe bo
Bates
x thenc
lic k onOK
,J .
OK
©Ian Sommerville 2000
Cancel
Software Engineering, 6th edition. Chapter 15
Slide 20
System and user-oriented error messages
Sys te m- or ie nt ed e rro r me ss ag e
Err or #27
?
In valid patient id enter ed
OK
Us er- orie nt ed e rror m e ss ag e
Patie nt J
. Bat es is n ot reg iste red
Clic konP atientsf
ora lis tof regis tered patients
Clic k on Retr y to r e-input a patient name
Clic k on Help f or mor e inf or mation
Cancel
Patie nt s
©Ian Sommerville 2000
He lp
Software Engineering, 6th edition. Chapter 15
Re tr y
Cancel
Slide 21
User interface evaluation




Some evaluation of a user interface design
should be carried out to assess its suitability
Full scale evaluation is very expensive and
impractical for most systems
Ideally, an interface should be evaluated against a
usability specification
However, it is rare for such specifications to be
produced
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 22
Usability attributes
Attribute
Learnability
Speed of operation
Robustness
Recoverability
Adaptability
©Ian Sommerville 2000
Description
How long does it take a new user
to
become productive with the system?
How well does the system
response match
the user’s work practice?
How tolerant is the system of user error?
How good is the
system at recovering from
user errors?
How closely is the system tied to a
single
model of work?
Software Engineering, 6th edition. Chapter 15
Slide 23
Simple evaluation techniques




Questionnaires for user feedback
Video recording of system use and subsequent
tape evaluation.
Instrumentation of code to collect information
about facility use and user errors.
The provision of a “gripe” button for on-line user
feedback.
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 24
Key points




Interface design should be user-centred. An
interface should be logical and consistent and
help users recover from errors
Interaction styles include direct manipulation,
menu systems form fill-in, command languages,
and natural language
Graphical displays should be used to present
trends and approximate values. Digital displays
when precision is required
Colour should be used sparingly and consistently
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 25
Key points


Ideally, a user interface should be evaluated
against a usability specification
What about help for the user?
•
•
Systems should provide on-line help. This should include “help,
I’m in trouble” and “help, I want information”
A range of different types of user documents should be provided
©Ian Sommerville 2000
Software Engineering, 6th edition. Chapter 15
Slide 26
Descargar

User interface design - Center for Systems and Software