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…
