INTERNET WORLD 2013

Mobile UX:
We’re still human
-------------------UNDERSTANDING

THE PEOPLE

BEHIND THE SCREEN

1
What we’ll be covering

With mobile and tablet now
accounting for 10 -20% of
traffic to most websites its
increasingly imp...
Which of these devices
are you designing for?
None of them. You are designing for
the human holding it.
Spot the difference?

o

Sat down in a familiar location

o

Stood up – and on the move

o

Alone in a quiet room

o

Surr...
Takeaway

The most important difference
between mobile and desktop UX is the
human holding it and the situation
they are i...
Lewis Silkin: Mobile UX design for user context

Designing a responsive website
for a leading UK law firm
Mobile and table...
First understand how the business operates

Business insights
People buy legal services based on
reputation and personal r...
Lewis Silkin: Mobile UX design for user context
Mapping out the customer journey helped us to
understand where mobile web ...
Our “take anywhere” electronic friend
“

Your plastic pal who’s fun
to be with
-------------------------------------Sirius Cybernetics Corporation's definition ...
Our new friend is not complicated
“At 18 months old, my
son already knows
how to do the iPhone
swipe. Luckily he
doesn't k...
Our friends are a constant source of entertainment
Phones are becoming more human
1984: science fiction

“ Hello Computer? ”
2012

2012: reality
We like positive feedback from our friends
Putting some of these approaches together...
State Library of Queensland

The challenge
o

Parents bring kids to the library and
dump them in the kids corner

o

Often...
State Library of Queensland
State Library of Queensland

o
o
o
o
o

Augmented reality activities
Encouraging real world exploration
Multi-modal input
...
Takeaway

Think of your
website/app/
service as if it
is a human
---------------------How would they behave if
they wanted...
Takeaway

“Ideate in the wild ”

“Ideate in the wild”
Rachel Hinman, Senior Research Scientist, Nokia

“Pretend it’s magic...
It’s all in the memes
Sorry LOL cats...
You are amusing but not useful to a UX designer
Memes in society

Memes are concepts that spread within
society without any central organisation
Memes evolve through tran...
Memes in technology

Memes are also found in interface design –
physical, software and web
They provide familiar idioms, c...
But .. aren’t you talking about design patterns?

Design patterns are not memetic
– in fact they put a brake on the
evolut...
Takeaway

“Memetic” interfaces are more
important on mobile
-----------------------------------------No space to explain f...
Memetic interface design in the wild

“Friending”
A concept invented in the mid
90s, copied and evolved by social
networks...
European Medicines Agency

The challenge
50,000+ HTML pages
2.5m documents
Mobile must offer 100% of content

The users
Ma...
European Medicines Agency: “Memetic” mobile navigation
Memetic UI concepts make a system more intuitive
Menu icon and fly-in behaviour

+/- to expand and close, click
title to g...
Testing with real users and real devices
Ministry of Justice
Ministry of Justice “Can I get
legal aid?” tool.
Research showed that target audience (C2DE) were
actu...
Takeaway

Test on real devices with real users
---------------------------------------------------------------------------...
Closing thought:
Mobile is just a tool
that allows humans to do something
Questions?

Ian Huckvale – Head of user engagement
B.Eng Computing (Imperial College, London)
Get in touch:
Email: ian.huc...
Mobile UX: We’re still human- Understanding the people behind the screen, Readingroom
Upcoming SlideShare
Loading in …5
×

Mobile UX: We’re still human- Understanding the people behind the screen, Readingroom

645 views

Published on

Published in: Technology
  • Be the first to comment

Mobile UX: We’re still human- Understanding the people behind the screen, Readingroom

  1. 1. INTERNET WORLD 2013 Mobile UX: We’re still human -------------------UNDERSTANDING THE PEOPLE BEHIND THE SCREEN 1
  2. 2. What we’ll be covering With mobile and tablet now accounting for 10 -20% of traffic to most websites its increasingly important that mobile user experience is as good as desktop. I’ll cover some practical approaches to help you design better mobile user experience, with case studies from the field Who are we designing for? Understanding the design target and context scenarios Our “take anywhere” electronic friend How to build better experiences by understanding human relationships It’s all in the memes Why the principles of memetics are important to mobile UX designers Test with real users and real devices Some experiences from the field
  3. 3. Which of these devices are you designing for?
  4. 4. None of them. You are designing for the human holding it.
  5. 5. Spot the difference? o Sat down in a familiar location o Stood up – and on the move o Alone in a quiet room o Surrounded by other people o Concentrating hard o Lots of sensory distractions o Plenty of time to do what she wants o Concentrating on something else (not missing his train) o Typing with both hands o Fitting what he’s doing into an idle moment o Has full access to everything in her office and on her computer o Holding the device with one hand o Only has access to what he is carrying
  6. 6. Takeaway The most important difference between mobile and desktop UX is the human holding it and the situation they are in, not the device.
  7. 7. Lewis Silkin: Mobile UX design for user context Designing a responsive website for a leading UK law firm Mobile and tablet important as clients are at executive and Clevel, and often spend protracted periods away from their desks. First step was to understand the context and usage – how does web and mobile-web fit?
  8. 8. First understand how the business operates Business insights People buy legal services based on reputation and personal relationships They buy into an individual, not just the firm that person works for Sales do not happen online, you do not add legal services to a shopping basket and go to the checkout Digital needed to support the offline business, not replace it
  9. 9. Lewis Silkin: Mobile UX design for user context Mapping out the customer journey helped us to understand where mobile web could make a difference Telephone Email Mobile-web Face-to-face “We’re interested in legal services for marketing. Yes, sure I’d love to meet Simon.” “I’ll send you an email to confirm and a link to Simon’s profile.” 2 days later Diary reminder: your meeting with Lewis Silkin is in 30 minutes. “Hi Simon.. I was just reading your journal post – really interesting stuff.” “Who is this guy I’m meeting – what’s he like?
  10. 10. Our “take anywhere” electronic friend
  11. 11. “ Your plastic pal who’s fun to be with -------------------------------------Sirius Cybernetics Corporation's definition of a robot, Hitch Hikers Guide to the Galaxy ”
  12. 12. Our new friend is not complicated “At 18 months old, my son already knows how to do the iPhone swipe. Luckily he doesn't know the password to unlock my phone just yet.” Kari Aakre, Intel employee
  13. 13. Our friends are a constant source of entertainment
  14. 14. Phones are becoming more human
  15. 15. 1984: science fiction “ Hello Computer? ”
  16. 16. 2012 2012: reality
  17. 17. We like positive feedback from our friends
  18. 18. Putting some of these approaches together...
  19. 19. State Library of Queensland The challenge o Parents bring kids to the library and dump them in the kids corner o Often they leave them their Smartphone or Tablet to play with whilst they go round o Can we entertain and educate those kids using that device whilst their parents are off doing stuff?
  20. 20. State Library of Queensland
  21. 21. State Library of Queensland o o o o o Augmented reality activities Encouraging real world exploration Multi-modal input Avatar characters Instant feedback
  22. 22. Takeaway Think of your website/app/ service as if it is a human ---------------------How would they behave if they wanted to make friends with the end user?
  23. 23. Takeaway “Ideate in the wild ” “Ideate in the wild” Rachel Hinman, Senior Research Scientist, Nokia “Pretend it’s magic” Alan Cooper, usability extraordinaire
  24. 24. It’s all in the memes
  25. 25. Sorry LOL cats... You are amusing but not useful to a UX designer
  26. 26. Memes in society Memes are concepts that spread within society without any central organisation Memes evolve through transmission
  27. 27. Memes in technology Memes are also found in interface design – physical, software and web They provide familiar idioms, controls and learned behaviours ... And they also evolve
  28. 28. But .. aren’t you talking about design patterns? Design patterns are not memetic – in fact they put a brake on the evolutionary process
  29. 29. Takeaway “Memetic” interfaces are more important on mobile -----------------------------------------No space to explain functions with labels, no hover states – the most intuitive interfaces are those that offer an evolvution from learned behaviours
  30. 30. Memetic interface design in the wild “Friending” A concept invented in the mid 90s, copied and evolved by social networks ever since. “Follow” A concept popularised by Twitter; evolved from Friending and now evolving elsewhere as a personalisation tool
  31. 31. European Medicines Agency The challenge 50,000+ HTML pages 2.5m documents Mobile must offer 100% of content The users Mainly EU pharmaceutical industry. Very frequent visits (often more than once a day), people learn the navigation. Not general browsing – specific things they are looking for or specific places to check for updates.
  32. 32. European Medicines Agency: “Memetic” mobile navigation
  33. 33. Memetic UI concepts make a system more intuitive Menu icon and fly-in behaviour +/- to expand and close, click title to go open page
  34. 34. Testing with real users and real devices
  35. 35. Ministry of Justice Ministry of Justice “Can I get legal aid?” tool. Research showed that target audience (C2DE) were actually quite likely to be using a smartphone or tablet. 20% of access to Gov.uk is now mobile / tablet. Important to test on these devices with real users – don’t just flick through screens and think “oh, it’s all there”. Testing focussed on interaction – buttons, swiping, scrolling. Findings: • Scrolling through long pages was annoying • ‘Unexpected’ page reloads were disorientating • “What happens if I press this button?” – mobile users like to experiment – let them undo operations
  36. 36. Takeaway Test on real devices with real users -----------------------------------------------------------------------------------Don’t rely on desktop/mobile emulators or shrinking your browser to see what happens
  37. 37. Closing thought: Mobile is just a tool that allows humans to do something
  38. 38. Questions? Ian Huckvale – Head of user engagement B.Eng Computing (Imperial College, London) Get in touch: Email: ian.huckvale@readingroom.com Twitter @IanHux Blog: blog.readingroom.com Interests: • Digital strategy, user experience, information architecture, usability, accessibility, mobile, social media • Outside work: cooking, rowing, fencing Reading Room 65-66 Frith Street Soho London W1D 3JR www.readingroom.com

×