UX Tutorial Session Day 2


Published on

My day 2 presentation for the UX course at Uni of Wales, Newport.

Published in: Design, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

UX Tutorial Session Day 2

  1. 1. One Big Field User experience & usability course Fergus Roche Sat 26 th – Sun 27 th Mar 2011 For University of Wales, Newport
  2. 2. One Big Field UX (user experience)
  3. 3. One Big Field
  4. 4. One Big Field Help orgs. make better decisions Position your need; if you can write down a problem correctly, you can see the solution. Position your need; if you can write down a problem correctly, you can see the solution.
  5. 5. Most attention Most clicked 2 nd most One Big Field 2. We design with data Lots of designers don’t. Which we find weird. Source: OBF project – mouse-tracking heatmap of web users behaviour
  6. 6. Prototype 3. UX will reduce risk The UX approach allows us to visualise a view of the future without going near build, reducing cost. Source: OBF project – interaction prototype One Big Field
  7. 7. One Big Field History lesson Our forefathers: librarians, ergonomics & human factors
  8. 8. One Big Field UX the room
  9. 9. One Big Field Task What’s wrong with this room?
  10. 10. One Big Field Task Process map issues with the room
  11. 11. One Big Field MOST IMPORTANT THING TODAY…?
  12. 12. One Big Field Empathy
  13. 13. One Big Field Empathy
  14. 14. One Big Field View project process flow
  15. 15. Overview of next two days Peter Morville’s UX diagram from http://semanticstudios.com/ The facets of UX… One Big Field
  16. 16. Day 2 <ul><li>Introduction & context </li></ul><ul><li>What is User Experience [UX] & user-centered design </li></ul><ul><li>Facets of UX – an overview [ see previous slide ] </li></ul><ul><li>UX across the software development lifecycle </li></ul><ul><li>Credible </li></ul><ul><li>Research - guerilla techniques from the commercial world </li></ul><ul><li>Users – who are they and building a usable picture </li></ul><ul><li>Workshop task </li></ul><ul><li>Valuable </li></ul><ul><li>UX and strategy working together – why its critical </li></ul><ul><li>Building scenarios to capture requirements & the wonder of workshops </li></ul><ul><li>Prioritising </li></ul><ul><li>Workshop task </li></ul><ul><li>Accessible </li></ul><ul><li>Overview </li></ul><ul><li>User testing </li></ul>One Big Field
  17. 17. Day 3 <ul><li>Introduction </li></ul><ul><li>Recap on previous day </li></ul><ul><li>What is good interaction design [presentation] </li></ul><ul><li>Useful & desirable </li></ul><ul><li>Co-design </li></ul><ul><li>Prototype design </li></ul><ul><li>Relevance of design patterns </li></ul><ul><li>Workshop task </li></ul><ul><li>Findable </li></ul><ul><li>Content audit </li></ul><ul><li>Information architecture </li></ul><ul><li>Handling/creating many paths [landing pages] in </li></ul><ul><li>Campaigns & cross-platform </li></ul><ul><li>Workshop task </li></ul><ul><li>Usable </li></ul><ul><li>User testing </li></ul><ul><li>Build & post live </li></ul><ul><li>Workshop task </li></ul>One Big Field
  18. 18. One Big Field Credible
  19. 19. One Big Field Users <Ref report>
  20. 20. One Big Field Personas
  21. 21. One Big Field Social behaviour traits Caring: desire to help people Charming: pleasant, delightful Considerate: thinking of others Enthusiastic: has strong feelings; ardent Excitable: gets excited easily Faithful: being loyal Funny: causing people to laugh Kind: thoughtful, caring Pleasant: polite Polite: exhibiting good manners Sincere: being totally honest Thoughtful: thinking things over  Aggressive : verbally or physically threatening Argumentative: often arguing with people Bossy: always telling people what to do Deceitful: doing or saying anything to get people to do what you want or to get what you want Domineering: constantly trying to control others Inconsiderate: not caring about others or their feelings Irritating: bothering people Manic: acting just a little crazy Manipulative: always trying to influences other people Moody: being unpredictable; changing moods often Rude: treating people badly; breaking social rules Spiteful: seeking revenge; hurting others because you didn’t get what you want Thoughtless: not thinking about the effects of your actions or words A persona’s behaviour…
  22. 22. One Big Field research
  23. 23. One Big Field Quantitative vs qualitative Moderated vs unmoderated Local vs remote Just a toolbox
  24. 24. One Big Field IDEA/DESIGN (hypothesis) Attack!
  25. 25. One Big Field IDEA/DESIGN (hypothesis) Competitor analysis Web analysis Document review Survey Application & database analysis User testing Ethnography Co-design
  26. 26. One Big Field Quantitative Qualitative Moderated Unmoderated Local Remote Web analysis Competitor analysis Document review Application & DB analysis Survey User testing Co-design Ethnography
  27. 27. Web analytics
  28. 28. Heatmap showing mouse tracking Typical usage patterns F and Z down the page Probable start point A Probable start point B Heat map confirms expected behaviour on page* Source: Clicktale More info on F patterns for user reading practices: http://www.useit.com/alertbox/reading_pattern.html
  29. 29. One Big Field Bias
  30. 30. One Big Field Task Create a questionnaire that will engage the user-base.
  31. 31. One Big Field Valuable
  32. 32. One Big Field strategy
  33. 33. One Big Field Stakeholders Think, want, like, need, believe etc
  34. 34. One Big Field Remember Ford’s horses
  35. 35. One Big Field One-to-one interview Workshop
  36. 36. We asked... “ how do the very best swimmers train?” EXAMPLE CLIENT
  37. 37. We met... Chris Nesbit Head Coach British Swimming Offshore Centre – Gold Coast, Australia Ben Titley Head Coach GB Women’s Swim Team James Hickman Five times World 200m Butterfly Champion, 1997, '99, '00, '02, 04 Nova Centurion Five 16-17 year old athletes at the Nottingham swim club Across three sessions. EXAMPLE CLIENT
  38. 38. Day in the life of an athlete… ...from the session with James EXAMPLE CLIENT
  39. 39. <ul><li>And confirmed our thinking. Like... </li></ul><ul><li>Athletes have approx 1-5 hours [shared] </li></ul><ul><li>access to a PC a day </li></ul><ul><li>20 hours [non-shared] access to a mobile </li></ul><ul><li>a day </li></ul><ul><ul><li>Nokia 3636 </li></ul></ul><ul><ul><li>Sony Ericsson </li></ul></ul><ul><ul><li>Samsung G600 </li></ul></ul><ul><ul><li>Nokia N73 </li></ul></ul>EXAMPLE CLIENT
  40. 40. One Big Field Workshops! http://www.onebigfield.co.uk/blog/2010/09/how-to-run-a-workshop-part1/ Source : One Big Field project with Scope
  41. 41. Source : Facebook ( visualisation of a sample-set of 10 million friendship pairs from the Facebook database ) Holistic UX Show lifecycle diagram
  42. 42. One Big Field
  43. 43. One Big Field Scenarios The key things folks will do
  44. 44. What have they changed in the drum-kit syllabus?! said Geraldine [aged 46], an independent language teacher , who has been contacted by Trinity about changes to the syllabus…
  45. 45. One Big Field Task Create scenarios.
  46. 46. One Big Field Process-mapping Boxes and arrows
  47. 47. User journey: Find information on Key Protection business cover. Offering a package for the first time.
  48. 48. One Big Field
  49. 49. One Big Field How will they use the website; key user journeys I want to vote on last year’s films & set a reminder I want to vote on last year’s films & set a reminder Lets find a film and add a comment Lets check times and book! Book! Find and Download a Learning Resource Now Showing Film Details Rate & Write a comment – Sign In Rate & Write a Comment Start End View Last Year’s Films Vote on film Get popup stating thanks and sign-in invite Sign In Access Reminders Set SMS Reminder Start End Choose Friend Subscription Existing User Message New User Sign Up Payment Method Payment Details Purchase Start End You’re Done Film Detail Choose Date & Time Choose Ticket Options Make Payment Payment Confirmation Start End Learning and Development Schools and Colleges Download Resource Start End
  50. 50. One Big Field Existing Proposed V
  51. 51. One Big Field Task Process map scenarios.
  52. 52. One Big Field Capture requirements User-centering the shopping list Source : One Big Field project with Ebay
  53. 53. There is a major earthquake in a rural remote area of Kyrgyzstan. The British Red Cross launches an appeal. Itibek, a young British man with Kirghiz parents, is very concerned about his relatives - his uncle, aunt and cousin from his mother’s side live in the area affected by the earthquake. He's been trying to get in touch with them but has not heard anything since the earthquake. How can the British Red Cross help him to find out what is happening to his relatives He’s wondering whether to donate money to the appeal He would also like to donate some of his winter clothes, and wants to find out where his nearest Red Cross shop is to do so. Having donated money and clothes, he comes back to the website a month later to find out how the Red Cross has been using his donation in Kyrgyzstan. Describe and map out how he would engage with the British Red Cross currently. Highlight the tracing & message, donate and shop steps. User journey 1: Itibek’s earthquake EXAMPLE CLIENT
  56. 56. One Big Field Ideation across the process maps
  59. 59. One Big Field Task Ideation of requirements.
  60. 60. One Big Field Running workshops Key considerations…
  61. 61. One Big Field <ul><li>Prioritising requirements </li></ul><ul><li>MoSCoW </li></ul><ul><li>The 1-100 scale </li></ul>And Planning Poker
  62. 62. One Big Field Planning Poker Req 1: do the washing up after dinner – effort involved = 1 Chiwowa Req 2: build a small desk from a flatpack IKEA set – effort involved = 1 Labrador Req 3: replace the engine in your car – effort involved = 1 Great Dane Req 4: build a small nuclear fusion generator in an Afghan cave. As a prisoner – effort involved = ten Wargs [massive monster dogs from Lord of the Rings]
  63. 63. One Big Field Accessible
  64. 64. One Big Field “ Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web . Web accessibility also benefits others, including older people with changing abilities due to aging” http://www.w3.org/WAI/intro/accessibility.php
  65. 65. One Big Field An even playing field for all
  66. 66. One Big Field <ul><li>Visual </li></ul><ul><li>Hearing </li></ul><ul><li>Motor </li></ul><ul><li>Cognitive </li></ul>
  67. 67. One Big Field <ul><li>Some examples: </li></ul><ul><li>Alt. text </li></ul><ul><li>Keyboard controls </li></ul><ul><li>Transcript podcasts </li></ul><ul><li>Insufficient colour contrast </li></ul><ul><li>Acroynms & corp. speak </li></ul><ul><li>Bad CAPTCHA </li></ul><ul><li>Ambiguous links e.g. “click here” </li></ul>
  68. 68. One Big Field <ul><li>Assistive technology: </li></ul><ul><li>Screen-readers </li></ul><ul><li>Sip-and-puff </li></ul><ul><li>Screen magnification </li></ul><ul><li>Refreshable Braille </li></ul>
  69. 69. One Big Field <ul><li>Guiding principles: </li></ul><ul><li>P erceivable </li></ul><ul><li>O perable </li></ul><ul><li>U nderstandable </li></ul><ul><li>R obust </li></ul><ul><li>Web Content Accessibility Guidelines (WCAG) 2.0 </li></ul>
  70. 70. One Big Field The best test: My mum test
  71. 71. One Big Field The best business reason: Mobile
  72. 72. One Big Field <Review handout>
  73. 73. One Big Field Task Decide on three site you like for tomorrow.