1 / 31

CS 425/625 Software Engineering

User Interface Design

Based on Chapter 15 of the textbook [SE-6] Ian Sommerville,Software Engineering, 6th Ed., Addison-Wesley, 2000 and on theCh15 PowerPoint presentation available at the book’s web-site:www.comp.lancs.ac.uk/computing/resources/IanS/SE6/Slides/index.html

November 03, 2003

2 / 31

Outline

Introduction User Interface Design Principles User Interaction Information Presentation User Support User Interface Evaluation

3 / 31

Introduction..

User interface design (UID) is part of the software design process

In many cases software engineers also work as UID specialists

The user interface is critical to the success of the application

The vast majority of current applications have graphical user interfaces (GUI)

GUI advantages: Are relatively easy to understand, learn and use Allow complex interaction, via multiple windows Support full-screen, fast interaction

4 / 31

.Introduction.

Characteristics of graphical user interfaces [Fig. 15.1, Somm00]

Characteristic DescriptionWindows Multiple windows allow different information to be

displayed simultaneously on the user’s screen.Icons Icons different types of information. On some systems,

icons represent files; on others, icons representprocesses.

Menus Commands are selected from a menu rather than typedin a command language.

Pointing A pointing device such as a mouse is used for selectingchoices from a menu or indicating items of interest in awindow.

Graphics Graphical elements can be mixed with text on the samedisplay.

5 / 31

..Introduction

User interface design process [Fig. 15.2, Somm00]

Executableprototype

Designprototype

Produce paper-based design

prototype

Producedynamic design

prototype

Evaluate designwith end-users

Implementfinal userinterface

Evaluate designwith end-users

Analyse andunderstand user

activities

6 / 31

User Interface Design Principles

User interfaces should be designed with the user in mind

Implementation details should be hidden General principles that guide UID:

User familiarity Consistency Minimal surprise Recoverability User guidance User diversity

7 / 31

User Interaction……

Key issues in UID: User interaction (input commands & data from user) Information presentation (output data to the user)

Five styles of user interaction: Direct manipulation

User interacts directly with objects on screen It is fast, intuitive, easy to learn Provides immediate feedback; errors are easy to correct Needs to be supported by a user interface metaphor Requires complex implementation

8 / 31

.User Interaction…..

Menu selection User selects a command (option) from a set of options User errors are reduced Easy to use interfaces such as touch screen terminals

can be used Context-dependent help could be provided The interface may be complex if many options are

available; structuring mechanisms are needed Logical conjunctions and disjunctions in user commands

are difficult to support Learning may not be straightforward Experienced users may find menu selection slower than

command language

9 / 31

..User Interaction….

Command language Text-based interaction, where the user specifies a command

and, possibly, parameters for the command (e.g., “remove file” rm filename in unix)

Powerful set of commands can be designed Concise, fast interaction style Commands can be easily interpreted by software More difficult to learn Typing ability required Errors are dealt with poorly Preferred by experienced users Can be used as an alternative to other styles (e.g., shortcut

combinations of keystrokes in addition to menu selection)

10 / 31

…User Interaction…

Fill-in forms User inputs information in the fields of the form Easy to learn May require complex processing Take significant screen space

Natural language Commands are expressed in natural language sentences,

possibly using voice recognition technology Suitable for casual users Not very reliable

Combinations of UI styles can be used (e.g., Windows)

11 / 31

….User Interaction.. Example of control panel interface [slide from Ch15 presentation,

Somm00]: a combination fill-in form and menu selection

Title

Method

Type

Selection

NODE LINKS FONT LABEL EDIT

JSD. example

JSD

Network

Process

Units

Reduce

cm

Full

OUIT

PRINT

Grid Busy

12 / 31

…..User Interaction.

Example of fill-in interface [slide from Ch15 presentation, Somm00]

Title

Author

Publisher

Edition

Classification

Date ofpurchase

ISBN

Price

Publicationdate

Number ofcopies

Loanstatus

Orderstatus

NEW BOOK

13 / 31

……User Interaction

Multiple user interfaces [Fig. 15.5, Somm00]

Operating system

GUImanager

Graphical userinterface

Commandlanguage

interpreter

Commandlanguageinterface

14 / 31

Information Presentation….….

Information may be directly presented (e.g., text) or a graphical representation may be used

Data presented should be separated by the presentation software

An approach for multiple presentation of data is Model-Viewer-Controller (MVC). It allows different presentations (“views”) of the same information

15 / 31

.Information Presentation….…

Generic model of presentation [Fig. 15.6, Somm00]

Information tobe displayed

Presentationsoftware

Display

16 / 31

..Information Presentation……

Model-Viewer-Controller approach [Fig. 15.7, Somm00]

Model state

Model methods

Controller state

Controller methods

View state

View methods

User inputsview modification

messages

Model editsModel queriesand updates

17 / 31

…Information Presentation.…. An example of multiple presentation of

information [Fig. 14.13, Somm00]

Subject

A: 40B: 25C: 15D: 20

Observer 1 Observer 2

0

50

25

A B C D

A

B

C

D

18 / 31

….Information Presentation….

Factors to be considered when presenting information: Are precise values or data relationships (“big picture”)

needed? Is data static or dynamic? If dynamic, what is the rate of information change? How

quickly should the user be informed of the change? Are actions/responses required from the user? Is direct manipulation involved? Are absolute or relative values needed? Is textual or numerical format necessary? Is it required to present large amounts of information?

19 / 31

…..Information Presentation…

Alternative presentations [Fig. 15.8, Somm00]

0

1000

2000

3000

4000

Jan Feb Mar April May June

Jan2842

Feb2851

Mar3164

April2789

May1273

June2835

20 / 31

…...Information Presentation..

Presentation of dynamic information [Fig. 15.9 and 15.10, Somm00]

1

3

4 20 10 20

Dial with needle Pie chart Thermometer Horizontal bar

0 100 200 300 400 0 25 50 75 100

Pressure Temperature

21 / 31

….…Information Presentation.

Textual highlighting [Fig. 15.11, SE-6]

The filename you have chosen has beenused. Please choose another name

Ch. 16 User interface design!

OK Cancel

22 / 31

….….Information Presentation

Colours: Can help the users manage the complexity of the

interface Can be used for highlighting items or identifying layers

Several guidelines for using colours: Use colours conservatively (limit the number of colours used) Use colours to indicate changes in system status Use colour coding to support user tasks Use colours in a consistent manner Pay attention to colour pairings

23 / 31

User Support……

User guidance encompasses: Online help system Messages in response to user actions User interface documentation

Online help system: Should provide various entry points for the user and should

allow easy navigation Should be kept compact, clear and concise; it should not

overwhelm the user Should use a well-organized hierarchical structure, with

general help information placed at the top of the hierarchy and details at the bottom

Preferably, should include various levels of help

24 / 31

.User Support…..

Entry points to a help system [Fig. 15.15, Somm00]

Help frame network

Top-levelentry

Entry from errormessage system

Entry fromapplication

25 / 31

..User Support….

Help system windows [Fig. 15.16, SE-6]

Mail redirection

Mail may be redirected to anothernetwork user by pressing theredirect button in the controlpanel. The system asks for thename of the user or users towhom the mail has been sent

next topicsmore

Mail redirection

Mail may be redirected to anothernetwork user by pressing theredirect button in the controlpanel. The system asks for thename of the user or users towhom the mail has been sent

Help frame map

You are here

Help history

1. Mail2. Send mail3. Read mail4. Redirection

26 / 31

…User Support…

Error messages: Should take into consideration the background and

experience of users; should utilize a user-oriented, not a system-oriented language

Should be polite, positive, concise, and consistent Wherever possible, should suggest actions to

correct the error Wherever possible, should be linked with the help

system

27 / 31

….User Support..

Factors considered in wording messages [Fig. 15.12]Context The user guidance system should be aware of what the user is

doing and should adjust the output message to the currentcontext.

Experience As users become familiar with a system they become irritatedby long, ‘meaningful’ messages. However, beginners find itdifficult to understand short terse statements of the problem.The user guidance system should provide both types of messageand allow the user to control message conciseness.

Skill level Messages should be tailored to the user’s skills as well as theirexperience. Messages for the different classes of user may beexpressed in different ways depending on the terminology whichis familiar to the reader.

Style Messages should be positive rather than negative. They shoulduse the active rather than the passive mode of address. Theyshould never be insulting or try to be funny.

Culture Wherever possible, the designer of messages should be familiarwith the culture of the country where the system is sold. Thereare distinct cultural differences between Europe, Asia andAmerica. A suitable message for one culture might beunacceptable in another.

28 / 31

…..User Support.

User documentation: The system manual should be more detailed

than the online help Types of user documentation:

Functional description Installation document Introductory manual Reference manual Administrator’s manual

29 / 31

……User Support

Document types for user support [Fig. 15.17, SE-6]

Description ofservices

Functionaldescription

Systemevaluators

How to installthe system

Installationdocument

Systemadministrators

Gettingstarted

Introductorymanual

Noviceusers

Facilitydescription

Referencemanual

Experiencedusers

Operation andmaintenance

Administrator’sguide

Systemadministrators

30 / 31

Interface Evaluation.

Usability criteria [Fig. 15.18, Somm00]

Attribute DescriptionLearnability 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?

31 / 31

.Interface Evaluation

Evaluation of user interfaces: Comprehensive statistical assessment based on many

experiments and involving users and specialists Less expensive techniques for user interface evaluation:

Questionnaires Observations of users at work Video snapshots of typical uses Software components that gather information on the usage of

the user interface Software components that allow direct feedback from users