Owning the Interaction in Dynamic Environments

  • 2,487 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,487
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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