Tweetables:
Designing mobile first focuses the design on what information is most important.
Think about all of the features unique to the mobile experience.
All pages should load in less than 4 seconds, no excuses.
Allow for 30 pixels of space for your buttons or around text links to keep your design thumb-friendly.
Don’t limit the content users can access on your mobile site. Instead, make the core mobile journeys more prominent.
Don’t use obscure or misleading icons in your navigation.
Use cookie-based recently viewed in combination with shortlisting or comparison lists to encourage decision making.
Pay close attention to the size and number of form fields within checkout to encourage checkout completion.
When building your forms, make sure to utilise specific keyboards to make it easier for users to fill them out.
Use the right combination of helpful mobile navigation features like: show / hide, infinite scroll, back to top, view mode (sm, lg, grid, list)
Process:
Start from the ground up
Design mobile first! Then enhance gracefully to desktop. This approach ensures that your mobile experience takes advantage of all things unique to mobile (like location-based services, image recognition, barcode scanning, etc). Doing this well will engage and surprise your customers.
As you move on to designing for tablet, this approach will ensure that your gestures and touch points are still intact. Tablet and desktop can then remain the same, or you can go an extra step and create desktop specific functionality like mega menus, hovers and tooltips. If not fully considered, designing from the desktop down to mobile can create complications in functionality, a crowded UX and a lack of attention to mobile specific enhancements that could have made your user experience better.
Technology:
Responsive or separate mobile theme?
“Responsive” is certainly a buzzword right now. Listen businesses! This is not a trend. This is a business decision not to be taken lightly. Responsive web development is expensive and takes a lot of planning. In addition to budget and time there are things to consider — like speed. Mobile users can be easily distracted, using their device on the go. It’s very important for pages to load in 4 seconds and under.
Amazon gains 1% in revenue for every 100 millisecond saved off the load time on mobile (source: eConsultancy). If you have a lot of media content, like images, a mobile theme is the best way to go. If you do decide to invest in a responsive solution, the right technical partner is key to building a fast, scalable solution.
According to Aberdeen Group:
A one second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions. (In dollar terms, this means that if your site typically earns £10,000 a day, this year you could lose £250K in sales).
Information Architecture:
Don’t limit your customers on your mobile website, give them focus
Use tasks as the impetus for your design. Consider your main user journeys and make them the most prominent, but don’t limit your users to ONLY these journeys. If you are a multichannel retailer with physical stores, information like store location, find and reserve, click and collect may be the most important for mobile users hunting for specific information. If you are an airline, flight check in and status may be the most important, above booking. However, it is important not to frustrate those users who are trying to complete other tasks by stripping out functionality.
If you do build a very focused UX for mobile, make sure that access to your full desktop theme is available through a link in the navigation.
Interaction:
It’s all about the thumbs
A general rule for thumb friendly design is over 30 pixels. Make sure your buttons are at least this high/wide and if you’re using text links, allow for this amount of white space around your links. Make your links obvious by consistently using underlined or bold text or a specific colour. Remember, there are no hovers on mobile devices. Users can only count on a good, clear design.
Also, think about what it will be like for a user to complete all core user journeys using only one hand! Too hard? Think about changing your button placement, taking out as many taps as possible. Further reading: How do users really hold mobile devices?
Browsing & Buying:
Clear Navigation
Make sure your users are able to reach every part of your mobile site through your homepage, a clear navigation menu or a combination of both. The right balance depends on how complex your site map is. There are two trends at the moment deliver clear navigation. The first is to use a home link as an option on your menu to browse categories like Poundland (below, left and centre) and M&S (below, right).
The second is to take the Facebook approach, pushing the page aside to reveal a longer, scrollable menu.
Icons are a great way to convey a big concept in a small space. However, make sure that you are using symbols that are widely accepted and that they carry out the action that users expect.
Signposting
Breadcrumbs and signposting are essential when designing for mobile. Experiment with different placements depending on your content. There are several different ways to do breadcrumbs. M&S (below, left) and Poundland (below, centre) use a list above the footer and John Lewis (below, right) have breadcrumbs in the form of a “back” button below the header.
Above all, make sure your users know where they are within your site and have options to return to where they were. Don’t rely on the assumption that all mobile browsers have a back button functionality.
Browsing, Comparison
Search may be your most valuable mobile asset for users with intent to buy. Implement predictive text, or if you do use a drop down suggestive search pay attention to screen height and only show the top suggestions.
Adding an area for recently viewed products encourages users to compare and purchase. If you choose not to implement a recently viewed functionality, make it simple for users to save products to a comparison list or wish list.
Checkout
Essentially, checking out is a series of forms and validation. Here, it is essential that your field titles are descriptive, your field inputs are large enough for the user to see everything they are inputting, and your validation messaging is encouraging. If possible, implement inline validation and utilise the mobile OS to bring up specific keyboards that make typing certain characters easier.
Other navigation features that aid the mobile user experience:
Infinite scroll: Only use this if your categories are small enough where there will be a limited amount of products in a list so that scrolling to the footer doesn’t become difficult.
Choice of view mode (large, small, grid, list): Implementing this choice allows users to view larger product images within a list, possibly taking the click to product view out of the buying journey if a user can add to basket right from the listing page.
Back to top: If you have to have a very long page, add a Back to top option to eliminate frantic scrolling.
Show / hide options: Make your pages shorter by not showing all of the information at once. This is useful for filters, delivery & returns information, product descriptions and reviews.
If you choose to have a sticky header (like ASOS) make sure users can get back to the top of their browser.
Think about what it will be like for a user to complete all core user journeys using only one hand!
In closing…
Users have higher expectations of your mobile site than they do of your desktop site. Don’t disappoint your mobile users with complex navigation, missing content or a site that is difficult for large thumbs to navigate. Investing time in creating a great mobile user experience right now will put you ahead of your competition and enhance customer loyalty.
I’m interested to keep this conversation going and get your thoughts and tips, feel free to add your comments!
About the Author
Rachel Tonner is Brand Manager at Ampersand Commerce. With a background in digital design, branding and online presence, she is well-versed in cross-platform user experience & design. She also knows Magento: What comes native and what does not. She is responsible for ensuring customer brand guidelines, designs and UX requirements are followed through project delivery.