The document discusses user interface design principles for creating effective communication between humans and computers, noting that interfaces should be designed based on users' skills, minimize errors, and include guidance like help systems. It also covers interaction styles, information presentation methods, designing clear error messages, and the importance of consistency, familiarity, and accommodating diverse users.

1. User Interface Design
Indu Sharma
HOD(CSE)
CPTC, Rajsamand
1

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

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

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

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

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

7. User Interface Design
Principles
Principle Description
User familiarity The interface should use terms and concepts which are drawn
from the experience of the people who will make most use of the
system.
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 to
recover from errors.
User guidance The interface should provide meaningful feedback when errors
occur and provide context-sensitive user help facilities.
User diversity The interface should provide appropriate interaction facilities for
different types of system user.
7

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

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

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

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

12. User Interaction
 Interaction styles
 Direct manipulation
 Menu selection
 Form fill-in
 Command language
 Natural language
12

13. Interaction Styles
Interaction
style
Main advantages Main disadvantages Application
examples
Direct
manipulation
Fast and intuitive
interaction
Easy to learn
May be hard to implement.
Only suitable where there is a
visual metaphor for tasks and
objects.
Video games
CAD systems
Menu
selection
Avoids user error
Little typing required
Slow for experienced users.
Can become complex if many
menu options.
Most general-
purpose systems
Form fill-in Simple data entry
Easy to learn
Checkable
Takes up a lot of screen space.
Causes problems where user
options do not match the form
fields.
Stock control,
Personal loan
processing
Command
language
Powerful and flexible Hard to learn.
Poor error management.
Operating systems,
Command and
control systems
Natural
language
Accessible to casual
users
Easily extended
Requires more typing.
Natural language understanding
systems are unreliable.
Information
retrieval systems
13

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

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

16. Information Presentations
0
1000
2000
3000
4000
Jan Feb Mar April May June
Jan
2842
Feb
2851
Mar
3164
April
2789
May
1273
June
2835
16

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

18. Presentation Methods
1
3
4 2
0 10 20
Dial with needle Pie chart Ther mometer Horizontal bar
18

19. Displaying Relative Values
0 100 200 300 400 0 25 50 75 100
Pressur e Temper atur e
19

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

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

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

23. Design Factors in Message
Wording
Context The user guidance system should be aware of what the user is
doing and should adjust the output message to the current
context.
Experience As users become familiar with a system they become irritated
by long, ‘meaningful’ messages. However, beginners find it
difficult to understand short terse statements of the problem.
The user guidance system should provide both types of message
and allow the user to control message conciseness.
Skill level Messages should be tailored to the user’s skills as well as their
experience. Messages for the different classes of user may be
expressed in different ways depending on the terminology which
is familiar to the reader.
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.
Culture Wherever possible, the designer of messages should be familiar
with the culture of the country where the system is sold. There
are distinct cultural differences between Europe, Asia and
America. A suitable message for one culture might be
unacceptable in another.
23

24. 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 bo x then c lic kon OK
MacDonald, R.
OK Cancel
Patient’s name
24

25. Good and bad message
design
Error #2 7
Invalid patient id
OK Cancel
System-orient ed error message
User-orient ed error message
R. MacDonald is not a reg ist ered patient
Clickon P atients f or a list of patients
Clickon Retr y to re-input the patient’s name
Clickon Help f or more inf ormation
Patients Help Retr y Cancel
25

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

27. Entry points to a help system
Help frame network
Top-level
entry
Entry fromerror
message system
Entry from
application
27

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

29. User document types
Description of
services
Functional
description
System
evaluators
Howto install
thesystem
Installation
document
System
administrators
Getting
started
Introductory
manual
Novice
users
Facility
description
Reference
manual
Experienced
users
Operationand
maintenance
Administrator’s
guide
System
administrators
29

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

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

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

33. The design process
Executable
prototype
Design
prototype
Produce paper-
based design
prototype
Produce
dynamic design
prototype
Evaluate design
with end-users
Implement
final user
inter face
Evaluate design
with end-users
Analyse and
understand
user activities
33

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

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

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

37. Usability attributes
37

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

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