By Giles McGrath | Creative Director
When designing a mobile web design page the old adage of “Less is more” holds true. As opposed to SEO or brand sites, content is not king when it comes to mobile web design. In fact, an abundance of content will decimate your conversion rate and ultimately lead to the site’s failure.
Rule #1: Keep User Experience Simple and Intuitive
Anyone who has ever visited a desktop site from a mobile device knows how frustrating it can be to navigate.
The above graphic illustrates how users typically interact with a desktop site vs their mobile counterpart. While desktop sites require zooming, scrolling, and tapping. An effectively designed mobile site will only require a tap to navigate. This is especially important in lead gen, where making a user dig for the form will result in that user leaving the site and not converting.
Rule #2 Utilize Mobile Features
When designing a mobile site it is important to consider the mobile features available on the user’s phone and how they may be beneficial to the site.
The following mobile phone features should not be ignored regardless of whether the desired experience resides solely online or aimed to drive traffic from online to offline.
• GPS location
• Click to Call
• Near Field Communications
• Optical link recognition (QR codes or similar)
Rule #3: Think with your thumb
When approaching design for mobile it is important to consider the user input device. As opposed to a mouse being able to click on small areas and hover to reveal content; your mobile consumer will be using fingers and thumbs. This insight means the user interface must cater to that input device. Buttons and icons must be large and spaced far enough apart to avoid accidental clicks and not have a hover state. Below are two examples of effective designs for the human hand. The left being a vertical scrolling list with large buttons, the right is a list of icons in a simple and easily accessible grid pattern. Remember, design for a thumb not for the mouse.
Rule #4: Use the Full Width Of the Screen For Navigation
The joints of the human hand limit the dexterity of the thumb. Both the metacarpophalangeal (MCP) and the interphalangeal (IP) joint control the movement of the thumb’s tip to and away from the palm. The carpometacarpal (CMC) joint enables thumb rotation around the hand, however, that joint is also used to secure the device. Engagement of both the metacarpophalangel as well as the interphalangel joints allow for smooth vertical movement of the thumb but limited horizontal mobility. This must be taken into consideration when designing a mobile site. All horizontal scrolling should be eliminated as should the need to pinch and zoom for content, as that places the hand in an awkward position for single-handed site navigation.
Rule #5 Content Curation
As screen size diminishes, so should the amount of content. Mobile experiences should highlight important content while removing navigation that is not needed. When considering the size and amount of content that should be shown on a mobile device, a good rule of thumb is to have the site readable at arms length.
Do these steps get your creative juices flowing? If you want to see all 10 rules now visit our SlideShare account here.