User interface design(sommerville) bangalore university

29
ommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide User Interface Design

Transcript of User interface design(sommerville) bangalore university

Page 1: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 1

User Interface Design

Page 2: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 2

User interface design Objectives Understand a number of user interface design principles

which have been introduced to serveral interaction styles and understand when these are most appropriate.

Understand when to user graphical and textual persentation of information.

Know what is involved in the principal activities in the user interface design process.

Understand usability attributes and have been introduced to different approaches to interface evaluation.

Page 3: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 3

UI design principles User familiarity

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

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

Page 4: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 4

UI design principles (cont.) 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• 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

Page 5: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 5

Topics Covered Design Issues The UI Design Process User Analysis User Interface Prototyping Interface Evaluation

Page 6: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 6

Design IssuesThe designer of a user interface to a computer is

faced with two key questions:1. How should the user interact with the computer system?2. How should information from the computer system be

presented to the user?

Page 7: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 7

Interaction styles Direct manipulation

• Easiest to grasp with immediate feedback• Difficult to program

Menu selection• User effort and errors minimized• Large numbers and combinations of choices a problem

Form fill-in• Ease of use, simple data entry• Tedious, takes a lot of screen space

Command language• Easy to program and process• Difficult to master for casual users

Natural language• Great for casual users• Tedious for expert users

Page 8: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 8

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

Information tobe displayed

Presentationsoftware

Display

Page 9: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 9

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?

Page 10: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 10

Alternative information presentations

0

1000

2000

3000

4000

Jan Feb Mar April May June

Jan2842

Feb2851

Mar3164

April2789

May1273

June2835

Page 11: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 11

Information display

1

3

4 20 10 20

Dial with needle Pie chart Thermometer Horizontal bar

Page 12: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 12

Displaying relative values

0 100 200 300 400 0 25 50 75 100Pressure Temperature

Page 13: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 13

Design factors in message wording

Context Experience Skill Level Style Culture

Page 14: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 14

Design factors in message wording

Context Whenever possible, the messages generated

by the system should reflect the current user context. As far as is possible, the system should be aware of what the user is doing and should generate messages that are relevant to their current activity.

Page 15: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 15

Design factors in message wording(Cntd.)

Experience As users become familiar with a system they

become irritated by long. ‘Meaningfull’ messages. However, beginners find it difficult to understand short, terse statements of a problem. You should provide both types of messages and allow the user to control message conciseness.

Page 16: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 16

Design factors in message wording(Cntd.)

Skill Level Messages should be tailored to the users’ skills

as well as their expericence. Messages for the different classses of users may be expessed in different ways depending on the terminology that is familiar to the reader.

Page 17: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 17

Design factors in message wording(Cntd.)

Style Messages should be positive rather than

negative. They should use the active rather than the passive mode of address. They should never be insulting or try to be funny.

Page 18: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 18

Design factors in message wording(Cntd.)

Culture Whenever possible, the designer of messages

should be familiar with the culture of the contury where the system is sold. There are distinct differences between Europe, Asia and America. A suitable message for one culture might be unacceptable in another.

Page 19: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 19

System and user-oriented error messages

Error #27

Invalid patient id entered?OK Cancel

Patient J . Bates is not registeredClick on Patients f or a list of registered patientsClick on Retr y to re-input a patient nameClick on Help f or more information

Patients Help Retry Cancel

System-oriented error messageUser-oriented error message

Page 20: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 20

User interface design process

Executableprototype

Designprototype

Produce paper-based design

prototype

Producedynamic design

prototype

Evaluate designwith end-users

Implementfinal userinterface

Evaluate designwith end-users

Analyse andunderstand user

activities

Page 21: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 21

User Analysis

If you don’t understand what users want to do with a system, then you have no realistic prospect of designing an effective user interface. To develop this understanding, you may user techniques such as task analysis, ethnographic studies, user interviews and observations or commonly, a mixture of all of these.

Page 22: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 22

Analysis TechniquesHierarchical Task Analysis(HTA) In HTA, a high level task is broken down into

subtasks, and plans are identified that specify what might happen in a specific suitation.

Page 23: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 23

Analysis Techniques (Cntd.) Ethnography It closely observe how people work, how

they interact with others and how features in the workplace are used to support their work. The advantage of ethnography is that the ethnographer can observe intuitive actions and informal collabrations that can then spark further discussions about the work.

Page 24: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 24

User Interface Prototyping Approachers Paper Prototyping Storyboard3 Main Approachers Script-driven approach(Macromedia) Visual Programming Languages(VB) Internet-Based Prototyping(Java)

Page 25: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 25

Interface Evaluation It is the process of assessing the usability of

an interface and checking that it meets user requirements. Therefore, it should be part of the normal verification and validation process for software system.

Page 26: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 26

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.

Page 27: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 27

Usability attributes

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?

Page 28: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 28

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

Page 29: User interface design(sommerville) bangalore university

©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 29

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