TARIO-LIM MEMORIAL CAMPUS

Tibiao, Antique

APDEV 1
Application Development and
Emerging
Eme Technologies
Chapter 3
 CHAPTER 3

INTERACTION DESIGN

Lesson 1. Introduction to Interaction Design

Topic 1 – UNDERSTANDING AND CONCEPTUALIZING INTERACTION DESIGN

Interaction Design - Designing interactive products to support the

way people communicate and interact in their
everyday and working lives.
- Fundamental to all disciplines, fields, and
approaches that are concerned with researching
and designing computer-based systems for
people
- The notion of the user experiences is central to
interaction design.

Comparison between Interaction Design and Human Computer

Interaction

Interaction design has cast its net much wider, being concerned
with the theory, research, and practice of designing user experiences for all
manner of technologies, systems, and products.

Human Computer Interaction traditionally had a narrower

focus, being
concerned with the design, evaluation, and implementation of
interactive computing systems for human use and with the study of major
phenomena surrounding them.

Computer-Supported Cooperative Work (CSCW) – concerned with the

need also to support multiple people working together using
computer systems

PROCESS OF INTERACTION DESIGN

1. Establishing requirements
2. Designing alternatives
3. Prototyping
4. Evaluating

USABILITY GOALS

1. Effective to use (effectiveness)

- Refers to how good a product is at doing what it
is supposed to do.
2. Efficient to use (efficiency)
- Refers to the way a product supports users in
carrying out their tasks.
3. Safe to use (safety)
- Refers to protecting the user from dangerous
conditions and undesirable situations
 4. Having good utility (utility)
- Refers to the extent to which the product provides
the right kind of functionality.
5. Easy to learn (learnability)
- Refers to how easy a system is to learn to use.
6. Easy to remember how to use (memorability)
- Refers to how easy a product is to remember how
to use, once learned.

DESIGN PRINCIPLES

1. Visibility
2. Feedback
3. Constraints
4. Consistency
5. Affordance

PRINCIPLES IN DECIDING WHICH AND WHAT TO DESIGN

1. Taking into account what people are good and bad at.
2. Considering what might help people with the way they
currently do things
3. Thinking through what might provide quality user
experiences
4. Listening to what people want and getting them involved in
the design
5. Using tried and tested user-based techniques during the
design process

CONCEPTUAL MODELS

Conceptual model provides a working strategy and a framework

of general concepts and their interrelations.

The CORE COMPONENTS of Conceptual Model

1. Metaphors and analogies that convey to people how to
understand what a product is for and how to use it for
an activity (e.g. browsing, bookmarking).

2. The concepts that people are exposed to through the

product, including the task-domain objects they create
and manipulate, their attributes, and the operations
that can be performed on them (e.g. saving, revisiting,
organizing).
3. The relationship between those concepts (e.g. whether one
object contains another, the relative importance of
actions to others, and whether an object is part of
another).
4. The mappings between the concepts and the user
experience the product is designed to support or invoke
(e.g. one can revisit through looking at a list of visited
sites, most frequently visited, or saved websites).
Interface Metaphors – one that is instantiated in some way as part of the
user interface, e.ge the desktop metaphor or the search engine.
- intended to provide familiar entities that enable people
to readily understand the underlying conceptual model and know
what to do at an interface.

The Interaction Types

1. Instructing – where users issue instruction to a system like
typing in commands or selecting options in a menu
2. Conversing – where users have a dialog with a system like a
system replying via text or speech output
3. Manipulating – where users interact with objects in a virtual
or physical space by manipulating them like opening,
holding, closing, or placing.
4. Exploring – where users move through a virtual environment
or a physical space like 3D worlds, augmented reality
and virtual reality systems.

Topic 2 – COGNITIVE ASPECTS

What is COGNITION?
- The state of mind in which we perceive, act, and react to
events around us intuitively and effortlessly. It requires
reaching a certain level of expertise and engagement and
distinguishing between two general modes – experiential
and reflective cognition. (Norman, 1993)
- Involves mental effort, attention, judgement, and decision
making. This kind of cognition leads to new ideas and
creativity which is considered reflective cognition and slow
thinking. (Kahneman, 2011)
- It can also be described in terms of the context in which it
takes place, the tools that are employed, the artifacts and
interfaces that are used, and the people involved
depending on when, where, and how it happens. It can
also be distributed, situated, extended, and embodied.

SPECIFIC KINDS OF PROCESSES

1. Attention – process of selecting things to concentrate

on, at a point in time, from the range of
possibilities available.
2. Perception – refers to how information is acquired
from the environment via the different sense
organs and transformed into experience of
objects, events, sounds, and tastes (Roth,
1986)
3. Memory – involves recalling various kinds of knowledge
that allow us to act appropriately.
4. Learning – refers to what people would prefer to use to
learn. It is well-known to use set of
 instructions in a manual but people learn
more through doing like GUIs and
manipulation interfaces which supports this
active kind of learning from the support of
exploratory interaction and allowing users to
undo their actions.
5. Reading, Speaking, and Listening – three forms of
language processing that have the similar and
different properties. For example, the
meaning of sentences or phrases is the same
regardless og the mode in which it is
conveyed.
6. Problem Solving, Planning, Reasoning, and Decision
Making – processes involving reflective
cognition which include thinking about what
to do, what the options are, and what the
consequences might be of carrying out a
given action.

COGNITIVE FRAMEWORKS

Internal Frameworks – focus primarily on metal processes

• Mental models
• Gulfs of execution and evaluation
• Information processing

External Frameworks – explains how humans interact and

use technologies in the context in which
they occur
• Distributed cognition
• External cognition
• Embodied interaction

Topic 3 – SOCIAL INTERACTION

Social interaction is central to our everyday life. It is not

surprising given that humans are inherently social: they live
together, work together, learn together, play together, interact
and talk with each other, and socialize. Examine the
emergence of a diversity of communication – technologies have
changed the way people live – the way they keep in touch, make
friends, and coordinate their social and work networks. Look
at the conversation mechanisms that have conventionally
been used in face-to-face interactions and how these have
changed for the various kinds of computer-based
conversations that place at a distance like the telepresence,
where novel technologies have been designed to allow a person
to feel as if they are present or to give the appearance of being
present at another location.
 BEING SOCIAL

• Interacting with each other whether face-to-face or

use of social media.

• Remote conversation dating back when people are still

using telephone as a means of communication for two
people talking to one another at a distance.

• Telepresence allows the presence of a person without

actually being there physically.

• Co-presence is the kind of parallel interaction that

enables co-located groups to collaborate more
effectively in which more than one-person see them at
the same time.

Social mechanisms have evolved in face-to-face and remote

contexts to facilitate conversation, coordination, and awareness. Talk and
the way it is managed are integral to coordinating social interaction.
Many kinds of computer-mediated communication systems have been
developed to enable people to communicate with one another when in
physically different locations. Keeping aware of what others are doing and
letting others know what you are doing are important aspects of
collaboration and socializing. Social media have brought about significant
changes in the way people keep in touch and manage their social lives.

Topic 4 – EMOTIONAL INTERACTION

Emotional interaction is concerned with how we feel and react

when interacting with technology. It covers aspects of the user experience,
from how we feel when we first find out about a new product to getting rid
of it. It also looks at why people become emotionally attached to certain
products, how social robots might help reduce loneliness, and how to
change human behavior through the use of emotive feedback. Emotional
aspects of interaction design are concerned with how to facilitate certain
states or avoid certain reactions in user experience.
Understanding how emotions work provides a way of considering
how to design interfaces and apps that can trigger affect or reflection in
the user. One way is using emotional design in which you have to think
about how to design products in terms of three levels, namely:

• Visceral Design – refers to making products look, feel, and

sound good
• Behavioral Design – is about use and equates with the
traditional values and usability
• Reflective Design – is about taking into account the
meaning and personal value of a product in a particular
culture.

Expressive forms like emoticons, sounds, icons, and virtual

agents have been used at the interface to convey emotional states and
 elicit certain kinds of emotional responses in users, such as feeling at
ease, comfort, and happiness. It can provide reassuring feedback to
users as well as be informative and fun. Other ways of conveying the
status of a system are through the use of:

• Dynamic Icons
• Animations
• Spoken messages, using various kinds of voices telling the
user what needs to be done
• Various sonification indicating actions and events
• Vibrotactile feedback, such as distinct smartphone buzzes
that specifically represent special messages from friends and
family.

The style of an interface, in terms of the shapes, fonts, colors,

balance, white space, and graphical elements that are used and the way
they are combined can also influence emotional impact. Well- designed
interfaces can elicit good feelings in people. Aesthetically pleasing
interfaces can be a pleasure to use. However, computer interfaces
may inadvertently elicit negative emotional responses such as anger and
disgust. This typically happens when something that should be simple to
use turns out to be complex.

Interfaces designed poorly can make people look stupid, or feel

insulted or threatened which can turn them to be frustrated, annoyed, or
angry which may lead to lose their temper.

Emotional technologies can be designed to persuade people to

change their behaviors or attitudes
better.

Source: >> Interaction Design: Beyond Human-Computer Interaction, 4th Edition,

Jennifer Preece, Yvonne Rogers, Helen Sharp, John Wiley & Sons Ltd, 2015.
Page 1-152.

Post Test/Enrichment Activity

(This should be answered/done and to be submitted as SOFT COPY

at LMS)

1. Most of us are familiar with the “404 error” message that pops up
now and again when our computer doesn’t upload the web page
we’re trying to view. What does it mean and why the number
404? If you were to design it, what would be your better way of
letting users know when they or the computer made an error?
 CHAPTER 3

INTERACTION DESIGN

Lesson 2. Interaction Design Beyond Human-Computer Interaction

Topic 1. Interfaces

Objectives:

At the end of the unit lesson, the learners can:

• Enumerate the different kinds of interfaces

• Discuss the difference between graphical (GUIs) and natural user

interfaces (NUIs)

A. INTERFACE TYPES

Interface – the place at which independent and often unrelated systems

meet and act on or communicate with each other.

1. Command-based

- Requires users to type in commands that were typically

abbreviations at the prompt, sending commands through
pressing certain combinations of keys (e.g. Alt+Ctrl+Del), and
by sending commands through the keys that are fixed part of
the keyboard (e.g. delete, enter, F1)

- TextSI was developed to enable the visually impaired to

participate in virtual world by using a screen reader

- Design issues concern the forms of names of commands,

syntax, and organization. The most relevant design principle
is consistency.

2. WIMP and GUI

- the birth of new ways of designing the interface which include

use of color, typography, and imagery.

- First generation of WIMP was primarily a boxy in design

(windows, scroll bars, checkboxes, panels, palettes and dialog
box)

- What Comprises WIMP:

o Windows Icons
o Menus
o Pointing Device
 - Basic building blocks of WIMP are still part of the modern GUI
which includes icons and menus in 2D and 3D. some
graphical elements are also incorporated which include
toolbars and docks and rollovers

3. Multimedia

- Combination of different media within a single interface

namely graphics, text, video, sound, and animations, and
links the with various forms of interactivity.

- Distinctive feature is its ability to facilitate rapid access to

multiple representations of information.

- Developed for training, educational, and entertainment

purposes.

4. Virtual Reality

- Uses computer-generated graphical simulations to create “the

illusion of participation in a synthetic environment rather that
external observation of such an environment”

- Refers to the experience of interacting with an artificial

environment (virtual environment) which makes it feel
virtually real.

- Main attraction is it provide opportunities for new kinds of

immersive experience, enabling users to interact with objects
and navigate in 3D space in ways not possible in the physical
world or a 2D graphical interface.

- Advantage of VR is that simulations can be constructed to

have a higher level of fidelity with the objects it represents and
it can offer different viewpoints

5. Information Visualization and Dashboards

- (infoviz) computer-generated graphics of complex data that are

typically interactive and dynamic.

- Goal is to amplify human cognition, enabling users to see

patterns, trends, and anomalies in the visualization to gain
insight.

- Common technique used is 3D interactive maps that can be

zoomed in and out of and which present data via webs, trees,
clusters, scatterplot diagrams, and interconnected nodes.

- Dashboard is a popular form of visualizing information that

show screenshot of data updated over periods of time,
intended to be read at a glance and depict the current state of
a system or process. This involves working out how best to
combine and contrast different elements.
6. Web

- Design is concerned with best structure information at the

interface to enable users to navigate and access it easily and
quickly

- Aesthetically pleasing, usable, and easy to maintain.

- Goal is to make web pages distinctive, striking, and

pleasurable for the user.

- User-centered editing tools and programming languages

provide opportunities for both designers and general public to
create websites that look and behave like multimedia
environment like customized web pages.

- Swiping also became the new form of interaction.

7. Consumer Electronics and Appliances

- Includes machines for everyday use and personal devices.

- Most people using them will be trying to get something specific

done in a short period of time, such as buying a ticket, taking
a snapshot, or operating a programmable washing machine
rather than spending time exploring the interface or get
through the manual

8. Mobile

- Became the business tools to clinch important deals, a remote

control for the real world, and a relationship appliance.

- Applicable for different categories like games, entertainment,

social networking, music, productivity, lifestyle, travel, and
navigation (GPS)

- Also be used to download contextual information by scanning

barcodes.

9. Speech

- It is where a person talks with a system that a spoken

language application like a train timetable, a travel planner, or
a phone service.

- Most popular application is routing where companies use

automated speech system to enable users to reach one of their
services, replacing the frustrating and unwieldy touchtone
technology for navigating their services.

- Speech-based phone apps that enable users to use the while

moving.
10. Pen

- Using light pens or styluses to write, draw, select, and move

objects at an interface that capitalize on the well-honed
drawing and writing skills.

- Allows users to quickly and easily annotate existing

documents, such as spreadsheets, presentations, and
diagrams.

- Disadvantage of using pen-based interactions on small

screens is it is sometimes difficult to see options on the screen
as user’s hand can occlude part of it when writing.

11. Touch

- Works by detecting presence and location of a person’s touch

on the display like kiosks (museum guides), ATMs and till
machines (restaurants).

- Most notable are the richer ways of reading, scanning, and

searching interactive magazines and books on tablets.

12. Air-based Gesture

- it is accurately recognizing people’s body, arm and hand

gestures like in a camera capture, sensor, and computer vision
techniques; also, in controlling home appliances, interaction
in games and theater even in the medical facilities.

13. Haptic

- Provide feedback by applying vibration and forces to the

person using actuators that are embedded in the clothing or a
device they are carrying such as smartphone or smartwatch
(e.g. steering wheels with driving simulators to feel the rode in
arcades)

- Vibrotactile feedback also to simulate sense of touch between

remote people who want to communicate like hug, and provide
feedback to guide people when learning musical instrument.

14. Multimodal

- Intended to provide enriched and complex user experience by

multiplying the way information is experienced and controlled
at the interface through using different modalities (e.g. speech
and gesture, eye-gaze and gesture, and pen input and speech)
to have expressive means of human-computer interaction.

15. Shareable

- Designed for more than one person to use like large wall
displays (e.g. Smartboards).
 - It provides large interactional space that can support flexible
group working, enabling groups to create content together at
the same time.

16. Tangible

- Sensor-based interaction detected by a computer system via

sensing mechanism embedded in the physical object like using
RFID

17. Augmented and Mixed Reality

- Virtual representations are superimposed on physical devices

and objects, and mixed reality, where views of the real world
are combined with views on a virtual environment like in X-
rays and scans, education and car navigation sing AR app.

18. Wearable

- Enable user to record what he saw while also accessing digital

information on the move like Google Glass (designed to look
like a pair of glasses but with one lens of the glass being
interactive display with an embedded camera that can be
controlled with speech input.

19. Robots and Drones

- Focus is on designing interfaces that enable users to effectively

steer and move a remote robot with the aid of live video and
dynamic maps.

- Drones are form of unmanned aircraft controlled remotely

20. Brain-Computer Interaction (BCI)

- Provide a communication pathway between a person’s brain

waves and an external device, sch as cursor on a screen or a
tangible puck that moves via airflow.

- Works through detecting changes in the neural functioning in

the brain.

- Aldo developed to control various games (e.g. brainball),

controlling a robot or flying a virtual plane.

B. NATURAL USER INTERFACES (NUI) AND BEYOND

- NUI enables people to interact with a computer in the same ways

they interact with the physical world through using their voice,
hands, and bodies instead of using keyboard (as in the case of GUI).
For example, instead of having to remember which function keys to
press to open a file, NUI makes a person to raise their arm or say
‘open’.
 - Allows users to speak to machines, stroke their surfaces,
gesture at them in the air, dance on mats that detect feet
movements, smile at them to get a reaction, and so on.

- not be as natural as graphical user interfaces as it depends on

the task, user, and context, as well as the number of functions
the system supports.

Source: Modern Systems Analysis and Design, 8th Edition, Joseph S. Valacich, Joey F.
George, Pearson Education, 2017. Page 510-526

Topic 2. The Process of Interaction Design

Objectives:

At the end of the unit lesson, the learners can:

• Explain some advantages of involving users in development
• Explain main principle of a user-centered approach
• Present a simple lifecycle model of interaction design

A. WHAT IS INVOLVED IN INTERACTION DESIGN? FOUR APPROACHES

TO INTERACTION DESIGN

1. User-centered – the user knows best and is the only guide to

the designer who translate the user’s needs and goals into a
design solution
Three principles:

Early focus on users and

tasks Empirical
measurement Iterative
design

2. Activity-centered – focuses on the behavior surrounding

particular tasks

3. Systems design – structured, rigorous, and holistic design

approach that focuses on context and is particularly
appropriate for complex problems. The system is the
center of attention while user’s role is to set the goals of
the system.

4. Genius design – relies solely on the experience and creative flair of

a designer which is also called as ‘rapid expert design’
(Saffer,2010).

SAMPLE FIELDS OF DESIGN

1. Graphic Design
2. Architectural Design
3. Industrial Design
4. Software Design
 FOUR BASIC ACTIVITIES OF INTERACTION DESIGN

1. Establishing requirements
2. Designing alternatives
3. Prototyping
4. Evaluating

Fig 3.1 Simple Interaction Design Life Cycle Model

1. The Importance of Involving User

Involving users in designing ensure that development continues to
take user’s activities into account, and developers can gain a
better understanding or user’s goals leading to a more
appropriate, more usable product.
Expectation management is also done to ensure that there are no
surprises for users when the product arrives for use. It is
better to exceed user’s expectation than to fall below them.

2. Degrees of User Involvement

Users may be co-opted to the design team in a full-time or part-time
basis, and it may be for the duration of the project or for a
limited time only.
If user is co-opted full-time for the whole project, their input will be
consistent and very familiar with the product and its rationale
but may lose touch with rest of the user group if it takes many
years. If a user is co-opted part-time for the whole project,
there will be consistent input to development while remaining
in touch with other users. Therefore, this will need careful
management for the design team.

B. SOME PRACTICAL ISSUES

1. Who Are the Users?

- People who interact directly with the product to achieve a task.

- Those who receive products from the system, who test the
system who make the purchasing decision, and who use
competitive products (Holtzblatt and Jones,1993)
- The group of stakeholders
2. What Do We Mean by “Need”?
- Understanding the characteristics and capabilities of users
- Considering experiences and expectations
- Understanding similar behavior already established
- Focusing on people’s goals and usability

3. How Do You Generate Alternative Designs?

- Come from an individual designer’s flair and creativity
- Cross-fertilization which is a result by discussing ideas with
other designers
- Enhancing through inspiration from browsed collection of
designs
- Running creativity workshops to generate innovative
requirements
- Seeking different perspectives and looking at other designs

4. How Do you Choose Among Alternative Designs?

- Decide from the information gathered
- Comparing similar factors that are externally visible
and measurable
- Studying documentation like description of how something
works
- Quality

5. How Do You Integrate Interaction Design Activities with Other

Lifecycle Models?

- Using Agile Methods like the eXtreme Programming, Cyrstal,

Scrum, Adaptive Software Development (ASD), and Dynamic
Systems Development Method (DSDM)

Post Test/Enrichment Activity (This should be answered/done and

to be submitted as SOFT COPY)

Try to remember any games you played (or you may look for a game and
try it now). Compare the experience of playing the game using a
laptop/desktop with playing the game on smart/cell phones. Consider the
pros and cons on different interfaces and select at least three interfaces
other than GUI and mobile (like tangible or shareable, etc.)

Design an innovative timepiece for your own use (using iterative designing).
This could be in a form of a wristwatch, or a table clock. Develop at least 2
distinct alternatives that both met your set of requirements. Draw your
design and explain its features, state if it does what you want. Take a clear pic
of your drawing to be submitted as a soft copy.