10 UX Tips For Your Mobile Checklist
August 2, 2011
As more and more retailers are exploring and deploying mobile shopping sites, I wanted to shed light on emerging patterns in mobile user experience.
Here are 10 tips to help you define a better experience through layouts, buttons and features that are well-suited for m-commerce.
Display it at the top of your mobile home page and make sure it’s prominent. Mobile shoppers are more inclined to search directly for what they are looking for.
2. Mobile Home Page.
Keep it short and clean. A fixed width navigation at the top helps welcoming your customers into your mobile site. The main content zone should contain 2 to 3 value props that are well suited for a mobile context, such as links to specials, best sellers and the store locator.
3. Mobile Product Detail Page.
Aligning the content and the buttons to the left in a single-column layout works well on smaller screens, allowing for faster scanning of the eyes.
4. Vertical Navigation.
Stack important links such as My Account, My Cart or Help at the bottom of each page.
5. Limited Profile Features.
How many web features does a mobile shopper expect to have access to? Do your customers want to go to their profile and update their payment methods directly from their phone on a regular basis? Not sure. What matters to them is their ability to complete a transaction easily, so make sure their saved information is accessible to them or offer easy payment options, such as PayPal.
6. Mobile Flow.
A mini-cart is a great feature for your web channel. It’s the little box that displays the number of items and the subtotal in top right corner of your header. In some cases, it expands when you add a product to the cart. Because mobile browsers are less sophisticated than web-based ones, you may consider redirecting your shoppers to the cart page every time they add a product to their basket, with a “Continue Shopping” button, as a way to tell them that they succeeded.
Keep them to a minimum and make them bigger to facilitate the experience on touch screens. It also helps customers understand what is expected from them on a particular page. On the product detail page, the bigger the “add to cart” button, the better.
8. Links to non-mobile pages.
Avoid them as much as possible. If you have a separate blog without a mobile equivalent, linking to it from your mobile shopping site will result in disappointment and frustration for your customers.
They are rarely used on mobile sites but they are a great tool for a shopper who wants to quickly backtrack on a path. If your catalog hierarchy has more than 3 levels, then a breadcrumb at the bottom of the product pages would allow your shoppers to quickly jump back to a parent category in just a click or a tap.
10. Link to Full Site.
Device detection isn’t perfect. How many times have you landed on a mobile site with your iPad when you expected to get to the full site? Also, if your mobile product pages contain less information than the web ones, make sure to offer an extra link to visit the full details on the main website.
With the global growth of web-enabled mobile devices, I hope you’ll find these tips helpful in designing mobile optimized experiences for your customers.