DYP

Chapter 2
Design Process

Mr. Pralhad Gavali

 DYP
THE USER INTERFACE DESIGN PROCESS
 DYP
THE USER INTERFACE DESIGN PROCESS
14 Steps for User Interface Design and Development :
Step 1: Know Your User or Client.
Step 2: Understand the Business Function
Step 3: Understand the Principles of Good Screen Design.
Step 4: Develop System Menus and Navigation Schemes.
Step 5: Select the Proper Kinds of Windows.
Step 6: Select the Proper Device-Based Controls.
Step 7: Choose the Proper Screen-Based Controls.
Step 8: Write Clear Text and Messages.
Step 9: Provide Effective Feedback and Guidance and Assistance
Step 10: Provide Effective Internationalization and Accessibility.
Step 11: Create Meaningful Graphics, Icons, and Images.
Step 12: Choose the Proper Colors.
Step 13: Organize and Layout Windows and Pages.
Step 14: Test, Test, and Retest
 DYP
OBSTACLES AND PITFALLS IN THE DEVELOPMENT PATH
Obstacles in the Development Path
1) Nobody ever gets it right the first time
2) Good design requires living in a sea of changes
3) Even if you have made the best system humanly possible,
people will still make mistakes when using it.
4) Designers need good tools.
Common pitfalls in the Development Path
 DYP
STEP 1: KNOW YOUR USER OR CLIENT
 Understand how people interact with computers
 Understand the human characteristics important in design
 Identify the user’s level of knowledge and experience
 Identify the characteristics of the user’s tasks and jobs
 Identify the user’s psychological characteristics
 Identify the user’s physical characteristics
 Employ recommended methods for gaining understanding of users.
 DYP
HUMAN INTERACTION WITH COMPUTERS

Step1 –A ) Understand how people interact with computers

• Why people have trouble with computers

• Responses to poor design
 DYP
HUMAN INTERACTION WITH COMPUTERS
Why people have trouble with computers?
Programmers, systems analysts, and system designers are responsible
for design of business computer systems, They have extensive technical
knowledge but little behavioral training, little training in usability
 Poorly designed interfaces.
 DYP
HUMAN INTERACTION WITH COMPUTERS
What makes a system difficult to use in the eyes of its user?
1) Too much flexibility: When the needs of a user are not well understood, the
tendency is to build into a system as many functions as possible. More
functions result in higher interface complexity. Higher complexity requires
more learning and results in less efficient human performance i.e. as the
flexibility of a system increases, its usability decreases
2) Use of jargon: Learning to use a system often requires learning a new
language
3) Non-obvious design: Complex or novel design elements are not obvious
4)Disparity in problem-solving strategies : do not always read instructions
before taking an Action, they often get entangled in situations that are difficult
or impossible to get out of. The last resort action? Turn off the computer and
restart.
5) Design inconsistency : The same action may have different names, The
result is that system learning becomes an exercise
 DYP
RESPONSES TO POOR DESIGN
Psychological and Physical user responses to poor design
Typical psychological responses to poor design are:
Confusion: Conceptual model or underlying framework cannot be
understoodची
Annoyanceड : Inconsistencies in design slow computer reaction times,
difficulties in quickly finding information, out dated information, and
visual screen distractions are a few of the many things that may annoy
users.
Frustration: Inability to easily convey one's intentions to the computer, or
an inability to finish a task or satisfy a need can cause frustration.
Panic or stress: Unexpectedly long delays , unavailable systems or long
response times when the user is operating under a deadline
Boredom: Boredom results from improper computer pacing (slow
response times or long download times)
 DYP
RESPONSES TO POOR DESIGN
Typical physical responses to poor design are:
Abandonment of the system :The system is rejected
Partial use of the system: Only a portion of the system’s capabilities are
used
Indirect use of the system: An intermediary is placed between the
would-be user and the computer
Modification of the task: The task is changed to match the capabilities
of the system.
Compensatory activity : Additional actions are performed to
compensate for system inadequacies. Eg. manual reformatting of
information to match the structure required by the computer
Misuse of the system: The rules are bent to shortcut operational
difficulties
Direct programming: The system is reprogrammed by its user to meet
 DYP
IMPORTANT HUMAN CHARACTERISTICS IN DESIGN

Step 1: B) Understand the human characteristics important in

design

 Perception
 Memory
 Visual acuity
 Foveal and peripheral vision
 Sensory storage
 Information processing
 Learning
 Skill
 Individual differences
 DYP
IMPORTANT HUMAN CHARACTERISTICS IN DESIGN
 Perception : Perception is our awareness and understanding of the elements and objects.
सम
Perception is influenced by experience.
जThe perceptual characteristics include the following,
 Proximity : Our eyes and mind see objects as belonging together if they are near each other
in space.
 Similarity : Our eyes and mind see objects as belonging together if they share a common
visual property, such as color, size, shape, brightness, or orientation.
 Matching patterns : We respond similarly to the same shape in different sizes. The letters of
संक्षिप्तप
the alphabet, for example, possess the same meaning, regardless of physical size.
णा
 Succinctness : simplicity is easier to remember.
 Closure : Our perception is synthetic; it establishes meaningful wholes
 Unity : Objects that form closed shapes are perceived as a group
 Continuity
 Balance : We desire stabilization in our viewing environment
 Expectancies : Perception is also influenced by expectancies
 Context : Context, environment, and surroundings also influence individual perception.
 Signals versus noise : Important stimuli are called signals; those that are not important or
unwanted are called noise.
 DYP
IMPORTANT HUMAN CHARACTERISTICS IN DESIGN
Memory: reduce user memory loads, thus enhancing system usability, include
the following:
 Presenting information in an organized, structured, familiar, and meaningful
way.
 Placing all required information for task performance in close physical
proximity.
 Placing important items at the beginning or end of listing, not in the middle.
These items will be learned faster and recalled better.
 Not requiring people to perform other tasks using working memory
 Making important items unique or distinctive in some manner because the
likelihood of their being remembered will be increased.
 Highlighting key elements is one way to do this.
 DYP
IMPORTANT HUMAN CHARACTERISTICS IN DESIGN
Visual acuityतीक्ष्:णता The capacity of the eye to resolve details is called
visual acuity.
Patterns of screens must be carefully chosen to avoid this visual
distraction.
Every designer has the intention of designing a product that succeeds in
capturing attention.

 Display Size
 Font Size, Style
 Visual chunks
 Colors
 line spacing
 the number of characters on a screen
 DYP
IMPORTANT HUMAN CHARACTERISTICS IN DESIGN
Foveal and peripheral vision: Foveal vision is used to focus directly on
something; peripheral vision senses anything in the area surrounding the
location we are looking at, but what is there cannot be clearly resolved
because of the limitations in visual acuity just described.
Care should be exercised in design to utilize peripheral vision in its
positive nature, avoiding its negative aspects.
Information processing: information processing time increases as the
number of alternative choices increases. So Minimize the number of
options presented to the user
Learning: A design developed to minimize human learning time. People
are very sensitive even to minor changes
 DYP
IMPORTANT HUMAN CHARACTERISTICS IN DESIGN
Skill: The goal of human performance is to perform skillfully, Screen
design must permit development of increasingly skillful performance.

Individual differences: The design must permit people with widely

varying characteristics to satisfactorily and comfortably learn the task or
job, or use the Website.
 DYP
HUMAN CONSIDERATION IN DESIGN
Step 1: C) Identify the user’s level of knowledge
and experience
 DYP
HUMAN CONSIDERATION IN DESIGN
Step 1: D) Identify the characteristics of the user’s
tasks and jobs
 DYP
HUMAN CONSIDERATION IN DESIGN

Step 1: E) Identify the user’s psychological

characteristics
 DYP
HUMAN CONSIDERATION IN DESIGN

Step 1: F) Identify the user’s Physical characteristics

 DYP
GAINING UNDERSTANDING OF USERS

• Visit customer locations

• Talk with users/direct contact
• Observe users working (tasks, problems)
• Videotape users working
• Have users think aloud as they work
• Try the job yourself
• Use surveys/questionnaires (bigger sample)
• Establish testable behavioral target goals
• Involve user in the design process
 DYP

Human Interaction
Speeds
 DYP
HUMAN INTERACTION SPEEDS
The speed at which people can perform using various communication
methods has been studied by a number of researchers.
The Typical Interaction Speed for various task are listed as,
- Reading
- Listing
- Specking
- Keying
- Hand printing

https://www.youtube.com/watch?v=b1hJfvWfnFg
 DYP
HUMAN INTERACTION SPEEDS
 DYP

Understanding Business
Functions
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
The general steps to be performed are the following:
 Perform a business definition and requirements analysis.
 Determine basic business functions.
 Describe current activities through task analysis.
 Develop a conceptual model of the system.
 Establish design standards or style guides.
 Establish system usability design goals.
 Define training and documentation needs.
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
1) Perform a business definition and requirements analysis:

The objective of this phase is to establish the need for a system. A

requirement is an objective that must be met. A product description is
developed and refined, based on input from users, marketing, or
other interested parties.

Information Collection Techniques:

1) Direct Methods
2) Indirect methods
3) Requirements collection guidelines
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
Information Collection Techniques:
1) Direct Methods
 Individual Face-to-Face Interview : full
attention, gain additional information, derive a
deeper understanding of your users, their
experiences, attitudes, beliefs, and desires

 Telephone Interview or Survey: structure and

be well planned, less expensive, It is
impossible to gather contextual information

 Traditional Focus Group: A small group of

users (8 to 12) and moderator to discuss the
requirements. The purpose is to probe users’
experiences, attitudes, beliefs, and desires, and
to obtain their reactions to ideas.
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
Information Collection Techniques:
1) Direct Methods
 Facilitated Team Workshop: Team
workshops have had the potential to
provide much useful information.

 Observational Field Study : To see and

learn what users actually do, they are
watched, Observation provides good
insight into tasks being performed , When
taking notes, the evaluator must quickly
decide what to record, and important
aspects may be missed
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
Information Collection Techniques:
1) Direct Methods
 User-Interface Prototyping: A
demonstration model, or very early
prototype, is presented to users for their
comments concerning functionality and to
clarify requirements
 Usability Laboratory Testing :A special
laboratory is constructed and users are
brought in to perform actual newly designed
tasks. They are observed, and the results are
measured and evaluated to establish the
usability of the product at that point in time.
 Card Sorting for Web Sites :This is a
technique used to establish hierarchical Card Sorting
:https://www.youtube.com/watch?
groupings and the information architecture v=25RqpGJ4tJ8
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
Information Collection Techniques:
2) Indirect Methods
 MIS Intermediary : A company representative who defines the user’s goals and needs to designers
and developers fulfills this intermediary role. This representative may come from the Management
Information Services department.
 Paper Surveyor Questionnaire :A paper questionnaire or survey is administered to a sample of
users to obtain their needs
 Electronic Surveyor Questionnaire :Questionnaire or survey is administered to a sample of users
via e-mail or the Web
 Electronic Focus Group : An electronic focus group is similar to a traditional focus group except
that the discussion is accomplished electronically using specialized software on a workstation, e-
mail, or a Web site.
 Marketing and Sales : Company representatives who regularly meet customers obtain suggestions
or needs, current and potential.
 Support Line : Information is collected by the unit (Customer Support, Technical Support, Help
Desk, and so on) that helps customers with day-to-day problems.
 E-Mail or Bulletin Board: Problems, questions, and suggestions by users posted to a bulletin
board, a guest book, or through e-mail are gathered and evaluated.
 User Group : customer groups who convene periodically to discuss system and software usage are
evaluated
 Competitor Analyses : Reviews of competitor’s products, or Web sites, can also be used to gather
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
Information Collection Techniques:
3) Requirements collection guidelines

 Focus on identifying the stakeholders’ needs.

 Involve all the stakeholder groups.
 Involve more than one representative from each stakeholder group.
 Use a combination of data gathering techniques. • Support the data-
gathering sessions with suitable props.
 Run a pilot session if possible, to work out any kinks.
 Understand what you are really looking for (though compromise may be
needed).
 Carefully consider the means used to record the data during a face-to-face
data gathering session.
 DYP
POSSIBLE PROBLEMS IN REQUIREMENTS COLLECTION
■■ Not enough user, customer, and other interested party involvement in the
process.
The result may be incomplete requirements.
■■ Lack of requirements management or coordination. Requirement modifications
are not recorded, tracked properly, or carried out. Requirements may be inaccurate or
incomplete.
■■ Communication problems among all participants. It is possible that not all
participants understand the exact requirements.
■■ Capturing the relevant information may be difficult. The relevant knowledge
may exist in many places and locations, including books, operating manuals, and in
people’s heads.
■■ People who do understand the problem may be constrained. Heavy workloads
and a lack of time may make people reluctant to, or unable to, participate.
■■ Organizational and political factors and agendas may influence the process.
The resulting views may not tally with the users views. Resistance to new ideas and
change may be reflected in comments made.
■■ Disparities in knowledge may exist. Some people may know what they want only
in general terms, whereas others may be forceful and detailed about their wants.
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
2) Determine basic business functions :
A detailed description of what the product will do is prepared. Major
system functions are listed and described, including critical system inputs
and outputs.
A flowchart of major functions is developed

The process the developer will use is summarized as,

 Gain a complete understanding of the user’s mental model based upon
■■ The user’s needs and the user’s profile.
■■ A user task analysis.
 Develop a conceptual model of the system based upon the user’s
mental model.
■■ Defining objects.
■■ Developing metaphors.
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
2) Determine basic business functions : Mental Model and Task Analysis
Mental Model:
 A mental model is simply an internal representation of a person’s current
understanding of something.
 We develop mental models of things and people we interact with.
 Provide information about how users perceive the world and interact with
products or services.
 A mental model is an internal representation of a person’s current
conceptualization and understanding of something: themselves, other people,
the environment, and the thing with which they interact.
 A ‘mental model’ refers to a user’s underlying expectations about how
something should work.
 Mental models are influenced by a person’s experiences, and people have
different experiences, no two user mental models are likely to be exactly the
same
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
3) Describe current activities through task analysis:
Task Analysis:
 User activities, the way in which people perform tasks, are precisely
described in a task analysis.
 Task analysis involves breaking down the user’s activities to the individual
task level.
 The goal is to obtain an understanding of why and how people currently do
the things
 The designer’s goal is to keep the tasks as simple as possible and eliminate
any unnecessary steps, keeping the process simple and straightforward
 It is one of methos to analyses the people job
What people do, what things they work with, What they must know
E.g.
For example, when interviewing users who are interested in gardening and the designer
realizes the majority of them have the problem of forgetting to water their plants every
morning, the designer may include an alarm-feature in the final design to address this
 DYP
UNDERSTANDING BUSINESS FUNCTIONS

4) Develop a conceptual model of the system:

Developing the conceptual model:

 The output of the task analysis is the creation, by the designer, of a
conceptual model for the user interface.
 A conceptual model is based on the user’s mental model.
 A conceptual model is created by the designer as a high-level plan for how
the product will work and fit together.
 Such a model describes how the interface will present objects, the
relationships between objects, the properties of objects, and the actions that
will be performed
 A conceptual model is based on the user’s mental model.
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
Mental and conceptual Model
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
Guidelines for Designing Conceptual Models:

■■ Reflect the user’s mental model, not the designer’s.

■■ Draw physical analogies or present metaphors.
■■ Comply with expectancies, habits, routines, and stereotypes.
■■ Provide action-response compatibility.
■■ Make invisible parts and processes of a system visible.
■■ Provide proper and correct feedback.
■■ Avoid anything unnecessary or irrelevant.
■■ Provide design consistency.
■■ Provide documentation and a help system that will reinforce the
conceptual model.
■■ Promote the development of both novice and expert mental models.
 DYP
UNDERSTANDING BUSINESS FUNCTIONS
5) Establish design standards or style guides
This text provides an extensive collection of design principles and design rules to achieves
design consistency.
This is valuable to users because the standards and guidelines
■■ Allow faster performance.
■■ Reduce errors.
■■ Reduce training time.
■■ Foster better system utilization.
■■ Improve satisfaction.
■■ Improve system acceptance.
■■ Reduce development and support costs.

This is valuable to designers because

■■ Increase visibility of the human-computer interface.
■■ Simplify design.
■■ Provide more programming and design aids, reducing programming time.
■■ Reduce redundant effort.
■■ Reduce training time.
UNDERSTANDING BUSINESS FUNCTIONS
6) Define training and documentation needs
Training and documentation are also an integral part of any development
effort.
Training:
Training may include such tools as formal or video training, manuals,
online tutorials, reference manuals, quick reference guides, and online help.
Any potential problems can also be identified and addressed earlier in the
design process, reducing later problems and modification costs.
Documentation:
System documentation is a reference point, a form of communication
Types of documentation into two basic types,
•system documentation :Records detailed information about a system’s
design specifications, its internal workings, and its functionality.
•user documentation :is written or other visual information about how an
application system works and how to use it.
 DYP
USER INTERFACE DESIGN PROCESSES
 DYP
USER INTERFACE DESIGN PROCESSES
1) Functionality Requirements Gathering: Creates a list of device functionalities that
are needed to fulfil the user's project goal and specification
2) User and Task Analysis :
• What do you think the user would like the system to do?
• What role does the system fit in the user's everyday activities or workflow?
• How technically savvy is the user, and what other systems does the user already
use?
• What styles of user interface look and feel do you think the user prefers?
3) Information Architecture : Process development or the system's information flow
4) Prototyping : paper prototypes of all look and feel components as well as the
majority of the content
5) Usability Inspection :Allowing an evaluator to examine a user interface
6)Usability Testing : Prototypes are tested on a real user, often using a method known
as think-aloud protocol, in which we can ask the user to speak about their views during
the experience
7)Graphical User Interface Design :It is the actual look and feel of the design of the
final graphical user interface (GUI).