User Interface Design

Indu SharmaHOD(CSE)

CPTC, Rajsamand

1

Introduction When the user uses a software, he is concerned with

how to use such type of system or it can be operated conveniently, not with the internal architecture, coding and implementation.

If a software is difficult to use, it forces you into mistakes, or it frustrates your efforts to accomplish your goals, you won’t like it, it offers. Because it moulds a user’s perception of the software, the interface has to be right.

User interface design creates an effective communication medium between human and computer.

2

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

3

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.

4

Human Factors in Interface Design People have a diverse range of physical

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

5

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 recognise that people make mistakes.

UI design principles underlie interface designs although not all principles are applicable to all designs.

6

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.

7

Design Principles 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.

Consistency The system should display an appropriate level

of consistency. Commands and menus should have the same format, command punctuation should be similar, etc.

8

Design Principles Minimal surprise

If a command operates in a known way, the user should be able to predict the operation of comparable commands

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, checkpointing, etc.

9

Design principles 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 (for eg. occasional users, power users) should be supported. For example, some users have seeing difficulties and so larger text should be available

10

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? A coherent user interface must integrate

user interaction and information presentation.

11

User Interaction Interaction styles

Direct manipulation Menu selection Form fill-in Command language Natural language

12

Interaction StylesInteractionstyle

Main advantages Main disadvantages Applicationexamples

Directmanipulation

Fast and intuitiveinteractionEasy to learn

May be hard to implement.Only suitable where there is avisual metaphor for tasks andobjects.

Video gamesCAD systems

Menuselection

Avoids user errorLittle typing required

Slow for experienced users.Can become complex if manymenu options.

Most general-purpose systems

Form fill-in Simple data entryEasy to learnCheckable

Takes up a lot of screen space.Causes problems where useroptions do not match the formfields.

Stock control,Personal loanprocessing

Commandlanguage

Powerful and flexible Hard to learn.Poor error management.

Operating systems,Command andcontrol systems

Naturallanguage

Accessible to casualusersEasily extended

Requires more typing.Natural language understandingsystems are unreliable.

Informationretrieval systems

13

Information Presentation All interactive systems have to provide

some way of presenting information to the users

Information presentation is concerned with presenting system information to system users.

The information may be presented directly (e.g. text in a word processor) or may be transformed in some way for presentation (e.g. in some graphical form).

14

Text Vs. Graphical Representation of Information Graphics makes your display more interesting

rather than text display. Graphics takes up valuable screen space

whereas textual presentation takes up less screen space but cannot be read at a glance.

Graphics take a long time to download if the user is working over a slow, dial-up connection.

Text should be used when precise information is required and the information changes relatively slowly. If the data changes quickly or if the relationships between data rather than the precise data values are significant, then information should be presented graphically.

15

Information Presentations

0

1000

2000

3000

4000

Jan Feb Mar April May June

Jan2842

Feb2851

Mar3164

April2789

May1273

June2835

16

Analogue or Digital Presentation?

Digital presentation Compact - takes up little screen space; Precise values can be communicated.

Analogue presentation Dynamically varying numeric information is best

presented graphically using an analogue representation.

Easier to get an 'at a glance' impression of a value;

Possible to show relative values; Easier to see exceptional data values.

17

Presentation Methods

1

3

4 20 10 20

Dial with needle Pie chart Thermometer Horizontal bar

18

Displaying Relative Values

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

19

Data Visualisation Concerned with techniques for displaying large

amounts of information. Visualisation can reveal relationships between

entities and trends in the data. Possible data visualisations are:

Weather information collected from a number of sources, is shown as a weather map;

The state of a telephone network as a linked set of nodes; Chemical plant visualised by showing pressures and

temperatures in a linked set of tanks and pipes; A model of a molecule displayed in 3 dimensions, using

virtual reality system; Web pages displayed as a hyperbolic tree.

20

User Guidance User interface design guidelines

result in a friendly, efficient user guidance. It covers three areas:

1. The Error Messages.2. The On-line Help System.3. The Documentation provided with

the system.

21

The Error Messages Error message design is critically important.

Messages should be polite, concise, consistent and constructive.

Errors messages should not be abusive and should not have associated beeps or other noises that might embarrass the user.

Error messages should suggest how the error might be corrected.

The error messages should be linked to a context sensitive on line help system.

The background and experience of users should be the determining factor in message design.

22

Design Factors in Message Wording

Context The user guidance system should be aware of what the user isdoing 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. 23

User Error Assume that a nurse misspells the

name of a patient whose records he is trying to retrieve.

Please type the patient’s name in the box then click on OK

MacDonald, R.

OK Cancel

Patient’s name

24

Good and bad message design

Error #27

Invalid patient id

OK Cancel

System-oriented error message User-oriented error message

R. MacDonald is not a reg istered patientClick on Patients for a list of patientsClick on Retry to re-input the patient’s nameClick on Help for more information

Patients Help Retry Cancel

25

Help System Design Help? means ‘help I want information” Help! means “HELP. I'm in trouble” Both of these requirements have to be taken into

account in help system design Multiple entry points should be provided so that

the user can get into the help system from different places.

Some indication of where the user is positioned in the help system is valuable.

Facilities should be provided to allow the user to navigate and traverse the help system.

26

Entry points to a help system

Help frame network

Top-levelentry

Entry from errormessage system

Entry fromapplication

27

User Documentation As well as on-line information,

paper documentation should be supplied with a system

Documentation should be designed for a range of users from inexperienced to experienced

28

User document types

Description ofservices

Functionaldescription

Systemevaluators

How to installthe system

Installationdocument

Systemadministrators

Gettingstarted

Introductorymanual

Noviceusers

Facilitydescription

Referencemanual

Experiencedusers

Operation andmaintenance

Administrator’sguide

Systemadministrators

29

Document types Functional description

Brief description of the services that the system provides.

System installation manual Describes how to install the system, minimal h/w

configuration etc. Introductory manual

How to get started and how end-users might make use of the common system facilities.

It should be liberally illustrated with examples.

30

Document types System reference manual

Describes all system facilities in detail Completing listing of error messages and

describe how to recover from detected errors. System administrator’s manual

Describes how to manage the system when it is in use.

How to maintain h/w, how to connect new peripherals etc.

31

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.

32

The 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

33

User Analysis If you don’t understand what the users want

to do with a system, you have no realistic prospect of designing an effective interface.

Knowledge of working environment Techniques such as task analysis, user

interviews and observations or mixture of all of these may be used.

34

User Interface Prototyping The aim of prototyping is to allow users to

gain direct experience with the interface. Without such direct experience, it is

impossible to judge the usability of an interface.

Prototyping may be a two-stage process: Early in the process, paper prototypes may

be used; The design is then refined and increasingly

sophisticated automated prototypes are then developed.

35

User interface evaluation It is the process of assessing the

usability of an interface and checking that it meets user requirements.

Full scale evaluation is very expensive and impractical for most systems.

Ideally, an interface should be evaluated against a usability specification based on usability attributes.

36

Usability attributes

37

Simple evaluation techniques Systematic evaluation of user interface

design based on usability attributes can be expensive.

There are number of simpler, less expensive techniques of user interface evaluation that can identify particular series of design deficiencies: Questionnaires for users’ feedback.; Observation of users at work with the system; Video snapshots of typical system use;

38

Objectives for a Successful UI Interface To reduce errors. To increase safety. To improve information system performance. To improve reliability. To improve maintainability. To reduce training requirements. To reduce personnel requirements. To improve working environment. To reduce fatigue and physical stress. To reduce boredom and monotony. To increase user acceptance. To reduce loss of time and information system equipment. To increase efficiency of operation.

39