REVIEWER

CHAPTER 1
Interaction design
 Responsible for commands centered mainly on the exploration of the product
specifications, the designs of anything to meet the requirements, and the development of
the prototype is then evaluated.
 Focus on consumers and their priority.
Design is also about trade-offs— On adjusting immediate concerns

Linus Pauling, twice Nobel Prize winner, said, "The best way to get a good idea is to get a lot
of ideas."

1. Draft
2. Sketch Diagram
3. Prototype

What is involved in Interaction Design?

• Understanding the problem space
• Importance of involving users
• Degrees of user involvement
• What is a user-centered approach?
• Four basic activities of interaction design
• A simple lifecycle model for interaction design

Some practical issues

• Who are the users?
• What are the users’ needs?
• How to generate alternative designs
• How to choose among alternative designs
• How to integrate interaction design activities within other lifecycle models

double diamond of design

1. Discover: Designers attempt to gather insights into the problem.

2. Define: Designers are developing a straightforward brief that identifies the design
challenge.
3. Develop: Remedies or ideas are formed, prototyped, tested and iterated.
4. Deliver: The resulting product will be completed, developed and released.

Bad designs
1. Elevator.
2. A vending machine
3. The Voice-Mail System
Good design
1. "Marble Answering Machine" invented by Bishop (Bishop, 1995

These are the things you need to take into account:

• “Who the users are”
• “What activities are being carried out”
• “Where interaction is taking place”

What is Interaction design?

1. “Designing interactive products to support the way people communicate and interact in
their everyday and working lives.” Sharp, Rogers, and Preece (2019)
2. “The design of spaces for human communication and interaction.” Winograd (1997)
Goals of interaction design
1. Develop usable products – which refers to usability as something that is “easy to learn”,
“effective to use”, and at the same time “can provide enjoyable experience”
2. It takes into consideration the users in its design process.

Here are some examples of different types of design:

1. “User Interface Design”
2. “Software Design”
3. “User-centered Design”
4. “Product Design”
5. “Web Design”
6. “Experience Design (UX)”

1. Relationship between ID, HCI, and other fields−academic disciplines Academic

disciplines contributing to ID:
• Psychology
• Social Sciences
• Computing Sciences
• Engineering
• Ergonomics
• Informatics
2. Relationship between ID, HCI and other fields−design practices Design practices
contributing to ID:
• Graphic design
• Product design
• Artist-design
• Industrial design
• Film industry
3. Relationship between ID, HCI and other fields−interdisciplinary fields
Interdisciplinary fields that ‘do’ interaction design:
• HCI
• Ubiquitous Computing
• Human Factors
• Cognitive Engineering
• Cognitive Ergonomics
• Computer Supported Co-operative Work
• Information Systems

User Experience - refers to the observation of how a product behaves and is being utilized
by people in real life.
Hassenzahl’s (2010) model of the user experience looks into two characteristics, your
product must be pragmatic and at the same time pleasurable/hedonic.
• Pragmatic: “refers to how simple, practical, and obvious it is for the user to achieve their
goals”
• Hedonic: refers to “how evocative and stimulating the interaction is to users “

Accessibility
refers to the degree over which as many individuals as possible can access an interactive
product.
It is possible to achieve accessibility in 2 ways:
4. inclusive technology design
5. assistive technology design

The common classification by the type of impairment are:

1. Sensory impairment (such as loss of vision or hearing)
2. Physical impairment (having loss of functions to one or more parts of the body, for
example, after a stroke or spinal cord injury)
3. Cognitive (for instance, learning impairment or loss of memory/cognitive function due to
old age or a condition such as Alzheimer’s disease)

Impairment can also be categorized as follows:

• Permanent (for example, long-term wheelchair user)
• Temporary (such as after an accident or illness)
• Situational (for instance, a noisy environment means a person can’t hear)

Inclusiveness: refers to the manufacturing of products and services which support as many
individuals as possible.

Usability considers the perspective of the user, it aims to design interactive products that are
easy to learn, efficient to use, and enjoyable. It includes optimizing interactions with
interactive products to allow them to perform their activities at work, at classroom, and in one
‘s regular lifestyle.

Useability has 6 goals:

1. Effective to use
2. Efficient to use
3. Safe to use
4. Have good utility
5. Easy to learn
6. 6. Easy to remember how to use

Usability and User experience goals takes into considerations of choosing terms to express
the emotions, feelings, and so on of a person can help designers understand the multifaceted
nature of the user experience.
Design principles - Interaction designers use design principles to support their thought
process when designing for the user experience. These are generally applicable abstractions
aimed at orienting designers to look at various elements of their designs.

• “Generalizable abstractions for thinking about different aspects of design”

• “The do’s and don'ts of interaction design”
• “What to provide and what not to provide at the interface”
• “Derived from a mix of theory-based knowledge, experience, and common-sense”

Visibility - Improving on a poor interface

Feedback - is relative to the notion of visibility. This is best demonstrated by a metaphor to

what daily life without it would be like.
• Sending information back to the user about what has been done
• Includes sound, highlighting, animation, and combinations of these • For example, when
screen button is clicked, it provides sound or red highlight feedback:

Constraints - The idea of constraining design refers to the determination of ways to limit the
types of user interaction that can take place at a given moment. There are different ways that
this can be done. Constraints involves actions, such as:
• “Restricting the possible actions that can be performed”
• “Helps prevent user from selecting incorrect options”
• “Physical objects can be designed to constrain things. (for example, there being only one
way you can insert a key into a lock)”

Consistency
 relates to the design of interfaces with similar operations and the use of comparable
elements to achieve similar tasks.
 A consistent interface is specifically one that follows rules, such as using the same
operation to select all objects.
 Design interfaces to have similar operations and use similar elements for similar 19
tasks. (for example, always use Ctrl key plus first initial of the command for an operation:
Ctrl+c, Ctrl+s, Ctrl+o). Products that has consistent interfaces are easy to navigate and
use.
Internal consistency refers to designing operations within an application to behave the
same. This is hard to accomplish with complex interfaces.
External consistency refers to developing operations, interfaces, and so on across apps and
devices to be the same. Very rarely, on the basis of the predisposition of different designers.

Affordances:
 This is a term used to refer to an object characteristic that enables people to
comprehend what to do with it.
 It basically, means “To give a clue” on how to use a particular product.
User – centered design pertains to the involvement and consideration of the perception and
needs of the users all throughout the whole process. It is done so, by doing a study about the
target user/client then compile and draft the summary of their ideas from gathered surveys.

What is a user-centered approach?

User-centered approach is based on:
• “Early focus on users and tasks: directly studying cognitive, behavioral, anthropomorphic,
and attitudinal characteristics “
• “Empirical measurement: users’ reactions and performance to scenarios, manuals,
simulations, and prototypes are observed, recorded, and analyzed”
• “Iterative design: when problems are found in user testing, fix them and carry out more
tests”

Four basic activities of Interaction Design

1. Discovering requirements
2. Designing alternatives
3. Prototyping alternative designs
4. Evaluating product and its user experience throughout

Four basic activities in interaction design process

▪ Discovering requirements
▪ Designing alternatives
▪ Prototyping
▪ Evaluating
User-centered design rests on three principles
▪ Early focus on users and tasks
▪ Empirical measurement using quantifiable and measurable usability criteria
▪ Iterative design

CHAPTER 2
Conceptualizing design
 generating ideas, it is essential to conceptualize them in definitions of what the product
proposed will do.
 This is sometimes referred to as developing a proof of concept.
 is important to examine vague ideas and assumptions regarding the advantages of a
particular type product or service in terms of its feasibility.
 It also answers the question if your design can be realistically be develop with the current
tools, machineries and with the kind of technology we have.
 Conceptualization of design also, looks into the effectiveness and desirability of the
product.

Proof of concept pertains to conceptualizing what the proposed product will do.

Assumption “refers to taking something for granted when it needs further investigation”

claim tells that even if it is still up for question, one already asserts that something is true
example

Benefits of conceptualizing
1. Orientation - It allows design teams to ask particular questions on how to perceive the
conceptual model.
2. Open-minded - Discourages design teams from focusing narrowly at an early stage
3. Common ground - Enables design teams to create a set of rules commonly agreed to
each and everyone in the team

design space -can be informed by a thorough understanding of a problem space. Also,

indicates, which sort of interface, behavior, functionality to provide
Model- is a simplified description of a system or process that helps describe how it works.

The First steps in formulating a conceptual model according to Johnson and

Henderson, are the following:
1. What will the users be doing when carrying out their tasks?
2. How will the system support these?
3. What kind of interface metaphor, if any, will be appropriate?
4. What kinds of interaction modes and styles to use?
5. Always keep in mind when making design decisions how the user will understand the
underlying conceptual model

conceptual model -offers a working strategy in a nutshell and a framework of general

concepts and their interrelationships

The following are the core components:

1. Metaphors and analogies aims to tell people how to recognize what a product is being
used for and also how to use it for an activity. (for example browsing and bookmarking).
2. The concepts to which people are exposed through the product, They create and
manipulate taskdomain objects, their attributes, and the operations that can be performed on
them, (such as saving, revisiting, and organizing).
3. The relationships between those concepts (for instance, whether one object contains
another).
4. The mappings between the concepts and the user experience the product is designed
to support or invoke a design (for example, one can revisit a page through looking at a list of
visited sites, mostfrequently visited, or saved websites).

Types of Conceptual Model

Metaphor Concept Model

 Metaphors is a central component of a conceptual model.
 They provide a framework which is comparable to aspects of a familiar entity (or entities)
in some way, but they have their own behaviors and properties as well

1. Interface metaphors - The interface was developed to be akin to a physical entity, but it
has features of its own. Interface metaphors can also be based on activities, objects, or a
byproduct of both.
2. The card metaphor – considered to be the very popular UI because of its familiar form and
its characteristics to be easily flicked through, ordered and themed.
Interaction Types
•Instructing: Where users issue a system with instructions.
• Conversing: Where users do have software dialog. Users could even speak through an
interface or type questions that are answered by the system via text or speech output.
• Manipulating: Where users in a virtual or physical space interact with objects by
manipulating them
• Exploring: Where users navigate through a physical space or a virtual environment.
•Responding: Where the interaction is initiated by the system and the user decides whether
to react.

Difference between interaction types and interface styles Interaction type:

1. Interaction type: is regarded as a definition as to what the user does when interacting with
a system, such as teaching, talking, browsing, or responding to the style of the interface.
2. Interface style:• The kind of interface used, such as command, menu-based, gesture, or
voice, to support interaction
Paradigm - In terms of shared assumptions, concepts, values, and practices, a paradigm
refers to a general approach adopted by a community of researchers and designers to carry
out their work.

Vision - Vision is a future state that shapes interaction design research and development,
often depicted in the form of a movie or narrative.
Theory It is a well-founded description of some part of a phenomenon; The theory of
processing information, for instance, describes how well the mind, or some aspect of it, is
supposed to function.
Model is a simplified representation of some aspect of human-computer interaction intended
to facilitate the prediction and evaluation of alternative designs by designers.
Framework is a set of interrelated concepts and/or a set of defined queries intended to inform
a specific field (e.g. collaborative learning) or an analytical method (for instance, ethnographic
studies).

CHAPTER 3
Cognition refers to some of our common activities such as Thinking, remembering, learning,
daydreaming, decision-making, seeing, reading, talking, writing…
According to two experts in the study of cognition, there are ways of classifying
cognition at a higher level:
▪ Experiential vs. reflective cognition (Norman, 1993)
▪ Fast vs slow thinking (Kahneman, 2011)

Cognitive Process
• Attention
• Perception
• Memory
• Learning
• Reading, speaking and listening
• Problem-solving, planning, reasoning and decision-making

Attention is mostly about selecting objects to focus on at a point in time from the mass of
stimuli around us, and allows anyone to pay attention on information relevant to what we're
doing. This also involves senses that are visual and/or audio.

There are two types of attention:

 Focused
 divided attention

Multitasking can make people lose their way of thinking, make mistakes, and have to start
over

• Weller (2004) found people took less time to locate items for information that was grouped
▪ Using a border (2nd screen) compared with using color contrast (1st screen)
▪ Some argue that too much white space on web pages is detrimental to search process
▪ Makes it hard to find information

Design implications
• Icons should enable users to distinguish their meaning readily
• Bordering and spacing are effective visual ways of grouping information • Sounds should be
audible and distinguishable
• Research proper color contrast techniques when designing an interface:
▪ Yellow on black or blue is fine
▪ Yellow on green or white is a no-no
• Haptic feedback should be used judiciously
Memory
• Involves recalling various kinds of knowledge that allow people to act appropriately
▪ For example, recognizing someone’s face or remembering someone’s name
• First encode and then retrieve knowledge • We don’t remember everything−it involves
filtering and processing what is attended to
• Context is important as to how we remember (that is, where, when, how, and so on)
• We recognize things much better than being able to recall things
• We remember less about objects that we have photographed than when we observe them
with the naked eye (Henkel, 2014)

Processing in memory
• Encoding is first stage of memory
▪ Determines which information is attended to in the environment and how it is
interpreted
• The more attention paid to something…
• The more it is processed in terms of thinking about it and comparing it with other
knowledge…
• The more likely it is to be remembered
▪ For example, when learning about HCI, it is much better to reflect upon it, carry out
exercises, have discussions with others about it, and write notes than just passively read a
book, listen to a lecture or watch a video about it

Context is important
• Context affects the extent to which information can be subsequently retrieved
• Sometimes it can be difficult for people to recall information that was encoded in a different
context:
▪ “You are on a train and someone comes up to you and says hello. You don’t
recognize him for a few moments, but then realize it is one of your neighbors. You are only
used to seeing your neighbor in the hallway of your apartment building, and seeing him out of
context makes him difficult to recognize initially

Recognition versus recall

• Command-based interfaces require users to recall from memory a name from a possible set
of 100s of names
• Graphical interfaces provide visually-based options (menus, icons) that users need only
browse through until they recognize one
• Web browsers provide tabs and history lists of visited URLs that support recognition memory

The problem with the classic ‘7,+ or − 2’

• George Miller’s (1956) theory of how much information people can remember
• People’s immediate memory capacity is very limited to 7, + or − 2 • Has been applied in
interaction design when considering how many options to display • But is it a good use of a
theory in HCI?
• Is it helpful?

When creating an interface, should the designer…

• Present only 7 options on a menu
• Display only 7 icons on a tool bar
• Have no more than 7 bullets in a list
• Place only 7 items on a pull down menu • Place only 7 tabs on the top of a website page?
• Not necessarily…

Personal Information management

• Bergman and Whittaker, three interdependent processes model (2016) to help people
manage their stuff:
I. How to decide what stuff to keep
II. How to organize it when storing
III. Which strategies to use to retrieve it later
• Most common approach is to use folders and naming
• Strong preference for scanning across and within folders when looking for something
• Search engines only helpful if you know the name of the file
• Smart search engines help with listing relevant files for partial name or when type in first
letter

Memory load - Online/mobile and phone banking now require users to provide multiple
pieces of information to access their account

Digital Forgetting
• When might you wish to forget something that is online?
▪ When you break up with a partner
▪ Emotionally painful to be reminded of them through shared photos, social media, and so on.
▪ Sas and Whittaker (2013) suggest ways of harvesting and deleting digital content
▪ For example, making photos of ex into an abstract collage ▪ Helps with closure

Memory aids •
SenseCam, developed by Microsoft Research Labs (now Autographer)
▪ A wearable device that intermittently takes photos without any user intervention while worn
▪ Digital images taken are stored and revisited using special software
▪ Has been found to improve people’s memory, especially those suffering from dementia
• Other aids include RemArc, which triggers long-term memory using old BBC materials

Learning
• Involves the accumulation of skills and knowledge involving memory • Two main types:
1. Incidental learning (for example, recognizing people’s faces, what you did today)
2. Intentional learning (for instance, studying for an exam, learning to cook)

Reading, speaking, and listening

The ease with which people can read, listen, or speak differs:
• Many prefer listening to reading
• Reading can be quicker than speaking or listening
• Listening requires less cognitive effort than reading or speaking
• Dyslexics have difficulties understanding and recognizing written words
Applications
• Voice user interfaces allow users to interact with them by asking questions
▪ For example, Google Voice, Siri, and Alexa
▪ Speech-output systems use artificially-generated speech
▪ For instance, written text-to-speech systems for the visually impaired
• Natural-language systems enable users to type in questions and give text-based responses
▪ Such as, chatbots

Problem-solving, planning, reasoning, and decision-making

• All these processes involve reflective cognition
▪ For example, thinking about what to do, what the options are, and the
consequences
• Often involves conscious processes, discussion with others (or oneself), and the use of
artifacts
▪ Such as maps, books, pen and paper
• May involve working through different scenarios and deciding which is best option
• Weighing up alternatives

Dilemma
• The app mentality is making it worse for people to make their own decisions because they
are becoming risk averse (Gardner and Davis, 2013)
▪ Instead, they now rely on a multitude of apps ▪ This makes them increasingly
anxious
 ▪ They are unable to make decisions by themselves ▪ They need to resort to looking
up info, getting other’s opinions on social media, and comparing notes • Do you agree?
• Did it happen to you when deciding which university/school to attend?

Cognitive frameworks
• These are used to explain and predict user behavior at the interface
▪ Based on theories of behavior
▪ Focus is on mental processes that take place
▪ Also use of artifacts and representations
• Most well known are:
▪ Mental models
▪ Gulfs of execution and evaluation
▪ Distributed cognition
▪ External and embodied cognition

Mental models
• Users develop an understanding of a system through learning about and using it
• Knowledge is sometimes described as a mental model:
• How to use the system (what to do next)
• What to do with unfamiliar systems or unexpected situations (how the system
works)
• People make inferences using mental models of how to carry out tasks
More mental models
• Craik (1943) described mental models as:
▪ Internal constructions of some aspect of the external world enabling predictions
to be made
• Involves unconscious and conscious processes
▪ Imagery and analogies are activated
• Deep versus shallow models
▪ For example, how to drive a car and how it works

Heating up a room or oven that is thermostat-controlled

• Many people when asked (a) choose the first option
• Why?
▪ They think it will heat the room up quicker
▪ General valve theory, where ‘more is more’ principle is generalized to different
settings (for instance, gas pedal, gas cooker, tap, radio volume)
▪ But it is a wrong mental model for thermostats based on on- off switch model
• Many people when asked (b) choose the first option
▪ Electric ovens work on the same principle as thermostats
• Most of us have erroneous mental models (Kempton, 1996)

Erroneous mental models

• Lots of people hit the button for elevators and pedestrian crossings at least twice
▪ Why? Think it will make the lights change faster or ensure that the elevator
arrives!
• What kinds of mental models do users have for understanding how interactive devices
work?
▪ Poor, often incomplete, easily confusable, based on inappropriate analogies and
superstition (Norman, 1983)

How can UX be designed to help people build better mental models?

• Clear and easy to use instructions
• Appropriate tutorials and contextual sensitive guidance
• Provide online videos and chatbot windows when needing help
• Transparency: to make interfaces intuitive to use
• Affordances of what actions an interface allows
▪ For example, swiping, clicking, or selecting
Gulfs of execution and evaluation
• The ‘gulfs’ explicate the gaps that exist between the user and the interface
• The gulf of execution
▪ The distance from the user to the physical system
▪ The gulf of evaluation
▪ The distance from the physical system to the user
• Bridging the gulfs can reduce cognitive effort required to perform tasks
• Can reveal whether interface increases or decreases cognitive load and whether it is
obvious what to do next (Norman, 1986; Hutchins et al, 1986)

Bridging the Gulf

External cognition
Concerned with explaining how we interact with external representations (such as maps,
notes, and diagrams)
Externalizing to reduce memory load
Examples include the use of diaries, reminders, calendars, notes, shopping lists, to-do lists
Computational offloading
When a tool is used in conjunction with an external representation to carry out a computation
(for instance, pen and paper)

Annotation and cognitive tracing

• Annotation involves modifying existing representations through making marks
▪ For example, crossing off, ticking, and underlining
• Cognitive tracing involves externally manipulating items into different orders or structures
▪ For instance, playing Scrabble or cards

Embodied Interaction
• The practical engagement with the social and physical environment (Dourish, 2001)
• Creating, manipulating and making meaning through our interaction with things
• How our bodies and active experiences shape how we perceive, feel, and think (Hornecker
et al., 2017)
• They enable us to develop a sense of the world at both a concrete and abstract level
• Can provide new ideas about interaction and better design principles
▪ For example, we think with our bodies not through them (Kirsh, 2013)

CHAPTER 4

"Sociality" has different types and ways of learning. The focus in this chapter is to
comprehend and observe how individuals socialize and communicate together in their
working life, civic work and personal life.
Social life is a central part of daily life – connecting with one another, we unconsciously or
consciously update other people, we either often “have to interact with” or “someone close to
us”, about other's life on different aspects.

Face to Face conversations

Speaking is a trait that most individuals often find natural and simple. But it is still the art of
maintaining a conversation that is a regarded as highly qualified integrative achievement. Let
us note the example given below:
A: Kamusta na?
B: Hi! Kmusta din
C: Hi. Kamusta kayo?
A: Ayos lang ba kayo?
C: Ou, Ayos lang ako. Ikaw ba? How is it going with your life lately? A: I’m Fine, how about
you?
C: Ok naman ako.
B: Good to know. So, how's life treating you?

Remote Conversations
 Alexander Graham Bell invented the telephone back in the late 19th century, allowing
the two individuals to communicate to each other at a remote location at the same time.
 A large number of all of the other techniques have since been developed that maintain
sequential remote conversations, such as synchronous distant interactions like video
calling, video chat, VoIP (Voice over Internet Protocol).
 With this, new generations of media spaces were explored at the end of the 1980s and
1990s.
 The aim was to see whether it was possible for people to meet and collaborate with each
other, split over time - distance, as if they were physically present.
 Voice, multimedia and computer systems have been integrated to enhance the society of
office desk, chairs, ceilings and walls (Harrison, 2009)
Tele-presence
For many interactions, such as family occasions, work meetings, and simply going out
partying, it is without question that face-to-face discussions with work colleagues,
relationships, and friends will continue to be preferable.

Co presence
There has already been a great deal of interest in co-presence alongside telepresence.
Various interfaces for sharing have been built to facilitate more than one individual to use
them at the same time. The inspiration is to allow co-located teams to work, learn, and
socialize more efficiently in collaboration