Human Computer

Interaction

ITHIA1-B33
 Contents Covered
▪ Understand the nature of UX design

▪ Understand the four processes involved in design: understanding, design, envisionment,

▪ Understand the centrality of evaluation in human-centred UX

▪ Understand the use of personas in UX

▪ Understand the use of scenarios in UX

▪ Be able to use scenarios throughout the UX design process.

2
 Understand Design Concepts of Interactive Systems
 Understanding refers to the activities of establishing the functional and non-functional
requirements.
 Design activities include generating ideas, creating conceptual designs based on abstract
concepts, and creating concrete physical designs.
 Envisionment activities help designers to clarify ideas and create visual representations that can
be evaluated.
 Evaluation activities work closely together with envisionment activities.
THE PROCESS OF UX DESIGN
▪ Evaluation is central to delivering a good UX. Everything gets evaluated at every step of the
process.
▪ The process can start at any point – sometimes there is a design in place, sometimes we start
with a form of envisionment such as a prototype, and sometimes we start with understanding.
▪ The activities can happen in any order, for example, understanding might be evaluated and a
prototype built and evaluated, and some aspect of a physical design might then be identified.

3
4
 Conceptual Design
 Conceptual design is about considering what information content and functions are needed for
the system or service to achieve its purpose.
 It is about deciding what someone will have to know to use the system. It is about finding a clear
conceptualisation of a design solution and how that conceptualisation will be communicated to
people (so that people will quickly develop a clear mental model).
 There are several techniques to help with conceptual design. Software engineers prefer
modelling possible solutions with objects, relationships, and use cases.
 Entity–relationship models are another popular conceptual modelling tool. Others prefer
sketching some general ideas.
 Through conceptual design, UX designers will develop the information architecture to support
the new service or system. For example, the conceptual design of a website will include
developing the concepts and categories for the site, a site map and a navigation structure.

5
 Physical Design
 Physical design is concerned with how things will work and with detailing the look and feel of
the product or service.
 Physical design is about structuring interactions into logical sequences and clarifying and
presenting the allocation of functions and knowledge between people and devices.
 The distinction between conceptual and physical design is very important. The conceptual
design relates to the overall purpose of the interactive service or system. There must be enough
knowledge and ability to achieve the purpose between the people and the technologies.
 Physical design involves translating this abstract representation into concrete designs.

6
 Physical Design
There are three components to physical design: operational design, representational design and
design of interactions.
 Operational design specifies how everything works and how content is structured and stored.
 Representational design is concerned with fixing colours, shapes, sizes and information layout. It
is concerned with style and aesthetics and is particularly important in terms of UX for issues
such as the attitudes and feelings that people develop.
 Interaction design, in this context, is concerned with allocating functions to human agency or
technology and structuring and sequencing the interactions.

7
 Envisionment
 Designs need to be visualised to help designers clarify their ideas and enable people to evaluate
them. Envisionment is concerned with finding appropriate media in which to render design
ideas.
 The medium needs to be appropriate for the stage of the development process, the audience,
the resources available and the questions the designer is trying to answer.
 There are many techniques for envisionment, but they include any way abstract ideas can be
brought to life.
 Sketches on the back of an envelope, fully functioning prototypes, and cardboard mock-ups are
just some of the methods used.
 Scenarios, sometimes represented in pictorial form as storyboards, or wireframes, are an
essential part of prototyping and envisionment.

8
 Evaluation
 Evaluation is tightly coupled with envisionment because the nature of the representation used
will affect what can be evaluated.
 Evaluation criteria will also depend on who can use the representation. Any of the other design
activities will be followed by an evaluation.
 Sometimes, this is simply the designer checking through to ensure something is complete. It
could be a list of requirements or a high-level design brief sent to a client, an abstract
conceptual model discussed with a colleague, or a formal evaluation of a functional prototype
by future system users.
 Techniques for evaluation are many and various, depending once again on the circumstances.
Expressing the design ideas in terms of a concrete scenario that people must work through can
be very effective.

9
 Developing Personas

10
 Personas are concrete representations of the different types of people that the system or service is
being designed for. Alan Cooper introduced the idea of personas in the late 1990s (Cooper, 1999) and
they have gained rapid acceptance as a way of capturing knowledge about the people the system or
service is targeted at.
Personas want to be able to do things using your system. They want to achieve their aims. They want
to undertake meaningful activities using the system or service that the designer will produce. In the
development of personas it is important to include the aspirations of potential users as well as
looking at more functional aspects. Personas should help to shape the whole UX and people will have
an emotional response to a product or service as well as a response based on pragmatic qualities.
Designers also need to recognize that they are not designing for themselves. Designers create
personas so that they can envisage the people they are designing for; they create personas so that
they can put themselves in other people’s shoes.
There is no agreed standard for defining and documenting personas. Cooper et al. (2007) emphasize
the different types of goals that people have – experience goals, end goals, life goals – that should be
represented in the personas that are developed.
Example is companions: We have recently been looking at a novel form of interaction that goes
under the title of companions. Companions are seen as an intelligent, personalized, multimodal
interface to the internet. Companions know their owners and adapt the interaction to personalized
interests, preferences and emotional state.

11
12
A health and fitness companion (HFC), for example, would help provide advice and companionship for
people in the domain of health and fitness. We explored the idea in a two-day workshop attended by
a number of the project partners. During and subsequent to this workshop, two personas were
developed to explore the various needs of people with differing lifestyles, levels of fitness and
exercise regimes.

13
 Developing Scenarios

14
Scenarios are stories about people undertaking activities in contexts using technologies. They appear
in a variety of forms throughout UX design and are a key component of many approaches to design.
Scenarios have been used in software engineering, interactive systems design and HCI work for many
years. However, there are many different varieties and approaches to using scenarios.
One of the main proponents of scenario-based design is John Carroll and his book Making Use (2000)
remains an excellent introduction to the philosophy underlying the approach. In it he illustrates how
scenarios are used to deal with the inherent difficulty of doing design. Drawing on the activity–
technology cycle to show the position in product development, he argues that scenarios are effective
at dealing with five key problems of design.

15
 The external factors that constrain design, such as time constraints, lack of resources, having to
fit in with existing designs and so on.
 Design moves have many effects and create many possibilities, i.e. a single design decision can
have an impact in many areas and these need to be explored and evaluated.
 How scientific knowledge and generic solutions lag behind specific situations. This point
concerns generalities. In other design disciplines, general design solutions to general design
problems have evolved over the years. In UX this does not happen because the technology
changes as soon as, or even before, general solutions have been discovered. Having said that,
some aspects of UX, such as the shopping cart, how to log on to a system and managing dates
and times, have developed quite generic solutions.
 The importance of reflection and action in design.
 The slippery nature of design problems.

Figure next illustrates a scenario in which a person has a large collection of photographs and wishes
to search for a specific image from a recent trip. One feature of this scenario was to explore different
modalities for the companion. The interaction employs both speech and touch depending on the
activity being undertaken.

16
17
USING SCENARIOS THROUGHOUT DESIGN
We distinguish four different types of scenario: stories, conceptual scenarios, concrete scenarios and use
cases. Stories are the real-world experiences of people. Conceptual scenarios are more abstract descriptions
in which some details have been stripped away. Concrete scenarios are generated from abstract scenarios by
adding specific design decisions and technologies and, once completed, these can be represented as use
cases. Use cases are formal descriptions that can be given to programmers. At different stages of the design
process, scenarios are helpful in understanding current practice and any problems or difficulties that people
may be having, in generating and testing ideas, in documenting and communicating ideas to others and in
evaluating designs.

18
1. STORIES: Stories are people’s real-world experiences, ideas, anecdotes and knowledge. These
may be captured in any form and comprise small snippets of activities and the contexts in which
they occur. This could include videos of people engaged in an activity, diary entries, photographs,
documents, the results of observations and interviews and so on. People’s stories are rich in
context.
2. CONCEPTUAL SCENARIOS: Conceptual scenarios are more abstract than stories. Much of
the context is stripped away during the process of abstraction and similar stories are combined.
Conceptual scenarios are particularly useful for generating design ideas and for understanding
the requirements of the system.
3. CONCRETE SCENARIOS: Each conceptual scenario may generate lots of concrete scenarios.
When designers are working on a particular problem or issue they will often identify some
feature that applies only under certain circumstances. At this point they may develop a more
specific elaboration of the scenario and link it to the original. Thus one reasonably abstract
scenario may spawn several more concrete elaborations which are useful for exploring particular
issues. Notes that draw attention to possible design features and problems can be added to
scenarios.
4. USE CASES: A use case describes the interaction between people (or other ‘actors’) and
devices. It is a case of how the system is used and hence needs to describe what people do and
what the system does. Each use case covers many slight variations in circumstances – many
concrete scenarios.
19
 A Scenario-based UX
Design Method

20
 The use of the different types of scenario throughout design can be formalized into a scenario-based
design method. Besides the four different types of scenario, four other artefacts are produced during
the design process: requirements/problems, scenario corpus, conceptual model and design language.
The specification of a system is the combination of all the different products created during the
development process.

21
1. REQUIREMENTS AND PROBLEMS: In the gathering of people’s stories and during the
analysis and abstraction process, various issues and difficulties will come to light. These help the
UX designer to establish a list of requirements – qualities or functions that any new product or
service should have. It needed information about routes and personal preferences. The
requirements and problems product is a prioritized list of issues that the system to be designed
needs to accommodate.

2. SCENARIO CORPUS: In our approach we seek to develop a representative and carefully thought-
through set, or corpus, of scenarios. Having undertaken some analysis activities designers will have
gathered a wide range of user stories. Some of these will be general and some will be quite specific.
Some will be fairly simple, straightforward tasks; others will be more vague. It is important at some point
for the designer to pull these disparate experiences together in order to get a high-level, abstract view of
the main activities that the product is to support.

The rationale for the development of a corpus of scenarios is to uncover the ‘dimensions’ of the design
situation and to demonstrate different aspects of those dimensions. Dimensions include characteristics of the
various domains within which the product will operate (e.g. large and small domains, volatile or static
domains, etc.), the various media and data types that need to be accommodated and the characteristics of
the people who will be using the system. The corpus of scenarios needs to cover all the main functions of the
system and the events that trigger the functions.
22
3. CONCEPTUAL MODEL: The conceptual model shows the main objects in the system, their
attributes and the relationships that exist between them. Conceptual modelling is a very
important part of UX design that is often overlooked. Having a clear, well-designed conceptual
model will make it easier to design so that people can develop a good, accurate mental model of
the system.

DESIGN LANGUAGE

The design language produced consists of a set of standard patterns of interaction and all the physical
attributes of a design – the colours, shapes, icons and so on. These are brought together with the
conceptual actions and objects, and the ‘look and feel’ of the design is completed. A ‘design language’
defines the key elements of the design (such as the use of colour, style and types of buttons, sliders
and other widgets, etc.) and some principles and rules for putting them together. A consistent design
language means that people need learn only a limited number of design elements and then they can
cope with a large variety of situations.

23
 Documenting
Scenarios

24
 Scenarios can become messy, so in order to control the scenarios a structure is needed. We use the
PACT framework (people, activities, contexts, technologies) to critique scenarios and to encourage
designers to get a good description of the scenario. For each scenario the designer lists the different
people who are involved, the activities they are undertaking, the contexts of those activities and the
technologies that are being used. We also structure scenario descriptions. Each scenario is given an
introduction and the history and authorship can be recorded, along with a description of how the
scenario generalizes (across which domains) and the rationale for the scenario. Each paragraph of
each scenario should be numbered for ease of reference and endnotes included where particular
design issues are raised.

When working in a large design team, it is useful to accompany scenarios with real data. This means
that different team members can share concrete examples and use these as a focus of discussion.

25
 Understanding
Usability Goals

26
 Contents Covered
▪ Understand the key issues and concepts of accessibility

▪ Understand the principles underlying usability

▪ Understand the key issues of acceptability

▪ Understand the general principles underlying good UX design.

27
 ACCESSIBILITY

Access to physical spaces for people with different physical abilities has long been an important legal
and ethical requirement and this is now becoming increasingly so for information spaces. With an
increasingly wide range of computer users and technologies, designers need to focus on the demands
their designs make on people’s abilities. Designers have to design for the elderly
and for children.

People will be excluded from accessing interactive systems for any of a number of reasons:

 Physically people can be excluded because of inappropriate siting of equipment or through input
and output devices making excessive demands on their abilities. For example, an ATM may be
positioned too high for a person in a wheelchair to reach, a mouse may be too big for a child’s
hand or a mobile phone may be too fiddly for someone with arthritis to use.

 Conceptually people may be excluded because they cannot understand complicated instructions
or obscure commands or they cannot form a clear mental model of the system or service. The
cognitive capabilities of users need to be considered against the cognitive demands of the
design.

28
  Economically people are excluded if they cannot afford some essential technology or make use
of some service.

 Cultural exclusion results from designers making inappropriate assumptions about how people
work and organize their lives. For example, using a metaphor based on American football would
exclude those who do not understand the game. People can be excluded if they do not
understand the language that a service uses.

 Social exclusion can occur if technology is unavailable at an appropriate time and place or if
people are not members of a particular social group and cannot understand particular social
mores or messages.

Overcoming these barriers to access is a key design consideration. Two main approaches to designing
for accessibility are ‘design for all’ and inclusive design. Design for all (also known as universal design)
goes beyond the design of UX and applies to all design endeavours. It is grounded in a certain
philosophical approach to design encapsulated by an international design community. Inclusive
design is based on four premises:

29
  Varying ability is not a special condition of the few but a common characteristic of being human
and we change physically and intellectually throughout our lives.

 If a design works well for people with disabilities, it works better for everyone.

 At any point in our lives, our self-esteem, identity and well-being are deeply affected by our
ability to function in our physical surroundings with a sense of comfort, independence and
control.

 Usability and aesthetics are mutually compatible.

30
Usability
31
 A system with a high degree of usability will have the following characteristics:

 It will be efficient in that people will be able to do things using an appropriate amount of effort.

 It will be effective in that it contains the appropriate functions and information content,
organized in an appropriate manner.

 It will be easy to learn how to do things and remember how to do them after a while.

 It will be safe to operate in the variety of contexts in which it will be used.

 It will have high utility in that it does the things that people want to get done.

Achieving usability requires us to take a human-centred approach to design and to adopt a design
approach in which evaluation is central. Some early pioneers of usability, Gould et al. (1987),
developed the message kiosks for the 1984 Olympic Games. They based their approach on three key
principles that Gould and Lewis (1985) had evolved over the previous three years.

Their principles were:

32
  Early focus on users and tasks. Designers must first understand who the users will be, in part by
studying the nature of the expected work to be accomplished and in part by making users part
of the design team through participative design or as consultants.

 Empirical measurement. Early in the development process, intended users’ reactions to printed
scenarios and user manuals should be observed and measured. Later on they should actually
use simulations and prototypes to carry out real work, and their performance and reactions
should be observed, recorded and analyzed.

 Iterative design. When problems are found in user testing, as they will be, they must be fixed.
This means design must be iterative: there must be a cycle of design, test and measure, and
redesign, repeated as often as necessary. Empirical measurement and iterative design are
necessary because designers, no matter how good they are, cannot get it right the first few
times ( Gould et al., 1987 , p. 758 ).

As a result of their experiences with that project they added a fourth principle, integrated usability:
All usability factors must evolve together, and responsibility for all aspects of usability should be
under one control.

33
Acceptability
34
 Acceptability is about fitting technologies and services into people’s lives. For example, some railway
trains have ‘quiet’ carriages where it is unacceptable to use mobile phones, and cinemas remind
people to turn off their phones before the film starts. A computer playing loud music would generally
be considered to be unacceptable in an office environment.

An essential difference between usability and acceptability is that acceptability can be understood
only in the context of use. Usability can be evaluated in a laboratory (though such evaluations will
always be limited). Acceptability cannot.

The key features of acceptability are:

 Political. Is the design politically acceptable? Do people trust it? In many organizations new
technologies have been introduced for simple economic reasons, irrespective of what people
may feel about them and the ways that people’s jobs and lives might change. In the broader
environment, human rights might be threatened by changes in technologies, for example by
gathering personal data on people.

 Convenience. Designs that are awkward or that force people to do things may prove
unacceptable. Products and services should fit effortlessly into the situation. Many people send
documents electronically, but some people find reading on-screen unacceptable. They print out
35 the document because it is more convenient to carry and read.
  Cultural and social habits. If political acceptability is concerned with power structures and
principles, cultural and social habits are concerned with the way people like to live. It is rude to
disturb other people, for example. People like to engage with social media such as Twitter, but
may find the insulting comments of internet ‘trolls’ unacceptable.

 Usefulness. This goes beyond the notions of efficiency and effectiveness and concerns
usefulness in context. For example, many people have found the diary service on their phone
perfectly usable but not sufficiently useful in the context of everyday living and keeping it up to
date can be an unacceptable constraint.

 Economic. There are many economic issues that render some technology or service acceptable
or not. Price is the obvious one, and whether the technology offers value for money. But the
economic issues go further than that as the introduction of new technologies may completely
change the way businesses work and how they make money. A new ‘business model’ is often a
part of economic acceptability.

36
Design Principles
37
 Design principles help guide UX designers to create systems that has a high level of usability which
will lead to a good user experience. At a high level the design principles can be grouped as follows:

 Helping users access, learn and remember a system. This is achieved by creating a UI that offers
good visibility, consistency, familiarity, and affordance.

 Ensuring users feel in control of the system, knowing what is expected of them, and how to
interact with the system. This is achieved through good navigation, control, and feedback
mechanisms.

 Making the user aware of how the system assists them to operate the system safely and
securely. This is achieved through recovery mechanisms and error prevention constraints.

 Tailoring the system to suit the user. This is achieved with allowing flexibility, having a stylish
design, and creating a convivial or inviting environment.

38
 THANK
YOU

39