Chapter 1

Introduction to HCI and Interaction Design

Introduction » Definitions » Why study user interaction? » Early HCI » Why it changed » HCI in the
1970s and 1980s » The situation today » Summary

Learning outcomes
By the end of this chapter, and having completed the relevant readings and activities, you should be
able to:
• understand the definitions of HCI and ID and associated terminology
• demonstrate knowledge of the historical development of the discipline
• define and describe common HCI terms
• describe how future developments in interaction, design and technology link to the history of the
study of ID and HCI.

Essential reading
Note: Further reading and websites are listed at the end of the chapter.

HCI textbooks
Shneiderman, B., et al. Designing the user interface. (2009) Part 1.
Sharp, H. et al. Interaction design. (2007) Chapter 3.
Dix, A., et al. Human-computer interaction. (2006) Chapter 1.

Introduction
A recent Microsoft research report entitled ‘Being Human’, takes as its starting point what life might
be like in the near future:
What will our world be like in 2020? Digital technologies will continue to proliferate, enabling ever
more ways of changing how we live. But will such developments improve the quality of life, empower
us and make us feel safer, happier and more connected? Or will living with technology make it more
tiresome, frustrating, angst-ridden, and security-driven? What will it mean to be human when
everything we do is supported or augmented by technology?

The aim of this report was to assess the changing interactive world and attempt to come to a better
understanding of human relationships with advanced technologies. Some predictions are positive,
some negative. On the one hand lifestyle changes assisted by technology can be extremely beneficial
to health and well-being; digital media and tools can stimulate creativity; the ever-expanding World
Wide Web enables immediate access to ever-growing information and data sources. On the other
hand:

…governments become more reliant on computers to control society, criminals become more cunning
via digital means and people worry more about what information is stored about them.

Why should this be important? The ways in which humans interact with computers, technology and
devices continues to evolve rapidly and no end can be realistically envisaged. Ubiquitous Computing
based on miniaturisation, portability and new display technologies is a reality; innovations in input
modalities have brought about new forms of education and entertainment, and communication
between people has been revolutionised because of unprecedented advances in network and
communications technologies. The widespread use of computers and a vast range of interactive
devices in commerce and industry mean that we do now really live digital lives in a digital age. Wider
access by those previously not part of the computer revolution has led to global social concerns – the
impacts are all around us. To be able to engage in and change our future, it is critical to understand
what those impacts are and how they can be mediated.

1.1 Definitions

Human Computer Interaction investigates the interplay between a human user and a computer system
or interactive device through the medium of a user interface. The joint performance of tasks by
humans and computers depends on human capabilities to use machines on the one hand, and the
design (and design trade-offs) and implementation of interfaces on the other hand. HCI research
concentrates on user needs and assesses interface designs and implementations according to usability
criteria – it has science, engineering, and design aspects. Interaction Design makes use of novel
techniques and technologies to design, build, test and produce interactive applications. Interface,
Interaction and User Experience Designers apply usability design principles to create productive,
usable and enjoyable systems – and more satisfied users.

1.2 Why study user interaction?

Knowledge of Interaction Design, HCI and usability is increasingly recognised as a business

requirement and design is now an integral part of the computer business, not least because of
international standardisation and accessibility regulations. As the potential user population grows in
size and diversity and computers become ambient, pervasive, ubiquitous and increasingly ‘invisible’,
there is both an expanding awareness amongst users of what can be achieved and a blindness to the
idea of the computer as a distinct separate device. Interaction and HCI design and research try to
accommodate human diversity in cultural and international locations a basic tenet of usability, people
deserve systems that are easy to learn and easy to use even though they have different physical and
cognitive abilities. Poor design choices are all too common. We need to understand why disasters,
accidents and frustrations happen. Many safety and life-critical systems depend on computer control,
including air traffic control; nuclear power plants; manned spacecraft; emergency services and
medical instrument monitoring. There have been many documented critical failures due to identified
design problems. Knowledge of how to design for human needs can, however, help minimise such
errors and enable computer systems to adapt to user requirements, rather than the human having to lift
to the demands of the technology.

1.3 Early HCI

HCI is about understanding and designing the relationships between people and computers. As a field
of study, it is an amalgam of several scientific disciplines since the early ‘man-computer symbiosis’
suggested by Licklider in 1960. The human side of HCI derived from physiology and applied
psychology, and in particular, from ergonomics (an applied science with close ties to engineering and
industrial applications).
Ergonomics is essentially the design of equipment so that its operation is within the capacities of the
majority of people. Human factors are similar but stems from the problems of designing equipment
operable by humans within the limitation of sensory-motor features (e.g. the design of flight displays
and command-and-control applications). In the 1950s ideas from communications engineering,
linguistics, and computing led to a more experimentally-oriented discipline concerned with human
information processing and performance. Human operation of computers was a natural extension –
there were new problems with cognitive, communication, and interaction aspects not previously
considered. The first applications of this research were to large-scale process control systems with
mainframe computers and in military systems, with restricted input and output modalities. At the
same time, cognitive psychologists concentrated on the learning of these and early Computer Based
Training/Computer Aided Instruction systems, the transfer of that learning, mental representations,
and human performance.
The advent of microcomputers and time-sharing systems led in the 1960s to studies into ‘Man-
Machine Integration’ before further input from computing sciences, software engineering and
information and systems sciences led HCI research towards personal computing applications and
those singular problems. In particular:

• Computer graphics and the CRT (Cathode Ray Tube) and pen devices used in the current Computer
Aided Design/Computer Assisted Manufacturing systems led to the study of interaction techniques in
interactive graphics.
• Work on operating systems developed techniques for interfacing input/output devices, for tuning
system response time to human interaction times, for multiprocessing, and for supporting windowing
environments and animation.

In the early 1970s the minicomputer and then the microcomputer came into widespread use and a
rapid expansion in computing power and functionality led to concerns about ‘usability’. HCI has since
been developing and applying design and evaluation methods to ensure that technologies are easy to
learn and easy to use. A large body of evidence on what is ‘good’ and ‘bad’ usability was produced
and methods for the production and analysis of such evidence were developed at that time.

1.4 Why it changed

Partly what changed was that the type of computer user and their expectations were no longer
homogeneous. Originally, the users of computers were also the builders, engineers and software
specialists, but as the minicomputer and remote terminal access to time-sharing mainframes brought
computer usage out of the laboratory, scientists became superseded by commercial and business users
and data processing professionals. John Carroll’s essay on ‘Where HCI came from’4 also identifies
the fortuitous coming together of a number of disparate strands in the late 1970s and early 1980s:
• The emergence of personal computing, both that of personal software applications (text editors,
spreadsheets and interactive computer games), and the development of robust computer platforms
(operating systems, programming languages and hardware) made anyone with access into a potential
computer user. This also ‘vividly highlighted the deficiencies of computers with respect to usability
for those who wanted to use computers as tools.’

• Human factors engineering techniques for analysis of human-system interactions in command and
control systems became viable in the wider context of user interactions.
• Developments in the methodologies and technologies of software engineering: on the one hand
towards non-functional requirements which could include usability and maintainability; and on the
other rapid development of interactive systems for CAD/CAM graphics and information systems.
• The newly formed discipline of cognitive science (incorporating cognitive psychology, artificial
intelligence, linguistics, cognitive anthropology, and the philosophy of mind) provided the tools, skills
and researchers to study cognitive engineering aspects of interacting with new technology.

All these threads of development in computer science pointed to the same conclusion: The way
forward for computing entailed understanding and better empowering users.
In terms of technologies and innovative uses for computers, a number of pioneers were already, in the
1960s, laying the foundations of what would be the design science of HCI. All of these, and much of
the earlier graphics work and activity, is discussed and illustrated comprehensively in HCI textbooks.

• At the Stanford Research Institute, Douglas Engelbart led a group developing the concept of
augmenting human intellect via advanced computer tools. SRI pioneered the mouse and effectively
invented WYSIWYG word-processing, multi-window display, and electronic meeting rooms.
• Ivan Sutherland’s ‘Sketchpad’ system stimulated the development of computer graphics techniques
before the technology was sufficiently powerful to develop them in full.
• Ted Nelson’s focus was upon the way in which the computer could facilitate a new structural
concept (hypertext) which overcame purely linear presentation of text.

1.5 HCI in the 1970s and 1980s

The starting decade for HCI as a separate discipline was the 1970s when leading research centres in
two continents were set up: HUSAT in Loughborough, UK and PARC in California, USA. The
HUSAT group played a leading role in applying the concerns, methods, and knowledge traditional to
the field of ergonomics to the study of computer design and use. The Xerox Corporation’s Palo Alto
Research Center (PARC) built on Engelbart’s work at the nearby Stanford University, and research
there into networked workstations using the Smalltalk programming language led to the design of the
Xerox STAR workstation, from which ‘look-and-feel’ the Apple Lisa and Macintosh were derived.
Alan Kay and Adele Goldberg specified in outline a personal, portable information manipulator.
The ‘Dynabook’ was the precursor of our portables, netbooks, laptops and e-readers. Elsewhere, other
work was presented at small international workshops and the first input to European (German DIN)
standards (for visual display terminals and for keyboard and keypad layouts) were proposed and the
seeds of usability sown. Growth in personal computer technology led to an explosion in applications –
text- and word-processing, graphics manipulation, the first interactive games, spreadsheets and the
direct manipulation interaction paradigm.
The 1980s saw an increase in HCI publications and the first major attempt to formulate a theoretical
basis for HCI. The Model Human Processor7 described human performance when interacting with
computers as a model which could be used, together with operational models (Goals, Operators,
Methods, Selection rules and Keystroke Level), to analyse human-computer tasks and to predict total
task performance times. The human is seen as an information processor, with inputs (visual), mental
processing, and outputs (keyboard strokes and mouse actions), which themselves ‘input’ information
or data to the computer.
In the 1980s and 1990s the expansion of the communication networks linking computers together –
that had started with the US Advanced Research Projects Agency’s network, ARPANET, and
continued with the world wide web from CERN – created new applications (electronic mail and
computer conferencing) and the exponential growth of the internet we know today. HCI research
concerns shifted towards communication between people enabled by computers; that is, how users
might interact with each other via a computer.
Researchers from social sciences (notably from Anthropology and Sociology) increasingly became
involved and initiated a paradigm shift in studying how computers and interactive technologies were
interpreted and appropriated by groups of users. An initial focus on Computer Support Co-operative
Work was swiftly expanded to include ways in which to investigate user activities and to determine
user requirements. The study techniques of social sciences were assimilated into the HCI mainstream.
This shift in emphasis to a social and emotional relationship with technology, matched the concerns of
many in determining how to allow users to interact efficiently and effectively with a computer and
saw the emergence of ‘Usability Engineering’. This approach was stimulated by the realisation that
design, as a set of related practices in its own right, could provide valuable input to HCI research and
to product design and evaluation. There was a move away from psychological and experimentally-
based research and design, towards a quantitative but practical engineering approach to product
design (i.e. early goal setting, prototyping and iterative evaluation). Together with a more commercial
ethos (developing usable and functional products to improve productivity, integration of usability and
product design teams and cost-benefit assessments of design decisions), usability methods began to
develop beyond long-held academic roots towards the concepts of engineering and testing products
and interfaces for usability. Usability testing had been focused on experimentation and inspections of
interfaces based on good practice guidelines, but in the early 1990s new methods such as Heuristic
Evaluation, cognitive walkthrough and usability questionnaires became widespread. Comparisons
between usability evaluation methods and tools specific to a Usability Engineering approach were
developed and a usability industry was created.

1.6 The situation today

We now view HCI design as looking past the simple interaction between user and
computer/technology (and beyond even computer-mediated interaction between people) to involve
wider social, cultural and aesthetic
attitudes. Thus, by the mid-1990s designers and ‘design practice’ became the attitude of choice in
HCI, emphasising practice-based approaches at the expense of information-processing models of user
behaviour. HCI now encompasses many philosophies, perspectives and types of expertise.
Different aspects of human–computer interaction mean using and learning different techniques,
depending on different goals. Interaction Designers, HCI researchers and usability specialists now
must be familiar with design, engagement, the practice of technology design ethnography and theories
of social action, as well as with the more prosaic human and usability engineering techniques which
have been progressively developed since the inception of HCI as a discipline.

Summary

The scope of HCI has progressed from ergonomics/human factors to human cognition and
psychology; from effects on workflow and communication to effects on culture and society. We now
investigate the relationships between people that computers and computer networks enable, such as
patterns of behaviour between people and within social groups, and study the digital artefacts which
shape aspects of our everyday lives.

A reminder of your learning outcomes

By the end of this chapter, and having completed the relevant readings and activities, you should be
able to:
• understand the definitions of HCI and ID and associated terminology
• demonstrate knowledge of the historical development of the discipline
• define and describe common HCI terms
• describe how future developments in interaction, design and technology link to the history of the
study of ID and HCI.

Exercises
1. ‘User interface design is all common sense!’ Discuss.
2. Define the terms ‘User Interface’, ‘Human Computer Interaction’, ‘Interaction Design’ and ‘User
Experience’. Differentiate between them.
3. Investigate disasters or accidents that hinged on an HCI failure. What went wrong, and why?
4. Draw up a table showing the development of input devices over the last 30 years. What has been
the major change? What might come next?
5. Informally assess the growth of mobile phone technology and applications in your home
community. Who uses them, why, and to what purpose? How did those activities take place before the
advent of mobile phones?

Further reading

For original articles and source material on the history of HCI

Baecker, R. and B. Buxton (eds) Readings in human-computer interaction. (Morgan Kaufmann,

1987).
Baecker, R., et al. (eds) Readings in human-computer interaction. (1995).

For general discussion on HCI and ID topics

Harper, R., et al. Being human. (2008) Appendix.

Lazar, J., et al. Research methods in human computer interaction. (2009)
Chapter 1.

For basic concepts in user psychology and cognitive aspects of user interaction

Norman, K. Cyberpsychology. Part ii: systems. (2008).

Sutcliffe, A. Multimedia and virtual reality. (2003) Chapter 2.

Coverage of individual differences in psychology

Norman, K. Cyberpsychology. (2008) Chapter 9.

Oral history interviews from the Charles Babbage Institute, University of Minnesota

J.C.R. Licklider: www.cbi.umn.edu/oh/pdf.phtml?id=180

Allen Newell: www.cbi.umn.edu/oh/pdf.phtml?id=208
Ivan Sutherland: www.cbi.umn.edu/oh/display.phtml?id=100
Chapter 2
Interaction and design approaches
Introduction » What is design? » Some principles of design » Problem space and design space »
Design methodologies and approaches » The design activity » Idea generation » Summary

Learning outcomes
By the end of this chapter, and having completed the relevant readings and activities, you should be
able to:
• demonstrate a realistic appreciation of ID processes and activities
• discuss the variety of approaches to ID and the range of design techniques and methodologies
• describe how and when such methods are used in a design activity
• describe what a metaphor is, and identify its importance
• demonstrate practice in drawing, sketching and designing paper prototypes.

Essential reading
Note: Further reading and websites are listed at the end of the chapter.

HCI textbooks
Shneiderman, B., et al. Designing the user interface. (2009) Chapter 3.
Sharp, H., Y. Rogers and J. Preece Interaction design. (2007) Chapters 1 and 2.
Dix, A., et al. Human-computer interaction. (2003) Chapters 6 and 7.

Idea Generation
Buxton, B. Sketching user experiences. (2007).
Greenberg, S. et al. Sketching user experiences: the workbook. (2010)

Introduction
Design work in HCI and ID stems from a pre-existing design tradition and employs techniques used
for many years in design disciplines which were not originally computer-based, such as architecture,
urban design and planning, visual design, printing and graphics. The use of prototypes, storyboards,
sketching, personas and even the words used to describe what Interaction Designers do (such as
‘understanding the problem space’ or ‘generating ideas’) derive from Design Studies, or from craft-
based technical activities. More so than the wider discipline of HCI, the field of ID gives priority to
designers and allocates them an essential role on every software and interface development team. It is
about ‘design’ as an activity – providing designers with tools to operate effectively without
compromising the overriding goals of making products which are usable, useful, and desirable.
Interaction Designers – who can also be known as Usability Engineers, Visual Interface Designers,
User Experience Engineers, or Information Architects – try to understand and shape human behaviour
to achieve this goal, but the value of design, although now recognised as being an essential
component of product development, is still often misunderstood. One way of looking at the nature of
ID work is that it is a means of managing the complexity of interaction in an engineering-centric
world; a way of connecting and thinking about people and their activities, emotions and experiences.
It is about computing but also about language, communication and technology and the aesthetics of
human interaction. For many in the ID world, it is the need to not lose sight of the elements of craft,
execution, and appropriateness when working towards creating the great user experience’.

2.1 What is design?

All design is driven by requirements, the focus being on the core need – not on how it is to be
implemented – since there may be multiple ways of achieving a goal. In order to design or build any
type of system, two basic requirements exist: the designer must understand the fundamental and
underlying requirements of the product, and then must ‘develop’ that product to fit those requirements
as best as is possible. Such development includes creating or producing a range of representations (or
‘models’) of the system; some theoretical or conceptual (‘mental models’), some illustrative such as
storyboards or scenarios, and some physical, such as artefacts or prototypes. Effective representations
should be accurate enough to reflect relevant features of the final system, but also simple and clear
enough to avoid confusion. Such representations fulfil a variety of purposes, including:

• exploring the problem space

• communicating, illustrating and expressing ideas to others
• making predictions of user performance, effort and outcomes.

A design is a simplified representation of the desired outcome so one approach to developing effective
representations is to ask a set of questions:

• What do you want to create?

• What are your assumptions?
• What are your claims for what it will do?
• Will it achieve what you hope it will? If so, how?

In thinking about and determining the answers to such questions, it is useful to have an overall
strategy or plan to follow. In design disciplines this tends to follow a well-recognised sequence.

Look at similar artefacts » Analyse users‟ needs and abilities » Sketch different designs, make
prototypes » Show to users and test » Build as a physical artefact

For simple design exercises and for small systems, this procedure is a tried and tested one and works
well. However, with more complex systems and large-scale interactive applications, such a craft-
based approach becomes time-consuming, unwieldy and expensive. A more systematic approach is
required. Design of interactive systems then comprises the following activities or processes, the
design of the final system being determined by the nature and content of the requirements definition.
The overall process is, of course, similar to any software engineering or system development process
and, later in this chapter, the relationship between SE principles and ID strategies will be explored.

An initial feasibility study » Followed by a requirements definition » The design is implemented » The
implementation is tested » After the system has been in use for some time it is updated and maintained

In many situations, a feasibility study will not be relevant and will not be carried out, and for much of
the design of interactive applications, maintenance is not a standard activity. This Study Guide
concentrates on the intervening activities of ‘Conceptual Design’ followed by what could be termed
‘Illustrative Design’ before the final ‘Physical Design’ is produced.
Conceptual Design is essentially and simply about taking some requirements and turning them into a
description of a future artefact (a system, device, application or interface) in terms of a set of
integrated ideas and outline concepts about:

• what that artefact should do

• how that functionality can be achieved
• how the built artefact will behave or look – in a manner that will be comprehensible to its expected
users. This type of approach to requirements definition (which, in design communities, is not usually
described in these terms) can be based on a set of design principles derived from an amalgamation of
theory-based knowledge, experience and common-sense practice which can identify such specifics as:

• generalisable abstractions for thinking about different aspects of design

• the do’s and don’ts of ID
• what to provide and what not to provide at the interface.

By focusing on users and their needs, as stressed in the previous chapter, and specifying the usability
and user experience goals that a design solution will achieve, four basic steps emerge within an
iterative overall process of design refinement (i.e. repeatedly evaluating and correcting designs).

Determine user needs and establish requirements » Develop alternate designs that meet the
requirements » Prototype, and evaluate with the different designs » Create and build a solution

In the remainder of this Study Guide specific chapters deal with each aspect of this activity. If the
prime focus for HCI/ID design is to identify the user’s needs and ensure that the designed
functionality of the final built artefact matches that need, then Interaction Designers must develop a
User-Centred Design mindset to think of the world in the user’s terms and of what the benefits to
users will be, rather than being technology centred or feature driven. There are, of course, practical
considerations to be taken into account in real-world design and many factors which affect design
practices relate to issues such as cost, project size, development time and the design methodology to
be used. However, the HCI stance, whilst acknowledging such needs, breaks down the design
approach to two basic views and sub-activities embedded in a cyclical design process.

Understanding users and their tasks

• Task-centred system design process:
◦ developing task examples
◦ task scenarios and walkthroughs

Designing with the user

• User-Centred Design and prototyping:
◦ User-Centred system design
◦ low fidelity prototyping methods
• Evaluating interfaces with users:
◦ observing people using systems via various methods
◦ detecting inappropriate design and correcting by iterative design.

Before going into more detail on UCD and prototyping, it is useful to take a step back and to look
more closely at the process of design itself, namely, what is happening during that initial creative
process and how to understand and describe it. The rest of the chapter will explain, first of all, some
design principles which contribute to what can be called the ‘problem space’ or ‘design space’ and
what some solutions may be. The various design methodologies commonly employed in HCI and ID
will be introduced, before concentrating on the practicalities of the design activity itself and the range
of techniques available for creating mockups, prototypes, storyboards (and similar) for testable
Illustrative Design solutions.

2.2 Some principles of design

There are many designers and a multitude of approaches – extensively written-up – to ID and the
creation of interactive computer applications. Many, however, are concerned solely with website
design and web interactivity or with an area which has emerged called User Experience Design.
Fewer concentrate on the wider issues of design for interaction as such, but useful information is
given and many graphic design ‘tricks of the trade’ and generic guidelines can be found. There are too
many books, guides, websites and blogs to discuss in detail in this Study Guide and it is impossible to
advocate one over another: see the selected further reading for this chapter and the web resources
given in the Preface for listings. It is strongly recommended that students study at least one of the
suggested additional readings and access some design-oriented websites to gain a rounded view of
this area.
In terms of an overall design approach, we will concentrate on a design basis put forward by Donald
Norman, an early HCI advocate, guru and proselytiser. The focus is on a core set of principles, as
discussed in his series of books on the design of everyday and computer artefacts and on his
discursive website. Numerous amendments have been made to such principles over the years but these
basic elements will help to clarify later expansions. The concept of ‘affordance’ is an especially
important one to grasp.

Consistency
‘Consistency’ is one of the most widely known user interface design principles. Simply put, it means
that mechanisms should be used in the same way wherever they occur. Consistency is expressed as:
• Internal consistency of a design with itself.
◦ For example, the use of consistent command names, selection of menu options, size and style of
icons, number of mouse clicks to select items, etc.
• External consistency with other interface designs and other systems.
◦ This allows users to switch between systems and applications without undue effort.
• External correspondence of a design to features in the world beyond the computer domain.
◦ Examples include the desktop metaphor and the arrangement of arrows on cursor control keys to
match the arrangement of compass point arrows on a map.

Trade-offs have to be made between internal and external consistency but what is more important is
the context of use (i.e. users’ tasks and the way they are best carried out). This may mean that aspects
of interfaces are actually internally inconsistent but consistent with the way users perform their tasks.

Feedback

‘Feedback’ can be defined as ‘...sending back to the user information about what action has actually
been done {and} what result has been accomplished’. Another way of describing it is in terms of its
absence, for example, using a cash machine without a screen would be virtually impossible as there
would be no feedback as to which request had been accepted or if any mistakes had been made.
Feedback is an integral part of the interface. A key aspect of designing metaphors for both everyday
applications and novel interfaces is to provide appropriate visual, auditory and tactile feedback.
Examples of good immediate feedback at the interface include simple ones like those listed below:

• displaying the details of the date and time when a file was updated
• the percentage bar showing the rate and progress of a process that is being performed
• ‘Busy’ icons showing that the system is processing and temporarily
unable to respond to other commands
• an effective sound tone which acts as a warning and attracts a user’s attention
• the clicks of simulated key presses on touch screens.
More examples can be found in all of the recommended HCI textbooks and in Norman’s writings and
website. A pertinent and timely discussion of the new ways in which users can interact with the latest
mobile phones and the Apple iPad highlights just these issues and why they are so important.

Mappings

‘Mappings’ refer to the spatial and conceptual relations between different parts of a system or
between controls and their outcomes. Mappings are ‘good’ if they appear natural and intuitive to
users. Poor mappings are when the relations are inconsistent or incompatible – Norman uses the
example of light switches, lift controls, door handles and car indicators and their relative directionality
to illustrate this point.

Affordances
For controls to be easy to use, mappings should be obvious and demonstrate a good ‘affordance’. The
term originally referred in psychology to actionable properties between the world and an actor – as a
perceived relationship between them. Norman first linked the concept to design stressing that what he
identified was actually ‘perceived affordance’.

„I introduced the term affordance to design … the concept has caught on, but not always with true
understanding. Part of the blame lies with me: I should have used the term “perceived affordance,”
for in design, we care much more about what the user perceives than what is actually true. What the
designer cares about is whether the user perceives that some action is possible (or in the case of
perceived non-affordances, not possible). In product design, where one deals with real, physical
objects, there can be both real and perceived affordances and the two need not be the same. In
graphical, screen-based interfaces, all that the designer has available is control over perceived
affordances. The computer system, with its keyboard, display screen, pointing device (e.g. mouse) and
selection buttons (e.g. mouse buttons) affords pointing, touching, looking, and clicking on every pixel
of the display screen. Most of this affordance is of no value. Thus, if the display does not have a
touch-sensitive screen, the screen still affords touching, but it has no result on the computer system.
… All screens afford touching: only some detect the touch and are capable of responding.
But the affordance of touchability is the same in all cases. Touch sensitive screens often make their
affordance visibly perceivable by displaying a cursor under the pointing spot. The cursor is not an
affordance; it is visual feedback. In similar vein, because I can click anytime I want, it is wrong to
argue whether a graphical object on the screen “affords clicking.” It does. The real question is about
the perceived affordance: Does the user perceive that clicking on that location is a meaningful, useful
action to perform?‟
Norman, D. and J. Nielsen (2010),
„Gestural Interfaces: a step backwards in usability‟; http:// www.jnd.org/
dn.mss/gestural_interfaces_a_step_backwards_in_usability_6.html7 Norman, D.
http://www.jnd.org/dn.mss/affordances_and.html

For example, does the handle on a door indicate if it should be pushed or pulled, or does a slider or
scroll bar intuitively indicate its direction of movement? If not, does it require extra perceptual cues
(such as the addition of direction arrows) or instructions to make its use transparent? The definition
which has come to be used is: ‘the behaviour of an object is that which is permitted and perceptually
obvious’. The term refers to the properties of objects – what sorts of operations and manipulations can
be done to that object. What is important is the ‘perceived affordance’ (the functionality that is
suggested by an object’s placement, or its look, or its associations, or the feedback it provides).
Constraints

When designing an interface it is important to think about how the information to be displayed or
presented is constrained so that it exhibits good affordance and can be used easily and simply.
Constraints limit the number of possibilities of what can be done with an object. Norman originally
suggested four main types:

Physical, Semantic, Cultural and Logical.

• Physical Constraints restrict the possible operations of an object:

◦ A key can only fit a lock in a certain way.
◦ The scroll bar in graphical interfaces is physically constrained by the shaft that restricts movement
of the scroll box to one of two alternatives; up or down (vertical bars) or left or right (horizontal bars).
• Semantic Constraints depend on the semantics (the ‘meaningfulness’) of the situations which users
know about. They depend upon a user’s knowledge of the world and on how the computer system is
being used.
◦ The icon of a wastebasket is semantically constrained because it is represented upright on the desk
top. It could be represented on its side but this would contravene our knowledge of how waste baskets
are used.
• Cultural Constraints consist of information and rules that help us to know what to do in social
settings. Many icons have been designed to capitalise on cultural conventions.
◦ Pictorial signs on toilet doors signal that one set is meant for women and the other for men.
◦ The Apple Macintosh had a warning icon that consists of a bold outlined icon with an exclamation
mark.
• Logical Constraints work through constraining the order, position or location of objects.
◦ The order in which items are displayed in menus is logically constrained by appearing as lists of
horizontal items. It would seem illogical if the items were randomly displayed across the screen in any
direction.

2.3 Problem space and design space

An important issue in design is to identify and analyse what is called the ‘problem space’ and to move
from that to the ‘design space’. In a similar fashion to that of ‘identifying the design artefact’ and
creating representations of it, questions can be asked of a UX design:

• Are there problems with an existing product or user experience?

• Why do you think there are problems?
• How do you think your proposed design ideas might overcome these?
• When designing for a new user experience, how will the proposed design extend or change current
ways of doing things?

Having a good understanding of the problem space, that is, specifying what is being done, why, and
how it will support users in the way intended, can help inform the design space. Before deciding upon
what kind of interface, behaviour and functionality to provide, it is important to develop a conceptual
model and to think about how the system will appear to users. A conceptual model is not a description
of the user interface but is a high-level description of a product showing what users can do with it and
the concepts they need to understand how to interact with it. A conceptual model is the ‘mental
model’ users have of the ‘system’ and how it works. It is built up from actual interaction with the
system through what is termed the ‘system image’ (i.e. the interface and many other aspects such as
physical properties, documentation, icons and instructions). The designer’s mental model is how user
interaction with a system is envisaged. Actual realisation of this concept is what is produced as the
‘system image’ – an interpretation of an idealised interface. This concept is discussed widely in HCI.

Decisions about the conceptual design must be made before commencing any Physical Design and, if
based on the approach outlined above, will be effective:

The most important design tool is that of coherence and understandability which comes through an
explicit, perceivable conceptual model. Affordances specify the range of possible activities, but
affordances are of little use if they are not visible to the users. Hence, the art of the designer is to
ensure that the desired, relevant actions are readily perceivable.

2.3.1 Metaphors

‘Interface metaphors’ and analogies are commonly used as part of a conceptual model to convey to
users how to understand what a product is for and how to use it for an activity. They are concepts that
users are exposed to through the product, the relationships between the concepts and the mappings
between the concepts and the user experience that the product is designed to support. Based on
Norman’s constraints, an interface metaphor is designed to be similar to a physical entity but to also
have its own properties. Metaphors exploit a user’s familiar knowledge, helping them to understand
‘unfamiliar’ functionality since people find it easier to learn and talk about what they are doing at the
computer interface in terms familiar to them.

The general benefits are that metaphors:

• help users understand the underlying conceptual model

• make learning new systems easier
• are accessible to a greater diversity and number of users.

Metaphors can be powerful design tools, able to generate new associations from existing knowledge
but the ability to communicate complex ideas can also have the effect of constraining thought and the
user’s own
discernment. Sometimes connections that may make sense in the source concept do not match up to
the target concept. The use of metaphors in HCI and ID has been extremely successful in some cases
– the desktop metaphor is now endemic – and a distinct failure in others – the Microsoft Office
paperclip (‘Clippy’) is now universally derided. A number of texts listed as further reading give
guidance on how and when to use interaction metaphors and how to design with metaphors. Problems
with interface or interaction metaphors counter some of Norman’s guidance in that they can:

• constrain designers in the way in which they conceptualise a problem space

• limit designers’ imagination in coming up with new conceptual models
• conflict with other design principles
• break conventional and cultural rules
• force users to only understand the system in terms of the metaphor.

Metaphors can go wrong in so many ways – or can simply become mixed and confused – so it is
crucial that the choice of metaphor should start with the expectations, needs, desires and actions of
those involved. One author of a current Ubiquitous Computing and UX design book10 highlights a
way of thinking about metaphors as a design tool by asking the following
practical questions:
• What is the comparison that this metaphor is making? What class does it say that the design and the
metaphor belong to?
• What is the list of tools and activities associated with the source concept? How would those map to
the experience being designed?
• What are the visual images the source concept evokes? What are the interaction patterns that it
implies? Are there necessarily positive outcomes to those patterns? Negative ones?
• What is the purpose of using the metaphor? What exactly do you need it to accomplish? What
associations is it supposed to evoke and what actions will the metaphorical associations make easier?
• What are the boundaries of the metaphor? At what point do the differences between domains
become so great that the metaphor hurts more than it helps?

2.4 Design methodologies and approaches

As discussed in the previous chapter, we saw that HCI was derived from software sciences combined
with cognitive sciences. The first design methodologies generated were based upon classic software
engineering models – partly because of the type of computers in use and partly because the early
interfaces were to CAD and graphics applications and to control systems which required an
understanding of how data was input and the type of input devices used. As software became more of
a design science and issues of practical management and efficiency became more prevalent, newer
design methodologies were developed, supported for the most part by large corporations who were in
the business of developing and selling first mini-, and then microcomputers. Mass production and
popularisation of personal computers and a change in the styles of computer companies
from large mainframe retailers to small start-ups (such as Microsoft and Apple once were) meant that
hardware development inexorably led to newer forms of programming languages, different types of
operating system and newer applications (such as spreadsheets and drawing packages like MacPaint)
with a wealth of new input devices and interface display options. This heralded a gradual change in
the focus of software engineering, away from programme efficiency, code optimisation and even
‘elegance’ to the user, usability and, ultimately, the user experience. At that stage, creative designers
began to get interested in something more tangible and to use the devices themselves.
HCI in the 1980s essentially grew out of graphics research and applications whilst Usability
Engineering was more of an outgrowth from the impacts of increased user input, from developments
in requirements capture methodologies and from standardisation and the use of usability metrics. Pre-
existing standard methodologies and frameworks were subjected to user-centred modifications to
enable newly-created ‘discount’ usability evaluation methods to be used for obtaining structured
feedback from users about aspects such as usability and accessibility. This required that a cycle of
prototype building and testing be done iteratively. With each iteration, prototypes move from low-
fidelity sketches or simulations to more functional versions of a final design. The rationale is that the
transition from formative evaluation of design concepts to summative evaluation of a final artefact
minimises the emergence of unexpected usability problems or unforeseen user responses.
The figure below illustrates the iterative development cycle.
 Iterative Design Model

A paradigm change occurred with the move towards concepts of experience-centred design. The
inclusion of techniques such as ethnography – from sociological and anthropological disciplines – and
technological developments led to a more co-operative design focus. ID and UX design came to the
fore as the conceptual and methodological contributions of the 1990s addressed the challenge of
understanding the user and the context of use. It became evident that there was a need to study work
in detail and ‘in situ’, determining what people actually ‘do’ in their work practices before making
design interventions. Such approaches were part of a widespread movement to assist and encourage
researchers ‘in the field’ to communicate their findings to systems designers and software developers,
and to help those designers and developers to represent users and the use context during the design
process so that user-centred decisions could be made. These representations include personas and
Scenario-Based Design and are discussed in the next chapter. To further incorporate users into the
design activity and to foster greater participation meant input from other design disciplines and so
Participatory Design – from Scandinavian work practices – became a greater feature in ID.

2.4.1 Expansions of software engineering models

ID can make use of a number of different software life-cycle models, the simplest being that described
in general terms in Section 2.1, but with the addition of an iterative cycle to the process.

ITERATE: Needs identification » Design » Build alternative prototypes » Evaluate

The Waterfall and the Rapid Applications Development models, derived from 1970s software
engineering, enforced linear progression from requirements to testing with documented completion
criteria at each stage. Although there is the possibility of some user involvement at the requirements
stage, the design is forced into smaller project ‘boxes’ and cannot be easily iterated, as shown in the
step process below.

Requirements » Design » Detailed Design » Code » Integration » Implementation » Test

A need for design approaches which could cope with iteration and complexity was thus recognised
and 1980s HCI developers started to build upon pre-existing SE developments. The Spiral and the
Star Models were accepted as suitable approaches for UCD with its emphasis on determining users’
needs, understanding the user and task context and designing products from that basis rather than
from developers’ preconceptions or rigid procurement briefs. Both are extensively described in the
recommended textbooks.

Spiral Model
One model, developed by Hartson and Boehm-Davis and shown in the figure below, is in that spiral
shape to reduce the risks of early design commitment. It is derived from an earlier model12 in classic
waterfall software development lifecycle methods and describes an iterative, incremental approach to
dealing with change and managing risk. It is a sequential but iterative approach since incremental
development allows developers to define and implement features in order of decreasing priority. An
initial version of the system is developed, and then repetitively modified based on input received from
external (customer or user) evaluations. The development of each version of the system is carefully
designed using the steps involved in the Waterfall Model. With each iteration around the spiral
(beginning at the centre and working outwards), progressively more complete versions of the system
are built. Thus the model relies heavily on prototyping in that it explicitly encourages alternatives to
be considered.

Spiral Model

To err is h
Star Model

Another model, more useful to HCI design practices, is one that constantly returns to evaluation as its
core process: the Star Model from Rex Hartson and Debbie Hix, shown in Figure 2.6. It was derived
from empirical studies of how interface designers actually worked. The fundamental concept is that
the design of interactive systems typically does not follow a specific order of steps but can start at any
stage, always followed by an evaluation activity. Evaluation is the central phase in the development
cycle. Development can start from any point in the ‘star’ and any stage can be followed by any other
stage, but evaluation is always carried out before moving to a new stage. The requirements, design
and product gradually evolve, becoming increasingly well-defined. This cyclic design emphasises
rapid prototyping embedded with alternating waves of analytic (top-down) and synthetic (bottom-up)
design steps. The Star Model can give the user a significant role throughout the project since
evaluation is so central to the cycle and, since evaluation can be based on any representation of the
system, this model too relies heavily on prototyping.

These two models provide very specific ways of managing the design process and are intended to
maximise User-Centred Design strategies. More complex software engineering methodologies are
constantly being developed and refined but this Study Guide does not cover any other SE-derived
approaches or techniques. Interested students can find further detail in the recommended textbooks
and in the Further reading list.

2.4.2 User-Centred Design

User-Centred Design or User-Centred System Design developed from the belief that, in order to
design truly usable systems, designers and developers needed to have a much clearer understanding of
what the users of a proposed system or application actually wanted from it. Together with considering
seriously whether those users would be able to understand and easily use the proposed design, and a
better appreciation of how work tasks were currently carried out, this approach grounds the design
process in information about the people who will use the product. A research impetus to make digital
technologies accessible to, and usable by, ordinary people created a design focus on users throughout
the planning, design and development of a product. UCD came to prominence through the design and
development of the Olympic Messaging System used at the 1984 Olympics in Los Angeles. It
identifies the needs of users and those impacted by the introduction of new systems or applications at
an early stage and involves a task and a requirements analysis. It is an inherently iterative process
emphasising early testing and evaluation with real users. UCD focuses specifically on making
products usable by involving users to obtain feedback through the use of prototypes. As with other
approaches, designs are modified in light of the user feedback, and the process aims to foster better
communication. It has become the classic HCI approach to interactive design, concerned with the
specification, delivery and evaluation of systems as a whole. It is the basis for Usability Engineering
and for usability and HCI standards.

Allowing users to become involved in the design process means that designers must:

• Focus early in the design process on users and their tasks.

• Identify appropriate interface functionality to increase user satisfaction.
• Decide how best to utilise design decisions to produce systems which are acceptable to users.
• Establish usability criteria and responsibilities before irrevocable hardware and software decisions
are made.
• Measure, record and analyse users’ reactions and performance to scenarios, simulations and
prototypes.
• Design iteratively – when problems are found, fix them and carry on testing.

Including users in the whole design process, either as co-designer or through evaluation of prototypes
can be difficult to achieve. Coordinating high levels of real user involvement involves many practical
problems in terms of time, money, scheduling, and, critically, consistency of user input throughout the
project. One solution is to use techniques which bridge designer and user cultures. One such is
Participatory (or Participative or Collaborative) Design.

2.4.3 Participatory Design

The Scandinavian tradition of social democracy enables the democratisation of computerisation by

involving workers and trade unions directly in the design process. It is based on an action research
model in which researchers and workers collaborated to produce improved conditions for the
workers/users through active and continued consultation and collaboration between
designers/developers, managers and workers. This type of approach emphasised workers’ own
experiences and required that researchers get involved with and develop a commitment to them in
order to understand and change their work experience and conditions. The Participatory Design
technique enables effective communication between two populations (workers/users and designers)
about proposed designs which impact on users’ working lives. Social and organisational aspects are
emphasised but the process is based on studying designs, model building and analysing new and
potential future systems. Domain experts are part of the design and development team throughout the
process. User involvement is built into an overall team process, the team being made up of a range of
participants representing the whole user community assisted by a facilitator. The practice of
integrating usability into the Participatory Design process has been evident since the early 1980s and
one approach to usability testing is to have users engage in co-operative evaluation of prototypes.
Successful projects, where information about users was integrated well into the design showed
dramatic improvements in the resulting design, with increased user satisfaction and better business
results. The benefits of such user/worker involvement can be seen by reference to the high costs of
bad design:

• heightened visibility through electronic monitoring

• displacement
• intensification
• reduction or redefinition of skill
• loss of work autonomy and control.

The creation of shared representations in a process of ‘co-design’ is by using simple tools (such as
scenarios or envisionments based on paper or video mock-ups) to explore innovative solutions. The
use of personas, user profiles and scenarios derived from a contextual inquiry (essentially, abstract
representations of users to guide design, which is discussed in detail in Chapter 3) and newer co-
operative design techniques has been growing in recent times. Focus groups focus troupes and the use
of video prototypes means that users are presented with a theatre play or a video of a scenario and
discuss it in detail after the performance. Extensions to this approach are to let users develop video
scenarios by themselves: such generative tools17 incorporated into participatory development of
scenarios and prototypes help engage participants and enhance the shared context.

Attributes of Participatory Design

• The goal of the activity is to improve the work life of users.
• The activity is collaborative, with all goals and decisions actively negotiated and not imposed.
• The activity is iterative – ideas are tested and adjusted by seeing how they play out in practice.

It can be a controversial activity, with both benefits and drawbacks. More user involvement brings:

• More accurate information about tasks

• More opportunity for users to influence design decisions
• A sense of participation that builds users’ investment in successful implementation
• Potential for increased user acceptance of the final system.

On the other hand, extensive user involvement may:

• Build opposition to implementation

• Lengthen the implementation period
• Be more costly
• Show that organisational politics and preferences of certain individuals are more important than
technical issues
• Build antagonism with people not involved or whose suggestions are rejected
• Force designers to compromise their design to satisfy incompetent participants
• Exacerbate personality conflicts between design-team members and users.

2.4.4 User Experience Design

Experience-based design involves both the observation of, and involvement in, users’ everyday
working life in order to be able to represent what users’ activity and response to the systems they use
actually is. Designing in an experience-centred way means that ‘the view of the human in HCI
becomes richer and more open once this point of view is adopted, and it thus offers greater surplus
and a richer potential with which to work as designers.’

As these authors identify, key landmarks are in:

◦ Valuing the whole person behind „the user‟.

◦ Focusing on how people make sense of their experiences.
◦ Seeing the designer and user as co-producers of experience.
◦ Seeing the person as part of a network of social (self-other) relationships through which experience
is co-constructed.
◦ Seeing the person as a concerned agent, imagining possibilities, making creative choices, and
acting.

A number of influential authors19 have described, with reference to how designers actually create
designs, how interface development can be seen as an issue in design, claiming that multidisciplinary
teams deal best with
designing interfaces to systems with a high level of information content or complex web sites, games,
and data visualisations. This work created the idea of ID as bridging the boundary between software
interface design and media design. Others, more recently, have argued that:

‘Designing for usability, which had been the primary objective of HCI research and practice, was
only one of the many values that User-Centred Design could focus on. Designing for fun,
enchantment, adventure, and excitement were equally valid selfcentred goals that were resonant with
the shift of emphasis from designing office- and work-oriented products to designing for homebased,
leisure, and entertainment products.’

Norman, in his book21 – with the slogan ‘beautiful things work better’ – opened up an
interdisciplinary debate around beauty and pleasure as a design value. Investigating and explaining
the relationship between aesthetics and usability has spread throughout the design research
community and feeds directly into the way in which the design of future products can be carried out.
As one of the major proponents has written:

‘It takes an experiential approach, putting experience before functionality and leaving behind
oversimplified calls for ease, efficiency, and automation or shallow beautification. Instead, it explores
what really matters to humans and what it needs to make technology more meaningful.’

User Experience Design

The design activity

Alongside making requirements identification as real as possible for designers is the need to make
emerging design ideas as concrete as possible for potential users, allowing them, as has been stressed
before, to be consulted during the design process. A fundamental part of an iterative design process is
to create an early partial implementation of the artefact or system: a prototype. Rapid prototyping
techniques allow prototype development early in the design process (before time and money have
been spent making irrevocable design decisions) with the effect that design solutions can be easily and
quickly shown to users at an early stage.
Rather than build a fully operational system, it is faster to prototype first, and test out that design
solution (first with the design team and then with users for their reaction), since people are generally
good at reacting to concrete designs and physical mock-ups or partial prototypes. In addition to
fostering teamwork and communication by involving users, this process means that redesign based on
feedback occurs until an acceptable state is reached. Of course, a newly generated design may be
worse or may have consequences but this is part of the skill set of the Interaction Designer in
choosing what to prototype, based on knowledge and experience. With prototyping and testing
activity, it is obviously crucial to keep track of the ‘Design Rationale’ (i.e. the reasons for design
decisions and changes, why those changes were made and what the implications are).
2.5.1 Prototyping

Prototypes are not just ‘cut-down’ versions of a finished artefact. They can be anything from a
cardboard mock-up or a cartoon-like storyboard to a software presentation that simulates a system’s
response to user actions.
For user interfaces, representations of the artefacts to be designed can be built with different media,
from simple paper to sophisticated interactive screen-based simulations. Mock-ups can range from
concept demonstrators with limited pre-scripted functionality to partially implemented software
capable of demonstrating interaction sequences and user experiences. The differences between the
techniques are in the media employed, production costs, and the realism or fidelity of the
representation of the proposed design.

A classification and discussion of types of prototyping technique is not covered in details here, it is
important to remember that all such representations result from the creative design process and are
intended to illustrate concrete aspects of a design. Some variants are given below.

• Text descriptions of tasks

• Flow diagrams or outlines showing task structures
• Screen sketches
• Storyboards
• Paper prototypes
• Wireframe models – to make mock-ups
• Screen-based animations
• Walkthroughs
• Rapid video prototypes
• Virtual/Augmented/Mixed Reality mock-ups
• Wizard-of-Oz simulations
• Executable prototypes

Starting out
This section will discuss only a few of these in detail; some are self-explanatory and the specific
technique of Wizard-of-Oz simulation is not covered here. The recommended textbooks all cover
prototyping and design realisation in extensive detail.
The power of a prototype is that it can create a focus for design conversations based upon something
that is tangible and visible; it is a concrete example which provokes a user reaction. The process
ideally starts with creative brainstorming to map out a space of ideas, concepts and potential designs
(discussed in Section 2.6 in more detail). Once such design conceptions have been assessed and
prioritised by a design team, the process of design realisation involving a user–designer dialogue can
begin. Scenarios and personae (see Section 3.6) can be collected together in order to provide material
for stimulating further discussion and for instantiating concepts which can be tested and iterated. Such
design realisations are created in iterative cycles using scenarios and personae and, sometimes,
examples of other good designs for inspiration. Initial ideas lead to design exploration in which
storyboards, wireframes or mock-ups can be demonstrated to users in interview or workshop settings
to elicit their feedback and to allow them to contribute ideas and participate personally in the design
process. Representations of designs become more detailed and sophisticated as cycles of creation and
evaluation occur; storyboards and early mock-ups are refined into software prototypes. Prototypes
tend to be evaluated through a more formal test process of evaluating usability.
One choice which may have to be made is the extent to which the process should be user-centred or
designer-led. We advocate User-Centred Design but it can produce quite conservative solutions since
users may fix their requirements and visions on prior experience rather than exploring new directions.
On the other hand, designer-led exploration can develop rather too complete and complex prototypes
based on idealised designs or novelty for its own sake. It is generally better to have design-led
exploration when products are being developed for new markets whilst a user-centred approach may
be best for applications tailored to specific users and tasks.

Mock-ups

Simple mock-ups can be very useful in allowing users and designers to interact directly, to engage in
a conversation and to exchange views. Simple mock-ups can be easily constructed from common
office material, since the demonstration focus is on the flow of interaction rather than the visual look
and feel of an interface. A more complex physical model is an object which users and designers can
interpret in various ways according to their interests and viewpoints: different people may take
different meanings from the same model and highlighting such differences aids understanding.
Physically interacting with mock-ups means that the visual, auditory and tactile senses are all used,
more so than with a paper or screen-based design. As with all types of prototyping, this can help elicit
feedback that becomes more and more focused and can strongly encourage creativity.

Scenarios and storyboards

Scenarios and personae are inputs to stimulate design exploration; storyboards are the initial outcomes
of design (they may also be called design sketches or wireframe models). Scenarios are mini-scripts
that describe situations where a product is used; storyboards visualise a narrative. These techniques
can work together to simulate key moments in application usage and to communicate key aspects both
within the design team and to those external to it. Scenarios can take almost any format that ‘tells a
story’ about a product or application and people or users. A scenario will involve a range of
parameters, always with people or characters standing for the user and often with objects,
circumstances and time as the additional elements.
Scenarios should be detailed, evocative and focused on the value of the experience to users. Multiple
scenarios can be envisioned; the same people can experience different situations, and the same
situation can be played out with different products or users.

‘For one single product, a team can write scenarios that describe, say, an ideal everyday use
situation, a frst use scenario and an edge-case (someone who uses the product ten times as heavily as
an everyday user, for example). The point is to tell detailed stories about a specific user experience
and to use the process of creating
the scenario as an opportunity to better understand the details of the experience and to share that
understanding among the team.’

The storyboard concept itself originates in animation and cartooning – ideas for a storyline or script
were sketched as a set of drawings. In ID, storyboards usually illustrate ‘snapshots’ of interaction
which is related to the users’ tasks or what the application does, or a script of how the product will be
used. Since many user experiences can have multiple outcomes based on the users’ choices, multiple
storyboards can describe possible experiences, or interactions. Storyboards can be hand-drawn or
created as PowerPoint animations or videos which are ‘walked through’ in order to elicit user
feedback and to focus discussion on critiquing and elaborating the design. Such screen-based
presentations (and many paper-based ones) can include clip art, found photographs, staged
photographs, computer animations, dialogue clips and even cartoons. More recently, video mock-ups
and storyboards are being used, since film and video has become so much easier to create on modern
computers. They are all useful in showing multiple possible paths through an interaction,
interactively, in a presentation that demonstrates how different decisions lead to different experiences.
However, a limitation of storyboarding in this manner is that complex interactions can be hard to
instantiate since interaction can only be represented by scripted animations or explained using paper
materials. Complex ideas which relate to user immersion, presence or flow are often very important
parts of interactive design but can be extremely difficult to illustrate with sketches and screenbased
presentations. Storyboards do, however, allow the rapid iterative exploration of design ideas we have
identified as being a critical part of the design process, and they can be readily transformed into
software-based prototypes which allow more interactive functionality to be demonstrated.

Simulations

‘Simulation is a kind of drama. By using media to create a sensation of realness, an audience can
suspend disbelief long enough to provide authentic reactions to the unfamiliar things they‟re seeing
and hearing. Simulation takes place in the world at large, not just on a screen. In fact, simulating
Ubiquitous Computing User Experience Design has much in common with theatre. In this theatre of
design, devices are props, environments are stages, users are actors and user experiences have
internal narratives.’

Newer techniques that are more appropriate and suitable for Ubiquitous Computing (see Chapter 9)
and for ID and UX design make use of concepts appropriated from drama, theatre, film and role-
playing games. A short play is produced acting out in a more realistic setting the user interaction
scenario. The viewing and/or the production of the play tends to focus discussion as users evaluate
ideas, but bring in their own context to the discussion too, producing new insights and ideas. There
are many variants: professional actors may be chosen over letting users act out parts for themselves.
In that case there may be choices:

• give out a role or persona

• allow wholly improvised play (usually to foster evaluation and idea generation)
• allow participants to develop their own scenarios
• ‘freeze’ the action, discuss and change events, and then replay
• add further objects to the scene (changing the product ecology).

Such ways of prototyping interaction are constantly evolving as technology itself develops and
different interaction styles become more common. These techniques can also have other uses – in
more specific product evaluation and for demonstrating user difficulties by highlighting specific and
problematic situations and settings.

2.6 Idea generation

The design process begins with generating and producing ideas for potential designs and this activity,
too, can be achieved in numerous ways. There are as many inspirational brainstorming techniques as
there are potential designs, and the recommended books chosen for this part of the course are those by
Bill Buxton, a polymath HCI, graphics and design pioneer. His first book describes how to think
about the role of design and the principles of ‘sketching’. He discusses some of the techniques
mentioned above for prototyping and envisioning user experience in an entertaining and informative
fashion. The associated workbook contains practical examples, suggestions and guidance on how to
generate ideas.
Buxton explains his views on sketching in more detail and identifies various methods for capturing
aspects of the real world and possible user interactions, from single images to interactive modelling
for prototyping.
The concluding part highlights and describes some techniques of storytelling, critiquing and
evaluating which are used to share the ideas generated with others, whether they be users or the
design team. Together they are the best sourcebooks currently available and the most accessible
introduction to design idea generation for ID and HCI. There are also numerous examples of
prototyping strategies, ways in which to generate new ideas and demonstrations of participants
actively involved in design idea generation. Some are presented later as case studies while many can
be accessed or downloaded as videos (see the libraries of video material indicated in the Preface,
under Sources of further information). Video material is especially useful in showing the reality of
idea generation in action.
Idea generation is an actively researched topic in the HCI, ID, UX and design communities, and
articles, studies and investigations are constantly being presented at conferences, especially at the DIS
(Designing Interactive Systems), NordiCHI (Nordic Conference on Human-Computer Interaction),
UbiComp (Ubiquitous Computing), Mobile-HCI (Human-Computer Interaction with Mobile Devices
and Services), PDC (Participatory Design Conference), Pervasive (Pervasive Computing), TEI
(Tangible, Embedded, and Embodied Interaction) and UX (User Experience) conferences referred to
in the Preface. Current work and work-in-progress is written up in magazines and journals. Some
newer techniques may also be described on the various research community websites or on vendors’
and computer consultancies’ blogs and news feeds (see, again, Preface: Sources of further
information). It is well worth keeping up-to-date with new developments by accessing the latest web-
based information.
The process of idea generation is an active one, requiring practice. Some real implementation of
storyboarding and early prototyping techniques may be carried out as coursework but students should
all try the techniques for themselves, both as individuals and by working in groups. Some suggestions
are made in the Exercises at the end of this chapter and there are many more in all of the
recommended textbooks. The only way to gain experience and develop expertise is to try sketching
and producing design ideas for yourself.

Summary

The goal of Interaction Design is to create products which are useable, useful and desirable. ID
attempts to manage the complexity of interaction without losing the feel of a craft when creating
‘great user experiences’.
The design approach is one of focusing on users and their needs, and is derived both from design
theory and from existing SE and HCI UserCentred Design models.

A reminder of your learning outcomes

By the end of this chapter, and having completed the relevant readings and
activities, you should be able to:
• demonstrate a realistic appreciation of ID processes and activities
• discuss the variety of approaches to ID and the range of design techniques and methodologies
• describe how and when such methods are used in a design activity
• describe what a metaphor is, and identify its importance
• demonstrate practice in drawing, sketching and designing paper prototypes.

Exercises
1. What is User-Centred Design (UCD)? What specific knowledge is required to engage in UCD?
2. Assume you are a member of a large software development team.
i) How could you involve users at an early stage in systems development?
ii) What problems and attitudes might you encounter?
iii) How would you get users practically involved, and when?
3. Describe the design approach of Participative or Participatory Design.
4. What new kinds of software support are available for interface designers? How could you envisage
yourself using them in the future?
5. Find out about 3D printers and investigate how they are being used in ID and UX Design.
6. How could you as a designer make use of users’ prior experience and existing knowledge?
7. Describe the different ways in which designers use mock-ups, storyboards and paper prototypes.
8. Investigate video scenarios and video prototypes. How and when might they be used? What kinds
of user might they be most suited to?
9. Sketch out three or four different design ideas for the interface to a new mobile phone application
of your own choice. Make one touch-screen based and another keypad-based. How do they differ?
10. Construct a physical mock-up, with any readily accessible and available materials, of a personal
diary/appointment calendar system for a laptop or notebook computer. Show it to someone else
(preferably not on your course) to get their reaction and feedback.

Further reading

For background reading and inspiration for Interactive Design from a number of classic HCI
perspectives

Blythe, M., et al. Funology: from usability to enjoyment. (2003)

Moggridge, B. Designing interactions. (2007).
Norman, D. The design of everyday things. (2002).
Norman, D. The design of future things. (2007).
Norman, D. Living with complexity. (2010).
Winograd, T. Bringing design to software. (1996).

New and newly-updated titles and synthesis lectures on design issues, UX and Interaction
Design

Goodwin, K. Designing for the digital age. (2009).

Kuniavsky, M. Smart things: ubiquitous computing user experience design. (2010).
Hassenzahl, M. Experience design: technology for all the right reasons. (2010).
Saffer, D. Designing for interaction. (2009).
Sutcliffe, A. Designing for user engagement: