Software Engineering Department, Wolkite University

Chapter Two: The User Interface Design Process

2.1. Obstacles and Pitfalls in the Development Path

Developing a computer system is never easy. The path is littered with obstacles and traps, many
of them human in nature. 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.

You must have behavioral design goals like performance design goals.

The first five conditions listed will occur naturally because people are people, both as users and as
developers. These kinds of behavior must be understood and accepted in design. User mistakes,
while they will always occur, can be reduced.

Pitfalls in the design process exist because of a flawed design process, including a failure to address
critical design issues, an improper focus of attention, or development team organization failures.
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. o No usability testing.
• No common design team vision of user interface design goals.
• Poor communication between members of the development team.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 1

 Software Engineering Department, Wolkite University

2.1.1. Designing for People: The Five Commandments

The complexity of a graphical or Web interface will always magnify any problems that do occur.
Pitfalls can be eliminated if the following design commandments remain foremost in the designer’s
mind.

Gain a complete understanding of users and their tasks: The users are the customers. Today,
people expect a level of design sophistication from all interfaces, including Web sites. The product,
system or Web site must be geared to people’s needs, not those of the developers.

Solicit early and ongoing user involvement: Involving the users in design from the beginning
provides a direct conduit to the knowledge they possess about jobs, tasks, and needs. Involvement
also allows the developer to confront a person’s resistance to change, a common human trait.
People dislike change for a variety of reasons, among them fear of the unknown and lack of
identification with the system.

Perform rapid prototyping and testing: Prototyping and testing the product will quickly identify
problems and allow you to develop solutions. Prototyping and testing must be continually
performed during all stages of development to uncover all potential defects. If thorough testing is
not performed before product release, the testing will occur in the user’s office. Encountering a
series of problems early in system use will create a negative first impression in the customer’s
mind, and this may harden quickly, creating attitudes that may be difficult to change. It is also
much harder and more costly to fix a product after its release.

Modify and iterate the design as much as necessary: While design will proceed through a series
of stages, problems detected in one stage may force the developer to revisit a previous stage.
Establish user performance and acceptance criteria and continue testing and modifying until all
design goals are met.

Integrate the design of all the system components: The software, the documentation, the help
function, and training needs are all important elements of a graphical system or Web site and all
should be developed concurrently. Time will also exist for design trade-offs to be thought out more
carefully.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 2

 Software Engineering Department, Wolkite University

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.”

2.1.2. 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.

2.1.3. 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?

2.1.4. Some Objective Measures of Usability

Shackel (1991) presents the following more objective criteria for measuring usability.

How effective is the interface? Can the required range of tasks be accomplished?

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 3

 Software Engineering Department, Wolkite University

• 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?

How flexible is the interface? Is it flexible enough to:

• Allow some specified percentage variation in tasks and/or environments beyond those first
specified?
• What are the attitudes of the users? Are they: Within acceptable levels of human cost in
terms of tiredness, discomfort, frustration, and personal effort?
• Such that satisfaction causes continued and enhanced usage of the system?

2.1.5. The Design Team

Provide a balanced design team, including specialists in:

• Development
• Human factors
• Visual design
• Usability assessment
• Documentation
• Training

2.1.6. Know your user or client

To create a truly usable system, the designer must always do the following:

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 4

 Software Engineering Department, Wolkite University

• Understand how people interact with computers.

• Understand the human characteristics important in design. o Identify the user’s level of
knowledge and experience.
• Identify the characteristics of the user’s needs, tasks, and jobs. o Identify the user’s
psychological characteristics.
• Identify the user’s physical characteristics.
• Employ recommended methods for gaining understanding of users.

2.1.7. 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.
• Non-obvious design.
• Disparity in problem-solving strategies.
• Design inconsistency.

2.1.8. Responses to Poor Design

Errors are a symptom of problems. The magnitude of errors in a computer-based system has been
found to be as high as 46 percent for commands, tasks, or transactions. Errors, and other problems
that befuddle one, lead to a variety of psychological and physical user responses.

• Psychological
• Confusion.
• Annoyance.
• Frustration.
• Panic or stress.
• Boredom.
• Physical

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 5

 Software Engineering Department, Wolkite University

• Abandonment of the system.

• Partial use of the system.
• Indirect use of the system.
• Modification of the task.
• Compensatory activity.
• Misuse of the system.
• Direct programming.

2.2. Important Human Characteristics in Design

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.
Perception is influenced, in part, by experience.

2.2.1. 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.
Perception is influenced, in part, by experience.

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.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 6

 Software Engineering Department, Wolkite University

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. Missing a spelling mistake in proofreading something we
write is often an example of a perceptual expectancy error; we see not how a word is spelled, but
how we expect to see it spelled.

Context: Context, environment, and surroundings also influence individual perception. For
example, two drawn lines of the same length may look the same length or different lengths,
depending on the angle of adjacent lines or what other people have said about the size of the lines.

Signals versus noise: Our sensing mechanisms are bombarded by many stimuli, some of which
are important and some of which are not. Important stimuli are called signals; those that are not
important or unwanted are called noise.

2.2.2. Memory

Memory is viewed as consisting of two components, long-term and short-term (or working)
memory.

Short-term, or working, memory receives information from either the senses or long-term memory,
but usually cannot receive both at once, the senses being processed separately. Within short-term
memory a limited amount of information processing takes place. Information stored within it is
variously thought to last from 10 to 30 seconds, with the lower number being the most reasonable
speculation. Knowledge, experience, and familiarity govern the size and complexity of the
information that can be remembered.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 7

 Software Engineering Department, Wolkite University

Long-term memory contains the knowledge we possess. Information received in short-term

memory is transferred to it and encoded within it, a process we call learning. It is a complex process
requiring some effort on our part. The learning process is improved if the information being
transferred from short-term memory has structure and is meaningful and familiar. Learning is also
improved through repetition. Unlike short-term memory, with its distinct limitations, long-term
memory capacity is thought to be unlimited. An important memory consideration, with significant
implications for interface design, is the difference in ability to recognize or recall words.

2.2.2.1. Sensory Storage

Sensory storage is the buffer where the automatic processing of information collected from our
senses takes place. It is an unconscious process, large, attentive to the environment, quick to detect
changes, and constantly being replaced by newly gathered stimuli. In a sense, it acts like radar,
constantly scanning the environment for things that are important to pass on to higher memory.

Repeated and excessive stimulation can fatigue the sensory storage mechanism, making it less
attentive and unable to distinguish what is important (called habituation). Avoid unnecessarily
stressing it.

Design the interface so that all aspects and elements serve a definite purpose. Eliminating interface
noise will ensure that important things will be less likely to be missed.

2.3. Visual Acuity

The capacity of the eye to resolve details is called visual acuity. It is the phenomenon that results
in an object becoming more distinct as we turn our eyes toward it and rapidly losing distinctness
as we turn our eyes away—that is, as the visual angle from the point of fixation increases.

It has been shown that relative visual acuity is approximately halved at a distance of 2.5 degrees
from the point of eye fixation.

The eye’s sensitivity increases for those characters closest to the fixation point (the “0”) and
decreases for those characters at the extreme edges of the circle (a 50/50 chance exists for getting
these characters correctly identified). This may be presumed to be a visual “chunk” of a screen.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 8

 Software Engineering Department, Wolkite University

2.3.1. 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.

Foveal and peripheral vision maintain, at the same time, a cooperative and a competitive
relationship. Peripheral vision can aid a visual search, but can also be distracting.

In its cooperative nature, peripheral vision is thought to provide clues to where the eye should go
next in the visual search of a screen.

In its competitive nature, peripheral vision can compete with foveal vision for attention. What is
sensed in the periphery is passed on to our information-processing system along with what is
actively being viewed foveally.

2.4. Information Processing

The information that our senses collect that is deemed important enough to do something about
then has to be processed in some meaningful way.

There are two levels of information processing going on within us. One level, the highest level, is
identified with consciousness and working memory. It is limited, slow, and sequential, and is used
for reading and understanding.

In addition to this higher level, there exists a lower level of information processing, and the limit
of its capacity is unknown. This lower level processes familiar information rapidly, in parallel with
the higher level, and without conscious effort.

Both levels function simultaneously, the higher-level performing reasoning and problem solving,
the lower level perceiving the physical form of information sensed.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 9

 Software Engineering Department, Wolkite University

2.5. Mental Models

A mental model is simply an internal representation of a person’s current understanding of

something. Usually a person cannot describe this mental mode and most often is unaware it even
exists.

Mental models are gradually developed in order to understand something, explain things, make
decisions, do something, or interact with another person. Mental models also enable a person to
predict the actions necessary to do things if the action has been forgotten or has not yet been
encountered.

A person already familiar with one computer system will bring to another system a mental model
containing specific visual and usage expectations. If the new system complies with already-
established models, it will be much easier to learn and use.

The key to forming a transferable mental model of a system is design consistency and design
standards.

2.6. Movement Control

Particularly important in screen design is Fitts’ Law (1954). This law states that:

The time to acquire a target is a function of the distance to and size of the target.

This simply means that the bigger the target is, or the closer the target is, the faster it will be
reached. The implications in screen design are:

• Provide large objects for important functions.

• Take advantage of the “pinning” actions of the sides, top, bottom, and corners of the screen.

2.7. Learning

Learning, as has been said, is the process of encoding in long-term memory information. A design
developed to minimize human learning time can greatly accelerate human performance. People

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 10

 Software Engineering Department, Wolkite University

prefer to stick with what they know, and they prefer to jump in and get started that is contained in
short-term memory.

Learning can be enhanced if it:

• Allows skills acquired in one situation to be used in another somewhat like it. Design
consistency accomplishes this.
• Provides complete and prompt feedback.
• Is phased, that is, it requires a person to know only the information needed at that stage of
the learning process.

2.8. Skill

The goal of human performance is to perform skillfully. To do so requires linking inputs and
responses into a sequence of action. The essence of skill is performance of actions or movements
in the correct time sequence with adequate precision.

Skills are hierarchical in nature, and many basic skills may be integrated to form increasingly
complex ones. Lower-order skills tend to become routine and may drop out of consciousness.

2.9. Individual Differences

In reality, there is no average user. A complicating but very advantageous human characteristic is
that we all differ—in looks, feelings, motor abilities, intellectual abilities, learning abilities and
speed, and so on.

Individual differences complicate design because the design must permit people with widely
varying characteristics to satisfactorily and comfortably learn the task or job, or use the Web site.

Multiple versions of a system can easily be created. Design must provide for the needs of all
potential users.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 11

 Software Engineering Department, Wolkite University

2.10. Human Considerations in Design

The kinds of user/task characteristics that must be established are summarized in Table

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 12

 Software Engineering Department, Wolkite University

Physical characteristics

• Age: Young, middle aged, or elderly.

• Gender: Male or female.
• Handedness: Left, right, or ambidextrous.
• Disabilities: Blind, defective vision, deafness, motor handicap.

The User’s Knowledge and Experience

The following kinds of knowledge and experiences should be identified:

Computer Literacy: Are the users highly technical such as programmers or experienced data
entry clerks or vice versa?

System Experience: Novice Vs Experts:

Words to describe the new, relatively new, or infrequent user have included naive, casual,
inexperienced, or novice. At the other end of the experience continuum lie terms such as
experienced, full-time, frequent, power, or expert. In between these extremes is a wide range of
intermediate or intermittent users.

In business systems, novice users have been found to:

• Depend on system features that assist recognition memory: menus, prompting information,
and instructional and help screens.
• Need restricted vocabularies, simple tasks, small numbers of possibilities, and very
informative feedback.
• View practice as an aid to moving up to expert status.

Experts, on the other hand:

• Rely upon free recall.

• Expect rapid performance.
• Need less informative feedback.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 13

 Software Engineering Department, Wolkite University

• Seek efficiency by bypassing novice memory aids, reducing keystrokes, chunking and
summarizing.

Novice users often have difficulties:

• Dragging and double-clicking using the mouse. Distinguishing between double-clicks and
two separate clicks is particularly confusing
• In window management. That overlapping windows represent a three-dimensional space
is not always realized. Hidden windows are assumed to be gone and no longer exist.
• In file management. The organization of files and folders nested more than two levels deep
is difficult to understand. Structure is not as apparent as with physical files and folders.

Experts possess the following traits:

• They possess an integrated conceptual model of a system.

• They possess knowledge that is ordered more abstractly and more procedurally.
• They organize information more meaningfully, orienting it toward their task.
• They structure information into more categories.
• They are better at making inferences and relating new knowledge to their objectives and
goals.
• They pay less attention to low-level details.
• They pay less attention to surface features of a system.

Novices exhibit these characteristics:

• They possess a fragmented conceptual model of a system.

• They organize information less meaningfully, orienting it toward surface features of the
system.
• They structure information into fewer categories.
• They have difficulty in generating inferences and relating new knowledge to their
objectives and goals.
• They pay more attention to low-level details.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 14

 Software Engineering Department, Wolkite University

• They pay more attention to surface features of the system.

Application Experience

Have users worked with a similar application (for example, word processing, airline reservation,
and so on)? Are they familiar with the basic application terms? Or does little or no application
experience exist?

Task Experience

Are users experienced with the task being automated? Or do users possess little or no knowledge
of the tasks the system will be performing?

Other System Use

Will the user be using other systems while using the new system?

Education

What is the general educational level of users? Do they generally have high school degrees, college
degrees, or advanced degrees?

Reading Level

For textual portions of the interface, the vocabulary and grammatical structure must be at a level
that is easily understood by the users.

Typing Skill

Is the user a competent typist or of the hunt-and-peck variety? Is he or she familiar with the
standard keyboard layout or other newer layouts?

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 15

 Software Engineering Department, Wolkite University

Native Language and Culture

Do the users speak English, another language, or several other languages? Will the screens be in
English or in another language? Other languages often impose different screen layout
requirements. Are there cultural or ethnic differences between users?

The User’s Tasks and Needs

The user’s tasks and needs are also important in design. The following should be determined:

Mandatory Vs Discretionary Use

Users of the earliest computer systems were mandatory or nondiscretionary. That is, they required
the computer to perform a task that, for all practical purposes, could be performed no other way.

This newer kind of user is the office executive, manager, or other professional, whose computer
use is completely discretionary.

Characteristics of mandatory use can be summarized as follows:

• The computer is used as part of employment.

• Time and effort in learning to use the computer are willingly invested.
• High motivation is often used to overcome low usability characteristics.
• The user may possess a technical background.
• The job may consist of a single task or function.

Common general characteristics of the discretionary user are as follows:

• Use of the computer or system is not absolutely necessary.

• Technical details are of no interest.
• Extra effort to use the system may not be invested.
• High motivation to use the system may not be exhibited.
• May be easily disenchanted.
• Voluntary use may have to be encouraged.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 16

 Software Engineering Department, Wolkite University

Is from a heterogeneous culture.

Frequency of Use

Is system use a continual, frequent, occasional, or once-in-a-lifetime experience? Frequency of use

affects both learning and memory.

Occasional or infrequent users prefer ease of learning and remembering,

Task or Need Importance

How important is the task or need for the user?

People are usually willing to spend more time learning something if it makes the task being
performed or need being fulfilled more efficient.

Task Structure

How structured is the task being performed? Is it repetitive and predictable or not so?

Social Interactions

Will the user, in the normal course of task performance, be engaged in a conversation with another
person, such as a customer, while using the system? If so, design should not interfere with the
social interaction.

Neither the user nor the person to whom the user is talking must be distracted in any way by
computer interaction requirements. The design must accommodate the social interaction.

Job Category

In a business system, is the user an executive, manager, professional, secretary, or clerk? While
job titles have no direct bearing on design per se, they do enable one to predict some job
characteristics when little else is known about the user.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 17

 Software Engineering Department, Wolkite University

For example, executives and managers are most often discretionary users, while clerks are most
often mandatory ones.

The User’s Psychological Characteristics

A person’s psychological characteristics also affect one’s performance of tasks requiring motor,
cognitive, or perceptual skills.

Attitude and Motivation

Is the user’s attitude toward the system positive, neutral, or negative? Is motivation high, moderate,
or low?

While all these feelings are not caused by, and cannot be controlled by, the designer, a positive
attitude and motivation allows the user to concentrate on the productivity qualities of the system.

Patience

Is the user patient or impatient?

They are exhibiting less tolerance for Web use learning requirements, slow response times, and
inefficiencies in navigation and locating desired content.

Stress Level

Will the user be subject to high levels of stress while using the system? Interacting with an angry
boss, client, or customer, can greatly increase a person’s stress level.

System navigation or screen content may have to be redesigned for extreme simplicity in situations
that can become stressful.

Expectations

What are user’s expectations about the system or Web site? Are they realistic?

Is it important that the user’s expectations be realized?

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 18

 Software Engineering Department, Wolkite University

Cognitive Style

People differ in how they think about and solve problems.

Some people are better at verbal thinking, working more effectively with words and equations.

Others are better at spatial reasoning—manipulating symbols, pictures, and images.

Some people are analytic thinkers, systematically analyzing the facets of a problem.

Others are intuitive, relying on rules of thumb, hunches, and educated guesses.

Some people are more concrete in their thinking, others more abstract.

The User’s Physical Characteristics

The physical characteristics of people can also greatly affect their performance with a system.

Age

Are the user’s children, young adults, middle-aged, senior citizens, or very elderly? Age can have
an effect on both computer and system usage.

Young Adults VS Older Adults

Young adults (aged 18–36), in comparison to older adults (aged 64–81)

• Use computers and ATMs more often.

• Read faster.
• Possess greater reading comprehension and working memory capacity.
• Possess faster choice reaction times.
• Possess higher perceptual speed scores.
• Complete a search task at a higher success rate.
• Use significantly less moves (clicks) to complete a search task.
• Are more likely to read a screen a line at a time.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 19

 Software Engineering Department, Wolkite University

Older adults, as compared to young adults:

• Are more educated.

• Possess higher vocabulary scores.
• Have more difficulty recalling previous moves and location of previously viewed
information.
• Have more problems with tasks that require three or more moves (clicks).
• Are more likely to scroll a page at a time
• Respond better to full pages rather than long continuous scrolled pages.

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.
• 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.

Hearing

As people age, they require louder sounds to hear, a noticeable attribute in almost any everyday
activity.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 20

 Software Engineering Department, Wolkite University

Age in Years - Sound Level in dB

25 57

45 65

65 74

85 85

Vision

Older adults read prose text in smaller type fonts more slowly than younger adults.

(Charness and Dijkstra, 1999). For older adults they recommend:

• 14-point type in 4-inch wide columns.

• 12-point type in 3-inch wide columns.

Ellis and Kurniawan (2000) recommend the following fonts for older users:

• San serif (Arial, Helvetica, and Verdana).

• Black type on a white background.

Ellis and Kurniawan (2000) and Czaja (1997) suggest Web links should be:

• Distinct and easy to see.

• Large (at least 180 × 22 pixels for a button). o Surrounded by a large amount of white
space.

Cognitive Processing

Brain processing also appears to slow with age. Working memory, attention capacity, and visual
search appear to be degraded.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 21

 Software Engineering Department, Wolkite University

Tasks where knowledge is important show the smallest age effect and tasks dependent upon speed
show the largest effect

Gender

• A user’s sex may have an impact on both motor and cognitive performance because
• Women are not as strong as men,
• Women also have smaller hands than men, and
• Significantly more men are color-blind than women

Handedness

A user’s handedness, left or right, can affect ease of use of an input mechanism, depending on
whether it has been optimized for one or the other hand.

Disabilities

Blindness, defective vision, color-blindness, poor hearing, deafness, and motor handicaps can
affect performance on a system not designed with these disabilities in mind.

People with special needs must be considered in design especially for systems like web design.

2.11. 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

Reading: The average adult, reading English prose in the United States, has a reading speed in the
order of 250-300 words per minute. Proof reading text on paper has been found to occur at about
200 words per minute, on a computer monitor, about 180 words per minute.

One technique that has dramatically increased reading speeds is called Rapid Serial Visual
Presentation, or RSVP. In this technique single words are presented one at a time in the center of
a screen. New words continually replace old words at a rate set by the reader. For a sample of

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 22

 Software Engineering Department, Wolkite University

people whose paper document reading speed was 342 words per minute. (With a speed range of
143 to 540 words per minute.) Single words were presented on a screen in sets at a speed
sequentially varying ranging from 600 to 1,600 words per minute. After each set a comprehension
test was administered.

Reading

• Prose text: 250–300 words per minute.

• Proofreading text on paper: 200 words per minute.
• Proofreading text on a monitor: 180 words per minute.

Listening

• 150–160 words per minute.

• Speaking to a computer: 105 words per minute.
• After recognition corrections: 25 words per minute.

Keying

Typewriter:

• Fast typist: 150 words per minute and higher.

• Average typist: 60–70 words per minute.

Computer:

• Transcription: 33 words per minute.

• Composition: 19 words per minute.

Two finger typists:

• Memorized text: 37 words per minute.

• Copying text: 27 words per minute.

Hand printing:

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 23

 Software Engineering Department, Wolkite University

• Memorized text: 31 words per minute.

• Copying text: 22 words per minute.

2.12. 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.

2.12.1. 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.

2.12.1.1. Direct –Indirect Methods

The significant advantage of the direct methods is the opportunity they provide to hear the user’s
comments in person and firsthand.

Advantages

• The significant advantage of the direct methods is the opportunity they provide to hear the
user’s comments in person and firsthand.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 24

 Software Engineering Department, Wolkite University

• Person-to-person encounters permit multiple channels of communication (body language,

voice inflections, and so on) and provide the opportunity to immediately follow up on
vague or incomplete data.

Here are some recommended direct methods for getting input from users:

2.12.1.1.1. Individual Face-to-Face Interview

• A one-on-one visit with the user to obtain information. It may be structured or somewhat
open-ended.
• A formal questionnaire should not be used, however. Useful topics to ask the user to
describe in an interview include:
• The activities performed in completing a task or achieving a goal or objective.
• The methods used to perform an activity.
• What interactions exist with other people or systems?
• It is also very useful to also uncover any:
✓ Potential measures of system usability
✓ Unmentioned exceptions to standard policies or procedures.
✓ Relevant knowledge the user must possess to perform the activity.

Advantages

Advantages of a personal interview are that you can give the user your full attention, can easily
include follow-up questions to gain additional information, will have more time to discuss topics
in detail, and will derive a deeper understanding of your users, their experiences, attitudes, beliefs,
and desires.

Disadvantages

Disadvantages of interviews are that they can be costly and time-consuming to conduct, and
someone skilled in interviewing techniques should perform them.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 25

 Software Engineering Department, Wolkite University

2.12.1.1.2. Telephone Interview or Survey

A structured interview conducted via telephone.

Advantages

• Arranging the interview in advance allows the user to prepare for it.
• Telephone interviews are less expensive and less invasive than personal interviews.
• They can be used much more frequently and are extremely effective for very specific
information.

Disadvantage

• It is impossible to gather contextual information, such as a description of the working

environment, replies may be easily influenced by the interviewer’s comments, and body
language cues are missing.
• Also, it may be difficult to contact the right person for the telephone interview.

2.12.1.1.3. Traditional Focus Group

A small group of users and a moderator brought together to verbally discuss the requirements.

The purpose of a focus group is to probe user’s experiences, attitudes, beliefs, and desires, and to
obtain their reactions to ideas or prototypes

Setting up focus group involves the following:

• Establish the objectives of the session.

• Select participants representing typical users, or potential users. o Write a script for the
moderator to follow.
• Find a skilled moderator to facilitate discussion, to ensure that the discussion remains
focused on relevant topics, and to ensure that everyone participates.
• Allow the moderator flexibility in using the script.
• Take good notes, using the session recording for backup and clarification

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 26

 Software Engineering Department, Wolkite University

2.12.1.1.4. Facilitated Team Workshop

A facilitated, structured workshop held with users to obtain requirements information. Similar to
the traditional Focus Group

Like focus groups, they do require a great deal of time to organize and run.

2.12.1.1.5. Observational Field Study

Users are observed and monitored for an extended time to learn what they do.

Observation provides good insight into tasks being performed, the working environment and
conditions, the social environment, and working practices.

Observation, however, can be time-consuming and expensive.

Video recording of the observation sessions will permit detailed task analysis.

2.12.1.1.6. Requirements Prototyping

A demo, or very early prototype, is presented to users for comments concerning functionality.

2.12.1.1.7. User-Interface Prototyping

A demo, or early prototype, is presented to users to uncover user-interface issues and problems

2.12.1.1.8. Usability Laboratory Testing

Users at work are observed, evaluated, and measured in a specially constructed laboratory to
establish the usability of the product at that point in time.

Usability tests uncover what people actually do, not what they think they do a common problem
with verbal descriptions

The same scenarios can be presented to multiple users, providing comparative data from several
users.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 27

 Software Engineering Department, Wolkite University

2.12.1.1.9. Card Sorting for Web Sites

A technique to establish groupings of information for Web sites.

Briefly, the process is as follows:

• From previous analyses, identify about 50 content topics and inscribe them on index cards.
Limit topics to no more than 100.
• Provide blank index cards for names of additional topics the participant may want to add,
and colored blank cards for groupings that the participant will be asked to create.
• Number the cards on the back.
• Arrange for a facility with large enough table for spreading out cards.
• Select participants representing a range of users. Use one or two people at a time and 5 to
12 in total.
• Explain the process to the participants, saying that you are trying to determine what
categories of information will be useful, what groupings make sense, and what the
groupings should be called.
• Ask the participants to sort the cards and talk out loud while doing so. Advise the
participants that additional content cards may be named and added as they think necessary
during the sorting process.
• Observe and take notes as the participants talk about what they are doing. Pay particular
attention to the sorting rationale.
• Upon finishing the sorting, if a participant has too many groupings ask that they be arranged
hierarchically.
• Ask participants to provide a name for each grouping on the colored blank cards, using
words that the user would expect to see that would lead them to that particular grouping.
• Make a record of the groupings using the numbers on the back of each card.
• Reshuffle the cards for the next session.
• When finished, analyze the results looking for commonalities among the different sorting
sessions.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 28

 Software Engineering Department, Wolkite University

2.12.1.2. Indirect methods

An indirect method of requirements determination is one that places an intermediary between the
developer and the user. This intermediary may be electronic or another person

Problems of Indirect Method

First, there may be a filtering or distortion of the message, either intentional or unintentional.

• Next, the intermediary may not possess a complete, or current, understanding of user’s
needs, passing on an incomplete or incorrect message.
• Finally, the intermediary may be a mechanism that discourages direct user-developer
contact for political reasons.

2.12.1.2.1. MIS Intermediary

A company representative defines the user’s goals and needs to designers and developers.

This representative may come from the Information Services department itself, or he or she may
be from the using department.

2.12.1.2.2. Paper Survey or Questionnaire

A survey or questionnaire is administered to a sample of users using traditional mail methods to

obtain their needs.

Advantage

• Questionnaires have the potential to be used for a large target audience located most
anywhere, and are much cheaper than customer visits.
• They generally, however, have a low return rate

Disadvantage

• They may take a long time to collect and may be difficult to analyze.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 29

 Software Engineering Department, Wolkite University

• Questionnaires should be composed mostly of closed questions

• Questionnaires should be relatively short and created by someone experienced in their
design.

2.12.1.2.3. Electronic Survey or Questionnaire

A survey or questionnaire is administered to a sample of users using e-mail or the Web to obtain
their needs.

In creating an electronic survey:

• Determine the survey objectives.

• Determine where you will find the people to complete the survey.
• Create a mix of multiple choice and open-ended questions requiring short answers
addressing the survey objectives.
• Keep it short, about 10 items or less is preferable.
• Keep it simple, requiring no more than 5–10 minutes to complete

2.12.1.2.4. Iterative survey

Consider a follow-up more detailed survey, or surveys, called iterative surveys. Ask people who
complete and return the initial survey if they are willing to answer more detailed questions. If so,
create and send the more detailed survey.

A third follow-up survey can also be designed to gather additional information about the most
important requirements and tasks

Iterative surveys, of course, take a longer time to complete.

2.12.1.2.5. Electronic Focus Group

A small group of users and a moderator discuss the requirements online using workstations.

Advantages

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 30

 Software Engineering Department, Wolkite University

advantages of electronic focus groups over traditional focus groups are that the discussion is less
influenced by group dynamics; has a smaller chance of being dominated by one or a few
participants; can be anonymous, leading to more honest comments and less caution in proposing
new ideas

Disadvantages

The depth and richness of verbal discussions does not exist and the communication enhancement
aspects of seeing participant’s body language are missing.

2.12.1.2.6. Marketing and Sales

Company representatives who regularly meet customers obtain suggestions or needs, current and
potential.

2.12.1.2.7. Support Line

Information collected by the unit that helps customers with day-to-day problems is analyzed
(Customer Support, Technical Support, Help Desk, etc.).

2.12.1.2.8. E-Mail or Bulletin Board

Problems, questions, and suggestions from users posted to a bulletin board or through e-mail are
analyzed.

2.12.1.2.9. User Group

Improvements are suggested by customer groups who convene periodically to discuss software
usage. They require careful planning.

2.12.1.2.10. Competitor Analyses

A review of competitor’s products or Web sites is used to gather ideas, uncover design
requirements and identify tasks.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 31

 Software Engineering Department, Wolkite University

2.12.1.2.11. Trade Show

Customers at a trade show are presented a mock-up or prototype and asked for comments.

2.12.1.2.12. Other Media Analysis

An analysis of how other media, print or broadcast, present the process, information, or subject
matter of interest.

2.12.1.2.13. System Testing

New requirements and feedback are obtained from ongoing product testing

Requirements Collection Guidelines

• Establish 4 to 6 different developer-user links.

• Provide most reliance on direct links.

2.13. Determining 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 follows:

• 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.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 32

 Software Engineering Department, Wolkite University

2.13.1. Understanding the User’s Mental Model

A goal of task analysis, and a goal of understanding the user, is to gain a picture of 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.

2.13.2. Performing a Task Analysis

User activities 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 that will be automated.

Knowing why establishes the major work goals; knowing how provides details of actions
performed to accomplish these goals. Task analysis also provides information concerning
workflows, the interrelationships between people, objects, and actions, and the user’s conceptual
frameworks. The output of a task analysis is a complete description of all user tasks and
interactions.

One result of a task analysis is a listing of the user’s current tasks. This list should be well
documented and maintained. Changes in task requirements can then be easily incorporated as
design iteration occurs. Another result is a list of objects the users see as important to what they
do. The objects can be sorted into the following categories:

• Concrete objects—things that can be touched.

• People who are the object of sentences—normally organization employees, customers, for
example.
• Forms or journals—things that keep track of information.
• People who are the subject of sentences—normally the users of a system. o Abstract
objects—anything not included above.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 33

 Software Engineering Department, Wolkite University

2.13.3. Developing Conceptual Models

The output of the task analysis is the creation, by the designer, of a conceptual model for the user
interface. 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.

The goal of the designer is to facilitate for the user the development of useful mental model of the
system. This is accomplished by presenting to the user a meaningful conceptual model of the
system. When the user then encounters the system, his or her existing mental model will, hopefully,
mesh well with the system’s conceptual model.

2.13.4. Guidelines for Designing Conceptual Models

Reflect the user’s mental model not the designer’s: A user will have different expectations and
levels of knowledge than the designer. So, the mental models of the user and designer will be
different. The user is concerned with the task to be performed, the business objectives that must
be fulfilled.

Draw physical analogies or present metaphors: Replicate what is familiar and well known.
Duplicate actions that are already well learned. A metaphor, to be effective, must be widely
applicable within an interface.

Comply with expectancies, habits, routines, and stereotypes: Use familiar associations,
avoiding the new and unfamiliar. With color, for example, accepted meanings for red, yellow, and
green are already well established. Use words and symbols in their customary ways.

Provide action-response compatibility: All system responses should be compatible with the
actions that elicit them. Names of commands, for example, should reflect the actions that will
occur.

Make invisible parts and process of a system visible: New users of a system often make
erroneous or incomplete assumptions about what is invisible and develop a faulty mental model.
As more experience is gained, their mental models evolve to become more accurate and complete.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 34

 Software Engineering Department, Wolkite University

Making invisible parts of a system visible will speed up the process of developing correct mental
models.

Provide proper and correct feedback: Be generous in providing feedback. Keep a person
informed of what is happening, and what has happened, at all times, including:

• Provide visible results of actions.

• Display actions in progress.
• Provide a continuous indication of status.
• Present as much context information as possible.
• Provide clear, constructive, and correct error messages.

Avoid anything unnecessary or irrelevant: Never display irrelevant information on the screen.
People may try to interpret it and integrate it into their mental models, thereby creating a false one.

Provide design consistency: Design consistency reduces the number of concepts to be learned.
Inconsistency requires the mastery of multiple models. If an occasional inconsistency cannot be
avoided, explain it to the user.

Provide documentation and a help system that will reinforce the conceptual model: Do not
rely on the people to uncover consistencies and metaphors themselves. The help system should
offer advice aimed at improving mental models.

Promote the development of both novice and expert mental models: Novices and experts are
likely to bring to bear different mental models when using a system.

2.13.5. 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.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 35

 Software Engineering Department, Wolkite University

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.

2.13.6. Developing Metaphors

A metaphor is a concept where one’s body of knowledge about one thing is used to understand
something else. Metaphors act as building blocks of a system, aiding understanding of how a
system works and is organized.

Real-world metaphors are most often the best choice. Replicate what is familiar and well known.
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.

2.14. 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.

2.14.1. Value of Standards and Guidelines

Developing and applying design standards or guidelines achieve design consistency.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 36

 Software Engineering Department, Wolkite University

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.

They are valuable to system developers because they:

• Increase visibility of the human-computer interface.

• Simplify design.
• Provide more programming and design aids, reducing programming time.
• Reduce redundant effort.
• Reduce training time.
• Provide a benchmark for quality control testing.

2.14.2. 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.
• Include concrete examples of correct design.
• 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.

2.14.3. Design Support and Implementation

• Use all available reference sources in creating the guidelines.

• Use development and implementation tools that support the guidelines.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 37

 Software Engineering Department, Wolkite University

• Begin applying the guidelines immediately.

2.14.3. System Training and Documentation Needs

System Timings

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.

2.15. 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.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 38

 Software Engineering Department, Wolkite University

2.15.1. How to Distract the Screen User

• Unclear captions and badly worded questions: These cause hesitation, and rereading, in
order to determine what is needed or must be provided. They may also be interpreted
incorrectly, causing errors.
• Improper type and graphic emphasis: Important elements are hidden. Emphasis is drawn
away from what is important to that which is not important.
• Misleading headings: These also create confusion and inhibit one’s ability to see existing
relationships.
• Information requests perceived to be irrelevant or unnecessary: The value of what one
is doing is questioned, as is the value of the system.
• Inefficiency results, and mistakes increase: Information requests that require one to
backtrack and rethink a previous answer, or look ahead to determine possible context.
• Cluttered, cramped layout: Poor layout creates a bad initial impact and leads to more
errors. It may easily cause system rejection.
• Poor quality of presentation, legibility, appearance, and arrangement: Again, this
degrades performance, slowing the user down and causing more errors.
• Visual inconsistency in screen detail presentation and with the operating system.
• Lack of restraint in the use of design features and elements.
• Overuse of three-dimensional presentations.
• Overuse of too many bright colors.
• Poorly designed icons.
• Bad typography
• Metaphors that are either overbearing or too cute, or too literal thereby restricting design
options.

2.15.2. 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.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 39

 Software Engineering Department, Wolkite University

• 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.

2.15.3. What Screen Users Do

When interacting with a computer, a person:

• Identifies a task to be performed or need to be fulfilled: The task may be very structured or
semi structured or structured with free form activities.
• Decides how the task will be completed or the need fulfilled: set of transaction screens will
be used. The proper transaction is identified and the relevant screen series retrieved.
• Manipulates the computer’s controls: To perform the task or satisfy the need, the keyboard,
mouse, and other similar devices are used
• Gathers the necessary data: Screens information is collected from its source through forms
or coworker and placed on the screen, through control manipulation.
• Forms judgments resulting in decisions relevant to the task or need: Structured transactions
will require minimal decision-making. Semi-structured transactions, in addition, may
require decisions such as: Which set of screens, from all available.

2.15.4. 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.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 40

 Software Engineering Department, Wolkite University

2.15.5. The Test for a Good Design

Can all screen elements be identified by cues other than by reading the words that make them up?

A simple test for good screen design does exist. A screen that passes this test will have surmounted
the first obstacle to effectiveness. The test is this: 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. People look at a screen for a particular reason, perhaps to locate a piece of
information such as a customer name, to identify the name of the screen, or to find an instructional
or error message.

The signal at that moment is that element of interest on the screen. The noise is everything else on
the screen. Cues independent of context that differentiate the components of the screen will reduce
visual search times and minimize confusion.

2.15.6. 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

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 41

 Software Engineering Department, Wolkite University

Must . . .

• Have meaning to screen users.

• Serve a purpose in performing tasks.

2.15.7. Organizing Screen Elements Clearly and Meaningfully

Visual clarity is achieved when the display elements are organized and presented in meaningful
and understandable ways. A clear and clean organization makes it easier to recognize screen’s
essential elements and to ignore its secondary information when appropriate.

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.

Follow the same conventions and rules across all related interfaces.

Deviate only when there is a clear benefit for the user.

Quite simply, consistency greatly aids learning. It establishes an expectation.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 42

 Software Engineering Department, Wolkite University

2.15.8. 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.
• Form groups that cover all possibilities.
• Ensure that information that must be compared is visible at the same time.
• Ensure that only information relative to the users’ tasks or needs is presented on the screen.
• An organizational scheme’s goal is to keep to a minimum the number of information.
• Provide an obvious starting point in the screen’s upper-left corner.

2.15.9. 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:
o From dark areas to light areas.
o From big objects to little objects.
o From unusual shapes to common shapes.
o From highly saturated colors to unsaturated colors.
✓ Encourages natural movement sequences.
✓ Minimizes pointer and eye movement distances.
• Locate the most important and most frequently used elements or controls at the top left.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 43

 Software Engineering Department, Wolkite University

• Maintain a top-to-bottom, left-to-right flow.

• Assist in navigation through a screen by:
✓ Aligning elements.
✓ Grouping elements.
✓ Using of line borders.
• Through focus and emphasis, sequentially, direct attention to items that are:
1. Critical.
2. Important.
3. Secondary.
4. Peripheral.
• Tab through window in logical order of displayed information.
• Locate command buttons at end of the tabbing order sequence.
• When groups of related information must be broken and displayed on separate screens, provide
breaks at logical or natural points in the information flow.

2.15.10. Visually Pleasing Composition

Provide visually pleasing composition with the following qualities:

• Balance
• Symmetry
• Regularity.
• Predictability.
• Sequentially.
• Economy.
• Unity.
• Proportion.
• Simplicity.
• Groupings.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 44

 Software Engineering Department, Wolkite University

2.15.11. Regularity

Create regularity by establishing standard and consistently spaced horizontal and vertical
alignment points.

Also, use similar element sizes, shapes, colors, and spacing.

2.15.12. Balance

Create screen balance by providing an equal weight of screen elements, left and right, top and
bottom.

2.15.13. Symmetry

Create symmetry by replicating elements left and right of the screen centerline.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 45

 Software Engineering Department, Wolkite University

2.15.14. Predictability

Create predictability by being consistent and following conventional orders or arrangements.

2.15.15. Sequentiality

Provide sequentiality by arranging elements to guide the eye through the screen in an obvious,
logical, rhythmic, and efficient manner.

The eye tends to be attracted to:

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 46

 Software Engineering Department, Wolkite University

• 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.

2.15.16. 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.

2.15.17. Proportion

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

Pleasing proportions:

• Square 1:1
• Square-root of two 1:1.414

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 47

 Software Engineering Department, Wolkite University

• Square-root of three 1:1.732

• Double square 1:2
• Golden rectangle 1:1.618

2.15.18. Simplicity (Complexity)

• Optimize the number of elements on a screen, within limits of clarity.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 48

 Software Engineering Department, Wolkite University

• Minimize the alignment points, especially horizontal or columnar.

✓ Provide standard grids of horizontal and vertical lines to position elements.

complexity guidelines:

✓ Optimize the number of elements on a screen, within limits of clarity. o

✓ Minimize the alignment points, especially horizontal or columnar.

2.15.19. Groupings

Provide functional groupings of associated elements.

Create spatial groupings as closely as possible to five degrees of visual angle (1.67 inches in
diameter or about 6 to 7 lines of text, 12 to 14 characters in width).

Evenly space controls within a grouping, allowing 1/8 to 1/4 inch between each.

Visually reinforce groupings:

✓ Provide adequate separation between groupings through liberal use of white space.
✓ Provide line borders around groups.

Provide meaningful titles for each grouping.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 49

 Software Engineering Department, Wolkite University

Perceptual Principles and Functional Grouping

Grouping Using White Space

Provide adequate separation between groupings through liberal use of white space.

For Web pages, carefully consider the trade-off between screen white space and the requirement
for page scrolling.

Grouping Using Borders

Incorporate line borders for:

• Focusing attention on groupings or related information.

• Guiding the eye through a screen.

Do not exceed three-line thicknesses or two-line styles on a screen, however.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 50

 Software Engineering Department, Wolkite University

• Use a standard hierarchy for line presentation.

Create lines consistent in height and length.

Leave sufficient padding space between the information and the surrounding borders.

For adjacent groupings with borders, whenever possible, align the borders left, right, top, and
bottom.

Use rules and borders sparingly.

In Web page design:

• Be cautious in using horizontal lines as separators between page sections.

• Reserve horizontal lines for situations in which the difference between adjacent areas must
be emphasized.

Grouping Using Backgrounds

Consider incorporating a contrasting background for related information.

• The background should not have the “emphasis” of the screen component that
• should be attended to. Consider about a 25 percent gray screening.
• Reserve higher contrast or “emphasizing” techniques for screen components to which
attention should be drawn.

2.15.20. 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.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 51

 Software Engineering Department, Wolkite University

2.15.21. Amount of Information

Present the proper amount of information for the task.

• Too little is inefficient.

• Too much is confusing.

Present all information necessary for performing an action or making a decision on one screen,
whenever possible.

• People should not have to remember things from one screen to the next.

Restrict screen or window density levels to no more than about 30 percent.

2.15.22. Web Page Size

Minimize page length.

• Restrict to two or three screens of information.

Place critical or important information at the very top so it is always viewable when the page is
opened.

• Locate it within the top 4 inches of page.

Determining an optimum page length will require balancing these factors. Arguments for shorter
pages and against longer pages are that longer pages:

• Tax the user’s memory, as related information is more scattered and not always visible.
• Can lead to a lost sense of context as navigation buttons and major links disappear from
view.
• Display more content and a broader range of navigation links making it more difficult for
users to find and then decide upon what path to follow.
• Require excessive page scrolling, which may become cumbersome and inefficient.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 52

 Software Engineering Department, Wolkite University

• Are less conducive to the “chunking” information organization scheme commonly

employed in Web sites.

Arguments for longer pages are that they:

• Resemble the familiar structure of paper documents.

• Require less “clicks” for navigating through a Web site. o Are easier to download and print
for later reading.
• Are easier to maintain because they possess fewer category navigation links to other pages.

Deciding on Long versus Short Pages

To find specific information quickly:

• Create many links to short pages.

To understand an entire concept without interruption:

• Present the entire concept in one page with internal links to subtopics.

To print all or most of the content to read offline:

• Use one long page or prepare a version that uses one page.

If page will be loading over slow modems and all pages are not needed:

• Create a comprehensive contents page with links to many short pages.

2.15.23. 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:

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 53

 Software Engineering Department, Wolkite University

▪ Provide contextual cues within the page that it must be scrolled to view its entire
contents.
▪ Provide a unique and consistent “end of page” structure.
• Avoid horizontal page scrolling.

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.”

2.15.24. 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.

2.15.25. Focus and Emphasis

Visually emphasize the:

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 54

 Software Engineering Department, Wolkite University

• Most prominent element.

• Most important elements.
• Central idea or focal point.

To provide emphasis use techniques such as:

• Higher brightness.
• Reverse polarity or inverse video.
• Larger and distinctive font.
• Underlining.
• Blinking.
• Line rulings and surrounding boxes or frames.
• Contrasting color.
• Larger size.
• Positioning.
• Isolation.
• Distinctive or unusual shape.
• White space.

De-emphasize less important elements.

To ensure that emphasized screen elements stand out, avoid:

• Emphasizing too many screen elements.

• Using too many emphasis techniques.
• Screen clutter.

In Web page design:

• Call attention to new or changed content.

• Ensure that page text is not overwhelmed by page background.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 55

 Software Engineering Department, Wolkite University

2.15.26. Presenting Information Simply and Meaningfully

Provide legibility.

• Information is noticeable and distinguishable.

Provide readability.

• Information is identifiable, interpretable, and attractive.

Present information in usable form.

• Translations, transpositions, and references to documentation should not be required to

interpret and understand information.

Utilize contrasting display features.

• To attract and call attention to different screen elements.

Create visual lines.

• Implicit and explicit, to guide the eye.

Be consistent.

• In appearance and procedural usage.

2.15.27. Typography

In typography, by definition a typeface is the name of a type, such as Times New Roman, Arial,
Verdana, or Helvetica. A font is a typeface of a particular size, such as Times Roman 16 point or
Arial 12 point. In screen design, the terms have become somewhat interchangeable.

Font Types and Families

Use simple, common, readable fonts.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 56

 Software Engineering Department, Wolkite University

• Any sans serif such as Helvetica or Verdana.

• Times Roman.

Use no more than two families, compatible in terms of line thicknesses, capital letter height, and
so on.

• Assign a separate purpose to each family.

• Allow one family to dominate.

Font Size

Use no more than three sizes.

• Consider “X” height.

For graphical systems use:

• 12 point for menus.

• 10 point for windows.

For Web pages use:

• 12–14 points for body text.

• 18–36 points for titles and headings.

For line spacing use one to one and one-half times font size.

Never change established type sizes to squeeze in more text.

Font Styles and Weight

Use no more than:

• Two styles of the same family.

✓ Standard and italic.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 57

 Software Engineering Department, Wolkite University

✓ Italic is best presented in a serif font.

• Two weights.
✓ Regular and bold.
✓ Bold is best presented in a sans serif font.

Use italics when you want to call attention.

Use bold when you want to call attention or create a hierarchy.

In Web pages, use an underline only to indicate a navigation link.

Font Case

Use mixed-case for:

✓ Control captions.
✓ Data.
✓ Control choice descriptions.
✓ Text.
✓ Informational messages.
✓ Instructional information.
✓ Menu descriptions.
✓ Button descriptions.

Consider using upper case or capitalization for:

✓ Title.
✓ Section headings.
✓ Subsection headings.
✓ Caution and warning messages.
✓ Words or phrases small in point size.

Use all lower case with caution.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 58

 Software Engineering Department, Wolkite University

Defaults

For graphical operating systems, use the standard system fonts.

For Web pages design for the default browser fonts.

Consider that the user may change the fonts.

Consistency

Establish a consistent hierarchy and convention for using typefaces, styles, and sizes.

Decide on a font for each different level of importance in the hierarchy.

Communicate hierarchy with changes in:

✓ Size.
✓ Weight.
✓ Color.

Other

Always consider the visual capabilities of the user. (Age Considerations)

Always verify that the design has succeeded using the selected fonts.

2.15.28. 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.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 59

 Software Engineering Department, Wolkite University

End each caption with a colon (:).

Choose distinct captions that can be easily distinguished from other captions.

Minimal differences (one letter or word) cause confusion.

2.15.29. Data Fields

For entry or modifiable data fields, display data within:

✓ A line box.
✓ A reverse polarity box.

For inquiry or display/read-only screens, display data on the normal screen background.

Visually emphasize the data fields.

Control Captions/Data Fields

Differentiate captions from data fields by using:

Contrasting features, such as different intensities, separating columns, boxes, and so forth.

Consistent physical relationships.

For single data fields:

Place the caption to left of the data field.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 60

 Software Engineering Department, Wolkite University

Align the caption with the control’s data.

Alternately, place the caption above the data field.

• Align captions justified, upper left to the data field.

Maintain consistent positional relations within a screen, or within related screens, whenever
possible.

For multiple listings of columnar-oriented data, place the caption above the columnized data fields.

Control Caption/Data Field Justification

First Approach

• Left-justify both captions and data fields.

• Leave one space between the longest caption and the data field column.

Second Approach

• Left-justify data fields and right-justify captions to data fields.

• Leave one space between each.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 61

 Software Engineering Department, Wolkite University

2.15.30. Control Section Headings

Provide a meaningful heading that clearly describes the relationship of the grouped controls.

Locate section headings above their related screen controls, separated by one space line.

• Alternately, headings may be located within a border surrounding a grouping, justified to

the upper-left corner.

Indent the control captions to the right of the start of the heading.

Fully spell out in an uppercase font.

Display in normal intensity.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 62

 Software Engineering Department, Wolkite University

• Alternately, if a different font size or style exists, the heading may be displayed in mixed
case, using the headline style.

Control Subsection or Row Headings

Provide a meaningful heading that clearly describes the relationship of the grouped controls.

Locate to the left of the:

• Row of associated fields.

• Topmost row of a group of associated fields.

Separate from the adjacent caption through the use of a unique symbol, such as one or two greater
than signs or a filled-in arrow.

Separate the symbol from the heading by one space and from the caption by a minimum of three
spaces.

Subsection or row headings may be left- or right-aligned.

Fully spell out in an uppercase font.

Display in normal intensity.

• Alternately, if a different font size or style exists, the heading may be displayed in mixed-
case using the headline style.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 63

 Software Engineering Department, Wolkite University

Field Group Headings

Provide a meaningful heading that clearly describes the relationship of the grouped controls.

Center the field group heading above the captions to which it applies.

Relate it to the captions by a solid line.

Fully spell it out in an uppercase font.

Display it in normal intensity.

Alternately, if a different font size or style exists and is used, the heading may be displayed in
mixed-case, using the headline style.

Web Page Headings

Control Headings:

• For groupings of controls, follow the control heading guidelines.

Page and Text Headings:

• Provide a meaningful page heading that clearly describes the content and nature of the page
that follows.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 64

 Software Engineering Department, Wolkite University

• Provide meaningful text headings and subheadings that clearly describe the content and
nature of the text that follows.
• Establish a hierarchy of font styles, sizes, and weights dependent upon the organization
created and the importance of the text content.
• Settle on as few sizes and styles as necessary to communicate page content and
organization to the user.
• Do not randomly mix heading levels or skip heading levels.

2.15.31. Instructions

Incorporate instructions on a screen, as necessary:

• In a position just preceding the part, or parts, of a screen to which they apply.
• In a manner that visually distinguishes them, such as:
▪ Displaying them in a unique type style.
▪ Displaying them in a unique color.
• In a position that visually distinguishes them by:
▪ Left-justifying the instruction and indenting the related field captions,
▪ headings, or text a minimum of three spaces to the right.
▪ Leaving a space line, if possible, between the instructions and the related control,
heading, or text.

2.15.32. Completion Aids

Incorporate completion aids on a screen, as necessary:

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 65

 Software Engineering Department, Wolkite University

• In a position to the right of the text entry control to which they apply.
• In a manner that visually distinguishes them, including:
▪ Displaying them within a parentheses ( ).
▪ Possibly displaying them in a unique font style.
• If the controls are arrayed on the screen in a columnar format, position the completion aid,
or aids:
▪ Far enough to the right so as to not detract from the readability of the entry controls
within the column.
▪ But close enough to the related control so that they easily maintain an association with
the related control.
• Left-alignment of completion aids in a column of controls is desirable but not absolutely
necessary.

2.15.33. Information Entry and Modification (Conversational) Screens

Organization:

• Logical and clear.

• Most frequently used information:
▪ On the earliest screens.
▪ At the top of screens.
• Required information:
▪ On the earliest screens.
▪ At the top of screens.

Captions:

• Meaningful.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 66

 Software Engineering Department, Wolkite University

• Consistently positioned in relation to data field controls.

• Left- or right-aligned.
• Mixed case using headline style.

Text boxes/selection controls:

• Designate by boxes.

Spacing and groupings:

• create logical groupings.

• Make them medium in size, about 5 to 7 lines.

Headings:

• Upper case or headline-style mixed case.

• Set off from related controls.

Control arrangement:

• Align into columns.

• Organize for top-to-bottom completion.

Required and optional input:

• Consider distinguishing between required and optional data input through:

▪ Placing required and optional information within different screens, windows, or
groups.
▪ Identifying information as required or optional in a completion aid.
▪ Identifying required information with a unique font or symbol.

Instructions and completion aids:

• Include as necessary.
▪ Position instructions before the controls to which they apply.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 67

 Software Engineering Department, Wolkite University

▪ Position completion aids to the right of the controls to which they apply.

2.15.34. Grids

Usage:

• To enter large amounts of related data or information.

Design guidelines:

• provide descriptive headings and, where appropriate, subheadings for columns and rows.

Do not include colons (:) after the headings.

• Justify column headings according to the data presented in the table cells.
▪ Left-justify headings for columns containing text.
▪ Right-justify headings for columns containing numbers.
• Left-justify row headings.
• Organize the data or information to be entered logically and clearly.
▪ Place similar information together.
▪ Place most important or frequently used information at the top.
▪ Arrange information chronologically or sequentially.

Use light backgrounds.

Provide consistent spacing between columns and rows.

If more than seven rows are presented, insert white space after every fifth row.

2.15.35. Data Presentation

Provide visual emphasis to the data.

Give the data a meaningful structure.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 68

 Software Engineering Department, Wolkite University

• Spell out any codes in full.

• Include natural splits or predefined breaks in displaying data.

For data strings of five or more numbers or alphanumeric characters with no natural breaks, display
in groups of three or four characters with a blank between each group.

2.15.36. Data Display

Consider not displaying data whose values are none, zero, or blank.

Consider creating “data statements,” in which the caption and data are combined.

2.15.37. Tables

Usage:

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 69

 Software Engineering Department, Wolkite University

• To present and/or compare large amounts of data or information.

Design guidelines:

• Provide descriptive headings and, where appropriate, subheadings for columns and rows.

Do not include colons (:) after the headings.

• Justify column headings according to the data presented in the table cells.

Left-justify for columns containing text.

Right-justify for columns containing numbers.

• Left-justify row headings.

• Organize the presented data or information logically and clearly.

Place similar information together.

Place most important or frequently used at the top.

Arrange chronologically or sequentially.

• Justify the data presented in a column according to its content.

Left-justify textual data.

Right-justify numeric data.

• Length should not exceed the depth of a screen.

• Use light backgrounds.

Highlight a particular cell, column, or row using a contrasting display

technique.

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 70

 Software Engineering Department, Wolkite University

• Provide consistent spacing between columns and rows.

• If more than seven rows are presented, insert white space after every fifth row.
• Use caution in placing borders around cells.

2.15.38. Intranet Design Guidelines

Provide a single home page containing at least:

• A directory hierarchy.
• A search facility.
• Current news.

Present a visual style that is:

• Different.
• Distinguishing.
• Unified.

Orient the intranet Web site toward tasks.

Include many options and features.

Develop a strong navigational system.

1.15.39. Extranet Design Guidelines

To distinguish the extranet from the Internet, provide a subtle difference in:

• Visual style.
• Navigation.

Provide links to the public Internet site

HCI; Chapter Two: Obstacles and Pitfalls; By Mekuria Gemechu 71