Mobile-first: 10 quick tips about ergonomy and usability

In the past few years the web mobile audience has grown up to 4 times higher than the desktop one, leading designers’ vision from a mobile-friendly to a mobile-first approach.

image designed by Freepik

While in a forward looking digital industry context the discussion is shifting to voice-first design, most of the real world work is still focused on adopting an effective mobile-first logic that responds to all the challenges related to designing for small display real estates. And in some real world applications, it doesn’t even sounds plain that mobile-first design should not just be a matter of stylesheets, breakpoints and some web mobile look and feel!

While Google is promoting Progressive Web Apps, most designers and developers are still struggling with mobile-first solutions that should provide the user with quick and immediate access and comprehension of contents in mobility environments, designing accordingly with both technical and ergonomic characteristics of mobile devices. It should definitely take advantage of the specific features of mobile.

I have collected here 10 quick and pretty basic tips to keep in mind when aiming for a successful mobile-first approach.

1. The quickest the better!

Minimize download time by using techniques such as lazy loading for images and, more in general, for long scrolling pages while progressively load content.

This demo from pwittchen on GitHub can be a good example for Infinite scroll applied to long scrolling lists

2. Anticipate user in navigation

Provide a navigation system designed accordingly to user mental models and to those activity flows derived from qualitative research.

3. No broken file and media for download and view

Make sure that those files available for the download as well as every kind of embedded media can be displayed properly by any web mobile user-agent.

Keeping users informed that something has gone wrong is good but this kind of errors can definitely compromise user experience

4. Adaptive solutions for datatables

Display data tables in a way that makes them easy to scan on small screen real estate, focusing on some adaptive solution rather than on a responsive one.

Airtable is a startup that raised $3M to design solutions for complex data visualization on mobile devices

5. Rich-media and live streaming formats mobile-compliant

Make sure that rich-media or, if applicable, live streaming videos are compliant with mobile devices.

6. Web applications “extended to” smartphone native features

Take your web application to a more active level making it interact with smartphone native features such as camera, GPS, sensors, contacts, for example, allowing users to add events to their mobile device calendar, if applicable.

7. Forms flow in a fully mobile-friendly experience

Adopt some Typeform-like solution for complex data collection modules and questionnaires to make user experience simple and engaging in order to ease conversions and later data collection operations.

TypeForm just set the perfect definition for its mission:”Turn data collection into an experience”

8. Minimun user effort for data input

Minimize the number of input-fields in forms replacing them with controls that can be filled in with the smallest effort such as radio-buttons, sliders, checkbox, spinner and any other component that can be filled in with just a few taps and also provide smart defaults.

Apple provide developers with some tips about using UI controls designed for touch gestures

9. UI elements accessible as for dimensions and position

Design finger-friendly hit targets that should measure at least 44pt x 44pt and put them where they can be reached with no efforts when holding a smartphone with one hand or, in case they trigger critic actions, just place them where they can’t be accidentally hit.

Finger-friendly hit targets should measure at least 44pt x 44 px as stated in Apple’s tips for developers.

10. Accessibility to the next level

Provide a VoiceOver and TalkBack solution, respectively for iOS and Android devices, to enhance the accessibility through the use of appropriate tags for tables, forms and contents.

An episode about Assistive Tech by Rob Dodson on Google Chrome Developers Youtube Channel

Worth reading?

Do not forget to click the ? icon below to help others find it, and leave a comment. Thanks for reading!

Author: Tania Conte

Collect by: