User Experience for Mobile (for Cambridge Mobile App Group)

Editor's Notes

• #2: 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’ I’m probably going to say the word website and phone a lot but during this talk, but I mean it in the broader sense of content for mobile devices.It doesn’t have to be a phone and it doesn’t have to be in browser. The same principles often apply whether we’re talking about the notion of websites, web-apps, or native apps.
• #3: First things first – Mobile First
• #4: 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’?
• #5: I’ll start with what ‘Mobile First isn’t‘Mobile First’ is not about physically creating your website on mobile before anything else. ‘Mobile First’ is a methodology – a mindset. It’s about designing with the constraints and capabilities that mobile provides. Designing with constraints forces you to focus and prioritise as well as boosting creativity. Designing with new capabilities attracts innovation.
• #6: ‘Mobile First’ as stated by Luke Wroblewski in his book of the same name is - an approach to design
• #7: that forces you to focus
• #8: and enables you to innovate
• #9: ...in ways you previously couldn't.‘Mobile First’ says that whether or not you have a website for desktop already, whatever you do, you should be first thinking about how you would be designing it on mobile. Even if you have no current plans to create a mobile website, you should still think about ‘Mobile First’.
• #10: The big companies are all realizing this – Google, Facebook, Adobe, LinkedIn, The BBC and lots more – they’re all finding that what they design and learn for mobile...
• #11: ... feeds back into the desktop
• #12: 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. If you have a specific need for separate mobile and desktop websites, that’s fine too.
• #13: But a website that is optimized for mobile devices is no longer optional.
• #14: 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. Many of us don’t have that luxury. So... what if? You have what you would call a desktop version of a website and never considered mobile...
• #15: ...until now!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 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.
• #16: International Data Corporation (IDC) predicted that by 2016 more than 1 billion smartphones a year will be being shipped. 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!
• #17: The same company now predictsworldwide sales of smartphones alone is alreadygoing to reach 1 billion this coming year.There’s no such thing as a desktop web and a mobile web. The web just is mobile.And yet, sadly, another survey recently found 48% of companies have no idea what percentage of visitors to their website are on a mobile device.
• #18: So how do you make that move from desktop to mobile and ensure that you create or maintain a competitive edge?
• #19: By ensuring that you consider the user experience. Well - that is easy to say and very hard to do. For many reasons, it’s harder than for desktop.
• #20: 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
• #21: Let’s look at some of the constraints
• #22: Do we realise how spoilt we are on desktop?We 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 pixel accurate mouse to boot. Transition that desktop experience to a smartphone.
• #23: Screen size. Well – duh – it’s smaller – a lot smaller.That is except when it’s not. There are laptops and tablets with 10 inch screens. And phablets with nearly an 8 inch screen.But in general, for truly portable rather than luggable mobile devices, the screen is smaller.
• #24: That doesn’t mean you have to make stuff smaller.It means you have to prioritise what you keep.
• #25: And because there’s no mouse, then usually you have to make stuff bigger so that you can touch it easily without accidentally touching the thing next to it. The consensus is to that touch points,including margins, should be at least 8 to 10mm for finger tips and 10-14mm for finger pads and thumbs.And that meansthat most websites designed for desktop are almost impossible to navigate when squeezed onto a mobile device without significantly zooming in. That Adobe website was a year old. They’ve improved it a bit... they made that products page responsive...
• #26: Which basically means that it’s all now one massive great big long page with some header bar compression.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 responsive behaviour isn’t enough on it’s own, unless you actually design the detail with touch in mind.
• #27: On Google Chrome beta browser for Android 4, if you touch across two active areas, a popup appears so that you can choose which one you really wanted. That’s pretty neat, but really should be avoided in the first place.
• #28: It can be hard to come round to the idea of making things bigger rather than smaller, but there is one design approach that helps.Dispense with the idea that you must only click on blue links and within raised buttons as you might for desktop. Make the whole container interactive.Erase the chrome and enable the content, because the content is the interface.
• #29: Performance and limitations: Connections can be slow or nonexistent. 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 especially trying to achieve a task as quickly as possible.
• #30: Fat fingers: I mentioned the 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 there can be an issue with long fingernails too. I’m guessing. I wouldn’t know.
• #31: 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.
• #32: 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.
• #33: 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.
• #34: She’s riding her bike - down a cobbled street in Amsterdam
• #35: And she’s not alone.I don’t know if you can see, but the girl on the bike behind is also using her phone.
• #36: Here’s another girl not quite looking at her phone.
• #37: She’s on horseback
• #38: Here’s another one, probably a bit more of a common situation.She’s trying to concentrate.
• #39: She’s got more than a handful to distract her
• #40: This woman runs a kiosk, she’s got a few minutes on a break to check in on her phone. She’s got long nails and holding a lit cigarette.
• #41: This policeman in Dallas is using only one thumb to navigate. Maybe the other hand is on his gun...
• #42: It’s ok – it’s not a real gun!
• #43: This woman in an airport lounge is choosing to use her mobile over the laptop she already has open
• #44: This is indicative of the lazy postures that many people might adopt while using their mobile
• #45: Two phones – and in the car – do we even care about her story? I believe there’s still states in the US where this is legal while driving!
• #46: Finally – you’ll be glad to know I haven’t got any candid photos for this one. A marketing company called 11Mark in the US , did a survey recently which found that 75% of mobile phone users have used their phone in the bathroom.
• #47: 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.Nice!
• #48: So that’s some of the constraints you have to work withNow lets have a quick look at the capabilities mobile provides
• #49: Smartphones have features like a 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’re 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.
• #50: 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.
• #51: 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.
• #52: But the really important capability here is location detection because that ties in to the behaviour of mobile users.
• #53: 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.
• #54: Microsoft did some research on how different information workers used their smartphone and their PC over an extended period. They plotted the usage during a typical daily period. Different users had very different signatures. Here’s one example. You can see the PC is used during office hours and in the evening, but the smartphone is used in smaller chunks and right throug the day from waking up to going to bed. They found – as other studies have – that the smartphone is emerging as the primary computing device. Users want it to be as powerful as a laptop and frequently prefer the smartphone to the laptop.
• #55: So 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 personalThe relation with products and services is consequently also at a deeper and more personal level than with desktop.
• #56: This means that the user experience has to be designed as a compelling experience.But we don’t have to be Path or Rovio to be able to make that happen.How do you make a compelling experience?By understanding and designing for the behaviour and needs of the mobile user.
• #57: Forrester Research defines mobile user experience 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 ]
• #58: So three things: Is it useful:Is it usable:Is it desirable:
• #59: 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, and Bored now. For the majority of scenarios, your website or app should align with these behaviours.Now means now – not in a few seconds time.
• #60: We know that desktop user’s don’t like to wait for content to download. Websiteshave a very short time to display content before a user decides to move on.Consider mobile users who are bored because they are waiting.At a bus stop. A doctor’s surgery. 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.
• #61: It sounds a bit ironic but people like to wait the least, when they’re already waiting for something else!
• #62: Aligning your product with these behaviours will naturally help identify the priorities and filter the 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.
• #63: 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, just keeping the interaction simple is no longer a significant differentiator these days.Forrester published a paper recently on best practices for mobile apps. They identify 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 –
• #64: Emotion. Design and create, with and for, emotion. Aaron 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.
• #65: In fact there’s a rule for this: Hick’s Law asserts that :-the time it takes for someone to reach a decision is roughly logarithmically proportional to the number of alternative choices they have.
• #66: Hick’s law is not just about choices in menus and navigation - it’s about all aspects of design
• #67: And it’s not just about mobile - it’s equally applicable to desktop or any other medium
• #68: But with the constraints of mobile and the urgency of mobile user behaviour, it’s particularly relevant to mobile user experience.
• #69: I’m going to spend the rest of this talk looking at two examples of websites that have desktop and mobile versions. One of the examples is pretty simple and the other is nothing but...
• #70: 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.
• #71: This is the 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.
• #72: 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
• #73: Now looking at the mobile site, it aligns with the behaviours very nicely. There’s four main activities. Three of them relating to finding a restaurant.Near to me, any other location, find by name, and a fourth activity relating to my account.
• #74: Searching nearby uses the location detection on the phone (with permission), pre-fills the most popular time and number of people and then gives me a selection of results. Simple.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...
• #75: 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 the IP address and databases of known location of wireless access points to pinpoint your position almost as accurately as your mobile can. Modern browsers can make your desktop website location aware. Most are not – yet.
• #76: The second example is the complex one
• #77: REI.com a large US company selling recreational equipment, with a great working environment, been around a long time, a huge turnover and an inspiring mission statement
• #78: So I’m going to scan through some pages on their desktop website real quick so we can just get an idea of the scale of the website.This is the home page, fairly clean. Good primary and secondary navigation
• #79: Here’s the whole home page – plenty of extra information below the fold
• #80: Big mega drop downs – this one is the cycle menu
• #81: A page showing a list of cycle products. You can sort and compare products and there’s a faceted search on the left.
• #82: In fact these are all the faceted search options from that page. I think 16 different facets there
• #83: Here’s a typical product page. There’s ratings, you can see more product pictures, see a size chart, add to cart, find it in a store, add to a wish list...
• #84: You can look at in-depth reviews
• #85: Read a full description
• #86: View the full specification
• #87: Zoom in and look at the product
• #88: See it from different angles
• #89: See what other products people bought
• #90: There’s whole sections on... Travelling with REI..
• #91: On learning with REI, videos, expert advice, adventure programs and events
• #92: There’s after sales community areas to share stories and photos, competitions, and a blog
• #93: There’s a section on membership
• #94: And on stewardship – volunteering, conservation, and sustainable operations
• #95: Theres a store locator to enter a city or pick a location on a map, and there’s features on new stores
• #96: When you select a state on the map you see detail of the locations
• #97: And on a store’s 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
• #98: Phew – how do you fit all that on a phone?
• #99: Like this?
• #100: Aaaahno. When users see this on a mobile device – it just looks... Well... Kind of broken? Looks like hard work? A bit dated already?
• #101: 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
• #102: Here’s the desktop and mobile versions of REI’s website
• #103: 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
• #104: The store locator has only a single entry box or a location detection facility. No fat fingers tapping on a map
• #105: Mega menus are out and the need for hover is gone. Instead we’ve got clear chunked menus. One more step yes, but much easier to manage. And easier decisions.
• #106: 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
• #107: There is this option to optionally refine the search by category or one of these fields
• #108: On the product page there’s a rather neat option on the product image to swipe left or right to view different images. Or you can tap tap the image to zoom and pan. But all the time still letting you swipe the page up and down.
• #109: Further down you can still access some of the features from desktop – description, specification, reviews but all in a much 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 than on desktop, 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.And when you have a lot of content to provide on mobile like REI, you need to be smart about the way that content is revealed.
• #110: A great mobile UX should be like a magician’s progressive reveal
• #111: not like making a dog dig randomly for bones
• #112: Imagine trying to work within these constraints, innovate with the capabilities, align with user behaviours, meet user needs, design with simplicity and emotion, and 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 after launch. They didn’t profess to be great innovators in mobile, but they are fast followers. Now they have a wonderfully inspiring team headed up by Samantha Starmer, dedicated to great user experience and customer experience. They’re still learning all the time. They have embraced the chaos
• #113: I called this talk Mobile Last.I said it was about considering user experience when it’s too late for Mobile First. Here’s a little secret - it’s never too late to think ‘Mobile First’.At a Forrester event earlier this year Tony Hird, chief technologist at British Airways said simply... ‘Embrace mobile – like your life depends on it’. I suggest you do just that
• #114: That almost wraps things up. I’ve mentioned a few books in this talk which I’ve listed here. Other publications are marked on the relevant slides, and the slides will be available after the conference.
• #115: For the typography nuts in the audience, here’s the fonts I used in the slides
• #116: And finally – thank you for listening – go - and embrace mobile.