Lecture 9 - UI Design

©Ian Sommerville 2004 Software Engineering – Dr. S. M. Weerawarana 1

Shahani Markus Weerawarana

CS 3022

User Interface Design

Lecture 9


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?

Usabilityand

User Centered Design

5

What is Usability?

ISO 9241 usability definition

The effectiveness, efficiency, and satisfaction with which specified users can achieve specified goals in particular environments.

6

Why is Usability Important?

1. The fate of the world

2. The Apple iPhone

7

1. The Fate of the World

The 2001 Florida Ballot Incident

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

8

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.

9

End Result of the Poor Ballot Design!

10

Why is Usability Important?

1. The fate of the world

2. The Apple iPhone

11

2. The Apple iPhone

12

Focus on Usability and Design

13

The Implications of Usability

14

Usability vs. Specification

Initiation

Requirement

Specification

Implementation

Testing

We test them here

Is it too late?

Architecture & Design

We design the user interface here

15

User Centered Design

UI Design + Testing

Initiation

Requirement

Specification

Implementation

Testing

Architecture & Design


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 System users often judge a system by its interface rather than its functionality!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.


Overview



Human Factors in Interface Design

● 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.


People Are Different...


•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!


UI Design Principles

● UI design must take account of the needs, experience and capabilities of the system users.

● Designers should be aware of people’s 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.


User Interface Design Principles

Principle Description

User familiarity The interface should use terms and concepts which are drawnfrom the experience of the people who will make most use of thesystem.

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 torecover from errors.

User guidance The interface should provide meaningful feedback when errorsoccur and provide context-sensitive user help facilities.

User diversity The interface should provide appropriate interaction facilities fordifferent types of system user.



● User FamiliarityUser 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

http://www.cricbuzz.com/cricket-schedule/series/228/icc-world-cup-2011

24

Kalzium

25

Google Earth

26

Album Selection on Multi-Touch Mobiles



● User FamiliarityUser 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





● User FamiliarityUser 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

31

A Linux Desktop – similar to Windows

32

Portable Apps – similar to Windows Menu



● ConsistencyConsistency• 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

34

MS Office 2007: Ribbon UI Pattern



● Minimal SurpriseMinimal Surprise• If a command operates in a known way, the user should be

able to predict the operation of comparable commands.● RecoverabilityRecoverability

• 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 GuidanceUser Guidance• Some user guidance such as help systems, on-line manuals, etc.

should be supplied● User DiversityUser 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


Sri Lanka Country Portal Interface

Video

http://www.youtube.com/watch?v=6rlHmE7KzT4

http://www.youtube.com/watch?v=6rlHmE7KzT4


Overview


38

GUI Components: Simple Input

• What is the type of information received by each input field? • What’s the effect?

Intro | UI Design | Usability | User-centered

Text field Button

Text area Link

Enter Text Click to Submit

Enter Lots of text Link 1, link 2, link 3

39

Simple GUI components: Choosers

• What is the difference between a radio button and a check box?

• What is the choice domain and the choice range of each component?


Combo box Slider

Option 2

Option 1 Option 1

Option 2

Choose one

Radio button Checkbox

40

Larger Constructs

Pages(in Web-based systems)

Windows(in Desktop-based systems)



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.


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.


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.


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

http://homepage.mac.com/bradster/iarchitect/fame.htm

http://homepage.mac.com/bradster/iarchitect/shame.htm


Overview



Well Known Interaction Styles

Graphical User Interface (GUI)

Command LineInterface (CLI)

Voice Activated Interface



Touch Interaction Style


Multi-Touch Interaction Style


Motion Based Interaction Style


Gesture Based Interaction Style


Multi-Touch Surfaces

Microsoft Surface

Video

http://www.youtube.com/watch?v=rKgU6ubBgJA


Wearable Gestural Interface

Pranav Mistry: Sixth Sense at TED India

Video

http://www.youtube.com/watch?v=YrtANPtnhyg


Innovations

SPARSH

Video

http://www.youtube.com/watch?v=58bjJKCQMgE

Documents

Lecture 9 - UI Design