Au cours des 3 dernières années l'utilisation de l’Internet depuis les ordinateur de bureaux est passée de 90% à 60%, tandis que l'utilisation depuis les mobiles a augmenté de 40%. Cette tendance nous montre que les appareils mobiles vont bientôt prendre la tête en matière de connexion sur internet.
L'approche par défaut utilisée par les designers lors de la conception d’un site web pour un appareil mobile est de réduire les modules présents sur la page du site version ordinateur de bureaux pour les rendre réactifs. Aujourd'hui, cette stratégie n’est plus suffisante et devient même mauvaise. Plutôt que de réduire globalement la taille des éléments, il est plus intéressant d’examiner les besoins du client, de comprendre l’objectif de chaque projet et d’évaluer le comportement de l’internaute sur les plateformes mobiles.
Pour avoir une meilleure expérience utilisateur, intuitive et conviviale nous allons passer en revue quelques pratiques à garder à l'esprit lors d’une conception pour mobile.
Un contenu clair et ciblé
Beaucoup de personnes utilisent leur appareil mobile dans la rue, lors d’une pause café, au restaurant, dans le métro... dans l’urgence de chercher une information importante, pour avoir un accès le plus rapidement possible. La petite taille d’écran des appareils mobiles ne facilite pas les tâches courantes de navigation et de recherche.
La conception d’une expérience utilisateur mobile doit être basée sur des règles minimalistes pour encombrer les pages, le moins possible . Chaque page, y compris la page d'accueil doit avoir un seul point central. Cela augmentera la durée du séjour de l’utilisateur sur votre site web et simplifiera son utilisation.
Un système de guidage doit orienter les utilisateurs en leur montrant comment effectuer chaque action à travers de messages visuels ou rédactionnels clairs. Ce système rend leur expérience plus agréable et leur facilite la recherche et l’accès à l’information.
Les utilisateurs mobiles remarquent et apprécient, les gestes et astuces qui rendent leur expérience plus lisse. Au final, ce qui impacte positivement les utilisateurs, impacte aussi le projet en lui même.
Un menu de navigation ergonomique
Un des éléments les plus important est le menu de navigation principal, sur un écran d’ordinateur, il est constitué le plus souvent d’une barre en haut de la page avec des sous rubriques qui s’affichent lors du passage de la souris sur l’élément parent. L’ emplacement en lui même est précieux, sur un mobile, nous n’avons pas beaucoup de place, de plus il est quasi impossible de reproduire la même construction du menu tout en gardant la lisibilité et l’interactivité.
Sur un écran mobile, un bon moyen de gagner de la place tout en donnant accès à un système de navigation fiable sera de signaler sa présence avec une icône en haut de l’écran, à droite ou à gauche. Le menu apparaîtra lors d’un clic sur l'icône généralement représentant 3 petits traits.
Garder une présentation fluide
Penser pour le mobile c’est concevoir des pages qui fonctionnent sur toutes les petites résolutions et non pas uniquement sur les résolutions les plus fréquentes ou les mobiles les plus connus.
Dès le départ, il faut penser à la simplification, ne pas attribuer de tailles fixes aux éléments, garder une grande souplesse et fluidité sur les pages, vérifier l’affichage sur les différentes résolutions d’écran sans avoir la contrainte de travailler pour chaque taille spécifique d’appareil.
Concevoir pour le tactile
Le principale mode d’interaction sur un écran mobile reste le toucher ou le “tactile”, la navigation par le toucher nécessite un soin bien particulier des éléments ainsi qu’un niveau de précision plus élevé que sur les écrans des ordinateurs qui possèdent “une souris”, un dispositif de pointage ultra précis.
En remplaçant la souris par le doigt, il faut compenser ce manque de précision par l'augmentation de la taille des différents éléments avec lesquels l’utilisateur doit interagir. Vous devez vous assurer que les formes, les boutons et autres éléments qui nécessitent un geste tactile soient assez grands pour éviter un chevauchement avec des éléments ou une mauvaise interprétation des événements tactiles adjacents.
Simplifier les formulaires
Un formulaire implique directement la saisie d’information, or, sur un mobile le clavier virtuel avec ses toutes petites touches ne simplifie pas la tâche pour l’utilisateur, une fois de plus.
Dans le cas où vous ne pouvez pas éviter les formulaires sur les vues mobiles, il faut en proposer des alternatifs moins longs et qui contiennent uniquement les champs les plus important, ceux dont vous avez réellement besoin.
Proposer à vos utilisateur des formulaires adaptés à l’utilisation mobile, avec des champs plus larges, une saisie automatique ou un auto remplissage des champs, un calendrier visuel, un indicateur d’avancement sur les formulaires multi-pages, des noms de champs au dessus et non pas à coté des champs...
Les formulaires bien pensés augmentent considérablement la satisfaction de l’utilisateur dans l’accomplissement d’une action, surtout qu’en général, un formulaire représente la dernière étape d’une stratégie, mission ou “Call To Action”.
Priorité à la vitesse
Le poids et la vitesse sont les deux mesures de performance les plus importants pour un site mobile. En effet, sur un mobile, l’utilisateur apprécie énormément les sites qui se chargent rapidement.
Éviter l’utilisation des nombreux effets basés sur les images comme les dégradés pour l’arrière plan ou un grand carrousel d’images ou encore les ombres portées sur les images.
Intégrer le CSS dans votre conception pour avoir le rendu attendu ainsi qu’un design fonctionnel même si le CSS3 n’est pas supporté par tous les navigateurs des anciens mobiles, ce qui est normal. Le site ne doit pas ou ne pourra être “100% pixel parfait” sur tous les appareils mais au moins le site passera les épreuves nécessaires pour les contraintes mobiles et sera rapide et léger.
Miser sur le texte
Remplacer le manque d’images par des titres clairs et de grande taille, ainsi que de courts paragraphes de description spécialement rédigés pour l’utilisateur avec si nécessaire, un appel au clic à travers un grand bouton qui mentionne l’action.
Les articles doivent avoir une ergonomie de lecture spécifique. Des titres clairs avec une typographie de grande taille, les paragraphes également héritent de la même logique avec une typo de grande taille (14 ou 16 pixels).
Animer vos titres et vos descriptions avec des icônes telles que celles proposées par la célèbre librairie “Font Awesome” qui offre une riche collection de formes graphiques spécialement conçues pour le web, facilement opérationnelle et entièrement contrôlable par CSS.
Profiter des caractéristiques spécifiques
Les appareils mobiles possèdent de nombreuses caractéristiques comme le GPS, gyromètre, un "slide pour déverrouiller", la capacité de passer un appel... Certaines fonctionnalités sont profitables et peuvent être utilisées directement depuis le site web. Elles participent à améliorer l’expérience de l’utilisateur.
Vous pouvez par exemple ajouter la possibilité de passer un appel simplement en cliquant sur le numéro de téléphone de la page contact ou activer le partage sur les réseaux sociaux ou encore utiliser le GPS pour géolocaliser une information ou un service spécifique...
