Home >Design >A Field Guide to Interaction Design (IxD)

A Field Guide to Interaction Design (IxD)

Date post:14-Jun-2015
View:2,615 times
Download:2 times
Share this document with a friend
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.

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 humanuse. Engaging, well thought-out interfaces allow us tointeract with digital things by understanding and predictingour behaviors. Through this understanding, interactionsalign 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 ND 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 usableand enjoyable. As digital things become more and moreprevalent, ease of use becomes more and more expected./// Page 3 5. ToolsUSE THE RIGHT ONES FOR THE JOB 6. A X U R E / / / P L A NPlan your flows, create sitemaps, chart user journeys, anddevelop interactive wireframes with this planning tool./// Page 5 7. S K E T C H / / / D E S I G NCraft your user interface, build from your wires, and refineyour interaction points with this design tool./// Page 6 8. F R A M E R / / / R E F I N EPrototype, explore, and refine complex and nuancedinteractions with a physics-based framework./// Page 7 9. ETHOSEach step of the process informs the other, bothforward and backward. This is a fluid process based aroundthe idea of continual refinement./// Page 8 10. GOALSI N T E R A C T I O ND E S I G NJOURNEY E X P E R I E N C E/// Page 9 11. /// Page 10I N T E R A C T I O ND E S I G NOur choices in designinginteractions are shaped by theconfluence of these basiccomponents. 12. GOALSTo craft ideas that do, we mustfirst know the goals of the thingand the people using it.C L I E N T G O A L SB U S I N E S S G O A L SU S E R G O A L SP L AT FORM GOA L S/// Page 11 13. JOURNEYFor a journey to be successful,it must tell a storyone withthe user at its heart as theprotagonist. This story can beboth finite and infinite.GOA L M A P P I N GU S E R F LOWSE 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 EThe best experiences engageusers by anticipating needs,understanding behaviors, andmoving to fulfill them.D E F I N E F O R MA N T I C I PAT E N E E D SUNDER S TA N D B E H AV I O R SC R E AT E D I A LOGUES/// Page 13 15. Interactive WiresA key component and pertinent starting place for greatinteraction design are interactive wireframes./// Page 14 16. MEDIUMSince we are designing digital things, working within adigital medium will yield the truest representation of theproduct, interface, or interactions./// Page 15 17. A T R U E E X P E R I E N C EInteractive wires are built to get as close to the final userexperience as possible. From function to journey, thingsactually work./// Page 16 18. S O L V I N G R E A L P R O B L E M SWhen you build with interactive wires, you are beginning tosolve for real interactions. Its a different thing to annotatehow a search feature will work than it is to actually build itout and take that journey./// Page 17 19. M A L L E A B I L I T YWith interactive wires the distance between idea andexecution is greatly reduced. Interactive wires are pliable,flexible, adaptable, and testable./// Page 18 20. C O M P L E X I T YWhen deciding how far to take the level of interaction, itsbest to make only the most crucial or complex featuresinteractive. This is important when designing or planningfor complex flows or user journeys./// Page 19 21. B U I L D B I G , P L A N S M A L LAs you design your core interactions, plan yourmicro-interactions. These are the small details thatsurprise and delight users./// Page 20 22. Wires Inform DesignYour wireframes will directly influence and inform yourdesign decisions./// Page 21 23. S U B T R A C T I O NWires force you to pare your ideas and assumptions downto their most basic forms./// Page 22 24. Design Informs InteractionIt is through visual language colors, typography, spacingthat design shapes and refines our interactions./// Page 23 25. R E F I N E M E N TThrough design we continual plan for and refine ourinteractions. The more our ideas stew, the better theybecome and better we can execute them./// Page 25 26. Interaction Informs ExperienceAs your interactions are refined through design, youll noticethe overall experience beginning to change./// Page 24 27. MATURATIONIts here that our ideas are transformed. Where visual playgives way to insight and epiphany. And where epiphany issanded down and sculpted into something new, enticing,beautiful, and usable./// Page 25 28. /// Page 26MotionANIMATION & INTERAC T I V I T Y 29. TRANSFORMATIONOur interfaces should be able to change and adapt to meetuser needs. When components change from one state toanother, those changes need to feel fluid and natural./// Page 27 30. T R A N S I T I O N SWell-designed transitions can help users througha long flow or process by guiding themand never letting them feel lost or confused./// Page 28 31. C O N S I S T E N C YConsistency is key for maintaining and guiding user focus,as incoming and outgoing elementsenter and exit the screen./// Page 29 32. D E S I G NDesign helps us build continuity in transitions through theuse of design patterns and persisting elements./// Page 30 33. UNDERSTANDINGThrough well-choreographed transitions andcoordinated design, users begin to understand the designand grow with the experience./// Page 31 34. S E Q U E N C E A N D T I M I N GSequence and timing are important factorsin deterring the choreography of transitioningand transforming components./// Page 32 35. T I M E A N D R E S P O N S EHow long things take to respond can make an interface feelsnappy or sluggish. Think about timing as you would thinkabout using white space in a design or silence in a piece ofmusic or film./// Page 33 36. S T O R Y , O R I G I N , & H I E R A R C H YThe order in which transition or transformation occurcan tell a story, show a point of origin orcommunicate hierarchy./// Page 34 37. A T T E N T I O NMotion allows us to direct users attentionto support our goals./// Page 35 38. D I S T R A C T I O NUse motion judiciously and refrain from drawing unwantedattention to areas of the experience that arent important orthat will break continuity and cause confusion./// Page 36 39. FOCUSAttention can best be held by allowing users to focus on oneprimary 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 KFeedback is a crucial component of interaction design. Itshow users know that what theyre interacting with doessomethingby reacting to their input./// Page 38 41. R E S P O N S I V E N E S SComponents should respond when interacted with,whether its through touch, click, tap, voice, or gesture.User-initiated events need strong visual connections to theepicenter of the interaction to provide adequate feedback./// Page 39 42. O V E R S T I M U L A T I O NAnimating everything, and providing feedback for everyinteraction can become annoying to users. Be judicious inyour application of movement, focus, and feedback./// Page 40 43. C R A F T I N G D E L I G H TWe can achieve delight by creating interactionsthat add clarity, guide attention through cleverness, andsurprise users./// Page 41 44. /// Page 42C L O S I N G T H O U G H T SInteraction design is the culmination of the experience, ofthe design, of the choreographed transitions, oftransformations it is the sum of all of these things.Interaction design is really the design of ideas that enablepeople do things. 45. Thanks!James Caruso ([email protected])PRPL HQ 189 S. Orange Ave., Suite 2020 Orlando, FL 32801QUESTIONS? Tweet #prplwebinarFollow [email protected]/prplrckscssrswww.prpl.rs

Popular Tags:

Click here to load reader

Embed Size (px)