[Human Computer

Interaction]
[ITHIA1-B33]

Eduvos (Pty) Ltd (formerly Pearson Institute of Higher Education) is registered with the Department of Higher Education and Training as a private higher education institution under the
Higher Education Act, 101, of 1997. Registration Certificate number: 2001/HE07/008
 What will be covered
in today’s lesson?
Discuss ideas of experience and the
different traditions from which concepts
come.
Understand Nathan Shedroff’s model of

Week 3 experience
Understand the ideas behind the gamification
of experiences

Understand ‘designing for pleasure’

Understand the importance of
aesthetics

Understand the importance of

lifestyle.
Human Computer Interaction

Experience Design

 Experience design is about recognising that interactive products and services do

not just exist in the world, they affect who we are; they influence our culture and
identity.

 Experience is concerned with all the qualities of an activity that really pull people
in, whether this is a sense of immersion that one feels when reading a good
book, a challenge one feels when playing a good game, or the fascinating
unfolding of a drama.

 It is concerned with all the qualities of the interactive experience that make it
memorable, satisfying, enjoyable and rewarding. Emotion is a very important part
of the experience as experience is about feeling.

 Experiences, therefore, cannot be designed. Designers can design for

experience, but individuals and groups have the experience.
ENGAGEMENT
 Engagement is about ensuring that the interaction flows.

 If usability is concerned with optimising or balancing the PACT elements in some

domain, engagement is when the PACT elements are truly harmonized.

 There is much debate as to what the key features of engagement are and, arguably, this
is really the domain of artistic creation.

However, Nathan Shedroff in his book Experience Design 1 (Shedroff, 2001) presents
a ‘manifesto’ for what he sees as a new discipline. From his work, we identify the key
elements:

IDENTITY:
• A sense of authenticity is needed for identity and expression of the self.

• The sense of authenticity is often noticed only when it breaks down. If you are engaged
in some experience and something happens that suddenly reminds you that it is not
real, then the authenticity of the experience can be lost.

• Shedroff is also getting at the idea of identifying with something as a key element of
engagement. Are you a Mac or a Windows person, or don’t you care?
ENGAGEMENT
ADAPTIVITY:
• Is to do with change and personalisation, difficulty levels, pace and movement.

• Musical instruments are often cited as examples of great interaction design.

• Engagement is not about making things easy. It is about making things that can be
experienced at many levels of skill and enjoyment.

NARRATIVE:
• Is to do with telling a good story with convincing characters, plot and suspense.

• Narrative is not just about fiction; a good narrative is just as important for a company’s
promotional video, a lecture on interaction design, a menu structure on a mobile phone
or any other design problem.

IMMERSION:
• Is the feeling of being wholly involved within something, with being taken over and
transported somewhere else. You can become immersed in all manner of things (such as
reading a book), so immersion is not about the medium, it is a design quality.

FLOW: is the sense of smooth movement, the gradual change from one state to another.
GAMIFICATION
 Computer games have to be designed to be engaging, and many of the principles of
engagement can be seen in this design.

 Increasingly these principles are being applied to various interactive systems.

 Websites need to hold people’s attention and principles of games (‘gamification’) can be
used to interest and motivate people.

 An engaging animated computer game will allow for subtle differentiations of conditions.

 An important feature here is also the integration of media.

 A boring computer game relies on too little change, flow, and depth in the media
components.

Nicole Lazzaro ( Lazzaro, 2012 ) draws the link between fun and emotion in her
contribution to understanding what makes interactive activities engaging.

She identifies five ways that emotions impact the gaming experience:
GAMIFICATION
1. Enjoy. Emotions create strong shifts in internal sensations.
2. Focus. Emotions help gamers to focus their effort and attention.
3. Decide. Emotions are central to decision-making in games.
4. Perform. Emotions increase appeal to enhance performance.
5. Learn. Emotions are important for motivation and attention.

 Lazzaro presents the Four Fun Keys model in which she distinguishes four different
types of fun – hard fun, easy fun, serious fun and people fun – each of which goes on to
unlock emotions such as curiosity, relaxation, excitement and amusement, which
contribute to a good player experience.

1. Hard fun
• Is concerned with overcoming adversity.
• It relates to the gamification effects of mastery, challenge and strategy. For example, it
is no fun in a car racing game if it is hard to start the car and begin the race.

2. Easy fun
• evokes the key emotion of curiosity. Gamification mechanics such as novelty, ambiguity,
fantasy and role play make people curious to explore the interaction.
GAMIFICATION
3. Serious fun
• Is about relaxation.
• It arises when an interactive experience provides rewards that increase people’s self-
worth and allow them to focus on activities. Serious fun is about doing work!

4. People fun
• concerns the emotion of amusement.
• It arises when people are connected to one another in cooperative or competitive
activities.
HCI
Designing for Pleasure
 Product designers have long been concerned with building in pleasure as a key
marketing point.

 Pleasure is a focus for many once much design situations more dominated by the
more functional aspects of usability.

 The Apple MacBook Air is advertised as lightweight and elegant (only 3 cm thick),
with a distinctive and attractive titanium shell.

 While all of these features contribute to the laptop’s usability, they also contribute
to the pleasure of owning, using and (perhaps) being seen with it.

Lionel Tiger, an anthropologist who has developed a framework for

understanding and
organizing thinking about pleasure. This framework is discussed in Tiger’s
book The Pursuit of Pleasure (Tiger, 1992).

Tiger has argued that there are four dimensions or aspects of pleasure: physio-
pleasure, socio-pleasure, psycho-pleasure and ideo-pleasure.
GAMIFICATION
PHYSIO-PLEASURE:
• This is concerned with the body and the senses. Physio pleasure arises from touching or
handling devices or their smell – think about the smell of a new car or the pleasingly solid but
responsive feel of a well-designed keyboard.
• This pleasure is also derived from using devices that fit seamlessly with the human body –
although this is usually noticed when the fit is less than ideal.

SOCIO-PLEASURE:
• Socio-pleasure arises from relationships with others. Products and devices with a socio-
pleasurable aspect either facilitate social activity or improve relationships.
• A very obvious example is the key role that text messaging plays in enhancing social
communication for many people – the use of Twitter to keep in touch or the popularity of
social networking websites such as Facebook.

PSYCHO-PLEASURE:
• Psycho-pleasure (short for psychological pleasure) refers to cognitive or emotional pleasure
in Tiger’s framework.
• This dimension of pleasure is useful for pulling together sources of pleasure, such as the
perceived ease of use and effectiveness of a device and the satisfaction of acquiring new
skills. For some people, learning a complex programming language generates a degree of
satisfaction that they would never feel from moving icons around the screen in a GUI.
GAMIFICATION
IDEO-PLEASURE:
• Ideo-pleasure (ideological pleasure) concerns people’s values – things one holds dear
or meaningful – and aspirations.

• We are more likely to enjoy using items that fit our value system.

• Aspects which come readily to mind here might include respect for careful
craftsmanship and design, the desirability or otherwise of having an expensive device,
and our perceptions of the trading ethics of the supplier (for example, commercial
software as against free shareware).
HCI

Aesthetics
 Aesthetics is a large area of study concerned with human appreciation of beauty and
how things are sensed, felt and judged.

 Aesthetics takes us into artistic criticism and the philosophy of art itself. The
perennial debate here is whether aesthetics can ever be inherent in something or
whether ‘beauty is in the eye of the beholder’.

 In terms of the design of interactive systems, aesthetics has become increasingly

important over the past few years from a number of different directions.

 From the perspective of work on emotion, both Don Norman and Pieter Desmet
emphasise the importance of taking emotions into consideration in design.

Norman’s book Emotional Design (2004) discusses people’s experiences in terms

of visceral, behavioural and reflective elements.
AESTHETICS
• At the visceral level lies the perceptual aesthetics of an experience.
• At the behavioural level, a positive emotional response will come from feeling in control
and the understanding that comes through use.
• At the reflective level are issues of personal values and self-worth.

Pieter Desmet identifies several product emotions in his book Designing Emotions
(2002).

 He sees these as a manageable set of emotions, such as boredom, inspiration,

amusement and so on, that are particularly relevant for product designers.

 This work has resulted in a database of anecdotal evidence about products and
emotions, the product and emotion navigator and a nonverbal method for measuring
people’s response to product features called PrEmo.

 PrEmo consists of fourteen animations of a cartoon character, each expressing an

emotion.

 There are seven positive emotions – inspiration, desire, satisfaction, pleasant surprise,
fascination, amusement, admiration – and seven negative emotions – disgust,
AESTHETICS
LIFESTYLE
 Different people enjoy different things. They have different views on aesthetics.

 Some people like playing games, and others do not. Some people find one thing
pleasurable and others find something else pleasurable.

 Designers need to think of the experience they are creating for different people and their
different lifestyles.

 The development of a brand identity is an important part of people liking and enjoying a
system.

 Some people are ‘Microsoft’ people, others are ‘Apple’ people. Some people love Nike,
and others Reebok.

 These companies spend great effort and money developing, refining and promoting
their brand. They like to be associated with certain events, or to sponsor certain football
or baseball teams, as these associations help to develop the brand. A brand will often
deliver consistent guidelines for designers, such as colours, the use of particular fonts
and so on.
LIFESTYLE
 Experience design, then, concerns the relationship between the brand and the lifestyle
of the users or customers.

 Organizations must pay careful attention to their brand and what differentiates them
from others. They must provide the right services in the right way that suits the lifestyle
of their customers.
 Activity
Get students into breakout rooms:

Consider a standard desktop PC and a small interactive device like a palmtop, mobile
phone or digital camera. Choose recent examples.

a) Analyse each device against Tiger’s four principles, attempting to determine which (if
any) the designers intended to evoke. Note the results of your analysis.

b) Conduct a PACT analysis for each of your chosen two products. Taking account of the
results, discuss whether pleasure is a significant factor in the interaction.
SERVICE DESIGN
 Gillian Crampton-Smith (2004) has argued that ‘the job of the designer is now not just to
design the device, the software, and the way you interact with it, but to design the whole
experience of the service so it is coherent and satisfying.

 UX has moved from designing a website or an app to doing a single thing to designing a
service. In the context of UX, a service is a sequence of interactions that constitutes a
whole, more abstract achievement.

 For example, a smartphone might provide a service that lets users find out how many
steps they have walked.

 The key things about services are multiple touchpoints (any interaction that may alter how
a customer feels) where people encounter a service and that interactions with services
happen over time.

 To be well designed, these touchpoints must demonstrate a consistent look and feel and
present consistent values. Most products, websites and apps provide several services that
together constitute some larger system.

Great examples of good service design are airline check-in, a car is a product, but in service
design terms, it’s a tool when you want to request an Uber ride.
SERVICE DESIGN
 Interactions with services may happen intermittently from different locations and
devices. Thus designers need to consider these different media channels of interaction.

 The time dimension is also important for service design. For example, you may stay
with the same organisation that provides your banking service for years and years. You
will stay with the same dentist or doctor for years.

 Other services, such as purchasing a new washing machine, will require extensive
research, selection of a suitable supplier, weighing up the different packages on offer,
the purchase itself, the delivery and installation and the use of the machine over many
years.

 Although services may be distinguished from products in that services are intangible,
people still have to interact with the service, and this takes place through a physical
interface at a touchpoint (or service moment).

 Designers must consider the whole UX across devices, media, user journey, and over
time.
THE ELEMENT OF UX
The elements describe UX going from the abstract ideas of objectives, and user needs to the
concrete instantiation in visual designs in the same way we discussed conceptual (abstract)
and concrete scenarios.

 The bottom layer is the most abstract (furthest from implementation). This is the ‘strategy’
plane, concerned with understanding the overall objective of the interactive system or
service, the nature of the people who will be using it and what their needs and desires are.
Strategy is also concerned with business goals, the organization’s brand and market
analysis.

 The next layer is the scope plane, where the emphasis is on functionality (what the system
will enable people to do) and content (the information) that the system will hold. Garrett
argues that spending time on the scope plane is important so that UX designers know what
they are designing and what they are not designing! The result of scoping the UX is a clear
plan for the development process
THE ELEMENT OF UX
 The third layer of the elements of user experience is called the ‘structure’ plane. It covers
information architecture but also specifies the interaction design, the data flow and function
allocation between the user and the system.

 The ‘skeleton’ plane concerns information, navigation, and interface design.

 The final element of Garrett’s scheme is the ‘surface’ plane, which he calls visual design but
may consist of many modalities, including sound and touch. We called this representational
design.

NOTE:
 Information design is concerned with laying out information content and presenting data in
a useful and meaningful way.

 Navigation design is concerned with designing menus, links, task bars and all the other
ways that users can get from one part of the system or service to another.
THE ELEMENT OF UX
 A key technique for bringing together all these elements is the ‘wireframe’ Wireframes aim
to capture a skeleton of a general page layout, whether for an app or a web service.

 They are on the border between information architecture and information design, as the
various components of a page are assembled into the standard structures described by
wireframes.
USER JOURNEY
 The idea of a user journey is to map out how users will access a service, taking time to
design these service touchpoints to provide a coherent and consistent UX.

 For example, someone wishing to rent a car will somehow become aware that there is a
car hire service available (perhaps through TV advertising or Googling ‘car hire’), go online
using their laptop computer to browse the options available, make a reservation through
their phone, pick up the car from the depot and use a tablet device to provide feedback
once they have finished with the car hire.

“The design of touchpoints can be critical for UX. For example, a large online retailer
found that many customers left the online shopping journey when they reached the
delivery request process. When they investigated, they found that the ‘Proceed with
order’ button would not work if the order value was less than £10. An error message
was displayed, but it was in a small typeface near the bottom of the screen. To the
users, it appeared nothing was happening, so they would give up. Once a wobble to the
‘Proceed with order’ button was introduced when it was clicked and the value of the
order was less than £10, users understood that something was wrong, and many more
orders were converted into sales.”
USER JOURNEY
 The advice for designers developing a customer journey is to draw up a list of the touchpoints
and lay them out as a service blueprint.

 This shows the service's user interactions, touchpoints, and how backstage activities support
them.

Think about the performance of a rock band on tour. The audience sees a great performance,
but much work goes backstage to provide that experience. The same is true in service design.

 The distinction between the frontstage and backstage aspects of the touchpoint is important. The
support processes are vital if the cross-channel experience is to be delivered effectively.

 The system must somehow keep track of a user's interactions and the interaction history. From
the user’s point of view, the technologies supporting the service are often irrelevant; they just
want to get on with their activities.

 But from the service delivery perspective, maintaining relevant data about the interactions is
critical. Hence so-called cloud-based services have the advantage that data is stored in the cloud
so that it can be accessed by any device connected to the cloud.
USER JOURNEY
 During the experience, the UX design focuses on enabling the user to complete whatever
they want to do as smoothly and enjoyably as possible.

 Even if the service is a physical activity, such as having a meal in a restaurant, there will
often be technological infrastructure behind the scenes that enable the experience.

 Other services, such as watching videos or engaging with social media, might be entirely
online. In these circumstances, users may consume content and generate content through
their posts or photo uploads.
INFORMATION ARCHITECTURE
 Information architecture concerns understanding and designing the information – that is,
the content – that is going to be useful for people undertaking some activity, or that will
otherwise contribute to the user experience.

 For example, if I want to visit a historical site, what information will provide me with a good
experience?

 Should the information architect provide information on the dates of events that happened
there, information about famous people who visited there, and information about
geography and geology?

 Should the information architect provide a video of past events, links to websites for further
information, or an audio guide to provide a tour around the site?

 Should they provide information boards at key locations, maps of the site, and guidebooks,
or should they provide all this sort of information on a smartphone app?

 Should the information architect allow visitors to take photos, or leave audio messages
and tag them with a geo-location so that other visitors can see them?
INFORMATION ARCHITECTURE
 The information architect will provide the structure for the user experience. This structure
will be described in a conceptual model, a representation of the concepts used to describe
the domain of interest. This process is often called developing an ontology, ‘a designed
conceptualization of some activity.

 Information architecture also affects the physical aspects of the interaction.

 For example, if the information architect puts all the objects into a single page on a
website, users will need to scroll down to find the information they are interested in. If the
architect structures the objects into different sections and provides links in a menu on the
page, users can jump directly to the section they are interested in.
EXAMPLE: COMMUTING TO WORK
 Commuting to work by bus is an activity that many people engage in.

 In a case study of a public transportation company in Sweden (Lång and Schlegel, 2015),
the main elements taken into consideration for the conceptualization of the cross-channel
ecosystem that supports this activity included the bus company’s web presence, its mobile
app, its printed customer information and its staff, and the city environment, including
signage, distances and city layout. Analyzing the situation identifies six primary channels:
mobile, web, printed media, service points, bus system and people.

 These consist of various touchpoints in both digital and physical space. Printed media, for
example, includes paper tickets, booklets, bus timetables and bus line maps.

 The ontology of the bus system includes buses, bus stops, lines, routes, journeys and
destinations, among other things. The topology determines which bus stops have distance
and directional relations with each other and with routes and destinations.

 This basic information architecture is distributed across devices, channels and

touchpoints. The part of the information space concerned with routes, lines and bus stops
is fairly static.
 THANK
YOU

29