Transcript User interface design - Florida A&M University

User interface design
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 1
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.
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 2
Human factors in interface design

Limited short-term memory
•

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 can instantaneously remember about 7 items of
information. If you present more than this, they are more
liable to make mistakes.
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.
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 3
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.
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 4
Design principles

User familiarity
•

Consistency
•

The interface should be based on user-oriented
terms and concepts rather than computer concepts. For
example, 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 2004
Software Engineering, 7th edition. Chapter 16
Slide 5
Design principles

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. For example, some users have seeing
difficulties and so larger text should be available
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 6
Design issues in UIs

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 2004
Software Engineering, 7th edition. Chapter 16
Slide 7
Interaction styles





Direct manipulation
Menu selection
Form fill-in
Command language
Natural language
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 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
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 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
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 10
Web-based interfaces



Many web-based systems have interfaces
based on web forms.
Form field can be menus, free text input,
radio buttons, etc.
In the LIBSYS example, users make a
choice of where to search from a menu and
type the search phrase into a free text field.
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 11
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
©Ian Sommerville 2004
Yes
Reset
No
Can cel
Software Engineering, 7th edition. Chapter 16
Slide 12
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.
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 13
Web Application User Interface
Design Patterns
-
-
Software patterns are reusable solutions to recurring
problems that occur during software development
Software patterns provide developers with a
common vocabulary to discuss software
development problems
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 14
Web Application User Interface
Design Patterns
-
-
-
-
There are different kinds of software patterns. The
ones that started the pattern revolution and the most
well-known are called design patterns.
Design patterns are reusable class combinations
and algorithms for solving recurring design
problems.
The idea is to abstract the high level interactions
between objects and reuse their behaviors from
application to application
Writing code is easy. Figuring out what kind to write
is the challenge.
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 15
Web Application User Interface
Design Patterns
-
-
-
Model-View-Controller (MVC) is an example of a
design pattern.
Problem: How do you separate input, processing,
and output of an interactive application so that there
is minimal impact on the overall system if the input
mechanism changes or the output requirement
changes.
Solution: Separate the application into three
components: model, view, and controller.
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 16
Web Application User Interface
Design Patterns
Model-View-Controller
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 17
Web Application User Interface
Design Patterns
There are many design patterns:
Factory
Builder
Iterator
Mediator
*
*
*
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 18
Web Application User Interface
Design Patterns
A pattern typically has:
- The motivation or context that this pattern applies to.
- Prerequisites that should be satisfied before deciding to use a
pattern.
- A description of the program structure that the pattern will define.
- A list of the participants needed to complete a pattern.
- Consequences of using the pattern...both positive and negative.
- Examples
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 19
Web Application User Interface
Design Patterns
The notion of patterns has been applied to
various phases of the software life cycle –
analysis, design, testing– and has been applied
particular domains.
We will take a look at using patterns that have
been developed for user interaction for web
applications
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 20
Web Application User Interface
Design Patterns
The patterns we will use and discuss are
documented on the site
http://www.welie.com/patterns
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 21
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 22
©Ian Sommerville 2004
Software Engineering, 7th edition. Chapter 16
Slide 23