The thing I enjoy the most about being an online business owner is this: Nobody can take away what I have built with SBI! - John Shank, SBI! member since 2003

Mobile Design Meets User Experience

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…

Mobile-ready is fundamentally about giving all users a terrific user experience regardless of their device.

 

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):

Typical desktop view

And then the same layout on an iPhone 6 portrait orientation (375 x 667):

iPhone 6 portrait view

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.

Both ‘em’ and ‘rem’ are units of measurement for various CSS properties. You may be more familiar with pixel (px) – an absolute measurement (e.g. 16px). However, sometimes it’s handy to use a measurement that is relative to a font size you’re already using on your website.

‘em’ is relative to the current font-size (as determined by the ‘nearest’ element in the CSS stack).

‘rem’ is relative to the font-size of the root (html element).

 

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.

Content margin and padding

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:

http://caniuse.com/#feat=css-placeholder

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:

Older version of web form

And here’s a revised version using responsive design guidelines:

Revised form

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:

http://caniuse.com/#search=date%20picker

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).

Loading

You can’t do anything about the latter as network providers can have varying performance in coverage areas.

But, you can definitely keep the ‘load light’ by reducing image sizes (and in some cases removing images from the mobile version of the webpage), and by compressing CSS and javascript files.

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:

https://support.google.com/adsense/answer/3394713#3

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

Bottom Line

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.

Carole Macpherson
Carole Macpherson is the Content Lead for SiteSell. She is an IT professional and proficient webmaster who is well known for sharing her technical knowledge in the SBI! forums.
Carole Macpherson

Latest posts by Carole Macpherson (see all)

Join The Solo Build It! Community

Get the latest in best-practices and advice for your online business. Let each new article be delivered to your Inbox for free.