How I went from a size 27” to a size 4.7.”
It’s 2016 and mobile devices are everywhere. Shaving off those inches isn’t always as easy as taking a desktop site and shrinking it to fit. With 50.3% of all eCommerce traffic and 10% of all eCommerce revenue happening on a mobile device, it’s important to provide an experience that’s tailored for the platform. Here are three common mistakes I try to avoid when designing for mobile:
1. THROWING IN THE KITCHEN SINK
Data plans suck. They’re expensive, often limited, and aren’t always reliably fast. The last thing I want to do is get in the way of my users accessing the content and functionality they want the most.
Structuring the layout to prioritize actionable items and critical information is more important than just shrinking my desktop experience. If I’m running an e-commerce website, it’s more likely that a mobile user visiting my homepage will want quick access to new products and contact information than my mission statement and news. In addition, I’ve got to remember that screen real estate is precious on these devices, as is bandwidth.
Optimizing images for mobile can be the difference between a user engaging with my content or leaving because they didn’t want to wait another second for the page to load.
2. DESIGNING FOR MICE
One of the cardinal sins of the desktop-first design mindset is forgetting that mobile device users don’t have the precision of a mouse cursor. What I often find on mobile sites are navigations with links too close together to reliably tap, user interface controls like ‘close’ buttons that are too small, and text sizes so tiny that it makes selection a frustrating experience. Apple’s user interface guidelines suggest that any tap target should be no smaller than 44 pixels to be considered user-friendly.
Despite not having the precision of a mouse, our touch devices offer other, more expressive forms of interaction that are rarely exploited to their full potential. Taps, swipes, pinches - these gestures enable an inviting level of interaction for users, and at this point, they’ve come to expect them. Don’t make another image gallery that I can’t swipe through.
A good example is Natori, which offers both click through arrows on desktop and a touch swipe image gallery on mobile for their products.
3. IGNORING DEVICE CAPABILITIES
Outside of the wonders of multi-touch, our mobile devices can do so much more than our old desktops (although they are adopting more and more of their contemporaries’ features).
GPS-enabled devices should use location API’s rather than requesting that a user manually type in their location. Proper form input types should ensure that the correct mobile keyboard for the task is present (@ sign for email inputs, keypad for number-only input, etc.) Soon enough, you’ll be able to tailor the color scheme or text size based on the user’s current lighting conditions, due to ambient light sensors coming to the next level of the CSS spec reference.
Our devices are getting smarter and smarter about the world around them; there is no reason our web experience shouldn’t, too.
As we set out into the future, the mobile experience will likely be even more important than the desktop experience. Structuring content to prioritize call-to-actions, designing for touch, and taking advantage of the unique features found in mobile hardware will set you on the right path.
But knowing what to do is half the battle. Knowing how to do it well requires years of experience and research in the field. The talent at Groove strives to make mobile devices first-class citizens on the web.
To learn more about what we do and how we can help, connect with us!