Owning the Interaction in Dynamic Environments

2,804 views

Published on

My presentation from the UPA Europe Turin conference on interaction design methods for User Experience practitioners

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,804
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Owning the Interaction in Dynamic Environments

  1. 1. OWNING THE INTERACTION IN DYNAMIC ENVIRONMENTS fergus roche | gomitech.co.uk | bristol usability group UPA Europe conference, Turin Dec 08
  2. 2. Version for publication All 3 rd party imagery highlighted IMAGE WITHHELD
  3. 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. 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. 5. Academic validation?
  6. 6. Nil point
  7. 7. 1. INTRODUCTIONS
  8. 8. Who am I? Fergus Roche Contract User Experience Consultant
  9. 9. I head up the User Experience at &
  10. 10. Agency-side Client-side My agency clients
  11. 11. Travel Manufacturing Digital Design Fashion Retail Broadcaster Automotive Telcomms Construction Insurance Health Care Arts Charity NGOs
  12. 12. What project methodologies do/have I worked in? Rapid Prototyping bespoke Made up & combos
  13. 13. What is this presentation about?
  14. 14. A practical method for describing dynamic user interactions like this ... IMAGE WITHHELD
  15. 15. And then at the end you all are going to do it. Together you will design a website in five minutes .
  16. 16. The end result, within 30 minutes you will all be doing this... IMAGE WITHHELD
  17. 17. 2. THE PROBLEM
  18. 18. This time last year... <ul><li>Large-scale, retail e-commerce website </li></ul><ul><li>Strong interactive functionality required </li></ul><ul><li>15-20 strong project team </li></ul><ul><li>Scrum [Agile] project methodology </li></ul><ul><li>Weekly meetings with the stakeholders </li></ul><ul><li>Including walk-throughs </li></ul>
  19. 19. What ’s the basis for this method? & And why is it credible and easy for you? IMAGE WITHHELD
  20. 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. 21. “ ???”
  22. 22. IMAGE WITHHELD
  23. 23. “ oh...OK”
  24. 24. 3. A CHANGING LANDSCAPE
  25. 25. What is the internet in three words? IMAGE WITHHELD
  26. 26. What is the internet in three words? COMMUNICATION ENTERTAINMENT INFORMATION IMAGE WITHHELD
  27. 27. The convergence has already started
  28. 28. BANDWIDTH INTERNET + COMMUNICATION ENTERTAINMENT INFORMATION DEVICE on DEVICE DEVICE DEVICE MUSIC TV GAME FILM
  29. 29. INTERNET + COMMUNICATION ENTERTAINMENT INFORMATION BANDWIDTH on DEVICE DEVICE DEVICE DEVICE MUSIC TV GAME FILM
  30. 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. 31. This is now. What about in 3 years? 5 years?
  32. 32. <ul><li>Many of us will have several avatars, which can act semi-autonomously </li></ul><ul><li>Mesh networking will have interconnected most computer-based devices </li></ul><ul><li>Less and less software will be device-based. Users will simply connect to the internet </li></ul><ul><li>Geographical live data “where I am” will become synonymous with online activity </li></ul>
  33. 33. These and many other future probabilities are within reach. We will need to design and manage the user experience.
  34. 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. 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. 36. IMAGE WITHHELD
  37. 37. COMMUNICATION ENTERTAINMENT INFORMATION IMAGE WITHHELD
  38. 38. IMAGE WITHHELD
  39. 39. HOW SHOULD I USE IT? I DONT GET IT?! Bob the user
  40. 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. 41. 4. THE METHOD
  42. 42. STATS ANALYSIS BUSINESS STRATEGY USER JOURNEYS PERSONAS USER TESTING WIREFRAMES DOCUMENTATION CONTENT AUDIT UE process and outputs within the software development process
  43. 43. STATS ANALYSIS BUSINESS STRATEGY USER JOURNEYS PERSONAS USER TESTING DOCUMENTATION CONTENT AUDIT WIREFRAMES
  44. 44. PROCESS MAP WIREFRAME <show of hands please>
  45. 45. PROCESS MAP WIREFRAME STORYBOARD <show of hands please>
  46. 46. PROCESS MAP WIREFRAME STORYBOARD + =
  47. 47. KEY FRAME 1 KEY FRAME 2 KEY FRAME 3 KEY FRAME 4 STORYBOARD INTERACTION TO BE DESCRIBED
  48. 48. Some examples...
  49. 49. A process map from a workshop... IMAGE WITHHELD
  50. 50. Same process map made pretty afterwards in Visio IMAGE WITHHELD
  51. 51. A wireframe ...sketched IMAGE WITHHELD
  52. 52. A wireframe ...made pretty in Visio IMAGE WITHHELD
  53. 53. The live site
  54. 54. And a storyboard IMAGE WITHHELD
  55. 55. A storyboard Wallace & Grommit, Aardman Animation IMAGE WITHHELD
  56. 56. 5. THE BIG STEAL
  57. 57. PROCESS MAP WIREFRAME STORYBOARD + = The animation industry Wall-E, Disney Pixar IMAGE WITHHELD
  58. 58. The animation industry Batman , http://dcanimated.toonzone.net/Storyboards/sbbatman.htm IMAGE WITHHELD
  59. 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. 60. “ There are many ways to skin a cat” Itchy & Scratchy, The Simpsons IMAGE WITHHELD
  61. 61. What is important is that we offer a clear, instructional method for explaining how user interactions should work
  62. 62. All we need to do is describe the key frames IMAGE WITHHELD
  63. 63. IMAGE WITHHELD
  64. 64. Which brings me to my 2 nd key finding...
  65. 65. 6. LO-FI CAN BE BETTER
  66. 66. Royal Albert Hall pitch Events & e-commerce IMAGE WITHHELD
  67. 67. Something odd happens when you present what is essentially a sketch. People lean forward, engage and comment...
  68. 68. 7. MY FINDINGS
  69. 69. <ul><li>Our work is throwaway in nature. Accept it. </li></ul><ul><li>Make that fact an asset and let that make you work faster </li></ul><ul><li>Not become a bottleneck for software development </li></ul>
  70. 70. European football brand Live TV + community IMAGE WITHHELD
  71. 71. <ul><li>What is important is that we offer a clear, instructional method for explaining how user interactions should work </li></ul>
  72. 72. <ul><li>Wireframes aren’t special or always relevant. And static ones aren’t great for explaining interactions </li></ul>
  73. 73. <ul><li>We should be responsible for the user experience across all user interactions regardless of the technology involved </li></ul>
  74. 74. <ul><li>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 </li></ul>
  75. 75. <ul><li>Feel free to the change your outputs. Software teams don’t mind. Often they appreciate it </li></ul>
  76. 76. IMAGE WITHHELD
  77. 77. IMAGE WITHHELD
  78. 78. IMAGE WITHHELD
  79. 79. <ul><li>A central purpose of my role is to reduce risk I believe. </li></ul><ul><li>Start early in the development life-cycle </li></ul><ul><li>Assess and design quickly and simply </li></ul><ul><li>Provide a view of the final product the client can commit to before spending developer man-hours </li></ul>
  80. 80. 7. THE SHOW-STOPPER
  81. 81. “ But, I can’t draw...”
  82. 82. Yes you can!
  83. 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. 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. 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. 86. 8. THE GROUP TASK
  87. 87. To design an interactive website in 5 minutes.
  88. 88. <Group task instruction>
  89. 89. <5 minute countdown clock>
  90. 90. <ul><li>Pop your storyboards back in the envelope* </li></ul><ul><li>Place on your seat when you leave* </li></ul><ul><li>Add your name </li></ul>
  91. 91. 8. Conclusion
  92. 92. IMAGE WITHHELD
  93. 93. <ul><li>Feel empowered to design and lead more dynamic interactions </li></ul><ul><li>Believe you can bring your user-centered approach to Flash and 3D interactions </li></ul><ul><li>Let go of perfecting wireframes and start sketching interactions </li></ul><ul><li>Learnt a more engaging technique to sketch interactions to designers and clients </li></ul>
  94. 94. Tools of the trade Flipchart paper Post-its Blu tac Big fat marker pens
  95. 95. <ul><li>Put down the visio and pick up a pen </li></ul><ul><li>Have a go, just start doodling and then simply use them to discuss an interaction </li></ul><ul><li>Take up life drawing </li></ul>Recommendations
  96. 96. Recommended reading
  97. 97. Questions
  98. 98. THANKS! fergus roche | gomitech.co.uk | bristol usability group

×