UID-DESIGN PROCESS

Obstacles and Pitfalls in the Development Path

Gould (1988) has made these general observations about design:
• Nobody ever gets it right the first time.
• Development is chock-full of surprises.
• Good design requires living in a sea of changes.
• Making contracts to ignore change will never eliminate the need for
change.
• Even if you have made the best system humanly possible, people will still
make mistakes when using it.
• Designers need good tools.
• Common pitfalls are:

• No early analysis and understanding of the user’s needs and

expectations.
• A focus on using design features or components that are neat or glitzy
• Little or no creation of design element prototypes.
• No usability testing.
• No common design team vision of user interface design goals.
• Poor communication between members of the development team.
Designing for People: The Five Commandments
• Gain a complete understanding of users and their tasks
• Solicit early and ongoing user involvement.
• Perform rapid prototyping and testing.
• Modify and iterate the design as much as necessary
• Usability
• The term usability used to describe the effectiveness of human
performance. The term usability is defined as ―the capability to be
used by humans easily and effectively.
• Where,
• easily = to a specified level of subjective assessment,
• effectively = to a specified level of human performance
 Common Usability Problems
• Mandel (1994) lists the 10 most common usability problems in graphical
systems as reported by IBM usability specialists. They are:
1. Ambiguous menus and icons.
2. Languages that permit only single-direction movement through a system.
3. Input and direct manipulation limits.
4. Highlighting and selection limitations.
5. Unclear step sequences.
6. More steps to manage the interface than to perform tasks.
7. Complex linkage between and within applications.
8. Inadequate feedback and confirmation.
9. Lack of system anticipation and intelligence.
10. Inadequate error messages, help, tutorials, and documentation.
• Some Practical Measures of Usability
• Are people asking a lot of questions or often reaching for a manual?
• Are frequent exasperation responses heard?
• Are there many irrelevant actions being performed?
• Are there many things to ignore?
• Do a number of people want to use the product?
• Some Objective Measures of Usability
• How effective is the interface?
• Can the required range of tasks be accomplished: o
• At better than some required level of performance (for example, in terms of
speed and errors)?
• By some required percentage of the specified target range of users?
• Within some required proportion of the range of usage environments?
• How learnable is the interface? Can the interface be learned:
• Within some specified time from commissioning and start of user training?
• Based on some specified amount of training and user support?
• Within some specified relearning time each time for intermittent users?
The Design Team
• Provide a balanced design team, including specialists in:
• Development
• Human factors
• Visual design
• Usability assessment
• Documentation
• Training
Know your user or client
• To create a truly usable system, the designer must always do the
following:
• 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 needs, tasks, and jobs.
• Identify the user’s psychological characteristics.
• Identify the user’s physical characteristics.
• Employ recommended methods for gaining understanding of users.
Why People Have Trouble with Computers
• What makes a system difficult to use in the eyes of its user?
• Listed below are several contributing factors that apply to traditional
business systems.
• Use of jargon.
• Non-obvious design.
• Disparity in problem-solving strategies.
• Design inconsistency.
 Important Human Characteristics in Design
• Perception
Perception is our awareness and understanding of the elements and
objects of our environment through the physical sensation of our
various senses, including sight, sound, smell, and so forth.
Other 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
• We see an object as having some perfect or simple shape because perfection or simplicity
is easier to remember.
Closure.
• Our perception is synthetic; it establishes meaningful wholes. If something does not quite
close itself, such as a circle, square, triangle, or word, we see it as closed anyway.
Unity.
• Objects that form closed shapes are perceived as a group.
Continuity
• Shortened lines may be automatically extended.
Balance.
• We desire stabilization or equilibrium in our viewing environment.
Vertical, horizontal, and right angles are the most visually satisfying
and easiest to look at.
Expectancies.
• Perception is also influenced by expectancies; sometimes we
perceive not what is there but what we expect to be there.
Context.
• Context, environment, and surroundings also influence individual
perception.
• Signals versus noise.
Memory
• Memory is viewed as consisting of two components, long-term and
short-term (or working) memory.
• Sensory Storage
• Visual Acuity
• Foveal and Peripheral Vision
• Information Processing
• Mental Models
• Movement Control
• Learning
• Skill
• Individual Differences
Human Interaction Speeds
• The speed at which people can perform using various communication methods has
been studied by a number of researchers. The following, are summarized as table
below
 Methods for Gaining an Understanding of Users
• Visit user locations, particularly if they are unfamiliar to you, to gain an
understanding of the user’s work environment.

• Talk with users about their problems, difficulties, wishes, and what works well
now. Establish direct contact; avoid relying on intermediaries.

• Observe users working or performing a task to see what they do, their
difficulties, and their problems.

• Videotape users working or performing a task to illustrate and study problems

and difficulties.
 Methods for Gaining an Understanding of Users
• Learn about the work organization where the system may be installed.

• Have users think aloud as they do something to uncover details that may not
otherwise be solicited.

• Try the job yourself. It may expose difficulties that are not known, or expressed, by
users.

• Prepare surveys and questionnaires to obtain a larger sample of user opinions.

• Establish testable behavioral target goals to give management a measure for what
progress has been made and what is still required.
 Understand the Business Function
• The general steps to be performed are:
• 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.
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 or marketing. There are many techniques for capturing
information for determining requirements.
DIRECT METHODS
• Individual Face-to-Face Interview
• Telephone Interview or Survey
• Traditional Focus Group
• Facilitated Team Workshop
• Observational Field Study
• Requirements Prototyping
• User-Interface Prototyping
• Usability Laboratory Testing
• Card Sorting for Web Sites
INDIRECT METHODS
• MIS Intermediary
• Paper Survey or Questionnaire
• Electronic Survey or Questionnaire
• Iterative survey
• Electronic Focus Group
• Marketing and Sales
• Support Line
• E-Mail or Bulletin Board
• User Group, Competitor Analyses.
• Trade Show
 Determining Basic Business Functions
• 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.
• This includes:
• Defining objects.
• Developing metaphors.
Understanding the User’s Mental Model
• A mental model is an internal representation of a person’s current
conceptualization and understanding of something.

• Mental models are gradually developed in order to understand,

explain, and do something.

• Mental models enable a person to predict the actions necessary to do

things if the actions have been forgotten or have not yet been
encountered.
• Performing a Task Analysis

• Developing Conceptual Models

• A conceptual model is the general conceptual framework through which

the system’s functions are presented.

• 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.
 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 process 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.
• Defining Objects
• Determine all objects that have to be manipulated to get work done.
Describe:
• — The objects used in tasks.
• — Object behavior and characteristics that differentiate each kind of
object.
• — The relationship of objects to each other and the people using them.
• — The actions performed.
• — The objects to which actions apply.
• — State information or attributes that each object in the task must
preserve, display, or allow to be edited.
• Identify the objects and actions that appear most often in the workflow.
• Make the several most important objects very obvious and easy to
manipulate
• Developing Metaphors
• A common metaphor in a graphical system is the desktop and its
components,
• Choose the analogy that works best for each object and its actions.
• Use real-world metaphors.
• Use simple metaphors.
• Use common metaphors.
• Multiple metaphors may coexist.
• Use major metaphors, even if you can’t exactly replicate them visually.
• Test the selected metaphors.
 Design Standards or Style Guides
• A design standard or style guide documents an agreed-upon way of doing
something. It also defines the interface standards, rules, guidelines, and
conventions that must be followed in detailed design.

• Value of Standards and Guidelines

• Developing and applying design standards or guidelines achieve design
consistency.
• This is valuable to users because the standards and guidelines:
• o Allow faster performance.
• o Reduce errors.
• o Reduce training time.
• o Foster better system utilization.
• o Improve satisfaction.
• o Improve system acceptance
• They are valuable to system developers because they:
• o Increase visibility of the human-computer interface.
• o Simplify design.
• o Provide more programming and design aids, reducing programming time.
• o Reduce redundant effort.
• o Reduce training time.
• o Provide a benchmark for quality control testing
• Document Design
• Include checklists to present principles and guidelines.
• Provide a rationale for why the particular guidelines should be used.
• Provide a rationale describing the conditions under which various
design alternatives are appropriate.
• Design the guideline document following recognized principles for
good document design.
• Provide good access mechanisms such as a thorough index, a table of
contents, glossaries, and checklists
 System Training and Documentation
• Needs Training

• System training will be based on user needs, system conceptual design,

system learning goals, and system performance goals.

• 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,
and a more concrete design—words that can be seen and understood
based on user needs, system conceptual design, and system performance
goals.
• It will also be Creating documentation during the development progress
will uncover issues and reveal omissions that might not otherwise be
detected until later in the design process
 Understand the Principles of Good Screen
Design
• A well-designed screen:
• Reflects the capabilities, needs, and tasks of its users.
• Is developed within the physical constraints imposed by the hardware
on which it is displayed.
• Effectively utilizes the capabilities of its controlling software.
• Achieves the business objectives of the system for which it is
designed.
What Screen Users Want
• An orderly, clean, clutter-free appearance.
• An obvious indication of what is being shown and what should be done
with it.
• Expected information located where it should be.
• A clear indication of what relates to what, including options, headings,
captions, data, and so forth.
• Plain, simple English.
• A simple way of finding out what is in a system and how to get it out.
• A clear indication of when an action can make a permanent change in the
data or system
 Interface Design Goals
• To make an interface easy and pleasant to use, then, the goal in design is to:
• Reduce visual work.
• Reduce intellectual work.
• Reduce memory work.
• Reduce motor work.
• Minimize or eliminate any burdens or instructions imposed by technology.
 The Test for a Good Design
• Can all screen elements be identified by cues other than by reading
the words that make them up?

• Can all screen elements (field captions, data, title, headings, text,
types of controls, and so on) be identified without reading the words
that identify or comprise them? That is, can a component of a screen
be identified through cues independent of its content?

• If this is so, a person’s attention can quickly be drawn to the part of

the screen that is relevant at that moment.
Screen Meaning and Purpose
• Each screen element . . .
• — Every control
• — All text
• — The screen organization
• — All emphasis
• — Each color
• — Every graphic
• — All screen animation
• — Each message
• — All forms of feedback
Must . . .
• — Have meaning to screen users.
• — Serve a purpose in performing tasks.
• Organizing Screen Elements Clearly and Meaningfully
• Visual clarity is achieved when the display elements are organized and
presented in meaningful and understandable ways.
• Consistency
• Provide real-world consistency. Reflect a person’s experiences,
expectations, work conventions, and cultural conventions
• Provide internal consistency. Observe the same conventions and rules for
all aspects of an interface screen, and all application or Web site screens,
including,
• Operational and navigational procedures.
• Visual identity or theme.
• Component. • Organization. • Presentation. • Usage. • Locations
• Ordering of Screen Data and Content
• Divide information into units those are logical, meaningful, and sensible.
• Organize by the degree interrelationship between data or information.
• Provide an ordering of screen units of information and elements that is
prioritized according to the user’s expectations and needs.
• Possible ordering schemes include:
• Conventional.
• Sequence of use.
• Frequency of use.
• Function.
• Importance.
• General to specific.
• Upper-Left Starting Point
• Provide an obvious starting point in the screen’s upper-left corner.
• Screen Navigation and Flow
• Provide an ordering of screen information and elements that:
• Is rhythmic, guiding a person’s eye through the display.
• In establishing eye movement through a screen, also consider that the
eye tends to move sequentially, for example:
• From dark areas to light areas.
• From big objects to little objects.
• From unusual shapes to common shapes.
• From highly saturated colors to unsaturated colors
• Visually Pleasing Composition
Provide visually pleasing composition with the following qualities:
• Balance
• Symmetry
• Regularity.
• Predictability.
• Sequentially.
• Economy.
• Unity.
• Proportion.
• Simplicity.
• Groupings.
• Regularity
• Create regularity by establishing standard and consistently spaced
horizontal and vertical alignment points.
• Also, use similar element sizes, shapes, colors, and spacing.
• Balance
• Create screen balance by providing an equal weight of screen
elements, left and right, top and bottom.
• Symmetry
• Create symmetry by replicating elements left and right of the screen
centerline.
• Predictability
• Create predictability by being consistent and following conventional orders
or arrangements.

• Sequentiality
• Provide sequentiality by arranging elements to guide the eye through the
screen in an obvious, logical, rhythmic, and efficient manner.
• A brighter element before one less bright.
• — Isolated elements before elements in a group.
• — Graphics before text.
• — Color before black and white.
• — Highly saturated colors before those less saturated.
• — Dark areas before light areas.
• — A big element before a small one.
• — An unusual shape before a usual one.
• — Big objects before little objects.
• Unity
• Create unity by:
• — Using similar sizes, shapes, or colors for related information.
• — Leaving less space between elements of a screen than the space
left at the margins.

• Proportion
• Create windows and groupings of data or text with aesthetically
pleasing proportions.

• Groupings
Perceptual Principles and Functional Grouping
Perceptual Principles and Functional Grouping
• Grouping Using White Space.
• Grouping Using Borders.
• Grouping Using Backgrounds.
 Visual Style in Web Page Design
• Maintain a consistent and unified visual style throughout the pages of
an entire Web site.
• Base the visual style on:
• — The profile and goals of the Web site owner.
• — The profile, tastes, and expectations of the Web site user.
• Amount of Information.
• Web Page Size.
• Deciding on Long versus Short Pages.
• Scrolling and Paging
• Scrolling:
• — Avoid scrolling to determine a page’s contents.
• — Minimize vertical page scrolling.
• — When vertical scrolling is necessary to view an entire page
• Paging:
• — Encourage viewing a page through ―paging.
• — Create a second version of a Web site, one consisting of individual
screens that are viewed through ―paging.
• Distinctiveness
• Individual screen controls, and groups of controls, must be perceptually
distinct.
Screen controls:
• Should not touch a window border.
• Should not touch each other.
Field and group borders:
• Should not touch a window border.
• Should not touch each other.
Buttons:
• Should not touch a window border.
• Should not touch each other.
• A button label should not touch the button border.
• Adjacent screen elements must be displayed in colors or shades of
sufficient contrast with one another
• Focus and Emphasis
• Visually emphasize the:
• — Most prominent element.
• — Most important elements.
• — Central idea or focal point.

• Presenting Information Simply and Meaningfully.

• Typography.
• Captions/Labels
• Identify controls with captions or labels.
• Fully spell them out in a language meaningful to the user.
• Display them in normal intensity.
• Use a mixed-case font.
• Capitalize the first letter of each significant word.
• End each caption with a colon (:)
• Data Fields.
• Control Captions/Data Fields
• Control Caption/Data Field Justification
• Control Section Headings
• Control Subsection or Row Headings

Field Group Headings