DÉFINITION THÉORIE DE LA GESTALT OU LOIS DE LA GESTALT
La théorie de la Gestalt (« forme » en allemand) postule que le tout est différent de ses parties. Ces « lois de la Gestalt » ont donc une incidence majeure sur notre perception visuelle, elles soulignent la manière dont nous percevons les formes et leur attribuons un sens.
UNE PSYCHOLOGIE DE LA FORME
La « psychologie de la forme » a été proposée initialement en 1890 par un psychologue autrichien, Christian von Ehrenfels dans son article «über Gestaltqualitäten ». La théorie de la Gestalt a ensuite été fondée en 1910 en réaction au behaviorisme qui réglait alors, par trois psychologues : M. Wertheimer, K. Koffka et W. Köhler.
LA THÉORIE DE LA GESTALT ET LA PERCEPTION VISUELLE : L’ÉMERGENCE
Selon la « théorie de la Gestalt » notre cerveau va essayer de donner un sens à des formes qui n’en ont pas initialement. Quelques exemples :
LA THÉORIE DE LA GESTALT ET SES LOIS DANS LA CONCEPTION D’INTERFACES
Dans la conception d’interfaces, la théorie de la Gestalt et les lois qui en découlent vont concerner la perception visuelle de l’utilisateur lorsqu’il utilise l’interface. Ces lois permettent de guider les concepteurs d’interfaces pour prendre en compte la psychologie visuelle des utilisateurs.
Voici quelques principes de conception d’interfaces déduits de l’application des lois de la Gestalt. Une analyse poussée nous mènerait très loin. Chacun peut la faire en reprenant chaque loi et identifier ses implications en termes d’expérience utilisateur :
- Selon la loi de proximité: les éléments les plus proches vont être perçus comme appartenant à un même groupe.
- Selon la loi de similarité : les éléments ayant le plus de similarités graphiques vont induire un sens identique, des fonctions similaires ou une importance commune.
- Selon la loi de continuité : plus la proximité des éléments visuels est importante, plus nous les voyons dans la continuité comme s’ils ne formaient plus qu’une partie unique.
DÉFINITION DE LA LOI DE FITTS, SON RÔLE DANS L’EXPÉRIENCE UTILISATEUR (UX)
La loi de Fitts permet d’évaluer le temps de pointage nécessaire pour un utilisateur. Cette durée varie selon la taille de l’élément à pointer ainsi que sa distance.
UNE LOI FONDAMENTALE DE L’EXPÉRIENCE UTILISATEUR (UX)
Cette loi met en évidence une relation entre la vitesse et la précision rapportée au pointage. En effet, les éléments les plus petits ou les plus éloignés, demandent forcément davantage de temps pour être atteints. Cette loi fondamentale a de grandes implications dans l’expérience utilisateur (UX) et le design d’interface.
LOI DE FITTS, UNE LOI MATHÉMATIQUE PRÉDICTIVE
Cette loi porte le nom de son inventeur : Paul Fitts, psychologue de l’Université d’État de l’Ohio. Pour modéliser de manière mathématique, le mouvement humain, il invente cette loi dont voici le principe :
- Le temps nécessaire pour aller rapidement d’une position de départ à une zone finale de destination dépend de la taille et de la distance de la cible
- T = k log2(D/S + 0.5), avec un facteur dépendant de la personne (~ 100 msec), D la distance de la cible et S la surface de la cible.
Expérience de fitts en 1954 – Pointage-1D
Créée en 1954, cette loi peut prédire le temps passé à se déplacer et sélectionner un élément cible. Alors qu’elle fut développée pour modéliser mathématiquement et physiquement le mouvement humain, elle est encore utilisée aujourd’hui avec profit dans le domaine des interactions hommes-machines (IHM). Avec l’avènement des interfaces graphiques, la loi prend tout son sens.
LOIS ET PRINCIPES PSYCHOMOTEURS, MODÉLISATION PRÉDICTIVE
Les plus courageux ou les plus scientifiques trouveront intérêt à parcourir ces quelques slides très complètes sur la loi de Fitts. Bien que certaines illustrations datent un peu, cette présentation est très aboutie.
LA LOI DE FITTS ET SON USAGE DANS L’EXPÉRIENCE UTILISATEUR (UX)
Appliquée à la conception d’interface interactive, la loi de Fitts permet d’avoir une règle à prendre en compte lors de l’organisation de l’interface : un élément cible de petite taille sera moins accessible et nécessitera un temps plus important pour être pointé.
A l’inverse, un objet cible de grande taille et proche de l’utilisateur sera rapide à pointer
L’emplacement et la taille révèlent la priorité que l’on attribue aux fonctionnalités d’une interface : les fonctions les plus importantes et les plus fréquentes seront donc préférentiellement représentés par des cibles plus grosses et plus proches de l’utilisateur.
LA LOI DE FITTS RÉVÈLE LA “ZONE DE CONFORT” DES INTERFACES GRAPHIQUES
A partir de la loi de Fitts, on comprend mieux pourquoi il existe une zone de confort dans l’usage des interfaces graphiques, desktop et mobiles, tactiles ou non.
Les différents appareils avec des tailles d’écran variables ont une incidence sur la “zone de confort”
La zone de confort est l’espace de l’écran le plus aisément atteignable par l’utilisateur, selon l’appareil utilisé et selon son utilisation.
A titre d’exemple, la prise en main des appareils mobiles joue un rôle majeur dans la perception de cette zone de confort pour l’utilisateur, qu’il tienne son écran en mode portrait ou paysage, qu’il soit droitier ou gaucher, et même qu’il utilise tel ou tel modèle d’appareil etc.
Proportion des consultations de téléphones mobiles en mode paysage ou portait : le mode vertical (portrait) domine nettement.
Répartition de la saisie du téléphone mobile : la tenue avec la main droite domine nettement les autres prises en main
LA ZONE DE CONFORT INDIQUE L’EMPLACEMENT SOUHAITABLE DE LA NAVIGATION
Nous rappelons l’impératif de prendre en compte ces zones de confort. En particulier la conception responsive design pour optimiser la navigation sur les appareils mobiles et tactiles.
La prise en main de l’appareil mobile est une donnée à prendre en compte dans le design des interfaces. Cette tenue du Smartphone par exemple, induit des zones de confort particulières.
En ce qui concerne les interfaces sur écran fixe (desktop), parcourues le plus souvent avec une souris, les zones de confort théoriques se situent aux 4 coins de l’écran (car la souris se “bloque” par elle même dans les coins quand on la “lance”) et aux abord du curseur lui-même. Mais tout dépend des systèmes de pointage utilisés. D’ailleurs, qu’en est-il des bornes interactives ? Un sujet à aborder prochainement…
Où l’on voit que les zones les plus facilement atteignables sont aux 4 coins de l’écran et aux abord du curseur, situé au centre sur l’image
En ce qui concerne les interfaces mobiles, les zones de confort sont différentes selon le format de l’écran et son mode d’affichage.
On voit qu’en mode paysage, ce sont les zones latérales de l’interface que l’utilisateur atteindra le plus facilement.
En mode portrait, pour un téléphone, ce sera le coin inférieur gauche qui représentera la zone de confort pour un droitier.
Pour une tablette tactile ce sont les coins inférieurs droits et supérieurs gauche.
CONCLUSION
La loi de Fitts est empreint d’une certaine universalité et se vérifie bien au delà des interfaces. Cependant ce sont les concepteurs d’interfaces qui l’appliquent au quotidien et doivent en tirer profit… avec discernement. Cette “loi” n’est pas la seule à prendre en compte lors de la conception : c’est un aspect auquel il faut être sensible mais il ne faut pas orienter toute la conception autour de cette seule règle. L’expérience utilisateur globale de la solution risque d’être dégradée car l’utilisateur ne cherche pas forcément à réaliser ses actions le plus vite possible !
QU’EST-CE QUE L’AFFORDANCE ?
L’affordance est la capacité d’un objet ou d’un système à évoquer son utilisation, sa fonction.
Par définition, l’affordance provoque une interaction spontanée entre un environnement et son utilisateur. En ergonomie, elle permet de rendre l’utilisation d’un objet ou d’un service « intuitive ». Pour améliorer l’interface utilisateur (UI) et l’expérience utilisateur (UX), les affordances sont donc essentielles dans le design des interfaces et des services.
UNE DÉFINITION DE L’AFFORDANCE
Le terme affordance est un néologisme formé à partir du verbe anglais « to afford ». Plusieurs traductions sont possibles : « s’offrir quelque chose» , « avoir les moyens de faire quelque chose» , ou « fournir l’opportunité de / offrir » (un service, notamment). En quelque sorte, l’affordance offre à l’utilisateur les moyens de se servir d’un objet, y compris et si possible sans mode d’emploi.
Les affordances sont donc des appels à l’action, au sens large. Tirer, pousser, appuyer, tapoter, cliquer, effleurer, porter sont autant de moyen d’interagir avec un objet ou une interface. Par exemple, la poignée d’une porte incite l’individu à appuyer dessus pour ouvrir la porte, la forme de la chaise lui suggère de s’asseoir dessus. L’affordance s’applique donc dans différents domaines : la psychologie de la perception, la psychologie cognitive, l’intelligence artificielle, l’Interaction Homme Machine (IHM), le design etc. et bien évidemment dans le « design des objets quotidiens » pour reprendre l’expression de Donald Norman.
L’”AFFORDANCE RÉELLE” SELON JAMES J. GIBSON
Le mot « affordance » apparaît pour la première fois en 1977, sous la plume du psychologue James Jerome Gibson. Ses travaux de psychologie écologique portaient alors sur la perception. L’affordance, dans son ouvrage « The Theory of Affordances », n’est pas une réponse aux besoins d’un individu. Il s’agit de relations naturelles entre tel sujet et le monde qui l’entoure. Contrairement à une interprétation cognitiviste de la perception visuelle, Gibson ne fait pas intervenir une représentation mentale intermédiaire. «Je ne perçois pas le monde extérieur, je suis en permanence en train de construire le monde». Lorsque je perçois une chaise, le reconnais son usage car j’ai connu de nombreuses chaises dans le passé.
DES OBJETS PRÉSENTANT DES AFFORDANCES
D’ailleurs, les affordances existent de manière indépendante. Que l’homme souhaite ou non s’asseoir sur une chaise, l’objet présente des affordances, il se prête à cette action humaine. Mais un serpent choisira plutôt de s’enrouler autour de la chaise. Quant à un éléphant, on se demande ce qu’il fera de la chaise… Les actions suggérées par l’objet dépendent donc des caractéristiques du sujet, de l’environnement dans lequel il s’inscrit et du contexte. Ainsi, pour le petit animal chassé par un prédateur, un buisson est un endroit où se cacher. Pour un animal très grand, c’est un obstacle à franchir pour fuir le prédateur.
L’”AFFORDANCE PERCEPTIBLE, TROMPEUSE OU DISSIMULÉE” : COMMENT NORMAN MET L’ACCENT SUR LE RÔLE DE LA PERCEPTION
Exemple d’affordance
C’est en Islande qu’ont été testés ces passages piétons suggérant un relief pour faire ralentir les véhicules sans avoir à rehausser la chaussée à l’aide d’un ralentisseur dit aussi dos-d’âne (expression très explicite !).
Dans un système informatique par exemple, le rôle des affordances s’étend à tout ce qui annonce la possibilité d’une action signifiante. Sur la page d’un site Internet, une phrase est généralement soulignée pour signaler la présence d’un lien hypertexte. L’utilisateur comprend immédiatement qu’en cliquant sur cette phrase, le lien va l’amener vers telle autre page, et c’est le cas en général. Il y a simultanément affordance perçue et réelle. Mais imaginons qu’il ne remarque pas le lien existant, par manque d’habitude des “codes du Web”, ignorant qu’un lien hypertexte est généralement souligné.
L’affordance resterait réelle (le lien est bien présent) mais non perçue par cet internaute néophyte. Dans le cas inverse, si le concepteur (c’est lui le néophyte, dans ce cas !) souligne une phrase qu’il veut mettre en exergue, l’utilisateur peut penser qu’il s’agit d’un lien et essayer de cliquer sans succès, ce qui va assurément déboucher sur une mauvaise expérience ! Il s’agit alors d’une affordance trompeuse ou fantôme.
LA PERCEPTION DE L’UTILISATEUR
Dans l’idéal, l’utilisateur doit voir très simplement l’action qu’il est possible d’exécuter et cette action doit être rendue possible, mieux, incitée par l’objet lui-même. C’est tout le principe d’une bonne gestion de l’affordance. On voit là toute l’importance de la perception de l’utilisateur dans ce qui “fait affordance”.
DISCERNER LES AFFORDANCES ET LES CONTRAINTES QUI “STRUCTURENT” NOTRE PERCEPTION
Le décryptage d’un objet/système/élément/espace virtuel/logiciel (etc.) se fait aussi en fonction de certaines contraintes :
- Des contraintes physiques liées aux éléments visibles.
- Des contraintes sémantiques fondées sur nos connaissances.
- Des contraintes culturelles basées sur des conventions sociales et des codes.
- Des contraintes logiques (Natural Mapping).
À partir de ces contraintes et des affordances, l’utilisateur a une conception personnelle de l’objet et de son utilisation potentielle. La perception des affordances et leur interprétation peuvent donc différer selon l’individu, son expérience, ses modèles mentaux, et ses apprentissages antérieurs.
Cependant, si l’approche de Norman est d’abord internaliste – le sujet détermine le sens de l’objet – le designer peut apporter des affordances perçues pour guider l’utilisateur (CF, le Guidage dans les Critères ergonomiques de Bastien et Scapin).
« Un bon designer s’assure que les actions appropriées sont perceptibles et que celles inappropriées sont invisibles. »
Donald Norman
A QUOI SERT L’AFFORDANCE EN UX DESIGN ?
L’objectif de l’UX designer est de procurer la meilleure expérience possible à l’utilisateur, d’où l’intérêt de l’affordance en UX design. Le design graphique ne commence qu’après avoir analysé les attentes et besoins de l’utilisateur. À partir de ces données, le designer va créer le style adéquat et donner une importance plus ou moins grande aux éléments de l’interface. Qu’il s’agisse d’une application, d’un logiciel ou d’un site Internet, l’utilisateur veut accéder facilement et rapidement au contenu ou à la fonctionnalité. Il s’agit de l’y aider pour lui procurer une expérience positive et agréable du produit ou service.
LE RÔLE DES ÉTUDES POUR L’UX DESIGNER
Dans un article intitulé « Banner Blindness : Old and New Findings », Jakob Nielsen montrait qu’un internaute habitué à naviguer sur le web avait acquis différents réflexes et comportements inconscients. Il perçoit des affordances pertinentes devenues, pour lui, autant d’indices et de stimuli qu’il reconnaît. Un utilisateur inexpérimenté aura beaucoup plus de difficultés à se diriger sur la page. On le comprend, selon le principe de l’affordance perçue chère à Norman, charge au designer de concevoir les affordances les plus explicites pour l’utilisateur cible. D’où l’importance fondamentale de la définition des personas, de l’étude terrain ou étude ethnographique, mais aussi des tests utilisateurs qui vont mettre en lumière les véritables usages du produit ou du service par les utilisateurs cibles. On le sait, l’affordance émerge parfois par un détournement de l’usage initial !
En conception UX, l’affordance perçue doit attirer l’attention de l’utilisateur et suggérer sa fonction. Le designer peut faire appel aux sens de l’utilisateur (la vue, le son, le toucher…). Concrètement, dans une interface digitale, les dispositifs invitant à l’action – favorisant l’affordance – pourront être :
- Des « objets physiques » sous forme de boutons call to action, avec la taille, les contrastes, les textures ou reliefs utiles pour inciter l’utilisateur à cliquer.
- Des messages textuels/linguistiques pour insister sur l’action à effectuer.
- Des éléments de Menu, flèches, loupes… ce que les anglo-saxons appellent « Pattern affordances ».
- Des symboles/icônes métaphoriques : l’enveloppe pour envoyer un mail, le bouton menant à une page Facebook….
- Des images/photos/illustration, selon la fonction du site (e-commerce, banque d’images…).
- et d’autres encore à expérimenter
BOUTONS D’ACTION OU CALL TO ACTION : L’AFFORDANCE PAR EXCELLENCE !
Le call to action, comme expliqué dans un précédent article sur l’ergonomie des “boutons d’action”, est un outil stratégique. C’est grâce à ce bouton que l’internaute va faire une demande de devis, contacter l’entreprise, s’inscrire, télécharger un document ou une application etc. Il est donc indispensable de renforcer son affordance. Choisir un verbe d’action, utiliser une couleur adaptée, ajouter un élément graphique, créer un effet de relief… Ce sont autant de moyens par lesquels elle sert le call to action.
Exemple d’affordance : le libellé « Start using it now ! » invite à utiliser l’offre proposée
Attention toutefois à ne pas tomber dans l’excès. Mettre des boutons et des injonctions à cliquer partout est le meilleur moyen de perdre l’internaute/le client et, par la même occasion, l’affordance souhaitée. Au contraire, plus le bouton appelle à l’action, plus l’affordance perçue doit être forte comparé au reste de la page. L’affordance joue bien évidemment un rôle central dans l’augmentation du taux de conversion d’un site web ou d’une application.
L’excès ou l’abus d’appels à l’action mène à de très mauvais taux de clics et une dilution de l’attention de l’utilisateur
L’AFFORDANCE EST-ELLE COMPATIBLE AVEC L’INNOVATION ?
Drôle de question ? Et pourtant, si l’affordance est la capacité d’un objet ou d’un système à évoquer son utilisation, il faut bien comprendre qu’une partie de ce principe exploite nos habitudes ou notre culture. Ce sont les “contraintes”, évoquées plus haut, dans le monde physique par exemple, transposées dans le monde digital (skeuomorphisme). Ce sont aussi des “codes”, sédimentés avec le temps (culture), tel que le soulignement d’un lien Web, que chacun identifie facilement, même s’il n’a aucun substrat dans le monde physique (voir plus haut le commentaire de Jakob Nielsen).
Si l’on accepte cet argument, force est de constater qu’une innovation trop radicale dans les usages, sans même parler d’innovation de rupture, peut se heurter à la difficulté d’appropriation par certains utilisateurs, déstabilisés par de nouveaux “mécanismes d’affordance” jusque-là inconnus. Combien d’applications, de produits ou services innovants n’ont jamais rencontré le succès attendu. Les utilisateurs s’en sont détournés en raison d’un fossé trop grand entre les usages antérieurs et le “saut” que constitue l’innovation en question !
L’assistant personnel numérique lancé en 1993 par Apple sous le nom de Newton en est un bel exemple. Le Newton d’Apple a dû être retiré du marché en 1998 après avoir souffert de vives critiques et railleries. Il est pourtant réapparu en 2007 dans une version nettement améliorée sous le nom qui a connu le succès que l’on sait : l’iPhone !
« Apple a su associer design soigné et marketing efficace avec des technologies émergentes (fourniture de contenus, d’applications, etc.) pour revenir sur un marché qu’il a créé de toutes pièces » Norbert Hillaire.
Construire sa propre affordance
Un produit trop innovant par son utilisation peut donc difficilement trouver sa cible s’il ne parvient pas à “construire sa propre affordance”. L’enjeu, lors du lancement d’un service ou produit innovant, consiste donc à innover tout en coïncidant avec les attentes, présentes ou à venir, des utilisateurs. C’est un équilibre délicat consistant à s’appuyer sur des usages ancrés d’une part, et d’autre part la création d’un effet de “rupture” qui ouvre sur de nouveaux usages, nouvelles pratiques qui vont séduire les utilisateurs. Ce nouveau corpus de comportements deviendra parfois à son tour une nouvelle référence de l’affordance perçue ! C’est toute la difficulté d’une “innovation dans les usages” ou d’une “innovation des usages” d’un produit.
AFFORDANCE ET CULTURE
L’affordance a fort à voir avec la “culture” comme le montre très bien cette présentation. Le produit joue un rôle social essentiel dans nos vies. Il n’est pas étonnant que son acceptation consiste en une dimension culturelle très marquée, au point parfois de devenir “critique” (slide 41 et suivantes)
LE DESIGN ÉMOTIONNEL POUR RENFORCER L’AFFORDANCE !
Une “bonne affordance” consiste à permettre à l’utilisateur de comprendre l’intérêt du produit et la manière d’en exploiter les possibilités. Pour autant, dans de nombreux cas, il est recommandé d’aller plus loin que la simple compréhension des possibilités d’un produit. Ne jamais oublier que les émotions de l’utilisateur jouent un rôle essentiel dans le processus cognitif, mais aussi d’attachement ou de rejet à un produit. C’est tout l’enjeu du design émotionnel.
Ça va tout de suite mieux après envoi si tout s’est bien passé !
Le design émotionnel a été intégré par étape dans la Timeline de Mailchimp
Lors de l’interaction avec un produit/une interface, ressentir du plaisir, de l’excitation ou de la satisfaction donne envie de l’explorer et d’y revenir. Il y a donc deux éléments indissociables à prendre en compte dans le principe de l’affordance : l’utilisabilité et la perception de l’utilisateur (émotions, ressenti, éveil des sens…) . Il reste ensuite à savoir quel design choisir pour maximiser l’affordance. Le Design émotionnel peut être une piste à explorer dans le cas d’un produit très innovant. L’émotion est un puissant facteur d’adhésion si le design a été pensé en ce sens… et correctement testé !
AFFORDANCE VERSUS SKEUOMORPHISME, FLAT DESIGN, MATERIAL DESIGN…ET APRÈS ?
Le skeuomorphisme
Le kiosque – Delicious library (Apple), dans le plus pur style skeuomorphisme !
Le principe du skeuomorphisme est aussi simple qu’ingénieux. Cette technique de design consiste à imiter artificiellement un objet réel pour faire comprendre à l’utilisateur son fonctionnement et utilité. Sur le marché de la téléphonie mobile, le design d’Apple a été un exemple parfait de skeuomorphisme. L’application kiosque, par exemple, le portail pour la presse, se présentait sous la forme d’une bibliothèque réelle et traditionnelle. Le design skeuomorphique présente deux avantages majeurs : donner du sens (faire comprendre la fonction de l’objet, le rendre donc affordant) et émouvoir. En effet, ce type de design est chaleureux et peut même avoir un aspect “madeleine de Proust”. Le designer joue avec les références culturelles et les souvenirs des utilisateurs grâce aux reliefs et aux textures.
Le flat Design
Le flat Design avec l’interface Metro de Windows 8
Cependant, à partir de la version IOS 7, les designers d’Apple ont succombé au flat design, initié par Microsoft 8 et son interface « Metro ». Cette récente “école de design” est vue par de nombreux professionnels, comme une tendance graphique majeure, jusqu’à dire qu’elle a succédé au skeuomorphisme. Le flat design (design plat en français) se caractérise par une iconographie minimaliste, destinée à donner un maximum de sens avec un minimum d’éléments. Les signifiants sont donc moins explicites.
L’avènement du flat design a souvent été présenté de la manière suivante : si, autrefois, le public avait besoin de repères en raison de sa méconnaissance du monde digital, les générations actuelles en connaissent les codes. Le minimalisme pourrait donc renforcer l’utilisabilité. Reste qu’un tel minimalisme a pu rencontrer certaines limites pour obtenir un affordance suffisamment claire pour tous les utilisateurs, ce que ses détracteurs n’ont pas manqué de souligner !
Skeuomorphisme de l’interface iOS 6 contre flat design de l’interface iOS 7
Pour schématiser, nous avons d’un côté le réalisme et l’émotion, de l’autre la simplicité et la rapidité, avec un soupçon de “modernité” (argument contestable et réversible !) attachée au minimalisme.
Le flat design et le skeuomorphisme seront définis en détails dans un prochain article. Cependant, si le sujet vous intéresse, nous vous recommandons la lecture de cette thèse de Jules Montjarret intitulée Entre affordance et design, la métaphore visuelle dans les interfaces mobiles. À travers une analyse détaillée et limpide des OS, l’auteur montre les atouts et les limites de ces écoles. En conclusion, J. Montjarret propose la création d’un « skeuominimalisme » (skeuominimalism en version originale, un néologisme créé par Edward Sanchez, designer chez Amazon).
LE MATERIAL DESIGN
Exemple d’une interface en Material design, le Design selon Google
Une troisième école, initiée par Google, s’est inspirée du flat design tout en essayant de lui donner un aspect plus vivant : le material design. Grâce aux effets de parallaxe, le designer donne une illusion de profondeur, de perspective et de mouvement. Par ailleurs, de plus en plus, des vidéos et des animations sont intégrées dans l’interface pour l’humaniser et insuffler de la réalité. Il s’agit de rappeler le monde réel à l’utilisateur, dans ce qu’il peut avoir de beau, d’émouvant et de bienveillant.
Y aurait-il là une forme de “skeuominimalisme” ? En tout cas, le skeuomorphisme semble avoir été abandonné au profit du flat design. On peut alors se demander si le design y a gagné en affordance.
AFFORDANCE ET FLAT DESIGN, UNE COEXISTENCE DIFFICILE ?
Dans l’ensemble, le skeuomorphisme a prouvé son efficacité, surtout pour des personnes peu familières du monde digital. D’ailleurs, les produits Apple ont eu beaucoup de succès auprès des personnes assez âgées pour reconnaître les objets réels dont les artefacts s’inspiraient. Mais il paraît aujourd’hui souvent dépassé car ancré à la référence au monde physique.
Le flat design étant plus conceptuel et métaphorique, semble plus en phase avec les interfaces dématérialisées, mais il peut paraître moins “intuitif”, avec une affordance a priori limitée si l’UX n’a pas été pensée dans la globalité. Le problème de l’affordance se pose, par exemple, pour les designs de boutons plats dans les formulaires, « interprétés comme les visuels de bannière ».
Exemple de manque d’affordance : un formulaire dont les champs sont assez peu distincts
Autre exemple intéressant, le comparatif entre l’interface de déverrouillage IOS 6 et IOS 7.
Exemple de manque d’affordance.
Le mouvement est exactement le même pour l’utilisateur. Néanmoins, dans le premier cas, le bouton fléché et le contraste rendaient le geste intuitif, y compris pour un enfant. Dans la version la plus récente, il faut posséder déjà quelques connaissances pour déverrouiller le téléphone. Le design de l’IOS 7 a d’ailleurs fait un certain nombre de mécontents parmi les anciens utilisateurs de l’IOS 6. En général, si un reproche est régulièrement fait au design plat, c’est bien le manque d’affordance.
AFFORDANCE ET ICÔNES : QUELQUES EXEMPLES
Aussi paradoxal que cela puisse paraître, dans sa thèse précédemment citée, J. Montjarret relate une étude menée à partir des icônes de smartphone, utilisées respectivement dans le flat design et le skeuomorphisme. Un large panel d’utilisateurs doit deviner la signification de l’icône et sa fonctionnalité. Ils expliquent aussi pourquoi l’icône leur suggère telle ou telle utilisation. Des calculs permettent ensuite d’établir le degré d’affordance de l’icône par rapport à sa fonctionnalité réelle.
Le résultat d’une enquête menée par J. Montjarret dans sa thèse “Entre affordance et design, la métaphore visuelle dans les interfaces mobiles” donne un avantage au flat design sur le Skeuomorphisme en termes d’affordance.
Le score d’affordance est de 0,78 pour IOS 6 et de 0,93 pour Windows Phone. Autrement dit, en matière d’affordance des icônes, le flat design l’emporte dans ce test ! Or l’icône est un des éléments les plus porteurs de sens dans une interface. Idéalement, l’icône doit avoir un pouvoir de suggestion universel, être un archétype.
Atteindre cette affordance maximale est nécessairement difficile compte tenu de nos différences. Mais intuitivement, cet objectif paraît plus accessible avec un design skeuomorphique. Or l’étude montre le contraire. Ce qui prouve, à défaut d’en généraliser les conclusions, qu’il faut faire des tests utilisateurs et ne pas se fier aux a priori !
Comparaison des icônes iOS 7 et iOS 6
En fait, peut-être est-ce un problème de générations et de société. Actuellement, de nombreux enfants touchent un bouton virtuel avant même d’actionner un bouton réel. D’un point de vue cognitif, leur apprentissage n’est plus le même qu’autrefois. De plus, la démocratisation d’Internet a lissé les codes et les usages. Il serait donc désormais possible de prétendre à autant, voire à davantage d’universalité et d’affordance avec une icône minimaliste et un design plat. Cette hypothèse est du moins celle des défenseurs de cet type de design.
CONCLUSION
Lorsqu’un utilisateur découvre un objet, un produit, un site web, un logiciel ou une interface digitale pour la première fois, l’affordance lui permet de déterminer sa fonction. La notion d’affordance de Gibson désigne la possibilité d’action qu’un objet (ou un environnement) offre à l’être vivant (humain ou animal). En design, elle est une invitation à agir de manière appropriée. Cependant, comme le souligne Donald Norman, cette affordance réelle pourra être une affordance perçue par tel utilisateur, et incomprise de tel autre. Les affordances perçues n’existent qu’en fonction de l’utilisateur et de son interprétation.
L’affordance est un concept fascinant, complexe, et indispensable pour concevoir un produit centré sur l’utilisateur. C’est aussi un vrai défi pour un UX Designer. Il lui faut valoriser l’utilisabilité du produit et optimiser l’expérience utilisateur, dans une société où tout est très rapide. Les techniques de design ont toutes pour but de proposer une utilisabilité et une affordance maximale à l’utilisateur, qu’il s’agisse du skeuomorphisme, du flat design, du material design… ou de la prochaine tendance à venir.
DÉFINITION DE LA LOI DE HICK (OU LOI DE HICK-HYMAN)
La loi de Hick sert à déterminer le temps moyen et nécessaire pour un utilisateur à effectuer un choix en fonction du nombre de possibilités qui lui sont offertes. Autrement dit :
“Plus l’utilisateur à de choix, plus il prendra de temps à se décider”
UNE LOI MATHÉMATIQUE
Utilisée pour évaluer l’utilisabilité des interfaces, cette loi établit une relation de cause à effet entre le temps de réaction d’un utilisateur et ses possibilités de choix. Le temps augmente en fonction du nombre de choix disponibles.
Sa formule s’écrit ainsi :
Le temps pour faire un choix augmente de manière logarithmique en fonction du nombre de choix possibles.
D’un point de vue pratique, on peut en déduire que moins l’utilisateur a de choix, plus il se décidera rapidement.
Avec la loi de Hick, on voit bien qu’il vaut mieux proposer un nombre de choix restreints afin d’obtenir de l’utilisateur un temps de réaction très court.
DES DÉCISIONS RAPIDES POUR DES TÂCHES EN NOMBRE LIMITÉES
La loi de Hick convient davantage aux tâches telles que :
-
- La recherche d’information
- La lecture d’information
- La résolution de problèmes
Toutes ces tâches nécessitent forcément un laps de temps pour être traitées et mettent en jeu plusieurs stimuli à la fois. La lecture par exemple nécessite un certain niveau de concentration et relève de divers processus cognitifs. La loi de Hick a donc pour conséquence sur l’expérience utilisateur de minimiser le nombre d’options impliquées dans une décision afin de réduire le temps de réponse et minimiser les erreurs.
Le rasoir d’Ockham
Le principe du rasoir d’Ockham affirme que si le choix est possible entre des designs fonctionnellement équivalents, le design le plus simple devrait être sélectionné.
Différentes variations de ce principe existent, chacune est adaptée pour prendre en compte les particularités du domaine ou de la connaissance.
Quelques exemples :
- « Une pluralité ne doit pas être posée sans nécessité » – Guillaume d’Ockham
- « la nature ne fait rien en vain ni de superflu » – Aristote
- « On devrait tout rendre aussi simple que possible, mais pas plus. » – Albert Einstein
L’idée implicite est que les éléments non nécessaires diminuent l’efficacité du design et augmentent les probabilités de situations non prévues. Des lourdeurs non nécessaires que ce soit physiques, visuelles ou cognitives dégradent les performances. De plus des éléments de design non nécessaires ont la possibilités de créer des problèmes. Il y a aussi une esthétique de principe qui associe la « coupe » d’éléments non nécessaires à l’élimination des impuretés d’une solution : le design a un résultat plus propre et plus pur.
Il faut utiliser le principe du rasoir d’Ockham pour évaluer et sélectionner parmi plusieurs designs fonctionnels équivalents. L’équivalence fonctionnelle se réfère ici à des performances comparables d’un design sur des mesures communes. Par exemple, étant donnés deux affichages fonctionnellement équivalents (égaux en contenus et lisibilité), il faut sélectionner l’affichage avec le moins d’éléments visuels.
La page de recherche de Google est un excellent exemple de l’application de ce principe comparé à la concurrence.
Pour faire simple après toutes ces règles…
L’interaction au sein d’une interface utilisateur joue un rôle primordial dans l’utilisation d’un site web. Des interactions claires et précises permettent à l’utilisateur de se concentrer sur les éléments essentiels de la navigation. Découvrons ensemble quelles sont les principales règles d’interaction à respecter pour proposer une bonne expérience utilisateur.
1. L’Affordance
L’affordance est la capacité d’un objet ou d’un système à évoquer son utilisation et sa fonction. Dans un site web, son rôle est d’informer l’utilisateur qu’une action doit être possible. Par exemple, le fait de souligner un texte est en général synonyme que ce texte est un lien cliquable. Il est donc important d’énoncer à l’utilisateur les différentes actions qu’il lui est possible de réaliser sur une page.
L’une des bonnes pratiques quand on décide d’utiliser des icônes est d’ajouter un texte sous celles-ci afin que l’utilisateur comprenne clairement les actions possibles.
2. Le Feedback
Tout aussi important que l’affordance, le feedback permet de fournir un retour sur l’action qui vient d’être effectuée par l’utilisateur.
Pour cela, il est nécessaire d’informer l’utilisateur en lui indiquant l’état du système suite aux déroulements de ses actions. Il convient d’indiquer – avec des termes simples et compréhensibles par tous – la tâche en cours. Par exemple : chargement en cours, recherche, téléchargement, etc.
Les feedbacks successifs de ce drag & drop nous permettent de suivre les différentes étapes du téléchargement d’un fichier.
3. Les Limites
Le fait de limiter les actions de l’internaute permet de simplifier son parcours en lui proposant un chemin à suivre et ainsi éviter toute surcharge d’informations inutiles.
Ainsi, seules les actions les plus pertinentes seront présentes sur la page. On peut décider de mettre en avant certaines actions en utilisant la taille, la proportion et l’emphase sur différents éléments. Cela permet de créer une hiérarchie et influencer les utilisateurs.
La page d’accueil du site Foursquare est un bon exemple pour illustrer cette idée. Elle permet à l’utilisateur de se focaliser sur l’action qu’il souhaite réaliser.
4. La cohérence et les standards
La cohérence des éléments joue un rôle important dans l’utilisation d’une application ou d’un site web. Elle permet à l’utilisateur de reconnaître des chemins (ou patterns) qui lui sont familiers et de faciliter l’usage général d’un produit.
Pour respecter au maximum la cohérence au sein d’un site web, il est nécessaire d’utiliser des composants ayant chacun des fonctions bien spécifiques. Ainsi, il est par exemple important de se limiter à un ou deux (max) type(s) de bouton afin de permettre à l’utilisateur d’en reconnaître instantanément la fonction. Il en va de même pour les autres composants d’un site web, comme les « checkboxes », « radio buttons », « sliders » ou autres « menu dropdown ».
De plus en plus de designers optent désormais pour l’usage de « design systems » qui regroupent des composants et des structures réutilisables de projet en projet. Cela permet une uniformité et un respect des standards plus importants qu’auparavant.
Il convient également de respecter les standards du web qui évoluent au fil des nouveaux usages. Grâce à des techniques telles que le « eye-tracking » on peut notamment s’apercevoir que les utilisateurs scannent généralement les pages web avec le même mouvement en « F ». On peut donc en conclure que la hiérarchie du site web doit être pensée en amont et que les contenus importants de la page doivent généralement se situer sur la partie supérieure gauche de la page.
Voici le balayage en « F » illustré avec les parties les plus regardées en rouge :
5. Le choix des mots
Lors du développement d’un site, il est nécessaire de garder à l’esprit que les utilisateurs finaux sont souvent des personnes non habituées aux jargons techniques et disposant également d’un temps limité. Il convient donc de les accompagner au mieux en utilisant un vocabulaire clair et précis.
Les messages d’interface regroupant notamment les textes des boutons d’actions, les champs de formulaires et les messages d’erreur sont d’une importance capitale pour rassurer et permettre une compréhension du service auprès de l’utilisateur.
Concernant les messages d’erreur, il est nécessaire d’être le plus exhaustif possible dans la rédaction du texte. Ainsi, pour le cas d’un numéro de téléphone mal indiqué dans un formulaire, il convient de rédiger le message d’erreur en traitant le point spécifique « Il semble que le numéro de téléphone indiqué ne soit pas complet (10 chiffres) » plutôt que de se contenter d’un message générique « Le formulaire comporte des erreurs ».
Apple gère très bien le cas d’une demande de réinitialisation de mot de passe en indiquant les différents pré-requis du formulaire.
6. Ne pas interrompre l’utilisateur
Lorsque l’utilisateur interagit avec une application ou un site web, il est important de ne pas interrompre sa navigation. Nous avons tous en tête de nombreuses fois où nous avons été dérangés par des « popups » survenus au mauvais moment. Un design et des interactions intrusives peuvent amener l’utilisateur à avoir un avis négatif à propos d’un produit, voire de ne pas revenir vers celui-ci.
Pour favoriser la navigation, il convient de limiter les distractions proposées en réduisant le nombre de choix possibles (cf: Limites). Il est aussi judicieux d’éliminer les tâches qui pourraient sembler rébarbatives. Si cela est possible, il peut être bénéfique de pré-remplir certaines informations de manière automatique. Par exemple, dans un formulaire : renseigner la ville de l’utilisateur en se basant sur sa zone géographique et son adresse IP.
Par exemple, ce genre de « popup » peut paraître intrusif et interrompt l’utilisateur dans sa navigation.
7. Fournir des sorties de secours
Il faut garder en tête qu’il est impossible de créer un site web où l’utilisateur ne fera aucune erreur. En gardant cette affirmation à l’esprit, il est primordial de permettre aux utilisateurs de pouvoir revenir en arrière sur leurs actions effectuées afin de ne pas générer de frustrations. Quand cela est possible, proposer aux utilisateurs d’annuler leurs récentes actions est un plus non négligeable.
La possibilité de mettre en pause une opération peut également être bénéfique. Par exemple : le fait de sauvegarder automatiquement le remplissage d’un formulaire lorsque celui-ci est fastidieux permet à l’utilisateur de faire des pauses ou de revenir plus tard. Aujourd’hui, avec l’avancée des différents clients mails, il est naturel pour un utilisateur de commencer la rédaction d’un message et d’espérer que ce message soit sauvegardé en tant que brouillon en cas d’interruption.
A titre d’exemple, Google Drive permet d’annuler la dernière action effectuée par l’utilisateur et de restaurer le fichier supprimé.
Conclusion
Toutes ces règles sont amenées à évoluer et ne sont pas immuables mais elles tendent à rendre l’utilisation d’un produit plus agréable à son utilisateur et ainsi permettre une meilleure adoption du produit.