Quelques règles d’or pour optimiser l’ergonomie de ses applications mobiles
7 février 2011 2 Commentaires
L’usage des téléphones mobiles est encore récent. Les repères et la navigation diffèrent d’un site web classique.
La taille de ces terminaux est bien souvent une contrainte et un casse tête pour les acteurs qui travaillent sur ces nouveaux terminaux.
Selon une étude de Localytics : la première impression que se fait l’utilisateur d’une application est souvent définitive. 26 % des applications mobiles téléchargées en 2010 n’ont été utilisées qu’une seule fois.
C’est pourquoi il est important de ne pas négliger quelques basiques pour avoir une application réussie :
1- Tu privilégieras la lisibilité et la visibilité des informations
L’espace d’informations sur un mobile est restreint. Ainsi, il est important de supprimer toutes informations et images non indispensables pour ne pas charger les pages.
La syntaxe est à travailler pour qu’elle soit la plus claire possible. Les mots pourront être remplacés par des pictogrammes.
La taille des éléments cliquables ne doit surtout pas être trop petite (et oui, l’utilisateur doit pouvoir cliquer facilement … ) et les éléments être bien visibles ! Les utilisateurs, surtout ceux utilisant des écrans tactiles, apprécieront d’avoir des éléments bien espacés.
Pour la créa, quelques basiques sont à respecter pour que les informations soient bien lisibles et adaptées à la lecture sur écran mobile :
- Choisir une police sans empattement
- Ne pas utiliser plus de 5 couleurs
- Privilégier une page avec un fond clair avec une typo foncée pour un contraste optimal
- Utiliser un arrière plan uni
Petite astuce, vérifier sur un SMARTPHONE, la créa d’une application mobile pour être sûr qu’elle soit bien adaptée. On a souvent bien des surprises.
2- Tu créeras une application simple et utilisable
Cela peut paraître logique et pourtant… il est important de ne pas oublier qu’une application doit être fonctionnelle, accessible, intuitive pour TOUS les utilisateurs (du débutant au confirmé ;-) ).
L’interface doit être agréable et intuitive. Les informations et les fonctionnalités les plus importantes devront être accessibles dès le 1er et 2nd écrans.
Pour les applications Iphone, il est important de respecter les règles d’ergonomie d’Apple (utiliser les interfaces fournies par Apple).
Aussi, dans l’application devra apparaître que les éléments qui s’adressent aux mobinautes.
Le but : simplifier le parcours des utilisateurs et faciliter la prise en main de l’application !
3- Tu choieras la navigation pour ne pas égarer l’utilisateur
Comme sur le web, il est important d’aider l’internaute dans sa navigation à travers des repères : menu, fil d’ariane…
Néanmoins, cela est plus difficile à représenter sur les appli. Les boutons de navigation comme « précédent » et « suivant » pourront être intégrés.
Le positionnement de ces boutons est très important. Dans la logique, et oui ;-), le bouton « précédent » se positionnera à « gauche », et le bouton « suivant » à droite.
Pour ne pas égarer les mobinautes, l’application ne devra pas proposer plus de 3 directions de navigations différentes sur une même page.
Une application doit être logique pour l’utilisateur. Ce dernier, ne doit pas chercher à ce rappeler quel chemin il a fait pour avoir telle information.
Les onglets permanents commencent à se standardiser. Pour ne pas gâcher la visibilité, en utiliser que 4/5 maximums.
La navigation doit être naturelle pour l’utilisateur !
4- Tu concevras une application que l’utilisateur pourra s’approprier
Le mobile est un outil personnel.
Ainsi, une application pourra utiliser des accélérateurs d’interaction tels que garder l’historique des interactions, proposer des éléments favoris, ou des services d’auto-complétion (suggestions de texte)… Le but étant de faire gagner du temps à l’utilisateur.
L’application doit ressembler à son utilisateur, et l’utilisateur doit pouvoir s’approprier une application.
5- Tu intégreras les services du mobile
Le mobile est un outil multitâche social !
Ainsi, une application doit être à cette image. Elle doit pouvoir donner la possibilité d’interagir et d’utiliser les fonctions de base de son SMARTPHONE.
Par exemples : proposition d’un service de géolocalisation grâce au GPS intégré dans le terminal, mettre des liens « Click-To-Call » sur les numéros qui permettront aux mobinautes d’appeler directement en cliquant dessus…
6- Tu anticiperas le parcours des utilisateurs
Avant de commencer la phase de développement, il est important de créer en amont des scénarios de navigations qui auront le plus de probabilité d’être utilisés par les mobinautes. Il faut anticiper les usages de l’application et les différentes erreurs possibles que les mobinautes pourront rencontrer.
Chaque écran et chaque information vus par les mobinautes seront représentés et détaillés par un zoning.
7- Tu mettras à jour régulièrement les contenus
La qualité première d’une application est les visites régulières et répétées des mobinautes de manière quasi compulsive.
« En moyenne, un mois après l’achat seulement 15% des utilisateurs continuent à utiliser l’application. Tandis que 6 mois après, ce taux descend à 5% seulement » (Présentation : Bonnes pratiques de conception d’application pour Iphone)
Ainsi, il faut les inciter à revenir régulièrement sur son application à travers des contenus régulièrement mis à jour, non statiques.
Le mobile est un média instantané, propice à la récolte de nouvelles « fraiches ».
8- Tu penseras « light »
En effet, même si les accès Wifi et les forfaits haut débit se développent, leur couverture n’est pas encore totale.
Il est important donc de penser à optimiser certains points pour que les applications soient plus rapides, tels que :
- Le poids des images
- L’utilisation des frameworks Javascript qui sont à bannir
- Le chargement du contenu qui doit se faire petit à petit
9- Tu accompagneras l’utilisateur
Il n’est pas rare que l’utilisateur clique à un endroit dont il ne voulait pas… Ainsi, celui-ci doit pouvoir revenir simplement en arrière.
Il est important que l’application informe de la conséquence de chacune de ses actions.
Le mobinaute n’a pas rempli un champ obligatoire d’un formulaire, une pop-up doit l’avertir de cet oubli. Ou encore une page se charge, un écran de chargement doit être visible pour indiquer au mobinaute que l’application effectue une requête pour lui. A contrario, le mobinaute ne comprendra pas ce qui se passe, ou croira que l’application est buggée.
Il est important de prendre conscience qu’aujourd’hui le public est encore peu averti : informez-le, accompagnez-le, fidélisez-le…
Bien sur cette liste n’est pas exhaustive, alors n’hésitez pas à la compléter !
Pour en savoir plus, je vous conseille de consulter aussi les recommandations du W3C
À propos comon
Hello Tiffen !
Intéressant article qui donne quelques pistes pour bien débuter, d’ailleurs j’ai moi-même quelques questions/remarques
1- Tu privilégieras la lisibilité et la visibilité des informations
.. Et tu prendras soin d’ajouter des marges systématiquement autour de chaque objet pour rendre l’ensemble homogène visuellement.
As-tu des exemples d’applications qui montrent l’exemple ? D’autres qui auraient bien besoin d’une reforme graphique ?
2- Tu créeras une application simple et utilisable
… Et qui rend service ! Tu parles avec justesse de la question des 2 premiers écrans, j’ai pour habitude de calculer au “clic” : tu dois faire plus de 5 “clics” pour utiliser le service ? Alors revois l’expérience utilisateur. Pourquoi pas organiser une session de pré-beta test afin de comprendre comment les users sapproprient le service. Simple, peu couteux, et très, très efficace.
3- Tu choieras la navigation pour ne pas égarer l’utilisateur
Pas tout à fait d’accord. Enfin, c’est l’histoire de l’oeuf et de la poule. Si ton application a plus de 2 niveaux (3 à la rigueur), c’est qu’il y a encore un problème d’ergonomie, qui va perdre l’utilisateur. Les développeurs de Facebook pour mobiles ont tout compris et utilise de grosses icônes pour chaque fonction de son service… Et ça marche rudement bien !
Ce qui signifie selon moi qu’il faut prévoir à l’avance une application simple à utiliser…. et donc prévoir une navigation aussi simple. Créer une navigation complexe, avec trop de boutons, trop de liens entre chaque page n’aura pour effet que de perdre l’utilisateur… anticipation quand tu nous tiens !
4- Tu concevras une application que l’utilisateur pourra s’approprier
Oui, c’est le minimum vital je pense.. encore dépendant des contraintes du terminal…
5- Tu intégreras les services du mobile
Excellente idée, les contraintes du terminal sont très importantes et la personne chargée d’imaginer les fonctionnalités doit connaitre impérativement quels composants standards il peut utiliser, histoire d’éviter de réinventer la roue..
Par contre, je n’ai pas compris ton exemple…
6- Tu anticiperas le parcours des utilisateurs
Rejoint le 3 selon moi…
7- Tu mettras à jour régulièrement les contenus
… et le contenant ! A savoir la fameuse expression : “release early, release often” qui oblige à se concentrer sur l’expérience utilisateur quitte à faire des tests…
8- Tu penseras « light »
Et j’ajouterais : vive l’asynchrone et le mode offline !
Ce qui implique la nécessité (en fonction du type d’app évidemment) d’un mode hors ligne pour accéder à certaines informations de l’app voire même utiliser partiellement l’app si le réseau n’est pas là. Exemple : Je tweet ou retweet un message mais manque de chance, je suis dans le rer, sans réseau. L’app stocke l’action et l’envoie à son serveur une fois la connexion rétablie…
9- Tu accompagneras l’utilisateur
… avec un Community Manager forcené avec qui tu seras proche afin d’intégrer fidèlement le communautaire au sein de l’app et d’optimiser les différentes phases de développement (prérelease accompagnée par les power users, bêta test & bugfix d’un groupe d’utilisateurs, release, bugfix et ajout de fonctionnalités en fonction de la stratégie et des retours d’utilisateurs…
Qu’en penses-tu ?
Merci Christophe pour tes remarques pertinentes.
Voici mes réponses à tes questions :
1- Pour une question d’ergonomie, je pense que l’appli de la Fnac ou encore allo ciné sont de bons exemples et en contre-exemple je pourrais citer celle de la BNP. Les boutons sont trop petits, trop rapprochés, boutons avant et arrière collés non intuitifs…
5- Certaines applications permettent grâce de localiser les utilisateurs et ainsi de leur proposer des services géolocalisés (tels que restaurations, garages, parking au plus proche de soi…).