Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Application de la loi de Fitts au design d'interfaces mobiles

by
Length:LongLanguages:
This post is part of a series called UX Foundations.
Crafting the Experience of User Interface Messages
The Psychology of Content Design

French (Français) translation by Henri Lotin (you can also view the original English article)

La Loi de Fitts est un principe essentiel de la théorie de l'Interaction homme-machine qui a été formulée il y a près de 60 ans. Elle est essentielle au design UX pour les ordinateurs de bureau et les ordinateurs portables, mais avec des techniques d'interaction très différentes sur les appareils mobiles, pouvons-nous toujours l'utiliser de la même manière ? Nous allons examiner en quoi consiste la Loi de Fitts et comment elle est appliquée au design pour les appareils mobiles.

Pour découvrir comment nous utilisons la Loi de Fitts il faut tout d'abord regarder exactement ce que c'est, ainsi que sa prévision d'utilisation originelle. Elle a été créée en 1954 par Paul Fitts et a l'intention de modéliser l'acte de pointer une cible sur un écran d'ordinateur. Étonnamment, elle a également été conçue pour tenir compte aussi bien des actions de la main que de celles de la souris.

Par exemple : Imaginez le curseur de votre souris et l'attention qu'il concentre sur le logo d'un site web donné. Vous êtes ensuite contraint de cliquer sur un appel à l'action, alors vous tournez votre attention sur le bouton en question. L'efficacité de ce mouvement d'une position à l'autre, est ce qu'essaye d'identifier la Loi de Fitts.

Fitts Law

Ceci est la formule brute :

MT = a + b * log2(D/W + 1)

MT est le temps de déplacement nécessaire pour vous déplacer entre deux points, ce que nous essayons de comprendre. Les variables a et b sont l'intersection et la pente, respectivement, qui sont généralement déterminées de manière expérimentale. D est la distance entre l'origine et la cible. W est la largeur de la cible. Tout cela dit, il est rare de voir un praticien UX utiliser cette formule sous sa forme brute, puisqu'il existe des applications plus simples qui découlent de cette formule.

L'idée fondamentale issue de la Loi de Fitts est : plus loin est une cible et plus petite sa taille, plus il est difficile pour l'utilisateur d'atterrir correctement sur cette cible. Bien sûr, quoi qu'elle doive être contrebalancée avec d'autres considérations UX, elle devrait être dans la ceinture porte-outils UX.

Prenez par exemple les barres de défilement sur Windows par rapport à celles du Mac (pré OSX Lion). Windows a la flèche qui pointe vers le haut au-dessus de la barre de défilement et la flèche qui pointe vers le bas à la base, de même avec la gauche et à droite. Ce format essaie de se pencher plus dans le modèle mental de lever les yeux pour le haut et de baisser les yeux pour le bas. Le Mac met toutefois les flèches côte à côte parce qu'en raison de la Loi de Fitts, la navigation entre elles est beaucoup plus rapide sous ce format.

osx vs windows scrollbars

Dans le monde UX, la base d'utilisateurs doit être prise en compte en permanence et la Loi de Fitts n'est pas différente. Son application correcte devient encore plus importante pour ceux qui ont une motricité limitée comme les enfants, les personnes âgées et les handicapés. Les cibles doivent être encore plus larges pour aider à la réussite de l'atteinte de la cible par l'utilisateur.

Applications de la Loi de Fitts aux ordinateurs de bureau

Taille et distance

La taille et la distance de toutes les interactions les plus courantes devraient être prises en compte lors du design de n'importe quel élément d'interface utilisateur avec lequel l'utilisateur interagit. Il existe de nombreuses directives de design différentes mais la plupart comprennent une taille de bouton minimum et la distance à respecter avec les autres éléments interactifs. Il est également important de tenir compte des éléments interactifs à risque élevé pour lesquels vous ne voulez pas une activation accidentelle par l'utilisateur. Ceux qui doivent souvent être tenus éloignés des éléments interactifs très fréquemment utilisés.

Bords

  • Coins - comme le curseur de la souris s'arrête au bord de l'écran, les coins peuvent être considérés comme ayant une largeur "infinie". L'utilisateur a besoin de beaucoup moins de précision parce qu'il peut simplement balancer la souris dans la direction d'un coin et les limites de l'écran restreignent l'endroit où s'arrête le pointeur. C'est en partie pourquoi vous voyez les boutons du menu Démarrer et du menu Apple dans les coins de votre écran.
  • Haut et bas - de manière similaire, le haut et le bas sont plus faciles d'accès en raison des limites de l'écran. Ils ne sont pas aussi faciles que les coins parce qu'ils sont seulement limités verticalement, mais permettent toujours un accès plus rapide qu'un point au milieu de l'écran. C'est la raison pour laquelle Apple place toujours les menus d'applications en haut de l'écran plutôt qu'en haut de la fenêtre d'application.

Menus

  • Menus pop-up - Les menus qui s'ouvrent à l'emplacement du curseur contribuent à réduire la distance parcourue en créant un temps de déplacement faible. Vous le voyez dans des éléments tels que les menus contextuels et les menus déroulants.
  • Menus circulaires (radiaux) - les menus pop-up circulaires créent une proximité immédiate, avec l'avantage supplémentaire que les éléments de menu sont plus proches du curseur. Alors pourquoi ne voit-on pas beaucoup de menus circulaires ? Franchement, parce qu'ils sont difficiles à concevoir et ne font pas souvent partie des bibliothèques standards d'interface utilisateur.

La Loi de Fitts et le mobile

Nous avons besoin d'examiner séparément les deux principaux types d'appareils mobiles parce que les interactions se distinguent assez pour justifier le fait d'en discuter indépendamment. Ici, nous nous référerons à la tablette comme écran de 7 pouces et au téléphone mobile comme écran de 3,5 pouces. Il est reconnu que ces dimensions ne sont pas universellement vraies sur l'ensemble de tous les appareils, elles ne sont utilisées dans cet article que pour des besoins de débat sur la taille et les mouvements de la main.

Une autre différence essentielle dans le mobile, c'est qu'il y a différentes orientations et manières de tenir les appareils. À toutes fins utiles, les souris sont toutes tenues et utilisées de la même façon. Il existe des différences dans les trackpads et autres, mais ils ne modifient pas l'interaction au regard de la Loi de Fitts de la même manière que le mobile le fait. Nous allons explorer cela dans chaque section d'appareil.

Le modèle de design utilisé avec coins et bords s'applique également aux mobiles, mais d'une manière très différente. Contrairement à l'ordinateur de bureau, vos doigts ne se limitent pas aux coins ou aux bords de l'écran. Cela ne permet plus l'application de la règle de largeur infinie. Cependant, nous allons examiner pourquoi les bords et les coins sont encore souvent utilisés sur mobile.

Zones de pouce

L'utilisation du pouce est une interaction courante sur les appareils mobiles. Il y a des moments pendant lesquels le pouce n'est pas utilisé, mais quand nous utilisons notre pouce, nous devons considérer que la formule originelle de la Loi de Fitts s'applique uniquement au sein de l'amplitude du mouvement de notre pouce. Le problème se produit lorsqu'un élément se situe en dehors de cette zone. Il exige alors un effort supplémentaire dont la Loi de Fitts ne tient pas compte et ajoute une variable supplémentaire qui augmente le temps de déplacement. Nous devons garder cela à l'esprit en examinant les effets décrits ci-dessous.

La Loi de Fitts et l'écran de 3,5 pouces

Orientation verticale

Nous allons tout d'abord étudier l'orientation verticale puisque c'est l'orientation la plus couramment utilisée pour un écran de 3,5 pouces. Bien que je ne veuille pas faire une fixation sur Apple, ils font des choses très intelligentes dans les coulisses dont la plupart des gens ne réalisent même pas qu'elles améliorent la facilité d'utilisation. L'iPhone a la taille exacte, qui permet que le pouce moyen atteigne chaque portion de l'écran. Imaginez si sur votre bureau, vous pouviez uniquement déplacer votre curseur à 3/4 du chemin vers le haut de l'écran et qu'ensuite vous ayez besoin d'attraper la souris avec votre autre main pour le (le curseur) déplacer sur le reste du trajet. Évidemment, cela jette un défaut dans la Loi de Fitts et augmente considérablement les temps de déplacement.

En tant que designer interactif Josh Clark a fait remarquer qu'il y a des raisons au positionnement de certains éléments. Les menus de l'iPhone sont placés en bas en raison de la courbure de notre pouce ainsi qu'avec le fait que notre pouce couvre déjà cette zone en raison de la manière dont nous tenons le téléphone. Le coin haut en regard de la main avec laquelle vous tenez le téléphone peut nécessiter un petit effort supplémentaire et un étirement pour beaucoup de mains. Comme indiqué plus haut, cela ajoute une variable supplémentaire dans la Loi de Fitts qui augmente le temps de déplacement. Le mouvement entre deux cibles n'est plus fluide, donc n'est plus un mouvement sans résistance.


La portée courante du pouce quand le téléphone est tenu avec la main droite.

Android utilise une tactique différente et place les menus en haut. Ce n'est pas sans raison. Les téléphones Android ont le menu de leur système d'exploitation à la base des téléphones ; ils mettent volontairement les menus écran en haut pour éviter que l'utilisateur clique accidentellement sur le mauvais bouton de menu.

Un dérivé de la ligne directrice de la Loi de Fitts consiste à placer des cibles à risque élevé (fermer, supprimer, etc.) loin des cibles très utilisées afin d'éviter l'erreur de l'utilisateur. Avec les iPhones, ceci peut parfois être réalisé en haut de l'écran. Cependant, les écrans de 3,5 pouces sont de petite taille et trouver une zone que l'utilisateur devrait toujours éviter peut être difficile. C'est la raison pour laquelle il y a des trucs comme "glisser à gauche pour supprimer" qui prennent plus de temps à accomplir, mais aident à éviter un déclenchement accidentel d'actions à risque élevé.

Orientation horizontale

Dans l'orientation horizontale, les bords gauche et droit de l'écran deviennent plus importants si nous essayons de minimiser le temps de déplacement. L'autre problème est que l'utilisateur doit souvent utiliser les deux mains dans cette orientation. Elles peuvent être utilisées simultanément, ainsi dans certains cas, nous pouvons être en mesure de réduire le temps d'utilisation en exécutant essentiellement la Loi de Fitts dans deux zones simultanées au lieu de le faire par succession. Le temps de mouvement total est le même, mais le temps de l'utilisateur est réduit.


La portée courante du pouce lorsque le smartphone est tenu en position horizontale...

Par conséquent, le milieu de l'écran devient plus difficile à atteindre, surtout l'extrême haut et bas du milieu. Encore une fois, cela nécessite un étirement supplémentaire qui à son tour ajoute une variable supplémentaire qui augmente le temps de déplacement. Ce domaine devrait être réservé aux actions qui sont rarement utilisées ou qui sont des actions à risque élevé.

La méthode maintenir et pointer

Il y a un autre état lorsque l'utilisateur maintient l'appareil d'une main et utilise l'index de l'autre main pour pointer. Dans ce mode l'étirement du doigt ne devient pas un problème. Cependant, beaucoup d'utilisateurs qui se servent de ce mode se handicapent eux-mêmes à ce doigt seulement. Ce n'est pas idéal pour des activités telles que la saisie et certains jeux.


Mode maintenir et pointer (icône de geste par gesturecons.com)

La Loi de Fitts et l'écran de 7 pouces

Orientation verticale

Dans l'article de Josh Clark "Créer pour le touch" il souligne aussi que la plupart des gens tiennent leurs tablettes par la partie supérieure de l'appareil. C'est la raison pour laquelle les deux coins supérieurs deviennent les zones les plus importantes pour placer des cibles pratiques. D'après mon expérience, j'ai vu beaucoup de gens les tenir par le bas. Cela est particulièrement vrai pour la saisie, lorsque les utilisateurs ont la division du clavier de l'iPad activée. Dans ce cas, les angles inférieurs seraient les zones les plus importantes, sauf lorsque la saisie est nécessaire.

Orientation horizontale

Les tablettes peuvent être tenues par une seule main verticalement avec une relative facilité, mais horizontalement, c'est un peu plus difficile. La grosseur peut augmenter la propension à laisser tomber l'appareil. Donc si les tablettes sont tenues dans une orientation horizontale, on a presque toujours une opération à deux mains. Il faut aussi garder à l'esprit qu'un côté possède généralement un bouton d'accueil ou de menu sur l'appareil, donc ce côté dispose d'encore moins d'espace pour que le pouce puisse fonctionner sur l'écran.

Le mode "connection"

Tout ce qui précède dépend directement de la manière dont sont tenues les tablettes, mais à cause de la taille et du volume de la tablette, elle est souvent en mode "connectée". Cela ne veut ne pas dire qu'elle est branché, mais qu'elle est souvent placée sur nos genoux, des bureaux ou des tables. Le nouvel étui de l'iPad se replie pour créer un petit stand qui rend cela encore plus vrai. Cela permet de pointer du doigt plus sur la tablette que sur le smartphone. Donc le design n'est pas tellement limité aux zones de pouce et étend l'équation de notre Loi de Fitts originelle à la zone entière de contact.

Commutation transparente

Il ne faut pas oublier que changer les modes et les orientations arrive souvent aux utilisateurs. Les utilisateurs vont changer de mode sans même y penser, allant vers le plus pratique pour la tâche qu'ils ont sous la main. Maintenant, il y a un temps de retard pour passer de l'orientation verticale à l'horizontale, ce qui fait que ce basculement n'est pas tout à fait aussi transparent. Le fait demeure que nous avons certainement besoin de créer avec les points ci-dessus à l'esprit, mais ce n'est pas comme si les utilisateurs sont verrouillés dans un mode particulier ou sur une orientation précise. Nous devons être instruits sur le mode et l'orientation qu'utilisera probablement l'utilisateur au cours d'une activité/action donnée et concevoir avec cela à l'esprit.

Conclusion

L'orientation et la manière dont l'appareil est tenu ou stationné deviennent extrêmement importants dans nos designs. La Loi de Fitts peut être affectée de diverses manières et afin de créer pour une UX optimale, il est important de savoir comment. La Loi de Fitts n'est certainement pas la seule, ou la considération du design la plus importante, mais elle est presque toujours un bon point de départ. Il y a certains défis qui nous attendent sur mobile auxquels nous ne faisons pas face avec l'ordinateur de bureau. Avec le mobile croissant aussi vite qu'il le fait, ces considérations devraient être une arme standard dans le répertoire UX.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.