Your SlideShare is downloading. ×
D&AD Digital Maze
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

D&AD Digital Maze


Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Digital Maze Professional Development Jake Smith JP74
  • 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. 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. 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. What level are we on? • Designers? Coders? • Thinkers? Do-ers? • Jakob Nielson. Jakob who?
  • 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. The ʻaverageʼ user The user journey
  • 8. The ʻaverage userʼ • Is a myth • Every user is unique
  • 9. Truths about most users • Have the attention span of a goldfish • Will not hang on your every word • Likes the obvious
  • 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. How do they see your work? Things we donʼt want to know #341
  • 12. Heat maps • Studies show users eye movements • Readers scan read for relevant words • This creates an F shape pattern
  • 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. 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. 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. User Journey • A method of conceptualising and structuring content and functionality • Strong emphasis on the user, their goals and their everyday experiences
  • 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. 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. 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. 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. 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. 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. Needs change over time
  • 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. User journeys recap
  • 26. How do you feel? User experience
  • 27. UX • User experience is subjective • It cannot be designed per se • The interaction is a reflection of your brand values and ethos
  • 28. UX is multi-disciplined • Psychology • Computer science • Graphic design • Industrial design • Cognitive science • Heuristics
  • 29. Customer experience is the new brand
  • 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. Measuring UX • Task success • Error rates • Likert Scale • Severity rankings • Completion times
  • 32. Good user experience comes from good usability
  • 33. “The only intuitive interface is the nipple. After that, itʼs all learned.” Bruce Ediger April 1995
  • 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. Principles of User Interface Design • Structure • Simplicity • Visibility • Feedback • Tolerance • Reuse
  • 36. Usability testing • Paper prototyping • Hallway testing • A/B testing • Guerilla testing
  • 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. A/B Testing • Serve 90% of your visitors your standard page • Serve 10% your new improved designs • Check the stats
  • 39. Guerilla testing • Set tasks for people, note problems… • …out on the road!
  • 40. Volunteer please… • Give me two venues and costs for seated tickets to watch Gorillaz via the site
  • 41. Benefits of usability • Higher revenues through increased sales • Increased user efficiency and satisfaction • Reduced development costs • Reduced support costs
  • 42. Good stuff Warning: subjective!
  • 43. Remember • UX isnʼt limited to the web • UX applies to every gadget you interact with; video games, DVDs, cameras…
  • 44. UX beyond the web
  • 45. User experience recap
  • 46. Questions & Answers Break
  • 47. Information Architecture Shaping systems
  • 48. What is IA? • The structural design of shared information environments – Information Architecture Institute
  • 49. Break it down • The way information is grouped • Navigation methods • Terminology
  • 50. IA is the blueprint for designing your system
  • 51. IA from understanding… • Business context • Content • Users
  • 52. Business context Content Users
  • 53. Card sorting? • Card sorting is a simple user-centered technique for obtaining insight into the structure of a site.
  • 54. Next steps… • Define the IA in a site map • Define user journeys • Paper prototype • Work up finished designs
  • 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. 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. Information architecture recap
  • 58. Interface Design You donʼt realise the doing
  • 59. What is interface design? • The design of software, appliances, machines, websites etc., with the focus on the userʼs experience and interaction
  • 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. Some interface design basics
  • 62. Fittsʼ law Measure human movement
  • 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. Interface design around the house Try this at home!
  • 65. Win or fail? • Consistent use of icons and language • If conventions exist, follow them • Too much choice is a bad thing
  • 66. A “nearly” interface
  • 67. What would I change? • Make the drop down menu obvious • Reduce mouse travel = reduce fatigue • Remove the adverts!
  • 68. Going forward
  • 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. 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. What next?
  • 72. Interface design recap
  • 73. Questions & answers Thank you
  • 74. Push yourself further • Useful sites; • More reading; Donʼt Make Me Think & Rocket Surgery Made Easy –Steve Krug • Apps; • Video;
  • 75. Jake Smith – JP74 – @jake74