FY10 Flash Flood Services Team “We’re #6!” “Hey, we’re still above Program Management”
Mobile UX: We’re still human
-
Upload
reading-room -
Category
Technology
-
view
1.451 -
download
0
description
Transcript of Mobile UX: We’re still human
![Page 1: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/1.jpg)
1
INTERNET WORLD 2013
Mobile UX:We’re still human--------------------UNDERSTANDING
THE PEOPLEBEHIND THE SCREEN
![Page 2: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/2.jpg)
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
What we’ll be covering
Who are we designing for? Understanding the design target and context scenarios
Our “take anywhere” electronic friendHow to build better experiences by understanding human relationships
It’s all in the memesWhy the principles of memetics are important to mobile UX designers
Test with real users and real devicesSome experiences from the field
![Page 3: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/3.jpg)
![Page 4: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/4.jpg)
Which of these devices are you designing for?
![Page 5: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/5.jpg)
None of them. You are designing for the human holding it.
![Page 6: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/6.jpg)
o Sat down in a familiar location
o Alone in a quiet room
o Concentrating hard
o Plenty of time to do what she wants
o Typing with both hands
o Has full access to everything in her office and on her computer
o Stood up – and on the move
o Surrounded by other people
o Lots of sensory distractions
o Concentrating on something else (not missing his train)
o Fitting what he’s doing into an idle moment
o Holding the device with one hand
o Only has access to what he is carrying
Spot the difference?
![Page 7: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/7.jpg)
The most important difference between mobile and desktop UX is the human holding it and the
situation they are in, not the device.
Takeaway
![Page 8: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/8.jpg)
Designing a responsive website for a leading UK law firm
Mobile and tablet important as clients are at executive and C-level, 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?
Lewis Silkin: Mobile UX design for user context
![Page 9: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/9.jpg)
Business insightsPeople 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
First understand how the business operates
![Page 10: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/10.jpg)
Telephone
“We’re interested in legal services for marketing. Yes, sure I’d love to meet Simon.”
Mobile-web
2 days laterDiary reminder: your meeting with Lewis Silkin is in 30 minutes.
“Who is this guy I’m meeting – what’s he like?
“I’ll send you an email to confirm and a link to Simon’s profile.”
Face-to-face
“Hi Simon.. I was just reading your journal post – really interesting stuff.”
Mapping out the customer journey helped us to understand where mobile web could make a
difference
Lewis Silkin: Mobile UX design for user context
![Page 11: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/11.jpg)
Our “take anywhere” electronic friend
![Page 12: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/12.jpg)
Your plastic pal who’s fun to be with
--------------------------------------Sirius Cybernetics Corporation's definition of a
robot, Hitch Hikers Guide to the Galaxy
“ ”
![Page 13: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/13.jpg)
“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
Our new friend is not complicated
![Page 14: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/14.jpg)
Our friends are a constant source of entertainment
![Page 15: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/15.jpg)
Phones are becoming more human
![Page 16: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/16.jpg)
1984: science fiction
“ Hello Computer? ”
![Page 17: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/17.jpg)
20122012: reality
![Page 18: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/18.jpg)
We like positive feedback from our friends
![Page 19: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/19.jpg)
Putting some of these approaches together...
![Page 20: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/20.jpg)
The challengeo 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?
State Library of Queensland
![Page 21: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/21.jpg)
State Library of Queensland
![Page 22: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/22.jpg)
State Library of Queensland
o Augmented reality activitieso Encouraging real world explorationo Multi-modal inputo Avatar characterso Instant feedback
![Page 23: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/23.jpg)
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?
Takeaway
![Page 24: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/24.jpg)
“Ideate in the wild”
Takeaway
“Ideate in the wild ”Rachel Hinman, Senior Research Scientist, Nokia
“Pretend it’s magic”Alan Cooper, usability extraordinaire
![Page 25: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/25.jpg)
It’s all in the memes
![Page 26: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/26.jpg)
Sorry LOL cats... You are amusing but not useful to a UX designer
![Page 27: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/27.jpg)
Memes in society
Memes are concepts that spread within society without any central organisation
Memes evolve through transmission
![Page 28: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/28.jpg)
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
![Page 29: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/29.jpg)
But .. aren’t you talking about design patterns?
Design patterns are not memetic– in fact they put a brake on the evolutionary process
![Page 30: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/30.jpg)
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 evolution from learned behaviours
![Page 31: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/31.jpg)
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
![Page 32: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/32.jpg)
European Medicines Agency
The challenge50,000+ HTML pages2.5m documentsMobile must offer 100% of content
The usersMainly 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.
![Page 33: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/33.jpg)
European Medicines Agency: “Memetic” mobile navigation
![Page 34: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/34.jpg)
Menu icon and fly-in behaviour
+/- to expand and close, click title to go open page
Memetic UI concepts make a system more intuitive
![Page 35: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/35.jpg)
Testing with real users and real devices
![Page 36: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/36.jpg)
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
Ministry of Justice
![Page 37: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/37.jpg)
Takeaway
Test on real devices with real users
------------------------------------------------------------------------------------Don’t rely on desktop/mobile emulators or shrinking your
browser to see what happens
![Page 38: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/38.jpg)
Closing thought: Mobile is just a tool that allows humans to do something
![Page 39: Mobile UX: We’re still human](https://reader031.fdocuments.us/reader031/viewer/2022013011/5564b923d8b42a98268b54b8/html5/thumbnails/39.jpg)
Questions?Ian Huckvale – Head of user engagementB.Eng Computing (Imperial College, London)
Get in touch:Email: [email protected] @IanHuxBlog: 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 StreetSohoLondonW1D 3JR www.readingroom.com