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.

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.

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.

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.

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.

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.

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.

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.

Worth reading?

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