Design techniques for improving mobile user experience

We are a mobile society. In the last ten years we have been part of a mobile evolution, one that has seen a fundamental change in the way we access the web.

In a 2016 survey, 63% of respondents indicated that they accessed the internet at least as often via smartphone as computer. Just 4 years ago the same survey showed this to be only 27%, so it is safe to say the tide has turned and using a mobile device to access the web is now the new norm.[1]

The humble smartphone is ingrained into our daily lives and the go to device for accessing the web. As a designer for the web, it is critical that every stage of planning, designing and testing, revolve around the mobile user experience.

Responsive Grids

They’re everywhere. Responsive grids have been adopted and made very popular by major CSS frameworks such as Bootstrap and Foundation: they are the backbone of responsive web design (RWD). Responsive grids do a fine job of letting us shuffle and reorder content to suit the narrow width of mobile screens, but the resulting single column we end up with, is where the limitations of this technique become apparent.

Design_techniques_for_improving_mobile_user_experience_image_1

Your content may now tick the RWD box and technically fit the width of the user's display, but by default the page offers a poor user experience, often being very long and needing endless scrolling to reach the end of the content.

We can improve on the user experience if we;

  • Design our content to be mobile first
  • Truncate content, showing just enough for the user to gauge interest
  • Use an accordion feature and let the user expand to view more
  • Ensure our content is relevant and well described by a meta description

Choosing the balance of how much and what content to display should be a primary consideration from the very beginning, during planning, rather than a place we arrive at reluctantly when user testing fails to impress.

Responsive Typography

No mobile first website is complete without a well executed approach to typography. By default many CSS frameworks offer Responsive Typography out-of-the-box. This technique uses a simple set of media queries to resize typography at a few predefined breakpoints. For the most part this technique does a decent job of allowing designers to optimise the size of the text to suit common mobile displays.

Another approach to this is Fluid Typography, where unlike the former, typography can be resized smoothly to match the screen width and height.

Working with Zurb’s Foundation CSS framework?
Here is a Codepen example for adding basic Fluid Typography to Foundation 6 https://codepen.io/rmck/pen/RGwkJa

Responsive Images (srcset)

Big, full screen images are a popular design trend but until recently there hasn’t been a universal way without JavaScript to serve up an image optimised for the user’s device. Enter srcset, a set of attributes that allows browsers to decide and use the image that best suits the size and resolution of the user’s display.

There are a number of different ways responsive images can be enabled, so be sure to lookup the method that best suits your project. The most basic being a simple set of image URLs with size attributes, like:

<img src="small-image.jpg" srcset="medium-image.jpg 1000w, large-image.jpg 2000w" alt="example">

The conventional src attribute provides a fallback for browsers that lack support, so srcset can be used right now. srcset has had iOS support from late 2015, and now with Android support and modern CMS systems capable of automating the generation of multiple assets of the same image, srcset should become quite popular for optimising the mobile user experience.

Feature Detection

Design_techniques_for_improving_mobile_user_experience_image_2

Feature detection is gaining in popularity and for good reason: it can be leveraged to great effect to improve the user experience for mobile users, especially when they’re out and about.

This technique involves testing for indicators that the user’s browser supports certain features and when support is found, content variations are presented to the user.

One of the most common uses cases for feature detection is Geolocation. Using Geolocation we can access a device’s location and using this information, display content that is more relevant to the user. Large retailers often use location data to display localised pricing; and service based organisations use the same data to display services that are close to the user.

In both examples, the content being presented to the user is more relevant. By doing a little discovery during planning, we can find opportunities to tap into supported features that improve the user experience.

Navigation

Mobile navigation presents many challenges. For almost all responsive web designs, it is the number one feature that will make or break the mobile user experience. Menus must be accessible, discoverable and at the same time take up minimal space on the user’s screen.

Thanks again to the popularisation of CSS frameworks, the “Hamburger” button has taken its place as the dominant approach for offering a means to access navigation on mobile. The prevalence of the Hamburger button makes it impossible to miss, being adopted by many global giants including Wikipedia, CNN and locally by ABC and news.com.au.

Design_techniques_for_improving_mobile_user_experience_image_3

The primary use of the Hamburger button is to hide a menu just off screen, but to remain easily accessible via a single click. Using this technique we can offer the user full screen navigation on demand, vastly improving options to enhance the user experience of the menu itself.

While there is nothing wrong with the widely adopted Hamburger, there are enhancements we can make to this button to make it more accessible to everyone.

We can improve on the user experience if we;

  • When space allows add the word MENU beside the Hamburger
  • Provide hidden text, or use the aria-label attribute to label the Hamburger so it can be identified and read aloud by Text to Speech software

Here is an example of what your HTML might look like:

<i class="fa fa-bars" aria-hidden="true"><span class="show-for-sr">Menu</span></i>

A/B testing suggests that a button with the word MENU, received 20% more unique clicks than the Hamburger button.[2]

Conclusion

Maximising the user experience on mobile is challenging. The limitations presented by the size of the screen and the expectation that it should be possible to include all the features a desktop screen affords, can lead to a disappointing user experience.

Choosing the right combination of design and technology must be the primary consideration during the planning stage of every project. Prioritising features by the tasks that your users are most likely to perform, will ensure your website suffers from a minimal amount of usability problems.

Need help optimising your website for mobile users? Talk to us

Internetrix combines digital consulting with winning website design, smart website development and strong digital analytics and digital marketing skills to drive revenue or cut costs for our clients. We deliver web-based consulting, development and performance projects to customers across the Asia Pacific ranging from small business sole traders to ASX listed businesses and all levels of Australian government.

Credits
[1] source: Google Consumer Barometer
[2] source: Sites for Profit

Add Your Comment

No one has commented on this page yet.

Subscribe to our mailing list to receive exclusive offers, free resources and more!