4

Introduction to User Interface Design

Defining The User Interface Design

o The Evolution of User Interfaces

The Importance Of Good Design

A Brief History Of The Human Computer Interface

o Introduction Of The Graphical User Interface
o A Brief History of Screen Design

Obstacles and Pitfalls In The Development Path

o Designing For People: The Five Commandments

Usability
o Common Usability Problems

The Design Team

o Use Teams?
o Forming A Team

OBJECTIVES
At the end of this chapter students will be able
to:

M ULTIM EDIA DESIGN PRINCIPLES

4.1

DEFINING THE USER INTERFACE DESIGN

What is a "User Interface?. The term "User Interface" refers to:

The methods and devices that are used to accommodate interaction
between machines and the human beings who use them (users).
User interfaces can take on many forms, but always accomplish.
Two fundamental tasks:
1. Communicating information from the machine to the user.
2. Communicating information from the user to the machine.

Example of user interface design

The term of user interface generally refers to those of computers, but this is only one
example. Consider voice mail and other automated phone systems. These communicate
information to the user in the form of audio messages, and the user communicates
information back by pressing touch-tone buttons. A further removed example would be the
user interface of automobiles. The automobile communicates information to the user through
gauges and dials, and the user communicates information to the automobile through the
steering wheel, foot pedals, and other controls. Any machine that requires interaction with
human beings will have some sort of user interface.
The devices that are used to implement user interfaces on modern computers are video
screens, keyboards, and pointing devices such as mice and track balls. While these devices
haven't changed appreciably in the past few years (except for innovative ways to perform
existing functions, such as the touch pad as a new pointing device), the ways in which the
video screen can be used to effectively communicate information to the user and capture
information from the user continues to change at a feverish pace.

52

CHAPTER 4 INTRODUCTION TO USER INTERFACE DESIGN

4.1.1

The Evolution of User Interfaces

The very first computers had user interfaces that were as
rudimentary as the computers themselves. The computer
communicated information to the user through flashing lights, and
the user communicated information to the computer by setting
mechanical switches. Only highly trained specialists were able to
actually communicate directly with a computer.

The next stage of evolution had computers communicating to

users through printing devices, and the users communicating to the
computer through punch cards. This was an improvement, but still
cumbersome and inefficient. It was still rare to anyone but a
computer specialist would actually communicate directly with a computer. User interfaces
left the dark ages when video screens were used to communicate information from the
computer to the user, and typewriter-style keyboards were used to communicate information
directly to the computer.
This major innovation helped to allow "ordinary" users to
communicate directly with a computer. But since the video screens
were limited to displaying only the characters that were found on
the keyboard, the usefulness of the user interface was constrained
by the same limitation. User were required to memorize commands
that were generally tailored more to the computers than the users.
A great deal of training was required before anyone could make
use of the computer. User interfaces entered the modern era when
innovative designers at the Xerox Palo Alto Research Centre broke
away from the character-based interface paradigm and invented the
Graphic User Interface (GUI).
There were two major factors that separated the new paradigm from the old. One was the use
of graphics to communicate information to the users visually in addition to textually. The
other was to present a finite number of options to the users rather than requiring the users to
memorize and manually enter commands from a virtually unlimited set of options. In this
way the interface was focused on the needs of the human beings, rather than the other way
around. This significantly reduced the training that was necessary to use a computer, and for
the first time uninitiated users were able to become productive almost immediately.
The advent of these intuitive and easy to use design elements does not, however, ensure that
interfaces that incorporate them will be intuitive and easy to use. As much as anything else,
the advent of the graphic user interface has served to heighten awareness of general design
principles that apply irrespective of the paradigm in which a user interface is implemented.
This document discusses those principles as well as the GUI design elements and the best
ways in which to use them.

53

M ULTIM EDIA DESIGN PRINCIPLES

4.2
THE IMPORTANCE OF GOOD DESIGN
With todays technology and tools, and
designer motivation to create really effective
and usable interfaces and screens, a welldesigned interface and screen is very
important to users. It is the window to user, to
view the capabilities of the system. It is the
system; being the one of the few visible
components of the product the developers
create. It is also the vehicle through which
many critical tasks are presented. These task
often have direct impact on an organizations
relations with its customer, and its
profitability.
A screens layout and appearance affect a person in a variety of ways. If they are confusing
and inefficient, people will have greater difficulty in doing their jobs and will make more
mistakes. Poor design may even chase away some people away from a system permanently.
It can also lead to aggravation, frustration, and increased stress.
4.3

A BRIEF HISTORY OF THE HUMAN-COMPUTER INTERFACE

4.3.1
Introduction of the Graphical User Interface
Definition:
A GUI is a type of computer human interface on a
computer. It solves the blank screen problem that
confronted early computer users.
In general users sat down in front of a computer and faced a blank screen, with only a
prompt. The computer gave the user no indication what the user was to do next. GUI is an
attempt to solve this blank screen problem. Abbreviated GUI (pronounced GOO-ee). A
program interface that takes advantage of the computer's graphics capabilities to make the
program easier to use. Well-designed graphical user interfaces can free the user from learning
complex command languages. On the other hand, many users find that they work more
effectively with a command-driven interface, especially if they already know the command
language.
Basic Components
Graphical user interfaces, such as
Microsoft Windows feature the following
basic components:
1. Pointer
A symbol that appears on the
display screen and that you move
to select objects and commands.
Usually, the pointer appears as a
54

CHAPTER 4 INTRODUCTION TO USER INTERFACE DESIGN

small angled arrow. Text -processing applications, however, use an I-beam pointer
that is shaped like a capital.
2. Pointing device
A device, such as a mouse or
trackball that enables you to select
objects on the display screen.
3. Icons
Small pictures that represent
commands, files, or windows. By
moving the pointer to the icon and
pressing a mouse button, you can
execute a command or convert the
icon into a window. You can also
move the icons around the display
screen as if they were real objects
on your desk

4. Desktop
The area on the display screen where icons are grouped is often referred to as the
desktop because the icons are intended to represent real objects on a real desktop.

6. Windows
You can divide the screen into different areas. In each window, you can run a
different program or display a different file. You can move windows around the
display screen, and change their shape and size at will.

55

M ULTIM EDIA DESIGN PRINCIPLES

7. Menus
Most graphical user interfaces let you execute commands by selecting a choice from a
menu. Some of menu examples are pop-up menu, cascading menu, pull-down menu,
moving-bar menu and menu bar.

Cascading Menu

Menu Bar

Pop-Up Menu

Pull-Down Menu

56

CHAPTER 4 INTRODUCTION TO USER INTERFACE DESIGN

4.3.2

A Brief History of Screen Design

A 1980s screen 1

While developers have been designing screens since a cathode ray tube display was first
attached to a computer, more widespread interest in the application of good design principles
to screens did not begin to emerge until the early 1970s, when IBM introduced its 3270
cathode ray tube text-based terminal. The 3270 were used in myriad ways in the office, and
company-specific guidelines for good screen design occasionally began to surface.
A 1970s screen often resembled the one pictured in figure above. It usually consisted of many
fields with very cryptic and often unintelligible captions. It was visually cluttered, and often
possessed a command field that challenged the user to remember what had to be keyed into it.
Ambiguous messages often required referral to a manual to interpret. Effectively using this
kind of screen required a great deal of practice and patience.
Most early screens were monochromatic, typically presenting green text on black
backgrounds. At the turn of the decade, guidelines for text-based screen design were finally
made widely available and many screens began to take on a mush less cluttered look through
concepts such as grouping and alignments.

A 1980s screen 2

User memory was supported by providing clear and meaningful field captions and by listing
commands on the screen, and enabling them to be applied through function keys. Message
also became clearer. These screens were not entirely clutter-free, however.
57

M ULTIM EDIA DESIGN PRINCIPLES

Instructions and reminders to the user had to be inscribed on the screen in the form of
prompts or completion aids such as codes PR and SC. Not all 1980s screens look like this,
however.
In the 1980s, 1970s-type screens were still being designed, and many still reside in systems
today. Most early screens were monochromatic, typically presenting green text on black
backgrounds. At the turn of the decade, guidelines for text-based screen design were finally
made widely available and many screens began to take on a mush less cluttered look through
concepts such as grouping and alignments.

User memory was supported by providing clear and meaningful field captions and by listing
commands on the screen, and enabling them to be applied through function keys. Message
also became clearer. These screens were not entirely clutter-free, however. Instructions and
reminders to the user had to be inscribed on the screen in the form of prompts or completion
aids such as codes PR and SC. Not all 1980s screens look like this, however. In the 1980s,
1970s-type screens were still being designed, and many still beside in systems today.

A 1990s and beyond screen

While some basic design principles did not change, grouping and alignment, for example
borders were made available to visually enhance groupings, buttons and menus for
implementing commands replaced function keys. Multiple properties of elements were also
provided, including many different font sizes and styles, line thickness, and colours. The
entry field was supplemented by a multitude of other kinds of control, including list boxes,
drop-down combination boxes, spin boxes and others. In the 1990s, our knowledge
concerning what makes effective screen design continued to expand.

58

CHAPTER 4 INTRODUCTION TO USER INTERFACE DESIGN

4.4
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. Pitfalls in the design
process exist because of flawed
design process, including a failure to
address critical design issues, an
improper focus of attention, or
development
team
organization
failures.
Common pitfalls are:
1. No early analysis and understanding of the users needs and expectations.
2. A focus on using design features or components that is neat and glitzy.
3. Little or no creation of design element prototypes.
4. No usability testing.
5. No common design team vision of user interface design goals.
6. Poor communication between members of the development team.

4.4.1
Designing For People: The Five Commandments
The complexity of a graphical or interface will always
magnifies any problems that do occur. While obstacles to
design will always exist, pitfall can be eliminates if the
following design commandments remain foremost in the
designers 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 peoples
needs, not those of the developers.
Solicit early and ongoing user involvement
Involving the user in design from the beginning provides a direct conduct to the knowledge
they posses about jobs, tasks, and needs. Involvement in design removes the unknown and
gives the user a stake in the system or identification with it. One caution, however: user
involvement should be based on job or task knowledge, not status or position.

59

M ULTIM EDIA DESIGN PRINCIPLES

4.5
USABILITY
Bennett (1979) was the first to use the term usability to describe the effectiveness of human
performance. In the following years, a more formal definition was proposed by Shackel
(1981) and modified by Bennett (1979). Finally Shackel (1981) simply defined usability 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.

4.5.1
Common Usability Problems
Mandel (1994) lists the 10 most common usability problems in graphical systems as reported
by IBM specialist. They are:
1. Ambiguous menu and icons.
2. Languages that permits 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 perform
tasks.
7. Complex
linkage
between
and
within
applications.
8. Inadequate feedback and conformation.
9. Lack of system anticipation and intelligence.
10. Inadequate error message, help, tutorials and
documentation.
4.6
THE DESIGN TEAM
Multimedia design team includes:
1. Visual designer/graphic designer
A graphic designer designs art and copy layouts for
visual presentations. They use a variety of print,
electronic and film media to meet their clients' needs.
Most use computer software to generate new images.
Job duties include designing promotional displays and
marketing brochures for products and services,
developing distinctive logos for products and
businesses, and creating visual designs for annual
reports and other corporate literature. Additionally, graphic designers may develop the
overall layout and design of magazines, newspapers, journals, corporate reports and
other publications.
60

CHAPTER 4 INTRODUCTION TO USER INTERFACE DESIGN

2. Illustrator
Employs skills in drawing, arranging, designing, and lettering.
Designs and prepares publications. May do specimen models,
illustrations, charts, layout, and computer graphics. Maintains
equipment and supplies. May involve design or preparation of
schematic drawings.
3. Photographer
Job involves assisting and instructing users of darkroom and/or
studio Facilities, maintaining photochemical supplies and other
equipment. May include responsibility for producing finished
black and white or color photos.
4. Video and/or audio engineer
Other specialists oversee the pre-production, production, and
post-production of video and audio elements. Pre-production
includes the selection and preparation of shooting locations and
set up of equipment, production encompasses the creation of raw
audio/video content and post-production primarily refers to the
editing and refinement of content to a desired duration and
quality.

5. Project manager
The project manager is the person who ultimately guarantees ontime, on-budget delivery of an e-learning solution. He or she is
responsible to the sponsor/client for the quality of the finished
product. The project manager guides the approval process,
including obtaining feedback from evaluations, implementing
revisions, and drafting progress reports.
4.6.1
Why Use Teams?
A team is a means to an end. It is an approach to achieving a goal. Each team has in common
the need for rules to govern it. Rules play a crucial role in the team's success. Teams usually
judge their members by how closely they conform to the team rules. Members who most
closely conform to the rules earn the most respect. Successful teams are a synergistic
blending of human resources and talents.
4.6.2
Forming A Team
The first step in forming a team is to define a goal for the team
on the basis of the subject or problem to be examined. An
expected deadline, steps for completing the project, and technical
problems to be solved along the way are usually specified. Some
steps to get started:
Define the project or goal to be completed.
Identify the resources available to the team including
technical assets, subject matter experts, advisors, etc.
Identify work rules, what is expected of each team member.

61

M ULTIM EDIA DESIGN PRINCIPLES

62

Identify the skills and abilities necessary for the team to accomplish its task. Split up
these tasks trying to match each task with the appropriate team member to complete
it.