« Summer tips » le billet mobile only

Non, nous ne reviendrons pas ici sur l’incroyable domination du mobile dans les usages consommateurs. Vous délivrer quelques pistes de réflexion ergonomique en 320 px est le but de ce billet, concentrez-vous, ça sent les best practices 😉

L’expérience tactile

Interagir avec une interface mobile, c’est utiliser ses doigts pour naviguer, tenir son device à une ou 2 mains et tenter de trouver une information dans une résolution contrainte.. Pour optimiser l’expérience mobile il est important de réfléchir à ces contraintes pour apporter à nos interfaces une ergonomie adaptée à la navigation dite « au doigt ».

Comme le rapporte Amélie Boucher dans l’excellent ouvrage « expérience utilisateur mobile », la loi des fits est incontournable pour concevoir des interfaces tactiles utilisables. Cette loi nous enseigne que le temps que l’on met pour atteindre une cible est proportionnel à la distance à laquelle elle se trouve, ainsi qu’à sa taille.

L’atteignabilité et les zones de conforts deviennent ainsi un enjeu important sur mobile. Selon que l’utilisateur se sert de sa main droite ou gauche, la façon dont il tient son device ou encore la résolution de ce dernier, il atteindra plus ou moins facilement les zones de l’écran.

La répartition de ces usages à été chiffrée par Steven Hoober et ses collègues en 2013. Il en ressort que les usages à pouces représentent 75% des pratiques. On peut donc conclure que les zones de conforts sont situées dans la partie basse de l’écran, l’interaction avec les informations contenues dans la partie haute sera d’autant plus difficile si le device est grand (tablettes).

Prevoir des call to action larges permet de considérer les usages indifféremment des mains droite ou gauche comme ci-dessous sur l’interface Airbnb.

La variété de devices, d’usages et de comportements est si vaste qu’il est difficile d’établir des dogmes en ergonomie mobile. Néanmoins, utiliser certaines conventions (emplacement du menu, éléments d’interaction adaptés à la taille des doigts, utilisation des affordances..) permettra d’assurer une expérience mobile réussie dans la plupart des cas.

Cut-off-design

Littéralement « design coupé », le cut-of-design permet de suggérer le scroll grâce une image, un texte(…) coupé au niveau de la ligne de flottaison. Windows phone a bâti son interface sur ce précepte.

L’utilisation du cut off design est une excellente manière d’inviter l’utilisateur à découvrir des contenus pour l’inciter à naviguer. Le design mobile doit se jouer des résolutions (petites) en délivrant des indices suggérant les actions possibles.

Optimiser la navigation

Optimiser la navigation mobile c’est réduire le nombre d’étapes nécessaires à l’utilisateur pour atteindre son objectif. Proposer des raccourcis est un moyen aisé d’optimiser l’efficience utilisateur. Visibles à l’écran ou activables par un geste, les boutons d’actions rapides s’avéreront utiles sur mobile. Le choix des boutons est primordial, ils doivent correspondre aux actions liées à votre service. Si ils sont à intégrer avec parcimonie, la récurrence de leur utilisation permettra d’établir leur pertinence (élément à tester en phase de prototypes).

Faciliter la saisie de données fait partie des enjeux d’une navigation optimisée. La complétion de formulaire peut être un effort insoutenable sur mobile!

• Fournir des valeurs par défaut dans les données à saisir
• Assurer une aide à la saisie : prédictive grâce à la saisie semi-automatique, suggérée (sur la base de ma localisation, des mes données de profil ou de la récurrence de mes choix..)
• Adapter les modes de saisie au type de champs à renseigner (afficher un clavier numérique pour une date de naissance par exemple)

Dans cet exemple, Voyages SNCF propose de se concentrer sur la saisie de son point de départ (light box), le picto situé dans le champs permet de choisir une gare proche de ses données de localisation.

Pour aller plus loin…

Engagement utilisateur, expérience émotionnelle, efficience(…) l’ergonomie mobile recoupe des sujets nombreux et passionnants! Nous ne saurions trop vous inviter à découvrir les ouvrages de Josh Clark (Design Tactile/Eyrolles) et Amélie Boucher (Expérience Utilisateur Mobile / Eyrolles). De quoi alimenter un été studieux entre deux marées..