Experience Lead, James Caruso, outlines a designer's journey from inception to interaction design, illustrating how Interaction Design (IxD) has the potential to affect all aspects of the entire experience for any project, and delight users while you're at it.

1. A FIELD GUIDE TO
INTERACTION DESIGN
BY JAMES CARUSO, EXPERIENCE LEAD

2. W H A T I S I N T E R A C T I O N D E S I G N ?
Interaction design is about shaping digital things for human
use. Engaging, well thought-out interfaces allow us to
interact with digital things by understanding and predicting
our behaviors. Through this understanding, interactions
align to expectations and digital things made easier to use.
/// Page 1

3. H O W I S I T U S E D ?
Interaction design is used to execute “ideas that do,”
or more precisely, “ideas that enable people do things.”
/// Page 2

4. W H Y I S I N T E R A C T I O N
D E S I G N I M P O R T A N T ?
Interaction design is a big part of how we make things usable
and enjoyable. As digital things become more and more
prevalent, ease of use becomes more and more expected.
/// Page 3

5. Tools
USE THE RIGHT ONES FOR THE JOB

6. A X U R E / / / P L A N
Plan your flows, create sitemaps, chart user journeys, and
develop interactive wireframes with this planning tool.
/// Page 5

7. S K E T C H / / / D E S I G N
Craft your user interface, build from your wires, and refine
your interaction points with this design tool.
/// Page 6

8. F R A M E R / / / R E F I N E
Prototype, explore, and refine complex and nuanced
interactions with a physics-based framework.
/// Page 7

9. ETHOS
Each step of the process informs the other, both
forward and backward. This is a fluid process based around
the idea of continual refinement.
/// Page 8

10. GOALS
I N T E R A C T I O N
D E S I G N
JOURNEY E X P E R I E N C E
/// Page 9

11. /// Page 10
I N T E R A C T I O N
D E S I G N
Our choices in designing
interactions are shaped by the
confluence of these basic
components.

12. GOALS
To craft ideas that do, we must
first know the goals of the thing
and the people using it.
C L I E N T G O A L S
B U S I N E S S G O A L S
U S E R G O A L S
P L AT FORM GOA L S
/// Page 11

13. JOURNEY
For a journey to be successful,
it must tell a story—one with
the user at its heart as the
protagonist. This story can be
both finite and infinite.
GOA L M A P P I N G
U S E R F LOWS
E X P E R I E N C E M A P S
/// Page 12

14. E X P E R I E N C E
The best experiences engage
users by anticipating needs,
understanding behaviors, and
moving to fulfill them.
D E F I N E F O R M
A N T I C I PAT E N E E D S
UNDER S TA N D B E H AV I O R S
C R E AT E D I A LOGUES
/// Page 13

15. Interactive Wires
A key component and pertinent starting place for great
interaction design are interactive wireframes.
/// Page 14

16. MEDIUM
Since we are designing digital things, working within a
digital medium will yield the truest representation of the
product, interface, or interactions.
/// Page 15

17. A T R U E E X P E R I E N C E
Interactive wires are built to get as close to the final user
experience as possible. From function to journey, things
actually work.
/// Page 16

18. S O L V I N G R E A L P R O B L E M S
When you build with interactive wires, you are beginning to
solve for real interactions. It’s a different thing to annotate
how a search feature will work than it is to actually build it
out and take that journey.
/// Page 17

19. M A L L E A B I L I T Y
With interactive wires the distance between idea and
execution is greatly reduced. Interactive wires are pliable,
flexible, adaptable, and testable.
/// Page 18

20. C O M P L E X I T Y
When deciding how far to take the level of interaction, it’s
best to make only the most crucial or complex features
interactive. This is important when designing or planning
for complex flows or user journeys.
/// Page 19

21. B U I L D B I G , P L A N S M A L L
As you design your core interactions, plan your
micro-interactions. These are the small details that
surprise and delight users.
/// Page 20

22. Wires Inform Design
Your wireframes will directly influence and inform your
design decisions.
/// Page 21

23. S U B T R A C T I O N
Wires force you to pare your ideas and assumptions down
to their most basic forms.
/// Page 22

24. Design Informs Interaction
It is through visual language —colors, typography, spacing—
that design shapes and refines our interactions.
/// Page 23

25. R E F I N E M E N T
Through design we continual plan for and refine our
interactions. The more our ideas stew, the better they
become and better we can execute them.
/// Page 25

26. Interaction Informs Experience
As your interactions are refined through design, you’ll notice
the overall experience beginning to change.
/// Page 24

27. MATURATION
It’s here that our ideas are transformed. Where visual play
gives way to insight and epiphany. And where epiphany is
sanded down and sculpted into something new, enticing,
beautiful, and usable.
/// Page 25

28. /// Page 26
Motion
ANIMATION & INTERAC T I V I T Y

29. TRANSFORMATION
Our interfaces should be able to change and adapt to meet
user needs. When components change from one state to
another, those changes need to feel fluid and natural.
/// Page 27

30. T R A N S I T I O N S
Well-designed transitions can help users through
a long flow or process by guiding them
and never letting them feel lost or confused.
/// Page 28

31. C O N S I S T E N C Y
Consistency is key for maintaining and guiding user focus,
as incoming and outgoing elements
enter and exit the screen.
/// Page 29

32. D E S I G N
Design helps us build continuity in transitions through the
use of design patterns and persisting elements.
/// Page 30

33. UNDERSTANDING
Through well-choreographed transitions and
coordinated design, users begin to understand the design
and grow with the experience.
/// Page 31

34. S E Q U E N C E A N D T I M I N G
Sequence and timing are important factors
in deterring the choreography of transitioning
and transforming components.
/// Page 32

35. T I M E A N D R E S P O N S E
How long things take to respond can make an interface feel
snappy or sluggish. Think about timing as you would think
about using white space in a design or silence in a piece of
music or film.
/// Page 33

36. S T O R Y , O R I G I N , & H I E R A R C H Y
The order in which transition or transformation occur
can tell a story, show a point of origin or
communicate hierarchy.
/// Page 34

37. A T T E N T I O N
Motion allows us to direct users’ attention
to support our goals.
/// Page 35

38. D I S T R A C T I O N
Use motion judiciously and refrain from drawing unwanted
attention to areas of the experience that aren’t important or
that will break continuity and cause confusion.
/// Page 36

39. FOCUS
Attention can best be held by allowing users to focus on one
primary action at a time. That element entices the user,
taking hold and maintaining their attention.
/// Page 37

40. F E E D B A C K
Feedback is a crucial component of interaction design. It’s
how users know that what they’re interacting with does
something—by reacting to their input.
/// Page 38

41. R E S P O N S I V E N E S S
Components should respond when interacted with,
whether it’s through touch, click, tap, voice, or gesture.
User-initiated events need strong visual connections to the
epicenter of the interaction to provide adequate feedback.
/// Page 39

42. O V E R S T I M U L A T I O N
Animating everything, and providing feedback for every
interaction can become annoying to users. Be judicious in
your application of movement, focus, and feedback.
/// Page 40

43. C R A F T I N G D E L I G H T
We can achieve delight by creating interactions
that add clarity, guide attention through cleverness, and
surprise users.
/// Page 41

44. /// Page 42
C L O S I N G T H O U G H T S
Interaction design is the culmination of the experience, of
the design, of the choreographed transitions, of
transformations — it is the sum of all of these things.
Interaction design is really the design of ideas that enable
people do things.

45. Thanks!
James Caruso (james@prpl.rs)
PRPL HQ 189 S. Orange Ave., Suite 2020 Orlando, FL 32801
QUESTIONS? Tweet #prplwebinar
Follow PRPL
@prplrckscssrs
fb.com/prplrckscssrs
www.prpl.rs