Lecture 9 - UI Design

CS 3022
User Interface Design

Lecture 9
Shahani Markus Weerawarana
Ian Sommerville 2004
Software Engineering Dr. S. M. Weerawarana
Objectives
To suggest some general design principles for user

interface design
To explain good design practices and bad design
practices
To introduce some basic GUI design elements
To explain different interaction styles and their uses
Overview
Introduction to usability
User interface design principles
Graphical user interface elements
User interface interaction styles
Interactive Systems Design
Two aspects 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?
Usability
and
User Centered Design
What is Usability?
The effectiveness, efficiency, and
satisfaction with which specified users
can achieve specified goals in
particular environments.
ISO 9241 usability definition
Why is Usability Important?
1. The fate of
the world
2. The Apple
iPhone
1. The Fate of the World

The 2001 Florida Ballot Incident
Bush won Florida by a 537-vote margin in official results
The Florida Ballot
5,330 Palm Beach County residents invalidated their ballots by

punching for Gore and Reform Party candidate Pat Buchanan.
Almost half of them were 65 or older and Democrats.
End Result of the Poor Ballot Design!
Why is Usability Important?
2.
1. The
TheApple
fate of
the
iPhone
world
10
2. The Apple iPhone
11
Focus on Usability and Design
12
The Implications of Usability
13
Usability vs. Specification

Initiation
Requirement
We design the user

interface here
Specification
Architecture & Design
Implementation
Testing
We test them here
Is it too late?
14
User Centered Design

Initiation
Requirement
Specification
UI Design + Testing
Architecture & Design

Implementation
Testing
15
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.
16
Overview
17
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.
18
People Are Different...
19
People Have Different Interaction Preferences...
Paper plane - origami folding instructions :

Fold the sheet in half along the line and then
open it out again
Fold the two top corners in to the center line
Then fold the top large triangle over so that
the two flaps formed in step 2 are
underneath the large triangle
Fold the two top corners into the center line
again
Fold the small triangle up over the two flaps
Fold along the center line so that the small
triangle is on the underside of the plane on
the outside along with the two flap
Fold along the line then turn the plane over
and do the same to the other side
and your airplane Done!
20
UI Design Principles
UI design must take account of the needs,

experience and capabilities of the system users.
Designers should be aware of peoples physical
and mental limitations (e.g. limited short-term
memory) and should recognize that people make
mistakes.
UI design principles underlie interface designs
although not all principles are applicable to all
designs.
21
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.
22
User Familiarity
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.
Examples:
Kalzium
Google Earth
iPod Touch Album Selection
World Cup Cricket Schedule at CricBuzz -
http://www.cricbuzz.com/cricket-schedule/series/228/icc-world-cup-2011
23
Kalzium
24
Google Earth
25
Album Selection on Multi-Touch Mobiles
26
User Familiarity
User familiarity can be used to seamlessly correct

user interface errors in future versions
Example:
Correction of Start menu of Windows in future
versions
27
28
29
User Familiarity
User familiarity can be used to introduce users to

similar products
Examples:
Making new users comfortable with Linux Desktops

(and then showing them the additional
features/power)
Portable Apps
30
A Linux Desktop similar to Windows
31
Portable Apps similar to Windows Menu
32
Consistency
The system should display an appropriate level of

consistency.
Commands and menus should have the same format,
command punctuation should be similar, etc.
Example:
Microsoft Office Product Suite
33
MS Office 2007: Ribbon UI Pattern
34
Minimal Surprise
Recoverability
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.
User Guidance
If a command operates in a known way, the user should be

able to predict the operation of comparable commands.
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 are visually impaired, and
therefore larger text should be available
35
Sri Lanka Country Portal Interface
Video
http://www.youtube.com/watch?v=6rlHmE7KzT4
36
Overview
37
GUI Components: Simple Input

Text field
Button
Enter Text
Text area
Enter Lots of text
Click to Submit
Link
Link 1, link 2, link 3
What is the type of information received by each input field?

Whats the effect?
Intro | UI Design | Usability | User-centered
38
Simple GUI components: Choosers

Combo box
Slider
Choose one
Radio button
Checkbox
Option 1
Option 1
Option 2
Option 2
What is the difference between a radio button and a check

box?
What is the choice domain and the choice range of each
component?
39
Larger Constructs
Pages
(in Web-based systems)
Windows
(in Desktop-based systems)
40
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.
41
Color Use Guidelines
Limit the number of colors used and be

conservative in their use.
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.
42
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.
43
Best Practices & Bad Practices
User Interface Hall of Fame
http://homepage.mac.com/bradster/iarchitect/fame.htm
User Interface Hall of Shame
http://homepage.mac.com/bradster/iarchitect/shame.htm
44
Overview
45
Well Known Interaction Styles
Command Line
Interface (CLI)
Graphical User
Interface (GUI)
Intro | UI Design
Ian Sommerville
2004 | Usability | User-centered
Voice Activated
Interface
46
Touch Interaction Style
47
Multi-Touch Interaction Style
48
Motion Based Interaction Style
49
Gesture Based Interaction Style
50
Multi-Touch Surfaces
Microsoft Surface
Video
http://www.youtube.com/watch?v=rKgU6ubBgJA
51
Wearable Gestural Interface
Pranav Mistry: Sixth Sense at TED India

Video
http://www.youtube.com/watch?v=YrtANPtnhyg
52
Innovations
SPARSH
Video
http://www.youtube.com/watch?v=58bjJKCQMgE
53

Lecture 9 - UI Design

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Lecture 9 - UI Design

Загружено:

Авторское право:

Доступные форматы

CS 3022

User Interface Design

Shahani Markus Weerawarana

Ian Sommerville 2004

Software Engineering Dr. S. M. Weerawarana

To suggest some general design principles for user

Ian Sommerville 2004

Software Engineering Dr. S. M. Weerawarana

Ian Sommerville 2004

Software Engineering Dr. S. M. Weerawarana

Interactive Systems Design

Two aspects must be addressed in interactive

How should information from the user be provided

Software Engineering Dr. S. M. Weerawarana

Why is Usability Important?

1. The Fate of the World

Bush won Florida by a 537-vote margin in official results

The Florida Ballot

5,330 Palm Beach County residents invalidated their ballots by

End Result of the Poor Ballot Design!

Why is Usability Important?

2. The Apple iPhone

Focus on Usability and Design

The Implications of Usability

Usability vs. Specification

We design the user

We test them here

User Centered Design

Architecture & Design

The User Interface

User interfaces should be designed to match the

Ian Sommerville 2004

Software Engineering Dr. S. M. Weerawarana

Ian Sommerville 2004

Software Engineering Dr. S. M. Weerawarana

Human Factors in Interface Design

Limited short-term memory

People make mistakes

When people make mistakes and systems go wrong,

People are different

People can instantaneously remember about 7 items of

People have a wide range of physical capabilities. Designers

People have different interaction preferences

Some like pictures, some like text.

Ian Sommerville 2004

Software Engineering Dr. S. M. Weerawarana

People Are Different...

Ian Sommerville 2004

Software Engineering Dr. S. M. Weerawarana

People Have Different Interaction Preferences...

Paper plane - origami folding instructions :

Ian Sommerville 2004

Software Engineering Dr. S. M. Weerawarana

UI design must take account of the needs,

Ian Sommerville 2004

Software Engineering Dr. S. M. Weerawarana

User Interface Design Principles

The interface should be consistent in that, wherever possible,

Users should never be surprised by the behaviour of a system.

The interface should include mechanisms to allow users to

The interface should provide meaningful feedback when errors

The interface should provide appropriate interaction facilities for

Ian Sommerville 2004

Software Engineering Dr. S. M. Weerawarana