Mobile Design Meets User Experience
With so many articles published in the last few weeks about Google’s April 21 2015 algorithm update, an important point may be overlooked as site owners focus on optimization to accommodate various device sizes…
Following the do’s and don’ts of good user experience design (UX design) for “normal” website viewing, there are some additional UX design guidelines to keep in mind as you optimize your site design, features and content to be truly mobile user friendly.
Understand your visitors’ needs
A primary consideration in UX design is to understand the goals of your user.
Consider the following example for an e-commerce website owner who has created a persona for a typical audience type: “holiday gift shopper”…
- She’s out shopping for an item and wants to compare the cost of the same item in an online shop using her smartphone.
- She’s relaxing at home watching TV and, during commercial breaks, using her tablet to browse the internet looking for offers and deals in the local area.
- She’s sitting in her office during lunch break and using her desktop computer to purchase items online.
The site owner knows a good design (a balance of look & feel and functionality) will win her over in whatever device channel she uses to interact with his website.
Design for touch
A cursor is a very precise pointer and controlled by an input device (e.g. mouse, touchpad). Fingers are not very precise.
Think about the placement of elements (e.g. cancel button too close to submit button) in your page layout.
Here’s an example layout on a typical desktop (1024 x 768):
And then the same layout on an iPhone 6 portrait orientation (375 x 667):
Note the spacing between the two buttons creates wiggle room to help ward off a “fat finger” moment.
To achieve optimal spacing between buttons, it’s simple to add media query CSS rules to ensure spacing is adequate. But it’s important to refrain from using fixed pixel margin spacing (px). Instead use ‘em’ or ‘rem’ to achieve a scalable layout.
If buttons are side by side, it’s best to apply margin-right rules. If buttons are on top of each other, use margin-bottom rules.
Note: margin property is outside the border of an element. Padding property is inside the border.
Reduce input fatigue
If you use forms, reduce the need for typing. Instead use dropdowns, checkboxes and radio buttons.
If typing is required, wherever possible use placeholder text in input fields to help users understand what kind of information is required. You can check the current browser support for placeholder text here:
And don’t forget to place labels above the input fields. This will keep it visible as your visitor interacts with your form.
Here’s an older version of a web form:
And here’s a revised version using responsive design guidelines:
Note the ‘date picker’ element in the image above. It is an HTML5 form design element. You can check the current browser support for this feature here:
Respect user’s bandwidth
Reducing load time is critical for two reasons: 1) bandwidth consumption and 2) network latency (also known as the dreaded spin-cycle).
You can’t do anything about the latter as network providers can have varying performance in coverage areas.
Avoid auto-playing any video or audio content. Give the user an option to play video / audio based on his/her current context.
Optimize Layout & Content
Treat the “above the fold” area of a web page as dynamic, but don’t over think this area of the screen. There are simply too many devices to worry about getting this virtual ‘fold line’ just right.
One note: if you are using Google Adsense on your site, you must not violate any of Google’s policies with respect to mobile users viewing content. Here’s Google’s official FAQ on this topic:
Many users understand they will need to scroll, especially when viewing content on a smartphone. Just give them a good reason to want to scroll by publishing great content. Hook ‘em with headlines and don’t disappoint in the paragraphs that follow.
If you are determined or obliged to include images within your content, make sure you offer the smallest image size possible to achieve the goal (e.g. product image in an online shop). Remember that most smartphone and tablet users will expect to use a tap gesture to view a larger version of the image. Avoid declaring fixed widths for image objects in your html (inline CSS).
Adjust font sizes accordingly. This is easily achieved with CSS media queries.
Get rid of all other content that doesn’t contribute to some kind of conversion goal. Redundant content includes elements such as:
- sliders – the general consensus these days is that sliders do not aid in conversion or click-throughs;
- popup forms (modal windows) – If you’d like to use a popup (modal), check that it works for mobile devices.
- text on images – avoid putting text on images. When images are scaled down to fit smaller viewports, the text can become virtually illegible.
Leverage inbuilt device functions
Don’t forget that you have an option to leverage built-in device functions to augment your content. For example, a telephone number can become a simple ‘Click to Call’ feature.
See more about this here: https://developers.google.com/web/fundamentals/device-access/click-to-call/?hl=en
Mobile-friendly website design optimization activities are more likely to yield positive results (click-throughs, conversions, return visitors) if they’re guided by user experience design principles.
Be the first to hear about new articles about website design, mobile readiness and how to build an online business: subscribe to the SiteSell Newsletter. As an extra bonus, you’ll receive our ecourse “What’s Stopping Your Solopreneurship?”, completely free of charge.