HCI and Interaction Design
Mattias Arvola
2
Human-­‐Computer Interaction (Carroll, 2014)
• Early 1980s, a specialty area in computer science
embracing cognitive science and human factors
engineering.
• Now aggregates a collection of semi-autonomous
fields of research and practice in human-centered
informatics.
• Computer science, psychology, sociology,
anthropology, and design.
3
A definition from ACM
• A discipline concerned with the design, evaluation
and implementation of interactive computing systems
for human use and with the study of major
phenomena surrounding them.
4
Command Line Interfaces CLI
cp merits.txt ~/personal Copy the file merits.txt to the
directory personal in the home
directory
5
Menu interfaces
• Stepping through
hierarchies of menus
or screens
• 1D or 2D
6
The 90ies
•
•
•
•
•
•
Internet
Cell phones
Digital consumer products
Games
IT for fun and not only for work
Aesthetics, playfullness and social qualities become
more important
7
it no longer makes sense to regard HCI as a specialty of
computer science; HCI has grown to be broader, larger
and much more diverse than computer science itself. […]
There is no unified concept of an HCI professional.
– Carroll (2014)
8
Graphic User Interfaces GUI
• WIMP – Windows,
Icons, Menus,
Pointers
• WYSIWIG – What
you see is what you
get
• Direct manipulation
• Spatial
representations
• Shows actions on the
marker
9
The Xerox Star 1980
Apple Lisa 1983
10
Windows 10
11
Mac OS X El Capitan
12
Android Material Design
13
14
Mobile and touch
• Less screen real estate means tougher prioritization
• A mobile context of use is different from a stationary
• What do you need to know, do and feel at this
particular moment in this particular context?
• Visiting, traveling or local mobility?
• What happens when you turn the screen?
• Think location-based
• Animation
• Minimal user help
15
Mobile Input
• Touch screen with
one or several points
of interaction
• Soft keyboard
• Physical keyboard
• Microphone
• Physical buttons
• Sensors
16
Tangible UIs and Augmented Reality
•
We are physical beings and
interact with the would
using our bodies.
•
We do not only consist of a
couple of eyes and an index
finger. Why not make use of
that in HCI?
•
Reactable: http://www.youtube.com/
watch?v=vm_FzLya8y4
17
Augmented Reality
• Head mounted
• Mobile
• Projector-based
Minnesmark
19
att se vad som döljer sig inne i trädet, vilket illustreras i Figur 66. Genom att gå närmare zoomar användaren in, detta är en interaktionsteknik som skulle kunna kallas
rörelsebaserad zoomning (eng. ’ device-movement-based zooming’).
Device-­‐movement-­‐based zooming
1. The user sees the hole when directing
the camera to the marker.
2. He zooms in by moving closer.
20
att se vad som döljer sig inne i trädet, vilket illustreras i Figur 66. Genom att gå närmare zoomar användaren in, detta är en interaktionsteknik som skulle kunna kallas
rörelsebaserad zoomning (eng. ’ device-movement-based zooming’).
Device-­‐movement-­‐based panning
1. The user sees the hole when directing
the camera to the marker.
2. He zooms in by moving closer.
21
Two-­‐dimensional device-­‐
direc1on based panning
22
Interaction Design – Löwgren (2008)
• Interaction Design refers to the shaping of interactive
products and services with a specific focus on their
use.
• Interaction design and the behaviors of the virtual
world were before the mid nineties seen as a specialty
within industrial design by the design community.
23
Five Major Characteristics of Design
• Design involves changing situations by shaping and
deploying artifacts
• Design is about exploring possible futures
• Design entails framing the “problem” in parallel with
creating possible “solutions”
• Design involves thinking through sketching and other
tangible representations
• Design addresses instrumental, technical, aesthetical
and ethical aspects throughout
24
Design – According to Bruce Archer (1965)
1. There has to be a prior
formulation of a prescription or
model for a finished work in
advance of its embodiment
2. The prescribed formula or
model must be embodied in/
as an artefact
3. There must be a creative step in
the process
4. It must have purpose. Intent
over exploration.
5. It is intuitive but not
spontaneous
6. It must begin with a need
7. It must reconcile
8. It must be holistic and consider
the artefact in a system and not
of itself
9. Design problems are complex
10. Design is about the optimisation
of solutions
25
UX Design (Don Norman)
• I invented the term because I thought human
interface and usability were too narrow. I wanted to
cover all aspects of the person’s experience with the
system including industrial design, graphics, the
interface, the physical interaction, and the manual.
Since then the term has spread widely, so much so
that it is starting to lose it’s meaning… http://www.adaptivepath.com/ideas/e000862
26
Neither full, nor complete list of UX titles
•
•
•
•
•
•
•
•
Digital Art Director
Project manager
User researcher
Interaction designer
Concept, LoFi, HiFi
Technical writer
Copywriter
Prototype Developer
• Visual Designer
• Usability Tester
• …
•
•
•
•
•
Business analyst
Branding
Marketing
Front-end developers
…
27
What Interaction Designers Design
•
•
•
•
•
•
•
Websites
Mobile apps
Desktop apps
Intranets, and communities
Interactive spaces and exhibitions
Control room displays
UI for interactive consumer products
• Cross-channel user experiences
28
Interactive Products and Services
• Offers people to interact with them, through them
or by means of them
• To interact mean that users, products and services
cooperate, hopefully in harmony and with playful
simplicity
• Users and products or services act jointly in a
coordinated manner in concerts towards a shared
goal
• Computer-based products and services can respond to
or initiate actions which creates a dialogue in the
form of a temporal flow
29
By Bill Verplank, whom together with Bill Moggridge invented the term.
30
1. Plan the human-­‐centred process
Meets the requirements
2. Understand the context of use
3. Specify user and business 5. Evaluate against requirements
4. Produce design solu1ons
A Human-­‐Centered Design Process (ISO 9241-­‐210, 2010)
31
concept
revisions
detailing
32
Design as reduced uncertainty
Known
What should be done? Unknown
Unknown
Known
How should it be done?
33
The Task-­‐Artifact Cycle
Adoption, appropriation and use
Task
Artifact
Requirements and design ideas
fuzzy front end: uncertainty >> pacerns >> insights
revisions
t
pr
od
uc
pr
ot
ot
yp
e
pt
concept
co
nc
e
id
ea
s
de
sig
n cr
ite
r
ia
clarity >> focus
detailing
34
Intertwined processes – Lundequist (1995)
• Information
management
• Decisions
• Managing
• Manifestation of ideas appearing
(Swe. ’gestaltning’, Ger. ‘gestaltung’)
problems
35
36
Current topics and trends
•
•
•
•
•
•
Sustainability
Systems thinking
• Augmented and mixed
reality
Service design
Connectivity
Internet of things
Context awareness
•
•
•
•
•
Communities
Intelligent agents
Robots
Wearables
Sensors
37
Design Ethics
• All design builds on a personal stance on how you
want to view the world, what is important, and for
whom it is important
• To what world do you want to contribute?
38
To Conclude
• Interaction design is about shaping conditions for
people to interact with, through and by means of
interactive products and services.
39
Readings
•
Arvola, M. (2014). Interaktionsdesign och UX: Om att skapa goda användarupplevelser
(Ch. 1). Lund: Studentlitteratur.
•
Carroll, J. M. (2014). Human Computer Interaction - brief intro. In M. Soegaard, and R. F.
Dam (Eds.), The Encyclopedia of Human-Computer Interaction, 2nd Ed.. Aarhus, Denmark:
The Interaction Design Foundation. https://www.interaction-design.org/encyclopedia/
human_computer_interaction_hci.html (accessed 2014-06-05).
•
Grudin, J. (1990). The computer reaches out: The historical continuity of interface design.
Proc. CHI 90, 261-268.
•
Grudin, J., & Poltrock, S. (2012). Taxonomy and theory in computer supported cooperative
work. In S. W. J. Kozlowski (Ed.), The oxford handbook of organizational psychology (pp.
1323-1348). New York: Oxford University Press. http://research.microsoft.com/en-us/UM/
People/jgrudin/publications/surveys/CSCW.pdf
•
Löwgren, J. (2008). Interaction Design - brief intro. In M. Soegaard, and R. F. Dam (Eds.),
The Encyclopedia of Human-Computer Interaction, 2nd Ed.. Aarhus: The Interaction
Design Foundation. http://www.interaction-design.org/encyclopedia/
interaction_design.html (accessed 2013-08-12).
•
Saffer, D. (2009). Designing for Interaction: Creating Innovative Applications and Devices,
2nd Ed. (Ch. 1-2). Berkeley: New Riders.
@mattiasarvola
www.liu.se