My introductory slides on interaction design and the basics of prototyping for the Intelligent Interactive Systems master's Information Science course given at the University of Amsterdam.

1. Intelligent Interactive Systems (2012-2013):
Introduction to Prototyping: what, why, how!
Abdallah
‘Abdo’
El
Ali
http://staff.science.uva.nl/~elali/
Some
slides
taken
and
adapted
from
“Interac3on
Design:
Beyond
Human-­‐Computer
Interac3on”
(Ch.
11)
hCp://www.id-­‐book.com/

2. Outline!
1. What
is
Interac3on
Design?
2. Prototyping:
 what
 why
 how
3. Group
exercise:
 sketching
interac3on
with
ING’s
ATM
4. Group
presenta3ons
2

3. 1
2
3
3

4. 4

5. Good Design!
 Need
to
take
into
account:
 Who
the
users
are,
their
needs,
and
their
past
experiences
 What
ac3vi3es
are
being
carried
out
(e.g.,
speaking,
making
a
phone
call,
moving
cursor,
etc.),
and
their
granularity
 Where
the
interac3on
is
taking
place
 Consider:
calling
from
cell
phone
vs.
calling
from
phone
booth
5

6. What is this?!
Juicy
Salif
(Philip
Starck,
1990)
6

7. What is Interaction Design?!
 Designing
interac3ve
products
to
support
the
way
people
communicate
and
interact
in
their
everyday
and
working
lives
 Sharp,
Rogers
and
Preece
(2007)
 Goals:
1. Develop
usable
products
 Usability
means
easy
to
learn,
effec3ve
to
use
and
provide
an
enjoyable
experience
2. Involve
users
in
the
design
process
7

8. Prototyping: what!
 In
interac3on
design
it
can
be:
 a
series
of
screen
sketches
 a
storyboard,
i.e.
a
cartoon-­‐like
series
of
scenes
 a
Powerpoint
slide
show
 a
video
simula3ng
the
use
of
a
system
 a
lump
of
wood
(e.g.
PalmPilot)
 […]
 In
prac3ce,
designers
prototype:
 Technical
issues
 Work
flow,
task
design
 Screen
layouts
and
informa3on
display
 Difficult,
controversial,
cri3cal
areas
8

9. Prototyping: why!
 Prototyping:
 allows
evalua3on
and
feedback
 allows
stakeholders
to
see,
hold,
interact
with
a
prototype
more
easily
than
a
document
or
a
drawing
 allows
team
members
to
communicate
effec3vely
 lets
you
test
out
ideas
for
yourself
 encourages
reflec3on
9

10. Prototyping: how!
 Low-­‐fidelity
Prototyping
 Uses
a
medium
which
is
unlike
the
final
medium,
e.g.
paper,
cardboard
 Is
quick,
cheap
and
easily
changed
 Examples:
Sketches
of
screens
and
task
sequences
using
‘Post-­‐it’
notes,
Storyboards
 Storyboards
 Ogen
used
with
scenarios,
bringing
more
detail,
and
a
chance
to
role
play
 Series
of
sketches
used
early
in
design
showing
how
a
user
might
progress
through
a
task
using
the
device
 Sketching
 Important
for
low-­‐fidelity
prototyping
 Don’t
be
inhibited
by
drawing
ability
10

11. Storyboard Example!
Goal:
design
a
rich
content
experience
for
a
mobile
telecoms
operator
company
Macro
vs.
micro
view
11

12. Sketching Exercise (1)!
 Design
Scenario:
 You
are
being
asked
to
come
up
with
a
new
design
for
the
ING
ATM
machines.
Their
main
goal
is
to
improve
their
customer
experience
of
drawing
out
money
on
a
day-­‐to
day
basis.
To
do
that,
they
would
like
to
have
their
en3re
ATM
interface
redesigned.
 Task:
 Reflect
on
the
basic
opera3ons
of
the
ATM,
the
seing,
and
how
a
typical
person
interacts
with
the
machine,
and
sketch
out
the
interac3on.
 How
can
you
embed
intelligent
techniques
in
the
process?
E.g.,
context-­‐awareness,
vision-­‐sensing,
speech-­‐recogni3on,
etc.
12

13. Sketching Exercise (2)!
 Work
in
groups
of
X,
order
s3cky
post-­‐its
on
an
interac3on
3meline
 Blue
post-­‐its:
what
the
person
is
doing
 Pink
post-­‐its:
what
the
ATM
is
doing
 Yellow
post-­‐its:
other
relevant
factors
13

14. Group Presentations
(3 min. elevator pitch!)
1 positive point
1 negative point
(from audience)!
14

15. Questions?!
15

16. References!
Sharp,
H.,
Y.
Rogers
and
J.
Preece.
(2007).
Interac(on
Design:
Beyond
Human−Computer
Interac(on.
New
York:
John
Wiley
and
Sons,
second
edi3on,
chapter
11.
16

17. Intelligent Interactive Systems (2012-2013):
Brainstorming!
Abdallah
‘Abdo’
El
Ali
http://staff.science.uva.nl/~elali/

18. Outline!
1. PLEX
cards
exercise
2. Group
presenta3ons
18

19. Topics!
 Context-­‐awareness
&
Ambient
Intelligence
 Speech
 Vision
 Biometrics
 Home
Systems
(e.g.,
interac3ve
TVs)
 Public
Displays
 Robo3cs
 Affec3ve
Compu3ng
 Wearables
 Mobile
19

20. PLEX Brainstorming Cards!
 Developed
by
Nokia
Research
Center
Finland
(Espoo)
 PLEX:
Playful
Experiences
Framework
 Design
for
playfulness
in
interac3ve
systems
 Target:
researchers,
designers,
stakeholders
 Deck
of
22
cards
20

21. PLEX Exercise: Rules!
 Each
group
receives
3
random
PLEX
cards.
 Player
1
starts
by
placing
her
card
face
up
on
the
table,
and
then
explores
an
idea
related
to
both
the
topics
and
the
card.
 Player
2
and
player
3
listen
carefully
and
engage
in
discussion.
When
one
of
them
feels
his/her
card
is
relevant
to
the
discussion,
s/he
places
her
card
on
the
table.
 Record
your
ideas.
 CONTEXT:
interac3ve
system
for
your
final
report
 You
have
20-­‐25
min.
21

22. Issues to Consider (Always…!)!
 Usability
 Feasibility
(cost,
effort)
 Robustness
(can
withstand
different
condi3ons)
 Scalability
(can
change
in
size
or
scale)
 Privacy
 Security
 Safety
(health)
 Maintainability
 Durability
 Trust
 Playfulness
 Originality
 Transparency
 Intelligibility
 Extensibility
 Likeability
 Enjoyability
 Collabora3ve
 Compe33ve
22  […]

23. PLEX Exercise: System Design!
 Work
in
your
chosen
group
(USE
ONLY
ONE
COLOR)
 Blue
post-­‐its:
user(s)
interac3on
 Yellow
post-­‐its:
system(s)
interac3on
 Pink
post-­‐its:
nuts
n’
bolts
(technology:
algorithms,
mechanisms)
–
use
your
search
engines!
 Orange
post-­‐its:
Perceived
design
improvements
(at
least
1!)
 Red
post-­‐its:
Perceived
design
boCle-­‐necks
(at
least
1!)
 Green
post-­‐its:
other
relevant
factors
(social
context,
climate,
etc.)
 Use
ac3on
or
state
keywords
where
applicable
23

24. Group Presentations
Elevator pitch (3 min.)
(at least)
1 positive point
1 negative point!
24

25. Questions?!
25