Conception des menus pour les applications mobiles

24 mars 2011

Après vous avoir donné des conseils pour les bonnes pratiques de la conception des menus pour un site web, voici ce pour une application mobile.

L’interface d’un smartphone est beaucoup plus petite que l’écran d’un ordinateur il faut prendre en compte que la navigation n’est pas du tout la même car l’utilisateur ne se sert pas d’une souris (mis à part pour les blackberry qui possède un mini joystick). Si on prend d’autres smartphones types android ou iphone il faut préparer son menu en fonction de comment l’utilisateur navigue au travers du site.

L’organisation de la navigation :

La surface de l’écran d’un smartphone est assez limitée, il ne faut donc pas surcharger l’écran avec d’autres éléments. Vous avez voulu faire concis avec les boutons de navigation pour votre site web ? Il faudra l’être encore plus pour le site mobile. La version mobile tend à revoir l’architecture de celui-ci comparé à la version web (cela fera l’œuvre d’un prochain article).

Sur une version mobile il est habituel de voir des navigations à plusieurs niveaux afin de n’avoir que peu de catégories sur une page d’accueil et ensuite pouvoir choisir vers quelle page profonde on souhaite aller.
Faites des écrans spécialement dédiés à la navigation, n’hésitez pas à ajouter des images pour avoir un rendu plus visuel. Comme le signal ergonomie-interface.com évitez l’état Hover comme les écrans tactiles ne gèrent pas ses états pour les boutons.

Comme l’écran est petit, des images peuvent simplement remplacer les éléments textuels et avoir le même impact sur l’utilisateur qui comprendra où il se dirigera (un maison pour aller vers la home, des flèches pour retourner en arrière, une silhouette pour accéder à son profil).

Organisation simple et claire

Une bonne organisation simple pour la navigation de votre version mobile serait : un menu en haut ou en bas avec quelques icones (4 voire 5) qui mène à un autre écran de navigation où l’utilisateur a le choix parmi plusieurs options. Une fois de plus cela respecte la navigation déjà instaurée par la plupart des versions mobiles.

N’hésitez pas à allez jeter un oeil au template android pour l’élaboration de vos menus

Les bonnes pratiques :

[list_tick]

  • Usage des boutons de navigation avec icone + titre
  • Plutôt qu’un bouton type « Retour » , il est préférable d’indiquer le nom de la partie de l’application vers laquelle l’utilisateur va revenir (« Accueil »). Un bon moyen de remplacer le fil d’ariane
  • Ne pas proposer trop d’onglets différents (4 à 5 au maximum)
  • Garder en mémoire les recherches de l’utilisateur ainsi que toutes les informations déjà saisie (adresse e-mail, nom, etc.)
  • Proposer un système de favoris (e-commerce, textile, transport, livres…)
  • Utiliser les fonctions GPS d’un mobile pour pré-remplir certains champs formulaires (pays, code postal, etc.).
  • L’usage de typographies sans empattement de type arial
  • « L’usage de jauges ou de pictogrammes animés (sabliers, etc.) accompagnés de texte est indispensable pour faire comprendre à l’utilisateur que l’application n’est pas bloquée mais travaille pour lui. » (Journal du net)
  • Eviter les « pages cul de sac »
  • Anticiper les erreurs de l’utilisateur. le mobinaute doit être clairement informé du problème et doit pouvoir identifier rapidement une solution

[/list_tick]