Mobile Design Principles

//Mobile Design Principles

Mobile Design Principles

Mobile Design


Mobile design has become the new black-dress in consumer research and discovery. Smart Phones have revolutionized the online experience. (Yes there was a time in the dark ages where we used dinosaur-sized mobile phones that didn’t even have a text function).

How do you ensure that your mobile site will delight and drive conversions? Google and Market Lab conducted an extensive study into what makes mobile sites successful.  Volt Lab as always is delighted to share these fascinating insights with you! We have summarised the salient points for your convenience!


  • Homepage & Site Navigation
  • Site Search
  • Commerce & Conversions
  • Form Entry
  • Usability & Form Factor
  • Technical Checklist


A study was conducted in Chicago and San Francisco over 119 hours using Android and IOS phones.  Each task had to culminate in users doing a conversion-like task, from buying a product, booking tickets to making a reservation. We have all been there – and like so many users we’ve abandoned the proverbial ship, ditched the trolley or forgot the purchase. What influenced each of these actions is what the researchers examined. They found that mobile users are goal-orientated. Literally don’t have the space to wade through unnecessary images and info. They know what they want and they’re either going to get it from your site, or go elsewhere! Stop; don’t let your customers get away!  Here’s how to maximise mobile for conversions!


This is how you welcome, keep and convert your customers. Research has shown it comes down to 25 mobile site design principles, which are broken down into five sections. (Case in point, you are likely reading this on your mobile, so we are outlining the next few minutes of your navigation, breaking it into digestible chunks and making it easy to navigate)

  • Homepage & Site Navigation
  • Site Search
  • Commerce & Conversions
  • Form Entry
  • Usability & Form Factor


You only have one chance to make a good first impression. Welcome the user and then it’s time to get down to business. Show them where to go and what to do.

Keep calls-to-action front and centre: Put the most important message in the most visible space and secondary messages through the menus. We know that everything is important but you have to choose or you will confuse the user. You put on one necklace and people notice it, however if you were to wear five sparkling necklaces it would be an eyesore! Less is and always will be more!

KISS: Keep menus, short, sweet & simple so it’s easy for navigation.

E.T. GO HOME: Okay we’ve taken a bit of creative liberty here; the original document says no such thing (Best you read it!) However the principle is the same, make it easy for users to return to the home page!

Don’t let promotions steal the show: Promotions are the bridesmaid; your content is the bride! Users want to know about the main offering. Remember the Royal Wedding? Pippa was the “promotion” who nearly overshadowed the main show!


You’re pressed for time, and need to find it now! The first thing you look for is that icon, the magnifying glass, can’t find it, you may leave the site!

MAKE SITE SEARCH VISIBLE: Studies show that the best place to put your site search is at the top of the page next to an open field.

RELEVANCE: The first page is what matters most as users hardly ever scroll to the next page (note to self: if I’m on the second page I may as well not be there). Small keyboards and big fingers =typosmdfbkdfj☹ = frustrating user experience. Ensure you have auto-fill and automatic spelling corrections.

FILTERS: Again this saves users from wading through a jungle of unwanted info. Ensure that all your filters offer results.

GUIDE USERS: Ask users simple, relevant questions that will help narrow their search. In the case of a clothing store, gender already narrows the options by half!


Step out of the e-commerce world for a moment and step into a physical shop! Are you more or less likely to buy from a salesperson who is badgering you to buy, or someone who is helpful, yet gives you the time and space to make your own decision? Likewise online users want to convert on their own terms. Here’s how you give them this space:

Explore: Let users explore before they are asked to register. Who wants unnecessary “paper work” before you know it’s worthwhile!

Guest Purchase: Again, nobody likes “paper work” even the digital kind, let your guests make a guest purchase. If and when they return they’ll be far happier to sign on.

Existing Info: Use existing info to make conversion super speedy.

Help! It’s right here, simply press this click-to-call button (Doesn’t that make you feel relaxed?)

Easy Conversion: Finished your daily commute, and now you’re at the office. Naturally you’re going to switch from mobile to desktop! Make it easy for your users to switch so that the info isn’t lost and conversion is simple.


You’ve got to work hard to ensure the user’s experience is easy. Conversion does not happen accidently. People purchase your item because you’ve made it easy for them! That simple.

STREAMLINE INFO ENTRY: Number pads make all the difference!

SIMPLE INPUT METHOD: Make sure you choose the most appropriate and simple method for your site

VISUAL CALENDAR:  What day of the week is the 3rd of November 2017? We don’t know either, however with a visual calendar we can quickly see it’s a Friday. That makes booking your flight or hotel so much simpler.

REAL-TIME: If there’s an error in their forms let users know immediately, not after the fact.

DESIGN EFFICIENT FORMS: We all love autofill & the less fields to fill in the better!


Small things go a long way! Your online users appreciate it when you go the extra mile to make their journey more pleasurable. Here’s how you do it:

Optimise your entire site for mobile:  So obvious? Then why are more companies not doing this?

Don’t Pinch to Zoom: This makes users want to pinch the web designer. It’s so easy to miss the Call- to-Action when you’re zooming in and out!

Expand: This does work! Users clearly can’t try on a pair of shoes so the bigger the visual; the more detail, the better.

Screen Orientation: Let users know whether landscape or portrait works better, but ensure that your design works for both types!

Single Browser Window: Do not make users switch browser windows because at this critical stage you could lose them. Keep the call to action in one place.

Don’t label!  You know what “full site” means but your users may not. So when you ask them for their preference you’re actually confusing them. Use everyday language, not tech speak.

User’s Location: When you ask for personal information you need to give a reason, and explain how this information is needed to serve your customer.


A beautifully iced cake that is stale will doubly disappoint! So too, you can have the best-looking mobile site but it needs to work! Here’s a quick techie checklist:

Mobile Ads: Are they configured for your site?

Minimize Downloads: Don’t chomp up your user’s data, and remember fewer downloads the better, (don’t give them hoops to jump through).

Test:  The more mobile devices you test your site with, the better.

Logical: Your page content needs to load in a logical order. If you’re selling shoes, gender first, shoe size second.

Track conversions:  Review both mobile and desktop conversions to gage whether you’re on the right track.

Perform a mobile website speed test with the Test My Site tool and receive recommendations for improving website performance across all devices. Get your free report here:

Full Article

Getting your mobile site right isn’t a luxury it’s a necessity. Overlook this crucial element and conversion rates will suffer. For an in-depth understanding please read the full article over here: Oh and did we mention it’s mobile friendly too ☺.


*Source GOOGLE



Simply fill in the form below, verify your email address and you'll be sent a link to download our free report.

By | 2017-12-03T10:19:07+00:00 August 6th, 2017|Categories: Mobile/Web Development|0 Comments

About the Author:

Leave A Comment