Mobile Interactions: a Guide to Optimization
Published: January 8, 2014
Author: Molly Shotwell
Mobile, mobile, mobile. You may already be sick of hearing about it, but the mobile movement has only just begun. By the end of 2013, nearly a quarter of web traffic was coming from mobile devices, and market research firm IDC has projected that, by 2015, over half of users accessing the internet will do so via a mobile device. The evidence is apparent in device demand as well. Sony is planning to ship 65 million smartphones in fiscal 2014, a 55% increase from 2013. The takeaway is clear: your brand’s mobile presence needs to satisfy the ever-growing horde of mobile users.
While in the past watered-down mobile sites with limited options may have done the trick, users now expect a full website experience on mobile. With more powerful phones and ever-increasing broadband speeds, mobile users are more likely to be browsing a mobile site as they would a desktop one than ever before. Though on average there are certainly still some differences or ‘hot spots’ in user intent on mobile (local searches, product reviews while in-store, etc.), assuming that users don’t need or want a full suite of site options or content on mobile is a dangerously inaccurate strategy. As a result, a robust mobile-friendly solution has become a necessity.
Unfortunately, offering a robust mobile solution can be a tall order considering the completely different UI on mobile. Though I’d strongly recommend enlisting the services of an experienced mobile UI specialist, there are some basic UI differences that any website operator should be aware of.
Whether you’re creating a new responsive website, designing a mobile-optimized version of your desktop site (there’s a big difference between responsive and mobile-optimized), trying to make your current mobile site more mobile-friendly, or simply looking to learn more about mobile web interface best practices before taking action, below are a number of considerations that will help ensure your site’s visitors enjoy interacting with your site and want to come back.
It’s All About Touch
Besides a smaller screen size, the most obvious difference between a mobile and desktop web experience is the mechanism by which a person interacts with the system. Mice, touchpads, and physical keyboards are replaced by wandering thumbs and index fingers, touchscreens and on-screen or device-specific keyboards. Visitors are tapping and swiping instead of clicking, which brings with it a different design paradigm. Anyone who has used a smartphone has had the bothersome experience of clicking on the wrong link or having to touch multiple times to get where they want to go. Obviously the solution to this kind of situation is to make buttons bigger and finger-friendly, but the more practical design question is how big do they need to be.
Smartphone companies offer differing opinions in regards to best practices when it comes to button sizing for touch. While Windows says no smaller than 26 pixels and Nokia says no smaller than 28×28 pixels, Apple is the most opinionated and suggests no smaller than 44×44 pixels. That said, even Apple violates its own suggestion; the keyboard on the iPhone has keys that are 44 pixels tall but only 30 pixels wide. The unfortunate reality is that 44×44 isn’t always practical or even possible. Global Moxie’s Josh Clark offers a rule that we’ve found works: “as long as a tap target is at least 44 points high or wide, you can squeeze the other dimension as small as 30 points if you really must. That means: the practical minimum size for any tap target is 44 x 30.”
Apple breaking its own rules with 44 x 30 pixel keys:
Another common issue that those moving from desktop to mobile encounter is that there is no such thing as a hover state on mobile. If this key consideration is ignored, the result can be obscured important information as well as confused, misled, or annoyed users. While both iOS and Android devices take the hover event into account and translate it into a tap event, which can retain the functionality in a number of cases, it is neither a perfect solution nor an advisable alternative. Even if the mobile device and browser combination interprets it nicely (which is not something that I’d bank on), adding another tap between the user and his intended destination is a bad idea. Simply put: two taps does not equal a hover and click. To get around this potential issue, you can either organize your information in a smart and user-friendly manner so as to not require a hover state, or you can utilize media queries in order to control how non-hover events work on mobile devices.
Forms – A Mobile Nightmare
Forms are one of the biggest trouble spots for the mobile web, which is incredibly unfortunate for website operators as they are often linked to conversions and in turn your bottom line. Entering text is already a daunting obstacle for many mobile users, and a great number of sites unintentionally make it an even more difficult experience. Below are a few best practices to ensure that your users don’t flee from your mobile site forms in a huff.
1. Only The Necessities – While this principle certainly applies to desktop forms as well, it’s even more of a conversion killer on mobile where both patience and time are often limited. In short: make your forms as succinct as possible. Do you need to know a user’s work and cell phone number? Is a user’s information no good to you if they don’t provide their title? If you have their zip code, why ask for city and state too? The quicker they can complete the form and move on with their busy life, the more likely they are to hit ‘submit’.
I wouldn’t bother to fill out this behemoth of a form on my phone:
2. Placeholder Text – Have you ever clicked on a form field while on your phone and had it zoom in, only to discover that you can no longer tell what you’re supposed to enter into the field? Talk about obnoxious. To guard against this, use placeholder text within the form field so that the user is always made aware of what they’re supposed to enter, even if all they can see on their screen is the one field.
Example of what can happen with no placeholder text as well as Stripe’s mobile donation form that gets it right:
3. Give Users The Best Keyboard – Developers will frequently make the mistake of setting the input type of every form field to “text”. While this may be a moot point on a desktop as the keyboard is a physical, unchanging device, mobile keyboards are actually variable. If the form field is asking for email, the input type should be set to “email”. If it’s asking for a web address, the input type should be set to “url”. For credit card numbers or zip codes, make it easy on your visitors by using “number”. Finally, for phone numbers you’ll likely want to use “tel” to bring up the telephone keypad.
Screen’s of Mailchimp’s email form, a “tel” input, and updater.com’s number form for zip code:
Hooray, New Issues! Or Thanks iOS 7
Just when you thought your mobile site was good to go, Apple has to release a new operating system. While it would be nice to let your mobile site be, with iOS 7 now powering 56.5% of global mobile pageviews, it’s definitely a good idea to make sure your site’s functionality doesn’t conflict with any of the new features. Below are a couple prominent user interaction additions to watch out for.
1. Edge Swipes – For Safari on iOS 7, users can now navigate to the previous page by swiping from left to right across the screen. Similarly, users can navigate ‘forward’ by swiping from right to left across the screen. As a result, mobile sites that make use of slide-out navigation that is triggered “on edge pull” or have image carousels that extend to the edges of the screen should take notice. Unfortunately, visitors who trigger unwanted actions will likely blame your site instead of Apple. In regards to the issue of slide-out navigation, we suggest using “on touch” instead of “on edge pull” to avoid potential issues.
Swiping on Yahoo’s home screen carousel can be confused for the ‘back’ gesture on iOS 7:
2. Bottom Edge Swipes – While not likely to be as troublesome as the new Safari edge swipe feature, it’s worth noting that swiping up from the bottom of the iPhone’s screen now brings up the phone’s control center. As the Safari bottom control bar now hides itself as you scroll down, if your site makes use of a vertical carousel or anything that relies on users swiping up from the bottom of the screen, you may want to adjust your site’s design slightly to accommodate this new OS command.
Testing Your Mobile Interface
Though if you’re considering a redesign we strongly recommend working with a mobile UI specialist, we are big proponents of testing a site out ourselves as much as possible. While you likely can’t cover all the different combinations of operating systems and browsers without some kind of testing tool, we find that good old fashioned over-the-shoulder testing with friends, family, or whoever else you can grab for a couple of minutes will help catch a ton of the most offensive issues. It can be fun too! Give someone a persona and target objective (and maybe a beer) and let them loose.
If you want to be a little more scientific about your testing than that, one of the best ways to evaluate a mobile interface’s ‘touchability’ is with the help of the Plunk app by ZURB. It allows you to test touch targets on mobile devices through a pairing of click and yes/no tests, and it has a splendid interface for displaying clear, useful results.
I hope you were able to glean some knowledge from the tips above – happy mobilizing!