The mobile user experience

This talk was first given at the Mobile East conference on 29 June 2012 and an updated version was given to the Cambridge Mobile App Group on 16 July 2013

Title: Mobile Last (or Mobile UX) – Considering the mobile experience when it seems too late for ‘Mobile First’.

Duration: 40 minutes

Description: ‘Mobile First’ is a great action to bear in mind when creating a new website or product, but for many who have already invested in the desktop browser, this advice comes too late. This talk covers some of the considerations to take into account when transitioning to mobile, including the difference between types of user and their behaviour; the constraints and opportunities that mobile provides; and strategies for mobile content organisation, layout, and navigation.

The slides (SlideShare)

You can put these slides on your own site via the embed links on SlideShare

The talk:

I’m going to be talking about considerations for the user experience when transitioning content from the desktop to the mobile platform, when it’s too late for ‘Mobile First’

By content I mean that which displays in a browser – web site, web app, web service, whatever. I’m probably going to say the word website and phone a lot but I mean it in the broader sense of content for mobile devices.

Mobile First

First things first – Mobile First. In order to get some context for this talk we need to understand what is meant by ‘Mobile First’.

[Let’s have a show of hands – who’s familiar with the term ‘Mobile First’?]

I’ll start with what ‘Mobile First isn’t. ‘Mobile First’ is not about physically creating your website on mobile before you create it for desktop.

‘Mobile First’ is a methodology – a mindset. It’s about designing with the constraints and capabilities that mobile provides. Because designing with constraints forces you to focus and prioritise and designing with capabilities attracts innovation.

‘Mobile First’ is – an approach to design – that forces you to focus – and enables you to innovate – in ways you previously couldn’t.

‘Mobile First’ says that whether you have a website for desktop already or not, whatever you do, you should be thinking about how you would be designing it on mobile first.

Even if you have no current plans to create a mobile website, you should still think about ‘Mobile First’.

The big companies are all realizing this – Google, Facebook, Adobe, LinkedIn, The BBC – they’re all finding that what they design and learn for mobile, feeds back into the desktop.

Why does mobile UX matter?

We hear discussions like ‘Should we create a native app or a mobile website?’. ‘Should we create a mobile website separate to the desktop version?’

If you can see a need for a native web app, that’s great, do it. If you have a specific need for separate mobile and desktop websites, that can be great too.

But a website that is optimized for mobile devices is no longer optional.

So – Mobile First is a sound design approach. But here’s the thing – that’s great advice when you’re starting out on a project or a phase of a project. Many of us don’t have that luxury.

There’s a lot of legacy websites out there that were designed without a second thought for the mobile platform (in fact maybe not even with a first thought).

This has got to change. The mobile platform is growing. Fast. Really fast. Stupid fast. But you know this, right? It’s probably why many of you are here.

International Data Corporation IDC predicted that by 2016 more than 1 billion smartphones will be being shipped. If you don’t make the move to mobile now, you will lose any competitive edge you thought you had, because in a very short time there will be a billion smart-phone and tablet users out there consuming media on the web. The smartphone will be the primary connection to the internet.

It depends on what survey you read, but the fact is, this prediction was made in 2012, based on 2011 figures. It’s already way out of date! The same company now predicts worldwide sales of smartphones alone is already going to reach 1 billion this coming year.

We shouldn’t get confused by this idea of a desktop web and a mobile web. The web just is mobile. There is just one web.

Here’s another amazing fact which unfortunately I forget where I read this: In a survey earlier this year 48% of companies have no idea what percentage of visitors to their website are on a mobile device. [ed: I’ve not been able to dig this reference up again other than with respect to people reading marketing emails, which was not the context I originally found this gem of a statistic!]

So how do you make that move and ensure that you create or maintain a competitive edge?

By ensuring that you consider the user experience.

That is easy to say and very hard to do. Harder than for desktop. Why harder? Because it’s a balancing act. You have to balance constraints, capabilities, user behaviour, and needs in a much more strategic fashion than you do for desktop.

Constraints

I don’t think we realise how spoilt we are on desktop. On desktop you have huge amounts of space on a static screen (or more than one screen) where you have the full attention of the viewer, in a comfortable environment, and with a 99.99 percent uptime on a mega-fast broadband connection – and a keyboard and mouse to boot. Transition that desktop experience to a smartphone.

Screen size: Well – yeah, duh! There’s just physically less screen real estate.

That doesn’t mean you have to make stuff smaller – it means you have to prioritise what you keep.

And because there’s no mouse, then in some cases it even means you have to make stuff bigger so that you can touch it easily without accidentally clicking the thing next to it.

The consensus is to that touch points (including margins within the touch area) should be at least around 8 to 10mm for finger tips and 10-14mm for finger pads and thumbs – and that unfortunately means that many websites designed for desktop are almost impossible to navigate when squeezed onto a mobile device without significantly zooming in.

Adobe have since made their product page responsive which basically means all those products are now in one massive long column, and the headers are compressed. And the row of featured products is now a sort of paged view. With tiny little page buttons that have a clickable target width of less than 1mm! So here you have a web design that intelligently adjusts the layout, but only in a kind of brute force, high level way, and at the expense of the finer level of detail and interaction. Responsive behaviour isn’t enough on it’s own, unless you actually design the detail with touch in mind.

On the Chrome browser for Android (and probably other setups), if the point where you touch spans multiple touchpoints, then a zoom popup appears so that you can easily choose which one you really wanted. That’s pretty neat, but really should be avoided in the first place.

It can be hard to come round to the idea of making things bigger rather than smaller, but there is one saving grace which is that on a touch device, the whole screen is interactive. That means that you can make the whole of the content interactive. You can dispense with the idea that you must only click on blue links and raised buttons as you might for desktop.

Erase the chrome and enable the content, because the content is the interface.

Performance and limitations: Connections can be slow or nonexistent for short or extended periods. Data plans can be limited. Processors can be relatively slow. Batteries can be low or get used up quickly. When battery life is low, people will be trying to achieve a task as quickly as possible.

Fat fingers: I mentioned average size of a fingerpad, but that is an average. Some people will find elements of a touch screen difficult to interact with – like these Sumo wrestlers who were given iPads instead of smartphones to use. And then there’s an issue with long fingernails too.

Time & Attention: People use their phones in short bursts and with only partial attention. They dip in and out, snacking on data all the time. Rachel Hinman, researcher, designer and thought leader in mobile UX, currently at Nokia said that using mobile is like snorkelling, while desktop is like diving

Location and posture: Well there is just no accounting for location. People can and do use their phones any time any place, anywhere. Behind every mobile interaction lies a different story relating to the location of the user. This wide variation in stories just doesn’t occur for desktop.

Candid photos of mobile users

I’m going to quickly show you a selection of candid photos of people using their smartphones.

This girl is using her phone in one hand but not really paying attention to it because she’s riding her bike down a cobbled street in Amsterdam. And she’s not alone because I don’t know if you can see but the girl on the bike behind is also holding her phone.

Here’s another girl looking at her phone with her head not quite fully facing the phone – she’s on horseback!

Here’s another one, probably a bit more of a common situation – phone in one hand – and a child on her other shoulder – she’s got more than a handful to distract her.

This woman runs a kiosk, she’s got a few minutes on a cigarette break to check for any updates or messages. She’s got long nails and holding a lit cigarette.

This policeman in Dallas is using only one thumb to navigate. Maybe the other hand is on his gun… it’s ok – it’s not a real gun!

This woman in an airport lounge is choosing to use her mobile over the laptop she already has open.

This picture is indicative of the lazy postures that many people might adopt while using their mobile.

A woman with two phones – and in the car – do we care about her story? I believe there are still states in the US where this is legal!

Finally – you’ll be glad to know I have no candid photos for this one, but a marketing company in the US called 11Mark did a survey recently which found that 75% of mobile phone users have used their phone in the bathroom, and half of those to surf the internet.

It saddens me to think about the time and resources that went in to creating this iPhone app based around social networking for people who are bored in the bathroom – iPoo.

Capabilities

Smartphones have features like camera for stills or video, GPS and WiFi for location, accelerometer, compass and orientation detection. Some of these are currently only accessible to native apps, but it won’t be long before they are accessible via the browser for use in the mobile web. Sure these features allow innovation and we’ve seen some cool augmented reality apps, but they are not something you would generally be seeking out to use when transitioning from desktop.

Orientation detection is useful because depending on what you’re viewing it can be easier to read or enter text when the device is horizontal rather than vertical.

Websites like SixRevisions respond to device orientation by changing the zoom factor to fit the changing width.

Websites like Hicks Design and The BBC and a rapidly increasing number of others adapt the content, or change the layout. Responsive design is one way to relatively easily modify your existing site to cater for the smaller screens of mobile devices.

But the really important capability here is location detection because that ties in to the behaviour of mobile users. And mobile user behaviour is what I’m going to talk about next.

Mobile user behaviour

People’s use of mobile phones is erratic, to say the least, but one thing that is constant is the way people think about their phone. People carry their phone around with them all day. They check the weather when they get up in the morning, they check the traffic as they leave for work, arrange to meet with people during the day, play a game during a break, find somewhere to eat for lunch, find directions for a tube station, let people know if their late to meet friends at the pub, share reviews after dinner, upload photos from an event, tweet from a conference, and catch up on news before they go to bed. All these things – they’re about me and my location – it’s my timeline – my story.

Microsoft did some research(PDF) on how different information workers used their smartphone and their PC during an extended period. They plotted the usage during a typical daily period. Different users had very different signatures. Here’s an example. You can see the PC is used during office hours and in the evening, but the smartphone is used in small chunks and right throughout the day from waking up to going to bed.

They found – as other studies have – that for some users, the smartphone is emerging as the primary computing device. They wanted it to be as powerful as a laptop and frequently preferred the smartphone to the laptop.

Smartphone use is synonymous with the user’s journey through the day.

Because the mobile platform is so personal, the relationship users have with their device is personal, and the perception of products and services is consequently also at a deeper and more personal level than with desktop.

This means that the user experience has to be designed as a compelling experience;

How do you make a compelling experience? By understanding and designing for the behaviour and needs of the mobile user.

Forrester research defines mobile user experience (PDF) as: User’s perception of the usefulness, usability, and desirability of a mobile application based on the sum of all their direct and indirect interactions with it. [ Forrester Mobile App Design Best Practices ]

So three things:

  • Is it useful: Can users achieve their goals in a mobile context?
  • Is it usable: How easily can they perform tasks in a mobile context?
  • Is it desirable: Does the mobile experience engender positive emotions?

Although the use of mobile devices is erratic, they do largely boil down to a small number of use patterns.

Google classified the mobile user behaviour into three types: Urgent now, Repetitive now, Bored now. For the majority of scenarios, your website or app should align with these behaviours.

So as we can see it’s all about the ‘now’, and the mobile experience needs to not just align with these behaviours but also present a slick and responsive interface.

We know that desktop users don’t like to wait for content to download, and that you have a very short time to display content before a user moves on.

Consider people who are bored because they are waiting: whether it’s at a bus stop, a doctor’s surgery, or waiting for friends at a restaurant or a pub.

They use their phone to fill an idle few minutes – the last thing they want is to wait for that too. It sounds a bit ironic but people like to wait the least, when they’re already waiting for something else!

Aligning your product with these behaviours will naturally help identify the priorities and filter the unnecessary fluff.

These behaviours also help you think about how to structure the layout – for urgency, or for exploring, for snorkelling or for deep diving. They help you think about how to order and prioritise navigation or content. Maybe about getting smart about aiding the repetitive-now behaviour.

However you choose to structure the layout of navigation and content, simplicity is key. Key in the sense that you have to keep it simple. But unfortunately or fortunately depending on how you look at it, keeping your interaction simple is no longer a significant differentiator for your product.

Forrester published a paper recently on best practices for mobile apps. They describe Focus, Clarity and Simplicity as the three key design requirements, but I like to add a fourth that I think does help create that differentiator – Emotion. Design and create with and for emotion. Aarron Walter’s book ‘Designing for emotion’ is an excellent read on the topic.

Simplicity applies especially to mobile navigation. People don’t mind taking more steps to get to a destination if each of those steps has little cognitive load.

In fact there’s a rule  for this: Hick’s Law which asserts that the time it takes for someone to reach a decision is roughly logarithmically proportional to the number of alternative choices they have.

Hick’s law is not just about choices in menus and navigation – it’s about all aspects of design. And it’s not just about mobile – it’s equally applicable to desktop or any other medium. It’s just that with the limited screen real estate and constraints of mobile and the urgency of mobile user behaviour, it’s particularly relevant to mobile user experience.

Example 1: Toptable.co.uk

I’m going to spend the rest of this talk looking at two examples of websites that have desktop and mobile versions. One of examples is pretty simple and the other is quite the opposite.

The first example is the simple one. TopTable.co.uk recently launched a new desktop website and a new mobile website m.toptable.co.uk. An overwhelming number of users are going to come to this site to find and book a restaurant. And an overwhelming majority of those are going to want a restaurant near to their location.

This is home page on desktop. Really rather uninspiring – lots of lists. A list for top cities, one for popular London areas, another for restaurants in major cities in UK and Ireland, one for international restaurants, and one for featured cities.

No search box! You have to choose an item in one of the lists.

Let’s look at the site through a behavioural lens. I’ve highlighted different parts of the home page according to the mobile user behaviours we talked about earlier – urgent now in red, repetitive now in blue and bored now in green. Fluff is in grey.

You can see immediately, the behaviour this site needs to align with is urgent now. There’s very little for bored people and nothing in the way of repetitive behaviour.

Now looking at the mobile site – that translates very nicely. There are four main activities. Three of them relating to finding a restaurant whether it’s near to me, by other location, by name, and a fourth activity of  logging in and looking at my account.

Searching nearby uses the location detection on the phone (with permission), prefills the most popular time and number of people and then gives me a selection of results. Simple! What a stark comparison to the home page for desktop that we saw a moment ago.

The thing is, TopTable missed a trick with desktop. They didn’t complete the feedback loop by applying to desktop what they learnt from the mobile experience. Not in terms of focus, clarity, simplicity or emotion. And interestingly – not in terms of using available capabilities either.

Because the desktop browser can use location detection. This is the mobile website as viewed on Firefox for desktop. It works in exactly the same way by asking permission to use your location.

Google’s geolocation services and companies like SkyHook use IP address and databases of known location of wireless access points to pinpoint your position just as accurately as your mobile can. Modern browsers can make your desktop website location aware. Most are not – yet. Meanwhile we still get asked for our postcode, or to pick a city from a long list or to find your location on a map.

Example 2: REI.com

The second example is the complex one. REI.com a large company selling recreational equipment, great working environment, been around a long time, huge turnover and an inspiring mission statement.

I’m going to scan through some pages on their desktop website real quick so we can get an idea of the scale of depth and breadth of the website on desktop.

Home page, fairly clean. Good primary and secondary navigation – lots of information below the fold

Big mega drop downs – this one is the cycle menu.

A page showing a list of cycle products. You can compare products and there’s a faceted search on the left. In fact these are all the faceted search options from that page. I think 16 facets there.

Here’s a typical product page. There’s ratings, you can see more pictures, see a size chart, add to cart, find it in a store, add to a wish list. You can look at in-depth reviews; read a full description; view the full specification; zoom in and look at the product; see it from different angles; see what other products people bought.

There’s whole sections on Travelling with REI; on learning with REI, videos, expert advice, adventure programs and events. There’s after sales community areas to share stories and photos, competitions, and a blog. There’s a section on membership and of stewardship – volunteering, conservation, and sustainable operations.

Theres a store locator to enter a city or pick a location on a map, and features on new stores. When you select a state on the map you see detail of the locations. And on a store’s own page there’s lots of information on the store, how to find them, opening hours, other nearby stores, events, jobs, and an option to send feedback.

Phew – how do you fit all that on a phone? Like this? Aaaah no. When users see this on a mobile device – it just looks well broken? Hard work? Out of date?

Brian Fling said in his book Mobile design and development: Create a product, don’t re-imagine one for small screens. Great mobile products are created, never ported.

Here’s the desktop and mobile versions of REI’s website. The mobile website is focused, clear and simple. Search, find a store, find a product, or further down a few options to explore. And at the bottom a telephone number that uses the mobile phone tel: URI to link directly to the dialling function on the phone.

The store locator has only a single address box or a location detection facility. No fat fingers tapping on a map.

Mega menus are out and the need for hover is gone. Instead we’ve got clear chunked menus. One more step yes, but easier to manage, and easier decisions.

On the products page, huge faceted menus are gone. No filters. No product comparison. Just browse the products and sort by one of these attributes.

There is this option to optionally refine the search via just two options – by category or one of these fields.

On the product page there’s a rather neat option on the image to swipe left or right to view different images of the product. Or you can tap tap the image to zoom and pan. But all the time still letting you swipe the page up and down.

Further down you can still access some of the features from desktop – description, specification, reviews but all in a simpler format.

By the way – this link to the full site – doesn’t just take you to the home page – it takes you to the same product page on the full site.

So you can explore all this and reveal a lot of the key information that you’d be familiar with on desktop. And that’s important – because, yes mobile users do have different needs and behaviours on mobile, but they are not different users. Desktop or mobile – it’s the same person, so you need to provide an experience on mobile that relates to that on desktop.

Conclusion

When you have a lot of content to provide on mobile, you need to be smart about the way that content is revealed.

A great mobile UX should be like a magician’s progressive reveal – not like making a dog dig randomly for bones.

Trying to work within constraints, innovate with capabilities, align with behaviours, meet user needs, design with simplicity and emotion, cater for cross channel users. Absolutely it’s a balancing act.

REI created their mobile website in 2009. They had one person who wasn’t full time on the project and they didn’t have analytics plugged in until 6 months later. They didn’t profess to be great innovators in mobile, but fast followers. Now they have a wonderfully inspiring team headed up by Samantha Starmer, dedicated to providing a great user experience and customer experience. They’re learning all the time. They have embraced the chaos.

I called this talk Mobile Last – and said it was about considering user experience when it’s too late for Mobile First. If you have desktop content and you’re transitioning to mobile, it’s never too late to think ‘Mobile First’.

At a Forrester event earlier this year (Forrester’s Infrastructure & Operations Forum 2012) Tony Hird, chief technologist at British Airways said simply ‘Embrace mobile – like your life depends on it’. I suggest you do just that.

That almost wraps things up. I’ve mentioned a few books in this talk: Mobile First by Luke Wroblewski; The Mobile Frontier by Rachel Hinman; Designing for Emotion by Aarron Walter; and Mobile Design and Development by Brian Fling.

For the typography nuts, the fonts I used in the slides were: Bebas Neue, PT Sans, and Lobster Two

Finally – thank you for listening – go and embrace mobile.