Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A FIELD GUIDE TO 
INTERACTION DESIGN 
BY JAMES CARUSO, EXPERIENCE LEAD
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. Engagi...
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 peo...
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 u...
Tools 
USE THE RIGHT ONES FOR THE JOB
A X U R E / / / P L A N 
Plan your flows, create sitemaps, chart user journeys, and 
develop interactive wireframes with t...
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 ...
F R A M E R / / / R E F I N E 
Prototype, explore, and refine complex and nuanced 
interactions with a physics-based frame...
ETHOS 
Each step of the process informs the other, both 
forward and backward. This is a fluid process based around 
the i...
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
/// 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 t...
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...
JOURNEY 
For a journey to be successful, 
it must tell a story—one with 
the user at its heart as the 
protagonist. This s...
E X P E R I E N C E 
The best experiences engage 
users by anticipating needs, 
understanding behaviors, and 
moving to fu...
Interactive Wires 
A key component and pertinent starting place for great 
interaction design are interactive wireframes. ...
MEDIUM 
Since we are designing digital things, working within a 
digital medium will yield the truest representation of th...
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...
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 interac...
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 w...
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 c...
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 sm...
Wires Inform Design 
Your wireframes will directly influence and inform your 
design decisions. 
/// Page 21
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
Design Informs Interaction 
It is through visual language —colors, typography, spacing— 
that design shapes and refines ou...
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 bette...
Interaction Informs Experience 
As your interactions are refined through design, you’ll notice 
the overall experience beg...
MATURATION 
It’s here that our ideas are transformed. Where visual play 
gives way to insight and epiphany. And where epip...
/// Page 26 
Motion 
ANIMATION & INTERAC T I V I T Y
TRANSFORMATION 
Our interfaces should be able to change and adapt to meet 
user needs. When components change from one sta...
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...
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 
ente...
D E S I G N 
Design helps us build continuity in transitions through the 
use of design patterns and persisting elements. ...
UNDERSTANDING 
Through well-choreographed transitions and 
coordinated design, users begin to understand the design 
and g...
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 transitioni...
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...
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, sh...
A T T E N T I O N 
Motion allows us to direct users’ attention 
to support our goals. 
/// Page 35
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...
FOCUS 
Attention can best be held by allowing users to focus on one 
primary action at a time. That element entices the us...
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...
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, voic...
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 ...
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 ...
/// 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 th...
Thanks! 
James Caruso (james@prpl.rs) 
PRPL HQ 189 S. Orange Ave., Suite 2020 Orlando, FL 32801 
QUESTIONS? Tweet #prplweb...
Upcoming SlideShare
Loading in …5
×

A Field Guide to Interaction Design (IxD)

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.

A Field Guide to Interaction Design (IxD)

  1. 1. A FIELD GUIDE TO INTERACTION DESIGN BY JAMES CARUSO, EXPERIENCE LEAD
  2. 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. 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. 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. 5. Tools USE THE RIGHT ONES FOR THE JOB
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. Interactive Wires A key component and pertinent starting place for great interaction design are interactive wireframes. /// Page 14
  16. 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. 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. 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. 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. 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. 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. 22. Wires Inform Design Your wireframes will directly influence and inform your design decisions. /// Page 21
  23. 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. 24. Design Informs Interaction It is through visual language —colors, typography, spacing— that design shapes and refines our interactions. /// Page 23
  25. 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. 26. Interaction Informs Experience As your interactions are refined through design, you’ll notice the overall experience beginning to change. /// Page 24
  27. 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. 28. /// Page 26 Motion ANIMATION & INTERAC T I V I T Y
  29. 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. 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. 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. 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. 33. UNDERSTANDING Through well-choreographed transitions and coordinated design, users begin to understand the design and grow with the experience. /// Page 31
  34. 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. 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. 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. 37. A T T E N T I O N Motion allows us to direct users’ attention to support our goals. /// Page 35
  38. 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. 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. 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. 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. 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. 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. 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. 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

×