d&ad digital maze
DESCRIPTION
Professional Development course, covering user journeys, user experience, information architecture and interface designTRANSCRIPT
Digital MazeProfessional Development
Jake SmithJP74
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
Weʼre going to look at…
• User Journeys
• User Experience
• Information Architecture
• Interface Design
• …and if Iʼm talking too fast, oryou donʼt understand, stop me!
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
What level are we on?
• Designers? Coders?
• Thinkers? Do-ers?
• Jakob Nielson. Jakob who?
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
The ʻaverageʼ userThe user journey
The ʻaverage userʼ
• Is a myth
• Every user is unique
Truths about most users
• Have the attention span of a goldfish
• Will not hang on your every word
• Likes the obvious
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
How do theysee your work?Things we donʼt want to know #341
Heat maps
• Studies show users eye movements
• Readers scan read for relevant words
• This creates an F shape pattern
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!
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
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…
User Journey
• A method of conceptualising and structuring content and functionality
• Strong emphasis on the user, their goals and their everyday experiences
“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 HobbsBoxes and Arrows
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
Create personas
• MichaelThis is the first time Iʼve booked a ticket
• ErinI know how to book a train ticket, but Iʼve never booked with this site
• NathanI know exactly what Iʼm doing
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 tripD.I know what I want, when I need to go,
but Iʼm looking for the best price
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
Needs change over time
C. Planning my tripB. Best routeD. Looking for the best dealA. I have my ticket, but I need more…
…can you account for all these needs and requirements on one homepage?
Needs change over time
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
User journeysrecap
How do you feel?User experience
UX
• User experience is subjective
• It cannot be designed per se
• The interaction is a reflection of your brand values and ethos
UX is multi-disciplined
• Psychology
• Computer science
• Graphic design
• Industrial design
• Cognitive science
• Heuristics
Customer experienceis the new brand
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?
Measuring UX
• Task success
• Error rates
• Likert Scale
• Severity rankings
• Completion times
Good user experience comesfrom good usability
“The only intuitive interface is the nipple. After that, itʼs all learned.”
Bruce EdigerApril 1995
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
Principles of User Interface Design
• Structure
• Simplicity
• Visibility
• Feedback
• Tolerance
• Reuse
Usability testing
• Paper prototyping
• Hallway testing
• A/B testing
• Guerilla testing
Hallway testing
• Grab 5 or 6 random people
• Better if they donʼt know you, or your app
• Complete a series of set tasks
A/B Testing
• Serve 90% of your visitors your standard page
• Serve 10% your new improved designs
• Check the stats
Guerilla testing
• Set tasks for people, note problems…
• …out on the road!
Volunteer please…
• Give me two venues and costs for seated tickets to watch Gorillaz via the ticketmaster.co.uk site
Benefits of usability
• Higher revenues throughincreased sales
• Increased user efficiencyand satisfaction
• Reduced development costs
• Reduced support costs
Good stuffWarning: subjective!
Remember
• UX isnʼt limited to the web
• UX applies to every gadget you interact with; video games, DVDs, cameras…
UX beyond the web
User experience recap
Questions &Answers
Break
Information Architecture
Shaping systems
What is IA?
• The structural design of shared information environments
– Information Architecture Institute
Break it down
• The way information is grouped
• Navigation methods
• Terminology
IA is the blueprint for designing your system
IA from understanding…
• Business context
• Content
• Users
Businesscontext
Content Users
Card sorting?
• Card sorting is a simple user-centered technique for obtaining insight into the structure of a site.
Next steps…
• Define the IA in a site map
• Define user journeys
• Paper prototype
• Work up finished designs
Fund Accounting
Asset Valuation
InvestmentInformation Services
CorporateManagement
Website Design
HR
IT Support
Intranet
VOIP systems
PR
EHM SERVICE PROVIDERSSITEMAP v7 EHM SERVICE PROVIDERS HOMEPAGE:
CONTACT
CONTACTDETAILS(Including
Enquiry Form)
CAREERS
LATESTNEWS
NEWSSERVICES
Company Formation& Secretarial
Services
ABOUT
VALUES
HISTORY
BENEFITS
PRIVACYPOLICY ACCESSIBILITY SITEMAPDISCLAIMER
COMPANYSERVICES
OTHERSERVICES
FUNDSERVICES
BusinessDevelopment& Consultancy
Accountancy
Taxation
Payroll
Compliance
HOME
News
listing / individual eventEvents
In the Press
view by month/year?Archive
News & Events
A B C listingsAmerica
Europe
Asia
Clients
Categories
Themes
Advanced Search
My Selection
Help?
Digital Library
GDR Report
City Shopping Lists
Logout
Member's Area
Client Login
Why GDR?
Global Innovation Report
Kate A
Lucy J
Amy H
Jo M
Catherine D
Conference Speaking
Creative Matchmaking
Tailored Reports
Contributors
Services
Our People
Contact
GDR Home
Information architecture
recap
Interface DesignYou donʼt realise the doing
What is interface design?
• The design of software, appliances, machines, websites etc., with the focus on the userʼs experience and interaction
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
Some interface design basics
Fittsʼ lawMeasure human movement
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.
Interface design around the house
Try this at home!
Win or fail?
• Consistent use of icons and language
• If conventions exist, follow them
• Too much choice is a bad thing
A “nearly” interface
What would I change?
• Make the drop down menu obvious
• Reduce mouse travel = reduce fatigue
• Remove the adverts!
Going forward
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
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
What next?
Interface design recap
Questions & answers
Thank you
Push yourself further
• Useful sites;uxmag.comusabilityfirst.comuseit.com
• Apps;silverbackapp.combalsamiq.com
• More reading;Donʼt Make Me Think&Rocket Surgery Made Easy–Steve Krug
• Video;objectifiedfilm.com