Design des interfaces mobiles

Si aujourd’hui on peut surfer sur son iPhone ou sa Galaxy Tab directement dans un TGV à plus de 300 km/h, c’est grâce à des applications ou sites internet pensés, adaptés à ce (plus tout) nouveau mode de consommation.
En 2007, Apple nous présentait un appareil tactile capable de téléphoner, écouter la musique et naviguer sur le web le tout dans une interface travaillée et accessible à tous. Depuis, de nombreuses sociétés ont suivi en copiant ou en apportant de nouvelles interfaces dans les mobiles, tablettes et sites web.
Essayons de voir comment et pourquoi il est important de bien penser son interface mobile.

Les contraintes du mobile

Contrainte de taille (sens propre et figuré)

Concevoir une interface mobile est bien différent d’une interface classique de site web pour ordinateur. Mauvaise idée reçue, il ne faut pas seulement réduire la taille de son site pour en faire une version mobile.
La version mobile doit être adaptée à son utilisation et doit contenir les fonctions et contenu essentiels du service proposé. Leur disposition doit être rigoureuse pour tirer partie de la taille des écrans mobiles et les éléments de type boutons doivent être adaptés à la taille du doigt humain par exemple.

Contrainte de saisie

Sur un ordinateur, la saisie est appliquée par deux périphériques majeurs : le clavier et la souris. Sur les mobiles récents, elle s’opère avec le clavier, virtuel ou non, et par le plus souvent le doigt.
L’expérience tactile est différente de celle de la souris. Sur un ordinateur, on peut déplacer la souris, cliquer gauche/droite, double-cliquer et faire défiler. Tous ces comportements sont interprétés de manière similaire sur les différents systèmes (PC, Mac, Linux…).
Sur un mobile, l’interfacage tactile est réalisé par le système d’exploitation aussi. Seul hic, chaque système propose des comportements différents (tap, double-tap, multi-tap, pincement, déplacement, multi-doigts…). Cette multiplicité de comportements nous oblige à concevoir des interfaces fonctionnant pour tous les systèmes ou à développer des interfaces pour un système en particulier. Cette deuxième idée est bien tentante si l’on souhaite apporter une expérience utilisateur unique dans une interface.

Contraintes techniques

Chaque appareil mobile a développé son système d’exploitation avec ces propres fonctionnalités et comportements. Il est impératif que les interfaces et les comportements choisis pour un projet soient testés sur le plus grand nombre d’appareils avant la mise en ligne.
On peut citer la contrainte de densité de l’écran si l’on souhaite apporter des graphismes haute définition sur iPhone 4 par exemple (densité 2) ou sur certains appareils Android (densités 1, 1.5 ou 2).

Contrainte de poids des données (donc de prix)

Sur les mobiles, on a souvent un forfait de données limité ou bridé à partir d’un volume utilisé. Pour une expérience utilisateur meilleure, l’interface mobile doit être le plus rapidement chargée. Pour cela, il faut absolument penser à optimiser les fichiers qui seront téléchargés par le client. On peut par exemple utiliser des versions « minified » des scripts JS ou des nos feuilles CSS. Il faut aussi penser à optimiser la taille des images. Charger une image en 2000px de large sur un mobile n’a pas de réelle utilité.

Les bonnes pratiques

Aller à l’essentiel

Si vous devez concevoir un produit qui comprend une version mobile, intéressez-vous d’abord à celle-ci car elle permettra de vous concentrer sur les fonctionnalités majeures (accès, présentation, process…). Ensuite, vous pourrez ajouter les fonctionnalités annexes qui ne seront pas présentes/utiles sur mobile dans votre site.

Comportements et modèles

Les utilisateurs sont habitués au fonctionnement de leurs appareils, au positionnement de leurs menus, aux boutons d’actions, etc. Respecter les modèles proposés par les systèmes vous évite de perdre les utilisateurs dans des interfaces non-ergonomiques ou farfelues. Les modèles que vous utiliserez doivent être adaptés aux appareils mobiles que vous visez.
Si l’utilisateur retrouve les comportements dans votre interface, il sera d’autant plus content de l’utiliser.

Encourager la découverte

Plus un utilisateur « est ami » avec votre interface, plus il utilisera votre produit et recherchera certainement des fonctionnalités précises. Encourager la découverte, c’est proposer à l’utilisateur des fonctionnalités précises avec un mode d’accès simple.
Prenons l’exemple de l’application VeloDispo que j’ai développée. Comment rafraichir les données? Il suffit de secouer l’appareil. Pas évident selon les utilisateurs qui ne découvrent pas cette fonction expliquée dans un écran de niveau 2. Pareil, apposer une icône grise pour les réglages sur une interface grise est un peu déroutant. Si votre interface est multi-services, demandez à l’utilisateur quel service il souhaite utiliser plutôt que de lui en proposer un (choix de villes par exemple).

Retour utilisateur

Un utilisateur qui attend est presque perdu. Un chargement trop long, une application qui plante, une erreur, tels sont les points où l’utilisateur, s’il n’en est pas informé, peut immédiatement et irrévocablement (je suis dûr) quitter votre produit.
Pour éviter cela, il faut absolument indiquer à l’utilisateur les actions en cours et lui expliquer les raisons de cette attente. Popups, indicateurs de chargement et autres subterfuges sont conseillés. Certains ont même pensé à vous faire patienter de manière lucrative en vous proposant des petits jeux pendant le chargement (Pong, Snake…). L’idée séduit toujours.

Contexte

Le feedback utilisateur est d’autant plus important selon le contexte. Il faut penser que votre produit sera utilisé en « situation de mobilité », dans des lieux pas forcément couverts par une connexion internet haut débit ou avec un éclairage fort (en été sur la plage par exemple). Le contexte vous impose aussi de valider le mode de fonctionnement de votre application avec pourquoi pas l’utilisation des données en mode hors-ligne.

Conclusion

Ce parcours rapide du design des interfaces mobiles comporte de multiples paramètres qui influent les comportements et l’utilisation de votre produit par les clients finaux. L’importance de passer du temps pour la conception d’une interface mobile est capitale si vous ne souhaitez pas rater votre cible. Un juste milieu est à trouver entre une application super-ergonomique et sans utlité ou une application pratique, complète pas sans efforts sur l’interface.
La mobilité fait désormais partie de notre vie matin, midi et soir et concevoir des produits impressionnants et captivants est un exercice difficile que peu de designers maitrisent. Certains tentent d’imposer de nouveaux comportements, avec succès (tirer une liste l’actualiser, interface panneaux) ou non. Alors pensez bien, pensez mobile.

VeloDispo France
VeloDispo France 
v4.1 - 12.5 Mo - Gratuit 
Benoit Deldicque

Basé sur l’article de Smashing Magazine.

Auteur: Benoit DELDICQUE

Actuellement en poste sur Strasbourg, je suis en charge de la conception et la réalisation d'applications iOS pour iPhone, iPad et iPod touch.

Articles similaires

Commentaires fermés.