D&AD Digital Maze


Published on

Professional Development course, covering user journeys, user experience, information architecture and interface design

Published in: Design
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

D&AD Digital Maze

  1. 1. Digital Maze Professional Development Jake Smith JP74
  2. 2. About me • Interactive Director at JP74 • Working with new media since 1996 • Worked on web, DVD, interactive TV… • by day – front end developer • Designer, programmer, problem solver
  3. 3. Weʼre going to look at… • User Journeys • User Experience • Information Architecture • Interface Design • …and if Iʼm talking too fast, or you donʼt understand, stop me!
  4. 4. What I canʼt tell you… • The universal right way to do UX/UI… because thereʼs no such thing • Future predictions about the internet and what you should be learning • Who will win the World Cup
  5. 5. What level are we on? • Designers? Coders? • Thinkers? Do-ers? • Jakob Nielson. Jakob who?
  6. 6. My concerns today • We are scratching the surface of four areas that people study for years • I donʼt want to hear my own voice for two hours, and Iʼm sure you donʼt either
  7. 7. The ʻaverageʼ user The user journey
  8. 8. The ʻaverage userʼ • Is a myth • Every user is unique
  9. 9. Truths about most users • Have the attention span of a goldfish • Will not hang on your every word • Likes the obvious
  10. 10. Why the rush? • Users often have limited time to complete a desired task • Often thereʼs similar information available elsewhere… get their attention or lose them • Users will persist with bad interfaces if theyʼve invested their time already
  11. 11. How do they see your work? Things we donʼt want to know #341
  12. 12. Heat maps • Studies show users eye movements • Readers scan read for relevant words • This creates an F shape pattern
  13. 13. How does that help us? • Donʼt be over-indulgent with design • Make copy and buttons obvious • Learn to put yourself in others shoes, really start thinking about your users • Donʼt make your user think!
  14. 14. Youʼre already doing it • Designers already take into account colours, tone of voice, shared knowledge • Now start thinking about things like users ability, when they will be using your site, what is their goal for that visit
  15. 15. Your user • Thinking about your web user goes beyond PC, screen size and browser • Take into account age, probable location, time allocation and ability • This leads to journeys and scenarios…
  16. 16. User Journey • A method of conceptualising and structuring content and functionality • Strong emphasis on the user, their goals and their everyday experiences
  17. 17. “Answering customer needs is the end point of our journeys through the structure, and the starting point of our thinking about the journey itself.” Jason Hobbs Boxes and Arrows
  18. 18. Identify their needs • Look at the broad, top level needs • These needs change with repeat visits • Discover these primary needs through consulting, research or just plain old common sense
  19. 19. Create personas • Michael This is the first time Iʼve booked a ticket • Erin I know how to book a train ticket, but Iʼve never booked with this site • Nathan I know exactly what Iʼm doing
  20. 20. Need states A. I have a ticket, I need to confirm connections, get a hotel or hire a car B. Whatʼs the best route to take? C.I need costs and times to plan my trip D.I know what I want, when I need to go, but Iʼm looking for the best price
  21. 21. Answering needs • We have narratives and users problems that we can solve with design • Take a site map or overview, and group needs within these areas, look for gaps
  22. 22. Needs change over time C. Planning my trip B. Best route D. Looking for the best deal A. I have my ticket, but I need more… …can you account for all these needs and requirements on one homepage?
  23. 23. Needs change over time
  24. 24. Practical example • Create 3 personas for people visiting a hospital • Think up 5 ʻneed statesʼ these visitors may have • Discuss how this may impact on design
  25. 25. User journeys recap
  26. 26. How do you feel? User experience
  27. 27. UX • User experience is subjective • It cannot be designed per se • The interaction is a reflection of your brand values and ethos
  28. 28. UX is multi-disciplined • Psychology • Computer science • Graphic design • Industrial design • Cognitive science • Heuristics
  29. 29. Customer experience is the new brand
  30. 30. Measuring UX • Can users complete the tasks to hand? • Are visitor levels dropping off on certain pages? Forms not being filled in? Not making a purchase?
  31. 31. Measuring UX • Task success • Error rates • Likert Scale • Severity rankings • Completion times
  32. 32. Good user experience comes from good usability
  33. 33. “The only intuitive interface is the nipple. After that, itʼs all learned.” Bruce Ediger April 1995
  34. 34. Usability is measurable • Usability is the ease of use of a product or interface • Still measured subjectively, but against known criteria, Principles of User Interface Design
  35. 35. Principles of User Interface Design • Structure • Simplicity • Visibility • Feedback • Tolerance • Reuse
  36. 36. Usability testing • Paper prototyping • Hallway testing • A/B testing • Guerilla testing
  37. 37. Hallway testing • Grab 5 or 6 random people • Better if they donʼt know you, or your app • Complete a series of set tasks
  38. 38. A/B Testing • Serve 90% of your visitors your standard page • Serve 10% your new improved designs • Check the stats
  39. 39. Guerilla testing • Set tasks for people, note problems… • …out on the road!
  40. 40. Volunteer please… • Give me two venues and costs for seated tickets to watch Gorillaz via the ticketmaster.co.uk site
  41. 41. Benefits of usability • Higher revenues through increased sales • Increased user efficiency and satisfaction • Reduced development costs • Reduced support costs
  42. 42. Good stuff Warning: subjective!
  43. 43. Remember • UX isnʼt limited to the web • UX applies to every gadget you interact with; video games, DVDs, cameras…
  44. 44. UX beyond the web
  45. 45. User experience recap
  46. 46. Questions & Answers Break
  47. 47. Information Architecture Shaping systems
  48. 48. What is IA? • The structural design of shared information environments – Information Architecture Institute
  49. 49. Break it down • The way information is grouped • Navigation methods • Terminology
  50. 50. IA is the blueprint for designing your system
  51. 51. IA from understanding… • Business context • Content • Users
  52. 52. Business context Content Users
  53. 53. Card sorting? • Card sorting is a simple user-centered technique for obtaining insight into the structure of a site.
  54. 54. Next steps… • Define the IA in a site map • Define user journeys • Paper prototype • Work up finished designs
  55. 55. EHM SERVICE PROVIDERS SITEMAP v7 EHM SERVICE PROVIDERS HOMEPAGE: HOME ABOUT SERVICES NEWS CONTACT CONTACT FUND COMPANY OTHER LATEST DETAILS HISTORY SERVICES SERVICES SERVICES NEWS (Including Enquiry Form) Company Formation Website Design Fund Accounting & Secretarial VALUES Services CAREERS IT Support Business Asset Valuation Development & Consultancy Intranet BENEFITS Investment Accountancy Information Services VOIP systems Corporate PR Taxation Management HR Payroll PRIVACY DISCLAIMER ACCESSIBILITY SITEMAP POLICY Compliance
  56. 56. Services Global Innovation Report Conference Speaking Kate A Lucy J Creative Matchmaking Amy H Tailored Reports Jo M Contributors Catherine D Contact Categories Client Login News & Events News Themes Events listing / individual event Advanced Search In the Press GDR Home My Selection Archive view by month/year? Help? Why GDR? Clients America A B C listings Digital Library Member's Area Europe GDR Report City Shopping Lists Asia Our People Logout
  57. 57. Information architecture recap
  58. 58. Interface Design You donʼt realise the doing
  59. 59. What is interface design? • The design of software, appliances, machines, websites etc., with the focus on the userʼs experience and interaction
  60. 60. Interface design goals • To make interaction as simple and efficient as possible • Good interface design doesnʼt draw unnecessary attention to itself • Must balance technical functionality and visual elements
  61. 61. Some interface design basics
  62. 62. Fittsʼ law Measure human movement
  63. 63. Interface design • Understand your delivery platform • Set your standards and stick with them • Clear and consistent use of language, icons, buttons, drop downs… whatever. Do it once, keep doing it.
  64. 64. Interface design around the house Try this at home!
  65. 65. Win or fail? • Consistent use of icons and language • If conventions exist, follow them • Too much choice is a bad thing
  66. 66. A “nearly” interface
  67. 67. What would I change? • Make the drop down menu obvious • Reduce mouse travel = reduce fatigue • Remove the adverts!
  68. 68. Going forward
  69. 69. Going forward • HTML5 spec includes Geolocation • Mobile phones now feature GPS and accelerometers as well as Wifi • Projectors are becoming miniaturised • Context becomes more important
  70. 70. Context via GPS • Visiting a hospital, how far away will determine your direction instructions • Directions can turn from road based into building layouts if GPS recognises youʼre in the hospital grounds
  71. 71. What next?
  72. 72. Interface design recap
  73. 73. Questions & answers Thank you
  74. 74. Push yourself further • Useful sites; • More reading; uxmag.com Donʼt Make Me Think usabilityfirst.com & useit.com Rocket Surgery Made Easy –Steve Krug • Apps; silverbackapp.com • Video; balsamiq.com objectifiedfilm.com
  75. 75. Jake Smith – JP74 jake@jp74.com – @jake74