1. The document discusses a presentation about owning user interactions in dynamic online environments. As the internet becomes more interactive, designers must apply user-centered approaches to all interactions. 2. The presentation introduces a method for describing dynamic user interactions using storyboards, wireframes, and key frames. This provides a clear way to explain how interactions should work. 3. Lo-fi techniques like sketching are found to be better than polished wireframes at engaging audiences and assessing designs early in the development process. The ability to draw is a learnable skill, not innate talent, and can help reduce risks before significant development work.

1. OWNING THE INTERACTION IN DYNAMIC ENVIRONMENTS fergus roche | gomitech.co.uk | bristol usability group UPA Europe conference, Turin Dec 08

2. Version for publication All 3 rd party imagery highlighted IMAGE WITHHELD

3. As the internet gets more interactive with the widespread adoption of broadband and the convergence of multimedia, we must continue to own user interactions across this changing landscape. This presentation will highlight the challenges from a UK design agency perspective and demonstrate my commerical, practical method for describing dynamic user interactions. Presentation overview

4. As the internet gets more interactive with the widespread adoption of broadband, we must continue to own user interactions across this changing landscape. This presentation will highlight the challenges from a UK design agency perspective an…demonstrate my commerical, practical method for describing dynamic user interactions. Presentation overview

5. Academic validation?

6. Nil point

7. 1. INTRODUCTIONS

8. Who am I? Fergus Roche Contract User Experience Consultant

9. I head up the User Experience at &

10. Agency-side Client-side My agency clients

11. Travel Manufacturing Digital Design Fashion Retail Broadcaster Automotive Telcomms Construction Insurance Health Care Arts Charity NGOs

12. What project methodologies do/have I worked in? Rapid Prototyping bespoke Made up & combos

13. What is this presentation about?

14. A practical method for describing dynamic user interactions like this ... IMAGE WITHHELD

15. And then at the end you all are going to do it. Together you will design a website in five minutes .

16. The end result, within 30 minutes you will all be doing this... IMAGE WITHHELD

17. 2. THE PROBLEM

18. This time last year... Large-scale, retail e-commerce website Strong interactive functionality required 15-20 strong project team Scrum [Agile] project methodology Weekly meetings with the stakeholders Including walk-throughs

19. What ’s the basis for this method? & And why is it credible and easy for you? IMAGE WITHHELD

20. What ’s the basis for this method? & And why is it credible and easy for you? WF WF WF WF WF WF WF WF WF WF WF WF User journey 1 User journey 2 What worked? what didn’t work? The walk through

21. “ ???”

22. IMAGE WITHHELD

23. “ oh...OK”

24. 3. A CHANGING LANDSCAPE

25. What is the internet in three words? IMAGE WITHHELD

26. What is the internet in three words? COMMUNICATION ENTERTAINMENT INFORMATION IMAGE WITHHELD

27. The convergence has already started

28. BANDWIDTH INTERNET + COMMUNICATION ENTERTAINMENT INFORMATION DEVICE on DEVICE DEVICE DEVICE MUSIC TV GAME FILM

29. INTERNET + COMMUNICATION ENTERTAINMENT INFORMATION BANDWIDTH on DEVICE DEVICE DEVICE DEVICE MUSIC TV GAME FILM

30. INTERNET MUSIC TV GAME FILM Tesco Digital ENTERTAINMENT European Football brand BRC Buy/Download Live Buy/Download ARG BANDWIDTH on DEVICE DEVICE DEVICE DEVICE + 2007-2008 Tesco Digital

31. This is now. What about in 3 years? 5 years?

32. Many of us will have several avatars, which can act semi-autonomously Mesh networking will have interconnected most computer-based devices Less and less software will be device-based. Users will simply connect to the internet Geographical live data “where I am” will become synonymous with online activity

33. These and many other future probabilities are within reach. We will need to design and manage the user experience.

34. History is repeating itself [as it often does...] Then Its got text and pictures “...lets lay it out like a newspaper or magazine” Now “ Well this is how we offer TV” ... ... “This is how games work”

35. Take ownership of the interaction. Lets apply our human-centred approach to all interactions. Our approach is tried and tested. Hard won too. Except this time it will be our fault. We were once copywriters, developers, designers, analysts, project managers. But now we are responsible for the user experience. Lets apply our human-centred approach to all interactions. Our approach is tried and test. Hard won too.

36. IMAGE WITHHELD

37. COMMUNICATION ENTERTAINMENT INFORMATION IMAGE WITHHELD

38. IMAGE WITHHELD

39. HOW SHOULD I USE IT? I DONT GET IT?! Bob the user

40. The more dynamic an interaction, the greater the probability it will impact the user experience – for good or ill. Therefore we must manage all the user interactions. It is our responsibility.

41. 4. THE METHOD

42. STATS ANALYSIS BUSINESS STRATEGY USER JOURNEYS PERSONAS USER TESTING WIREFRAMES DOCUMENTATION CONTENT AUDIT UE process and outputs within the software development process

43. STATS ANALYSIS BUSINESS STRATEGY USER JOURNEYS PERSONAS USER TESTING DOCUMENTATION CONTENT AUDIT WIREFRAMES

44. PROCESS MAP WIREFRAME <show of hands please>

45. PROCESS MAP WIREFRAME STORYBOARD <show of hands please>

46. PROCESS MAP WIREFRAME STORYBOARD + =

47. KEY FRAME 1 KEY FRAME 2 KEY FRAME 3 KEY FRAME 4 STORYBOARD INTERACTION TO BE DESCRIBED

48. Some examples...

49. A process map from a workshop... IMAGE WITHHELD

50. Same process map made pretty afterwards in Visio IMAGE WITHHELD

51. A wireframe ...sketched IMAGE WITHHELD

52. A wireframe ...made pretty in Visio IMAGE WITHHELD

53. The live site

54. And a storyboard IMAGE WITHHELD

55. A storyboard Wallace & Grommit, Aardman Animation IMAGE WITHHELD

56. 5. THE BIG STEAL

57. PROCESS MAP WIREFRAME STORYBOARD + = The animation industry Wall-E, Disney Pixar IMAGE WITHHELD

58. The animation industry Batman , http://dcanimated.toonzone.net/Storyboards/sbbatman.htm IMAGE WITHHELD

59. KEY FRAME 1A ANIMATION SEQUENCE Interaction being described FRAME 1B FRAME 1C FRAME 1D KEY FRAME 2 FRAME 2A KEY FRAME 1 KEY FRAME 1 Richard Williams, The Animator’s Survival Kit IMAGE WITHHELD

60. “ There are many ways to skin a cat” Itchy & Scratchy, The Simpsons IMAGE WITHHELD

61. What is important is that we offer a clear, instructional method for explaining how user interactions should work

62. All we need to do is describe the key frames IMAGE WITHHELD

63. IMAGE WITHHELD

64. Which brings me to my 2 nd key finding...

65. 6. LO-FI CAN BE BETTER

66. Royal Albert Hall pitch Events & e-commerce IMAGE WITHHELD

67. Something odd happens when you present what is essentially a sketch. People lean forward, engage and comment...

68. 7. MY FINDINGS

69. Our work is throwaway in nature. Accept it. Make that fact an asset and let that make you work faster Not become a bottleneck for software development

70. European football brand Live TV + community IMAGE WITHHELD

71. What is important is that we offer a clear, instructional method for explaining how user interactions should work

72. Wireframes aren’t special or always relevant. And static ones aren’t great for explaining interactions

73. We should be responsible for the user experience across all user interactions regardless of the technology involved

74. Once a software team and client is bought into the importance of a user-centered approach, reinforcing that you look after the user experience across all interactions will seem only natural information architect vs. user experience

75. Feel free to the change your outputs. Software teams don’t mind. Often they appreciate it

76. IMAGE WITHHELD

77. IMAGE WITHHELD

78. IMAGE WITHHELD

79. A central purpose of my role is to reduce risk I believe. Start early in the development life-cycle Assess and design quickly and simply Provide a view of the final product the client can commit to before spending developer man-hours

80. 7. THE SHOW-STOPPER

81. “ But, I can’t draw...”

82. Yes you can!

83. Just because we can’t run as fast as Usain Bolt , doesn’t mean we can’t walk. Drawing isn’t magic. Its just a learnt skill... Same with art. No, we are not all Michaelangelo. But we can all draw a story. IMAGE WITHHELD IMAGE WITHHELD

84. Artistic development in children - a U-shaped curve Proponents of the U-shaped theory: Howard Gardner and Ellen Winner (1982), Jessica Davis (1991) population

85. &quot;May I tell you about something I have done a number of times with kindergartners and high school seniors ? I ask the kindergartners to raise their hands if they can read . I then ask if they can work with numbers . Then I ask if they can write . At best one or two of them will raise their hands ; usually none does . When I then ask them if they can draw or make pictures , every raises their hand . Now , when I have done the same thing with high school seniors , each of them raises his hand in regard to reading , writing , and numbers . In regard to drawing and making pictures , it has been rare that anyone raises his or her hand“ Sarason, 1990 Were your three ‘R’s your artistic downfall?

86. 8. THE GROUP TASK

87. To design an interactive website in 5 minutes.

88. <Group task instruction>

89. <5 minute countdown clock>

90. Pop your storyboards back in the envelope* Place on your seat when you leave* Add your name

91. 8. Conclusion

92. IMAGE WITHHELD

93. Feel empowered to design and lead more dynamic interactions Believe you can bring your user-centered approach to Flash and 3D interactions Let go of perfecting wireframes and start sketching interactions Learnt a more engaging technique to sketch interactions to designers and clients

94. Tools of the trade Flipchart paper Post-its Blu tac Big fat marker pens

95. Put down the visio and pick up a pen Have a go, just start doodling and then simply use them to discuss an interaction Take up life drawing Recommendations

96. Recommended reading

97. Questions

98. THANKS! fergus roche | gomitech.co.uk | bristol usability group