Accueil

Bienvenue, ce site a été créé dans le cadre d'un cours Interface Homme-Machine à la licence SLIC de Montbéliard. Il traite des principes ergonomiques des interfaces mobiles (smartphones et tablettes). Voici une synthèse de ces critères ergonomiques :

Il existe des différences essentielles entre un site web pour Internet et un site web pour le mobile, de nouvelles règles ont donc été mises en place pour faire face à ce changement.

Les particularités des interfaces mobiles sont principalement le fait de l'utilisation du tactile (du doigt au lieu du pointeur de la souris), de la portabilité de l'appareil, (dans la main, dans la poche) et donc évidemment de sa taille très réduite par rapport à un écran d'ordinateur.

Aussi, l'utilisation du doigt sur les interfaces mobiles pose des problèmes nouveaux, il faut prendre en compte le fait que certains parties de l'écran sont difficiles à atteindre, mais aussi que l'on risque de cacher des parties de l'écran à cause du bras, de la main.

D'autre part, le fait que la taille de ces appareils soit très réduit, l'optimisation du contenu est très important, il faut aller droit au but en un minimum de clics. De plus, l'utilisation de ces appareils est à durée réduite, le mobinaute attend une réponse très rapidement sur ce genre d'interfaces, il faut donc penser doublement au contenu et le minimiser au maximum sans perdre le but principal de l'application.

Enfin, il faut prendre en compte qu'il s'agit d'environnements nouveaux pour les utilisateurs, il ne faut donc pas laisser totalement de côté certains principes des sites Web. Il subsiste quelques règles de base comme de la mise en page, les organisateurs de navigation. La lisibilité des informations est aussi une règle très importante qui, cependant, doit être d'autant plus travaillée de part la petite taille des écrans.

Au bout de nombreuses recherches, j'ai pu repérer 10 critères essentiels dans l'ergonomie des interfaces mobiles qu'il s'agisse des smartphones ou des tablettes tactiles.

Ces critères sont disponibles dans les parties suivantes, chacune est illustrée d'un ou plusieurs exemples d'applications pour mieux comprendre chaque principe.

Sources :

www.ergonomie-interface.com
www.comon.wordpress.com
www.journaldunet.com
www.tappgala.com

Lisibilité optimale

Voici quatre règles principales pour une lisibilité optimale :

Une typographie sans empattement :

Sans empattement signifie une police en lettre capitale, cela permet une lecture plus facile, cela apaise l'œil.
Si l'on utilise une police avec empattement, il faut penser à ne pas l'utiliser pour des longs paragraphes. Cela peut principalement servir d'ornements typographique mais cela deviendra difficile à déchiffrer sur un long texte. Notamment car sur les appareils à écran réduit, la lisibilité est mise à son minimum, il faut donc faire plus d'effort pour une bonne compréhension.

Sur l'application, Lemonde.fr, on remarque que les titres possèdent une typographie avec empattement, car il s'agit d'ornements typographiques, cela donne envie de lire le titre. Cependant, le contenu du l'article est une typographie sans empattement, car cela permet une meilleure lecture sur un long texte.

Choix des couleurs :

L'utilisation des couleurs doit être un choix fait intelligemment. Il ne sert à rien d'utiliser des couleurs qui n'ont aucun intérêt pour l'application ou le site web mobile. Pas plus de 5 à 7 couleurs, chacune utilisées pour une raison logique, et dans un cadre chromatique correct. (Ne pas mélanger des couleurs qui ne se marient pas)

Fond / Contenu :

Appliquer une couleur de fond assez claire et de privilégier une texture unie. Pour ce qui est du contenu, travailler sur une couleur assez foncée, cela améliore évidemment la lecture. Il ne faut pas forcer le mobinaute à trop se concentrer pour lire un texte. Il faut que la lisibilité soit parfaite pour plus de rapidité d'utilisation de l'application. Un contraste fort est donc à favoriser.

Pictogrammes, boutons :

L'affordance des informations sur une plate-forme mobile est d'autant plus importante car il n'existe pas de survol avec le pointeur de la souris. Ce survol permet, sur un ordinateur, d'avoir une petite information sur l'action que va faire un certain bouton ou un certain pictogramme (sous forme d'info-bulle).
L'utilisation du tactile empêche cette approche. Il faut donc donner une importance maximale à la capacité qu'à un objet de suggérer sa propre action.
D'où l'importance de créer des pictogrammes et des boutons clairs et compréhensible de tous, sinon leurs actions ne seront pas comprises et le mobinaute fera des erreurs.

Dans cet exemple de l'application Cookmate, il est clair que chaque bouton réfère à un certain aliment, l'affordance de ces pictogrammes est donc parfaite.

Repères de navigation

Les repères de navigation sont essentiels pour une bonne ergonomie des mobiles. Les appareils mobiles sont complètements différents des ordinateurs, il faut donc mettre en place de nouvelles règles.

Boutons de navigation :

Les boutons tels que "Suivant", "Précédent", "Accueil", "Stop" ou encore "Annulation", ne sont pas disponibles sur une tablette ou sur la plupart des smartphones. Il existe seulement un bouton, en bas de l'écran, pour revenir au bureau virtuel, il faut donc créer des onglets permanents qui permettent de naviguer correctement (voir image, ci-joint).

Il faut donc, dans une application, mettre en évidence ces différents boutons de navigation pour faciliter l'utilisation de cette application, dans le cas contraire il sera très difficile de l'utiliser et le mobinaute fera assurément des erreurs.

Dans le long terme cela réduira l'envie d'utiliser cette application, ce qui est évidemment un problème majeur.
De plus cela augmente la rapidité d'utilisation qui est un très bon point pour les applications mobiles.

Cul de sac :

Ne pas utiliser des pages sans retour. Si l'on arrive au bout d'une application, un bouton "retour" doit toujours être présent. Il ne faut pas donner l'impression que l'on a oublié de donner des directions, l'utilisateur peut se sentir perdu et ne pas comprendre comment il est arrivé sur cette page.

Fil d'Ariane :

Sur un site web, l'utilisation du fil d'Ariane est essentiel pour se repérer facilement et revenir en arrière sans se perdre. Pour les mobiles, cela est d'autant plus important que la barre de navigation n'est pas visible très facilement. Généralement, il faut cliquer sur un bouton pour faire apparaître le menu de navigation.

Sur cette image de l'application Pillboxie, on peut voir que les boutons, en bas de page, permettent de se repérer facilement. Il s'agit d'onglets permanents dans l'application et la surbrillance d'un des boutons permet de faire ressortir la catégorie dans laquelle on se trouve.

Respecter les habitudes de l'utilisateur

Il réside quelques règles tirées de l'ergonomie des sites internet sur ordinateurs.

Placement logo :

Sa position en haut à gauche est et restera une norme pour la plupart des sites. Il est possible de le retrouver au milieu du menu. Tant qu'il ne se trouve pas en milieu ou bas de page ou sur la droite, sa position est bonne.
Dans cet exemple de l'application Diacarta, on peut voir que le logo se situe bien en haut à gauche de l'écran de l'application.

Barre de navigation :

La barre de navigation doit se situer en extrémité de l'écran. Les bords de l'écran pour les interfaces mobiles ne sont pas des endroits faciles à atteindre pour un mobinaute. Il faut donc placer le menu de navigation en haut ou en bas de l'écran.
De plus, il est évident qu'il doit s'agir de boutons cliquables afin d'amener l'utilisateur à la page souhaitée.

L'exemple de l'application Figure présenté ici possède les deux configurations possibles. Un menu horizontal en haut et un second en bas.

Mise en page :

Pour ne pas perdre l'utilisateur, qu'il soit nouveau sur les mobiles ou non, il faut garder une certaine logique de mise en page afin qu'elle soit ressemblante à un site internet. Il faut donc pouvoir identifier des éléments connus tels que le logo, une barre de navigation, contenu, des images et/ou animations. Tout cela dans une harmonie qui aide à la compréhension.

Optimisation

Attention 80% :

Sur les appareils mobiles, principalement les smartphones, il y a 80% de place en moins par rapport à un écran d'ordinateur.
Il faut donc faire attention au contenu, aller droit au but pour ce qui est de l'information à prodiguer par l'application. Privilégier des messages clairs et directs. Il faut concaténer les contenus afin de se focaliser uniquement sur les objectifs principaux de l'application.

Quelques idées : Faire des listes plutôt que de longs paragraphes, des phrases courtes, des textes clairs, séparer les informations afin de ne pas trop en mettre à un seul endroit.

Dans l'exemple ci-contre, on retrouve une page d'un site internet issu d'un ordinateur (à gauche), une page issu d'une tablette (au milieu) et une image issu d'un smartphone (à droite). On peut clairement voir la différence d'informations. Sur le site, la quantité d'informations est beaucoup plus importante que sur l'application où les informations sont réduites mais toujours présentes..

Gestion du doigt :

Sur les mobiles, le dispositif de pointage est beaucoup plus grossier que le pointeur de la souris. Cela demande donc de nouvelles modalités de sélection (voir "Proximité").

Les boutons doivent être plus gros, les textes aussi (voir "Lisibilité").
Il faut donc une très bonne organisation pour pouvoir placer tous ces paramètres sans surcharger l'écran. Penser à aérer, ne pas avoir peur de laisser des espaces pour laisser libre la gestion du doigt de l'utilisateur.
Il peut cliquer sur un espace vide sans que cela se répercute sur une action, cela lui donne de la liberté d'utilisation.

Trois à cinq actions :

Chaque vue ou écran, ne doit pas proposer plus de trois à cinq taches, objectifs, ou éléments en plus des éléments de navigation permanents. Cela restreint la densité informationnelle, ce qui permet de mieux apprécier les informations présentes. Il faut organiser son application de manière à n'avoir pas trop d'écrans et pas trop de tâches par écran.

Sur cet exemple de l'application NOTE'd, on peut voir que seuls quatre éléments sont visibles. Ils prennent chacun la même place, et ont donc la même importance. Le contenu est clair, rien ne vient interférer avec les éléments. Cette application est un très bon exemple de la gestion des actions.

Proximité

Loi de Fitts / Modalité de sélection :

Rappel de la loi de Fitts: Le temps nécessaire pour sélectionner une cible proportionnelle à la distance à parcourir pour atteindre la cible et inversement proportionnel à la taille de la cible.
En d'autre terme, il faut prendre en compte la taille d'un bouton, ainsi que la distance qui réside entre ces deux boutons, ces deux paramètres rentrent en compte dans la loi de Fitts.

Taille d'un bouton :

La taille d'un bouton doit supporter la taille d'un doigt, en général l'index ou le pouce, afin de ne pas devoir gérer une erreur de l'utilisateur (s'il a cliqué sur le mauvais bouton).
Dans cet exemple de l'application Express, on peut voir que les boutons sont de tailles suffisamment importantes pour être atteint sans erreurs.

Le positionnement d'un bouton :

L'utilisation des mobiles réduit l'accessibilité à certains endroits de l'appareil. (voir images ci-contres). Il faut donc choisir le bon endroit pour placer un bouton essentiel dans la navigation afin qu'il soit accessible dans toutes les circonstances. Il faut avoir tous les éléments nécessaires à porté de main ou de pouce sinon ils sont difficile à atteindre.

Distance entre boutons :

Ne pas mettre deux boutons de navigation côte à côte. L'utilisation du doigt sur les interfaces mobiles crée une marge d'erreur lors du clic sur un bouton. Par conséquence, si des boutons sont trop proche les uns des autres, il risque d'y avoir des problèmes de précision du mobinaute, et cela risque fortement d'engendrer des erreurs en cliquant sur le mauvais bouton.

Moyens de navigation

Différents mouvements de navigation :

Grâce au tactile de nouveau mouvements de navigation permettent de se rapprocher le plus possible de toutes les possibilités de mouvements avec la souris, tels que le glisser, le cliqué, le zoom, etc.

L'image ci-contre nous montre les différents mouvements à prendre en compte et à exploiter lors de la création d'une application smartphone ou tablette. Il s'agit de mouvements naturels qui peuvent aider à créer une navigation originale et amusante.

Pas de survol :

La tactile, par définition, ne propose pas la possibilité de survoler des boutons ou autres éléments. Le fait se s'approcher de l'objet sans le toucher ne va pas afficher une information. Il est donc impossible de créer des "info-bulle" ou autre paramètres nécessitant un survol.

Ce principe rejoint le principe d'affordance des informations. Sur un ordinateur, il est possible de comprendre l'intérêt d'un bouton en le survolant pour en lire l'info-bulle correspondante. Ce système est impossible sur smartphone et tablette. Il faut donc exprimer très clairement l'intérêt d'un bouton ou autres éléments.

L'exemple ci-contre (Météo France) montre que le survol permet de cacher des informations, alors pour une application tactile (Météo Suisse), cette information doit être mise en avant. (à gauche : un site internet sur ordinateur, à droite : une application mobile)

Mémoire :

Il ne faut pas faire travailler la mémoire des mobinautes : enregistrer l'état actuel dans les applications. Dans le cas où l'on navigue sur une application et que l'on reçoit un appel, la page ne doit pas être réinitialisée, cela est un perte de temps. De même pour le remplissage de formulaire ou autre questionnaire.

Masquage

Le doigt, le bras :

La présence du doigt, de la main, voire de l'avant bras devant l'écran demande de la réflexion supplémentaire au niveau du placement des éléments de l'interface, afin d'éviter de masquer des informations.
Il faut prendre en compte que l'on masque certaines parties de l'écran lorsque l'on navigue, penser à regrouper les informations vers le centre et non vers les extérieurs.

La partie en bas à droite (pour les personnes droitières) est très souvent masquée, il faut donc oublier de placer des éléments importants à cet endroit, car ils ne seront que rarement vu pas le mobinaute.

De plus, la partie gauche (pour les droitiers) est également cachée par la main porteuse de l'appareil. Une brève partie de l'écran n'est donc plus visible. Il faut aussi faire attention à ne pas placer d'éléments essentiels à cet endroit.
De même pour les gauchers, en inversant les parties masquées.

Exemple :

Dans cet exemple de l'application News Republic , on voit bien que la partie en bas à droite est peu fournie en informations. Il s'agit de la partie la plus faible au niveau du nombre d'informations sur la totalité de la page. Cette application respecte donc bien le principe de masquage.

Distance :

Prendre en compte le masquage a pour effet d'augmenter la distance entre les éléments. En effet, on aura l'impression que les éléments sont de plus en plus éloignés les uns des autres.

Rapidité

Poids du site / de l'application :

Il faut faire très attention au poids du site ou de l'application, notamment au niveau des images, des animations, des jeux à charger. Le mobinaute doit utiliser ces interfaces rapidement, c'est le principe du mobile.

Chargement :

Il faut de la rapidité dans les applications entre chaque page, sinon une application n'est plus utilisée. L'impatience des mobinautes risque d'engendrer la suppression de l'application en question.

Feed-back

Barre d'état :

Lors de la navigation dans des applications, la barre de statut doit toujours être visible.

Les informations sur la batterie, le réseau, les nouveaux messages sont des informations constamment regardées. Il faut donc ne pas les oublier lorsque l'on se trouve dans une application.


Sur les deux exemples ci-contre, on peut voir que l'application de gauche (The Weather) propose la barre d'état du smartphone, à la différence de l'application de droite (ColorSchemer Touch) qui ne propose aucune informations sur le téléphone.

Temps de chargement :

Il est compréhensible qu'un site mette un certain temps à charger quelques-unes de ces pages, mais il est indispensable de montrer à l'utilisateur que le chargement est en cours.

Pour toutes actions, un feed-back dynamique doit faire son apparition sous la forme d'un texte, d'une image animée ou non.

Dans le cas contraire, l'utilisateur va tenter de cliquer sur toutes sortes de boutons car, pour lui, aucune action n'aura été enregistrée. Cela sera donc une des premières cause d'erreurs pour le mobinaute.

Indications de sélection :

Les indicateurs de sélection peuvent se rapporter au principe de l'affordance mais à un niveau plus général. Par exemple, l'application ci-contre Typoclock, n'indique pas réellement où l'on peut cliquer pour obtenir une information, aucun bouton n'est visible. Créer des indicateurs de sélection corrects afin que l'on comprenne qu'il s'agit de boutons cliquables qui amènent vers une action.

Dans d'autres cas, on risque de ne jamais cliquer sur un bouton non mis en avant par une bonne affordance.

Esthétique

Exemple positif et négatif :

Une application doit avant tout être captivante, des couleurs bien choisies qui correspondant au contenu. Des images attractives, de qualité, avec, encore une fois, un choix de couleurs agréable à l'oeil.

Il doit exister un environnement autour de ce que propose l'application, proposer une identité visuelle, un univers très défini, accueillant et agréable à parcourir.
L'exemple ci-contre de l'application Primrose Bakery, a choisi des couleurs dans les tons pâles en correspondances à l'image de fond. La cuisine étant connue pour être une activité assez féminine, le rose est la couleur mise en avant. Enfin, il faut penser au confort de l'utilisateur, par exemple ne pas lui transmettre trop d'informations en un seul écran, etc.

L'exemple ci-contre, va à l'encontre de tous les critères esthétiques exprimés ci-dessus.
On ne retrouve aucune identité visuelle agréable au niveau de la couleur, de la typographie, des images. Il y a énormément d'informations pour un seul écran, l'oeil est surchargé d'informations, on ne sait plus où regarder.