Prototyping Interaction & Animation in the Design Process

With static screens still so often the norm at early stages of design, we look at how prototyping at this stage can impact and improve the UX process. Bringing in interactive prototypes at a much earlier stage can help clients – and the production team – to understand a journey sooner and identify potential issues much earlier.

Transcript

1. PROTOTYPING Interaction & animation IN THE DESIGN PROCESS Graham Dobie
3. We create entertaining interactive content that helps brands, broadcasters and entertainment companies to achieve their goals
5. Product Design
6. “Product” Design_
9. Feel something in your hands
10. Show them to people
11. Give them to someone to play with
15. I still make models
16. Image © James Puckett
17. Image © Marta B
18. Image © FontFont
20. Image @ Will Evans
21. Image @ play-dot-to.com/
26. connect the dots Interactive / animated prototypes help to connect up the dots
27. – John Kearney Senior Content Producer @ CBBC Interactive “I can’t believe more indies don’t do this”
28. – A Perfectly Sensible Person “It’s too early
 __for prototypes”
29. Prototypes are like _Play-Doh™ Image © Betsy Weber
30. Image © Bart Everson Quick and Easy
31. Image © Bart Everson Get the Message Across
32. Image © Bart Everson Play, Build, SMash!
33. Play-Doh helps you play and make Decisions (together)
34. Play-Doh helps you Test Better(er)
35. Play-Doh helps you to explain stuff
36. Play-Doh helps you play and make Decisions (together)
38. Sleep Awareness for Teens
42. It’s a sleep recorder It’s a Game
49. Having a number of interactive options helped us to make an informed decision
50. playzeds.com
51. Tangent: Tools
53. http://adventuresofaglutenfreemom.files.wordpress.com/2010/03/playdoh.jpg
54. Axure → html → Phonegap
55. Briefs Axure JavaScript Pop HTML CSS Balsamiq invision Solidify
56. Pop
57. Play-Doh helps you Test Better(er)
59. → bit.ly/flyhCBeebies bit.ly/flyhCBBC
65. gameplay Prototypes + Interface Prototypes
66. Auto-upgrading or Power-up Shop
67. CBeebies Auto-upgrading
69. [vid] auto upgrade
70. CBBC The ‘SHop’
72. Stepping Out
73. – Sarah Knott – Content Producer @ CBeebies Interactive “The ‘store’ prototypes were immensely useful”
74. Tabs and carousel controls were tricky for the children to find
76. FHaH stash screenshot
77. “ – Sarah Knott – Content Producer @ CBeebies Interactive Being able to swipe/click through the experience at
 an early stage allows additional thought to storytelling before it’s too far into the development process!
78. a/b Testing with prototypes early on Helps to spot any problems with interaction or user journeys
80. – Sarah Knott – Content Producer @ CBeebies Interactive “I found the prototypes useful for generating conversations with the children”
81. Tangent: Microcopy
83. Market Market Stash Shop Store Chest Drey Trove Workshop Corner The nut place The wood
84. – Stepping Out Feedback Equip “no real suggestions here but they seem to like the word ‘megA’ a lot”
85. fivesimplesteps.com/products/
86. Play-Doh helps you to explain stuff
87. The Singer Takes it All
88. Hit Miss
90. travelator!
93. “ – Jody Smith Multiplatform Commissioning Editor @ Channel 4 There's something exciting about using a prototype, like playing with a new toy for the first time, that you never get from a document.
94. “ – Jody Smith Multiplatform Commissioning Editor @ Channel 4 Working at a broadcaster, there are many people who would find wireframes totally alien.
95. Having a living mockup of your interface can help you – and the client – to explain the product more easily
96. Play-Doh helps you Shake it All aBout
97. bit.ly/wolfblood
98. Story-led asynchronous multiplayer game
103. Fill in the gaps
107. “ – John Kearney Senior Content Producer @ CBBC Interactive “Having interactive wireframes helped get across the experience and flow of a journey with much more clarity than a load of wireframes stuck on a wall.”
108. Feature requests as a result of familiarity with the interface
109. make decisions · test · Explain
110. Go and have a play
111. Graham Dobie @rebobaydobay @chunkdigital chunkgroup.com