Chapter 15

User Interface Design

Prepared by
R.Bhavani
AP-II/CSE/SRC
Interface Design

•Easy to use?
• Easy to understand?
• Easy to learn?
Typical Design Errors
Lack of consistency
Too much memorization
No guidance / help
No context sensitivity
Poor response
Arcane/unfriendly
 The Golden Rules of
User Interface Design

Place the user in control

Reduce the user’s memory load
Make the interface consistent
 Place the User in Control
Define interaction modes in a way that does not
force a user into unnecessary or undesired actions
The user shall be able to enter and exit a mode with little or
no effort (e.g., spell check  edit text  exit check)
Provide for flexible interaction
The user shall be able to perform the same action via keyboard
commands, mouse movement, a digitizer pen or voice recognition
Allow user interaction to be interruptible and
"undo"able
The user shall be able to easily interrupt a sequence of actions to
do something else (without losing the work that has been done so
far)
The user shall be able to "undo" any action

6
 Place the User in Control
(continued)
Streamline interaction as skill levels advance and allow the
interaction to be customized
The user shall be able to use a macro mechanism to perform a
sequence of repeated interactions and to customize the interface
Hide technical internals from the casual user
The user shall not be required to directly use operating system, file
management, networking. etc., commands to perform any actions.
Instead, these operations shall be hidden from the user and performed
"behind the scenes" in the form of a real-world abstraction
Design for direct interaction with objects that appear on the
screen
The user shall be able to manipulate objects on the screen in a manner
similar to what would occur if the object were a physical thing (e.g.,
stretch a rectangle, press a button, move a slider)
7
Reduce the User's Memory
Load

Reduce demand on short-term memory
The interface shall reduce the user's requirement to remember
past actions and results by providing visual cues of such actions
Establish meaningful defaults
The system shall provide the user with default values that
make sense to the average user but allow the user to change
these defaults
The user shall be able to easily reset any value to its original
default value
Define shortcuts that are intuitive
The user shall be provided mnemonics (i.e., control or alt
combinations) that tie easily to the action in a way that is easy
to remember such as the first letter 8
Reduce the User's Memory
Load (continued)
The visual layout of the interface should be based on a
real world metaphor
The screen layout of the user interface shall contain well-
understood visual cues that the user can relate to real-
world actions
Disclose information in a progressive fashion
When interacting with a task, an object or some behavior,
the interface shall be organized hierarchically by moving the
user progressively in a step-wise fashion from an abstract
concept to a concrete action (e.g., text format options 
format dialog box)

The more a user has to remember, the more 9

error-prone interaction with the system will be
 Make the Interface

Consistent
The interface should present and acquire information in a consistent fashion
All visual information shall be organized according to a design
standard that is maintained throughout all screen displays
Input mechanisms shall be constrained to a limited set that is used
consistently throughout the application
Mechanisms for navigating from task to task shall be consistently
defined and implemented
Allow the user to put the current task into a meaningful context
The interface shall provide indicators (e.g., window titles, consistent
color coding) that enable the user to know the context of the work at
hand
The user shall be able to determine where he has come from and what
alternatives exist for a transition to a new task 10
Make the Interface Consistent
(continued)
Maintain consistency across a family of applications
A set of applications performing complimentary functionality
shall all implement the same design rules so that consistency is
maintained for all interaction
If past interactive models have created user expectations, do not
make changes unless there is a compelling reason to do so
Once a particular interactive sequence has become a de facto
standard the application shall continue this expectation in every
part of its funtionality
Example for de facto standard - the use of alt-S to save a file

11
USER INTERFACE ANALYSIS
AND DESIGN
 Introduction
Four different models come into play when a user interface is analyzed
and designed
User profile model – Established by a human engineer or software
engineer – (a profile of all end users of the system)
Design model – Created by a software engineer – (a design
realization of the user Model)
Implementation model – Created by the software implementers (the
interface “look and feel” coupled with supporting information
that describe interface syntax and semantics)
User's mental model (system perception)– Developed by the user
when interacting with the application (the user’s mental image of
what the interface is)
The role of the interface designer is to reconcile these differences and derive
a consistent representation of the interface 14
 User Profile Model
Establishes the profile of the end-users of the system
Based on age, gender, physical abilities, education, cultural or ethnic
background, motivation, goals, and personality
Considers syntactic knowledge of the user
The mechanics of interaction that are required to use the interface
effectively
Considers semantic knowledge of the user
The underlying sense of the application; an understanding of the functions
that are performed, the meaning of input and output, and the objectives of
the system
Categorizes users as
Novices
No syntactic knowledge of the system, little semantic knowledge of
the application, only general computer usage
Knowledgeable, intermittent users
Reasonable semantic knowledge of the system, low recall of syntactic
information to use the interface
Knowledgeable, frequent users
Good semantic and syntactic knowledge (i.e., power user), look for
shortcuts and abbreviated modes of operation 15
User's Mental Model
Often called the user's system perception
Consists of the image of the system that users
carry in their heads
Accuracy of the description depends upon the
user’s profile and overall familiarity with the
software in the application domain

16
 Implementation Model
It combines the outward manifestation of the
computer- based system coupled with all
supporting information that describe system syntax and
semantics
Consists of the look and feel of the interface combined with all
supporting information (books, videos, help files) that describe system
syntax and semantics
Strives to agree with the user's mental model; users then feel
comfortable with the software and use it effectively
Serves as a translation of the design model, to accomplish this
“melding” of the models, to accommodate the information
contained in the user model and accurately reflect syntactic and
semantic information about the interface. 17
User Interface Design Process
The analysis and design process for user
interfaces is iterative and can be represented
using a spiral model each of these tasks will occur
more than once, with each pass
around the spiral representing
additional elaboration of
requirements and the resultant
design

the construction activity

involves prototyping—
the only practical way to
validate what has been
designed
User Interface Analysis
Interface analysis means understanding the
problem before you attempt to design a solution.
(1) The people (end-users) who will interact with
the system through the interface;
(2) The tasks that end-users must perform to do
their work,
(3) The content that is presented as part of the
interface
(4) The environment in which these tasks will be
conducted.
Focuses on the profile of the users who will
interact with
the system. Skill level, business understanding,
and general receptiveness to the new system are 19
 User Analysis
Once general requirements have been defined, a more detailed
task analysis is conducted. Those tasks that the user performs to
accomplish the goals of the system are identified, described, and
elaborated.
Finally, analysis of the user environment focuses on the
characteristics of the physical work environment (e.g., location,
lighting, position constraints).
analysis action is used to create an analysis model for the interface
(basis for design activity.
The goal of interface design is to define a set of interface objects
and actions
(and their screen representations) that enable a user to perform all
defined tasks
Interface construction normally begins with the creation of a
prototype that
enables usage scenarios to be evaluated.(use interface toolkits)
Interface validation focuses on (1) the ability of the interface to
20
implement
 User Analysis Questions
in order to better understand the users of a system:

1) Are the users trained professionals, technicians, clerical or manufacturing

workers?
2) What level of formal education does the average user have?
3) Are the users capable of learning on their own from written materials or have
they expressed a desire for classroom training?
4) Are the users expert typists or are they keyboard phobic?
5) What is the age range of the user community?
6) Will the users be represented predominately by one gender?
7) How are users compensated for the work they perform ?
8) Do users work normal office hours, or do they work whenever the job is
required?
9) Is the software to be an integral part of the work users do, or will it be used
only occasionally?
10) What is the primary spoken language among users?
11) What are the consequences if a user makes a mistake using the system?
12) Are users experts in the subject matter that is addressed by the system?
21
13) Do users want to know about the technology that sits behind the interface?
 Task Analysis and Modeling
The goal of task analysis is to answer the following questions:
 What work will the user perform in specific circumstances?
 What tasks and subtasks will be performed as the user does
the work?
 What specific problem domain objects will the user
manipulate as work is performed?
 What is the sequence of work tasks—the workflow?
 What is the hierarchy of tasks?
The user’s goal is to accomplish one or more tasks via the UI
text based UI , can’t display different information
simultaneously
Task Analysis and Modeling
Use Cases. - describes the manner in which an
actor interacts with a system. It shows how an
end user performs some specific work-related
task.
The use case is written in an informal style (a
simple paragraph) in the first person.

From it, you can extract tasks, objects, and the overall flow of the
Task Analysis and Modeling
Task Elaboration - also called functional
decomposition or stepwise refinement) as a
mechanism for refining the processing tasks.

Subtasks 1 to 7 can each be refined further

Task Analysis and Modeling
Object Elaboration: Extracting the physical objects
from the use case and categorize into classes.
Attributes and list of operations of each class are
defined.
For ex : furniture class – include attributes (size,
shape, location and others) , operations(select,
move, draw)
Workflow Analysis: Defines how a work process is
completed when several people (and roles) are
involved
Workflow can be represented effectively with a
UML swimlane diagram
Hierarchical Representation
Once workflow has been established, a task
hierarchy can be defined for each user type.
The hierarchy is derived by a stepwise
elaboration of each task identified for the
user.
 Analysis of Display Content
The format and aesthetics of the content
are considered

28
Analysis of the Work Environment
People do not perform their work in
isolation.
They are influenced by
The activity around them, the
physical characteristics of the
workplace,
The type of equipment they are
using, and
The work relationships they have
with other people.
If the products you design do not fit 29
User Interface Design steps

Using information developed during

interface analysis, define interface objects
and actions (operations).
Define events (user actions) that will
cause the state of the user interface to
change. Model this behavior.
Depict each interface state as it will
actually look to the end-user.
Indicate how the user interprets the state
of the system from information provided
through the interface.
Applying Interface Design Steps
Interface objects & actions from written use
case - Nouns (objects) and verbs (actions) are
isolated to create a list of objects and actions.
Types: Target, source, and application
objects
A source object (e.g., a report icon) is
dragged and dropped onto a target object
(e.g., a printer icon).
The implication of this action is to create a
hard-copy report.
An application object represents application-
specific data that are not directly manipulated
as part of screen interaction.
Applying Interface Design Steps
Applying Interface Design Steps
A preliminary sketch of the screen layout for
video monitoring
User Interface Design Patterns
A design pattern is an abstraction that
prescribes a design solution to a specific,
well-bounded design problem.
For ex: consider a situation in which a user
must enter one or more calendar dates,
sometimes months in advance
Laakso suggested
A pattern called CalendarStrip that
produces a continuous, scrollable calendar
Design Issues
 Design of a user interface evolves, four
common design issues (doesn’t occur until an
operational prototype is available)
 System response time,
 User help facilities,
 Error information handling,
 Command labeling
Design Issues
 Response time: - has two important characteristics:
length and variability.
 If system response is too long, user frustration and stress
are inevitable.
 Variability refers to the deviation from average response time
and in many ways, it is the most important response time
characteristic
 Help facilities -provide online help facilities that enable
a user to get a question answered or resolve a problem
without leaving the interface.
 Error Handling - every error message or warning
produced by an
interactive system should have the following
characteristics:
 (1) describes the problem in jargon that the user can
understand;
Design Issues
 Menu and Command Labeling. The typed
command was once the most common mode of
interaction between user and system software and
was commonly used for applications of every type.
 Today, the use of window-oriented, point-and pick
interfaces has reduced reliance on typed
commands.
 power-users prefer a command-oriented mode of
interaction
Design Issues
Application Accessibility: interface design
encompasses mechanisms that enable easy
access for those with special needs.
provide specific guidelines for “assistive
technology” that addresses the needs of those
with visual, hearing, mobility, speech, and
learning impairments.
Internationalization.- to create “globalized”
software to accommodate a generic core of
functionality.
Localization features enable the interface to be
customized for a specific market.

DESIGN

EVALUATION
Evaluation can span a formality spectrum that ranges from an
informal “test drive,” in which a user provides feedback to a
formally designed study that uses statistical methods for the
evaluation of questionnaires
 After the design model has been completed, a first-level
prototype is created. The prototype is evaluated by the user to
provide the efficacy of the interface (experts conduct reviews of
the interfaces called heuristic evaluations or cognitive
walkthroughs)
 If formal evaluation techniques are used (e.g., Questionnaires,
rating sheets), you can extract information from these data
 Design modifications are made based on user input, and the next
level prototype is created.
 The evaluation cycle continues until no further modifications to
the interface design are necessary.
DESIGN EVALUATION
The prototyping approach is effective, but is it
possible to evaluate the quality of a user interface
before a prototype is built (paper prototype -
developing a low-fidelity mock-up of the user
interface - and allow stakeholder to test the UI)
# of evaluation criteria can be applied during early
design reviews:
 Once – 1st prototype is built - collect a variety of
qualitative and quantitative data that will assist in
evaluating the interface.
 To collect qualitative data, questionnaires can be
distributed.
 If quantitative data are desired, a form of time-study
analysis can be conducted.
 Users are observed during interaction, and data—
such as number of tasks correctly completed over a
standard time period, frequency of actions, sequence
of actions, time spent “looking” at the display,
number and types of errors, error recovery time,
time spent using help, and number of help
references per standard time period—are collected
and used as a guide for interface modification.