Content uploaded by Raul Valverde
Author content
All content in this area was uploaded by Raul Valverde on Aug 05, 2015
Content may be subject to copyright.
!"#"!$%$"&$'("&
i
Principles of Human Computer Interaction Design
Table of Contents
Preface ……………………………….……………………………………………………. ii
Interaction paradigms …………………………………………………………………..…1
Interaction frameworks and styles ............................................................................11
Discovery methods for HCI .......................................................................................22
Interface and interaction design ................................................................................38
Physical design and prototyping ...............................................................................56
Auditory interfaces and Haptics ................................................................................70
Evaluation methods for HCI and Web Accessibility ..................................................80
Usability testing .........................................................................................................95
ii
Preface
This book covers the design, evaluation and development process for interactive
human computer interfaces. User interface design principles, task analysis, interface
design methods, auditory interfaces, haptics, user interface evaluation and usability
testing are introduced with the use of examples. The goal of this book is to raise
awareness for the importance of user-centered principles to the design of good
interfaces. Human aspects are covered and analyzed as the base for the design of
user interfaces and their implementation.
Topics covered include: human capabilities and limitations, the interface design and
engineering process, prototyping, issues in interface construction, interface
evaluation, and World Wide Web and mobile device interface issues.
The book is ideal for the student that wants to learn how to use prototyping tools as
part of the interface design and how to evaluate an interface and its interaction
quality by using usability testing techniques.
iii
About the author:
Raul Valverde lives and works in beautiful Montreal Canada, he has been working in
the IT and business fields for almost 17 years in different roles as MIS manager,
University Professor, Software Engineer, Software developer, Technical Specialist,
Product Manager and Public Accountant.
He presently works as a Lecturer and Academic Director for Management
Information Systems and Supply Chain Management Operations at Concordia
University in Montreal. His educational credentials are a Doctor of Business
Administration in Information Systems from the University of Southern Queensland,
Master of Engineering from Concordia University, a Post Master of Business
Administration from McGill University, a graduate certificate in Computer Security
from Stanford University, a diploma in Operations Research from the Canadian
Operational Research society and a Bachelor of Science in Mathematics and
Management from Excelsior College of the University of New York. He holds several
professional designations and vendor certifications including Registered Professional
Accountant (Canada), Forensic Certified Public Accountant (US), Professional
engineer (Canada), MCSE, MCT, CCNA and MCDBA.
His research interests are Supply Chain Management Information Systems,
Accounting and Financial Information Systems, Fraud Detection Systems,
Information Security and E-business.
1
Chapter 1
Interaction paradigms
Welcome to Human Computer Interaction! The next eight chapters are about the theory,
design, evaluation and development process for interactive application interfaces. However,
what exactly is Human Computer Interaction?
Human Computer Interaction
According to Baecker, Grudin, Buxton, and Greenberg (1995). HCI is the ―discipline
concerned with the design, evaluation, and implementation of interacting computing
systems‖. Humans interact with a computing system via a human-computer interface. A
human-computer interface focuses in three main components (Rees et al. 2001):
1. The human
2. The computing system (machine)
3. The interaction
HCI is critical in the development of software and hardware systems; you might have a
powerful software application with many features but if the user is not able to operate it
easily, he or she will discard it after few trials. In order to improve the usability of a software
package, HCI specialists endeavor to:
Understand psychological, organizational, and social factors of the combined human
and computer system.
Develop methodologies to aid appropriate HCI design.
Realize efficient and effective interactions for single users and groups.
All of these efforts are directed at putting the user's requirements ahead of the technology as
stated above. The system should be tailored for people, not the other way round.
Computing Environments
Since HCI specialists need to understand psychological, organizational, and social factors of
the combined human and computer system in order build competitive interfaces for software
and hardware systems, it is important to explore the social, physical and cognitive
environments and evaluate their effect in building interfaces.
Physical Computing Environment affects many aspects of an interface ‗s design. For this, the
designer of an interface needs to take into consideration the ergonomics of the system.
Ergonomics can be defined as ―fitting the system to the human‖ (Robin Good, 2004). One of
the goals of ergonomics is to create a safe computing environment by designing a system
that protects the welfare of the user, issues as device radiation should be a concern for the
interface designer.
Physical Computing Environment is also concerned about the working and user space, the
user must be able to have enough room to use the interface without difficulties and enough
2
working space to bring the work objects such as notebooks and PDAs required to
accomplish his or her work. In addition, interface designers must ensure enough lighting,
efficiency, low levels of noise and pollution as part of their design.
The social environment affects the way people use computers. Different computing
paradigms imply different social environments. For instance, personal computing is usually a
solitary activity done in an office or an isolated corner of the house. Mobile computing is often
done outside and in public places. Social environment should be taken into consideration
when designing interfaces. For example, Machines like ATMs, that are in most cases located
in public areas, must preserve the user's privacy.
Cognitive Computing Environment looks at the cognitive aspects involved with the interaction
between people and computers. These are issues which originate in the cognitive sciences
and include basic psychological concepts such as learning and problem solving in terms of
abilities, strategies, knowledge and styles.
When designing an interface, the designer should take into consideration cognitive issues
such as age, disabilities, degree of focus and degree of technical knowledge of users. In
addition, computers are used in diverse environments that impose different levels of
cognitive stress on the user, this means that the interface needs to be aware if an interface is
for a mission-critical application that requires a clear and unambiguous interface that leaves
no room for error or if the interface is for leisure activities such as listening to music that
might require a more pleasant interface rather than a complex interface that is designed for a
high level cognitive stress.
5W + H
The ―who, what, where, why, and how‖ (5W+H) heuristic is a procedure that can be used to
define and analyze existing interaction paradigms and spaces and explore the elements and
objects with which the user interacts (Heim, 2007).
The heuristic has three components:
The What/How : This is used to understand the physical and virtual interface
components. For example, I/O devices, windows, icons, etc.
Where/When: This is related to physical environment. It looks at the differences
between office, portable, wearable systems.
Who/Why: This looks at the types of tasks and skill sets required.
Interaction paradigms
An interaction paradigm is a model or pattern of human–computer interaction that
encompasses all aspects of interaction, including physical, virtual, perceptual, and cognitive
(Heim 2007).
The interaction paradigms identified by Heim (2007) and shown in figure 1.3 in the textbook
are:
• Large Scale Computing
• Personal Computing
• Networked Computing
• Mobile Computing
• Collaborative Environments
• Virtual Reality
• Augmented Reality
3
The 5W+H heuristic is used to describe the paradigms indicated below:
Large scale computing paradigm
What/How- The large scale computing paradigm includes mainframe computers that were
large computers and they resided in a central location. These computers were accessed by
remote alphanumeric terminals (―dumb terminals‖) equipped with keyboards. These started
as electronic typewriter and later developed to CRT screens. Large-scale computing includes
super computers which are specialized machines that crunch large amounts of data at high
speed, as in computing fluid dynamics, weather patterns, seismic activity predictions, and
nuclear explosion dynamics. Display, other then text, was produced on special and
expensive devices such as plotters or customized CRTs.
When/Where- Most large computers were owned by government agencies and large
research institutes affiliated with large universities.
Who/Why- Large-scale computing resources are expensive and generally used to carry out
government sponsored-research projects and university-based research for large corporate
institutions. Supercomputers are used for the very high speed backbone (vBNS) connections
that constitute the core of the Internet while mainframes are still in use in the financial
industry.
Personal computing paradigm
The personal computing paradigm is driven by Graphical User Interfaces (GUI) and found in
commercial operating systems such as Windows and Macintosh. The Alto computer
developed at the Xerox Palo Alto Research Center in 1973, was the first computer to use a
GUI that involved the desktop metaphor: pop-up menus, windows, and icons. This was later
adopted by Apple for their Lisa and Macs machines, and later on by the Windows operating
system of Microsoft. The development started the personal computer paradigm that includes
Desktop and Personal-Public Computing. This paradigm is analyzed by using the 5W+H
heuristic in the following two sections.
Personal computing paradigm (Desktop)
What/How- This model can be defied as a single computer with a keyboard and pointing
device interacting with software applications and Internet resources. A desktop can have
permanent media storage like CDs and DVD ROMS and portable hard drive technologies
such as large capacity arrays and pen-sized USB sticks.
Where/When- Desktop PCs are available for home and office use and entertainment.
Who/Why- PCs are used for many applications. Productivity tools as word processing,
spreadsheet and presentation software are used in the office environment. Computer games
and E-commerce applications as banking are used by home users. Modern PCs are as
powerful as where the Large Scale computer of previous generations.
Public-Personal computing paradigm
4
Public access computers are part of this paradigm. Public access computers include ATM
machines, Mall directories, electronic boards and electronic advertisements.
What/How- Public access computers are normally implemented with regular PC desktop
computers with security that prevent access to operating systems functions and protects the
computer against viruses or other potential security threats. They most often take the form of
information kiosks or ticket-dispensing machines and their interfaces use touch screen
devices.
Where/When- Public access computers are found in many indoor and outdoor installations
like government offices, banks, malls and theaters.
Who/Why- This type of computers are used by the general public and normally used to
access public information, access public services and conduct financial transactions for
banking and payment for services.
Networking computing paradigm
What/How- A network is a communications, data exchange, and resource-sharing system
created by linking two or more computers and establishing standards, or protocols, so that
they can work together. Networks can be classified based on their scope: Wide Area
Network (WAN), Metropolitan Area Network (MAN), Local Area Network (LAN) and Personal
Area Network (PAN). Networks can also be classified based on their transmission media:
Wired Media and Wireless Media. This paradigm is enabled by several technologies Ethernet
and TCP/IP protocols, personal computer and telephone networks and modems
Where/When- Computer networks have freed users from location-based computing since
users can access internet based systems like e-mail and web browsers from any location
that has internet access. Network resources can be accessed at any time without restriction.
Who/Why- People from all backgrounds and ages are using the internet on an every day
basis. From banking to online games, users worldwide access network based applications
for a wide range of interests.
Mobile computing paradigm
What/How- Mobile computing paradigm includes technologies that comprise a very diverse
family of devices. This paradigm includes the devices mentioned below:
Laptop computers
Tablet computers
Game players
MP3 players
MP4 Players
PDAs
Wearable computers
Cell phones
Mobile devices can be connected to global positioning systems (GPS). These have touch
screens and voice interaction to alleviate potential visual attention problems during driving.
Where/When- Mobiles devices liberate users from the need to be at a specific location. Wi-Fi
internet access is nowadays available at most of the public places including airports, coffee
shops, hotels and malls. Wearable computers can be worn by users at any time and any
5
place and ideal for health monitoring application. Mobile devices can offer situational
computing that can take advantage of location-specific information through location-based
mobile services (LMS). LMS can be beneficial for location-sensitive advertisements, public
service announcements, social interactions, and location-specific educational information.
Who/Why- Business users benefit greatly from mobile computing. The ability to have access
to e-mail and remote databases when being away from the office, is of great benefit to
business in general. However, mobile computing has potential for most of the aspects of the
human life as e-commerce, health care, entertainment among others.
Collaborative environment paradigm
What/How - In a collaborative environment paradigm, computer networks allow members of
a group to interact with other members on shared files and documents. This creates a virtual
space where people can collaborate and work collectively with the use of Computer-
mediated communication (CMC).
A groupware is a CMC that allows remote interaction by using synchronous technologies
such as video conferencing, instant messaging and chat rooms or asynchronous
technologies such as e-mail, bulleting boards and discussion groups.
An example of a collaborative environment is the collaboratory. Wulf (1989)
called the collaboratory ―a center without walls, in which the nation‘s researchers can perform
their research without regard to physical location-interacting with colleagues, accessing
instrumentation, sharing data and computational resources, and accessing information in
digital libraries.‖.
Where/When- Computer supported cooperative work (CSCW) (Galegher, Kraut, & Egido,
1990) is computer-assisted coordinated activity such as problem solving and communication
carried out by a group of collaborating individuals. The multi-user software supporting CSCW
systems is known as groupware. A groupware can be based on remote interaction using
synchronous technologies like video conferencing or asynchronous technologies like email
and discussion groups.
Who/Why- CMC is used in business in order to eliminate transportation costs since it helps to
collaborate with remote customers or employees. Engineering benefits as well from this
paradigm as it facilitates the collaboration of engineering teams spread at different locations.
Universities use CMC to facilitate e-learning and research, an example of this is the
Research Collaboratory for Structural Bioinformatics (RCSB, 2005).
An obvious example to the collaborative paradigm is our online MSc in computing programs
that you are using, as well as other online education projects.
Virtual reality paradigm
What/How -The virtual reality paradigm offer users a computer simulated alternative to the
real world. Virtual reality technologies can be divided into two distinct groups:
Nonimmersive environments
Immersive environments
Non-immersive environments are screen-based, pointer-driven, three-dimensional (3D)
graphical presentations that may involve haptic technology feedback as Virtual Reality Virtual
Modeling language and QuickTime VR. Haptic technology refers to technology which
6
interfaces the user via the sense of touch by applying forces, vibrations and/or motions to the
user. Successful systems that provide 3D virtual world experience are the Second Life and
the Active Worlds Internet offrings.
Immersive VR environments are designed to create a sense of ―being‖ in a world populated
by virtual objects. To create a convincing illusion, they must use as many human perceptual
channels as possible. Virtual Reality immersive I/O devices include:
Head Mounted Display (HMD) (http://www.sensics.com/)
Spatial Immersive Display (SID)
Cave Automated Virtual Environment (CAVE)
(http://brighton.ncsa.uiuc.edu/~prajlich/cave.html)
Head-movement-tracking systems
Passive systems
Active locomotion systems
When/Where-VR systems are found in large scientific research laboratories in the
government and in engineering firms.
Who/Why- VR offers benefits in fields like aerospace, medical, military and in general
domains that require expensive environments for training. One example of a company that
develops VR systems for flight simulators in the military is CAE electronics in Montreal
Canada (http://www.cae.com). In Psychology it has application for the treatment of phobias.
VR is also used to implement Computer-aided design software used in systems as Cadence
used for IC design (http://www.cadence.com/).
Augmented Reality paradigm
What/How- The goal of Augmented Reality (AR) is to create a seamless integration between
real and virtual objects in a way that augments the user‘s perception and experience. Azuma
(1997) defines an augmented reality system as one that
combines real and virtual
is interactive in real time
is registered in 3D
Criteria for AR environments are that the virtual information must be relevant to and in
synchronization with the real-world environment.
AR I/O devices include:
Heads Up Displays (HUD) (E.g. Critical data viewer http://microoptical.net/)
Motorcycle helmets (E.g. Sportvue http://www.sportvue.com/)
Where/When- AR technology is applicable in situations in which people need access to
computing functionality and cannot afford to leave their work site. Emergency professionals
as firemen and police could benefit from such systems since they could access information
as building blueprints that could help in an emergency situation.
Who/Why- Current applications include military and emergency applications services (e.g.
showing maps, instructions, enemy locations, fire cells), simulation (e.g. flight and driving
7
simulators), navigation devices (e.g. cars and airplanes), games (e.g. ARQuake) and
education among others.
Summary
HCI is the discipline concerned with the design, evaluation, and implementation of interacting
computing systems. HCI specialists need to understand the social, physical and cognitive
environments and their effects as part of the interface design process. The Large Scale
Computing, Personal Computing, Networked Computing, Mobile Computing, Collaborative
Environments, Virtual Reality and Augmented Reality paradigms were analyzed with the
5W+H heuristic process.
References
Azuma, R. T. 1997, ‗A Survey of Augmented Reality.‘ Presence: Teleoperators and Virtual
Environments, vol. 6, no. 4, pp. 355 – 385.
Baecker, R. 1991, ‗New paradigms for computing in the nineties‘, Proceedings Graphics
Interface, pp. 224-229
Baecker, R., Grudin, J., Buxton, W., & Greenberg, S. 1995, Readings in Human Computer
Interaction: Towards the Year 2000 (2nd Edition), Morgan-Kaufmann. US
Galegher, J., Kraut, R., & Egido, C. 1990, Intellectual Teamwork: Social and Technological
Foundations of Cooperative Work, Lawrence Erlbaum Associates.
Heim, S. 2007, The Resonant Interface HCI Foundations for interaction design, Addison
Wesley.
Cogburn, D. L. 2003, ‗HCI in the so-called developing world: what‘s in it for everyone‘,
Interactions, vol.10, no.2, pp. 80-87.
RCSB, 2005, Welcome to the RCSB PDB. Retrieved December 23, 2006 from [Online]
Available http://www.rcsb.org/ [Accessed 8 Nov 2007]
Rees M., White A. & Bebo W. 2001, Designing Web Interfaces, Prentice Hall
8
Discussion questions
1. Research an existing interaction paradigm and write a report on some of the hardware
used. Discuss how it works, and then follow the 5W+H heuristic to explain how and why it
is appropriate for the paradigm.
2. Pick a particular type of computer peripheral, such as an input or output device. Trace the
evolution in this device in terms of changes in both user interface characteristics and
breadth of choices.
3. Discuss the commercial and social potential benefits of such systems as Second Life and
Active Worlds. Do you regard them as a passing interest, or do you believe they are here
to stay? Would there mark be felt in the future?
4. Discuss the observed why so many Human Computer Interactions disappeared from the
market, leaving the field mostly to the WEB/HTML/CSS. Have we gained or lost about
this convergence?
5. Discuss the Human computer Interaction of the online system that we use in our
programme (FirstClass). Highlights both its pros and cons of tits HCI.
9
Activities
Complete the following set of tasks
Design a situational computing environment using existing hardware and software
technologies. Explain how it will work and define the following:
a. 5W + H Heuristic
b. Computing Paradigm
c. Physical Computing Environment
d. Social Computing Environment
e. Cognitive Computing Environment
Sample Answer for Activity
We will analyze the internet café (wiki, 2010) as the computing environment.
There are already suitable hardware and software technologies to enable this environment to
be created.
Standard desktop computer with monitor
Internet connection
Web browser software
Suitable accommodation, premises
Furniture etc
How will it work?
Users wishing to check there email or browse the internet may not have easy access to a
computer of their own. So for a small fee they can enter the shop and purchase online time
from the owner. Since this is going to be a public service it needs to be located in a central
place, like a high street in town, and the opening times need to be varied. Many people may
not be able to get to the shop during office hours so a late night close would be necessary.
The shop could also offer printing facilities at a charge per print. Many games are now
multiplayer utilising the internet as a means of connecting people wishing to play these co-op
games. They are also more widely known as mmoprg (wiki, 2010). This is another facility the
shop may wish to provide.
Let‘s analyze the proposal using 5W+H heuristic approach
What/How
This service will provide the general public with internet access which will enable them to
Access email
Browse the internet
Play co-op Games
It will also provide them with a suitable environment into which to engage in this activity. A
charge will be levied for each hour the member of the public is using this service.
Where/When
In order to make the café accessible it‘s important that the location is central to as many
people as possible, a town high street for instance. The opening times are very important.
During office hours the café may not be very busy but during rush hour when people are
travelling home from work they are most likely wants to pop in to check email. The times the
café is open may need to be varied and this can finally tune as time goes on. In order to
work with members of the public the following open times may be used.
Open Close
10:00 13:30 Catches the lunch time crowd
16:30 22:00 Caters for rush hour commuters etc.
10
Who/why
Personnel computers can be expensive and in today‘s modern world each home is slowly
becoming digitally connected, but we are not all there yet. Just like VCR‘s in the 1970‘s it will
take time for the public to catch up. The café fills this interim gap by allowing people who
may not have the funds for their own computer to engage with the modern world so to speak.
It may also help those who are a little nervous of this technology to try it out before they
invest their own money for a unit of their own.
This café would come under the public-personnel computing paradigm as the café offers
public access to various types of information.
The physical computing environment or the ergonomics of it must provide a safe
environment in which the café operates. This must include the café
Suitable desk with enough room
Sufficient lighting
Suitable seating
Arm and wrist rests
Adjustable monitor stands to prevent neck strain
Screen filters where needed to prevent eye strain
Foot Rests
No trailing cables which could represent a trip hazard
Ergonomic (Ergonomics, 2010) Keyboards and mice
Access and facilities for the disabled. (ucandoit, 2010)
The social environment may also need to be considered. Although this is a public access
service individuals may still want privacy. Therefore screens maybe employed to isolate
individuals in there own working environment. Special filters on monitors can be used which
prevent people viewing private information from an angle. Where audio is used for video
conferencing, rather than use speakers, headphones should be used for added privacy.
Using the cognitive approach which manly deals with how people interact with computers, we
must ensure that the system employed overall is easy to use and requires little or now
introduction for the user. The interface, or browser, must be initiative enough for the user to
get up and running virtually straight away. As many aspects of the system should be
automated as possible to ensure the user has a pleasant experience. For instance as
regards to security things like anti-virus protection should be in place to protect the user and
be totally transparent to the user, as should things like firewalls.
A familiar style of computing should be used to which the majority of the public is used too.
So no fancy shop designed interface that needs navigating before you can access the
internet.
References
En.wikipedia.org Internet Café [online] Available from
http://en.wikipedia.org/wiki/Internet_caf%C3%A9 (Accessed 12th October 2010)
www.en.wikipedia.org MMORPG [online] Available from
http://en.wikipedia.org/wiki/Massively_multiplayer_online_role-playing_game (Accessed 12th
October 2010)
www.ergonomics.org.uk Ergonomics [online] Available from http://www.ergonomics.org.uk/
(Accessed 12th October 2010)
www.ucandoit.org.uk Home Page [online] Available from
http://www.ucandoit.org.uk/ucandoit/index.php (Accessed 12th October 2010)
11
Chapter 2
Interaction frameworks and styles
In this chapter, the concept of interaction framework will be examined together with the
different interaction styles used in interface design. Command line, menu based, forms,
question answer, Web, 3D, natural language interaction styles will be covered in detail.
Interaction framework
Human interaction with machinery is complex and cannot be quantified easily. One way to
put structure into this process is with the use of interaction frameworks. A framework is a
structure that provides a context for conceptualizing something. Frameworks present a global
view of an interaction (Dix et al 1998). In addition, frameworks help to identify problematic
areas within the design.
Execution/Evaluation Action Cycle
The Execution/Evaluation Action Cycle is an HCI model proposed by Norman (1990) which
explores the nature of actions and how they are structured. The structure of an action has
four basic parts: 1) The goal – what is to be achieved; 2) Execution – the actual action
execution; 3) World – the manipulation of items in the world via the execution of the action;
and 4) Evaluation – the analysis of the changes to the world compared to the intended goal.
The goal does not necessarily define a single action, rather the goal is represented as
intentions that identify the specific actions required to achieve the goal. The key is to
remember that many sequences of actions may lead to accomplishing a goal. Donald
Norman‘s (1998) Interaction framework consists in seven action stages: 1) Establishing the
goal; 2) Forming an intention; 3) Specifying the action sequence; and 4) Executing the action
sequence. Once an action has been completed, humans assess the outcome of the action
during the evaluation phase. This particular phase has three additional stages: 1) perceiving
the current world state; 2) Interpreting the percepts; and 3) Evaluating the percept
interpretation and comparing the results to the goal. These three steps combined with the
four action steps provide seven steps (or stages) of action.
Understanding how humans define their goals, establish intentions, carry out actions, and
assess the action outcomes is an important step when developing an interface. As the
systems become more complex, understanding the elements of the Execution/Evaluation
Action cycle become more difficult because they incorporate more complex cognitive factors.
These factors are the focus of this lecture.
Norman‘s model concentrates on user‘s view of the interface. It assumes that some systems
are harder to use than others. The model defines gulfs that represent the difficulties that user
might have in accomplishing an interface task from the execution and evaluation points of
view. Norman defined the terms Gulf of Execution and Gulf of Evaluation. The Gulf of
Execution refers to the situation in which the human formulates an intention to carry out an
action but the system does not provide the capability to complete the action. The Gulf of
Evaluation occurs when the human is able to execute the desired action, but is unable to
12
evaluate the outcome of the action. The Gulf of Evaluation occurs when the system does not
provide sufficient feedback to the human.
A gulf of execution measures how different is the user‘s formulation of actions from the
actions allowed by the system. Let‘s assume that a user has the goal to save a file, given this
goal the user has the intention to use the file system and this leads him or her to perform the
action of selecting the save option of the interface. Since the action requires the interface to
support a save option, the system could have a gulf of execution if the interface does not
present a save option.
A gulf of evaluation measures how different is the user‘s expectation of changed system
state from the actual presentation of this state. For example, if the file system in the previous
example is not clearly visible and located where the user would expect it to be located, this
could create a gulf of evaluation.
Some questions that might be helpful to determine if an interface presents a gulf of
evaluation are identified by Norman (1990) below:
How easily can the user determine what the device‘s function is?
How easily can the user determine what actions are possible with the device?
How easily can the user determine how intentions are mapped to physical
movement?
How easily can the user determine if an action has been performed?
How easily can the user determine if the system is in the desired state?
How easily can the user determine the mapping from the system state to
interpretation?
How easily can the user determine the state the system is actually in?
Dix et. al Interaction framework
Dix et. al (1998) expanded on the EEC model to include the system. Their interaction
framework has 4 parts as indicated in figure 1.
Figure 1 Interaction Framework
This is a general framework for understanding interaction that is not restricted to electronic
computer systems. It identifies all major components involved in interaction and allows
comparative assessment of systems.
S
O
U
I
system
output
user
input
13
The framework assumes that both user and system have their own unique language and the
interaction facilitates translation between languages. Any problem with the interaction is due
to problems in the translation between user and system languages.
The framework shows how user intentions are translated into actions at the interface level.
These actions are then translated into alterations of the system state. Alterations of the
system state are reflected in the output display that it is then interpreted by the user.
Coping with Complexity
Interaction design is a complex task due to the level of abstraction required to understand the
user‘s viewpoint. Different tools can be used to cope with this complexity, including mental
models, mapping, semantic and articulatory distance and affordances (Heim 2007).
Norman (1983) introduced the concept of user‘s mental model of a computer system with
which the user is interacting. This computer system should communicate the conceptual
model, which is an accurate, consistent, and complete representation of the target system
held by the designer, or an expert user, of the system. The user‘s mental model is formulated
through interaction with the computer system, and constantly modified throughout the
interaction. This model is a cognitive representation of something that defines a logical and
believable estimation as to how an object is constructed or how it functions. Metal models
can help to model the user‘s view. This model can be used to align the interaction‘s design
with the user‘s view in order to facilitate its use.
Young (1983) introduced task-action mapping models. Young linked the internalised
representation of the system to the real-world task which users have to perform. Task-action
mappings describe the structure of a real-world task and the actions needed to perform that
task, and provide a direct mapping between the task and the corresponding actions. Young
(1981) uses the example of an algebraic calculator for a mapping model: the operations that
have to be performed can be mapped onto doing the same task with paper and pencil. A
task-action mapping model would allow competent use of a system for a particular task, even
though the user has no detailed knowledge of the system and how it works.
Another two important tools used in interaction design are: semantic and articulary distances.
Semantic distance is a tool that measures the distance between what people want to do and
the meaning of an interface element, while the articulatory distance measures the distance
between the physical appearance of an interface element and what it actually means (Heim
2007).
Affordances are tools that represent connections that allow us to make predictions about the
results of our actions and help us to create usable mental models. These connections are
user‘s interpretations of the interface, these can be obvious such a turning wheel that affords
turning but sometime confusing. This interface shows text boxes used as labels for a log in
interface that allow input when the purpose to provide an output.
Interaction Styles
The way users interact with computers is referred to as interaction style (Heim 2007). A list
of interaction styles is given below:
14
Command Line
Menu-Based Interface
Form Fill-In
Spreadsheets
Question and Answer
Direct Manipulation
Metaphors
Web Navigation
Three-Dimensional Environments
Zoomable Interface
Natural Language
Command Line
Command-line style is used by Operating Systems such as Linux, Unix and MS-DOS and it
is mainly based on text commands. It has the advantage of being very fast compared to
other more graphical interfaces. In addition, Command-Line interfaces tend to be very
flexible since commands can be created with multiple parameters that can be set and altered
for multiple applications. It is also suitable for repetitive tasks such as the creation of batch
files. However, it is more suitable for expert users since it can be frustrating for the novice
user given its learning curve. It also has poor error handling and requires substantial training
and memorization.
From the EECA perspective, the Command-Line shows that intention formation, specification
of the action, and the execution stages are complex. It also, requires a rather accurate
mental model of the computer‘s internal processing. From the Interaction Framework
perspective, it translates the user‘s task language into the input language. It requires
knowledge of the core language but the output language can be confusing for inexperienced
users since it provides little feedback (Hem 2007).
Menu-Based Interface
Menu-driven interfaces present users with a list of alternatives or options. Textual menus
allow menu selection by keying in the number or letter that is associated with that option
while graphical menus use arrow keys or pointing devices such as pen or mouse.
Graphical menus can have different forms. Pull down menus provide a vertical list of options
to users and cascading menus must be requested by the user from another higher level
menu. Some designers use pop-up and iconic menus in order to save screen space.
Menus can be Ideal for novice or intermittent users. However, they can appeal to expert
users if display and selection mechanisms are rapid and if appropriate "shortcuts" are
implemented. Menus can afford exploration (users can "look around" in the menus for the
appropriate command, unlike having to remember the name of a command and its spelling
when using command language) and allow easy support of error handling as the user's input
does not have to be parsed (as with command language) (Preece et al. 1994).
On the other hand, too many menus may lead to information overload or complexity of
discouraging proportions. They may be slow for frequent users and may not be suited for
small graphic displays (Preece et al. 1994).
15
From the EEAC perspective, menu constraints can help the user to form the proper
intentions and specify the proper action sequence and provide a context to evaluate the
output language (Heim 2007).
Form Fill-in
They are used primarily for data entry or data retrieval and they use the computer screen
similar to a paper form. Form Fill-ins are similar to menu interfaces in the sense that they
present screens of information. However, they are different than menu interfaces since they
are used to capture information and proceed linearly instead of navigating a hierarchical
structure. The use of form fill-in requires the use of design tools. Heim (2007) and
Shneiderman & Plaisant (2005) mention the following advantages and disadvantages with
the use of form fill-in:
Forms simplify data entry and require little training compared to other interaction styles such
as command lines. They permit the use of form management tools, have low memory
requirements and are self-explanatory (Shneiderman & Plaisant 2005).
On the other hand, they require valid input in valid format, require familiarity with interface
controls (e.g. Windows), can be difficult to correct mistakes and consume screen space
(Shneiderman & Plaisant 2005).
Spreadsheets
These are sophisticated variations of form fill-ins. The first spreadsheet was VISICALC
developed by VisiCorp followed by Lotus 1-2-3. Microsoft Excel is the most popular
spreadsheet nowadays. The spreadsheet consists of a grid of cells that contain values or
formulas. Formulas can involve values of other cells and the user can enter and alter data to
the spreadsheet.
Spreadsheets have unlimited space to work with and allow to perform complex calculations.
On the other hand, they can be difficult to learn and might require programming skills.
Question and Answer
Question and answer was primarily used to supplement either menu or command line styles.
This type of interaction requires that you consider all possible correct answers and deal with
the actions to be taken if incorrect answers are entered. Although they are used for
mainframe applications, Question and Answer interfaces are more popular in windows
applications and normally called wizards. This type of interface is restricting for expert users
but ideal for novice users that need to be guided during the interaction process.
This type of interaction has low memory requirements and ideal for applications that are
targeted towards beginners. On the other hand, it requires valid input supplied by user and
familiarity with interface controls. It can also be very tedious to correct mistakes (Heim 2007).
Direct Manipulation
This interaction style focuses on using icons, or small graphic images, to suggest functions to
the user. Today, direct manipulation interaction (Dennehy, 2007) is seamlessly integrated
with the menu style since many menus include icons in order to represent menu actions.
16
From the EEAC perspective, this style offers a wide range of possible intentions. Users
usually have multiple options for specifying action sequences. However, the style can be
overwhelming for novice users and provide multiple ways of executing action sequences.
With this interaction style, users do not need to remember a command set or recognize
commands from menu. The user can easily undo operations and get immediate feedback to
his or her actions. On the other hand, infrequent users need to remember the meaning of
direct manipulation operations and require interactive devices (e.g., stylus, mouse) in order
to manipulate graphical objects in the screen. In addition, this interaction style might require
specific computer hardware graphic requirements and take too much space of the screen
(Leventhal & Barnes 2007).
Metaphors
Metaphors are visual relationships to real-world objects that are used in interaction design in
order to help users relate to complex concepts and procedures. They make learning new
systems easier and make computers more accessible to beginner users. In addition, they
exploit user‘s familiar knowledge, helping them to understand the unfamiliar. An example of
this is the trash icon in the Windows operating system; this metaphor might symbolize a
delete command. Selecting the icon with a pointing device such as a mouse executes the
function.
However, the use of metaphors can present problems such as conflicts with design
principles. Macintosh thrash has two completely different functions contradicting each other.
It served to eject disk as well as delete files. Furthermore, metaphors can be too constraining
like in the case of a windows directory that requires the user to scroll through it in order to
find a file when it might be easier just to type the name of the file if it is known.
Some other potential problems are identified by Heim (2007) and listed below:
Run out of metaphors since some virtual processes and objects have no real-world
counter parts.
Mixed metaphors.
Carry connotations and associations.
Web Navigation
Web navigation has basically two main interaction styles: link-based navigation and search
(Heim 2007). The link-based navigation is based on hyperlinks and requires understanding
of the hyperlink label or image. This can be problematic since the user might have a different
interpretation of the actual meaning of the hyperlink.
The search style minimizes this ambiguity with the help of a search engine that is used to
interact with the user. However, the search engine might lead to wrong interpretations if it
doesn‘t take into consideration spelling variations or incorrect search criteria input.
3D Environment
The 3D interaction is natural to most users since it recreates the real-world that can be
perceived in a 3D space. This interaction style is popular in computer games but it has the
problem of being processor intensive. For this reason, 3D interfaces normally use information
in vector based format in order to decrease file sizes and facilitate mathematical calculations
required for 3D geometrical transformations used for interface navigation. The basic 3D
17
transformations are scaling, translation and rotation. An overview of these transformations is
described by the Weiguang‘s notes (2007) at
http://www.rhpcs.mcmaster.ca/~guanw/course/vis3D.pdf.
Some vector based files used in 3D interfaces include X3-D (Web3D.org) and VRML (Virtual
Reality Modeling language). Although 3D interfaces were initially used mainly in computer
games, they have been recently used for desktop applications. An example of this effort is
the Task Gallery developed by Microsoft. An interesting video that presents this technology
can be found at http://research.microsoft.com/ui/TaskGallery/video.mpg.
Zoomable Interface
The zooming interface paradigm (ZIP) was introduced by Raskin (2000). He described the
ZIP paradigm by using the concept of ZoomWorld that was based on the idea that the user
has access to an infinite plane of information having infinite resolution. The plane is
ZoomWorld. Everything the user accesses is displayed somewhere on ZoomWorld, whether
it is on a computer, on a local network to which your computer is attached, or on a network of
networks, such as the Internet.
In this ZoomWorld, you think of the user as flying higher and higher above it. To look at a
particular item, the user dives down to it. ZoomWorld also has a content searching
mechanism. The overall metaphor is one of flying, climbing to zoom out and diving to zoom
in. The user navigates both by flying above ZoomWorld and by doing content searches.
The ZIP readily permits labels to be attached to images and to collections of images yet does
not impose any structure, hierarchical or otherwise, beyond association due to proximity. For
example, a large heading Personal Photos might, when zoomed in on, reveal smaller
headings on groups of pictures labeled Baby Pictures, Vacations, Pets, Hobbies, Friends,
Relatives, and so forth. Zooming in to the writing under the heading Baby Pictures might
reveal the children's names.
An interesting zooming user interface (ZUI), called PAD++ (it is now called Jazz), has been
developed independently, originally at the University of New Mexico. See
http://www.cs.umd.edu/hcil/pad++/.
Natural Language
The natural language relieves the user of the burden of learning syntaxes or getting familiar
with graphical objects since it interacts with the user by using everyday language. The style
is ideal for users not familiar with computer systems and for hands free and mobile
applications. This style uses speech recognition or typed natural language. However, there
are problems associated with this style and highlighted by Leventhal & Barnes (2007) and
Shneiderman & Plaisant (2005) in the following list:
It is unpredictable
May require many keystrokes
Rigid sequences so user would need to remember sequences
Typing with an onscreen keyboard could be slow and error prone. No evidence that
phone has speech input.
18
Recall. Infrequent or new users may have some problems recalling what the inputs
should be.
Vague and ambiguous
Summary
The Execution/Evaluation Action Cycle model was introduced and its usefulness to compare
different interaction styles and paradigms highlighted with some examples. The Dix et. al
Interaction framework was presented and its use to model interaction operations was
discussed. Different interaction styles were covered and their benefits and problems were
discussed for different interaction applications.
References
Dennehy, M. 2007, Direct Manipulation. The Encyclopedia of Virtual Environments. Virtual
Reality and Telepresence Course, [Online] Available: http
http://www.hitl.washington.edu/scivw/EVE/I.D.2.c.DirectManipulation.html [Accessed
20 Nov 2007]
Dix, A., Finlay., Abowd, G., & Beale, R. 1998, Human-computer interaction, Prentice Hall,
Upper Saddle River, NJ.
Heim, S. 2007, The resonant interface, Addison-Wesley, Boston MA.
Leventhal, L. & Barnes, J., 2007, Usability Engineering: Process, Products and Examples,
Prentice Hall, Upper Saddle River, N.J.
Norman, D. 1983, ‘Some Observations on Mental Models‟, in Mental Models, eds Gentner,
D. A. & Stevens, A. A. Hillsdale, NJ: Erlbaum.
Norman D. 1998, The invisible computer, MIT Press, Cambridge MA.
Norman D. 1990, The design of everyday things, Doubleday/Currency, New York.
Preece, J. J., Rogers, Y. R., Sharp, H., Benyon, D. R., Holland, S. and Carey, T. 1994,
Human-Computer Interaction. Addison-Wesley, New York , N.Y.
Raskin, J. 200, Human Interface, the: New directions for Designing Interactive designs,
Addison Wesley Professional, New York, N.Y.
Shneiderman, B. 1997, Designing information-abundant web sites: issues and
recommendations. In Web Usability, eds Buckingham S. & McKnight C., Int. J. Human-
Computer Studies.
19
Shneiderman B. & Plaisant S. 2005, Designing the User Interface, Peason Education,
Reading MA.
Young, R.M. 1983, ‗Surrogates and Mappings: two Kinds of Conceptual Models for
Interactive Devices‘. In Mental Models, eds Gentner, D. & Stevens, A. L. Hillsdale, NJ:
Erlbaum.
Young, R.M. 1981, ‗The Machine Inside the Machine: User's Models of Pocket Calculators‘.
International Journal Of Man-Machine Studies, vol. 15 ,no. 1, pp. 51-85.
Weiguang G. 2007, Course notes in 3D graphics [Online], Available:
http://www.rhpcs.mcmaster.ca/~guanw/course/vis3D.pdf, [Accessed 15 Nov 2007]
Discussion questions
6. Choose a few of the possible combinations presented in the table below, for instance,
Form Fill-In and Mobile, and write a one-to-two page report on a possible interaction
design resulting from the combination. Use the 5W+H heuristic to structure your report
and discuss the possible range of tasks that might be supported as well as the hardware
that might be involved.
You should discuss the advantages as well as the disadvantages resulting from the
combinations. Consider also the possibility that a particular combination will yield no
practical applications; if so, you should articulate the reasons for this determination.
Large Scale
Mobile
Personal
Networked
Command Line
Menu
Form Fill-In
Question and Answer
Direct Manipulation
3-D
Zoomable
Natural Language
7. Choose two different interaction styles and a particular task. For instance, you might
choose Direct Manipulation and Question and Answer and then choose the task of
setting up an email account. Then, using Norman‘s Execution/Evaluation Action Cycle,
make a detailed report on how the task will be accomplished. This may take the form of a
list of actions that occur at each stage of the model.
20
After that is complete, discuss and compare the impact each interaction style will have on
the successful completion of the task. Refer to the different stages of the EEAC in your
discussion.
8. Using Norman‘s design questions below, discuss a specific interaction devices for a
portable MP3 player. The question ―how easily can you…‖ should be answered by
describing the actual device and how the interface looks and functions. For instance, the
first question ―How easily can you determine the function of the device?‖ should be
answered by listing the functions (Execution) and describing how each function is made
visible to the user (Evaluation).
Given a particular interface design, how easily can you; (Norman, 1990)
Determine the function of the device?
Tell what actions are possible?
Determine mapping from intention to physical movement?
Perform the action?
Tell if system is in the desired state?
Determine the mapping from system state to interpretation?
Tell what state the system is in?
9. Now take the same device and discuss its operation in terms of the Interaction
Framework of Dix et al.
Activities
Starting with this chapter and continuing through the rest of the book you will be involved in
the creation of an interaction design.
The design project can be based on, but is not restricted to, any one of the following
interfaces (bear in mind that you need to prototype the interface for this project in future
weeks):
Website
Kiosk
Windows Application
Mobile devices
For this seminar, you will be responsible for the submission of a document with the following
components:
5W+H heuristic
Interaction Paradigm
Physical Computing Environment
Activity sample solution
Interaction Design for an university information website
The marketing department has been given the task of redesigning from scratch a technical
university‘s website in order to raise the public profile of the institution its courses and
facilities, and attract more enrolment applications. The logic behind the redesign is that most
21
students ―shop around‖ before making a decision and the convenience of the web means
that many if not most will make the choice from the comfort of their homes without ever
setting foot on any of the campuses being considered. As such, the Senior Managers have
taken a chunk of the budget from the on-campus student information centre and have
redirected it to the marketing department for a major ―online presence‖ overhaul. All design
elements, content, and functionality must be geared towards the selling of the institution to
present and future clients and stakeholders.
A) 5W+H heuristic
What/How (the physical and virtual interface components. For example, I/O devices,
windows, icons, etc.)
The website will be viewed through a PC or Mac using a standard browser (v4+). Navigation
and selection will be performed using a standard mouse and keyboard. Speakers will be
necessary to hear some of the animated multimedia presentations contained within some of
the pages. Many brochures will be presented for downloading in PDF format: it is assumed
that most users will have the option of printing the documentation for reading away from the
computer screen.
The different areas of the site will be accessible by;
A menu based navigation system combining 6 -8 top menu items with submenus of
no more than six clickable links that appear in drop down style with the mouseover
event.
A search engine, programmed to perform fuzzy matching with possible misspelled
word, and linked to a database of page descriptions
Where/When (physical environment: the differences between office, portable, wearable
systems.)
The site will be visited by users in a home or work environment, perhaps in preparation for a
visit to the campus, or simply to help in the choice of universities and courses. A version of
the site will be compatible with smaller mobile devices (iPad and iPhone). The site will be
accessible at any time of day. Visit to the site will probably rise during the two major
enrollment periods of the year.
Who/Why (the types of tasks and skill sets required)
It is expected that the vast majority of visitors will be school leavers, currently enrolled
students and the parents or friends of both. The main task set by visitors will concern locating
and perhaps printing data that helps them make informed choices about their tertiary studies
B) Interaction Paradigm
Internet/Web based network computing. Graphical and multimedia interface interpreted by a
v4++ web browser, delivered over a network to desktop and mobile devices, themselves
controlled by either 1) mouse and keyboard or 2) by touch screen and keyboard.
22
C) Physical Computing Environment
The physical computing environment is, strictly speaking, the 300 million or so personal
computers, kiosks and mobile devices that are connected to, and form, the Internet. Since
this largest ever engineering feat is spread out geographically and offers content delivery for
a variety of output devices and screen sizes, it is not possible to define the physical
computing environment as a single, universally shared experience. Users may be sitting on a
bus or walking down the street (iPad or iPhone) or at home with a 17 inch screen, at work
with a 21-inch screen, or in a public library: the amount of physical space and the quality of
the experience depends on the physical environment of each individual user. Typically, the
user will be at home, at a workstation that may or may not be cluttered with high school
leaving certificate text books.
References
Heim, S. (2008) The Resonant Interface. Pearson. Boston, USA.
Laureate Online Education (2008) HCI: Seminar 2 [Online]
Chapter 3
Discovery methods for HCI
In chapter 3, we will explore the discovery phase framework in HCI for interface requirements
definition. Data collection methods will be explored in detail. Task analysis will be covered as
the base for requirements discovery. Documentation techniques of HCI requirements will be
included in this seminar.
Requirements Discovery phase
Requirements discovery phase includes different techniques to be used by HCI designers to
identify interaction requirements from the users of the HCI. As part of this requirements
discovery, it is important to learn more about the user in the environment in which he or she
would be using the interface. In order to learn about the user, it is important to identify the
data collection methods that will be used to gather data that would reveal user‘s behaviours
and preferences.
23
This data collected needs to be organized and transformed into requirements that can be
used for the HCI design. This takes different techniques such as task analysis, use cases,
primary stakeholder profile and storyboarding which will be covered in this lecture. The result
of this phase is a requirements definition document that balances the needs of the user, the
business, and the technical necessities.
Methods of Collection
Data gathering is an important part of the requirements discovery process in interaction
design. Data collection includes observation and elicitation methods. Observation methods
allow the designer to immerse themselves in users‘ environment in their day-to-day activity
by watching them but users don‘t participate directly with the HCI designer. On the other
hand, elicitation methods require user‘s participation and include direct and indirect methods
such as interviews, focus groups, and questionnaires.
Direct Observation
This occurs when a field visit is conducted during the interaction design. Observation is a
requirements discovery technique wherein the HCI designers either participates in or
watches a person perform activities to learn about the interaction.
Before observation can be used in discovery, three minimum conditions set out by Tull and
Hawkins (1993) need to be met:
The data has to be available for observation
The behaviour has to be repetitive, frequent, or otherwise predictable
An event has to cover a reasonably short time span.
Through observation, it is possible to describe what goes on, who or what is involved, when
and where things happen, how they occur, and why things happen as they do in particular
situations (Jorgensen 1989). A great deal of time is spent on paying attention, watching and
listening carefully (Neuman 1994). The observer uses all the senses, noticing what is seen,
heard, smelled, tasted and touched (Neuman 1994; Spradley 1979).
According to Neuman (1994), there are four possible research stances for the participant
observer:
Complete participant: the researcher operates under conditions of secret
observation and full participation.
Complete observer: the researcher is behind a one-way mirror or in an invisible
role that permits undetected and unnoticed observation and eavesdropping.
Participant as observer: the researcher and members are aware of the research
role, but the researcher is an intimate friend who is a pseudomember.
Observer as participant: the researcher is a known, overt observer from the
beginning, who has more limited or formal contact with members.
Whitten et. al (2000) suggested the following points when observing in the requirements
discovery.
Determine the who, what, where, when, why, and how of the observation.
Obtain permission from appropriate supervisors or managers.
24
Inform those who will be observed of the purpose of the observation.
Keep a low profile.
Take notes during or immediately following the observation.
Review observation notes with appropriate individuals.
Don't interrupt the individuals at work.
Don't focus heavily on trivial activities.
Don't make assumptions.
Interviews
Interviews are a requirements discovery technique whereby the interaction designer collects
information from individuals through face-to-face interaction.
Unstructured and open-ended interviews are with only a general goal or subject in mind and
with few, if any, specific questions. The interviewer counts on the interviewee to provide a
framework and direct the conversation.
The goal is to elicit the respondent‘s views and experiences in his or her own terms, rather
than to collect data that are simply a choice among pre-established response categories
(Anderson et al. 1994). Secondly, the interview is not bound to a rigid interview format or set
of questions that would be difficult to establish given the nature of the research and will limit
the results (Anderson et al. 1994).
In structured and close-ended interviews the interviewer has a specific set of questions to
ask of the interviewee. Closed-ended questions restrict answers to either specific choices or
short, direct responses.
Whitten et. al (2000) suggested the following list of activities that could be used when
preparing interviews:
1. Select Interviewees
2. Prepare for the Interview with specific questions the interviewer will ask the
interviewee.
3. Conduct the Interview
4. Follow Up on the Interview
Questions should not be leading or loaded. It is important to use consice and clear language
and avoid any bias as an interviewer. Keep the questions short and to the point and avoid
any intimidating questions.
Focus Groups
Focus groups are a process whereby highly structured group meetings are conducted for the
purpose of analyzing problems and defining requirements. Focus groups are a subset of a
more comprehensive joint application development or JAD technique that encompasses the
entire systems development process.
Focus groups require a facilitator role. Facilitators encourage user and management
participation without allowing individuals to dominate the session. They make sure that
attendees abide by the established ground rules for the session, encourage group
consensus and keep the session on schedule.
25
Focus groups actively involve users in the interaction design and this improves their
acceptance and reduces the risk of resistance at the implementation stage. They reduce the
amount of time required to design interactions.
Brainstorming
It is similar to focus group but more informal and use for generating ideas during group
meetings. Participants are encouraged to generate as many ideas as possible in a short
period of time without any analysis until all the ideas have been exhausted.
Questionnaires
Questionnaires are special-purpose documents that allow the interaction designer to collect
information and opinions from respondents. Questionnaires can be in a free or fixed format.
Free-format questionnaires offer the respondent greater latitude in the answer. A question is
asked, and the respondent records the answer in the space provided after the question.
Fixed-format questionnaires contain questions that require selection of predefined responses
from individuals and are normally composed of multiple-choice, rating or ranking questions.
Whitten et. al (2000) proposed the following activities when performing data collection with
the use of questionnaires.
1. Determine what facts and opinions must be collected and from whom you should get
them.
2. Based on the needed facts and opinions, determine whether free- or fixed-format
questions will produce the best answers.
3. Write the questions.
4. Test the questions on a small sample of respondents.
5. Duplicate and distribute the questionnaire.
Data collected needs to be interpreted in order to identify the requirements for the design of
the HCI. The following tools will be covered for data interpretation:
1. Task analysis
2. Ishikawa diagram
3. Use cases
4. Story boarding
5. Primary stakeholder profiles
Task Analysis
A task is as a set of activities that change the system from an initial state to a specified goal
or desired outcome state. The outcome may involve a significant change to the current state,
so we split tasks into a sequence of subtasks, each more simple than the parent task. This
process continues until the most primitive subtask is reached. This lowest level subtask is
variously referred to as an action, simple task, or unit task. Task descriptions are often used
to envision new systems or devices
Task analysis is used mainly to investigate an existing situation. It is used to determine
functionality by distinguishing the tasks and subtasks performed. Particular attention is paid
26
to frequent tasks, occasional tasks, exceptional tasks, and errors. Identifying goals and the
strategies (combinations of tasks) used to reach those goals is also part of a good task
analysis. By conducting a task analysis, the designer learns about the sequences of events
that a user may experience in reaching a goal (Diaper 1989).
Rees et al. (2001) propped a list of activities in order to conduct task analysis and are
described below:
1. Gathering information from observation of and/or consulting with users
2. Representing tasks in a task description notation
3. Performing an analysis of the task descriptions to achieve an optimum description
4. Using the task representation to produce a new user interface design or improve an
existing one
The most popular technique used for this type of analysis is the Hierarchical Task Analysis
(HTA) tool. It involves breaking a task down into subtasks, then sub-sub-tasks and so on.
These are grouped as plans which specify how the tasks might be performed in practice. It
focuses on physical and observable actions and includes looking at actions not related to
software or an interaction device. Start with a user goal which is examined and the main
tasks for achieving it are identified.
In order to demonstrate the use of HTA, let‘s use an example of a task analysis for borrowing
a book from the library. The set of tasks and subtasks for borrowing the book from the library
is presented in figure 1.
1. Walk to the library
2. Search for the book
2.1 Access the library‘s catalogue computer system
2.2 Access the search book screen
2.3 Enter the in the search criteria the book title and author
2.4 Locate required book
2.5 Take note of the book‘s location
3 Walk to the book‘s location
4 Take the book and walk to the checkout counter
Figure 1 HTA for borrowing the book from the library
27
0. Borrowing the
book from the
library
1. Walk to the library
2. Search for
the book
3. Walk to the book’s
location
4. Take the book and
walk to the checkout
counter
2.1 Access the
library’s catalogue
computer system
2.2 Access the search
book screen
2.3 Enter the in
the search criteria the
book title and author
2.4 Locate required
book
2.5 Take note of
the book’s location
Figure 2 Graphical HTA for borrowing the book from the library
More examples on how to use this tool can be found in Hierarchical Task Analysis links
section at the end of this lecture.
Ishikawa diagram
The Ishikawa diagram is a graphical tool used to identify, explore, and depict problems and
the causes and effects of those problems. It is often referred to as a cause-and-effect
diagram or a fishbone diagram. This tool is used by designers in order to identify problems
with the interaction that could be tackled with the new design.
An overview of this tool and examples can be seen at
http://www.mindtools.com/pages/article/newTMC_03.htm.
Use Cases
One of the most popular and successful approaches for documenting business processes,
events and responses is a technique called use cases developed by Dr. Ivar Jacobson
(Jacobson et al. 1993). Use cases describe the business process, and document how the
business works and the business goals of each interaction with the system. These use cases
are then extended to show how the human interaction will support the business goals.
The interactions within the use case should be contained, initiated and seen through to
completion by an actor. The use case should further result in achieving a business goal and
leaving the system in a stable state (Reed 2002). The nature of a use case is to define the
"what" of a system.
An actor represents anything that needs to interact with the system to exchange information.
An actor is a user, a role, which could be an external system as well as a person.
Benefits of use cases are highlighted by Witthen et. al (2000):
• Facilitates user involvement.
28
• A view of the desired human interaction‘s functionality from an external person‘s
viewpoint.
• An effective tool for validating requirements.
• An effective communication tool.
A good example on how to document HCI requirements by using use cases can be found at
http://genben.com/haojie/HCI/HCI_Requirements.doc.
Storyboards
Movies studios create storyboards that show the various scenes of a potential film,
particularly an animated film. A storyboard puts ideas on paper and then puts the papers in a
certain sequence to provide a concept of how the film will play out. It also gives the
production team an opportunity to look at the concept and make suggestions for improving
the film before it takes its final form.
In user interface design, there is a more interactive version of storyboarding called paper
prototyping. Paper prototyping involves creating a paper version of a software program,
hardware product, or Web site so you can learn how users interact with the design before
you develop the product. This paper prototype involves using a series of images that can be
animated, used to describe a work flow for a human computer interaction. They can facilitate
the process of task decomposition and the identification of interface requirements since they
help to visualize existing work flows.
A good article about paper prototyping can be found at
http://www.uie.com/articles/paper_prototyping/.
Primary Stakeholder Profiles
The HCI design includes four distinct stakeholder groups (Donoghue, 2002):
Users
Engineers and designers
Sales and marketing personnel
Managers
Users are the primary stakeholders since the use the design directly. Engineers and
designers are secondary stakeholders since they supply input or receive output for the
design. Managers are facilitators since they help to maintain the design. Sales and marketing
personal are indirect stakeholders since they are affected by the design but they don‘t have
direct contact with it. Users expect to have a successful experience with the user interface
(UI) the first time around. Because the users are the people who determine whether
something is useful, the characteristics of your users will go a long way toward determining
what is actually usable. However, users look for some general goals when they use an
interface (Donoghue, 2002):
The UI must be easy to learn.
The UI must solve the user's needs.
The UI help must be both easily accessible and effective in resolving the user's
problem quickly.
29
Defining a user‘s profile is an essential prerequisite for designing a HCI. The user profile will
influence the design and evaluation of an interface. Badre (2002) suggested the following
activities to generate a user profile:
1. Identify the relevant individual differences.
2. Identify and specialize the cognitive processing capabilities and limits.
3. Generate audience definition and categorization.
Individual differences can be grouped into four categories (Badre 2002):
1. Knowledge, experience, and skill: Individual users may differ in level and type of
education as well as in their knowledge, experience, and skill levels. There are
several key factors in this category that are determinants of a user's performance.
These factors describe the cognitive abilities and styles of projected users as well as
their knowledge and experience of the projected HCI‘s domain.
2. Personality factors: Affect the ease of user acceptance for interacting with and
navigating a HCI. Such attributes as tolerance level and motivation should indicate
how much time users will spend trying to use the new HCI to perform a transaction
before giving up.
3. Physical and demographic attributes: Demographic attributes with implications for the
design of a HCI are age, gender, salary, and mobility. An audience definition
statement should take into account factors related to physical capabilities and
limitations. Issues that might affect design include the use of glasses
(nearsightedness, bifocals), left- and right-handedness, auditory devices, and other
visual and motor aids.
4. User levels: The designer should take into consideration the users' varying levels of
expertise with the computing environment used for the HCI. Level can range from
novice to master level.
The usability effectiveness of designs depends in great part on their compatibility with the
user's information-processing capabilities and limitations. Designers must take into account
the users' cognitive and perceptual limits and how people are likely to process information in
an interactive environment. There are some basic universal human information-processing
characteristics, which affect the way people store, remember, and manipulate information,
which in turn have implications for HCI design. For example, if the user has selective
attention, this means both creating designs that draw user attention to a particular screen
location and optimizing the ease of locating displayed information such as using a unique
bright color to draw attention to a displayed link can increase the chances that it will be
noticed before other links.
Generating an audience profile means generating a document that specifies the relevant
characteristics, the range and frequency values of the identified characteristics, and how this
specified information might impact design decisions.
User profiles can be also seen from the marketing point of view. Eisenberg and Eisenberg
(2006) discussed the creation of primary stakeholder profiles in terms of marketing, which
essentially means to persuade the user that the interface is worth using. Profiles connect
three different dimensions of information:
30
Demographics: This segments some of the persona features. For example,
demographic data shows such data as the user's gender, location, and income.
Psychographics: This segments some of the persona needs and determines
questions that each persona may ask. For example, a spontaneous type and a
competitive type will ask different questions and will want different types of
information.
Topology: This allows you to segment by determining how complex the persuasion
process is; that complexity is based on a customer's perceptions and experiences.
Regarding the topology dimension, Eisenberg and Eisenberg mapped a four-dimension
model for the process of persuasion in sales:
Need: This is the urgency that a user feels for a product or service.
Risk: This is the amount of risk the user is willing to accept regarding such features
as a career or self-esteem.
Knowledge: This is how much knowledge the user has about the product, which can
affect need and risk. For example, if someone feels he doesn't have enough
information about a product or service, the risk factor for that user is higher.
Consensus: This is the understanding during the persuasion process of how many
people need to be convinced and when.
Marketing analysis and existing competition
Marketing plays an important role when defining HCI requirements. Designers need to take
into consideration competition and existing technologies when defining requirements in order
to build competitive interactions. Users are driving the marketing and acceptance of user
interfaces therefore it is important to make every effort to find out market demographics. A
marketing analysis for defining requirements of the HCI can be done by using the techniques
suggested by Cooper and Reimann (2003):
Reviews of competing products.
Reviews of market research, such as computing media Web sites and technology
white papers.
Researching market demographics in the area that the HCI will be used. That
research can include analyzing demographic, geographic, or behavioral variables to
see if any patterns emerge.
Documenting HCI requirements
Requirements need to be documented after they are discovered by the HCI designer. A
requirements definition document should consist of the following according to Whitten et al.
(2000):
1. The functions and services the system should provide.
2. Nonfunctional requirements including the system‘s features, characteristics, and
attributes.
3. The constraints that restrict the development of the system or under which the system
must operate.
4. Information about other systems the system must interface with.
31
Heim (2007) proposes that the formal discovery documentation should include:
1. Mission Statement
2. Requirements Document
3. Project Management Document
4. Usability Guidelines
Summary
The discovery of requirements phase was defined and the different components required to
discover requirements were included in this lecture. The observation and elicitation data
collection methods used in the discovery phase were explained in the context of HCI. Data
interpretation mechanisms were covered and included task analysis, ishikawa diagrams, use
cases, story boarding and primary stakeholder profiles. Marketing analysis as a baseline to
develop competitive HCI designs was emphasized. The main components when
documenting HCI requirements were highlighted and discussed.
References
Anderson, J.G., Aydin, C. E., & Jay, S. J. 1994, Evaluating Health Care
Information Systems: Methods and Applications. Sage publications, USA.
Badre, A. 2003, Shaping Web Usability: Interaction Design in Context, Addison Wesley
Professional.
Bell, J. 1992, Doing your research project, Milton Keynes: Open University Press, UK.
Benbasat, I., Goldstein, D. & Mead, M. 1987, ‗The Case Research Strategy in Studies of
Information Systems‘, MIS Quarterly, vol.11, no.3, pp 368-386
Cooper, A. & Reimann, R. 2003, About Face 2.0,Wiley Publishing, Indianapolis, IN.
32
Diaper, D. 1989, Task Analysis for Human-Computer Interaction. Hillsdale, Chichester, UK,
Ellis Horwood.
Donoghue, K. 2002, Built for Use, McGraw-Hill, New York.
Eisenberg, B. & Eisenberg, J. 2006, Waiting for Your Cat to Bark?, Thomas Nelson, Inc.
Nashville, TN.
Heim, S. 2007, The resonant interface, Addison-Wesley, Boston MA.
Rees, M., White, A. & Bebo, W. 2001, Designing Web Interfaces, Prentice Hall.
Reed, Jr, P.R. 2002, Developing Applications with JAVA and UML, Addison-
Wesley, Boston.
Stake, R.E. 1995, The art of case study research, Sage publishing, California, CA.
Jacobson, I., Christerson, M., Jonsson, P. & Overgaard, G. 1993, Object-oriented Software
Engineering: A Use Case Driven Approach, Addison-Wesley, Wokingham, Englad.
Jorgensen, D. L. 1989, Participant observation: Methodology for human studies, Sage
publications, Newbury, CA.
Tull, D. and Hawkins, D. 1993, Marketing Research: Measurement and Method,
Macmillan Publishing Company, New York, NY.
Neuman, W.L. 1994, „Sampling‟, in Social Research Methods, Allyn and Bacon, Boston.
Whitten, J. L., Bentley D. L. & Dittman K.V. 2000, Systems Analysis and Design Methods,
McGraw-Hill, New York
Discussion questions
1. Choose a task that involves multiple people and provide a use case for the task. This
may be something that is performed at work or in an academic department. It must be
large enough to provide an opportunity to create the Use Case.
2. Discuss some of the ways users can be involved in the design process.
3. Compare and contrast the methods used for observation and elicitation. Discuss what
they are best suited for, when they should be applied and what results can be
expected.
33
4. Choose three typical computing tasks that you perform regularly. Provide a Task
Decomposition for each task and then provide an HTA of these same tasks.
Activities
For this chapter, you will continue with your interaction design project. You will be
responsible for the submission of a document that defines the following discovery activities:
The project stakeholders
o Primary
o Secondary
o Facilitator
o Indirect
Marketing analysis and existing competition
34
The methods of data collection that will be used to discover requirements and all
documents required to perform the observations and/or elicitations (questionnaires,
surveys etc.)
Documents pertaining to the interpretation activities. Given the time constraints, you
will not be able to execute your data collection plan so in this section you should
describe (in general) the expected users, their work contexts, and what they will use
the envisaged HCI for with the help of the tools below.
o Task Analysis
o Use Cases
Tentative list of requirements. In this section, you will be required to create a tentative
list of requirements based on your task analysis and use cases. From the task
analysis and use cases, extract the major HCI requirements and prioritize them into
a) absolutely must include; b) should include; and c) could include. Each category
should be accompanied by a discussion as to why items were placed in that category.
Activities sample solution
The marketing department has been given the task of redesigning from scratch a technical
university‘s website in order to raise the public profile of the institution its courses and
facilities, and attract more enrolment applications. All design elements, content, and
functionality must be geared towards the selling of the institution to present and future clients
and stakeholders.
The project stakeholders
The following stakeholders will be called upon for authorisation, input or feedback during the
design process, including usability testing, and also for a period to be defined after the live
launch.
• Primary
The primary stakeholders in the website. The users, namely
• Secondary
The engineers and designers, namely
• Facilitator
The managers
• Indirect
Sales and marketing personnel
Marketing analysis and existing competition
a) The methods of data collection that will be used to discover requirements
Research by websites of competitors
Online research coupled with a checklist of features to be filled out while surfing
Questionnaires
Especially for research into the demographics of these future users (gender, location,
income, interests). Questionnaires will be aimed at eliciting behavioral and
demographic information about users based on existing first year candidates.
Question should include level of accessibility to internet in the home, the type of
screen and browser used, as well as questions about the ease and comfort of surfing
the web, which would include questions about family size, where the computer is
located and if printer access is easy (many of the students applying come from very
large families where an uninterrupted and comfortable website experience may not
be possible, even if the household is well-equipped technologically)
35
Focus groups/ Brainstorming
With representative from all stakeholder groups
Interviews
Interviews with marketing department, student services, curriculum unit, student
representatives ―What could the website do to attract the interest of high school
leavers and other candidates for enrollment?‖
Direct observation
Preferably conducted on campus using visitors to the student information centre selected at
random and asked to use the website to accomplish a set of predefined tasks. Preference
will be given to users who have not as yet seen the website
b) all documents required to perform the observations and/or elicitations
(questionnaires, surveys etc.)
Forms will be designed to collect feedback. Some will be online and collaborative, for
example the feedback from existing staff members will be placed on the University‘s intranet
and allow for editing:
Name
Faculty/Department
Feedback, Alterations, Suggestions
John Doe
Marketing & Liaison
On all pages where we talk about application fees –
the fee should be clearly indicated to avoid the
impression that it is free.
Other forms will be on paper, either for direct filling out by stakeholders, or for recording data
during interviews
The expected users
The targeted users are young Bahraini school leavers, both male and female, who have
experience using the internet to find answer to their questions. They are acquainted with up
to date computer graphic designs and are not easily impressed. However, they may not have
state of the art printers, screens or PCs so care should be taken to avoid slowness of
downloaded elements (e.g. a 6MB PDF is to be avoided if at all possible). They have many
different personality types though will all share a desire to pursue studies that are interesting,
fun, in an environment that they will find stimulating both intellectually and socially, and
enrolled in a programme that is likely to lead them to a well paid and interesting job upon
graduation. Most of them will be in the middle of their final school exams and would enjoy a
website experience that lifts them out of pre-exam stress, promising a type of learning
environment that is mercifully different from their current high-school. Many will see entry into
a university degree programme as a rite of passage, a first taste of adulthood and greater
freedom. All of these factors must be impressed on the technicians and graphic designers of
the future website.
• Task Analysis
Task: obtaining a paper version of a degree programme booklet
1 Go onto university website
2 Search for the desired programme
2.1 Access the search engine of tree menu under Programmes/Courses
2.2 Select the desired programme
2.3 Scroll down to printer icon for booklet
3 Click on link to printer friendly or PDF version of booklet
4 Go to printer and staple pages together
• Use Cases
36
Use cases will be created to analyse current business processes with a view to taking some
if not all of the interactions onto the website. Certain issues may surround the creation of
online versions for the taking of ID photos or the paying administrative costs, and they will
have to be weighed for pros and cons.
The example case will be: Applying in person for enrolment at the university. The actors are:
a) Future Student (hereafter: Student)
b) Clerk 1
c) Cashier
Steps/Phases in the Use Case:
1. Student goes to website for list of necessary documents
Student needs to ensure that the visit to the university will not be a waste of time. This
means that research needs to be done into the eligibility of the student for entry into a
programme , ensuring that an exhaustive list of necessary documents is known ahead of
time so that a key item is not missing, thus making the process unable to be completely
performed. The website will provide a map and instructions how to get there
2. Prepare documents: ID, school record etc
3. Go to Student service centre reception and take a ticket and wait for number to come
up on electronic display. The main point of entry is where Student explains purpose of visit
and is directed to the appropriate room for processing
4. Go to desk number 1 and ask for form to full out: After waiting for number to appear,
final verification of eligibility based on nationality and academic record is confirmed and clerk
checks that Student has all necessary items for complete processing. In case of missing
items Student is directed to coin operated photocopier. In case of absence of key document
like ID, Student is told to return at later date equipped with said documents
5. Fill in form: using a pen, Student provided all required information (contact details,
resident permit number, student records etc)
6. Student returns to desk 1 (without having to take another number) and hand over
completed form, photo, and copies of documents
7. Payment: Student takes form and bill print out to cashier and pay.
8. Student goes to waiting room and waits for name to be called
11. Clerk 1 finishes processing and uses computer program to generate an official receipt
of application form. Clerk 1 signals to Student that receipt is ready
12. Student Go to desk and picks up receipt.
Tentative list of requirements.
1. The functions and services the system should provide.
The site must (absolutely) provide:
as much information about the university as possible, all in a clear and easy to read
format
clearly indicated access to printer friendly versions of information
easy to fill in online data collection forms with instant feedback
payment system built into the application for enrolment section for those wishing to
settle application fees by credit card
online versions of processes that currently require a candidate to visit the University
in person. This will require analyses of existing tasks that have the potential to
become online applications. For example the current process for inquiring as to
eligibility could be transformed into a Wizard-like interaction style based on the
following flow chart:
37
2. Nonfunctional requirements including the system’s features, characteristics,
and attributes.
The system should include easy to access information about:
Eligibility for enrolment
How to enrol
The programmes on offer
Student life
Address
Job Vacancies
How to get there by various means of transport
Address and contact information
University mission statement
3. The constraints that restrict the development of the system or under which the
system must operate.
There will be the usual constraints linked to development of any website, namely, the use of
large graphic files should be limited to allow for shorter download time and ease of
navigation. Users will spend on average three seconds waiting for a page to load: beyond
that, they are likely to leave the site and check the competitor‘s website. It is likely that school
leavers will not all have fast broadband connections. What graphic designers and animators
consider to be a major selling point (i.e. impressive displays of Photoshop or animation
dexterity) could in fact prove detrimental to the well-being of the site and therefore the
institution. Design and development tricks should be used to create an attractive interface
that is fast loading. This will involve the deliberate choice of elements that can be recycled as
objects.
4. Information about other systems the system must interface with.
38
The website must be integrated with certain existing systems and become the launch pad for
interrelated online activities. The will be a portal dimension to the website, with quick links
offered to authorized users to the university‘s intranet, including Learning Management
system like Moodle and a campus management system like Banner (Oracle) all operating on
different servers
39
Chapter 4
Interface and interaction design
In chapter 4, we will learn the user-centered design paradigm. Interaction design models are
introduced. Interface design standards, conceptual design and design principles are
included. Interface components as windows, icons, menus and pointers and other
components will be included in this chapter.
Conceptual Design
After the requirements discovery phase is completed, the design phase uses the
requirements in order to create conceptual and physical designs. In this lecture, the
conceptual design will be covered in detail.
Conceptual design is the creation of alternative design ideas. At this stage, a description of
the proposed system is presented in terms of a set of integrated ideas and concepts about
what it should do, behave and look like.
The conceptual design follows requirements analysis but precedes the physical design. It
helps to determine functions, operations and features and the workflow of the interface. It
also allows the designer to identify inputs and outputs and the style of the interaction.
Several tools for conceptual design will be introduced here including brainstorming, card sort,
personas, scenarios, semantic networks and cognitive walkthroughs.
Brainstorming
These are sessions with your project team that will help to uncover ideas that your team can
implement now or sometime later. Brainstorming sessions should be centered on a topic. For
example, a brainstorming session can center on what user interface elements will meet
specific goals. (Cooper & Reimann 2003)
Participants are encouraged to generate as many ideas as possible in a short period of time
without any analysis until all the ideas have been exhausted.
Card sort
Card sorting is normally performed with the use of small paper cards that are usually lined.
Each card represents one screen and these cards can be shown easily on a table or the wall
in order to represent multiple screens. Thread or lines within the cards indicate sequences or
hyperlinks. They are used often in web design but can also be used in any design that
involves multiple screens.
Card sorting is an excellent way to explore work flow without having to create a detailed
screen design. However, they have limitations since it is hard to explore elements that are
not included in the cards such as icons or other interface elements.
Scenarios
40
Scenarios can be used to express proposed or imagined situations that describe the different
tasks a person would need to do in order to accomplish a specific goal with the design. They
are used throughout the design process as scripts for user evaluation of prototypes and for
co-operation among designers involved in an interaction project.
In creating such scenarios, a designer specifies interface objects and actions for given
contexts from the perspective of the user (Badre 203).
To create successful scenarios, Badre (2002) suggested to answer the following questions.
1. Where and under what conditions will the system be used?
2. For what purpose will the system be used?
3. Who will use the system (the target audience)?
4. How will the system be used?
Scenarios provide a fast and effective way to imagine the design concepts in use. They are
simple stories about what it would be like to use the interface once it has been made and the
protagonists of these stories are the personas (Saffer 2006).
Semantic Networks
Semantic networks are an excellent way to represent concepts associations in interaction
design. Rees et. al (2001) mentioned that the human thought is basically nonlinear and that
the human learning and perceptual process is essentially organized as a semantic network in
which concepts are linked together by associations. In few words, human learn and
remember through nonlinear associations. The fundamental components of a semantic
network are:
Nodes: Representing concepts
Links: Representing the relationships between nodes.
In a semantic network a node is defined as a single concept or idea. Nodes can be virtually
any kind of information such as text, graphics, animation, audio, video, images, programs,
and so on. Nodes can be "typed," indicating how they are used. For example, if a node in a
Web-based hypertext system is designated as the "home page," there is the implication that
that node will be used in a specific way to traverse that system (i.e., it is the node where
readers will begin).
Nodes are connected to other nodes with links. The role of a link is to connect related
concepts or nodes. Links are bidirectional, meaning that a reader can go backwards and
forwards.
Like nodes, links can also be "typed," illustrating features of the relationship of the nodes
they connect. For example, a link might reflect some relationship between nodes such as
parent–child. (Rees et. al 2001).
A tool that might help in organizing a semantic network (or a brainstorming session) is
41
Free mind (http://freemind.sourceforge.net/wiki/index.php/Main_Page).
Cognitive walkthrough
Cognitive walkthrough is a technique that involves a group of users that evaluates a human
interaction by going through a set of tasks. The user interface is presented as a paper
prototype to the evaluators and they follow the various scenarios of the interaction. The input
to the walkthrough includes the user profile, especially the users' knowledge of the task
domain and of the interface, and the task cases. The evaluators may include human factors
engineers, software developers, or people from marketing, documentation, etc.
.
Zhang (2008) identifies the following questions required to design the walkthrough:
Who will be the users of the system?
What task(s) will be analyzed?
What is the correct action sequence for each task?
How is the interface defined?
Dix et. al (1998) mention that for each task in the walkthrough the evaluator should consider:
What impact will interaction have on user?
What cognitive processes are required?
What learning problems may occur?
Does the design lead the user to generate the correct goals?
Personas
Personas are profiles of the users that interact with a HCI These profiles describe user
characteristics such as user expertise, user motivation, user job functions and the impact of
the interaction in the user‘s job. They help the designer to understand who will be using the
interaction in order meet user expectations.
Personas can be created by observing and talking to users. Personas don‘t have to be for a
specific individual but for a set of people that share the same goals. Personas should identify
each persona's desires and the expectations, behaviors, attitudes, biases, and other factors
that affect them.
A set questions that could be helpful to create a persona are identified by Hackos and
Redish (1998) as follows:
Do you like your work? Why or why not?
What motivates you in your job?
Is the database product related directly to your primary job? That is, do you need to
use this product every day to get your job done?
How much do you know about the subject matter you're designing for?
What technical skills and job knowledge do you bring to the job?
How do you approach technology? Do you love it or put up with it?
42
Do you prefer learning from written documentation, or do you prefer online help?
What do you think of the documentation of the current system?
Do you like new experiences, or do you think if it isn't broken you shouldn't fix it?
Personas might use construct context scenarios that describe personas and their activities in
a typical day using the new and improved system, which includes the new user interface.
The scenarios don't discuss the form and function, but only the behaviors of the user and the
interface (Buttow 2007).
Interaction design models
Interaction design models are useful for analyzing and understanding interface design. They
are used to test designs that might be hard to test with real users and prototypes. They can
also be used to document designs. Interaction design models can be predictive or
descriptive. Predictive models can be used to simulate user actions in order to test a design.
Descriptive models are mainly use to document designs and to visualize its logic and
behaviour.
In this lecture the GOMS and Keyboard Level Model (KLM) predictive models will be
introduced. In addition, the state transition and windows navigation diagrams will be covered
as a way to document interactions.
GOMS
The model of goals, operators, methods, and selection rules (GOMS) (Card, Moran, and
Newell 1983) allows to predict how long an experienced worker will take to perform a
particular operation when using a given interface design.
The significance of these model components is:
Goals: Symbolic structures that define states to be achieved, and determine a set of
possible methods.
Operators: Elementary motor or information processing acts, whose execution is
necessary to change any aspect of the user's memory or to affect the task
environment.
Methods: Descriptions of procedures for accomplishing a goal, cast as a continual
sequence of subgoals and operators, with conditional tests on the user's immediate
memory and on the task state.
Selection rules: Elements that allow a choice between two or more methods that can
be used to accomplish the goal.
The GOMS models describes the interaction as a sequence of small, discrete subtasks or
unit tasks. In order to understand this model, an example of a GOMS model for the task of
iconizing a window in an interaction is presented in table 1.
43
GOAL: ICONISE-WINDOW
. [select GOAL: USE-CLOSE-METHOD
. MOVE-MOUSE-TO-WINDOW-HEADER
. POP-UP-MENU
. CLICK-OVER-CLOSE-OPTION
GOAL: USE-L7-METHOD
. PRESS-L7-KEY]
Table 1 GOMS model for iconizing a window
In the model, goals and subgoals are described on bulleted lines, the number of bullets
representing the level of subtask. The model includes the concept of selections that
represents, at the unit task level, the concept that a user often has a choice of actions.
Operators are identified in the description of each task. In the case of the example below, the
GOMS model describes that the user can iconize the application by using the use-close or
L7 method.
Another example is included in table 2. This example models the task of moving text in a
Word processor, in the context of editing a manuscript and is taken from John & Kieras
(2006):
GOAL: EDIT-MANUSCRIPT
. GOAL: EDIT-UNIT-TASK ... repeat until no more unit tasks
. . GOAL: ACQUIRE UNIT-TASK
. . . GOAL: GET-NEXT-PAGE ... if at end of manuscript page
. . . GOAL: GET-FROM-MANUSCRIPT
. . GOAL: EXECUTE-UNIT-TASK ... if a unit task was found
. . . GOAL: MODIFY-TEXT
. . . . [select: GOAL: MOVE-TEXT* ...if text is to be moved
. . . . GOAL: DELETE-PHRASE ...if a phrase is to be deleted
. . . . GOAL: INSERT-WORD] ... if a word is to be inserted
. . . . VERIFY-EDIT
*Expansion of MOVE-TEXT goal
GOAL: MOVE-TEXT
. GOAL: CUT-TEXT
. . GOAL: HIGHLIGHT-TEXT
. . . [select**: GOAL: HIGHLIGHT-WORD
. . . . MOVE-CURSOR-TO-WORD
. . . . DOUBLE-CLICK-MOUSE-BUTTON
. . . . VERIFY-HIGHLIGHT
. . . GOAL: HIGHLIGHT-ARBITRARY-TEXT
. . . . MOVE-CURSOR-TO-BEGINNING 1.10
. . . . CLICK-MOUSE-BUTTON 0.20
. . . . MOVE-CURSOR-TO-END 1.10
. . . . SHIFT-CLICK-MOUSE-BUTTON 0.48
. . . . VERIFY-HIGHLIGHT] 1.35
. . GOAL: ISSUE-CUT-COMMAND
44
. . . MOVE-CURSOR-TO-EDIT-MENU 1.10
. . . PRESS-MOUSE-BUTTON 0.10
. . . MOVE-CURSOR-TO-CUT-ITEM 1.10
. . . VERIFY-HIGHLIGHT 1.35
. . . RELEASE-MOUSE-BUTTON 0.10
. GOAL: PASTE-TEXT
. . GOAL: POSITION-CURSOR-AT-INSERTION-POINT
. . MOVE-CURSOR-TO-INSERTION-POIONT 1.10
. . CLICK-MOUSE-BUTTON 0.20
. . VERIFY-POSITION 1.35
. . GOAL: ISSUE-PASTE-COMMAND
. . . MOVE-CURSOR-TO-EDIT-MENU 1.10
. . . PRESS-MOUSE-BUTTON 0.10
. . . MOVE-MOUSE-TO-PASTE-ITEM 1.10
. . . VERIFY-HIGHLIGHT 1.35
. . . RELEASE-MOUSE-BUTTON 0.10
TOTAL TIME PREDICTED (SEC) 14.38
Table 2 GOMS model for moving text in a Word Processor (John & Kieras 2006)
In this example, the GOMS model includes the time breakdowns for goals and subgoals.
This allows goals and subgoals to be measured and likely user performance predicted. For
the example presented based on the above GOMS analysis, it should take 14.38 seconds to
move text.
Keystroke-Level Model
The Keystroke-Level Model is a simplified version of GOMS and was proposed by Card,
Moran & Newell (1980) as a method for predicting user performance. The model is based on
the concept that the time that it takes the user-computer system to perform a task is the sum
of the times it takes for the system to perform the serial elementary gestures that the task
comprises. Although different users might have widely varying times, the researchers found
that for many comparative analyses of tasks involving use of a keyboard and a graphical
input device, it is possible to use a set of typical times rather than measuring the times of
individuals. By means of careful laboratory experiments, Card, Moran and Newell (1983)
developed a set of timings for different operations. The model includes six operations
including keystroking, pointing, homing, mental preparation and response. The times for
these operations are summarized in table 3 below:
K = 0.2 sec
Keying: The time it takes to tap a key on the
keyboard
P = 1.1 sec
Pointing: The time it takes a user to point to a
position on a display
H = 0.4 sec
Homing: The time it takes a user's hand to
move from the keyboard to the GID or from
the GID to the keyboard
M = 1.35 sec
Mentally preparing: The time it takes a user
to prepare mentally for the next step
R
Responding: The time a user must wait for a
45
computer to respond to input
Table 3 Times for the KLM model operations
An example to demonstrate this model is presented in table 4 and borrowed from Hochstein
(2003). This example considers the text editing task of searching a Microsoft Word document
for all occurrences of a four-letter word, and replacing it with another four-letter word. In the
table below, operations are sometimes concantenated and repeated. For example, M4K
means Mental preparation, then 4 Key presses."
Description
Operation
Time (sec)
Reach for mouse
H[mouse]
0.40
Move pointer to "Replace" button
P[menu item]
1.10
Click on "Replace" command
K[mouse]
0.20
Home on keyboard
H[keyboard]
0.40
Specify word to be replaced
M4K[word]
2.15
Reach for mouse
H[mouse]
0.40
Point to correct field
P[field]
1.10
Click on field
K[mouse]
0.20
Home on keyboard
H[keyboard]
0.40
Type new word
M4K[word]
2.15
Reach for mouse
H[mouse]
0.40
Move pointer on Replace-all
P[replace-all]
1.10
Click on field
K[mouse]
0.20
Total
10.2
Table 3 KLM model for Microsoft Word document for all occurrences
of a four-letter word (Hochstein (2002))
State transition diagrams
State transition diagrams are used to model the details of user-computer interaction at the
automation level. State transition diagrams can be modeled with the use of UML state charts.
The idea of the model is to represent the actions of a finite state machine with no state
memory. This processor may be in only one state at a time. A transition to a different state
is caused by an event or by a condition‘s becoming true. Components of a state transition
diagram are:
• State: where the processor waits for
an occurrence to cause a transition
• Transition: an instantaneous change to another state
Transitions are labeled to show:
• the event(s) which trigger them, and
• the action(s) occurring during the transition.
An event may be constrained by a guard that a condition which must be true for the transition
to occur. Figure 1 shows a partial state transition diagram for the interaction design of a CD
46
player. In the diagram is possible to see the events that allow the user to navigate from one
state to another. For example, if the user presses the play button, the CD will start playing
and remain in a play state. From the play state, it is possible to stop the CD player if the stop
button is pressed and go to the stopped state. From the play state is possible to pause the
CD player if the pause button is pressed and go to the paused state.
Play
Stopped
Paused
Play Pressed / Play
Stop Pressed / Stop Play Pressed / Play
Stop Pressed / Stop
Pause Pressed / Pause Play Pressed / Play
Figure 1 State transition diagram for the interaction design of a CD player
Window Navigation Diagrams
A window navigation diagram models the windows and the navigation
paths between them. This model is a tool used to depict the sequence and variation of
windows that can occur within a session (Whitten et al. 2001). Figure 2 illustrates the
window navigation diagram of a simple application that allows a user to go from the main
menu to a printing or save windows.
.
Main
Menu
M
Save
File
P
Select
Printer
R
M Menu
P Pop up
R Response
Figure 2 Window Navigation Diagram
47
The WIMP interface
Graphical user interfaces (GUI) were introduced in 1984 by Apple when introducing the
Macintosh. However, it is because Microsoft Windows is available on the popular IBM PC
and compatible machines that the use of the GUI has spread around the world to the point
that this has become the standard for desktop computing.
The popularity of Windows resides on the fact that users don‘t need to type commands but
instead use the mouse to click on icons and menus. The mouse is used in Windows by the
user to launch programs and manipulate objects on the screen. These objects were
categorized in four areas that together formed the acronym WIMP: window, icon, menu, and
pointing device.
Window
Windows are areas of the screen that behave as if they were independent terminals and can
contain text or graphics. They can be moved, resized or overlap. Windows can obscure each
other, or can be laid out next to one another. Windows have scrollbars that allow the user to
move the contents of the window up and down or from side to side and title bars that
describe the name of the window
The WIMP interface standard includes a set behaviours that the designer needs to follow
when building interfaces. In any Windows interface, the user can open a window in one of
four ways (Buttow 2007):
Click on an icon on the desktop that links to the program. If the icon is a document,
the program that is associated with the document opens automatically.
Double-click on an icon or link within a window.
Click a menu option in a program. For example, click New from the File menu in
Microsoft Word.
Click on a button or icon in the taskbar or Dock.
Users can move more than one window open at one time and one window might keep
information for different tasks. One way that GUIs keep different tasks within one window is
the multiple-document interface, or MDI. MDI uses tabs to keep track of separate documents
within a window. In one type of MDI interface, you can click on the tab to go directly to that
document without moving to a different window.
One example of a tabbed MDI interface is Internet Explorer 7, which keeps different Web
pages in different tabs. If the window only keeps information of one task in one document,
this window can be classified as a single-document interface or SDI.
A window can also open a dialog box, which is a smaller window designed to have the user
set settings and make decisions. One example of this window is found Microsoft Word when
the user wants to print a document since a print dialog box appears for the user to determine
what printer to use, how many copies to print and other different settings required to print the
document.
48
Windows can be maximized so they fill the user‘s entire screen in order to increase the
working space area or to get full attention of a particular task. The Maximize, Minimize, and
Close buttons appear in the title bar. In Windows, these buttons are on the right side of the
title bar.
Icon
Windows uses metaphors to represent information like a desktop where files are located in
folders and programs and other information can be organized on the screen. These
metaphors are small pictures or images that represent some object in the interface often a
window or action and are known as icons. Icons can represent if windows can be closed
down (iconised). Icons can have various highly stylized or realistic representations and
normally represent many accessible windows and applications available to be launched. Few
popular icons found in the Windows operating systems are shown in figure 3:
Figure 3 Popular Windows icons
Menu
The menu displays a set of choices of operations or services available on the application and
requires option selected with a pointer. However, they require a lot of screen space but they
might be set so they only appear when they needed. Pull-down menus display a menu bar at
top of the screen while pop-up menus appear at a desired location. An example of a pull-
down menu is shown in figure 4 below:
Options
Type Writter
Screen
Times
EditFile Font
Figure 4 Pull-down menu
In order to save space, cascading menus can be used to organize the menu in a hierarchical
structure where a menu selection opens a new menu and this might open another one and
49
so on till the design structure is satisfied. In addition, keyboard accelerators can be used to
use a key combination to have the same effect as menu items. These accelerators are
usually the first letter of the menu item or Ctrl + a letter,
When designing menus, the interaction designer needs to deal with issues such as the type
of menu to use, menu items, how to group items and choice of keyboard accelerators.
Pointer
Windows relies on the mouse, a hardware device used to move a pointer on the screen in
order to perform an action such as dragging or selecting an object. Other pointers include
joystick, trackball, cursor keys or keyboard shortcuts. Pointers can have a great variety of
images in order to represent different states such as normal select, help select, running on
the background, busy and precision select like the ones in figure 4.
Figure 4. Pointer images
Summary
Conceptual design was covered and several tools to support this design were introduced
including brainstorming, card sort, personas, scenarios, semantic networks and cognitive
walkthroughs.
Interaction design models were introduced as useful tools for analyzing and understanding
interface design. The GOMS and Keyboard Level Model (KLM) predictive models were
introduced as tools to describe interaction designs and predict interactions performance. In
addition, the state transition and windows navigation diagrams were covered as tools to
document interaction designs.
Windows, icons, menus and pointers interface components were covered and their
behaviours and standards explained.
References
Ashley, G. 1997, WIMP Interfaces [online] [12th Dec 2007] Available from World Wide Web:
<http://www-static.cc.gatech.edu/classes/cs6751_97_winter/Topics/dialog-wimp/>
Badre, A. 2003, Shaping Web Usability: Interaction Design in Context, Addison Wesley
Professional.
Butow, E. 2007, User Interface Design for Mere Mortals, Addison Wesley Professional.
50
Card, S., Morn, T. P., and Newell, A. 1980, The keystroke-level model for user performance
with interactive systems, Communications of the ACM, 23, pp.396-210.
Card, S., Moran, T. P., and Newell, A. 1983, The Psychology of Human-Computer
Interaction, Lawrence Erlbaum Associates, Hillsdale, NJ .
Dix, A., Finlay., Abowd, G., & Beale, R. 1998, Human-computer interaction, Prentice Hall,
Upper Saddle River, NJ.
Hackos, J. T., and Redish J. 1998, User and Task Analysis for Interface Design. John Wiley
& Sons. New York.
Heim, S. 2007, The resonant interface, Addison-Wesley, Boston MA.
Hochstein L., 2002, GOMS [online] [12th Dec 2007] Available from World Wide Web:
<http://www.cs.umd.edu/class/fall2002/cmsc838s/tichi/printer/goms.html>
John, B. and Kieras, E. 1996, The GOMS Family of User Interface Analysis
Techniques: Comparison and Contrast, ACM Transactions on Computer-
Human Interaction, vol 3 no,4, pp. 320-351.
Rees, M., White, A. & Bebo, W. 2001, Designing Web Interfaces, Prentice Hall.
Saffer, D. 2006, Designing for Interaction: Creating Smart Applications and Clever Devices,
Peachpit Press.
Zhang, Z. 2008, Cognitive Walkthrough, [online] [12th Dec 2007] Available from World Wide
Web: < http://www.usabilityhome.com/FramedLi.htm?CognWalk.htm>
51
Discussion questions
5. Choose a task that involves multiple people and provide a use case for the task. This
may be something that is performed at work or in an academic department. It must be
large enough to provide an opportunity to create the Use Case.
6. Discuss some of the ways users can be involved in the design process.
7. Compare and contrast the methods used for observation and elicitation. Discuss what
they are best suited for, when they should be applied and what results can be
expected.
8. Choose three typical computing tasks that you perform regularly. Provide a Task
Decomposition for each task and then provide an HTA of these same tasks.
52
Activities
For this chapter, you are required to submit a document that defines the personas for the
primary stakeholders
Your are also required to submit evidence of the at least three of the following activities
Brainstorming – Submit evidence of the brainstorming sessions (this may include
digital photos of any multimedia tools such as post-its tacked to a wall)
Card Sort – Submit the cards (or a scan of the cards) and the results of the sorting
sessions
Scenarios – Submit a document that describes the scenarios
Flowcharts – Submit the flowcharts in an electronic format (Visio, Word etc.)
Cognitive Walkthroughs – Submit the results of the walkthroughs (this can be a list of
problems that were discovered)
In addition, choose a particular aspect of your proposed design and create a GOMS and a
KLM analysis. Include all of the possible methods of accomplishing the tasks involved in that
aspect of the design.
Sample Solution Conceptual Design
A document that defines the personas for the primary stakeholders
Local school leavers: Khalid
Attends state school in Hammad Town
does not have a computer
lives in moderate sized house with five brothers and sisters
not much personal space
accesses email internet at friends houses or internet cafes
will judge the quality of a company or institution by the quality of the website
53
wants information quickly
Current students: Zainab
lives with parents and three sisters
Has a portable Macintosh
wishes to study Visual Design and work as a designer in the advertising sector
has three different email accounts, all accessed on line
avid FaceBook user
Descriptive personas
1. Dana is currently five hundred kilometres away, at another university studying
business. Her father is Jordanian, her mother is German. She has tried several
university programmes, including one in Paris, but did not like the teaching style and
approach at any of them, including her current one. She is tired of changing
programmes and when she heard good reports of this university and it‘s more
practical curriculum she decided to find out more.
She uses her lap top with Wi-Fi connection to access her email and to visit two sites
in particular: YouTube and Face Book, on which she spends between three and four
hours a day. She likes the way those sites are organised. She sometimes makes
spelling mistakes in her search criteria but usually this doesn‘t stop her from finding
what she wants. She plans to work in tourism-related business to gain experience
before starting her own company. She will probably make her judgement about the
university based on her session on the website, since she is unable to visit in person.
2. Yusuf is currently head of eServices for a large company. He has been approached
by the university to take on some students as interns. He has heard good reports
about the university and wants to find out a little more about the way the programmes
are taught before agreeing to the request.
He has a Master of Science and has worked in the field of e-Communications project
management for many years.
B) Evidence of the at least three of the following activities
Scenarios
Scenario 1: Download Enrolment form
A school leaver wishes to apply for enrolment at the university
The university requires the prospective student to present themselves physically to student
services with a valid identity card and originals of school records for sighting by university
staff. There is also a long form to complete which can take anything up to thirty minutes to
do. The student would at least like to have the chance of filling out this form beforehand for
two reasons:
questions that require extra research, or unforeseen requests for copies of
documents can be dealt with before hand, removing the need for return visits
time that would be normally spent at the university queuing to request the form and
filling it in would no longer be wasted
54
The student types the address in a search engine, and then clicks the link to the website.
The home page is fast loading and the words ―apply to be a student‖ are indicated clearly
toward the top of the screen.
A link is also provided in the search result if the prospective student should type and even
misspell several keywords relating to enrolment procedures of applications.
The link leads to another page with a link to a printable version of the application document.
The student prints it out and completes the form.
Scenario 2: Access the student intranet
A current student, Sarah, wishes to access the university intranet from an internet cafe and
has forgotten the URL.
The student wants to upload an assignment before deadline in five minutes after which the
upload function will be deactivated.
The student enters the URL for the public website and sees the clearly displayed link to the
login page. The user enters the user ID and password then is directed to a list of
programmes and course that only he or she is currently enrolled in. The upload assignment
link is accessible with only one click and directs the file to turn it in.
Scenario 3: Apply for a job
A foreign teacher, George, has heard of the university‘s recruitment drive and wants to apply
for a position at the university that should be advertised in the Vacancies section.
Flowchart
See attached Visio file
Cognitive Walkthrough
Scenario: Download Enrolment form
1. From the Home Page, click on ―prospective students‖ link
2. From the ―prospective students‖ Page click on ―applications‖ link
3. Click on Download Enrolment form
4. Click on Open Document when PDF has arrived
55
5. Click on print icon or CTRL+P
6. Click OK to Print form
In the next version the form is presented in a sidebar on the home page
1. From the Home Page, click on ―download student application form‖ link to be found in
a side menu
2. Click on Open Document when PDF has arrived
3. Click on print icon or CTRL+P
4. Click OK to Print form
By putting one of the key reasons for visiting the site on the Home Page the user has
achieved to goal in 4 steps and 4 clicks. The first method requires 6 steps and six clicks as it
embeds the desired form link deep in the tree structure of the website, forcing the user to
download many pages large image files.
Other common scenarios that could be developed include:
Scenario 2: Access the student intranet
Scenario 3: Apply for a job
Scenario 4: watch a video about student life
Scenario 5: Contact a programme manger
Scenario 6: find information about a programme including a contact phone number for
the programme manager
For maximum client-centred design to be achieved, it is recommended that quick links to
these goals be clearly identifiable on the home page, probably in a side bar menu rather than
in any drop down mouse- over triggered sub menus.
C) Choose a particular aspect of your proposed design and create a GOMS and a KLM
analysis. Include all of the possible methods of accomplishing the tasks involved in
that aspect of the design.
GOMS for printing a student enrolment form (from Home Page)
. [select GOAL: USE-SEARCH-METHOD
MOVE-CURSOR-TO-SEARCH-BOX
. CLICK-SEARCH-BOX
. TYPE-APPLY-FORM
. MOVE-CORSOR-TO-GO-BUTTON
. CLICK- GO-BUTTON]
. [select GOAL: USE-MENU-METHOD
MOVE-CURSOR-TO-PROSPECTIVE- STUDENTS -BUTTON
56
. CLICK- PROSPECTIVE-STUDENTS-BUTTON]
. MOVE-CURSOR-TO-DOWNLOAD-APPLICATION-FORM-LINK
. CLICK-LINK
. MOVE-CURSOR-TO-PRINT-ICON
. CLICK-ICON
. MOVE-CURSOR-TO-OK-BUTTON
. CLICK-BUTTON]
KLM for printing a student enrolment form (from Home Page)
a) Use menu method
Description Operation Time (sec)
Reach for mouse H[mouse] 0.40
Move pointer to Pros. Students P[menu item] 1.10
Click the Pros. Students K[mouse] 0.20
Move pointer to Download link P[menu item] 1.10
Click the link K[mouse] 0.20
Move pointer to print icon P[menu item] 1.10
Click the icon K[mouse] 0.20
Move pointer to OK button P[menu item] 1.10
Click the button K[mouse] 0.20
TOTAL 5.6
b) Use search method
Description Operation Time (sec)
Reach for mouse H[mouse] 0.40
Move pointer to Search box P[menu item] 1.10
Click the Search box K[mouse] 0.20
Home on keyboard H[Keyboard] 0.40
Specify word ―apply‖ M5K [mouse] 2.35
Hit arrow or enter K[keyboard] 0.20
Reach for mouse H[mouse] 0.40
Move pointer to Download link P[menu item] 1.10
Click the link K[mouse] 0.20
Move pointer to print icon P[menu item] 1.10
57
Click the icon K[mouse] 0.20
Move pointer to OK button P[menu item] 1.10
Click the button K[mouse] 0.20
TOTAL 8.95
58
Chapter 5
Physical design and prototyping
In chapter 5, Physical design techniques and Interaction design guidelines principles are
covered. Interaction design guidelines will be introduced.
Interaction Design Principles
There are many approaches to interaction design, since it can be very subjective, it is
important to take into consideration basic interface design principles that don‘t tell you what
you should build but provide guidance in terms of industry trends and basic characteristic
that users look for when using interactions.
The reality is that is that there is no universal standard when it comes to interface design.
However, it is important that the designers get familiar with different visions in order to make
their own. In this lecture, several guiding principles that have been found to be useful are
covered. The basic deign principles that drive most interaction guidelines are identified by
Rees et al (2001) as follows:
Consistency
Simplicity
Context
Consistency is a property that makes an interaction predictable from the user's perspective.
To be classified as consistent, an interaction must conform to follow some to two basic rules.
First, the interface must show consistency in the labels used for it. For example, the choice of
menu labels and other words used to signify actions must have single meanings with no
scope for ambiguity or never use two different words for the same task. The second rule is
that all user actions must be reversible; in other words, everything must have an "undo"
feature. Any exceptions must be clearly marked for the user with a warning dialog.
Simplicity can be achieved by following the following guidelines (Rees et al 2001):
Show no more than is needed to achieve the desired user goal.
Require a minimum of input from the user.
Keep both the user and the task in focus.
Make important concepts particularly clear.
Use visual representations with direct manipulation (where possible).
The designer should ask if a new feature will make it easier for the user to achieve the
primary goals, or if it is just unnecessary sophistication. For the user, the benefit of a simple
interface is a clean design with visual refinement, no superfluous features, and clear, direct
operations using familiar representations.
Clarity is important to achieve simplicity, this should be embedded at all levels of an
interaction as indicated below (Rees et al. 2001):
Information representation
Organization and naming of interface controls
59
Flow of control (dynamic behavior)
Screen layout
Context refers to ability that the interaction should appear as a sequence of easily identifiable
and distinct interface views. Contextual visibility can be incorporated into an interaction with
three major tools (Rees et al. 2001):
1. What-you-see-is-what-you-get (WYSIWYG). This is technical slang for presenting
information on the screen in the identical form (within display constraints) as it will
appear in other media (such as paper and audio/visual). This includes both text and
images—drawings, pictures, and (given the technology) moving images and sound.
2. Properties. Each visual object possesses a range of attributes (size, shape, color,
and other parameters) that can be controlled by the user. This property information
appears on the screen in property boxes.
3. Dialogs. Whenever small amounts of information (text, number, option, yes/no) must
be solicited from the user, use a minor variation on the interface view known as a
dialog box. This disappears when the input is achieved.
Although these three principles are useful in the design of any interaction, there are many
other more sophisticated principles that have been developed by different researchers and
industry. Three of these examples are found in Table 1 (Shneiderman),Table 2 (Mayhew),
and Table 3 (IBM).
Consistency
All parts of interface use similar words,
sequences of tasks, etc.
Shortcuts
Shortcuts are included for users who are
familiar with the application
Useful Feedback
All user actions have some form of
feedback
Group actions together
Group actions have a start, middle, and
finish
Error Handling
Make the application robust so user cannot
accidentally ―kill‖ it and have simple
methods of handling errors
Back out of actions
Allow users to undo tasks without penalty
User control
Give users control of the application rather
than the application controlling the user
Short-term memory load
Keep displays simple with limited need for
remembering
Table 1. Shneidernan‘s ―Eight Golden Rules of Dialog Design‖ (Schneiderman, 1983)
User compatibility
Know your user – understand the concepts
of cognition
Product compatibility
Keep the UI similar to other products so
the user can immediately be productive
Task compatibility
The flow of the application matches the
activity that which is being performed
Work flow compatibility
The application facilitates the transition
60
between tasks to be completed
Consistency
All parts of interface uses similar words,
sequences of tasks, etc.
Familiarity
The UI includes concepts and vocabulary
that the user is already familiar with.
Simplicity
Make the interface simple
Direct manipulation
Users controls objects on a screen rather
than using language to start some action
Control
UI should be set up to give the user the
feeling of being in control – perhaps with a
toolbox, etc.
WYSIWYG
Whatever the user sees on the screen is
what is printed out in reports
Flexibility
Include various ways of doing things that
accommodate the different level of skills
Responsiveness
All user actions have some form of
feedback
Invisible technology
Hide the technology from the user and
show only what they need to see to
complete a task.
Robustness
Make the application robust so user cannot
accidentally ―kill‖ it
Protection
If users make mistakes, have simple
methods of handling errors
Ease of learning and use
The application is easy to learn, but also is
efficient for seasoned users
Table 2. Mayhew‘s ―General Principles of User Interface Design‖ (Huang, 1997)
Simplicity
Keep UI simple and straightforward
Support
Provide user with a variety of ways to
complete a task and allow them to divide
the work into subtasks
Familiarity
Build on users‘ knowledge of previous
applications
Obviousness
Make objects and how to work with them
intuitive
Encouragement
Make actions predictable and reversible
Satisfaction
Create a feeling of progress and
achievement
Accessibility
Users should be able to access any object
that they need
Safety
Keep the user out of trouble – protect them
when they make errors
Versatility
The UI should allow a variety of interaction
techniques (menus, dialog boxes,
shortcuts, etc)
Personalization
Allow users to customize that interface to
improve their productivity
Affinity
The application should support the user
model – a reasonable representation of the
task to be completed
61
Table 3. IBM‘s ―Design Principles for Tomorrow‖ (Huang, 1997)
Although there are many design principles in the industry and academia, they all have
similarities in terms simplicity, consistency and context.
User Interface Design Guidelines
In the previous section, interface design principles were introduced. In practice, industry is
mainly driven by interface design guidelines that were prepared with the design principles in
mind. These sets of principles and guidelines are constructed by "experts" in the area of
interface design and construction. There are a number of important guides available and few
of the most important are covered in this lecture. The main sources of user interface design
guidelines are the large software houses, the computer manufacturers, and respected
authors in the HCI literature.
One of the earliest attempts to provide a set of guidelines is the work of Smith and Mosier
(1986). They worked for the Mitre Corporation and compiled 944 guidelines. Many of the
guidelines refer to character-based screens, but include many guidelines for the GUI. The
guidelines can be split into six sections that are still valid today:
1. Data entry
2. Data display
3. Sequence control
4. User guidelines
5. Data transfer
6. Data protection
Another important guideline used in industry is the GNOME (Human Interface Guidelines
(HIG) http://library.gnome.org/devel/hig-book/stable/). This document tells you how to create
applications that look right, behave properly, and fit into the GNOME user interface as a
whole. The document covers different aspects such as usability principles, desktop
integration, windows, menus, toolbars, controls, feedback, visual design, icons, user input,
language, checklists and credit.
The Apple Desktop interface developed for the Macintosh computer provides a consistent
and familiar computer environment in which people can perform their many tasks. The Apple
Desktop interface is based on the assumption that people are instinctively curious: They
want to learn, and they learn best by active self-directed exploration of their environment.
Apple produced its design guidelines in a form for all designers to use. Table 4 shows an
abbreviated summary. The complete guideline can be found at
(http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/X
HIGIntro/chapter_1_section_1.html).
Guideline
Comments
Metaphors from
the real world
Use concrete metaphors and make them plain, so that users have a set
of expectations to apply to computer environments. Whenever
appropriate, use audio and visual effects that support the metaphors.
62
Guideline
Comments
Direct
manipulation
Users want to feel that they are in charge of the computer's activities.
See-and-point
(not remember-
and-type)
Users select actions from alternatives presented on the screen. The
general form of user actions is noun-then-verb, or "Hey, you—do this."
Users rely on recognition, not recall; they should not have to remember
anything the computer already knows. Most programmers have no
trouble working with a command-line interface that requires memorization
and Boolean logic. The average user is not a programmer.
Consistency
Effective applications are both consistent within themselves and
consistent with one another.
WYSIWYG
There should be no secrets from the user, no abstract commands that
only promise future results. There should be no significant difference
between what the user sees on the screen and what eventually gets
printed.
User control
The user, not the computer, initiates and controls all actions.
Feedback and
dialog
Keep the user informed. Provide immediate feedback. User activities
should be simple at any moment, though they may be complex taken
together.
Forgiveness
Users make mistakes; forgive them. The user's actions are generally
reversible—let users know about any that are not.
Perceived
stability
Users feel comfortable in a computer environment that remains
understandable and familiar rather than changing randomly.
Aesthetic integrity
Visually confusing or unattractive displays detract from the effectiveness
of HCI. Different "things" look different on the screen. Users should be
able to control the superficial appearance of their computer workplaces—
to display their own style and individuality. Messes are acceptable only if
the user makes them—applications aren't allowed this freedom.
Table 4. Summary of Apple User Interface Guidelines
Other popular design guidelines include Windows Vista User Guidelines
(http://www.microsoft.com/whdc/Resources/windowsxp/default.mspx),
Windows XP - Guidelines for Applications (http://msdn.microsoft.com/en-
us/library/aa511258.aspx) and Osf/Motif Style Guideline (http://www.s-and-
b.ru/syshlp/motif_guide/MotifStyleGuide/TOC.html).
Prototypes
Before the HCI is implemented and tested with users, it is a good idea to prototype the
interaction in order to get feedback from potential users. A prototype is a good tool that helps
to communicate your design idea to your potential users. In general, there are two types of
prototypes: high-fidelity prototypes that look and behave just like the final HCI would and low-
63
fidelity prototypes that can be a simple pencil or digital drawing of the HCI that shows how
this would look but without any dynamic behaviour.
High-fidelity prototypes are fully interactive and feel like the final product. High-fidelity
prototypes have the advantages that can be used for the final implementation of the HCI as
they allow integration with source code and the designer can detect interaction problems that
cannot be identified with static low-fidelity prototypes. However, they require sophisticated
technical skills in graphics design and programming that might not be available at the design
stage of the HCI.
High-fidelity prototypes might be developed with the help of user interface tool kits that are
used to program interactive HCIs. Some of these include Windows Forms, The Apple XCode
toolkit, or the GTK and QT multiplatform toolkits. Tool kits require significant programming
skills and might be difficult to use for a rapid prototype, Visual Interface Builders are better
suited for quick prototypes since they don‘t require complex programming skills, some
examples of this type of tools are Visual Studio .Net and JBuilder. For Web based
applications, there are specialized tools that can be used to product high-fidelity prototypes
such as Dreamweaver and Flash, these tools contain all the web interface components
required to create internet based HCIs.
A demo video of a high-fidelity tool for prototyping can be found at
http://www.altia.com/products_photoproto.php. This tool works with Photoshop and allows
the creation of interactive HCIs and integration at the programming level.
Low-fidelity prototypes are mockups of the HCI either on paper or in a graphics file. For
example, a low fidelity prototype can show how different elements and different pages of a
Web site will look. Mockups are static and lack of any interactivity with the user.
Low-fidelity prototypes include wireframes that are web site page layouts or software window
layouts that show where text, graphics, links, buttons, and other elements will appear on the
page. A wireframe page can include active links to other wireframe pages or windows, thus
providing a more interactive idea of how the pages or windows will work together.
Low-fidelity prototyping provides substantial advantages. Low-fidelity prototype tests produce
substantive user feedback early in the development process and don‘t require complex
technical skills such as programming or graphic design (Snyder 2003).
During this module, you will be introduced to MockupScreens
(http://www.mockupscreens.com/). This is a low-fidelity prototyping tool that can be used to
produce Mockups of the HCI. The tool supports Windows and Web interaction prototypes
and it can be linked to the scenarios that were created last week.
Summary
The basic deign principles: consistency, simplicity and context were covered as the main
framework for more sophisticated interaction design propositions such as the Shneidernan‘s
and Mayhew‘s design principles. Interface design guidelines were covered and some
examples emphasized. Low and high fidelity prototypes were introduced and their
differences highlighted.
64
References
Heim, S. 2007, The resonant interface, Addison-Wesley, Boston MA.
Huang, M. 1997, Design Principles. [online] [12th Dec 2007] Available from World Wide Web:
<http://www.cc.gatech.edu/classes/cs6751_97_winter/Topics/design-princ/>
Rees, M., White, A. & Bebo, W. 2001, Designing Web Interfaces, Prentice Hall.
Schneiderman, B. 1983, Direct Manipulation: A Step Beyond Programming Languages.
IEEE Computer, vol. 16 no. 8 pp. 57-69.
Smith, S. L., & Mosier, J. N. 1986, Guidelines for designing user interface software. Report
ESD-TR-86-278. Bedford, MA: The MITRE Corporation.
Snyder, C. 2003, Paper Prototyping. Morgan Kaufmann Publishers, San Francisco, CA.
65
Discussion questions
1. The Framework for Design Principles is a directed model that focuses on the goal of
Usefulness. Choose three digital information devices and describe the qualities that
make them useful. Then identify the functionality that supports that goal. Finally
describe how the Presentation Filter fosters the Usability goal.
2. Choose three design principles and discuss how they can be applied to support the
goal of comprehensibility.
3. Some application or device interfaces have steep learning curves. Choose one
interface that has a steep learning curve and discuss the reasons for the inherent
complexity and/or difficulty. Describe some ways that might make the interface more
learnable, refer to the appropriate design principles.
4. Look at the icons used in the toolbar of any business application. Using what you find
as examples, discuss why the everyday environment is so important.
5. Why should we look outside of the immediate task for which we are designing a user
interface?
6. Watch the demo of the high-fidelity prototyping tool PhotoProto
(http://www.altia.com/products_photoproto.php). What are the advantages and
disadvantages of using this tool compared with a low-fidelity tool such as
MockupScreens?
7. Identify three existing Web formats that are used by sites from different domains, for
instance news or entertainment. Collect screen captures of at least three examples of
each unique format, create a wireframe of each format (You can use Mockupscreens)
and write a report that describes each format and their relationship with the domain
content. You may argue that these formats do support the domain-specific content
and tasks or you may argue against the format. You may also discuss the pros and
cons together.
66
Activities
For this chapter, you are required to submit a document that contains the low-fidelity
prototypes for the scenarios that were defined in chapter 4. You can use a low fidelity
prototype tool such as MockupScreens (http://mockupscreens.com/).
In addition, use the Apple guidelines summary in table 4 of the lecture and use it as a
checklist against your human interaction design and evaluate it according to the checklist.
Prepare a report with your findings.
Activities Sample Solution
1_Download_Enrolment_Form
67
2_Access_student_Extranet
68
3_Apply_for_Job
69
70
Apple Guidelines
Guideline
Comments
Metaphors from
the real world
Use concrete metaphors and make them plain, so that users have a set
of expectations to apply to computer environments. Whenever
appropriate, use audio and visual effects that support the metaphors.
All three scenarios rely on clearly recognizable hypertext linking
conventions (Blue underlining) and confirmation windows
Direct
manipulation
Users want to feel that they are in charge of the computer's activities.
All three scenarios rely on user initiation of searches though care is
taken to reduce the navigation to a minimum of clicks
See-and-point
(not remember-
and-type)
Users select actions from alternatives presented on the screen. The
general form of user actions is noun-then-verb, or "Hey, you—do this."
Users rely on recognition, not recall; they should not have to remember
anything the computer already knows. Most programmers have no
trouble working with a command-line interface that requires memorization
and Boolean logic. The average user is not a programmer.
All three scenarios offer different sections for the variety of user
requests. The simplicity of the navigation means the top level
navigation is easily remembered as well as being clearly visible
throughout any scenario on the website
Consistency
Effective applications are both consistent within themselves and
71
Guideline
Comments
consistent with one another.
All three scenarios employ linking with direct responses to user
commands
WYSIWYG
There should be no secrets from the user, no abstract commands that
only promise future results. There should be no significant difference
between what the user sees on the screen and what eventually gets
printed.
Care is taken to make the PDF downloaded form as printer friendly
as possible
User control
The user, not the computer, initiates and controls all actions.
The successof clicking a link is indicated with the arrival of the new
page or a “404 not found” error message in case of network failure
Feedback and
dialog
Keep the user informed. Provide immediate feedback. User activities