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

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

16. Heat maps
• Studies show users eye movements
• Readers scan read for relevant words
• This creates an F shape pattern

18. 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!

19. 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

20. 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…

21. User Journey
• A method of conceptualising and
structuring content and functionality
• Strong emphasis on the user, their
goals and their everyday experiences

22. “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

23. 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

24. 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

25. 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

26. 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

27. 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?

28. Needs change over time

29. 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

32. User journeys
recap

33. How do you feel?
User experience

34. UX
• User experience is subjective
• It cannot be designed per se
• The interaction is a reflection of your
brand values and ethos

35. UX is multi-disciplined
• Psychology
• Computer science
• Graphic design
• Industrial design
• Cognitive science
• Heuristics

36. Customer experience
is the new brand

37. 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?

38. Measuring UX
• Task success
• Error rates
• Likert Scale
• Severity rankings
• Completion times

39. Good user experience comes
from good usability

40. “The only intuitive interface is the
nipple. After that, itʼs all learned.”
Bruce Ediger
April 1995

41. 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

42. Principles of User
Interface Design
• Structure
• Simplicity
• Visibility
• Feedback
• Tolerance
• Reuse

43. Usability testing
• Paper prototyping
• Hallway testing
• A/B testing
• Guerilla testing

46. Hallway testing
• Grab 5 or 6 random people
• Better if they donʼt know you, or your
app
• Complete a series of set tasks

47. A/B Testing
• Serve 90% of your visitors your
standard page
• Serve 10% your new improved designs
• Check the stats

48. Guerilla testing
• Set tasks for people, note problems…
• …out on the road!

49. Volunteer please…
• Give me two venues and costs for
seated tickets to watch Gorillaz via the
ticketmaster.co.uk site

50. Benefits of usability
• Higher revenues through
increased sales
• Increased user efficiency
and satisfaction
• Reduced development costs
• Reduced support costs

51. Good stuff
Warning: subjective!

56. Remember
• UX isnʼt limited to the web
• UX applies to every gadget you interact
with; video games, DVDs, cameras…

57. UX beyond the web

58. User experience
recap

59. Questions &
Answers
Break

60. Information
Architecture
Shaping systems

61. What is IA?
• The structural design of shared
information environments
– Information Architecture Institute

62. Break it down
• The way information is grouped
• Navigation methods
• Terminology

63. IA is the blueprint for
designing your system

64. IA from understanding…
• Business context
• Content
• Users

65. Business
context
Content Users

66. Card sorting?
• Card sorting is a simple user-centered
technique for obtaining insight into the
structure of a site.

69. Next steps…
• Define the IA in a site map
• Define user journeys
• Paper prototype
• Work up finished designs

70. 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

71. 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

72. Information
architecture
recap

73. Interface Design
You donʼt realise the doing

74. What is interface design?
• The design of software, appliances,
machines, websites etc., with the focus
on the userʼs experience and interaction

77. 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

78. Some interface
design basics

83. Fittsʼ law
Measure human movement

88. 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.

89. Interface design
around the house
Try this at home!

95. Win or fail?
• Consistent use of icons and language
• If conventions exist, follow them
• Too much choice is a bad thing

96. A “nearly” interface

104. What would I change?
• Make the drop down menu obvious
• Reduce mouse travel = reduce fatigue
• Remove the adverts!

107. Going forward

108. 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

110. 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

111. What next?

113. Interface design
recap

114. Questions
& answers
Thank you

115. 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

116. Jake Smith – JP74
jake@jp74.com – @jake74