Module 4

User Interface Design

Why User Interface
⚫Any system/product – human interaction
⚫If a product is to be successful, it must exhibit good
usability
⚫usability - a qualitative measure of the ease and
efficiency with which a human can interact with
system
⚫Initially people are required to conform to
technology but now technology conforms to people
⚫If software is difficult to use,
⚫if it forces you into mistakes,
⚫or if it frustrates your efforts to accomplish your
goals,

⚫ you won’t like it, regardless of the computational

power it exhibits,
⚫the content it delivers,
⚫or the functionality it offers
What
➢
is UI
UI design creates an effective communication medium between a human and a
computer
➢ User interface is the front-end application view to which user interacts in order
to use the software.
➢ The software becomes more popular if its user interface is:
• Attractive
• Simple to use
• Responsive in short time
• Clear to understand
• Consistent on all interface screens
There are two types of User Interface:
1. Command Line Interface: Command Line Interface provides a command prompt,
where the user types the command and feeds to the system. The user needs to
remember the syntax of the command and its use.
2. Graphical User Interface: Graphical User Interface provides the simple interactive
interface to interact with the system. GUI can be a combination of both hardware and
software. Using GUI, user interprets the software.
Interface Design
Easy to learn?

Easy to use?

Easy to understand?
Interface Design
Typical Design Errors

lack of consistency
too much memorization
no guidance / help
no context sensitivity
poor response
Arcane/unfriendly
THE GOLDEN RULES
Stated by Theo Mandel that must be followed during the design of
the interface.
1. Place the user in control

2. Reduce the user’s memory load

3. Make the interface consistent

1. Place the user in control
• Define the interaction modes in such a way that does not force the
user into unnecessary or undesired actions: The user should be able
to easily enter and exit the mode with little or no effort.
• Provide for flexible interaction: Different people will use different
interaction mechanisms, some might use keyboard commands, some
might use mouse, some might use touch screen, etc. Hence all
interaction mechanisms should be provided.
• Allow user interaction to be interruptible and undoable: When a
user is doing a sequence of actions the user must be able to interrupt
the sequence to do some other work without losing the work that had
been done. The user should also be able to do undo operation.
• Streamline interaction as skill level advances and allow the interaction
to be customized: Advanced or highly skilled user should be provided
a chance to customize the interface as user wants which allows
different interaction mechanisms so that user doesn’t feel bored while
using the same interaction mechanism.
• Hide technical internals from casual users: The user should not be
aware of the internal technical details of the system. He should
interact with the interface just to do his work.
• Design for direct interaction with objects that appear on screen: The
user should be able to use the objects and manipulate the objects that
are present on the screen to perform a necessary task. By this, the user
feels easy to control over the screen.
2. Reduce the user’s memory load
➢ The more a user has to remember, the more error-prone
the interaction with the system will be.
➢ It is for this reason that a well-designed user interface does
not tax the user’s memory

• Reduce demand on short-term memory: When users are involved in

some complex tasks the demand on short-term memory is significant.
So the interface should be designed in such a way to reduce the
remembering of previously done actions, given inputs and results.
• Establish meaningful defaults: Always initial set of defaults should
be provided to the average user, if a user needs to add some new
features then he should be able to add the required features.
• Define shortcuts that are intuitive: Mnemonics should be used by
the user. Mnemonics means the keyboard shortcuts to do some
action on the screen.
• The visual layout of the interface should be based on a real-world
metaphor: Anything you represent on a screen if it is a metaphor for
real-world entity then users would easily understand.
• Disclose information in a progressive fashion: The interface should
be organized hierarchically i.e. on the main screen the information
about the task, an object or some behavior should be presented first at
a high level of abstraction. More detail should be presented after the
user indicates interest with a mouse pick.
3. Make the Interface Consistent
➢ The interface should present and acquire information in a
consistent fashion.
➢ This implies that

1. All visual information is organized according to a design

standard that is maintained throughout all screen displays,
2. Input mechanisms are constrained to a limited set that are
used consistently throughout the application.
3. Mechanisms for navigating from task to task are consistently
defined and implemented
• Allow the user to put the current task into a meaningful
context: Many interfaces have dozens of screens. So it is
important to provide indicators consistently so that the user
know about the doing work. The user should also know from
which page has navigated to the current page and from the
current page where can navigate.
• Maintain consistency across a family of applications: The
development of some set of applications all should follow and
implement the same design, rules so that consistency is
maintained among applications.
• If past interactive models have created user expectations do not
make changes unless there is a compelling reason.
 User Interface Analysis and Design
Models
There are four different kinds of models come into play when a
user interface is analyzed and designed.

• User profile model

• Design model
• Implementation model
• User's mental model
 1. User profile model
Established by a human engineer or software engineer
• 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
• The underlying sense of the application
• an understanding of the functions that are performed
• the meaning of input and output
• 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
2. Design model
Created by a software engineer

• Derived from the analysis model of the requirements

incorporates data, architectural, interface, and procedural
representations of the software

• Constrained by information in the requirements

specification that helps define the user of the system.
3. Implementation model

Created by the software implementer

• 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
4. User's mental model

➢ Developed by the user when interacting with the application

➢ 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
➢The role of the interface designer is to merge these
differences and derive a consistent representation of the
interface
 Interface Design Process
The analysis and design process of a user interface is iterative and can
be represented by a spiral model.
1. Interface analysis and modeling
User, task, environmental analysis and modeling

1. Profile of users
➢ Initially, the focus is based on the profile of users
who will interact with the system, i.e. understanding,
skill and knowledge, type of user, etc. based on the
user’s profile users are made into categories.
➢ From each category requirements are gathered.
➢ Based on the requirements developer understand
how to develop the interface.
• Are users trained professionals, technician, clerical, or
manufacturing workers?
• What level of formal education does the average user
have?
• Are the users capable of learning from written materials or
have they expressed a desire for classroom training?
• Are users expert typists or keyboard phobic?
• What is the age range of the user community?
• Will the users be represented predominately by one
gender?
• How are users compensated for the work they perform?
• Do users work normal office hours or do they work until the
job is done?
• Is the software to be an integral part of the work users do or
will it be used only occasionally?
• What is the primary spoken language among users?
• What are the consequences if a user makes a mistake using the
system?
• Are users experts in the subject matter that is addressed by the
system?
• Do users want to know about the technology the sits behind
the interface?
 2. Task Analysis
➢Once all the requirements are gathered a detailed analysis is
conducted. In the analysis part, the tasks that the user performs
to establish the goals of the system are identified, described and
elaborated.
➢tasks that the user performs to accomplish the goals
Answers 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?
3. Environment Analysis
➢The analysis of the user environment focuses on the physical
work environment.
➢Among the questions to be asked are:
• Where will the interface be located physically?
• Will the user be sitting, standing, or performing other tasks unrelated to the
interface?
• Does the interface hardware accommodate space, light, or noise constraints?
• Are there special human factors considerations driven by environmental factors?
4. Analysis of display content

➢ Are different types of data assigned to consistent geographic

locations on the screen (e.g., photos always appear in the
upper right hand corner)?
➢ Can the user customize the screen location for content?
➢ Is proper on-screen identification assigned to all content?
➢ If a large report is to be presented, how should it be
partitioned for ease of understanding?
➢ Will mechanisms be available for moving directly to
summary information for large collections of data.
➢ Will graphical output be scaled to fit within the bounds of the
display device that is used?
➢ How will color to be used to enhance understanding?
➢ How will error messages and warning be presented to the
user?
 Analysis Model

➢Create an analysis model for the interface

➢The design activity commences based on this model
Scenario:

• The homeowner wishes to gain access to the SafeHome system

installed in his house. Using software operating on a remote PC
(e.g., a notebook computer carried by the homeowner while at
work or traveling), the homeowner determines the status of the
alarm system, arms or disarms the system, reconfigures security
zones, and views different rooms within the house via
preinstalled video cameras.
 2. Interface Design
➢The goal of this phase is to define the set of interface objects and
actions i.e. Control mechanisms that enable the user to perform
desired tasks.
➢Indicate how these control mechanisms affect the system.
➢Specify the action sequence of tasks and subtasks, also called a user scenario.
➢Indicate the state of the system when the user performs a particular
task.
➢ Always follow the three golden rules stated by Theo Mandel.
➢Design issues such as response time, command and action
structure, error handling, and help facilities are considered as the
design model is refined.
➢Enable a user to perform all defined tasks
➢This phase serves as the foundation for the implementation phase.
• Homeowner tasks:
3. Interface Construction
➢Also called interface Implementation
➢The implementation activity begins with the creation of
prototype (model) that enables usage scenarios to be evaluated.
➢As iterative design process continues a User Interface toolkit
that allows the creation of windows, menus, device interaction,
error messages, commands, and many other elements of an
interactive environment can be used for completing the
construction of an interface.
4. Interface Validation

➢Testing the interface

➢ The interface should be in such a way that
➢It should be able to perform tasks correctly and it should be able to handle a
variety of tasks.
➢It should achieve all the user’s requirements.
➢ It should be easy to use and easy to learn.
➢Users should accept the interface as a useful one in their work.
Design Issues
• Response time
• Help facilities
• Error handling
• Menu and command labelling
• Application accessibility
• Internationalization
 Response time
• System response time is measured from the point at which the user performs
some control action (e.g., hits the return key or clicks a mouse) until the
software responds with desired output or action.
• System response time has two important characteristics: length and
variability.
Length:
▪ If the length of system response is too long, user frustration and stress is the
inevitable result.
▪ A rapid response may force the user to rush and therefore make mistakes.
Variability:
▪ Refers to the deviation from average response time, and in many ways, it is
the most important response time characteristic.
▪ Low variability enables the user to establish an interaction rhythm, even if
response time is relatively long.
▪ For example, a 1-second response to a command is preferable to a response
that varies from 0.1 to 2.5 seconds.
Help Facilities
• User manuals or on-line help facilities that enable a user to get a question
answered or resolve a problem without leaving the interface.
A number of design issues must be addressed when a help facility is
considered:
• Will help be available for all system functions and at all times during
system interaction? Options include help for only a subset of all functions
and actions or help for all functions.
• How will the user request help? Options include a help menu, a special
function key, or a HELP command.
• How will help be represented? Options include a separate window, a
reference to a printed document (less than ideal), or a one- or two-line
suggestion produced in a fixed screen location.
• How will the user return to normal interaction? Options include a return
button displayed on the screen, a function key, or control sequence.
• How will help information be structured? Options include a "flat"
structure in which all information is accessed through a keyword, a
layered hierarchy of information that provides increasing detail as the
user proceeds into the structure, or the use of hypertext.
Error Handling

• Error messages and warnings are "bad news" delivered to users of

interactive systems when something has gone awry.
• At their worst, error messages and warnings impart useless or misleading
information and serve only to increase user frustration. There are few
computer users who have not encountered an error of the form:
SEVERE SYSTEM FAILURE -- 14A
An effective error message philosophy can do much to improve
the quality of an interactive system and will significantly reduce
user frustration when problems do occur.
➢In general, every error message or warning produced by an
interactive system should have the following characteristics:
➢ The message should describe the problem in jargon that the user can
understand.
➢The message should provide constructive advice for recovering from the
error.
➢The message should indicate any negative consequences of the error
(e.g., potentially corrupted data files) so that the user can check to ensure
that they have not occurred (or correct them if they have).
➢The message should be accompanied by an audible or visual cue. That is,
a beep might be generated to accompany the display of the message, or
the message might flash momentarily or be displayed in a color that is
easily recognizable as the "error color."
➢The message should be "nonjudgmental." That is, the wording should
never place blame on the user.
 Menu and command labelling
• 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, but many power-users
continue to prefer a command-oriented mode of interaction.
• A number of design issues arise when typed commands or menu
labels are provided as a mode of interaction:
Application Accessibility
Internationalization
• What is UI
• Golden Rules Design Issues
• Place the user in control • Response time
• Reduce the user’s memory load • Help facilities
• Make the interface consistent • Error handling

• UI Design models • Menu and command

labelling
• User profile model • Application accessibility
• Design model • Internationalization
• Implementation model
• User's mental model
• UI design Process