Designing a Great Mobile User Experience

Navigating the Multi-Dimensional Landscape

The goal of today’s blog post is to offer up some insights and advice for navigating the current mobile landscape with its myriad of screen sizes and pixel densities.

Before Appnovation I worked for the Vancouver Canucks hockey team, and was part of their effort to be the first NHL team to have an iOS and Blackberry app. This was back in 2009-2010, when Blackberry was in 2nd place as an app provider (behind Apple of course), and Android was just starting to gain traction. My, how things have changed... I read recently that in late 2012 Android had a worldwide smartphone market share of 75%. It just goes to show that the mobile landscape is a moving target. But never fear! There are methods and techniques to future-proof yourself... at least for a little bit.

One thing to note is that while many of the concepts that I’m going to address in this article relate to native apps - such as iOS apps that you would buy and download from the Apple Store, or Android apps from Google Play - my discussion is going to focus on strategies for designing websites for mobile screens. Why is that? Well because if you are designing an iOS app for the iPhone 5, for example, you already know exactly what your screen resolution is. And as far as UX goes, Apple already publishes a very comprehensive iOS Human Interface Guidelines document, available for free on the web.

In other words, talking about designing for native apps would be too easy! Just kidding, of course, it’s never easy. But designing websites for mobile, where the site needs to appear properly across a whole range of different mobile devices and their mobile browsers, has its own unique and non-trivial challenges.

So Many Screens!

How many different screen sizes do you think are out there right now for mobile devices? 4… 5… 6... 100?

It used to be a lot easier. Back in 2009 we had the iPhone 3GS… so no problem, we just needed a desktop version of our website, probably built to the 960 grid, and one more version for iPhone’s 480-by-320 display. If you really wanted to get adventurous you could have a Blackberry optimized version as well.

So fast-forward a few years:
 

DeviceSize & Resolution

iPhone 4960×640 at 128ppcm (i.e. “retina display”)

iPhone 51136×640 at 128ppcm

iPad mini1024x768 at 64ppcm

iPad 21024x768 at 52ppcm

iPad Retina2048x1536 at 104ppcm

Samsung Galaxy320x480, 480x800, 600x1024, 720x1280, or 800x1280 at different ppcm’s

Motorola Droid 3 & 4960x540 at 110ppcm

Motorola Droid Razr HD280x720 at 123ppcm

Then there is LG, HTC, Blackberry, and Nokia mobile devices… Needless to say the list of manufacturers is long, and growing. And I haven’t even touched on laptop and smart TV screen sizes! Phew. So what’s the answer?

Give up!

Ok thanks for reading my blog post… Hope to see you next time.

Just kidding. But let’s face it. This is kind of hard. And unless you are Google, IBM or Apple, your company probably doesn’t have the budget to test on every single device out there, and every time a new one is released.

So what’s really the answer? Well, don’t kill me, but there isn’t one. There is no magic recipe that is going to solve all your problems. The landscape is just too complex right now, and with the "Internet of Things" in our future, I don’t see it becoming any less complex.

What you can do though is adopt a set of strategies, both from a user experience perspective and a technical point of view. I’m going to focus on some of the UX and usability considerations today, and leave the technical strategies for another post.

Building a User Experience

I attended a talk by Jonathan Kohl the other week, where he was discussing user experience issues with native apps, and he mentioned the phrase “deletable offenses”. As in, don’t commit “deletable offenses”. There are thousands, if not millions, of apps out there for any major device, and it takes only a few seconds to install most of them, and even less to delete them. And if you delete an app, what are the chances that you are going to go to the effort of installing it again in the future, even if it gets improved?

Well if there are millions of apps out there, there are bazillions of websites. And it’s even easier to navigate to a site and leave it just as fast. So for our purposes, I will say don’t give your users a reason to leave your site. Don’t commit “leavable offenses”. Because if they leave frustrated or dissatisfied, chances are they won’t come back. Ever. That’s just the truth. There are just too many alternative ways for users to get what they want in this global connectedness.

“But Adrian,” you might say. “Why should I spend all that effort on a good mobile user experience when everyone still uses desktops and laptops to browse the internet?” Well here are some recent statistics:

• Every 2 seconds there is a sale on eBay through a mobile phone.
• Smartphone and tablet sales have outpaced desktop sales.
• 28% of internet usage comes from mobile phones.
• 38% of UK tablet owners spend more of their time on their device than watching TV.

The Do’s

Remember that mobile users have EXPECTATIONS. It’s your job to try and meet them:

• Easy to navigate with touch gestures.
• Social. Content they like can be easily shared. That means seamless integration with Facebook, Twitter, etc.
• Entertaining or informative. They are coming to your site for a purpose.
• Polished and professional.
• Emotional. People project their emotions onto their digital devices.
• Forgiving.
• People HATE being made to feel stupid. But… when a mobile experience fails, users often blame themselves.

The Don’ts

So I’m going to steal from Jonathan Kohl again here. Jonathan is known as a thought leader in mobile testing, and in his research he has identified a number of top, high-level complaints when it comes to mobile UX. Here are 5:

1. Unreliable.
2. Hard to use.
3. Slow.
4. Doesn't respect conventions. For example, Apple conventions are different than Android and Windows.
5. Doesn't work on the move.

This last one refers to an app or website not working in the most logical places where you would use them. So an airline website that performs slow in an airport, or a geo-location service that needs Wi-Fi in order to function.

Usability

This next section discusses 4 ways that you can help ensure that your mobile site has high usability.

1. Don’t Assume Anything!

Be careful when applying user research based on your website’s desktop version to that site’s mobile version. People use sites in different ways when they are browsing on their desktop at work versus on the bus travelling to work. For example, on the way to work I may just want to be able to read a news site’s top stories on my iPhone, but when at work, where there’s high-speed internet, I may want to see all the pictures and videos associated with the stories as well.

Also do your own research into your organization’s marketing and sales claims. Don’t just take their word for it. Sorry. They just can’t be trusted. :-)

Finally, always remember this mantra: “I am not the user, and the user is not me.” There’s no place for hubris in user-centered design.

2. Be Lean

It may seem obvious, but always remember that mobile devices are nowhere near as powerful as your desktop computer, unless of course your desktop was made in 1992. In which case you may have bigger problems.

Adobe Flash has always been known as a bit of a resource hog, but it isn’t a huge issue on desktop browsers where you typically have lots of RAM and CPU power. So when Steve Jobs turned the Flash community on its head by announcing that iOS wouldn’t support it, everyone’s reaction was that Steve was making a brazen marketing decision. But the truth is, most people will tell you that Flash doesn’t run very well even on the mobile devices that support it. Now, mobile devices are becoming more powerful every day, but we still need to be respectful of their limitations.

So don’t be a pig! Don’t be resource demanding. Go for clean, simple, minimalist design for your mobile designs. Maybe go for the strategy coined by Luke Wroblewski called “mobile first”. I’ll let you Google it.

3. Be Nice to Touch

So another obvious statement: Smartphones and tablets use gestures instead of a mouse. It’s a whole new language. And thankfully it’s one of the easiest languages you’ll ever need to learn. Just try putting an iPad into the hands of a 6 year old and watch how fast they pick it up.

But as great as it is to be able to navigate using pinches and swipes, it does present some constraints to your user interface. For example, there are no hover states on touch devices. So that means no fancy tooltips on mouseover, no expansive drop-down menus when you hover over the nav, and no rollover button states. Now, there is some forgiveness - most mobile operating systems will trigger a hover over effect on a button when you tap it, but only provided that the button doesn’t also have a link attached to it. So if you have a nav bar where all the parent categories act only as rollovers, you’re okay. Attach a link to these as well and you’ll get a brief flash of the rollover state before the browser follows the link.

4. Be Nice to Look At

Antony Ribot makes a good point in his presentation, “Mobile UX: The Intricacies of Designing For Mobile Devices,” when he says, “Mobile is not about making things smaller.” Designing for the mobile web is about distilling the site down to the most critical functions and content, and then laying them out strategically in the available screen space.

But don’t worry designers, you can still make it pretty. Just understand the constraints of designing for a smaller screen where graphic size (in bytes) is also a consideration.

Playtest!

The final point of my article is on playtesting. I like the term “playtesting” because for some reason people tend to associate the word “testing” with boredom, tedium and repetition. Ok admittedly that is usually when I say it in front of developers...

But testing can actually be one of the most fun and informative parts of a project. To turn testing into playtesting though you have to incorporate user research and solicit user feedback. You need to get validation from real users.

A great way to conduct user research is to immerse yourself in the environments in which your application will be used. So go hang out where your target audience hangs out. If possible, do the things they do, go where they go. If you are building a mobile site for a Crossfit gym, for example, go sign-up at a gym for a week and participate. Talk to people. See what kinds of things they would like to get out of the gym’s mobile website. And maybe even lose a few pounds while you’re at it!

See… who says web development has to be a desk job!