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