User Interface Design

Graphical user interfaces

● Most users of business systems interact with
these systems through graphical interfaces
although, in some cases, legacy text-based
interfaces are still used
GUI characteristics
 GUI advantages
● They are easy to learn and use.
– Users without experience can learn to use the
system
quickly.
● The user may switch quickly from one task to
another and can interact with several different
applications.
– Information remains visible in its own window
when
attention is switched.
● Fast, full-screen interaction is possible with
immediate access to anywhere on the screen
User interface design process
Cont…
User interface design principles
 User-system interaction
●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?
●User interaction and information
presentation may be integrated through a
coherent framework such as a user
interface metaphor
 Interaction styles
●Direct manipulation
●Menu selection
●Form fill-in
●Command language
●Natural language
Advantages and disadvantages
Direct manipulation advantages
●Users feel in control of the computer and
are less likely to be intimidated by it
●User learning time is relatively short
●Users get immediate feedback on their
actions
so mistakes can be quickly detected and
corrected
 Direct manipulation problems
● The derivation of an appropriate information
space model can be very difficult
● Given that users have a large information
space, what facilities for navigating around that
space should be provided?
● Direct manipulation interfaces can be complex to
program and make heavy demands on the
computer system
 Menu systems
●Users make a selection from a list of
possibilities presented to them by the
system
●The selection may be made by pointing and
clicking with a mouse, using cursor keys or
by
typing the name of the selection
●May make use of simple-to-use terminals
such as touch screens
 Advantages of menu systems
●Users need not remember command
names as they are always presented with a
list of valid commands
●Typing effort is minimal
●User errors are trapped by the interface
●Context-dependent help can be provided.
The user’s context is indicated by the
current menu selection
 Problems with menu systems
● Actions which involve logical conjunction
(and)
or disjunction (or) are awkward to represent
● Menu systems are best suited to presenting a
small number of choices. If there are many
choices, some menu structuring facility must
be
used
● Experienced users find menus slower than
command language
Form-based interface
 Command interfaces
●User types commands to give instructions
to the system e.g. UNIX
●May be implemented using cheap
terminals.
●Easy to process using compiler techniques
●Commands of arbitrary complexity can be
created by command combination
●Concise interfaces requiring minimal typing
can be created
 Problems with command
interfaces
●Users have to learn and remember a
command
language. Command interfaces are
therefore
unsuitable for occasional users
●Users make errors in command. An error
detection and recovery system is required
●System interaction is through a keyboard
so
typing ability is required
 Command languages
●Often preferred by experienced users
because they allow for faster interaction
with the system
●Not suitable for casual or inexperienced
users
●May be provided as an alternative to menu
commands (keyboard shortcuts). In some
cases, a command language interface and
a menu-based interface are supported at
the same time
 Natural language interfaces
●The user types a command in a natural
language. Generally, the vocabulary is
limited and these systems are confined to
specific application domains (e.g.
timetable enquiries)
●NL processing technology is now good
enough to make these interfaces effective
for casual users but experienced users find
that they require too much typing
Multiple user interfaces
 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) or may be
transformed in some way for presentation
(e.g. in some graphical form)
●The Model-View-Controller approach is a
way of supporting multiple presentations
of data
Information presentation
 Information presentation
●Static information
– Initialised at the beginning of a session. It
does not change during the session
– May be either numeric or textual
●Dynamic information
– Changes during a session and the changes
must be
communicated to the system user
– May be either numeric or textual
 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
Alternative information presentations
Analogue vs. digital presentation
●Digital presentation
– Compact - takes up little screen space
– Precise values can be communicated
●Analogue presentation
– Easier to get an 'at a glance' impression of a
value
– Possible to show relative values
– Easier to see exceptional data values
Dynamic information display
Displaying relative values
Textual highlighting
 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
– 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
– Web pages displayed as a hyperbolic tree
 Colour displays
●Colour adds an extra dimension to an
interface
and can help the user understand complex
information structures
●Can be used to highlight exceptional events
●Common mistakes in the use of colour in
interface design include:
– The use of colour to communicate meaning
– Over-use of colour in the display
 Colour use guidelines
● Don't use too many colours
● Use colour coding to support use tasks
● Allow users to control colour coding
● Design for monochrome then add colour
● Use colour coding consistently
● Avoid colour pairings which clash
● Use colour change to show status change
● Be aware that colour displays are usually lower
resolution
 User support
●User guidance covers all system facilities
to support users including on-line help,
error messages, manuals etc.
●The user guidance system should be
integrated with the user interface to help
users when they need information about
the system or when they make some kind
of error
●The help and message system should, if
possible, be integrated
 Error messages
● 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
Design factors in message
wording
Nurse input of a patient’s name

Please type the patient name in the box then click ok

Bates , J .

OK Cancel
System and user-oriented error messages
 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
●Different facilities in the help system may
be
required
 Help information
●Should not simply be an on-line manual
●Screens or windows don't map well onto
paper
pages.
●The dynamic characteristics of the display
can
improve information presentation.
●People are not so good at reading screen
as
they are text.
 Help system use
● 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.
 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
●As well as manuals, other easy-to-use
documentation such as a quick reference
card may be provided
User document types
 Document types
● Functional description
– Brief description of what the system can do
● Introductory manual
– Presents an informal introduction to the
system
● System reference manual
– Describes all system facilities in detail
● System installation manual
– Describes how to install the system
● System administrator’s manual
– Describes how to manage the system when it
is in use
 User interface evaluation
● Some evaluation of a user interface design
should be carried out to assess its suitability
● Full scale evaluation is very expensive and
impractical for most systems
● Ideally, an interface should be evaluated against
a usability specification. However, it is rare for
such specifications to be produced
Usability attributes
 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 grip button for on-line user
feedback.
 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
 Key points
●Systems should provide on-line help. This
should include “help, I’m in trouble” and
“help, I want information”
●Error messages should be positive rather
than
negative.
●A range of different types of user
documents should be provided
●Ideally, a user interface should be evaluated
against a usability specification
 References
●[Link]
q=user+interface+design+ppt&oq=user+int
erface+design+ppt&aqs=chrome..69i57j0l7
.7652j1j7&sourceid=chrome&ie=UTF-8