Présentation

Ce site a été conçu pour exposer les critères ergonomiques que l'on retrouve dans les mobiles. Vous pourrez trouver une synthèse sur ce qu'est une interface ergonomique, ce qu'elle doit contenir et sur les éléments importants qu'il faudrait retenir pour créer une application mobile. Ci-dessous est présentée la synthèse, puis les quelques dix critères ergonomiques (parmi une pluralité) pour les mobiles.

    Vous trouverez les informations complémentaires au bas de ce site dans le footer.

Synthèse

L'ergonomie consiste à adapter le travail, les outils et l'environnement à l'homme. L'ergonomie est donc l'ensemble des éléments qui composent l'interface des téléphones nouvelle génération appelés : SmartPhones. Ces différentes interfaces permettent la navigation mais différent suivant le type de téléphone que l'on choisit. Si bien que l'on retrouve Androïd, Apple et Research In Motion (blackberry) dans le trio de tête du marché des mobiles.

    Pourquoi les SmartPhones nous attirent-ils ? Quels sont les éléments qui constituent ces appareils ? Quelles sont les spécificités communes à tous les systèmes d'exploitation mobile ? À ces questions nous pourront répondre que les téléphones nouvelle génération, ont été développés pour être tourné vers les utilisateurs, ce sont eux qui doivent tout contrôler. Par ailleurs, ces interfaces sont travaillées pour plaire à l'utilisateur, il doit faire de sa machine un appareil unique et original pour se différencier de tous. Avec l'arrivée de ces nouveaux téléphones, il est important de remarquer que ces machines sont de plus en plus rapides, plus performantes et entièrement tactiles. Il en va de soi que pour attirer le consommateur les entreprises cherchent tous les moyens d'améliorer l'ergonomie, c'est-à-dire les éléments qui composent l'interface. L'ergonomie intervient donc dans la navigation pour l'améliorer, comment ? En utilisant des éléments divers et variés exposés en critères.

    Les particularités et les principaux objectifs de l'interface mobile sont :
- de ne pas surcharger l'écran faute de place disponible (écran délimité par une dimension très petite)
- des critères précis à respecter tels que la taille des applications, de l'ordre de 114 pixels de large par 114 pixels de haut
- obtenir l'information que l'on recherche le plus rapidement possible
- les applications doivent être intuitives et faciles à comprendre.

    Ces différents points mettent en abîme qu'il y a un certains nombres de points que l'on doit axer lorsque l'on crée un programme pour les SmartPhones.

    Voici les 10 critères sélectionnés.

1 La charte graphique

La charte graphique de l'interface doit correspondre à un code couleur ayant pour fond, des couleurs claires et des typographies de couleurs foncées. Ces teintes sont utilisées pour permettre à l'utilisateur d'utiliser son téléphone lorsqu'il y a du soleil. Si le mobile est exposé à la lumière, il sera difficile de voir le contenu sans cette particularité.

À droite, l'exemple de l'application "Tricount" qui recense ce critère et qui permet néanmoins d'être efficace car l'on peut voir dès le menu que la charte graphique est respectée en terme de lisibilité.

2 Limitation du contenu

Les informations contenues dans l'interface doivent être limitées car la taille de l'écran a une dimension définie qui ne peut changer. Étant donné que les applications doivent être intuitive il sera donc inutile de remplir totalement l'écran de textes, si bien qu'il ne devrait pas y avoir beaucoup d'information textuelle.

    Cependant dans certains cas, il est difficile de respecter cette règle du fait que le contenu prend beaucoup de place, à ce moment là, la police sera plus petite mais obligera l'utilisateur à "pincer" l'écran pour lire de plus près. Nous pouvons prendre l'exemple de l'Apple Store sur iPhone, lorsque l'on veut télécharger une application, une description nous est fourni mais la hauteur de la page est égal à plusieurs hauteurs d'écran.

3 Les images

L'utilisation de logo ou d'image que l'utilisateur comprend peut être plus bénéfique et plus parlant qu'un texte (toujours dans le souci du gain de place). Dans les interfaces mobiles, les images servent avant tout pour donner des informations et non à illustrer la page. C'est sur cet élément que s'appuie la plupart des développeurs, mettre des images est plus parlant car nous reconnaissons plus facilement des formes que du texte.

    À droite, l'application "Allociné" qui répertorie tous les films qui sortent dans les sallles de cinémas, passés ou à venir. Le menu est classé de façon hiérarchisée pour que l'utilisateur puisse se repérer le plus vite possible dans cette interface. La première hiérarchie fait référence aux films et aux salles de cinémas. La seconde aux informations complémentaires concernant l'équipe du film (réalisateurs, acteurs, producteurs, maisons de diffusions … etc). La quatrième ligne concerne l'utilisateur lui-même, c'est-à-dire l'accès à son compte et la possibilité d'ajouter un cinéma dans ses favoris. Par la même, cette ligne concerne les données du site (festival et la télévision "Allociné"). Enfin la dernière ligne représente le surplus (jeu) que propose l'application pour garder leurs utilisateurs actifs sur le programme.

4 L'autocomplétion

Les informations se remplissent d'elles-mêmes pour aider l'utilisateur, l'exemple de l'auto-complétion se trouve dans l'écriture d'un Short Message Service. C'est un élément de l'ergonomie qui est très important car rappelons-le, les mobiles doivent permettre l'écriture de la communication le plus rapidement possible. L'auto-complétion le permet grâce à l'aide proposé par le téléphone qui analyse ce qu'écrit l'utilisateur et propose donc des éléments associés à ce que la personne souhaite marquer.

5 Les recherches

Lorsqu'un internaute a déjà effectué des recherches au préalable, on lui donne la possibilité de les lui redonner pour qu'il ne perde pas de temps à réécrire ce qu'il a déjà écrit par le passé. On retrouve cet aspect dans les moteurs de recherches tels que Safari ou Chrome.

    On peut ajouter aussi des onglets comme dans un navigateur classique sur ordinateur pour retrouver "visuellement" sa page que l'on souhaite garder ouverte. On peut voir ci-dessous une page d'onglet parmi 7 pages ouvertes.

6 Les notifications

Les notifications sont des informations permettant à l'utilisateur de voir s'il a reçu des éléments liés à une application. On parle de "pastilles" ou d'"info-bulles" qui ont une petite taille situées généralement en haut à droite du raccourcis de l'application. Celles-ci sont très utiles lorsque nous nous trouvons dans un endroit où l'on ne peut pas utiliser son téléphone, et ces bulles rouges nous renseignent sur les informations que nous avons loupées. Le chiffre à l'intérieur du cercle signifie le total d'informations raté. Dans cet exemple il y a deux notifications non vues dans "facebook" ainsi que sur "DrawSomething". Pour ajouter, toutes les applications ont ce genre d'alerte qui informe l'utilisateur qu'il doit ouvrir le programme pour voir de quoi il est question. C'est ce genre de petits détails qui permettent à l'interface d'être tourné vers l'utilisateur et ainsi d'être plus ergonomique (axer l'attention de l'utilisateur sur une application plutôt qu'une autre, rapidité d'interprétation de l'information, une part de suspens : qui m'a identifié ? Qui m'a répondu ?). Ces pastilles viennent dans un contexte où la communication est omniprésente.

7 Le chargement

Lorsqu'un utilisateur de mobile nouvelle génération utilise le navigateur ou tout autre application, il doit être informé de l'état de sa page. Il doit obtenir des informations comme : le temps de chargement ou la barre de progression qui correspond. Il faut donc montrer à l'utilisateur que la page qu'il a ouverte se charge bien. Nous pouvons interpréter cela comme étant un "FeedBack" direct sur l'action de l'utilisateur.

    Ci-contre un exemple de page qui est entrain de s'ouvrir avec la barre de progression nous pouvons voir aussi le nom de domaine qui est associé à cette page (site du zéro).

8 Intuitivité

La navigation dans l'interface doit être conviviale et intuitive. On parle d'intuitivité quand l'utilisateur n'a pas besoin d'apprendre comment utiliser une application car elle doit être suffisamment travaillée pour que peu importe la personne qui naviguera elle pourra comprendre d'elle-même. Cela passe donc par plusieurs points : le regroupement des contrôles graphiques par zones (comme par exemple un menu dont chaque bouton est intuitif et l'utilisateur n'a pas besoin de chercher à quoi il correspond), l'environnement doit être régi par l'uniformisation des couleurs et des informations contenues (équilibre entre les textes, les images, les couleurs, les typographies).

    La capture d'écran nous permet de voir que le menu est intuitif et que l'on comprend les différents liens qui le compose. Par exemple la maison est associé à l'accueil qui regroupe toutes les informations et donc à toutes les photographies de l'utilisateur mais aussi de ses amis.

9 La gestion des erreurs

La gestion des erreurs est une règle très importante dans la mesure où il faut mettre en place des moyens pour détecter et prévenir les erreurs que les utilisateurs peuvent commettre. Ces erreurs sont dû à des actions involontaire (doigt qui glisse sur l'écran) ou dans certains contextes volontaires (mettre un mot à la place d'un autre, des mots différents de la langue d'origine par exemple). Pour prévenir ces fautes, il faut adapter l'espace de navigation pour que l'utilisateur puisse corriger sa bévue tout en continuant à communiquer son message.

    L'image de droite montre cet aspect. Le système a détecté une erreur et propose à l'utilisateur de corriger sa faute en proposant des mots associés au contexte.

10 Saisies d'informations

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 vaut 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.