1

INTERNET WORLD 2013

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

THE PEOPLEBEHIND THE SCREEN

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

Which of these devices are you designing for?

None of them. You are designing for the human holding it.

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?

The most important difference between mobile and desktop UX is the human holding it and the

situation they are in, not the device.

Takeaway

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

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

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?

Email

“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

Our “take anywhere” electronic friend

Your plastic pal who’s fun to be with

--------------------------------------Sirius Cybernetics Corporation's definition of a

robot, Hitch Hikers Guide to the Galaxy

“ ”

“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

Our friends are a constant source of entertainment

Phones are becoming more human

1984: science fiction

“ Hello Computer? ”

20122012: reality

We like positive feedback from our friends

Putting some of these approaches together...

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

State Library of Queensland

State Library of Queensland

o Augmented reality activitieso Encouraging real world explorationo Multi-modal inputo Avatar characterso Instant feedback

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

“Ideate in the wild”

Takeaway

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

“Pretend it’s magic”Alan Cooper, usability extraordinaire

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 transmission

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

But .. aren’t you talking about design patterns?

Design patterns are not memetic– in fact they put a brake on the evolutionary process

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

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

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.

European Medicines Agency: “Memetic” mobile navigation

Menu icon and fly-in behaviour

+/- to expand and close, click title to go open page

Memetic UI concepts make a system more intuitive

Testing with real users and real devices

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

Takeaway

Test on real devices with real users

------------------------------------------------------------------------------------Don’t rely on desktop/mobile emulators or shrinking your

browser to see what happens

Closing thought: Mobile is just a tool that allows humans to do something

Questions?Ian Huckvale – Head of user engagementB.Eng Computing (Imperial College, London)

Get in touch:Email: ian.huckvale@readingroom.comTwitter @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