1.

0 Introduction

Today, the use of the Internet, Web applications, and Mobile applications by
organizations, businesses, and individual human users have increased greatly. A user
interacts with a computer, website, or application through a fundamental platform called
user interface (U I). The user interface (UI) has to be attractive , easy to use, and
responsive for a better user experience (UX). In the context of a business, a good
interface can help in converting its users into customers. For the better understanding of
user interface design , we should know Human-Computer Interaction (HCI).
In the following sections, we shall study the following topics.
• Examine what Human-Computer Interaction is and the factors to be
considered by the HCI designers.
• Define the User Interface and study its components.
• Look at the difference between good and poor design .
• Describe the importance of a Good User Interface Design and its benefits.
• Look at the History of Screen Design.
1.1 Human-Computer Interaction
It is the study of the interaction between humans and computers and the design of
computing technologies. It basically deals with the study, planning, design ,
Page □ < >
.IL
3 / 41 ,r

implementation, and evaluation of how people and computers work together so that a
person's needs are satisfied in the most effective way. It is a combination of user-
centered design, user interface design, and user experience design.
As HCI deals with Humans and Computers, ii is a cross-disciplinary area like engineering,
psychology, and ergonomics.
In the context of HCI let us first understand the difference between interaction and
interface. Interaction is an abstract model which is used to build systems where humans
interact with the computing device for a given task, whereas an interface is a hardware
or software used to implement a given interaction model. So the letter I in HCI refers to
both interaction and interface, including the abstract model and the technological
methodology as shown in Figure 1.1.

Conceptual Model Implementable Model

(Interaction Model) (System Interface )

-·
Ynndow -
HMdw•re

- ♦ Mo,,,tor

Wldo,t -- • lt.t.,t,oard

TASICS
[Link].
Dm('llry, M,,n,[Link],ttc:

\...
Fig. 1.1 The distinguishing concepts of Interaction {model} and Interface

1.2 Importance of HCI

" HCI will soon be everywhere, all the time" as said by Josh Bongard, a Professor of
Computer Science at, University of Vermont.
As computers (and embedded systems) have become a part and parcel of our lives today,
HCI has become much very important in recent years. HCI includes two important
functionalities: one it makes the necessary computational functionalities available and
second, ii provides an interaction model and helps to implement interfaces for high
usability. Usable and efficient interaction with the computing device results in higher
productivity.
Page □ < >
.IL
4 / 41 ,r

1.3 HCI Components

• HCI includes components of three domains: Computer Science, Human Factor
Engineering (HFE) and Cognitive Science
• Computer science is the study of processes that interact with data in the form of
programs.
• Human Factor Engineering (HFE) deals with the study of how people use systems or
equipment for designing, developing, and creating technology that is safer and more
effective.
• Cognitive Science is the study of the mind, intelligence, and learning. This domain
includes research in psychology, philosophy, linguistics, and artificial intelligence.
The domains and subdomains of HCI are shown in Figure. 1.2

HCI

Computer Sclenc.e Ethnography

Sociology and Social Psychology

Spttch-lancuage ~th<>tocv

DHc,,
Psycholorv

En11neering
lnformaHon 5ec._.1ty

Cognitive Science Erconomlcs and Hum1n Factors

Fig. 1.2 Domains and Sub-Domains of HCI

1.4 Multimodal HCI (MMHCI) Implementation:

In this section we will see how HCI will be in the future. We discuss the techniques and
applications developed recently in the context of MMHCI.

A multimodal HCI system responds to inputs in more than one modality or

communication channel (e.g., speech, gesture, writing,
and others). Multimodal techniques can be used to construct a variety of interfaces
Page □ < >
.IL
5 / 41 ,r

for different applications with the help of advanced HCI techniques and improved HCI
devices.
There are two MMHCI techniques based on the human senses used for developing the
interfaces for different applications:
• Core Vision Techniques - uses large body movements, gestures and gaze of a
person as the input.
• Affective Computer Interaction - recognizes facial expressions or emotions in
audio of a person as the input.
Figure.1.3 shows the MMHCI Implementation Model

Interfaces Applications

Attentive

Wearables
-....°""""...
llcmcM:• [Link]
Hffkhtlft
Others
°'""'

Hum1n Senses
!.---~:~~:;~~;;t-~:~-------------
Co,e Vbion;
Affective Computer
Interaction: ........
Mo=
..,..
l o d y M ~l F~lhprulk>n Finpfl l.l5ed om touch Kfftm
tl'CoSnitk>n 1'Ml!MfMUr., Prwssu,., [Link], uthc and
Gutl#es [Link].
Emo11oru In audio £[Link]
G1ie

Figure 1.3 MMHCI Implementation Model

1.5 Factors to be considered by HCI designers

The two important factors that should be considered in the design of HCI are
functionality and usability.
• Functionality defines a set of actions or services that it provides to its users and is
visible only when it becomes possible to be efficiently utilized by the user.
• Usability of a system can be defined for specific functionality. It is the range and
degree by which the system can be used efficiently and adequately by the users
to accomplish certain goals.
Page □ < >
.IL
6 / 41 ,r

The designers of the HCI should have a proper understanding of,

• The requirements and expectations of the users.
• The physical limitations and abilities possessed by the users.
• How their perceptual and information processing systems work.
• How to make the users enjoy the experience of using the computer.
• The technical characteristics and limitations of the computer hardware and
software.

2 .0 Definition of User Interface

The user interface is a subset of HCI and forms the part of a computer and its software
that users can see, hear, touch, and talk to.

2.1 Components of User Interface

A user interface has two components: Input and Output
• The user communicates his or her needs or desires to the computer through the
input component.
Examples: Keyboard, mouse, trackball, joystick, one's finger (for touch-sensitive
screens or pads), and one's voice (for spoken instructions).
• The computer conveys the results of its computations and requirements to the user
through the output component.
Examples: Display screen and speakers.

3.0 The Importance of Good Design

The screen and the interface are lhe only visible componenls for a developer to create a
product and, for many users, they form the complete system. So, it is very important to
have a well-designed inlerface.
They are also important because,
• All the capabilities of lhe system can be viewed on the screen through the inlerface.
• The form a bridge between the user the capabilities of the software.
• They also form a vehicle through which many critical tasks are presented which in
lurn would affect the organization's relations with its customers and its profitability.
• A bad screen's layout and appearance and a system's navigation sometimes may
confuse the user and make it difficult to do their jobs and may make more mistakes.
Page □ < >
.IL
7 / 41 ,r

• Poor design may increase the stress level of the user and leads to frustration. This
can stop the user from using the system permanently which can create a huge
financial loss for users and organizations.
• In critical systems, like air traffic control or a nuclear power plant, the safety of its
users and/or the general public may become compromised.
3.1 Good and Poor Design
Every application is different and there are no rules or standard formulae for creating a
perfect user interface. But there is a list of things to be considered for a better design with
respect to usability. To appreciate the importance of the study of this course, some of the
design issues are considered and discussed below.

3.1.1 Lack of text hierarchy

Text is the primary unit of informational content, so it must always be legible, organized,
and comprehensible. For better perception of information by the users, the text must be
properly formatted. A comparison of good and bad text hierarchy is as shown in Figure.
1.4

Hey Charlie Hey Charlie

Welcome Home W-'tom•Hom•

8/
Popular

0
Fig. 1.4 TeKt Hierarchy
Page □ < >
.IL
8 / 41 ,r

3.1.2 Confusing Forms

In the design of forms, it is very important to provide guidance before and after submitting
the form. A demonstration is given in Figure. 1.5

E•mail E-mail
xyz@[Link] xyz@[Link]

Password Password

[ • · · · • • · · · Ill

Error ! Password incorrect. If you

don't remember, re-sel it

0
Fig. 1.5 Guidance for submitting the form

3.2 The benefits of Good Design

Research work in the area of Interface design has shown that productivity benefits could
be gained through proper design.
It was found that, on an actual system that requires the processing of 4.8 million screens
per year, even if one extra second per screen is spent on viewing a screen due to poor
clarity, then almost one additional person-year would be required to process all screens.
Table 1.1. indicates the result of the above analysis.

Table. 1.1 Impact or Inefficient Screen Design on Processing Time

Additional seconds required per screen in Additional person-years required to process

seconds 4.8 million screens oer vear
1 0.7
5 3.6
10 7.1
20 14.2
Page □ < >
.IL
9 / 41 ,r

Summary: Twenty extra seconds in screen usage time adds an additional 14 person-
years.

3.2.1 Results of research in Screen Design

• Less crowded version of the screens improved the productivity of the users by 20
percent.
• Reformatting screens took 25 percent less time for the transactions and with 25
percent fewer errors than those who used the original screens.
• Reformatting inquiry screens after following good design principles reduced
decision-making time by about 40 percent, resulting in a savings of 79 person-
years in the affected system.
• Another study was done by comparing 500 screens that were used to extract
information from displays of airline and lodging infonmation, it was found that the
time to extract information was faster by 128 percent for the best format.
• Proper formatting of information on screens has been found to have a positive
effect on performance. In 1995, Cope and Uliano found that one graphical window
which is redesigned to be more effective would save a company about $20,000
during its first year of use.
• In the area of web design, Baca and Cassidy (1999) redesigned an organization's
homepage due to complaints by users unable to locate infonmation. 73 percent of
the searches were completed with an average completion time of 113 seconds
after one redesign. The further redesigns improved the success rate to 84 percent
and the average completion time was reduced to 57 seconds.
• Redesign and Iterative testing showed that there was a 15 percent improvement
in search success rate and 50 percent improvement in search time between the
first and final designs.
• Four websites commonly used for online shopping were evaluated by Fath and
Henneman in 1999. The task completion rate was found to be higher in the
websites with better interface designs and hence good business.
• There are other benefits also from good design (Karat, 1997). A good screen
design needs less training to the users which reduces training costs. Also, fewer
assist calls are generated which reduces the support line costs. This increases
employee satisfaction.
Page □ < >
.IL
10 / 41 ,r

• Pressman ( 1992) has shown that identifying and resolving problems during the
design and development process also has significant economic benefits.
Summary: Every dollar invested in system usability returns $10 to $100 (IBM, 200 1).

4.0 A Brief History of Screen Design

• IBM introduced the first 3270 cathode ray tube text-based terminal. The 3270 was
used in many ways in the offices and the need for a better design was being
considered.
• In the 1970's, the user screen looked as shown in Figure. 1.6
• The screen looked cluttered w~h unintelligible captions.
• The screens possessed a command field which required the user to
remember what has to be keyed in. This required a great amount of practice
and patience.
• Also, the screens were monochromatic.

TDX95210 THE CAR RENTAL 10/11/76 10:25

NAM TEL RO

PU R C RT MP

Command ==>

Flg.1.6 A 1970s screen

• The screen design was improved in the 1980's and is shown in Figure.1.7
• In the second stage of design, the screens were visually less cluttered, with
concepts such as grouping and alignment of elements being developed.
• The commands were listed on the screen and there were clear and
meaningful field captions.
Page □ < >
.IL
11 / 41 ,r

THE CAR RENTAL COMPANY

AFNTEA >> N .ame·

Tekphont!':

LOCATION » Office:

Pk k-up ~te:

Return Date:

AUTOMOBILE» 0.n: I PR. ST, FU, MO, CO, SC)

M,te, Per ~ y: - - ---

The maXlmum ~Uowed mlles per~ is 150
Enter Fl•Help

Fig.1.7 A 1980's screen

• In the 1990s screen designs evolved greatly by the use of graphics and is as shown
in Figure. 1.8
• Borders were used to enhance groupings, buttons and menus were used,
• Multiple properties of elements like different font sizes, styles, line
thickness, and colors were introduced,
• The entry field was supported by many controls like list boxes, drop-down
combination boxes, spin boxes etc, which removed the need to remember
the key entries,

r
I
IL
RENTER
,_=== ]
J
[ L~TION 0111<0

'1c:[Link]·
===
===
I ~,o_ ..
~um OM~

----
n:l
Molft""'(Ny'.
J

Fi&.1.8 1990's and Beyond screen

Page □ < >
.IL
12 / 41 ,r

5.0 Introduction to the Graphical User Interface (GUI)

A user interacts with an application by providing some information to the application. This
can be done in two ways, the first is Character User Interface (CUI) where the user
interacts with the application by typing some characters. This interface is not user-friendly
as the user has to type all the commands and the user has to remember all the
commands. Example: DOS.

The second way is Graphical User Interface (GUI) where the user interacts with the
application through some graphics like menus, icons, images, etc. known as objects with
the help of pointing devices. The desktop is an example of a GUI. The input devices used
here will be an electronic equivalent of the human hand. The GUI objects convey
information and represent actions that can be taken by the user. As the objects on a GUI
prompt the user with options or menus, this interface is very user-friendly.
Examples: Windows XP, Windows 7, etc.

The GUI was first developed by Alan Kay, Douglas Engelbart, and a group of other
researchers in 1981 at XEROX PARC. Later, Apple introduced a GUI on its Computer
called Lisa on January 19, 1983.

Users can also interact with a computer application through voice and gestures.
• Smart assistants such as Alexa on Amazon devices, use voice control.
• In Virtual reality games users interact with 3D design environments through their
bodily ges tures or movements.
Figure 1.9 shows the User Interface implementation loop with different ways of interaction
such as visual objects, voice and gestures.
 .... < >
Page 13 / 41 □ ,r

Fis. 1.9 User Interface Implementation Loop

In the following sections, we shall study the following topics.

• Understand an Object, which is the visible component of a GUI
• List the different interaction styles.
• Understand the reason for the popularity of Graphics
• Describe the concept of Direct Manipulation
• Look at the advantages and disadvantages of Graphical Systems
• List the different characteristics of a GUI

5.1 GUI Objects

The users interact in a GUI through a collection of elements called Objects.
• The objects can be seen, touched, or heard.
• The objects are always visible to the users and are used to perform tasks.
• When the user interacts with the objects, they change color, size, or visibility.
• Every object is an independent entity.
• The operations or actions performed by the users on the objects are,
• Accessing and modifying objects by pointing.
• Selecting
• Manipulating.
• All objects have standard resulting behavior
Figure 1.10 shows a GUI for a Gaming application with some visible objects.
Page □ < >
.IL
14 / 41 ,r

Fig 1.10 Game GUI

5.2 Interaction Styles

Before we study a GUI in detail, let us understand some Interaction styles.
Interaction styles are methods used for communicating between a user and a computer.
There are many interaction styles to choose for an interface designer to design a graphical
system, a Web page, or an application. The user interfaces evolved due to the different
interaction styles which aided them. They are:
• Command Line
• Menu selection
• Form fill-in
• Direct manipulation
• Anthropomorphic
The type of system being developed and the characteristics of the input and output
devices to be used for the interface define the choice of interaction styles.

5.2.1 Interaction Style Comparison.

Table 1.2 compares all the interface styles.

Table 1.2 Comparison of Interaction Styles

Style Method of Interaction Advantages Disadvantages
Command Line . Press of a key or • Is powerful and . The commands
typing a command gives immediate must be learnt
access to the and
system functions. remembered .
Page □ < >
.IL
15 / 41 ,r

. Commands can . The command

include options or lines can be
parameters to cryptic and have
change their complex syntax.
behavior. . They cause
. This mode typing errors
conserves screen which can lead
space. to user
frustration.

Menu Selection . Choosing from a set • Screen menus are • Menus are
of options with a better as they use a effective, only if
pointing device or a person's powers of menu choice

. keystroke.
The options could
be given in reaction
recognition and not
remembrance.
labels
meaningful and
understandable,
are

to a visual screen otherwise the

menu shown or speed of use will
options provided by be degraded
voice. and errors will
increase.
. Menus break a
complex
interaction into
small steps,
which structure
and aid the
decision-
making, this
helps infrequent
users who are
not familiar with
the system .
 .... < >
Page 16 / 41 □ ,r

. Too many small

steps slows the
process of
selection for a
knowledgeable
user.
Form fill-in . Contains a screen . Familiar format • Consumes screen
with a series of . Simplifies space
controls and fields information entry • Requires careful
into which a user . Requires minimal and efficient
types or selects from training design
options. • Does not prevent
typing error
Direct . Faster learning • Greater design
Manipulation . Easier complexity
remembering • Window
. Exploits manipulation
visual/spatial cues requirements
. Easy error • Inefficient for
recovery touch typists
. Provides context • Requires icon
. Provides recognition
immediate • Screen clutter
feedback may increase.
Anthropomorphic This interface tries to ~ They are natural . The
interact with people the because these development of
same way people interfaces include these interfaces
interact with each spoken natural requires an
other. language understanding
dialogues, hand of human
gestures, facial behavior.
Page □ < >
.IL
17 / 41 ,r

expressions, and . The interface

eye movements. designer should
understand the
meaning of
gestures and
expressions. So
they are
difficult to
implement.

5.3 The Popularity of Graphics

The graphics screen became popular because of its three-dimensional look with a lot
of graphical images called icons as compared to the older one-dimensional text-based
screens.

The icons on a GUI represented objects or actions. The information on a GUI floated in
the windows and seemed to rise above the background plane. The controls appeared to
rise on the screens and could move when activated. Information could appear and
disappear when needed. Also, the text could be replaced by icons. The increased
computer power and improved displays have enabled a system to react quickly,
dynamically, and meaningfully.

The user's screen on a personal computer is also known as a Desktop. It has a lot of
user information or data stored in the form of objects representing notes, files, trays, and
trash cans all scattered on the screens. This is also called as a WIMP interface: windows,
icons, menus, and pointing devices.

All the above features helped in enhancing the person's information processing
capabilities. Also, it reduced the requirement of perceptual and mental information
recoding and reorganization, reducing the memory loads.
GUI also helps in faster information transfer and gives a more compact representation of
information. Graphics also adds an appeal to the interface and allows the users to create
a customized way of storing and organizing data.
Page □ < >
.IL
18 / 41 ,r

5.4 The Concept of Direct Manipulation

Ben Shneiderman, a Professor of Computer Science at Maryland University, used this

term to describe graphical systems with this style of interaction in 1982. He called them
"direct manipulation" systems, and they have the following characteristics:
• The system is designed to look like an extension of the real world:
• Here the user interacts with the screen which has objects and actions which
simply replicate his or her familiar environment. The user then accesses
and modifies these objects, including windows.
• Here the user focuses on the data and not the applications and tools used
to develop them. The user is provided with a familiar environment to work
with.
• The physical organization of the system, which is unfamiliar, is hidden from
view and is not a distraction.
• Objects and actions are continuously visible:
• Labelled buttons replace complex syntax and command names, so actions
performed need not be remembered.
• Objects are continuously visible.
• Cursor action and motion occur in physically obvious and intuitively natural
ways.
• Actions are fast and incremental and the results are displayed after every
action:
• In the current interfaces, the results of actions are immediately displayed
visually on the screen in their new and current form. This is because tactile
feedback is not yet possible
• Auditory feedback may also be provided
• The impact of the previous action is quickly seen, and the evolution of tasks
is continuous and effortless.
• Incremental actions are easily reversible:
• Any incorrect action, can be easily undone

5.5 Graphical Systems: Advantages and Disadvantages

Graphical Systems were developed with the following goals:
• To reduce the memory requirements imposed on the user
Page □ < >
.IL
19 / 41 ,r

• To make effective use of the user's information-processing capabilities

• To reduce system learning requirements

5.5.1 Advantages
Recognizing symbols is faster than text - graphical objects, elements, and text
are represented in the form of icons. The attributes of icons, such as shape and
color help in recognizing a message faster.
• Visual or spatial representation of information is easier to be retained and
manipulated than textual information.
• Symbols are more effective in conveying simple instructions.
• A human mind can easily remember symbolic displays than text, because actions
and visual skills in humans developed before languages. So graphic
representations of objects are found to be more natural and closer to human
capabilities.
• Displayed objects are visible on the screen so a picture gives the current context.
• As the user initiates actions there is a feeling of control, which results in faster
adaptation to the system.
• As the actions result in immediate responses, errors can be rectified if the action
does not result in a correct response. This feature is very helpful for new users.
• Graphical interfaces are more attractive and appealing.
• Icons can be spaced nearby which can result in more information in a smaller
space.
• Graphical interfaces avoid language translations that exist in text-based systems.
• These systems can be easily enhanced by adding text displays in case graphical
design is posing a limitation.
• Typing skills are not needed in graphical interfaces.

5.5.2 Disadvantages
• As the graphical screen designer has a lot of options to choose to design the
controls, it becomes complicated and the design may not be better if choices are
not done thoughtfully.
• The users of a graphical interface need more time to learn the system as they may
not know the meanings of many words and icons. The user has to learn to use a
pointing device.
Page □ < >
.IL
20 / 41 ,r

• There are not enough experimentally-derived design guidelines for a developer.

• There are differences in techniques and terminologies used by various graphical
system providers, even among successive versions of the same system, because
of copyright and legal implications, product differentiation considerations, and
expanding knowledge of the interface. This results in difficulty in learning, and
relearning, both for the designers and users.
• Many users such as lawyers, found icons difficult to use, compared to a textual
format , so they demanded a better format. Also, numeric symbols were found to
provide faster responses in visual search tasks.
• There is a limitation to human comprehension, so the number of symbols and
icons has to be restricted.
• An experienced touch typist is more comfortable using a keyboard than a mouse.
• Inefficient for expert users. Inefficiencies develop when there are more objects and
actions that can fit on the screen.
• Not all users prefer a pure iconic interface so it is not always a preferred style.
• A study has found that graphic instructions on an automated bank teller machine
were inferior to textual instructions so graphics screen is not always the fastest
style of interaction .
• A graphical system does not guarantee the elimination of clutter on a screen and
thus increases the possibility of confusion.
• Some applications such as a listing of names and telephone numbers in a textual
format will require less space on the screen than a graphical equivalent.
• A good design requires hardware of adequate power, processing speed, screen
resolution, and graphic capability so a limitation in this area may not result in a very
efficient graphic system.

6.0 Characteristics of the Graphical User Interface

A graphical system possesses a set of characteristics as discussed below:

6.1 Sophisticated Visual Presentation

The main objective of a graphical interface design is to create a screen reflecting the real-
world of the user in a very realistic, meaningful, clear, and simple way because the visual
presentation of the interface is what people see on the screen.
Page □ < >
.IL
21 / 41 ,r

A sophisticated graphical system includes drawings and icons, and also different styles
and sizes of fonts. There are millions of choices for colors and graphics that also allow
animation and the presentation of photographs and motion video.

The interface elements visually presented to the user in a graphical system also include
windows, menus, icons to represent objects such as programs or files, assorted screen-
based controls like text boxes, list boxes, combination boxes, scroll bars, and buttons, a
mouse or other pointing device, and the cursor.

6.2 Pick-and-Click Interaction

The user of a GUI identifies the element on a graphical screen and selects it for some
function. Identifying an element is called pick and perfonning an action is called a click.

There are two mechanisms to point and select elements of a graphical screen and
perform an action upon that element,
• Through the input device, mouse, and its buttons, which allow rapid selection and
feedback.
• Through the input device, keyboard.

6.3 Restricted Set of Interface Options

The number of alternatives available to the user is what is presented on the screen or
what may be retrieved through what is presented on the screen. So, the screen size may
become a restriction for the number of options. This concept is known as "what you see
is what you get", the acronym of which is WYSIWYG.

6 .4 Visualization
Voluminous data or too abstract information is difficult to understand. Such information
can be made understood easily by a cognitive process called Visualization. The best
visualization method helps a user learn from the data.
In visualization, an entity's representation is changed to gradually reveal the structure
and/or function of the underlying system or process. Presenting specialized graphic
pictures facilitates visualization.
The goal of presenting realistic graphical images is to convey the most relevant
information to the user.
Page □ < >
.IL
22 / 41 ,r

6 .5 Object Orientation

A graphical system is made up of objects and actions. These two components as a single
unit. A well-designed system helps the users focus on the objects and not on the actions
to be carried out on them. Objects can contain sub-objects.
Eg: If we consider a document as an object, then a paragraph, sentence, word, and letter
may be thought of as sub-objects.
According to IBM's System Application Architecture Common User Access, Advanced
Interface Design Reference (SAA CUA), objects can be divided into three classes: data,
container, and device.
• Data objects
• These objects present information in the form of either text or graphics and they
appear in the body of the screen.
These are the screen-based controls that are used for information collection
or presentation.
• Container objects
These are objects that hold other objects.
For easy access and retrieval, they can be used to group two or more
related objects.
• Container objects are of three types: the workplace, folders, and work
areas.
• The workplace is lhe desktop, a slorage area for all lhe other objects.
Folders are general-purpose containers for lhe long-term storage of
objects.
Work areas are lemporary storage folders used for storing multiple objects
currently being worked on.
• Device objects
These objects represent physical objects in the real world, such as printers or
trash cans.
• These objecls may contain olher objects to act upon
• For example, a file may be placed in a printer for prinling ils contents.
 .... < >
Page 23 / 41 □ ,r

6.5.1 Characteristics of objects

• Objects can be characterized based on the relationships that exist between
them.
• The object's type is defined by these relationships.
• The objects of the same type possess the same traits and behaviors.
• These relationships are called collections, constraints, composites and,
containers.
• Collections relationship
• Here the objects share a common aspect.
• A query or multiple selections of objects may result in a collection
• Operations can be applied to a collection of objects.
• Constraints relationship
• In this type of relationship, an object in a set affects some other object in
the set.
• Example: A document organized into pages.
Composite relationship
• Here the relationship between objects combines them into one object.
• Examples: Range of cells organized into a spreadsheet.
A collection of words organized into a paragraph.
• Containers relationship
• Here one object contains or exists within another object.
• Example: The text in a document or documents in a folder.
• A container influences the behavior of its content.
• A container may add o r suppress certain properties or operations of objects
placed inside it.
• Example: This relationship can control access to its content or it can control
access to the kinds of objects it will accept.
• One important characteristic of objects is persistence, which gives the state of the
object after it is established .
• Example: window size, cursor location, scroll position, etc should be
preserved when the user changes it
Page □ < >
.IL
24 / 41 ,r

6.5.2 Properties or Attributes of Objects

Properties are the unique characteristics of an object which help to describe them and
can be changed by users.
Examples: text styles, font sizes, or window background colors.
6 .5.3 Actions
Users take actions on objects in two ways:
They manipulate objects by giving specific commands.
Actions through command can be performed in many ways by direct
manipulation or a command button
• Examples: opening a document, printing a document, closing a window, and
quitting an application.
• They modify the properties or attributes of objects.
When objects are selected for modifying their properties or attributes, the
selection will remain in effect until they are deselected.
• Examples : selecting cascaded windows to be displayed, a particular font style,
or a particular color.
6.5.4 Application versus Object or Data Orientation
The earlier graphical systems were application-oriented, whereas the present graphical
systems are object or data-oriented.
Today the users think about tasks to be performed in an application. To implement this,
actions are performed on objects. This object:action approach allows people to focus
more on their tasks and reduces the visibility of the operating system and other
applications.
Table 1.3 shows the steps taken by the Action: Object approach in the Application-
oriented approach and Object-oriented approach.

Table 1.3 Action : Object Approach

Steps Applicatio n-oriented approach Object-oriented approach

1 Ac tion : The user opens an Object: The user chooses an

application such as word object such a s a memo
proces sing
- 2 Object: The user then selects Action: The user then selects
a file or other object such as a an application such as word
memo processing
I
 .... < >
Page 25 / 41 □ ,r

6.5.5 Views
The ways of looking at an object's information are called views.
IBM's SM CUA gives four kinds of views: composed, contents, settings, and help.
• Composed view
• This view presents information and the objects contained within an object.
• This view is associated with data objects and is specific to tasks and products
which are being worked upon.
• Content view
• This view lists the components of objects.
• Settings view
• This view permits the seeing and changing of object properties.
• Help view
• This view gives all the help functions.
6.6 Use of Recognition Memory
As the objects and actions are continuously visible in the current graphical systems, the
user recognizes and remembers them.
6.7 Concurrent Performance of Functions
Graphic systems may perform more than one task at a time and multiple programs will
run simultaneously to perform these tasks. This is known as multitasking.
Data can be transferred between programs or stored temporarily on a clipboard for later
transfer or automatically swapped between programs.
There are two ways of multitasking
• Cooperative multitasking:
• If a system is not busy on a primary task, it can process a background
task.
Preemptive multitasking
• Here applications are running as separate tasks and the processing power
is divided into time slices and allocated to small portions to each
application.
Page □ < >
.IL
26 / 41 ,r

7 Web User Interface

7.0 Introduction

The World Wide Web (WWW) was initially developed for serving as a communication
medium for researchers and scientists. But today it has entered into businesses,
organizations, and homes around the world. As the web has its roots in a market-driven
society, the important design considerations are the amount of information available
and its convenient access. To access the web applications, an interface is needed
and this is known as a Web Interface .

In the earlier stages of Web interface design, navigation and the presentation of
information were considered very essential, so content was the priority and not data. This
type of Content- or information-focused interface design is called Web page design. But
today, as many of the earlier applications developed for use on graphical systems have
migrated to the Web for their foundation, the design of Web applications has increased.
These applications also need an interface. This type of application-focused interface is
referred to as Web application design.

Web Page Design:

• The main goal is to provide information.
• It is designed to build a hierarchy of menus and pages.
• The pages are well slructured, easy to use, natural and truthful.
• The design should properly balance the structure and relationships of menus,
content, and other linked documents or graphics.
• The design should create an environment where people can navigate and move
easily between pages of information.

Web Application Design:

• The main goal is to collect and process data.
• Is designed for a user lo do and save something.
• Application pages are spread across the screen.
• The pages seek the user's attention for a longer period of time.
• Applications may be kept up and running continuously.
Page □ < >
.IL
27 / 41 ,r

In the following sections, we shall study the following topics.

• Understand the complexity in the design of a Web Interface.
• Describe the popularity of the World wide web.
• Understand the different characteristics of Web Interface.
• List the Principles of User Interface Design.

7 .1 Complexity in Web Interface Design:

• The design language is HTML and its intended users were technical people and
not the general population. It had limited objects and interaction styles, and could
not provide a platform for presenting information in the most effective way for
people.
• Browser navigation through the "Back" and "Forward" buttons or links can take
time.
• The main issue of concern is the information architecture and task flow, which is
not easy to standardize. The availability of the various types of multimedia makes
it difficult to choose. Also, users are ill-defined and have greatly variable
characteristics.

7.2 The Popularity of the Web

The graphical user interface revolutionized the user interface whereas the Web
revolutionized computing.

The World Wide Web is also referred to as WWW. W3, or the Web. The Web is an
interconnected system of public web pages accessible through the Internet. There are
many applications built on top of the internet and the Web is one of them.
Web helps people scattered across the globe to communicate, access information,
publish, and be heard. It not only enables people to control the display and the rendering
of Web pages it can also help people change the typography and colors, turn off graphics,
decide whether or not to transmit certain data over non-secure channels, and accept or
refuse cookies. The number of Internet hosts has increased since 1984. From 1000 in
1984 they exceeded one million in 1992.

Commercialization of the Internet further increased this grow1h rate. In 1993, Internet
traffic expanded at a 341 ,634 percent annual grow1h rate. With nearly 10 million hosts
Page □ < >
.IL
28 / 41 ,r

online, 40 million people got connected in 1996. In 2005 the number of Internet hosts
exceeded 350 million and the number of users was one billion.

7.3 Characteristics of a Web Interface

In this section let us understand the characteristics of a Web Interface by comparing them
with the Graphical User Interface and also comparing a Printed page with a Web page.
Though GUI and Web page design are similar in the ways like they both are used by
people, are interactive, are both are presented with a lot of visual components on the
screen, they are also different in many ways. Table 1.4 gives a comparison between GUI
and Web design

7 .3.1 GUI versus Web page design.

Table 1.4 GUI Versus Web Design

Criteria GUI Web Design
Devices . User hardware variations are limited. . User hardware variations are
. User hardware characteristics are enormous and the devices
well defined, such as in modems and may range from handheld
monitors. mechanisms to high-end
. Screens appear exactly as specified . workstations.
. Screen appearance gets
affected by the hardware.
User Focus . Data and Applications . Navigation and Information
Data/Information . Properties of the data are known and . Data is unknown and is
it is created and used by known and created by an unknown and
trusted sources. untrusted.
. Data is organized in a meaningful . Data is not organized and is
way and placed into the system by placed onto the Web by users
users or known people and or known people and
organizations. organizations.
. Data is separated as private and . Data is not private.
shared data.
Page □ < >
.IL
29 / 41 ,r

Navigation . Navigation is not through visible . Navigation is through visible

components but happens through components like links,
menus, lists, trees, dialogs, and bookmarks, typed URLs.
wizards. . Not many design standards
. Designed is standardized by toolkits are available so page design
and style guides. is not very inconsistent.
Response Time . Instantaneous. . Is variable and depends on
transmission speeds, page
content, etc.
System . Almost unlimited and depends on . They are limited and depend
Capability the capabilities of hardware and on the capabilities of the
software. hardware, browser, software,
client support, and also on the
user's requirements w.r.t to
response time, security, and
privacy.
Integration . In order to provide seamless . Individual sites are provided
integration of all applications into the with some basic functions like
platform environment, standard tools navigation, printing with
and components are used. toolkits and components.
. Individual sites are different.

Security . Not implemented for home PC . Security options provided by

users. the browser are not always
. For other users it is provided based understood by the users and if
on the requirements and user's used, they can limit some
investment and efforts. available functionality.
Reliability . Provided based on the willingness to May be affected user, telephone
invest in resources and effort. line and cable providers, Internet
service providers, hosting
servers, and remotely accessed
sites
Page □ < >
.IL
30 / 41 ,r

7 .3.2 Printed Page versus Web Pages

Printed pages have been in use for five and a half centuries and so a set of accepted
guidelines for editorial style, element presentation, and text organization have already
been proposed and used. Many of these guidelines have been incorporated in the design
of Web pages and many more are being rethought, researched, and reformulated to cover
the differences between them and a printed page.
Table 1.5 gives a comparison between a Printed page and a Web page.

Table 1.5 Comparison between a Printed Page and Web Page

Criteria Printed Page Web Page
Page size . Large and of fixed size. . Presented in pieces whose
. Designed as a single entity sizes depend on the browser
and the visual impact is technology used and the
maintained in a hard-copy monitor size.
form. . Designed as a single entity but
the visual impact gets
degraded as they are
presented in parts and
requires scrolling to bring the
full view.
Page . Is superior as they are . They are rendered slowly
rendering presented to the reader as depending on the transmission

Page Layout . complete entities.

Is very precise. .
speeds and content.
Depends
toolkits,
on
user
the design
browser
characteristics, and screen
sizes.
Page . Better . Comparatively less
resolution
User Focus . Information is presented as a . Information is presented in
complete set irrespective of snapshots and the length and
the page size. depth of the page is unknown.
Page □ < >
.IL
31 / 41 ,r

Page . Is simple and turning of pages . Is done through clicking on

navigation is a motor skill learned early links that have to be followed
in life after making some decisions.
Interactivity . Happens by the user's eyes . Happens through eyes and
selectively traversing the hands used to scroll, point,
static information on a page expand and click on the
and understanding. required information. So doing
while seeing is more
memorable and has a stronger
impact than only seeing.
Page . Pages are organized . Pages here can be viewed
Independence sequentially, in a randomly and each page is
standardized way, and also independent of each other
provide a clear sense of
place. . w.r.t the content.
Headers and footers must be
provided for a better
understanding.

8 .0 Principles of User Interface Design

A good interface acts as an extension of a person, reflecting his/her personality. It should
be useful and respond to his or her specific needs and accomplish the business objectives
for which it is built in a very effective and efficient way. Also, it should be easy to learn
and fun to use.

Many researchers and writers have tried to define a set of general principles of interface
design. In the following section, we will study these general principles to design a User
Interface

8 .1 General Principles
In this section, the design goals to create a user interface are discussed. These are
fundamental to the design and implementation of effective GUI and Web interfaces.
They are derived from the various principles described by Galitz (1992), IBM (1991,
2001), Lidwell et al. (2003), Mayhew (1992), Microsoft (1992, 1995, 2001), Norman
Page □ < >
.IL
32 / 41 ,r

(1988), Open Software Foundation (1993), Verplank (1988), and the World Wide Web
Consortium (2001 ). The underlying structure is often revealed

Accessibility - this refers to a property that makes the design to be usable by everyone
without any modification. There are four properties of an accessible design.
• Perceptibility - a design can be understood by everyone irrespective of their
sensory abilities.
• Operability - a design can be used by anyone irrespective of their physical abilities
• Simplicity - a design that is easy to use.
• Forgiveness - a design that minimizes the occurrence and consequences of
errors.

Aesthetically Pleasing - an interface looks visually appealing if,

• A meaningful contrast is provided between screen elements.
• Groupings are created.
• Screen elements and groups are aligned.
• A three-dimensional representation is provided.
• Color and graphics are effectively utilized.

Availability - refers to a feature where all the aspects of the system should be made
available all the time without the use of modes and states.

Clarity - all the visual elements, functions, metaphors, words and text should be very
clear visually, conceptually, and linguistically.

Compatibility - this refers to a design principle that helps in providing compatibility with
the user, task and job, and the product. The design should also adopt the user's
perspective.

Configurability - This permits easy personalization, configuration, and reconfiguration

of settings so that the interface can be easily changeable according to the user's needs.

Consistency - In a consistent system all similar components should have the following:
• A similar look.
• Similar uses.
• Operate similarly.
 .... < >
Page 33 / 41 □ ,r

Also, the same action should always give the same result, the function and position of the
standard elements should not change.

Control - this aspect of interface design deals with the control that the user has over the
interface.
• The user alone should initiate actions through requests.
• The actions should be performed quickly and they should be capable of
interruption or termination.
• The user should not be interrupted during errors.
• The interface should be designed considering the user's skills, experiences,
habits, and preferences.

Directness - the tasks should be performed using direct ways and any alternative
methods should be made visible. The effect of any action should also be visible.

Efficiency - the control actions should need minimum eye and hand movements. Also,
the navigation paths should be as short as possible.

Familiarity - the interaction design should use concepts and languages that are familiar
to the user. Using real-world metaphors makes an interface looks naturalistic.

Flexibility - This principle refers to designing an interface considering the differing needs
of its users. Further, the performance can be based upon,
• User's knowledge and skills.
• User's experience.
• User's personal preference.
• User's habits.

Forgiveness - this refers to the acceptance of mistakes done by users and recovering
from them.
The design should,
• Tolerate and forgive human errors.
• Help in preventing errors from occurring whenever possible.
• Also provide protection against errors.
• Provide constructive messages when an error occurs.
Page □ < >
.IL
34 / 41 ,r

Predictability - this principle helps in anticipating the progression of a task.

The design should consider the following features,
• Every action or operation should result in an expected output and also give a clue
about the next operation.
• The screen elements should be distinct and recognizable.
• More than one action should not be combined.

Recovery - this principle helps in reversing and recovering from a wrong action.
A system should consider the following features:
• Commands or actions can be canceled or reversed.
• In the case of difficulty, users can return to a certain point from where they can
retry.
• Due to errors, a user should never lose his work. The errors could be due to
hardware, software, or communication problems.

Responsiveness - this principle helps in providing immediate acknowledgment for all

user actions which can improve performance and instill confidence.
A system should consider the following feature:
• It should rapidly respond to the user's requests in the form of a textual message,
a visual, or an auditory response.

Simplicity - helps in presenting a simple interface for the users.

The features to be considered are:
• The system should hide functions until needed and disclose them progressively.
• It should present common and necessary functions first and hide more
sophisticated and less frequently used
• It should provide uniformity and consistency and eliminate unnecessary elements.

Transparency - this design principle allows the users to focus on the task or job and not
on the mechanics of the interface.

Trade-Offs - this design principle gives trade-offs between the user requirements and
the technical requirements for an interface design.
In the view of a designer, the design trade-offs can be in regard to the accuracy, time,
cost, and ease of use. A proper understanding of the user and his requirements can help
in making correct decisions.
Page □ < >
.IL
35 / 41 ,r

A cardinal rule of system development says that "Human requirements always take
precedence over technical requirements".

9.0 Summary:
This unit provides an introduction to the human-computer interface. The initial discussion
examines what an interface is, its importance, and its history. The later part of the topic
reviews the two dominant user interfaces today: the graphical user interface (GUI) and
the World Wide Web (WWW or Web). In the study of GUI interfaces, we study the
components, characteristics, and advantages over the older text-based systems. We then
compare Web interfaces both GUI interfaces and conventional printed documents. The
content concludes with a statement of the basic underlying principles for interface design.

MCQs [ All 1 mark]

Q1 . Which of the following are important in the design focus of HCI?
a. The requirements and expectations of the user
b. Technical characteristics and limitations of the computer.
c. The physical limitations and abilities people possessed by the users.
d. All of the above

Q2. Which of the following statement is suitable to define User Interface Design.
a. It is an effective communication medium between a human and a computer.
b. It identifies interface objects and actions.
c. It creates a screen layout that forms the basis for a user interface prototype
d. All of the mentioned above

Q3. Which of the following option is not considered by the Interface design
a. The design of interfaces between software components
b. The design of interfaces between the software and human producers and
consumers of information
c. The design of the interface between two computers
d. All of the mentioned

Q4. A software might allow a user to interact via,

a. Keyboard commands
b. Mouse movement
c. Voice recognition commands
 .... < >
Page 36 / 41 □ ,r

d. All of the mentioned

QS. You have to address a usability issue pertaining to a software interface. You
will provide solutions after understanding:
a. How the developer uses the software
b. How the users use the software
c. How you use the software
d. How your friends use the software

Q6. Which of the following is golden rule for interface design?

a. Strive for consistency
b. Offer error prevention and simple error handling
c. Reduce short-term memory load
d. All of the mentioned

Q7. The benefits of a good screen design are,

a. Productivity of the users' increase
b. The task completion rate was found to be higher in the websites
c. Employee satisfaction is increased
d. All the above

Q8. GUI means

a. Graphical User Interface
b. Graphical User Interaction
c. Graphics Uniform Interaction
d. None of the above

Q9. The first GUI was developed in,

a. 1971
b. 1975
C. 1980
d. 1973

010. What is the visual component of a GUI

a. Container
b. Object
 .... < >
Page 37 / 41 □ ,r

c. Composite
d. Icon

Q11. Which type of User Interface provide input by typing a string through the
keyboard
a. Graphical User Interface
b. Command Line User Interface
c. Natural Language Interface
d. Menu Interface

Q12. Which of the following devices are mainly responsible for the user
interface?
a. Input and output devices
b. Memory devices
c. Processor
d. None of the above

Q13. Which of the following define t he characteristic of a good user interface?

a. Sophisticated Visual Presentation
b. Object Orientation
c. Concurrent Performance of Functions
d. Ali of the above

Q14. Which of the following is not a type of user interface?

a. Command language based
b. Menu based
c. Efficiency based
d. Direct manipulation based

Q15. The main function of user-interface is to

a. Convert program/ programs into machine language
b. Transmit data to a remote location
c. Connect users with an application through graphical options like icon, menu, text
etc
d. None of these above

Q16. Which of the following is a golden rule of interface design?

 .... < >
Page 38 / 41 □ ,r

a. Make the interface consistent

b. Reduce the user's memory load
c. Place the user in control
d . All of these
Q17. Which of the below is not an advantage of Graphical Systems
a. Faster Leaming
b. Faster use and problem solving
c. Greater design Complexity
d. More attractive
Q18. Web interface design is complex because
a. Design language has limited objects and interaction styles
b. Browser navigation takes time
c. Information architecture and workflow cannot be standardized.
d. All the above

Q19. Which of the following Is not a characteristic of Web Interface

a. Responsiveness
b. Reactive
C. Security
d. Reliability

Q20. Which of the following statements is false about Web page design
a. User hardware variations are limited.
b. User focus is on navigation and information
c. Data is not private
d. Response time depends on transmission speeds.

Q21 . Which of the following statements is false about Web pages

a. Fixed page size.
b. Page rendering is slow
c. Page resolution is less
d. Page is viewed randomly

Q22. Which of the following are the principles of User Interface Design
a. Accessibility
b. Availability
Page □ < >
.IL
39 / 41 ,r

c. Configurability
d. All the above

State whether the following statements are True or False [ All 1 mark)
Q1 . User Interface Design is implemented by software engineers ; it is an iterative
process that draws on predefined design principles.
True
False
Q2. The main goal of a Web Page Design is to provide information
True
False
Q3. The main goal of a Web Application Design is to collect and process data
True
False

Descriptive Questions:
0 1. What are the two important factors to be considered during HCI Design? (2 M)
02. Define a User Interface. Briefly describe its two components. [4 M]
03. Explain the importance of good interface design. (5 M]
0 4. From the results of the research in screen design, summarize the benefits of Good
design. [6M]
05. List some important characteristics of GUI Objects. [2M]
06. Explain any two interaction styles of a GUI stating their advantages and
disadvantages. [8M]
07. Explain the concepts of direct manipulation.[6M]
0 8. Explain any four characteristics of a GUI. [8M]
09. What are the complexities involved in Web Interface Design (4 M]
0 10. Compare GUI with Web design based on different criteria. [8M]
0 11. Compare a printed page with web page based on different criteria. [6M]
0 12. Explain any six general principles of User Interface Design. [8M]

Answers to MCQs:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 21
d dc d b d d a d b bad cc d c db a ad
 .... < >
Page 40 / 41 □ ,r

Answers to True/False Questions:

2
a j 3
a

Links to additional information on HCI:

1. [Link]
2. [Link]
_and_Practice

10 References:

[1] Wilbert 0. Galitz, "The Essential Guide to User Interface Design", 3"' Edition, Wiley
[2] Karray, Fakhri & Alemzadeh. Milad & Saleh, Jamil & Arab, Mo Nours. (2008). Human-
Computer Interaction: Overview on State of the Art. International Journal on Smart
Sensing and Intelligent Systems. 1. 137-159. 10 .21307/ijssis-201 7-283.
[3][Link]
interface#:- :text=Why-is-user-interface-important
[4] [Link]
papers/human-computer-interaction-its-future
[5) [Link] [Link]/@kimonaris/Week-4-16-03-20-human-computer-interaction-and-
methods-e9b0b56dc6ae
[6) [Link]
[7) Alan Dix, Janet Fincay, Gre Goryd, Abowd, Russell Bealg, "Human Computer
Interaction" .• Pearson
[8) [Link]
[9) [Link]
[10]
https ://en. wikipedia .org/wiki/User_interface_ desig n#/media/File:Lin ux_ kem el_IN PUT_ 0
UPUT_evdev_gem_ USB_framebuffer.svg
[ 11 ] [Link] .neVasseVcup-cakes-gui-casua I-game-ui-elements/
[12] [Link]

MCQ References:
 .... < >
Page 41 / 41 □ ,r

1. [Link]
[Link]
2. [Link]
3. [Link]
human-computer-interaction
4. [Link]
lnterfaces
5. [Link]
1.0 Introduction

A computer system is built to serve the user and the user interacts with the computer
through an interface to use these services. To provide these services in an efficient way,
the interface design and the screen design process must always begin with the proper
understanding of the system user.

The system users and the developers who build the system are different in terms of their
knowledge, skills, and attitude. So, to create a truly usable system, the designer must
consider various issues such as understanding how people interact with computers and
the related human characteristics, identifying the user's level of knowledge and
experience, the characteristics of the user's needs, tasks, and jobs, the user's
psychological characteristics, and also the user's physical characteristics.

Figure. 2.1 shows the fourteen steps to be followed in the User Interface Design Process
 I 38 .... < >
Page 3 □ ,r

...
14. Ttill

Fig. 2.1 Steps In the User Interface Design Process

In the following sections, we shall study the first two steps to be followed in the Interface
Design Process.

1. Understanding the User or Client.

2. Understanding the Business Funcbons.

As a first step in the design process, the designer has to understand how a human
interacts with computers, the importance of human characteristics in Design, human
Considerations in the design of Business Systems, and human interaction speeds.

As a second step, the designer understands the Business Definition and Requirements
Analysis, determines the Basic Business Functions, and understands the value of
Standards and Guidelines and System Training and Documentation Needs.
Page 4 I 38 □
.IL
,r < >

2 .0 User Interface Design Process - Know your User or Client

In this first step, the designer tries to understand how human beings interact with the
computer, the importance of human characteristics in the design such as memory,
perception, learning etc., human characteristics in business systems, and human
interaction speeds.

First Step in the User Interface Design Process - the interaction of humans with
computers
In understanding how a user interacts with a computer, the designers consider four
important factors:
1. The Human Action Cycle
2. Trouble using the computer by the users
3. Responses to Poor Design
4 . The tasks performed by the users

2.0.1 The Human Action Cycle

In this regard, Norman, a researcher, presented a psychological model in 1988 to
describe how people interact with computer systems and this was then adapted by Stone
et al. in 2005.

The model says that any action performed by a user can be cognitive or physical in
nature and whenever an action is performed, the user has a goal and a specific
objective in mind.

The action is performed in three stages:

1. Goal formation: here a goal is formed first and then cognitive activity and an
objective is thought about and defined.
Eg: Let us consider a goal to type and print a letter.
2. Execution of activities to achieve the goal - here an execution plan is devised
and implemented in three stages, the first two stages are cognitive in nature and
the third one is physical.
Stage 1: Here the general methods to achieve the desired goals are decided
upon.
In the case of typing a letter, a computer's word processing function is required.
Page 5 I 38 □
.IL
,r < >

Stage 2: Here the action sequence is planned.

Typing a letter requires opening the word processor, retrieving a blank
document, and typing the letter.

Stage 3: The actions are performed.

The various available computer controls, such as the keyboard and mouse, are
used to perform the planned tasks.

3. Evaluation of the results of the action - This is a cognitive phase that is done
in three stages.

Stage 1: The resulting output is perceived and understood:

For the application considered above, the results would be, the appearance of
the letters and symbols on the screen.

Stage 2: Interpretation of the outcome is based upon expectations:

Here the letter is checked for proper format, completeness, and accuracy.

Stage 3: Results are compared with the set goals:

Here it is checked if the letter has been printed correctly.
If the goals are not achieved, the actions will be performed again or the goals
can be modified.

NOTE: Interface design should enable the human action cycles for tasks to be performed
as quickly and accurately as possible.

2 .0.2 Why People Have Trouble with Computers

In the earlier days, programmers, systems analysts, and system designers have taken
the responsibility for the design of business computer systems. These people are trained
technically but not behaviorally. In recent years, graphic artists have been added to the
interface design teams to cater to the development of Web technology. These graphic
artists possess extensive technical knowledge in their profession but little training in
usability. Therefore, the issues concerning the user's capabilities have rested upon the
designer's intuition and his specialized knowledge. All these factors have led to poor
interface designs going unnoticed.
Page 6 I 38 □
.IL
,r < >

A system is difficult to use due to the following factors:

• Too much flexibility:

A system that is not well understood is always built with more functions than needed.
Such a system results in higher interface complexity. A more complex system requires
more learning and this results in less efficient human performance. So as the flexibility of
a system increases, its usability decreases.
• Use of jargon:
Learning to use a system often requires learning a new language.

• Non-obvious design
Unique and new designs cannot be implemented in a conventional way. They need
special skills. Also, the outcome of these implementations will not be visible immediately.
The overall framework of the system may be invisible and the results cannot always be
related to the actions that accomplish them.

• Fine distinctions:
Sometimes different actions may accomplish the same thing or different things may result
from the same action. These distinctions are minute and difficult to keep track of. Many
times, based on the problems faced by the user, some distinctions which are of not much
importance are made ignoring some critical distinctions.

• Disparity in problem-solving strategies

Most people do not read and follow instructions before taking an action. They follow the
trial-and-error method of solving a problem. This leads to many repeated attempts of the
actions.

In the earlier computer systems, an error prevention strategy was followed, where a
person would not take an action until he or she is confident of the result. In such cases
when a person goes wrong, they get stuck in a situation and it becomes difficult to come
out of it. So, they need to turn off the computer and restart it.

• Design inconsistency
There could be many design inconsistencies which may result in the user requiring to rote
or memorize ways to perform the actions when using different designs or systems. So
meaningful and conceptual learning is difficult to happen here.
Page 7 I 38 □
.IL
,r < >

Some of the design inconsistencies are described below.

• One common action will have different names on different interfaces as they are
designed differently.
For example, the same action will have different names such as "save" and
"keep," or "write" and "list."
• The same command may cause different things to happen.
• The same result may be described differently
For example, "not legal" and "not valid ."
• The same information may be ordered differently on different screens.

2.0.3 Responses to Poor Design

It has been found that in a computer-based system, the magnitude of errors is almost 46
percent for commands, tasks, or transactions. Errors are symptoms of problems and they
may lead to two types of user responses: Psychological and Physical.

Psychological

Some of the psychological responses of people to poor design are Confusion,

Annoyance, Frustration, Panic or Stress, and Boredom. These psychological
responses diminish user effectiveness because there are severe blocks to concentration.

• Confusion - Detailing of content overwhelms the perceived structure. Meaningful

patterns are difficult to ascertain, and the conceptual model or underl ying framework
cannot be understood or established.

• Annoyance - Users get annoyed when there are inconsistencies in design, slow
computer reaction times, difficulties in quickly finding information, outdated information,
and visual screen distractions and obstructions that prevent a task from being completed.

• Frustration - Users get frustrated when they are not able to easily convey information
to the computer, they are not able to finish a task or an unexpected response cannot be
undone. Also, if a system is not flexible the user gets frustrated.

• Panic or stress - A complex system is very taxing on a person's perceptual and

cognitive abilities which results in panic and stress. Also, long delays occurring when a
user is operating under a deadline or dealing with an angry customer can lead to panic
and stress.
Page 8 I 38 □
.IL
,r < >

• Boredom - As opposed to a complex syslem resulting in stress, an oversimplistic way

of doing jobs or tasks can result in boredom in users. This happens because a person's
perceptual and cognitive abilities are underused here. Also slow response times or long
download times can create boredom.

Physical

People expect that the benefits of the actions are more than the cost or the effort to do it.
But when the reverse happens, the following physical reactions are seen in the users.

These physical responses reduce user efficiency and effectiveness because with these
responses, the user may not use the system's complete capabilities or they may waste
time trying for alternative actions.

• Abandonment of the system

The users can reject a system and rely upon other sources of information. In such
situations, other information sources must be available. In the earlier days, the managerial
and professional personnel in business systems followed this method. Today, with the
development of the Web, any user can abandon a system and find information through
other sources.

• Partial use of the system

Most of the time, only a portion of the system's capabilities are used. Only those
operations that are easiest to perform or that provide the most benefits are used and
many system aspects go unused.

• Indirect use of the system

The manager or other higher authority places an intermediary between the user and the
computer.

• Modification of the task

Sometimes when a problem is unstructured and the tools are not very flexible, the task is
changed to match the capabilities of the system.
Example: Scientific problem-solving.

• Compensatory activity
In a system with inadequate features, additional actions are performed.
Page 9 I 38 □
.IL
,r < >

For Example: Clerical personnel can format information manually to match the structure
required by the computer.

• Misuse of the system

Sometimes the system integrity may get lost when rules are broken to cope with
operational difficulties

• Direct programming
When the users have specific needs, they reprogram the system. This is usually done by
a sophisticated user.

2.1.4 People and Their Tasks

Workers at home and at business many a time are overworked, fatigued, and continually
interrupted by their family members or colleagues.

All computer users show the following features:

• They may not read the documentation.

• They do not understand how much a computer can help to solve their problems.
• They may not know much about the information available to solve their problems.
• As the system designer are often isolated psychologically and physically from the
users' situations, they may not understand the user's technical skills.

2.1 Important Human Characteristics in Design

People are complex organisms with many attributes. These attributes have an important
influence on interface design.

Some of the attributes that influence the interface design are perception, memory,
visual acuity, foveal and peripheral vision, sensory storage, information
processing, mental models, movement control, learning, skill, performance load,
and individual differences.

2.2.1 Perception

Perception is the understanding of the elements and objects of our environment. This
understanding happens through the physical sensation of our various senses like sight,
sound , smell, and so forth.
 I 38 .... < >
Page 10 □ ,r

Perception is influenced by experience and people match the objects and sensations
perceived based on the models stored in their memory.

Other perceptual characteristics are discussed below:

• Proximity
Objects that are spaced nearby are perceived by our eyes as belonging together.

• Similarity
Objects that have the same color, size, shape, brightness, or orientation are
perceived by our eyes as belonging together.

• Matching patterns
Objects of the same shape but different sizes are responded similarly.

• Succinctness
Perfection and simplicity are easier to remember, so people tend to see an object
as having some perfect or simple shape.

• 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
People desire stabilization or equilibrium in their viewing environment so vertical,
horizontal, and right-angled objects are visually satisfying.

• Three-dimensional projection
People see objects and patterns in a three-dimensional form when certain visual
hints about them are given.

For Example: an overlapped object, smaller of similar objects, and shaded

objects are perceived as farther away.
Page 11 I 38 □
.IL
,r < >

• Top-down lighting bias

When a light source is present above an object, we interpret shaded or dark areas
of that object as shadows. That is, objects with top-down lighting are seen as
natural and those with other light orientations are seen as unnatural.

• Expectancies
What we expect influences our perception. So we tend to perceive what we want
and not what is there.

For Example: when we are proofreading a document, a mis-spelled word is

missed as we do not see how a word is spelled, but how we expect to see it
spelled.

• Context
Perception is also influenced by context, environment, and surroundings.

For Example: based on the angle of adjacent lines or on the cues given by others
about the size of the lines, two drawn lines of the same length may seem to be of
the same length or different lengths.

• Signals versus noise

There is a type of perception called figure-ground perception. Here, the object of
interest is the figure or signal, and its background is known as the ground.

Signals, or figures, are more quickly perceived and understood if they are easily
distinguishable from noise, or background, in our sensory environment.

Noise interferes with the perception of signals if they are like to one another.

NOTE: The main goal in interface design is to utilize our perceptual capabilities so
that a screen can be structured in the most meaningful way.

2.2.2 Memory

The difference in the ability to recognize or recall words is an important consideration

significant for interface design. Human beings can recall words between 2,000 and 3,000
and can recognize around 100,000 numbers.
Page 12 I 38 □
.IL
,r < >

During searching tasks, long-term memory can help recognize objects. The power of
recognition is more than our power of recall. This phenomenon should be utilized in
interface design.

As an example, a list of alternatives can be presented in order to remind about the choices
that people can have.

A system can be made more usable if memory loads are reduced. This also reduces the
need for mental integration, aid recall, and expand working memory.

Different ways to reduce memory load are discussed below:

Information should be presented in an organized, structured, familiar, and

meaningful way.
Control over the pace of information presentation should be given to the user.
As people can remember a few items for only 3 or 4 seconds, all the required
information for task performance can be placed in close physical proximity.
Important items can be recalled faster by placing them at the beginning or end of
the listing.
Information that needs comparison can be placed close by.
If screen reading speed is required, users should not be given other tasks which
require using working memory.
To make remembering easy, important items can be made unique or distinctive in
some manner.
For Example: Some items can be highlighted for distinction.

2 .2.3 Sensory Storage

Information collected from our senses is stored in a buffer known as Sensory storage.
This storage process happens unconsciously and the information is being constantly
replaced by newly gathered stimuli.

So, the sensory storage acts as a radar, which scans the environment for things that are
important to pass on to higher memory. Sometimes this process is overwhelmed by
surrounding noise. In the presence of such noise, the detection of objects becomes
difficult.
Page 13 I 38 □
.IL
,r < >

In the context of interface design, noise can be mapped to excessive stimulation to the
user. Repeated and excessive stimulation can fatigue the sensory storage mechanism
and makes it difficult to distinguish what is important.

So, interface should be designed with less noise and all elements presented should
serve a definite purpose.

2.2.4 Visual Acuity

Visual Acuity is a phenomenon by which our eye can resolve details in an object.

An object becomes more distinct when our eyes are fixed on it and become less distinct
when we turn our eyes away This phenomenon is used by interface designers when
screen groupings are considered.

The eye's sensitivity increases for those characters closest to the fixation point (the "O")
and decreases for those characters at the extreme edges of the circle of optimum visual
acuity.

For the earlier screen resolutions, research suggested a 5-degree diameter circle
centered around an eye fixation character on a display as the area near that character
(Tullis, 1983). The physical size of the circle which is 5 degrees is critical and not the
number of characters. A larger or smaller character size will only decrease or increase
the number of viewable characters.

For modern personal computer displays, the recommended viewing distance has been
increased to about 24 inches. This increased distance along with variations in font sizes
has made the calculation of the exact "chunk" size and a viewable number of characters
difficult to calculate. Most of the time, small visual chunks will exist on screens and
these chunks should be considered in the design.

Also, during the design of patterns for fill-in areas of screens in the case of bars and
circles, another feature of the vision, "tremor" must be considered, because our eye is
never steady as it sees; it trembles slightly. This tremor improves the detection of edges
of objects being looked at, thus improving acuity also it can create problems.

For Example: Patterns of closely spaced lines or dots are seen to shimmer and this
shimmer can be distracting and disturbing. So, patterns for fill-in areas of screens must
be carefully chosen to avoid this visual distraction.
Page 14 I 38 □
.IL
,r < >

2.2.5 Foveal and Peripheral Vision

Two more visual characteristics help the interface designers to design screens to aid
visual search and also to help in improving the attention of the user.

Foveal vision is used to focus directly on an object, whereas peripheral vision helps us to
sense the area surrounding it. Limitations in the visual acuity make this surrounding area
unclear.

But Foveal and peripheral vision maintain a cooperative and competitive

relationship.

• Cooperatively, peripheral vision aids a visual search, but can also be distracting.
Also, it provides hints to where the eye should go next in the visual search of a
screen.
For Example: Patterns, shapes, and alignments peripherally visible can guide the
eye in a systematic way through a screen.

• Competitively, peripheral vision can compete with a foveal vision for attention.
For Example: Information about the periphery is passed on to our information-
processing system along with foveal information. This can be termed visual noise.

Researchers Mori and Hayashi [1993] evaluated the effect of window areas on foveal
and peripheral relationships.

They concluded the following:

• W henever there are peripheral windows, the performance on a foveal window

deteriorates
• The performance degrades more if the information in the peripheral is dynamic or
moving.
• During interface designs, the positive nature of peripheral vision should be utilized
and its negative aspects should be avoided.

2.2.6 Information Processing

Important information collected by our senses must be processed in a meaningful way.

According to Lind, Johnson, and Sandblad (1992), this information is processed on two
levels and these two levels function simultaneously.
 I 38 .... < >
Page 15 □ ,r

Higher Level
This level is identified with our consciousness and working memory.
It is limited, slow, and sequential.
Used for reading and understanding.
Perform reasoning and problem-solving.

Lower Level
It processes familiar information along with the higher level.
Its capacity is unknown.
Happens without conscious effort.
Perceives the physical form of the information.

As an example, looking at is lower level and seeing at a higher level. Similarly,

perceiving at is lower level and reading at a higher level.

Processing a Screen by the User:

When a new system or screen is presented to a user, all the components such as its title,
the controls, and other information it contains are looked at consciously. Here a higher
level of information processing happens.

As familiarity grows, only a glance is needed to identify the screen components. The
shape and structure can help the user identify the correct screen needed in that context.
Now the lower level of Information processing happens.

Screen Design Issues:

• A visually distinct screen contributes more to the user experience.
• A cluttered screen jammed with a lot of information, needs more lime to read and
understand.

Interference:
It is a phenomenon by which higher-level processing is obstructed. It occurs when
perception and cognition are exposed to conflicting mental processes. Interference
should be resolved for better and faster learning of the components presented to a user.
Page 16 I 38 □
.IL
,r < >

Types of Interferences:
Lidwell et al. (2003) has proposed the following types of Interferences:

Stoop interference:
Is caused when one aspect of a stimulus triggers a mental process that conflicts with
another aspect of the same stimulus.

Example: Naming the color of two words with different colors takes more time than
understanding their meaning.

Example: A Stop sign displayed in green and a Go sign in red will also create a mental
conflict.

Proactive interference:
This is caused when there a person's existing memories interfere with learning.

Example: Interference happens when a person applies his native language grammar
when learning a new language.

Example: Interference happens a computer user applies the old interaction procedures
for a new system.

Retroactive interference:
This is the reverse of Proactive interference. It is caused when Learning interferes with
existing memories.

Example: Learning a new musical instrument after having learned one.

Example: Learning to use a new computer system after having memorized the usage of
one.

Minimizing interference:
This can be done by avoiding designs that create conflicting mental processes in the
following way:

• Color and code combinations should be avoided.

• A person's mental model should be understood before designing.
• Decision-making time increases if options are presented to the user. So, during the
design of time-critical tasks, the response times can be reduced by minimizing the
number of options for the user.
Page 17 I 38 □
.IL
,r < >

2.2.7 Mental Models:

People develop mental models of things and also of other people with whom they
interact, based on, their previous life experience and their culture. These models are
gradually developed and they enable a person to do actions or predict them as
required.

In the same way, a person who has used a computer system has formed a mental model
of ii. He has expectations and preconceptions based on his previous usage. If the new
system conforms to the mental models a person has developed, the model gets
reinforced and the system's use feels more comfortable, else interference occurs, and
learning the new system becomes difficult. So, while designing, a user's mental models
should be identified and understood.

2.2.8 Movement Control

Based on what we see and perceive, an action is taken or response is made. In computer
systems, this response is a movement such as pressing keyboard keys, moving the
screen pointer by pushing a mouse or rotating a trackball, or clicking a mouse button.

Fitts' Law:
This law was put forth in 1954 and is used in screen designs.

This law states that "the time to acquire a target is a function of the distance to and size
of the larger i.e the bigger the target is, or the closer the target is, the faster it will be
reached.

The implications in screen design are as follows:

Provide large objects for important functions.

Take advantage of the "pinning" actions of the sides, top, bottom, and corners of the
screen.

2.2.9 Learning

People learn new things by coding the long-term memory information which is present in
the short-term memory.
Page 18 I 38 □
.IL
,r < >

Earlier studies say that learning a computer system is the same as learning happening in
other areas and people prefer to be active, explore, and use a trial-and-error approach in
the learning process. If the learning time is reduced, the performance increases.

Studies have found that people are very sensitive to even minor changes in the user
interface, and this makes transferring them from one system to another difficult.

In the context of user interfaces, learning benefits the users in the following ways:

• Prediction of the location of the common screen or page elements before they are
displayed as studied by Bernard (2002) and Byrne et al.(1999).
• Movement of the mouse pointer to the area of an expected target before the target
appears on the screen by experienced users.

2.2.10 Skill

Skills in human beings help them to perform an action in the correct time sequence with
the required precision. Human effort can be saved when our actions and work pace result
in optimum efficiency. This is achieved by learning to use shortcuts, working at a higher
speed , and having easier access to information or data.

The design of a system and its screen should allow the development of increasingly
skillful performance.

2.2.11 Performance Load

The degree of effort that is used to perform any activity is known as performance
load.

Performance load is of two types:

• Cognitive
• Kinematic

Cognitive load:
It is the amount of mental activity required to perform a task or achieve an objective.

• This load is reduced in computer users by the use of Graphical user interfaces,
• Menus, icons, and other graphical components have replaced commands reducing
memory load.
 I 38 .... < >
Page 19 □ ,r

Cognitive Load can be reduced by,

Providing only necessary information on the screens.

Properly formatting and grouping information.
Providing hints or help to recognize objects and not recall them.
Automating tasks that require extensive memory.

Kinematic load:
It is the degree of physical activity or effort necessary to perform a task or achieve an
objective.

This load is reduced on computer users where user effort in keying the data is
substituted by a simple mouse click.

Kinematic load can be reduced by,

Reducing the number of steps to accomplish tasks.

Minimizing the control actions and movements.
Automating repetitive tasks.

2.2.12 Individual Differences

Human beings are different in their characteristics such as looks, feelings, motor abilities,
intellectual abilities, teaming abilities and speed, and so on. These individual differences
complicate the design of user interfaces. The interfaces must be designed to suit the
widely varying characteristics to satisfactorily and comfortably learn the task or job, or use
the Web site.

The earlier designs considered the lowest abilities of people or selecting people with the
minimum skills necessary to perform a job.

But today advancements in technology have helped the designers to customize the jobs
to suit a specific group of users with a specific skill level.
 I 38 .... < >
Page 20 □ ,r

2.3 Human Considerations in the Design of Business Systems

In addition to the human characteristics considered for interface designs in section 2.2,
Mayhew [1992] proposed a set of user/task characteristics that need to be
considered in the design.

These are summarized under four categories as discussed below:

• Knowledge/Experience of the User.

• JOB/TASK/NEED of the User.
• Psychological Characteristics.
• Physical Characteristics.

2.3.1 Knowledge/Experience of the User

The different areas of knowledge and experience of the user to be considered in the
interface design are:

• Knowledge about the usage of Computer.

• Experience of interacting with a system.
• Experience using similar applications.
• Experience or knowledge about the task.
• Experience of some other systems used to do the same task.
• Education level of the user.
• Typing Skill of the user.
• Native Language or Culture of the user.

2.3.2 Job, Task, and Need of User

Based on the place where the interface Is used and its need, the design issues are:

Type of System use

• Mandatory or discretionary use of the system.

Frequency of Use
• Continual, frequent, occasional, or once-in-a-lifetime

Task or Need Importance

High, moderate, or low importance
 I 38 .... < >
Page 21 □ ,r

Task Structure
• Repetitiveness or predictability of tasks being automated

Job Category
• Executive, manager, professional, secretary, clerk.

Lifestyle For Web e-commerce systems

• Hobbies, recreational pursuits, and economic status.

2.3.3 Psychological Characteristics

The following characteristics of the user are to be considered in the interface design:

Attitude
• Positive, neutral, or negative feeling toward job or system.

Motivation
• Low, moderate, or high due to interest or fear.

Patience
• Patience or impatience expected in accomplishing a goal.

Expectations
• Kinds and reasonableness.

Stress
• Level High, some, or no stress generally resulting from task performance.

Cognitive Style
• Verbal or spatial, analytic, or intuitive, concrete or abstract.

2.3.4 Physical Characteristics

Age
• Young, middle-aged, or elderly.

Gender
• Male or female.

Handedness
• Left, right, or ambidextrous.
Page 22 I 38 □
.IL
,r < >

Disabilities
• Blind, defective vision, deafness, motor handicap.

2.4 Human Interaction Speeds

Many researchers have studied the interaction speeds during the following
communication methods in humans. These are measured in words per minute
• Reading - here the speeds can differ during prose text, proofreading on paper or
monitor, listening to an audio or speaking to a computer.
• Keying - speeds are different for a fast and average typist.
• Computer - speeds differ for transcription and composition tasks.
• Typing - speeds differ for memorized text and copying.
• Hand printing - speeds differ for memorized text and copying

2.4.1 Performance Vs Preference

Interaction speeds are considered in the interface design process based on the
performance and preferences of the users.
4. People sometimes choose an interface design feature that may yield poor
performance. Different devices used for interaction, text color, and display types
may lead to different performances.
Eg: Pointing devices choice may be a mouse, a cursor, or alternative menu
interaction techniques, Use of color, or two-dimensional versus three-dimensional
displays.
4. Preferences are affected by familiarity, aesthetics, novelty, and perceived effort in
feature use.
4. Users are not aware of the many human mechanisms responsible for the speed
and accuracy of human-computer interaction.
4. Designers should explain the importance of a feature used in the design which
improves performance.

2.4.2 Methods for gaining an Understanding of Users

Gould in 1988 suggested the following methods which the interface designer has to
understand the User, his environment of work, and his requirements before designing a
system.
 I 38 .... < >
Page 23 □ ,r

The user location should be visited to understand the user's work environment.
Discuss the problems, difficulties, and requirements of the users directly.
Observe the users while working or performing a task.
In addition to the above, the designers can videotape users working or performing a
task to study their problems.
Also study the work organization where the system may be installed.
User opinions can be obtained by preparing surveys and questionnaires.
Establish testable behavioral target goals to give management a measure for what
progress has been made and what is sUI required.

3.0 Second Step in the User Interface Design Process - Understand the Business
Function

In the previous section, the first step in the system design has been discussed , where
we tried to understand the user of the system.

In this section, we will study the business functions with the help of the following steps.

The business definition is created and requirement analysis is done.

Basic business functions are determined.
The activities are described through task analysis.
A conceptual model of the system is developed.
Design standards are established.
Design goals for system usability established.
Training and documentation needs are defined.

3.1 Business Definition and Requirements Analysis

In this phase, the need for the system is established. Then based on the input from users,
and marketing, the product is described.
There are four sub-phases in the implementation of this phase
Information Collection Techniques
Defining the Domain
Considering the Environment
Possible Problems in Requirements Collection
Page 24 I 38 □
.IL
,r < >

3.1.1 Information Collection Techniques

There are two main techniques that have been suggested by Keil and Carmel ( 1995),
Popowicz (1995), and Fuccella et al. (1999), for collecting Information: Direct and
Indirect.

Direct method
Here requirements are collected through face-to-face meetings with users.

Indirect method
This method makes use of an intermediary, someone or something, between
the users and the developers.

Requirement Analysis
• The developer should have knowledge of the policies and work culture of the
organization being studied.
• The developer should understand the current system or process before the new
system replaces it.

Direct Methods

There are nine direct methods proposed to collect information from the potential users

1. Individual Face-to-Face Interview

Here a questionnaire can be prepared for the user which can get information about
the following:
• Activities performed to complete a task and methods used to perform
those activities.
• Any interactions exist with other people or systems.

Website developers have the following questions for the users:

• Suggestions are taken from the user after presenting a site outline or
proposal.
• Description of the usefulness of the proposed website is taken from the
user.
• Users are enquired about the features of other websites liked or disliked
by them.
 I 38 .... < >
Page 25 □ ,r

• Users are told to describe the way tasks should be accomplished on the
website.

2 Telephone Interview or Survey

• This method is not very useful, but a planned and well-structured
interview that is informed well in advance can gel enough information
from the user.
• But these interviews are less expensive

3 Traditional Focus Group

• Here a small group of users (8 to 12) and a moderator together discuss the
requirements.
• The questions from the moderator help him to get information on users'
experiences, attitudes, beliefs, and desires, and to obtain their reactions to
ideas or prototypes.
• A video recording of the discussion can provide insights into the user needs
for all developers.

The Focus group should do the following:

• Objectives of the session should be established.

• Typical users or potential users should be selected as participants.
• A skilled moderator should be chosen to facilitate discussion on the
relevant topics.
• Take good notes and darify issues using the session recording.

4. Facilitated Team Workshop

• This provides a less formal discussion
• They can also provide useful information in less time.

5. Observational Field Study

• Here the designers visit the sites of work and observe the activities of the
client users.
• They study the environment of the office or home for some time.
 I 38 .... < >
Page 26 □ ,r

• This provides a good insight into tasks being performed, the working
environment and conditions, the social environment, and working
practices
• It can be time-consuming and expensive.
• Sometimes this observation can disturb the user and change his
performance and behavior
• Video recording of the observation sessions provide a permanent record
and permit a later detailed task analysis.

6. Requirements Prototyping
• A demonstration model, or very ear1y prototype, is presented to users for
their comments concerning functionality and to clarify requirements.

7. User-Interface Prototyping
• A demonstration model, or ear1y prototype, is presented to users to
uncover user interface issues and problems.

8. Usability Laboratory Testing

Verbal description about the nature of the work is given by the users to the
designers. But these are not always clear, so the designers test their product by in
a laboratory by carefully observing its usage and understanding how they use it.
They test the results. If there are any errors, they are corrected.

Indirect Methods

These methods have some advantages but can create three main problems:

• Messages may be filtered or distorted either intentionally or unintentionally.

• The intermediate person may pass an incomplete or incorrect message due to a
lack of understanding of the user's needs,
• There could be a political reason for the user and developer not getting directly
connected.
Page 27 I 38 □
.IL
,r < >

There are twelve indirect methods proposed to collect information from the potential
users:

1. MIS Intermediary
• Here the mediating person may be from the Management Information
Services department. He defines the user goals and requirements to the
designer.
• The disadvantage here is that the mediating person may not have the in-depth
knowledge of all the user requirements.

2. Paper Survey or Questionnaire

• Here a questionnaire or survey is given to the user in the form of short answer
or multiple-choice questions.
• The questions will be framed by experienced designers.
• The questions may help in finding the user's attitudes, feelings, or
expressions but the actual tasks and behaviors cannot be understood.

3. Electronic Survey or Questionnaire

• A questionnaire or survey is given to a set of users via e-mail or the Web.
• This survey is less expensive and faster that the paper survey.

4. Electronic Focus Group

• Here the collection of information and advantages are similar to the traditional
focus group but the information is obtained electronically by e-mail or a Web
site.
• The group discussion is less influenced by group dynamics.
• The participation from all the people in the group is even.
• More information can be collected in a shorter time.
• The disadvantage is that the depth and richness of face-to-face discussions
does not exist.

5. Marketing and Sales

• Here the needs of the users is collected by the company representatives who
visit the sites regularly so is inexpensive.
• But the business representatives may not have the knowledge of the nature of
customers, the business, and the requirements.
Page 28 I 38 □
.IL
,r < >

• The representatives may filter needed infomiation or add some unimportant

information.

6. Support Line
• Here the information collection is only when there are problems, so the sources
are customer care team, help-desk and so on.

7. E-Mail, Bulletin Boards, or Guest Book

• Here the information collection is in the form of problems, questions, and
suggestions by users posted to a bulletin board, a guest book, or through
e-mail are collected and evaluated.
• Here also the focus is only on problems.
• This information depends on the recommendations generated by the users
who are most of the time unhappy users.
• This method is an inexpensive method.

8. User groups
• Here the information in the fomi of Improvements suggested by customer
groups is taken periodically the software usage is evaluated.
• If properly organized, the user groups can provide a lot of important
information,

9. Competitor Analysis
• Reviews of competitor's products, or Web sites, can also be used to gather
ideas.
• The designers can perform this evaluation or, even better, users can be
asked to perfomi the evaluation

10. Trade Show

• Expert customers attending a trade show will be exposed to a prototype, so
they can provide a superficial view of the important features.

11. Other Media Analysis

• Here the information on the media in the fomi of print or broadcast or other
process in which it is resented may be used to collect ideas and design
requirements.
 I 38 .... < >
Page 29 □ ,r

12. System Testing

• Here, the system test results which give the new requirements can be
gathered, evaluated, and implemented if needed.

3.1.2 Defining The Domain

The domain knowledge about the system to be developed can be collected from domain
experts or partially by reviewing documentation from the old manual process or the
current computer system.

3.1.3 Considering the Environment

• The environment where the system is going to be used is considered before the
system design.
• Physical environment considers issues like lighting, temperature, and other issues.
• Safety environment considers health issues and hazards.
• Social environment considers issues related to user's interaction with each other.
• Organizational environment the integration all the people in the network and the
technology.

3.1.4 Possible Problems in the requirements collection

The requirement collection may be hindered due to the following reasons:

• The number of users and customers involved may be less.

• Management and coordination during requirement collection may be less.
• Participants may not communicate properly
• Difficulties may be faced during the collection of relevant information.
• People with relevant information may not be available due to heavy workload.

3.2 Determining the Basic Business Functions

The Basic Business Functions are determined in order to understand and describe the
functionality of t he product. These functions are determined by performing the
following tasks.

• Understanding the User's work

• Developing conceptual models
 I 38 .... < >
Page 30 □ ,r

3.2.1 Understanding User's work

In this phase of the interface design, the aims and goals of the people using the
system are described in order to provide the necessary functionality.

Task Analysis:

• Helps in meeting the goals of the users.

• Makes the designer understand the functionality of the computer.
• Describe the user activities and the ways of performing them.
• Uses the mental model of the user.
• Provides information concerning workflows such as,
• The interrelationships between people, objects, and actions
• The user's conceptual frameworks.

Mental Models: Enable a person to understand, explain and do things

These are a representation of a person's understanding of,

• Their own self

• Other people
• The environment
• Things with which they interact.

Performing a Task Analysis:

Performed by breaking down the user's acbvities to the individual task level. Goal is to
find out why and how user's do the jobs manually which are to be automated .

• Knowing why establishes work goals.

• Knowing How provides the details of actions to be performed.

Figure 2.2 shows the task analysis phase in the development of a business system where
the system designer tries to understand all the user tasks and interactions through direct
observation of the working environment, taking interviews and questionnaire and making
measurements of the required system parameters.
 I 38 .... < >
Page 31 □ ,r

[Link]

(Scet'lanos)

Fig. 2.2 Perfonnlng Task Analysis

Scenarios:

• These are descriptions of all the actions taken by the users while completing a
task.
• They help the designers to conclude and reason about, the effect of the activities
and their flow on interface design.
• Their accuracy can be verified by testing them with users.
• They can be used throughout the conceptual design process to guide and
evaluate iteratively the completeness of the requirements.
• Scenarios can also be refined throughout the conceptual design process.

According to researcher Straub's article in 2004, scenarios play a very important role at
several levels in the early stages of conceptual design:

• They provide a · real world" task level description of the motivation and events
that trigger tasks and workflow as users navigate to task completion.
• They provide a connection between developers working on different modules of
the interface.
• They provide a common ground for communicating the needs of the users to the
developers who will then create a system model.
Page 32 I 38 □
.IL
,r < >

3.2.2 Developing conceptual models

A conceptual model is a framework which shows the system's functions. This model is
the output of the task analysis stage.

• This model describes how the interface will present objects, the relationships
between objects, the properties of objects, and the actions that will be performed.
• The model is based on the user's existing mental model.
• The conceptual model when presented to a user, a new useful system mental
model is created.
• The system mental model is based upon the system's behavior,
which include factors like system inputs, actions, outputs (including screens and
messages), and its feedback and guidance characteristics.

Guidelines for Designing Conceptual Models

The model should reflect the user's mental model.

• Draw physical analogies or present metaphors.

• Comply with expectancies, habits, routines, and stereotypes.
• Provide action-response compatibility.
• Make invisible parts and processes of a system visible to create a correct mental
model.
• Provide proper and correct feedback.
• Avoid anything unnecessary or irrelevant.
• Provide design consistency.
• Provide documentation and a help system that will reinforce the conceptual
model.
• Promote the development of both novice and expert mental models.

3.2.3 The User's New Mental Model

When a new system is implemented and presented to a user, the person interacts with
the new system and its interface and tries to understand the system based upon the
existing mental model.

The user's mental model gets reinforced and a feeling of the user's mental model is
reinforced interface intuitive is developed if the designer has correctly reflected the user's
mental model in design.
 I 38 .... < >
Page 33 □ ,r

With a continued interaction with the system, the user's concept of the system will get
influenced and his or her mental model may be modified. Refinement of this mental
model, is aided by well-defined distinctions between objects and by being consistent
across all aspects of the interface.

Documentation and training will be provided when a gap exists between the conceptual
model and the mental model the user would bring to the new system.

Design Standards or Style Guides

In interface design, design standards describe the appearance and behavior of the
interface. They provide guidance on the proper use of system components also define
the interface principles, rules, guidelines, and conventions that must be followed in
detailed design. Design standards or guidelines help in achieving design consistency.

Benefits of Design Standards or Style Guides to the users

• Allow faster performance.

• Reduce errors.
• Reduce training time.
• Foster better system utilization.
• Improve satisfaction.
• Improve system acceptance.
• Reduce development and support costs.

Benefits of Design Standards or Style Guides to the developers

• 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
 I 38 .... < >
Page 34 □ ,r

Some Commercial Style Guides

• Apple Human Interface Guidelines for the Macintosh

[Link]
lines
• IBM Ease of Use Web site
[Link]/easy/page/558
• Microsoft Windows XP User Interface Guidelines
[Link] .com
• Sun Microsystems Java Look and Feel Design Guidelines
htto://[Link]/productsfllf/ed2/book/[Link]

Summary:

This unit provides us with a set of guidelines for the interface design process which
include fourteen development steps typically followed in creating graphical system's or
Web site's screens and pages. In this unit, the two chapters discuss about the first two
steps which include, knowing the user and understanding the business functions
respectively.

MCQs [ All 1 mark]

Q1 . Which one of the following is not a factor that a designer considers to
understand how users interact with a computer?
a. The Human Action Cycle
b. Trouble using the computer by the users
c. Knowledge of the user about the hardware of the system
d. The tasks performed by the users
Q2. Which of the following is not a psychological response of people to poor
design?
a. Confusion
b. Annoyance
c. Errors during tasks.
d. Frustration
Q3. Which of the following is not a physical response of people to poor design?
 I 38 .... < >
Page 35 □ ,r

a. Abandonment of the system

b. Compensatory activity
c. Modification of the task
d. Boredom
Q4. Which of these is not an attribute influencing interface design?
a. Perception
b. Memory
c. Visual acuity
d. Experience of the user
QS. Which of the following is not a psychological characteristic of the user to be
considered in the interface design?
a. Attitude
b. Patience
c. Age
d. Cognitive Style
Q6. Which of the following is not a physical characteristics of the user to be
considered In the interface des ign?
a. Gender
b. Stress
c. Handedness
d. Disability
Q7. Web interface design is complex because,
a. Design language has limited objects and interaction styles
b. Browser navigation takes time
c. Information architecture and work flow cannot be standardized.
d. All the above
QB. Which of the following is not a characteristic of Web Interface
a. Responsiveness
b. Reactive
c. Security
d. Reliability
Q9. Which of the following statements is false about Web page design
a. User hardware variations are limited.
 I 38 .... < >
Page 36 □ ,r

b. User focus is on navigation and information

c. Data is not private
d. Response time depends on transmission speeds.
Q10. Which of the following statements is false about Web pages
a. Fixed page size.
b. Page rendering is slow
c. Page resolution is less
d. Pages are viewed randomly
Q11 . Which of the following is / are the principles of User Interface Design
a. Accessibility
b. Availability
c. Configurability
d. Ali the above

State whether the following statements are True or False [ All 1 mark)
01. There are two types of responses by the user to a poor design: Psychological and
Physical.
02. As the flexibility of a system increases, its usability decreases.
03. Use of Jargon makes it difficult to use a system.
04. Interaction speeds are considered in the interface design process based on the
performance and preferences of the users.
QS. The main goal of a Web Page Design is to collect and process data.
06. The main goal of a Web Application Design is to provide information.

Descriptive Questions:
01 . What are the two steps followed by the designer in the interface design process? [2M]
02. Briefly explain the four factors considered by the designers in understanding how a
user interacts with a computer. [BM]
Q3. What are the three stages in which human action is performed while interacting with
a computer? [6M]
04. Explain any three factors causing difficulty in using a computer system. (6M]
QS. List the design inconsistencies leading to poor usability of a system. [4M]
06. Discuss the physical and psychological user responses to poor design. (BM]
Page 37 I 38 □
.IL
,r < >

07. Explain any four important human characteristics or attributes influencing interface
design. [BM]
QB. What are the methods used in interface design to reduce the memory load on the
users [5M]
09. Explain any four types of interferences obstructing the higher-level processing in the
context of the screen design. [BM]
01 0. In the context of user interfaces, how does learning benefit the user? [2M]
011. What is performance load in the context of screen design? List the two types of
performance loads and briefly explain how they can be reduced. [5M]
012. Discuss the four user characteristics to be considered in the design of business
systems. [BM]
Q13. Compare performance with preference in the context of interaction speed
considerations during the interface design process. [4M]
014. What are the sub-phases in the business definition and analysis phase of the
business system design? [2M]
015. Explain any four direct methods of information collection techniques during business
system design. [BM]
01 6. Explain any four indirect methods of information collection techniques during
business system design. [BM]
0 17. Explain the two tasks involved in determining the business functions. [BM]
018. What are design standards and guidelines? What are their benefits to the users and
designers? [6M]
Answers to MCQs:

Answers to True/False Questions:

2 3 4 5 6
T T T T F F

References:

[1] Wilbert 0. Galitz, "The Essential Guide to User Interface Design", 3"' Edition, Wiley
 I 38 .... < >
Page 38 □ ,r

[2] [Link] (Fig. 2.1)

[31 [Link] Wide Web

1.0 Introduction

A good interface and screen design are based on some guiding principles. A good
interface design shows the capabilities, needs, and tasks of its users. It should also
be developed considering the physical constraints of the hardware. The design
should use the software capabilities effectively and finally achieve the business
objectives for which it is designed.

There are some general des ign guidelines that primarily deal with user considerations
as given below:

• A test for a good design

• Organizing screen elements.
• Screen navigation and flow.
• Visually pleasing composition.
• Typography.
• Keying procedures.
Page 3 I 37 □
.IL
,r < >

• Data output.
• Web sites and Web pages.

The topic of Understanding the principles of Good Interface and Screen Design is
discussed in two sections. In the first section, we study the screen design issues
considering various human factors. The second section discusses the
technological considerations in interface design. In the first section, we study how
the user uses the screen and what are his requirements, screen, and web page
meaning, and their purpose, testing method for a good design, and other related issues
like the organization of the elements clearly and meaningfully, presentation of the
information in a simple and meaningful way, design guidelines for web pages and small
screens.
The second section deals with Graphical Systems and Web Systems.

2.0 Human Considerations in Interface and Screen Design

Many factors related to the screen design affect the use of a screen or Web page as
listed below:

• The amount of information presented on the screen.

• The organization of information.
• The language used to communicate with the user.
• The methods of displaying the components and the use of aesthetics.
• Consistency of a screen or page with other screens or pages.

2.1 How to Distract the User

2 .1.1 Aspects of the poor design affecting the user

According to Barnett (1993, 2005), the following were the list of poor design issues
which affected the use of paper forms. These are thought to be affecting the electronic
forms and web pages too.

• Unclear captions and badly worded questions - may cause rereading and can
o be interpreted incorrectly.
• Improper type and graphic emphasis - may lead to the hiding of important
o information.
 I 37 .... < >
Page 4 □ ,r

• Misleading headings • may create confusion about the content.

• Clunered and cramped layout - may create a bad initial impact and leads to
more errors.
• Poor quality of presentation, legibility, appearance, and arrangement reduces
user performance.

According to Howlen (1995), the most common problems in the visual interface design
are:

Visual inconsistency in screen detail presentation and with the operating

system.
• Overuse of design features and elements.
• Overuse of three-dimensional presentations.
• Overuse of too many bright colors.
• Poorly designed icons
• Bad typography

According to Nielsen (2005e), there were some design mistakes found when users
submitte d the Alert Box which are listed below:

• There were legibility problems when font sizes were small and there was poor
contrast between text and backgrounds.
• Presentation of links in a non-standard way created confusion.
• Flash usage was found to be annoying.
• Navigation and searching were poor.
• Forms were cumbersome to fill.

Other distractions affecting Web Page users are as below:

• Too many auditory and visual interruptions.

• Too much visual clutter.
• Poor information readability and clarity.
• Screen components are not understandable.
• Confusing and inefficient navigation.
• Excessive or inefficient page scrolling.
• Too much information or outdated information.
Page 5 I 37 □
.IL
,r < >

• Old design copied from the paged forms.

2.2 What users want

The response of the people, when enquired about their requirements from a screen, are
as given below:

• The appearance should be clean, clutter-free, and orderly.

• There should be a proper one-to-one mapping between the elements and their
function.
• Information should be located where expected.
• There should be a clear indication of the relationships between elements.
• The language used should be plain, simple English.
• The method of finding things in a system should be simple.
• There should be a clear indication before making any permanent changes.

2 .3 What users do

The user performs the following tasks when interacting with a computer:

• Identification of a task to be performed.

• Making a decision on a method to complete a task.
• Changing the computer's controls as required.
• Collecting useful data and ignoring meaningless data.
• Judging whether the decisions were relevant or not.

2 .4 Goals of Interface Design

For an easy and pleasant experience for the user, an interface should be designed so
that their visual , intellectual, memory, and motor work is reduced and also instructions
imposed by the technology are minimized or eliminated.

2.5 Test for a Good Design

The best test to identify a good design is to check whether all screen elements like
the field captions, data, title, headings, text, and information, types of controls,
navigation elements, can be identified without reading the words that identify them.
 I 37 .... < >
Page 6 □ ,r

2.6 Screen Meaning and Purpose

Every screen element, text, organization, color, graphic, message, animation, and all
forms of feedback should have a meaning and a function.

The useful information on the screen is known as a signal and the information on
the screen without a purpose is called noise.

2.7 Organizing Visual elements

A good design is where there is visual clarity. Here the display elements are
presented in a meaningful, recognizable, and understandable way.

Visual clarity is affected by several factors as given below:

• There should be consistency in design

• The composition of the elements should be visually pleasing.
• There should be a logical and sequential ordering of the elements.
• The right amount of information should be presented with groupings and
proper alignment avoiding visual clutter.

2.8 Consistency

Consistency in any component design is as important as it is required for a person in his

attitudes, thoughts, and beliefs.

Studies by Koyani et al., 2004 found that consistency has the following benefits:

• It leads to a reduction in task completion and learning times

• It gives an increase in user satisfaction.
• It also aids learning.
• It establishes expectations and allows a person to use conceptual learning and
transfer training.
• It enables the user to easily find the location of screen elements.

Inconsistency in a screen design will result in following limitations:

• It forces the user to memorize, and remember, a number of different ways to

do something or understand what is presented on the screen.
• It makes it difficult for a complete structure to emerge.
Page 7 I 37 □
.IL
,r < >

• It can also be distracting and confusing.

• It also creates a screen variation that makes it difficult to notice another variation
that may be important for a person's task or need.

NOTE: In Web site design consistency greatly enhances visual scanning which is a
frequent user activity and provides stability and reduces navigation confusion.

2.9 Starting Point

A person scans an array of information based on the composition of a display and how
it has been learnt.

Screen designs generally provide a starting point in the screen's upper-left corner.

To focus the user's attention the following design methods are followed in respect of the
display components:

2 .9.1 Textual Display

Studies by Streveler and Wasserman (1984) found that visual targets located in the
upper-left quadrant of a screen were found the fastest and those located in the lower-
right quadrant took the longest to find. This is due to the habit formed from reading text.

2 .9.2 Graphical and Web Displays

Graphical displays change a person's scanning behavior due to the

visual cues like color, depth, form, and the movement they provide.

Studies in this regard have found the following observations:

• People do take advantage of visual details such as white space or

components that stand out conspicuously from other components.
• People tend to look at text first, not images.
• Larger type dominates over the smaller type and when they are of the same
size text is more easily observed. So to become an entry point, images must
be much larger than text.
• Changing information is looked at before non-changing information.
• Eye tracking studies indicate that in information-based sites people tend to
look first at text, not images, by a margin of nearly two to one.
 I 37 .... < >
Page 8 □ ,r

Regarding the user reading a web page, studies have found the following:

• People often read Web pages in an F-shaped pattern: two horizontal stripes
followed by a vertical stripe.
• Also reading/scanning pattern is comprised of these three components:
• People first look horizontally, across the upper part of the content area.
Then they scan the content's left side in a vertical movement.
• Scan speeds can vary.
Sometimes the scan pattern can resemble an upside-down L or an E

2.1O Ordering of data or content

In a web page design, in order to retain the user's short-term memory, the number of
information elements on a screen has to be kept to a minimum. Also to lower memory
requirements, a logical, meaningful, and sensible arrangement of screen data and
content is required. The content ordering on a web page should be completely based on
the importance of information.

General schemes of ordering information are as given below:

• Divide the information into logical, meaningful, and sensible units.

• Organize this information according to its relationship with the data.
• Order the screen components with the user's priority and needs as given
below:
• Sequence of use.
Frequency of use.
• Function.
Importance.
General to specific.
, Any information that needs to be compared is visible at the same time.
• Only needed information is visible on the screen.

2 .10.1 Ordering Web Pages:

Research conducted by Koyani et al. (2004) gives us a list of content ordering

guidelines for web pages as below:
• A level of importance for the content should be established.
Page 9 I 37 □
.IL
,r < >

The critical information should be placed near the top of the Web site.
• The important items should be placed at the top of a page and consistently.
Information should be organized clearly and the scheme should facilitate
scanning.
• For an easy comparison, information should be structured.

2.11 Navigation and Flow

Navigation is basically guiding the eye to scan the content on the screen . This can be
best done by grouping and aligning screen controls and appropriately using border
lines. A person's attention should be directed to the elements in the order of their
importance focusing the attention using different display schemes. The tab order
should follow a logical order of information and the command buttons should be
located at the end of the tab order.

The screen navigation scheme should consider the following points:

• The ordering of screen information and elements should be rhythmic, guiding

a person's eye through the display. It should encourage natural movement
sequences and minimize pointer and eye movement distances.
• The most important and frequently used elements or controls should be
located at the top left.
• The flow should be maintained from top-to-bottom and left to right.
• Attention should be sequentially directed in the order based on the
information being,
• Critical
• Important
• Secondary
• Peripheral

2 .12 Visually Pleasing Composition

Research studies indicate that during the scanning of a display in a clockwise direction,
a person's visualization is affected by the following factors:

• The symmetrical balance and weight of the titles of the display

• Text content of the display
 I 37 .... < >
Page 10 □ ,r

Also when exposed to uncertainty, the perceptual mechanism in a person needs some
order and meaning. When a cluttered screen is presented, a person needs some time to
understand.

The following qualities are needed in a screen display for it to be pleasing:

• Balance - This can be provided by an equal weight of the screen elements on

the left and right, top, and bottom of the screen.

Figure 3.1 shows a balance Vs instability of elements on a screen.

Figure 3.1: Balance (Versus instability)

• Symmetry - Can be done by replicating elements left and right of the screen
centerline.

Figure 3.2 shows a non-symmetry Vs symmetry of elements on a screen.

• Regularity - The horizontal and ver1ical alignment points should be consistently

spaced and element sizes. shapes, colors, and spacing should be similar.

• Predictability - This can be established by following some conventional order or

arrangements of the elements.

• Sequentiality - The screen elements should be arranged in an obvious, logical,

rhythmic, and efficient manner to guide the eye through the screen.
Page 11 I 37 □
.IL
,r < >

Figure 3.2: Non-symmetry Vs. Symmetry of Elements

• Economy - To get the message on the screen easily, usage of fewer font styles
and colors can be used.

• Proportion - This can be provided by groupings of data or text with a pleasing

proportion.

• Simplicity - Fewer elements on the screen can make visualization simpler.

• Groupings - Here the functionally associated elements can be grouped and

evenly spaced.

There are various guidelines for creating groupings as given below :

• Spatial groupings should have five degrees of visual angle (1 .67

inches in diameter or about 6 to 7 lines of text, 12 to 14 characters
in width).
• Allow 1/8 to 1/4 inch between each group.
The groupings should be visually reinforced in the following ways:
• Adequate separation should be provided between groupings using white
space.
• Line borders should be provided around groups.
 I 37 .... < >
Page 12 □ ,r

• Meaningful titles should be given for each grouping

2.13 Distinctiveness

In regards to screen design, distinctiveness refers to the proper separation of the

screen elements so that they are clearly distinguished from each other.

It is achieved through the following:

• There should be adequate separation between adjacent elements and screen

boundaries.
• There should be enough separation between parts of an element.
• There should be enough space between the screen controls, field, and group
borders.
• Also, the screen controls, field, and group borders should not touch the window
borders.
• The buttons and their labels should not touch window borders or each other.
• The colors and shades of the adjacent screen elements should contrast well
with one another.

2.14 Focus and Emphasis

Drawing the attention of the users to the Important part of the screen is a vital
consideration of the screen design and this can be done by applying a visual emphasis
technique.

The components on the screen which should be given importance are:

• Critical elements
• Changing elements
• Prominent elements

In this regard, Olsen (2002) in his research found that abrupt environmental changes
(or edges) such as color changes capture a person's attention.

Wu and Yuan (2003) found that by highlighting the elements of a matrix, comparing,
and finding discrepancies in a pair of data becomes easier.
 I 37 .... < >
Page 13 □ ,r

Further, research by Silvers and Keiner (1997) says that inappropriate highlighting of
text resulted in lower reading comprehension scores.

In conclusion, if visual emphasis has to be effective, it should always be used

appropriately.

Visual Emphasis can be achieved by the following techniques:

• Using more brightness.

• Using a distinctive typeface such as Bold, Italics, and Underlining.
• Blinking an important element
• Using line rulings and surrounding boxes or frames.
• Using Colors.
• Increasing component size.
• Using animation.
• Proper positioning.
• Using a distinctive or unusual shape.
• Isolating the components from unimportant ones.
• By minimizing the screen clutter.

In regards to web design emphasis should be given to new or changed content and
the page text should not be overwhelmed by the page background.

2.15 Conveying Depth of Levels or a Three-Dimensional Appearance

Though all the real-world objects are not visually presented in three dimensional, human
beings perceive them as three-dimensional.

To foster this perception researchers Marcus (1992) and Lidwel et al., (2003) have
given the following techniques:

• Overlapping - the relevant element should be displayed fully and the irrelevant
element can be hidden beneath it.
• Drop s hadows - in the creation of the shadows, always assume that a light
source is in the upper-left corner of the screen and the shadow in the lower right
corner.
 I 37 .... < >
Page 14 □ ,r

• Highlighting and lowlighting - Attention can be captured by highlighting the

elements or relevance.
• Growing and Shrinking - Relevant elements can be made to grow in size, while
less important elements remain small or shrink.
• Beveled or Curved edges - curved edges around the elements like windows,
and buttons can make them appear risen above the screen.
• Texture, color, size, and clarity change - this can highlight the relevant
elements.

2.16 Presenting lnfonnation Simply and Meaningfully

To convey the information on the screen effectively, it should be well presented. In this
regard, the screen designer should have the following goals in mind:

• The presentation form should be clear and simple.

• The organization of the content should be easily understandable.
• The information should be absorbed easily.
• The content should be pleasant in its tone and color.

The guidelines for presenting information on screens are as follows:

• For information to be noticeable and distinguishable ii should be legible.

• For information to be Identifiable, interpretable, and attractive ii should be
readable.
• The information should be presented in a usable fonn.
• For attracting the attention of users to the screen elements, cont rasting
display features can be used.
In order to guide the eye to the required element, visual lines should be
provided.

2 .16.1 Typography

Typography is the art of laying out text for print or on screens for aesthetics and
readability.
The textual content on the screen not only gives information, but the characteristics
of the text such as the font type, style, case, and size can also benefit the user in
the following ways:
 I 37 .... < >
Page 15 □ ,r

• Can help communicate the organization of screen elements.

• Can help Identity the most Important screen elements .
• Can provide a mood and a reading order.

2.17 Application and Page size

This issue is more importanl in lhe design of web pages.

An application or web page can be designed to have a few long pages with a lot of
scrolling to view the page content or many shorter pages with frequent movements
between pages.

The main design goal is to allow the users to move quickly and efficiently through
the pages.

2.17.1 Scrolling and Paging

These are the two methods used to move or navigate between web pages or an
application:

• Scrolling - the popular navigation method used currently.

• Paging - is an older moving technique where movement between pages is
through a key press.

The guidelines to be followed while scrolling and paging are as listed below:

Scrolling:

Scrolling a page to determine its subject and contents should be avoided.

• Vertical page scrolling should be avoided.
• When vertical scrolling is necessary to view an entire page, the below guidelines
should be followed:
• Context-based colors can help while scrolling the page to view its entire
contents.
• Shorter pages can benefit the users if they are looking for specific pieces of
information.
• Highlighting major page items on a page can help in faster scrolling.
Provide an "end of page" structure.
• Horizontal page scrolling can be avoided.
Page 16 I 37 □
.IL
,r < >

Paging:
• There can be two versions or a website created, one with paging and another
with scrolling.

2.17.2 Amount of Information to present

In regards to the amount of information to be presented on the screen by the screen

designers the following guidelines must be followed:

• Proper amount of information:

• Too much information is taxing on the user to search for an element
• Too less information makes the users remember the information on different
screens.
• Present all necessary information
• Screen density - this measure gives the amount of something that is present on
the screen. The more the density, more will be the time taken to find the
information and the errors in finding them.

2.17.3 Paper versus Screen Reading

The printed material is highly readable and attractive compared to screen reading. The
CRT -based characters have technical limitations and offer less resolution, so the
screen reading speeds are 40% lower and error-prone.

Researchers have found out that reading on paper is always faster with 200 words per
minute (wpm). 80% of the users preferred reading on paper over screen reading. So
there should be a print option provided for printing the pages on a computer screen if
needed.

Screen reading motor skills like scrolling, paging, etc, are found to be more exhausting
than turning pages. Also, paper reading is very convenient as it can be done anywhere:
in bed, near a pool, or anywhere else.

2.18 Application Screen Elements

The elements on an application screen allow the user to enter, select, delete, view, and
modify the data. These elements earlier were only rectangular boxes and were known
 I 37 .... < >
Page 17 □ ,r

as fields . With the introduction of graphical systems, various types of objects are
used to place information in a database.

These objects are called controls.

The controls have two attributes:

1. A data field - an area where data or information will be keyed, selected, or

displayed.
2. A descriptive caption or label - identifies the type of data contained within the
field.

Controls contain other information to provide context and help in interpreting the data.

This additional information include title, headings and other instructional information as
discussed below:

2.18.1 Title
An appropriate title for the web page or the application helps the user in
understanding of an application's organization and navigational structure.

Title for Windows:

• Window titles must be located at the top.
• There should be no title for windows containing messages.
• The purpose of the window should be clearly described by the title
• Use uppercase or mixed-case font.
• It should be spelt fully.

Title for Web Pages:

• Web page titles must be in the browser title bar and on the content
pages themselves.
• The page title should be consistent with the browser bar title.
• Titles should be:
• descriptive
• unique and meaningfully different from other Web pages.
• concise
 I 37 .... < >
Page 18 □ ,r

2.18.2 Labels

An appropriate label has the following benefits

Efficiency of finding an item increases by 90 percent.

Number of clicks to finish a task reduces by 25 percent.
Fewer errors and higher user satisfaction.

2.18.3 Data Fields

Data fields should be visually very clear and highlighted. Data fields are of three
types:

• Data Entry or Modifiable

• Inquiry or display/read-only
• Temporarily inactive data fields

The guidelines for their design are as given below:

• For Data Entry or Modifiable

• The data should be displayed within
• A line box or a box with a contrasting light-colored background.
• Long structured data items should be broken into logical pieces.
• For inquiry or display/read-only screens containi ng non-changeable data
• The data should be displayed on the normal screen background with no
borders.
• For temporarily Inactive data fields
The data content of the data field should be displayed with a lighter hue
than active fields.
• The background color of the entry area should not be changed.

Control Caption - Data Field Differentiation

2.18.4 Headings
As headings are used with related controls in applications, they create a common
identity.
 I 37 .... < >
Page 19 □ ,r

Benefits of using headings:

• Provide meaning to a section

• They create a group and a visual appeal to ii.
• This helps to learn.

Benefits for Web pages:

• Are also used to break up large textual blocks

• Help in creating a visual appeal.
• Help the users find what is required.

In the organization of screen controls there are three kinds of headings used:

• Section Headings
• Subsection or row headings
• Field group headings

The design guidelines for these headings are as given below:

Section headings

• A meaningful heading should be given for a section to clearly describe the

relationship of the grouped controls as shown in Fig. 3.3 and Fig. 3.4
• These headings should be located above their related screen controls.
• They should be displayed in a distinguishable font style and size in mixed case
headline style.

A UOKESS

llouse/A11artment Name or Num ber :

Street ~fa me:

C ity Name:

PIN Code:

Fig. 3.3 Section Heading

Page 20 I 37 □
.IL
,r < >

ADDRESS

House/Apartment Name or Number:

Street Name:

City Name:

PIN Code:

Fi~. J.4 Section Headint wilhin a boundary

Subsection or row headings

• A meaningful heading should be given for a section to clearly describe the

relationship of the grouped controls shown in Fig. 3.5
• These headings should be located to the left of the row of associated fields or
Topmost row of a group of associated fields.
• These headings should be separated from the adjacent caption through the
use of a greater-than signs or a filled-in arrow.
• These headings may be left- or right-aligned.
• They should be displayed in a distinguishable font style and size in mixed case
headline style.

CAR» Make: Model: ~ - - - - ~ Year: ~

Fig. 3.5 Subsection or Row Headings

Field group headings

• A meaningful heading should be given for a section to clearly describe the

relationship of the grouped controls as shown in Fig. 3.6
• These headings should be centered above the caption to which it applies.
• Relate it to the captions by a solid line.
• They should be displayed in a distinguishable font style and size in mixed case
headline style.
 I 37 .... < >
Page 21 □ ,r

CAR

DRIVER LICENSE NUMBER

f tl. J.6 f"ttkl Group Ut1dit1JCS

Other guidelines for screen design:

• Use special symbols where required for emphasis (as shown in Figure 3.7)

Fig. 3.7 S pecial Symbol for E mJJhasis

• Use instructions for data entry for the users (as shown in 3.8)

Type for cha11gts 011/y

Kind:

Model:

Number:

Fig. 3.8 Instructions on a Screen

• Use data field completion aids on a screen as shown in Figure 3.9

 I 37 .... < >
Page 22 □ ,r

Date of Birth: (MM/DD/YYYY)

Fig. 3.9 Complet ion Aid

Lists:

• A collection of related items should be presented in a vertical list.

• Use sentence or headline-style capitalization in a consistent manner.
• Provide a heading for each list.
• The lists should be ordered in a meaningful way.
• Arrange equal-value items alphabetically or designate each item with a bullet.
• Important or frequently chosen items should be placed at the top of the list.
• Ordered items should be numbered.
For easy identification and scanning, lists should be surrounded by borders,
groupings, and white space.

Keying Procedures:

Many a times during large data entry in applications, lot of keying in is required. The
main considerations here are:

• Minimizing keystrokes should not be the main concern of design, instead the
keying rhythm and the important goals of the system should be of other factors of
concern.

Keying Rules:

Following is the Keying Rules for increasing the data entry speed:

• There should be no rules or logical transformations while data is keyed in.

• Formatting of data should not be required.
• Keyed-in data should not be case-sensitive except for password entry.
• Usage of shift key should be avoided.
• Units of measurement should not be required to be keyed in.
• Double-clicking will not cause problems.
 I 37 .... < >
Page 23 □ ,r

Data Output

Data outputs in a computer application or web application may be of two types:

• Reports - consist of a list of records.

• Tables - consist of a list of records derived from a database.

Reports:

Following are the guidelines for creating a report:

Report Body
Column headings should be provided.
Units of measurement should be shown.
Right fonts should be selected.
• Rows should be clearly identified.
• Pages should be broken up logically
• For a wide sizes body, users should be able to resize the columns or wrap the
information columnwise.

For headers:

• Include print date, name of the report or the person, the title, retrieval time, logo
and other organizational identity details.

For Footers

• Include current page, number of pages, date, data source, format name, URL or
location information and legal information.
Repeat footer at the bottom of every page.

2.19 The Web - Web sites and Web Pages

The content or information on the Web is unlimited and the Web users access a site for
three reasons:

• A focused search for a piece of information or an answer to a query.

• A less focused browsing.
• Just surfing
 I 37 .... < >
Page 24 □ ,r

2.19.1 Goal of Web Access:

The main reason for web access by users is sufficient and good content.

2.19.2 Dimensions of a web site

Three dimensions are considered i n the creation of a web site:

• Structure: The issues considered in regards to the structure of a web site are:
Organization of the information
• Number of pages
Length of each page
• Navigation: The issues considered in regards to the navigation of a web site are:
• Movement of the user around the site.
• Support given by the site to help the movement.
, Information content: The issue considered in regards to the content of a web
site is:
• The information of the site, the quantity of information, and its presentation.

2.19.3 Web User Interaction Styles

Researcher Sellen et al. (2002), studied what the users on the web did for performing
their tasks. He found three different Web interaction approaches each with a different
flow and activity behavior characteristics.

• Browsing
II is non-specific surfing.
• Users move through a Web site at their own pace.
Browsing is analogous to shopping.
• Information finding
• This involves finding specific answers to specific questions or requirements.
• Information g athering
• This involves looking for answers for future use.

2.19.4 The Web Experience

There are many factors that affect the user experience of the Web.
Page 25 I 37 □
.IL
,r < >

The most important of them are as given below:

The web sites design meeting the user's expectations, capabilities, and
limitations.
• The visual appearance and content of the Web site.
• The functionality of the Web site.

The study by Nielsen (2000), Koyani et al. (2004), and Stone et al. (2005) gives us a
set the principles used to create a web site. The main goal is to create a site for an
efficient, effective, and pleasant experience of the user.

• Expectations - User's expectations in respect of the web content, its flow and
organization should be met.
• Tasks - The design should consider the user's capabilities and limitations and
should be easy to use.
• Visual Appearance - The visual appearance of the web site screens must be
attractive and consistent
• Information Content
Content should be appropriate to the user's needs and frequently updated.
The most important information is should be positioned prominently.
The content should be visible without needing to scroll more.
• Assure that the content is updated frequen tly
• Web Page Headings
Properly labelled web page headings will provide a road map to understand
the navigation and web site structure.
• Platforms
The design should consider different platforms and screens.
• In the design an image-safe area should be specified so that users with a
small or large screen can view the screen content.
• Processes
• The windows or graphics which are not required should not be displayed.
An option for printing a web page should be provided.
• A warning message before a time-out should be provided.
• Downloading - Design should aim for minimizing downloading time.
• Include videos, animation, sound, and video only if necessary.
Page 26 I 37 □
.IL
,r < >

• Web Applications - Web applications should be added only if necessary.

• Accesslblllty - Design should aim for a better accessibility of the web content.
• A ssistance - Design should include instruction which would help in assisting
users.

2 .19.5 The Web Structure

The Web is a non-linear entity with hundreds of web pages that can be navigated in any
number of ways. This makes the web flexible. But flexibility can lead to confusion and
the user cannot develop a mental model of a website structure. This, in tum, can make
the users disoriented and they can get lost within pages. So a website designer should
develop a clear and meaningful site structure before its implementation.

A basic guideline for developing a website is that, the content should be organized in a
natural way for the user, which reflects the structure of the tasks which the user wants
to perform.

Other guidelines are in regards to the following points:

Page Perusal

The most frequent way in which a user goes through a page is just scanning or
skimming it and not going through its det ails and reading word by word. So
enhancing this scanning process is a very critical design issue.

Page Scanning Guidelines

• The page content should be organized in a logical and systematic as follows:

• Important information should be highlighted.
Headings and subheadings should be used at appropriate places.
• Phrases and sentences should be short in length
Paragraphs should be small and readable.
• Use bullets for lists and tables for drawing attention.
• Keep array information in tables.

Writing Guidelines

• A meaningful title for a content is very important.

• There should be headings and sub headings where required.
 I 37 .... < >
Page 27 □ ,r

• Text should be concise using a simple language.

Presentation

• Important information and concepts must be highlighted.

• Any new information added or modified should be notified.

Web page length

• Page length should be less especially for,

• Homepage.
• Navigation pages.
• Pages to be read faster and downloaded.
• Page length should be longer for,
• Pages which require uninterrupted reading.
• Matching the structure to a paper counterpart.
• Pages to be conveniently downloaded and printed.
• A complete content should be restricted to two or three screens of information.
Critical information should be located at the top of a page within 4 inch from the
top.

Home Page

This is a site's important page as it gives the first impression of the site. It can
create a positive or a negative feeling to the users.

Study by Koyani et al., 2004 reports that people when asked to find high quality
sites, more than 50% of them look at the home pages of the sites.

A brief summary of important homepage characteristics is given below:

• Purpose of home page - Is to tell the user about the contents of the site and the
places to find.
• Content - Gives all the content options
• Size - Should be limited to one screen
• Elements to include
• Name or logo of Web site owner.
• Web site name
 I 37 .... < >
Page 28 □ ,r

• Brief description of Web site

• Summary of the key informational content
• Site overview or map
• Navigation links to different parts or the site or major sections.
• Summary of the latest news or promotions.
• Searching facility.
Announcements of changes to Web site.
■ Organization and Layout
• Important information should be placed at the top within 4 inches of the page.
• Place the remaining elements based on their importance.
■ Access
• Access to the home page should be provided from all other pages.

Browsing and Searching

Browsing is a process where the user scans the content and tries to explore the
relevant items from his or her memory and recognizes them.
Searching on the other hand is a process of recalling. Searching requires keywords
which are dug from memory and entered the search field. This results in contents
nearer to the keyword.

Guidelines for browsing:

• Scanning the content should be facilitated

• To make moving through the pages easy, a layered structure can be used along
with links.
• Allow the user to leave the site conveniently and reorient themselves when they
return.

Searching:

A searching process on the web should result in information and not data and a good
searching facility is the one which enables the user to find what is needed from the large
amount of data available on the web.
Page 29 I 37 □
.IL
,r < >

The guidelines for design of searching facility can be studied under the following points:

• Know Your Search User

• The user's expertise level, common terms used by while searching are
identified.
• The type of information and the amount of information that would result from
the search is considered.
• Plan for flexibility in the search process and also the user's switching purpose.
• Express the Search
• What - Here the design issue is to make the search simple. The probability of
the search to be successful at the first instance should be high.
• Where - The search option has to be provided on the home page as far as
possible.
• When - Search options should be clear and the user has to have control over
the search.
• Search Controls - Search controls should be provided in the form of text box,
structured controls, and a command button. The search text box should be
large enough to enter a minimum of 20 characters.
• There should be separate interfaces for simple and advanced search.
• Provide guidance and assistance during search process.
• Launch the Search
• Search activation can be done clicking on the command button or pressing the
return key.
• During search refinement, changes to a parameter should automatically
produce new results.
• Progressive Search Refinement
• The user should be allowed to control the degree of search with a rapid rough
search first and then going for a more refined search process.
• Presenting Meaningful Results
• The main design goal in the presentation of search results is to provide correct
information and, in a language, and format which is easy to understand by the
user.
 I 37 .... < >
Page 30 □ ,r

Also provide a search summary and explanatory message to explain search

outcomes.
The results should be presented concisely in the form of a text, arrayed in the
order of relevance.
• In case of multipage lists, links should be used to the next search result page.
• For results with only one item, the result page should be presented
immediately.
• Remember the Search
• The search entries and search results should be saved automatically.
• Also, the users can save the results manually.
• Locatability
• Another design issue is to make the website locatable

2.20 Statistical Graphics

Whenever there is a need to present data in a graphical format such as a chart or a

graph, statistical graphics are used.
Use of Statistical Graphics:
■ They help in communicating complex ideas with clarity, precision, and
efficiency in a short time and less clutter.
• They will bind large amounts of information together in a meaningful
way.
■ They will also help in comparing different types of data.
• They help in presenting time varying data.
• They help in statistical analysis of data.

3 Technological Considerations in Interface Design

Two factors affect Interface design:

■ Characteristics of the hardware being used.

• The interface's controlling software.

The above two factors are divided into various sub factors and discussed in the
following section:
Page 31 I 37 □
.IL
,r < >

3.1 Graphical Systems

Screen design must be compatible with the capabilities of the system as given below:
• System power
• Processing speed and memory affect the performance of a system in cases of
feedback and animation capabilities.
• A slow screen refresh rate will increase the user's chances of perceiving
screen flicker, which results in visual fatigue.
• Screen size
• Large screens can take advantage of windowing systems.
• Studies by Simmons and Manaham (1999) compared monitors of 15, 17, 19,
and 21 inches for search activities using Microsoft's Word and Excel, and for
browsing the Web and found that the 21-inch monitor resulted in fastest task
completion.
• Screen resolution
• Poor screen resolution affects the use of a graphical system.
They will not allow the use of sharp and realistic drawings and shapes.
• Also, Window structure and icon design may be affected.
• Most common display resolutions currently are 800 x 600 (pixels width and
height),1024 x 768 and 1280 x 1024
• Display colors
More the number of colors, better the graphics effect.
• Other display features
The screen design process is facilitated by a wide range screen attributes or
properties, such higher brightness, reverse polarity, different font sizes and
styles, underlining, blinking, line rules and boxes, color, and whitespace.
The designer must be aware of the capabilities of the system, their limitations
and effective usage.

Screen design must also be compatible with the capabilities of:

• System Platform
The screen design should be compatible with the Windowing platform to
be used such as Apple Computer's Macintosh, Microsoft Windows, etc.
 I 37 .... < >
Page 32 □ ,r

• Development and Implementation Tools being used

Today more than 50 percent of the software code used on a system is used
for the user interface design. The tools available to build them are toolkits,
interface builders, and user interface management systems.

Toolkit:

• It is a library of controls or widgets such as menus, buttons, and scroll

bars.
• They have a programmatic interface and must be used by programmers.
• They are usually for a specific windowing platform.
• Examples: Motif, Openlook, and the Macintosh.

Interface builder:

• Is a graphical tool that helps a programmer create dialog boxes, menus,

and other controls.
• It provides a palette to select and position controls, and to set properties.
• Interface builders are limited to use in laying out the static parts of the
interface.
• They cannot handle the parts of the interface that involve graphical
objects moving around.

User interface management system (UIMS):

• This extends the features of a builder by also helping with creating and
managing the insides of windows.
Examples: HyperCard and Visual Basic.

• Style Guides being used

Various providers have developed style guide for system developers in order to
provide design consistency in interface design.

These guidelines provide the following features:

• They specify the appearance and behavior of the user interface.

Page 33 I 37 □
.IL
,r < >

• They describe the windows, menus, and other controls for a specific look and
functionality.
• They also help in the usage of various components.

Examples of industry-produced guidelines:

• Apple's Macintosh Human Interface Guidelines

• IBM's System Application Architecture Common User Access (SAA
CUA)
• Microsoft's The Windows Interface Guidelines for Software Design.

4 Summary

In this unit, the focus is on understanding the principles of a good interface and screen
design. The discussion is based on design guidelines keeping the user considerations
in mind.

The content is divided into two parts: in the first part, various human factors are
considered. Here the interface design issues such as people's usage of the system,
their expectations from the screen, presentation, and organization of information on the
screen are studied. Also, the Website creation guidelines are discussed in the later part
of the section.

In the second part of this unit, the technical issues such as the characteristics of
hardware such as system power, screen resolution, screen size and colors used are
discussed. Also the compatibility of the design with the capabilities of the system such
as the platform used, tools and style guides used are discussed.

Questions based on Unit 3 topics

Descriptive Questions:

1. List the factors affecting the screen design. [ 2 marks]

2. What are the poor design issues affecting the user? ( 4 marks)
3. What are the common problems in visual interface design? (4 marks)
4. List the distractions affecting the web page users. ( 4 marks)
 I 37 .... < >
Page 34 □ ,r

5. What are the user requirements for a Screen? (6 marks]

6. What are the factors affecting the visual clarity of the screen? (4 marks]
7. What are the benefits of consistency and limitations of inconsistencies in screen
design? [ 6 marks]
8. What are the schemes for ordering data on a screen? Also, give ordering
guidelines for web pages. [ 6 marks]
9. What is distinctness in the context of screen design? How is it achieved? (6
marks]
10. What are the guidelines for the effective presentation of infonna tion on the
screen? [ 5 marks]
11. What is the main design goal of a web page design? (2 marks]
12. What are the two methods to navigate between web pages? Describe them
briefly (6 marks]
13. What are the advantages and disadvantages of reading on pages and computer
displays? [ 4 marks]
14. What are the factors affecting the user experience of the web? (3 marks]
15. What are the guidelines to be followed when creating a website? (6 marks]
16. What are the characteristics of a Home page? (6 marks]
17. Compare browsing with searching. List some guidelines for adding these features
on a website. [8 marks]
18. What are the technological considerations in the Interface Design [8 marks]

MCQ's (1 mark each)

1. Which of the following statement is not a design issue affecting electronic
forms and web forms?
a. Misleading headings
b. Cluttered and Cramped layout
c. Improper type and graphic emphasis
d. Screen navigation and flow
2. Which of the following statement is not a requirement of a user from a
screen?
a. The appearance should be cluttered and unorderty.
 I 37 .... < >
Page 35 □ ,r

b. Information should be located where expected.

c. There should be a clear indication of the relationships between elements.
d. The language used should be plain, simple English.

3. Which of the following is not a task performed by a user when interacting

with a computer?
a. Identification of a task to be performed.
b. Making a decision on a method to complete a task.
c. Testing the above method after deciding
d. Changing the computer's controls as required.

4. Which of the following is not a benefit of consistency in screen design?

a. Reduction in task completion and learning times
b. Increase in user satisfaction.
c. It also aids learning.
d. It enhances attention level of the user.

5. People often read Web pages In an __ shaped pattern.

a. D
b. T
c. F
d. L

6. Which of the below is not correct with reference to ordering of the screen
components.
a. Frequency of use
b. Time of use
c. Sequence of use
d. Importance

7. The most important and frequently used elements or controls should be

located at the
a. top left
b. top right
Page 36 I 37 □
.IL
,r < >

c. bottom left
d. bottom right

8. The quality of a screen design to provide an equal weight of the screen

elements on the left and right, top, and bottom of the screen is known as,
a. Balance
b. Symmetry
c. Regularity
d. Proportion

9. The quality of a screen design of getting the message on the screen easily
by the usage of fewer font styles and colors is known as,
a. Sequentiality
b. Simplicity
C. Economy

d. Groupings

State Whether the following statements are True or False (1 mark each]
1. Title , Field Captions, Headings and Navigation are the screen elements
considered while testing for a good screen design.
2. The useful information on the screen is known as data and the information on the
screen without a purpose is called noise.
3. Visual clarity is not affected by logical and sequential ordering of the elements on
the screen.
4. Graphical displays change a person's scanning behavior due to the visual cues
like color, depth, form, and the movement they provide.
5. In regard to screen design, distinctiveness refers to the proper separation of the
screen elements so that they are clearly distinguished from each other.
6. Visual emphasis technique does not draw the attention of the users to the
important part of the screen.
7. The factors that affect an Interface Design are characteristics of the hardware
being used and the interface's controlling software.

Fill in the Blanks :

Page 37 I 37 □
.IL
,r < >

8. The two methods used to navigate between web pages are and

9. The screen elements of a graphical system are known as _ _ __

10. ____ is the art of laying out text for print or on screens for aesthetics and
readability.
11._ _ _ _ _ is a process where the user scans the content and tries to explore
the relevant items from his or her memory and recognizes them.

MCQ Key Answers:

2 3 4 5 6 7 8 9
d a C d C b a d C

Answers for True/False and Fill in the blank questions:

1 2 3 4 5 6 7 8 9 10 11
T F F T T F T Scrolling Fields Typography Browsing
and
Paaina

References:
[1) Wilbert 0. Galitz, "The Essential Guide to User Interface Design", 3'" Edition, Wiley
[2) Ben Shneiderman,Catherine Plaisant, Maxine Cohen, Steven Jacobs, "Designing
The User Interface", 5th Edition, Pearson.