Une application mobile est par essence destinée à une population large, sans formation spécifique à son utilisation et exploitée dans des conditions plus rudes que le confort habituel d’un ordinateur, sa souris, son grand écran et sa connexion réseau rapide.
Les points à repenser sont nombreux, que cela soit dû à la disparition d’une fonctionnalité (clic droit, multifenêtres), à son changement de comportement (curseur non visible et pointeur passant d’un simple pixel à la taille d’un doigt), ou tout simplement à des réflexes différents de l’utilisateur (plus de défilement horizontal mais un défilement vertical quasiment infini), sans oublier bien-sûr l’ajout de fonctions spécifiques aux mobiles (téléphonie, prise de cliché).
Voici donc une check-list rapide des sujets à traiter.
La taille des terminaux
Repenser l’ergonomie des écrans utilisateurs pour une application mobile ne consiste pas seulement à les retailler pour les faire tenir dans ce que l’on pense être la taille des terminaux clients !
D’abord parce que la taille n‘est pas prévisible, les mobiles sont tous de tailles différentes et utilisables aussi bien en mode paysage que portrait.
Moralité : vos écrans doivent s’adapter à une taille variable, capable de gérer la plus petite (communément 360 pixels de large) mais aussi d’exploiter tout l’espace qui leur est offert sur les modèles le plus récents ou des tablettes.
Ensuite parce que les constructeurs vous mentent : aujourd’hui le moindre mobile vous est vendu comme « Full HD », ce que vous et moi comprenons comme capable d’afficher 1920*1080 pixels, mais c’est très loin d’être exact. Entendons-nous bien, les écrans sont réellement HD mais ils n’utilisent pas cette possibilité pour afficher des résolutions correspondantes, ceux-ci seraient tout bonnement illisibles : afficher 1080 pixels sur 3 pouces n’est pas raisonnable quand on compare le plus petit des écrans de PC qui lui dispose de plus de 14 pouces.
Finalement les smartphones les plus pointus affichent à peine plus de 400 px pour le soi-disant 1080 px, ce que l’on appelle le « viewport » est bien-sûr à prendre en compte dans la conception des écrans.
La structure des écrans
C’est un des aspects du responsive design qui implique que vos écrans soient compréhensibles et intuitifs.
Traduit de façon pratique, ils doivent commencer en haut et à gauche pour tous les éléments importants et suivre le bord gauche (le seul dont on est sûr de la position) si nécessaire au-delà de la limite physique de hauteur, mais tout en prenant soin de montrer que l’affichage a une suite.
Admettez que l’on est loin du bouton OK en bas à droite d’une boite de dialogue Windows de taille fixe.
Les menus
Pour ce qui est des menus de choix, la réponse est toute trouvée, quasi normalisée jusqu’à la couleur des menus et aussi bien pour Android qu’IOS
Le menu quand il est nécessaire est une barre déroulante, ancrée en haut à gauche de l’application et noire de préférence.
Éventuellement, l’écran d’accueil peut servir de menu mais cela implique de ne pas avoir d’écran d’accueil dynamique, ce qui est souvent un plus.
Les listes
Les fines listes qui s’étirent en largeur sur nos écrans habituels ne sont pas exploitables en mobilité, d’abord parce que la largeur n’y est pas et ensuite parce que la hauteur d’une ligne ne permet pas une sélection précise sur un smartphone. Les listes donc, seront remplacées par un format carte , affichant un objet sur plusieurs lignes.
Ces cartes certes affichent moins de résultats, mais plus de détails pour chaque « ligne » et permettent une sélection simple.
On peut éventuellement afficher deux cartes sur la même ligne si les dimensions le permettent.
La saisie et les sélections
Encore un sujet pour lequel le traitement est spécifique aux mobiles.
Même la saisie de texte simple qui, à première vue peut sembler similaire aux applications Web ou Windows, se comporte de façon spécifique. Quant aux champs spécialisés, ils sont eux à manipuler avec attention.
Il convient donc de connaitre les règles suivantes :
- Les champs de saisie de texte sont à définir avec une police de 16px minimum, en raison d’une restriction Apple qui zoome en deçà et tout simplement pour le confort visuel de l’utilisateur.
- Les champs de type numérique doivent être typés comme tel, pour activer un pavé numérique plutôt qu’un clavier Azerty.
- Les listes peuvent être soit les listes natives des terminaux, soit les listes habituelles : type radio bouton, déroulante ou à sélection directe, le tout à condition de ne pas requérir de double clic bien sûr.
- Les champs de type date peuvent être typés comme tel si l’on se satisfait de l’interface de saisie du mobile ou bien construit par un contrôle calendrier dédié aux mobiles.
L’enchaînement des écrans
Partons de deux postulats : les mobiles ne sont pas capables de gérer le multifenêtres, et la touche retour arrière (quand elle existe) n’est pas d’un usage spontané.
Les applications mobiles peuvent éventuellement gérer des écrans type pop-up ou des assistants, mais ce n’est pas une ergonomie standard, donc on prévoira plutôt des navigations dynamiques. En clair le menu ou une option permet d’accéder à un écran spécifique sur lequel la première action déterminera le contenu suivant, et le reste de l’interface étant calculé dynamiquement.
Ou à la rigueur une navigation à un niveau, avec une possibilité de retour arrière ou de fermeture suffisamment visible.
Les fonctions spécifiques aux mobiles
Il ne faut oublier non plus les possibilités spécifiques aux mobiles :
- La reconnaissance vocale, intéressante notamment pour les dates ou la saisie de texte en général.
- La géolocalisation qui, outre l’aspect sécurité, permet une identification précise du site de l’utilisateur.
- Ou bien encore la prise de cliché, car selon l’expression consacrée souvent une photo vaut les meilleures explications du monde.
Chacune de ces fonctionnalités doit être prévue et traitée par l’application.
Prêt à publier vos applications pour les mobiles ?
Comme l’on vient de voir dans cet article et les précédents, une application mobile n’est pas un simple site web même responsive, ce sont de nombreux éléments à prendre en compte mais aussi de nombreux bénéfices potentiels. Alors à vous de jouer !
Ces articles pourraient vous intéresser :
Ergonomie, une science au service de la conception de logiciels
Olivier Piochaud, PDG d’Apsynet
