User Interface

Design Mr. Payos | BSIT

Outline

•Introduction
 •User Interface Design
Principles •User Interaction
•Information
Presentation •User
Support
•User Interface Evaluation
Introduction..
•User interface design (UID) is part of the software
design process
•In many cases software engineers also work as UID
specialists
• The user interface is critical to the success of the
application
 • The vast majority of current applications have
graphical user interfaces (GUI)
•GUI advantages:
• Are relatively easy to understand, learn and use
• Allow complex interaction, via multiple windows
• Support full-screen, fast interaction
Introduction
• Characteristics of graphical user interfaces
Characteristic Description
Windows Multiple windows allow different information to be displayed
simultaneously on the user’s screen.
Icons Icons different types of information. On some systems, icons represent
files; on others, icons represent
processes.
Menus Commands are selected from a menu rather than typed in a command
language.
Pointing A pointing device such as a mouse is used for selecting choices from
 a menu or indicating items of interest in a
window.
Graphics Graphical elements can be mixed with text on the same display.
Introduction
• User interface design process
Analyse and prototype Produce Evaluate design
understand user Design dynamic design with end-users
activities prototype Implement
Produce paper prototype
Executable final user
Evaluate design interface
prototype
based design with end-users

User Interface Design Principles

• User interfaces should be designed with the user in

mind • Implementation details should be hidden
• General principles that guide UID:
• User familiarity
• Consistency
 • Minimal surprise
• Recoverability
• User guidance
• User diversity

User Interaction……

• Key issues in UID:

• User interaction (input commands & data from user)
• Information presentation (output data to the user) •
Five styles of user interaction:
• Direct manipulation
• User interacts directly with objects on screen
• It is fast, intuitive, easy to learn
• Provides immediate feedback; errors are easy to correct
• Needs to be supported by a user interface metaphor •
Requires complex implementation

User Interaction…..
• Menu selection
• User selects a command (option) from a set of
options • User errors are reduced
• Easy to use interfaces such as touch screen terminals can be
used
• Context-dependent help could be provided
• The interface may be complex if many options are available;
structuring mechanisms are needed
• Logical conjunctions and disjunctions in user commands are
difficult to support
• Learning may not be straightforward
• Experienced users may find menu selection slower than
command language
User Interaction….

• Command language
• Text-based interaction, where the user specifies a command and,
possibly, parameters for the command (e.g., “remove file” rm
 filename inunix)
• Powerful set of commands can be designed
• Concise, fast interaction style
• Commands can be easily interpreted by software
• More difficult to learn
• Typing ability required
• Errors are dealt with poorly
• Preferred by experienced users
• Can be used as an alternative to other styles (e.g., shortcut
combinations of keystrokes in addition to menu selection)
User Interaction…
• Fill-in forms
• User inputs information in the fields of the form
• Easy to learn
• May require complex processing
• Take significant screen space
 • Natural language
• Commands are expressed in natural language sentences, possibly
using voice recognition technology
• Suitable for casual users
• Not very reliable
• Combinations of UI styles can be used (e.g., Windows)
User Interaction..
selection
• Example of control panel interface: a combination fill-in form and menu

Title JSD. example JSD Units cm

Method Type Network Grid BusyOUIT
Selection Process Reduce Full PRINT
NODE LINKS FONT LABEL EDIT

User Interaction. • Example of

ISBN
Author
Publisher
fill-in interface Edition
Classification Date of
purchase
Title
NEWBOOK Number of
copies
Price Loan
Publication status
date Order
status

User Interaction Operating system

• Multiple user interfaces

Graphical user
Command
interface language interface

GUI Command language interpreter

manager

Information Presentation

•Information may be directly presented (e.g., text) or a

graphical representation may be used
 •Data presented should be separated by the
presentation software
• An approach for multiple presentation of data is
Model-Viewer-Controller (MVC). It allows different
presentations (“views”) of the same information
Information Presentation
• Generic model of presentation

Information to
be displayedPresentation
software

Display
 Information Presentation
• Model-Viewer-Controller
approach
View state view modification messages Controller state
View methodsUser inputs Controller methods
Model queries and updates Model state Model edits
Model methods

Information Presentation.….
• An example of multiple presentation of information
C A 25
D B
Subject ABCD0
50

Observer 1 Observer 2 A: 40
 B: 25
C: 15
D: 20
Information Presentation….

• Factors to be considered when presenting information: •

Are precise values or data relationships (“big picture”) needed?
• Is data static or dynamic?
• If dynamic, what is the rate of information change? How quickly
should the user be informed of the change?
• Are actions/responses required from the user?
• Is direct manipulation involved?
• Are absolute or relative values needed?
• Is textual or numerical format necessary?
• Is it required to present large amounts of information?
 Information
Presentation… • Alternative
presentations 2842Feb
Jan
4000 3164April
3000 2789May
2000
1000 1273June
2835
2851Mar

0
Jan Feb Mar April May June
Information Presentation..
• Presentation of dynamic information
1
4 20 10 20 3

Dial with needle Pie chart Thermometer Horizontal bar

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

Information
Presentation. • Textual
highlighting
 The filename you have chosen has been

!
used. Please choose another name
Ch. 16 User interface design
OK Cancel
Information Presentation
• Colours:
• Can help the users manage the complexity of the
interface • Can be used for highlighting items or identifying
layers • Several guidelines for using colours:
•Use colours conservatively (limit the number of
colours used)
•Use colours to indicate changes in system
status •Use colour coding to support user tasks
•Use colours in a consistent manner
• Pay attention to colour pairings
User Support……
• User guidance encompasses:
• Online help system
• Messages in response to user actions
• User interface documentation
• Online help system:
• Should provide various entry points for the user and should allow
 easy navigation
• Should be kept compact, clear and concise; it should not
overwhelm the user
• Should use a well-organized hierarchical structure, with general
help information placed at the top of the hierarchy and details at
the bottom
• Preferably, should include various levels of help
Help frame network

User Support….. Entry from application

• Entry points to a help system Top-level

entry

Entry from error

message system

User Support….
• Help system windowsMail redirection
Help frame map You are here
Help history pressing the redirect button in the control redirect button in
1. Mail
the control panel. The system asks for the panel. The
2. Send mail
3. Read mail system asks for the name of the user or usersto name of the
4. Redirection
Mail redirection user or usersto whom the mail has been sent
Mail may be redirected to another Mail may be redirected whom the mail has been sent more next topics
to another network user by pressing the network user by

User Support…

• Error messages:
• Should take into consideration the background and
experience of users; should utilize a user-oriented, not a
system-oriented language
• Should be polite, positive, concise, and consistent •
Wherever possible, should suggest actions to correct the
error
• Wherever possible, should be linked with the help system
User Support..
• Factors considered in wording messages. 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.
 User Support

• User documentation:
• The system manual should be more detailed than the online help
• Types of user documentation:
• Functional description
• Installation document
• Introductory manual
• Reference manual
• Administrator’s manual
User Support
• Document types for user support
System Description of Installation Novice Getting
evaluators services document users started
Experienced
Functional System How to install Introductory
administrators users
description the system manual
Reference Facility System ministrator’s Operation and
manual description administratorsAd maintenance
guide

Interface Evaluation.
•Usability criteria
Attribute Description
Learnability How long does it take a new user t o become
productive with the system?
Speed of operation How well does the system response match the
user’s work practice?
Robustness How tolerant is the system of user error?
Recoverability How good is the system at recovering from user
errors?
Adaptability How closely is the system tied to a single model of
work?
Interface Evaluation
• Evaluation of user interfaces:
• Comprehensive statistical assessment based on many
experiments and involving users and specialists
• Less expensive techniques for user interface
evaluation: • Questionnaires
• Observations of users at work
• Video snapshots of typical uses
• Software components that gather information on the usage of the user interface
• Software components that allow direct feedback from users

ACTIVITY
GUI COMPARISON
The GUI Comparison Game aims to engage
participants in a discussion about various
graphical user interfaces (GUIs) and analyze
how design principles are implemented in
real-world applications.
 QUESTIONS:
1.What is an example of bad UI?
2.What makes a UI good or
 bad?
Assessment
Assessment
• You have been tasked with creating a touchscreen interface for an
ATM (ATM). This new ATM features no physical buttons and a
touchscreen similar to the iPhone's (with multi-touch). Draw three
different ATM user interface designs and say which one you like
most.

• Consider the wide spectrum of possible ATM users, including the

elderly, while creating your designs. Also take into account the
effects of eliminating the physical buttons that are often found on
ATMs in favor of a touchscreen. How will users be able to detect a
touch sensitive screen?
• How do you deal with touch screen issues like the discrepancy
between the user's real touch and where they believe they
 touched?
Assessment
Your ATM interface must support the following
functions: • Entering a PIN to access the ATM
• Fast Cash Withdrawal in these amounts: 20, 40, 60, 80,
100 • Withdrawal in any amount
• Deposit
• Check Account Balance

End of Lecture