Le Blog de Pi-R (Pierre Cambier)

Développement mobile : les grands principes ergonomiques

Revenons aux bases du développement mobile le temps d’un article…

La mobilité a pour principal objectif d’optimiser la saisie et la fiabilité des informations collectées sur le terrain.

Une application mobile industrielle est destinée à être utilisée par des techniciens nomades. Ces techniciens se voient contraints d’abandonner le stylo et le papier, pour privilégier l’utilisation d’un terminal mobile pour la réalisation de leurs travaux.

Ce nouvel outil a pour but d’améliorer la saisie des informations et plus particulièrement la productivité. Il ne doit donc pas être une contrainte ou un obstacle en ce qui concerne la réalisation de leurs taches.

Si l’utilisation d’une application mobile est trop contraignante pour un technicien, sa productivité sera en baisse et un sentiment de frustration et de découragement s’installera.

Pour que l’utilisation du terminal mobile soit la plus simple possible, il est important de bien concevoir l’interface graphique de l’application métier.

Afin de ne pas rebuter les techniciens face à la technologie, et ne pas leur faire regretter leurs anciens modes de travail (papier + stylo), il est primordial de construire une application simple, intuitive et ergonomique.

Il est à noter que l’ergonomie de l’application métier doit également être adaptée aux conditions spéciales et à l’environnement de travail du technicien (travail en extérieur, soleil, obscurité, besoin d’un maximum de rapidité de saisie, etc…).

Dans cet article, j’ai donc réuni l’ensemble des plus grands principes ergonomiques qui doivent être employés (selon moi) afin de construire une application nomade adéquate répondant à tous ces besoins. L’implémentation de toutes ces préconisations permettra un gain de productivité et améliorera les taches de l’utilisateur.

Design, Couleurs et Textes :

- En ce qui concerne la charte graphique de l’application, optez pour des textes de couleur foncée sur des fonds (backgrounds) de couleur claire. En effet, cette combinaison permet de faciliter la lecture des textes, et donc d’optimiser le travail du technicien. Mettre des textes foncés sur des fonds clairs est également la combinaison la mieux appropriée pour une utilisation du terminal en milieu extérieur. En effet, elle assurera une meilleure visibilité lorsque l’écran du PDA sera exposé en plein soleil par exemple.

- Un “code couleurs” peut également être instauré et permettra à l’utilisateur de bénéficier d’un confort optimal, et d’une grande praticité en ce qui concerne l’utilisation de l’application nomade. Par exemple, sur chacun des écrans, il est possible de définir une zone de couleur (panel au fond clair) qui représentera systématiquement les informations du référentiel de travail, tandis qu’une autre zone, de couleur différente, sera utilisée pour regrouper les actions possibles de l’utilisateurs (boutons, menus, etc…).

- En ce qui concerne les textes, il est d’abord question de les limiter. En effet, dans le cadre du travail d’un technicien, il est inutile que les écrans soient pollués par une tonne de textes explicatifs. Si l’application est intuitive, et comme on part du principe que le technicien connait bien son métier, il n’est pas utile de disposer de nombreux textes qui en plus prennent de la place sur les écrans. Seul un titre d’écran et quelques libellés simples seront par exemple suffisants.

- Les libellés doivent être simples, concis et bien adaptés. Ils doivent être écrits dans une police suffisamment grande pour en faciliter la lecture.

- L’utilisation de logos ou pictogrammes peut également être un atout. L’utilisation d’images, plutôt que de textes, est plus attrayant et parfois plus parlant pour l’utilisateur.

Navigation dans l’application :

- La navigation au sein de l’application mobile doit être conviviale et intuitive. Il faut que l’application soit simple en termes d’utilisation, et que la prise en main soit facile pour des techniciens qui n’ont peut être pas l’habitude d’utiliser ce genre d’appareil. Tous les écrans et les actions associées doivent être suffisamment prédictibles pour qu’aucune formation particulière ne soit nécessaire quant à l’utilisation du logiciel.

- En terme d’intuitivité, il est aussi intéressant de regrouper intelligemment les contrôles graphiques par zones et d’uniformiser l’ergonomie générale de l’interface graphique. L’utilisateur ne doit pas avoir de doutes et doit pouvoir effectuer ses actions facilement sans chercher un bouton particulier, ou une fonctionnalité, pendant plusieurs minutes. Cette idée rejoint l’utilisation de codes couleurs.

- Pour faciliter davantage la navigation et pour ne pas que l’utilisateur soit “perdu” dans les différents écrans de l’application, il peut être intéressant de titrer chacun des écrans. Par exemple, nous pouvons placer sur chacun des écrans une barre de titre personnalisée permettant à l’utilisateur de comprendre rapidement la fonctionnalité principale d’un écran spécifique.

- Très important : il faut toujours garder en tête que l’utilisation du stylet sur l’écran tactile peut se révéler pénible est fastidieux. En effet, le fait de détacher et d’utiliser le stylet du PDA est peu pratique pour le technicien nomade. De plus, le stylet est un petit objet qui peut facilement se perdre ou se casser. Aussi, il est intéressant de concevoir l'interface graphique d’une application mobile industrielle pour qu’elle soit utilisable avec les doigts. Cette conception aura pour but d’améliorer considérablement la navigation entre les écrans mais également les différentes actions, et la saisie d’informations. Dans la mesure du possible, il ne faut donc pas hésiter à grossir la taille des contrôles graphiques, afin de proposer une plus large zone qui sera “cliquable” avec les doigts. En ce qui concerne les scrollings, ils doivent pouvoir s’effectuer sans stylet, via des gros boutons “Up” et “Down” par exemple. (Il en est de même pour simplifier la sélection dans une comboBox par exemple). Nous parlons ici d’ergonomie “gros doigts” où le but est d’adapter le plus possible une interface graphique pour son utilisation sans stylet. L’utilisation du stylet, ou toute sorte d’interaction tactile plus précise, pourra tout de même être accepté sur les écrans rarement utilisés, comme les écrans d’historiques par exemple.

- Afin d’optimiser au mieux la navigation dans l’application, et plus particulièrement sa rapidité, il peut se révéler intéressant de proposer à l’utilisateur des raccourcis claviers (pour les terminaux disposants de claviers hardware évidemment). Certaines actions associées à l’interface graphique peuvent être effectuées en appuyant simplement sur une touche particulière du clavier. A vous de programmer intelligemment ces raccourcis clavier pour rendre l’utilisation de l’application encore plus facile et plus pratique.

- Enfin, il est pratique pour l’utilisateur de regrouper l’accès aux fonctionnalités phares de l’application dans un unique menu principal, sur lequel l’utilisateur peut revenir rapidement. (Bouton retour au menu, raccourci clavier, etc…).

Inputs utilisateurs / Saisie d’informations :

- Certains terminaux ne sont pas munis d’un clavier hardware, et le technicien peut parfois avoir besoin de saisir une information dans un champ de texte de l’application… Certes, il existe le clavier virtuel par défaut “Windows Mobile” qui peut être utilisé pour saisir du texte, cependant son utilisation doit s’effectuer à l’aide du stylet et peut donc devenir pénible. Aussi, il peut être intéressant d’implémenter un clavier virtuel personnalisé, et surtout “gros doigts”, que l’on affichera dans des cas précis de saisie.

- D’une manière générale, les saisies au clavier ne sont pas rapides et peuvent vite devenir contraignantes. Dans la mesure du possible, il faut mieux éviter l’utilisation de champs de textes pour privilégier l’utilisation de listes ou de menus déroulants. Ces listes peuvent contenir des textes et des informations prédéfinies ou récupérées à partir de la base de données par exemple. Elles permettront à l’utilisateur de sélectionner rapidement une information et d’éviter la saisie au clavier. Bien sûr, dans certains cas, la saisie d’informations au clavier est inévitable. 

- Enfin, pour faciliter d’avantage la saisie d’informations, il est possible de gérer intelligemment le focus sur certains contrôles. Par exemple, imaginons que suite à un clic sur un bouton, nous affichons un écran comportant une simple textBox dans laquelle l’utilisateur doit entrer une référence. Dans ce cas précis, il est habile de donner le focus à la textBox dès l’affichage de l’écran via le code .NET. Cette action permettra à l’utilisateur de pouvoir tout de suite effectuer sa saisie via un clavier sans avoir besoin de cliquer sur l’écran pour mettre le focus. Il s’agit là d’un détail mais ce sont des détails comme ça qui peuvent beaucoup améliorer l’utilisation d’une application.

Indicateurs / Alertes / Feedback utilisateurs :

- Lorsque l’utilisateur entreprend une action particulière dans son application, il est impératif de lui fournir un retour, un feedback. L’action a-t-elle réussie? échouée? Que s’est-il passé? La sauvegarde s’est-elle correctement déroulée? Tant de questions qu’un utilisateur peut se poser pendant l’utilisation de son outil… Aussi, il est donc important, de faire apparaitre des alertes sous la forme de “message box” par exemple, pour informer au mieux l’utilisateur de la réussite ou de l’échec de son opération. Ces messages doivent être simples, concis, et peu nombreux pour ne pas devenir contraignants.

- En plus d’alertes visuelles, ne pas hésiter à utiliser des alertes sonores qui peuvent être un atout supplémentaire pour le technicien qui ne regarde pas forcément son écran lors de manipulations particulières telles que la lecture de codes à barres par exemple.

- Plus particulièrement à la mobilité, il est toujours intéressant pour l’utilisateur d’avoir accès rapidement à des indicateurs tels que le niveau de batterie du terminal, le niveau du signal GPRS, ou encore la date et l’heure. Pour les applications “plein écran”, il peut être nécessaire d’afficher sur tous les écrans une barre d’informations personnalisée permettant de contrôler ces différents éléments.

- Pour terminer, il est important de signaler que les terminaux mobiles n’ont pas les performances qu’un PC de bureau pourrait avoir. Aussi, il est indispensable d’afficher systématiquement un sablier pendant l’exécution de traitements complexes. Ce sablier permet de faire comprendre à l’utilisateur qu’il a bien validé une action spécifique et qu’il doit attendre plusieurs secondes que le traitement s’achève. Bien sûr, ce sablier peut être remplacé par un message du style “Merci de patienter…”.

Conclusion :

En conclusion, concevoir une interface graphique pour une application mobile est un travail très complexe et qui doit énormément être étudié par rapport aux besoins et aux conditions de travail de l’utilisateur. L’ergonomie d’une application nomade ne doit pas être faite au hasard et doit bénéficier d’une attention particulière pour faciliter au mieux le travail des utilisateurs.

N’hésitez pas à me faire part de vos commentaires et remarques.

Je suis à votre disposition si vous avez la moindre question ou besoin d’un conseil.

Pi-R.