User interface design

The user interface

• User interface design is an essential part of the overall

software design process

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

The user interface

• A poorly designed interface can cause a user to make

catastrophic errors because UI does not consider their

capabilities and their environments

• Poor user interface design is the reason why so many software

systems are never used because Users feel that the system is

not helping them to do what they should.

Human factors in interface design

Take physical and mental capabilities of people who use the software

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

Human factors in interface design

• People are different

– People have a wide range of physical capabilities. Designers should not just

design for their own capabilities.( some are colour blind, some better in

physical manipulation see and hear better than others)

• People have different interaction preferences

– Some like pictures, some like text.

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.

These human factors are the basis for the design principles and guidelines shown below:

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.

Design principles• User familiarity

– The interface should be based on user-oriented terms and concepts (related to

the user environment , it should not force the user to adapt to it) 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.(this reduce user learning time because knowledge

learned in one commnad is applicable to other parts)

Design principles

• Minimal surprise– As the system is used , people build a mental model on how the system

works.– If a command operates in a known way, the user should be able to predict

the operation of comparable commands. But if something different happens then the user is confused. Be sure that comparable actions have comparable effects.

RecoverabilityUsers inevitably make mistakesThe system should provide some resilience to user errors and allow the user to recover from errors. This might include :

Undo facility : restore the system to a state before the action

Confirmation of destructive actions : is really what you want ?

Checkpoints : save state of the system at periodic intervals

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 should be supported. For

example, some users have seeing difficulties and so larger text should be

available. For example casual users need interfaces that provide guidance ,

but power users require shortcuts so that they can interact as quickly as

possible

Design issues in UIsDesigner of a user interface is faced with some design issues to be considered when designing

Two problems must be addressed in interactive systems design

– How should information from the user be provided to the computer

system?(how user interaction with the system?)

– How should information from the computer system be presented to

the user?

Interaction styles

• Direct manipulation

• Menu selection

• Form fill-in

• Command language

• Natural language

Direct manipulationDirect Interaction

– Direct interaction with objects– Involves a device (mouse, touch screen ,

finger…etc).Ex: delete a file by clicking on an icon representing that file and drag it to a trash can icon.

Menu selection

– Select a command from a menuEx: file deletion by selecting a delete command

Form fill-in

– User fills in the fields of a formCommand language

– User issue special command to the system. Ex: delete command with filename to delete a file

Natural Language

– User issues a command in natural language– Natura l command is translated into system

commands• Ex: type ”delete file xxx” to delete a file Each one has advantages and drawbacks

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

Information presentation

• Information presentation is concerned

with presenting system information to system

users.• The information may be presented

directly (e.g. text in a word processor)

• Information may be transformed in

some way for presentation

(e.g. in some graphical form).

Information presentation

Information tobe displayed

Presentationsoftware

DisplayGood Design should keep the software required for information presentation separate from from the information itself

Model-view-controller

Model methods

Controller methods View methods

Userinputs

view modificationmessages

Model edits

Model queriesand updates

Controller state View state

Model state

The Model-View-Controller approach is a way of supporting multiple presentations of data. The user can interact with each presentation in a style that is appropriate to the presentation . Data to be displayed is encapsulated in a model object. Each model object could have a number of separated view objects associated with it. Each view has an associated controller object that handles user input and device interaction.

Information display factorsYou should when designing UI take into account

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

Information presentation• Static information

– Initialised at the beginning of a session. It does not change during the session.

– May be either numeric or textual . (takes up less space screen but cannot be read at glance). Text if data change relatively slowly and precise info required

• Dynamic information

– Changes during a session and the changes must be communicated to the system user.

– May be either numeric or textual.

NB : Try to distinguish static from dynamic by putting some “Static” flag.

Alternative information presentations

0

1000

2000

3000

4000

Jan Feb Mar April May June

Jan2842

Feb2851

Mar3164

April2789

May1273

June2835

Interested in the relationship between info rather than the precise values→Graphical presentation

Presentation methods

1

3

4 20 10 20

Dial with needle Pie chart Thermometer Horizontal bar

Displaying relative values

0 100 200 300 400 0 25 50 75 100

Pressure Temperature

Some presentation give the viewer some sense of the relative valuesT and P have the same value but T has almost reached its max while pressure is about 25%.

How Colours are used in the interface?

• Colour adds an extra dimension to an interface and can help the user understand complex information structures.

• Colour can be used to highlight exceptional events. But misuse of colours could lead to unattractive UI.

• Common mistakes in colour use in interface design include:–The use of colour to communicate

meaning; because a colour blind person may misinterpret the meaning–The over-use of colour in the display.

Colour use guidelines

• Limit the number of colours used and be conservative in their use.

• Use colour change to show a change in system status.

• Use colour coding to support the task that users are trying to perform.

• Use colour coding in a thoughtful and consistent way.

• Be careful about colour pairings.

Error messagesSystem also communicate with the user through messages that give information about errors and the system state.• 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.Users start working , then make mistakes . Impossible for unexperinced/casual users to understand the system messages.

So Factors should be taken into account when designing system messages

Design factors in message wording

Factor Description

Context Wherever possible, the messages generated by the system should reflect the currentuser context. As far as is possible, the system should be aware of what the user is doingand should generate messages that are relevant to their current activity.

Experience As u sers become familiar with a s ystem they become irritated by long, ÔmeaningfulÕmessages. However, beginners find it difficult to understand short terse statements of aproblem. You should provide both types of message and allow the user to controlmessage conciseness.

Skill level Messages should be tailored to the userÕs skills as well as t heir experience. Messagesfor the different classes of user may be expressed in different ways depending on theterminology that is familiar to the reader.

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

Culture Wherever possible, the designer of messages should be familiar with the culture of thecountry where the system is sold. There are distinct cultural differences betweenEurope, Asia and America. A su itable message for one culture might be unacceptablein another.

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

Good and bad message design

Error #27

Invalid patient id

OK Cancel

System-oriented error messageUser-oriented error message

R. MacDonald is not a reg istered patient

Click 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

Bad designNot tailored to the user skills and experience level. No suggestion on how to solve the problem.

Better designPositive Proposition for correcting the mistake