Article(s) de octobre 2008 :

L’affordance

L’affordance est un terme peu connu des non spécialistes de l’ergonomie. Comme c’est une notion qui me parait importante en webdesign et ayant un lien avec le graphisme des interfaces web, j’ai décidé de lui consacrer un article.

Introduction

Pour rentrer dans le vif du sujet, voici une définition courte du mot « affordance »: l’affordance est la qualité d’un objet à suggérer son utilisation. L’ergonome, Amélie Boucher, définit l’affordance comme étant les possibilités d’action suggérées par les caractéristiques d’un objet. Ce qui signifie, dans d’autres termes, la même chose.

L’affordance est une notion importante en ergonomie car elle facilite le travail cognitif des internautes. Plus un élément est affordant, plus l’internaute peut anticiper son comportement et son utilité.

Quel rapport avec le webdesign me direz-vous ?

Sur le web, les objets sont virtuels, ils sont représentés graphiquement. Le graphiste peut donc directement intervenir sur l’affordance d’un élément web. En effet, l’apparence des objets va participer à son affordance en jouant sur différentes dimensions tel que la forme, la couleur, sa localisation dans l’interface, la présence d’éléments indiçant la présence d’un lien, sa mise en évidence pour faciliter son repérage. Il faut aussi s’intéresser au comportement de l’objet lorsqu’il est sollicité car cela participe également au renforcement de son affordance.

Graphisme et affordance

Les éléments qui ont besoin d’une affordance forte dans une interface web sont les éléments avec lesquels l’internaute va interagir. On peut donc citer: les boutons, les liens hypertextes, les menus, les éléments de formulaire et plus généralement tous ce qui est cliquable.

Lorsqu’un internaute arrive sur un site qu’il n’a jamais vu, comment sait-il ce qu’il doit faire pour répondre le plus rapidement possible au besoin qui l’a amené sur ce site ?

Tous simplement en reconnaissant, grâce à son expérience du monde réel, des indices qui l’informeront sur l’utilisation des objets présents dans l’interface.

Les facteurs qui vont permettre à l’internaute de percevoir l’affordance d’un objet sont :

– Le contexte: l’environnement dans lequel l’objet est représenté.
– La culture de l’internaute: l’influence des normes sociétales sur la compréhension de l’utilisation de l’objet.
– L’instinct: une association inconsciente entre l’objet et son utilité liée aux caractéristiques physique de l’objet.
– Le mental: la compréhension et les attentes de l’internaute sur son interaction avec l’objet.

Tous ces facteurs pourront être influencés par le traitement graphique de l’objet et c’est là que le travail du graphiste intervient.

Exemple

Prenons un exemple simple, le traitement graphique d’un formulaire de contact. Nous le représenterons par quatre champs textes « nom-prénom(obligatoire) », « e-mail (obligatoire) », « téléphone », « sujet », un champ textarea « votre texte » et un bouton « envoyer le message ».

Voici un formulaire exagérément et volontairement peu affordant:

J’ai un peu forcé le trait et il y a peu de chance que vous trouviez, dans la réalité, un formulaire de contact aussi mal conçu. Mais si j’ai dessiné un formulaire à ce point « mal foutu » c’est pour mieux mettre en évidence les changements subtiles qui peuvent améliorer l’utilisabilité.

Alors, comment améliorer l’affordance de ce formulaire par un traitement graphique ?

(Quand je parle ici de traitement graphique, je pense au dessin des éléments du formulaire mais aussi à sa mise en page et à la mise en place d’éléments qui favorisent la perception de son utilisabilité.)

Voici ma proposition graphique:

Comme vous le constatez, l’utilisabilité de ce formulaire est davantage intuitif pour l’internaute que le précédant. Énumérons les changements graphiques qui ont permis cela:

La mise en page

Pour la mise en page, j’ai utilisé une grille afin d’aligner les éléments qui constituent le formulaire. Ces alignements structurent le visuel et facilite la lecture des informations. Un formulaire est typiquement le genre d’interface qui nécessite un peu de rigueur dans sa présentation pour favoriser son utilisabilité. En travaillant à partir d’une grille, j’applique le principe de continuité de la théorie de la Gestalt. Comme vous le verrez plus loin, d’autres principes de cette théorie seront appliqués dans le design de ce formulaire.

Les formes

Certains éléments sont traités, graphiquement, de manière similaire. Cela permet d’établir un lien entre ces éléments pour indiquer à l’internaute que les objets qui se ressemblent ont probablement une fonction similaire où une importance hiérarchique équivalente. Il s’agit ni plus ni moins d’appliquer le principe de similarité de la théorie de la Gestalt.

En travaillant sur des formes connues, j’augmente l’affordance des éléments. Un bouton est souvent représenté rectangle. Si je le dessine en forme d’étoile, son utilisation sera perçue de manière moins évidente par l’internaute. Cela peut paraitre contraignant pour la créativité mais le design web n’est pas toujours un acte de création pur. Le web design doit s’inscrire dans un contexte et des contraintes d’ergonomie et d’utilisabilité. Le design web doit donc savoir jongler entre esthétisme et normes d’usages.

La taille

La taille des champs de formulaire doivent être suffisante pour suggérer leur utilité. Si le champs est trop court, l’utilisateur se demandera si il correspond bien à l’idée qu’il se fait de son utilité. Par exemple, si un champ « téléphone » fait une taille équivalente à la saisie visible de 4 caractères alors qu’un numéro de téléphone en occupe au minimum 10, le doute s’installera.

Vous aurez aussi remarqué la taille importante du bouton « Envoyer le message ». Je l’ai un peu exagéré ici mais c’était pour illustrer la loi de Fitts qui dit que « Une cible est d’autant plus rapide et facile à atteindre que celle ci est proche et grande. » Il convient donc aussi, pour faciliter le clique de l’internaute, de placer ce bouton suffisamment proche du dernier champs à priori saisi, le textarea « Votre texte ».

Enfin la taille du texte doit permettre une lecture aisée. Plus l’information a de l’importance, plus la taille du texte sera grande. Jouer sur ce facteur est une des solutions (il y en a d’autres) pour établir une hiérarchisation de l’information.

Les couleurs

Le couleurs sont porteuses de sens. Lorsque j’utilise le rouge et le jaune pour le message d’erreur, c’est parce que ces couleurs sont remarquables et associées dans notre imaginaire au danger et aux objets de signalétique.

Les arrières plans doivent être de préférence de couleurs neutres (éviter les couleurs trop saturées) pour ne pas rentrer en compétition avec les éléments importants de l’interface. Gardez les couleurs vives pour attirer l’attention de l’utilisateur (messages d’erreur, titres …).

Les indices

Vous pouvez aider la compréhension du message en utilisant des éléments qui serviront d’indices. Il peut s’agir de puces, de flèches ou d’icônes. Ici j’utilise une lentille jaune avec un point d’exclamation pour indiquer à l’internaute que le message affiché réclame toute son attention.

Les exemples du format de saisi des champs du formulaire (ex: champ téléphone) peuvent être de précieux indices pour éviter à l’internaute de se tromper et de recommencer sa saisie.
Les libellés

Les libellés textes doivent être explicites sans être trop longs. Sur le plan graphique, la couleur du texte doit être lisible en établissement un rapport de contraste suffisant avec son arrière plan.

Le contraste

L’utilisation du contraste permet de faire ressortir certains éléments. Dans mon exemple, j’ai utilisé le contraste pour attirer l’attention de l’internaute sur les titres qui jouent un véritable rôle de panneau indicateur. Cela permet de répondre rapidement aux questions: Ou suis-je ? de quoi s’agit-il ?

Ici, j’ai essentiellement créé du contraste en jouant sur la couleur et la taille des éléments.

La profondeur

Des simulations 3D par des effets de dégradés et d’ombres portées font ressortir les cadres et le bouton.

En donnant du volume au bouton, j’augmente son affordance car j’incite l’internaute à cliquer dessus. En effet, nous avons tendance à appuyer ou à toucher tout ce qui est proéminent. (Attention, votre imaginaire s’égare !)

Les espaces

En laissant respirer la composition par la présence d’espaces, je facilite la lecture du formulaire. Cela me permet aussi d’appliquer le principe de proximité de la théorie de la Gestalt. Par exemple, les libellés des champs sont proches des espaces de saisies qui leur correspondent. Chacun des binômes « libellé-champs de saisi » sont suffisamment espacés les uns des autres pour ne pas apporter d’ambigüité lors de la prise d’information visuelle.

Conclusion

Comme vous l’aurez probablement remarqué, tous ces principes graphiques sont d’une évidence et d’une simplicité déconcertante.

Alors, pourquoi en parler ?

Parce que, malgré ce constat, il arrive encore de trouver des pages web dont le design ne tient pas compte de ces évidences.

Pour pouvoir les mettre en œuvre, encore faut-il y penser au moment de la réalisation des maquettes graphiques. Et pour penser à ces principes simples, il faut commencer par les connaitre pour en prendre conscience dans vos futures créations.

Sources:

- Ouvrage « Ergonomie web. Pour des sites web efficaces » – Amélie Boucher – Edition Eyrolles
- Sur le site web Motive, l’article: Perceived affordance

La composition

Introduction

Le langage visuel est un mode de communication qui pourrait se définir par le sens qu’une image est capable de transmettre à celui qui la regarde. Lorsque nous observons une image, notre cerveau la perçoit grâce à notre vision mais déclenche également tout un processus de reconnaissance basé sur nos expériences antérieures. La vision déclenche donc des pensées qui aboutissent à des émotions, des réflexions, des références à d’autres images, des déductions conditionnées par notre vécu et notre façon d’appréhender le monde.

L’observation d’une image, quelque soit l’individu, n’est donc jamais un acte passif et laisse rarement indifférent.

La composition

Définition

La composition se préoccupe de concevoir l’arrangement des éléments d’une image dans un cadre physique donné. Les éléments d’une image rentrent en interaction les uns avec les autres et ces interactions sont influencées par les caractéristiques de chaque élément (taille, couleur, valeur, orientation, forme, emplacement …).

Se soucier de la composition, c’est choisir de répartir les éléments constitutifs de l’image en fonction de vos objectifs de communication. Ne pas se soucier de la composition, c’est laisser le hasard choisir à votre place et risquer de passer à côté de vos objectifs.

En webdesign, une réflexion sur la composition commence lors de l’étape de mise en page du contenu puis se poursuit lors du design graphique. La composition en webdesign diffère un peu de la composition en photographie car le webdesign doit prendre en compte un ensemble d’objets constitués de textes et d’images pour former un tout cohérent.

Les facteurs qui interviennent dans la composition

Beaucoup de facteurs peuvent être pris en considération pour élaborer une composition. Je vais essayer d’en faire une énumération ici. Pour chacun d’entre eux, je ne rentrerai pas dans les détails car certains de ces facteurs seront traités ultérieurement.

Pour élaborer une composition, vous pouvez vous appuyer sur les notions suivantes:

Les règles de composition

Au cours des siècles, les artistes et les architectes ont définies des règles de composition empiriques basées sur l’expérience et l’observation de la nature. Ces règles, vous en avez probablement déjà entendu parlé. Il s’agit de la règle des tiers et de la règle du nombre d’or.

Présentons rapidement ces deux règles:

Ces règles sont des méthodes de placement du ou des sujets importants de l’image de tel sorte que la composition nous paraissent harmonieuse tout en restant dynamique. Le défaut du photographe débutant est de centrer ses sujets dans ses compositions. Ce type de choix n’est pas mal en soi mais rend la composition statique et donc un brun ennuyeuse.

Voici où placer les centres d’intérêt d’une image selon ces deux règles de composition harmonieuse: (centres d’intérêts = quatre points dessinés)

Le sens de lecture

Selon des études d’observations de type eyes-tracking, les personnes de culture occidentale parcourent une image de haut en bas et de gauche vers la droite selon un trajet en Z. Ce n’est pas un hasard si les logos sur les documents ou les pages web sont souvent placés en haut à gauche.

De même, il semble que la gauche de l’image se réfère au passé et la droite au futur.

Un personnage qui marche et qui se dirige vers la droite de l’image sera interprété comme une personne qui s’éloigne alors que si la personne se dirige vers la gauche de l’image, on aura tendance à penser qu’elle revient sur ses pas.

Dans la même veine, un escalier nous semble descendre si il parcours l’image du coin haut-gauche vers le coin bas-droite et monter si il commence du coin bas-gauche et se termine au coin haut-droite.

Le point de vue

Le changement du point de vue change la composition de l’image. En effet, la forme d’un objet ne sera pas la même si il est représenté ou photographié selon deux points de vue différents.

Choisir un point de vue inhabituel peut montrer un objet banal sous un nouvel angle et changer le regard du spectateur sur cet objet.

En choisissant où vous placez l’horizon dans votre composition, vous changez l’expression de l’image. Un point de vue bas, inclue de façon plus importante le premier plan et fait rentrer le spectateur du bas vers le haut de l’image. Un personnage pris en contre plongée lui donnera un air dominateur. Inversement, un point de vue élevé vous détache de la scène. Vue de haut, un personnage semble plus petit et dominé.

L’échelle

Vous pouvez jouer avec l’échelle dans une composition à condition que vous donniez des indices visuels qui permettent à l’observateur d’apprécier cette échelle. En plaçant un objet connu sur l’image vous révèlerez par comparaison le petitesse ou le gigantisme des autres éléments.

Les éléments formels

Il s’agit du point, de la ligne, des courbes et des formes. Ces éléments, selon la façon dont ils sont placés, orientés, leur taille … n’expriment pas la même chose. Par exemple, des lignes courbes expriment la douceur, la féminité alors que des lignes hachées expriment le cahot, le désordre. Cela est aussi valable pour les formes. Un carré va exprimer l’ordre, la stabilité, la robustesse alors qu’un cercle va exprimer par exemple l’équilibre, l’infini, le renouvèlement.

Lorsque plusieurs objets sont présents dans une composition, ils rentrent en relation, interagissent entre eux, se concurrencent ou s’équilibrent. Des lignes optiques se forment sur lesquelles le regard peut se laisser guider. Ces lignes virtuelles sont de véritables lignes de force qui accompagnent l’observateur dans sa lecture de l’image. Vous pouvez vous en servir pour attirer l’attention de l’observateur vers un centre d’intérêt.

L’équilibre

Si vous êtes à la recherche d’une composition harmonieuse, vous allez essayer d’équilibrer votre composition. Il y a plusieurs paramètres qui permettent d’équilibrer une composition: la répartition des tons, des couleurs, des objets. La répartition des objets sur les différents plans.

Le poids de chaque objet dans une composition va être influencé par sa taille, sa couleur, sa valeur. Les caractéristiques qui augmentent le poids d’un objet sont l’importance de sa taille dans le cadre, l’assombrissement de sa valeur, son contraste, sa densité. Par exemple un petit objet dense et sombre peut être équilibré par un objet plus grand mais plus clair placé en opposition par rapport à un axe central.

La symétrie

Nous sommes sensible à la symétrie car on la trouve en abondance chez les êtres vivants et dans notre anatomie. Cette symétrie quelle soit radiale ou axiale apporte de la structure à l’image mais en revanche la stabilise au point de la rendre parfois trop statique, superficielle, ennuyeuse.

La symétrie est aussi un bon moyen d’équilibrer une composition si c’est l’effet recherché.

Le relation entre le premier plan et le second plan

Vous pouvez, en jouant sur plusieurs plans, simuler la profondeur. Pour cela vous pouvez intervenir sur la profondeur de champs ou la superposition des objets. Arrangez-vous pour que les différents plans ne rentrent pas en concurrence. Un plan sera mis en avant si il est plus net que les autres ou plus contrasté.

Les contrastes

Le contraste est un outil formidable pour retenir l’attention de l’observateur. Le contraste est basé sur une opposition entre deux objets. Sachez qu’il existe plusieurs manière de le générer. Nous en reparlerons dans un article ultérieur.

Conclusion

La composition est une notion incontournable de l’expression graphique qui vous aide à donner du sens à vos images ou à raconter une histoire. Plusieurs facteurs sont à prendre en compte pour vous aider dans cette tâche mais avant de composer votre image réfléchissez à ce que vous voulez exprimer.

Sources:

- Ouvrage « Composition » de David Präkel – Edition La compagnie du livre.

Hiérachisation

Sur une page web, les informations n’ont pas le même poids visuel afin que l’internaute puisse facilement scanner le contenu. Grâce à la hiérarchisation de l’information, le graphiste va pouvoir attirer l’attention de l’observateur vers les éléments clefs de sa mise en page.

Introduction

Nous connaissons tous le sens du mot « hiérarchie » puisqu’il fait référence à une notion qui s’exerce dans de nombreux domaines de notre vie sociale et professionnelle. Mais savez-vous de quoi il s’agit lorsque l’on parle de « hiérarchie » en design web ?

Le mot « hiérarchie » désigne le fait d’instaurer, par différents procédés graphiques, un classement par ordre d’importance des éléments d’une page web. C’est un outil précieux du langage graphique qui permet de classer et d’organiser le contenu. La mise en place d’une hiérarchie visuelle met en évidence des points d’ancrage sur lesquels l’utilisateur va pouvoir s’appuyer pour scanner rapidement la page et comprendre de quoi il s’agit. Cela va contribuer à contrôler la transmission et l’impact du message. Sans hiérarchie visuelle, le contenu devient fade et difficile à parcourir.

Hiérarchisation du contenu web

Sur une page web on peut avoir besoin de placer beaucoup de choses: un logo, un menu de navigation, des menus secondaires, des informations de contact, des liens hypertextes, des titres, des sous-titres, des paragraphes de textes, des fonctionnalités diverses (moteur de recherche, pannier e-commerce, formulaires …). Imaginez comment tous ces éléments peuvent avoir du sens pour l’utilisateur si tout est traité de la même manière visuelle (même police, même taille, même couleur …). Comment retrouver une information dans une pile d’informations uniformes ?

Grâce à la hiérarchisation de l’information, vous allez pouvoir mettre en place une distinction entre les différents éléments de la page ou au contraire exprimer une similarité entre plusieurs d’entre eux. Vous allez également pouvoir transmettre la relative importance des éléments les uns par rapport aux autres. En opérant ainsi vous allez commencer à donner du sens à votre contenu et faciliter la lecture de la page.

Illustrons nos propos avec un exercice simple. Recherchez dans ces deux présentations, dont le contenu est strictement identique, l’information suivante: quelles sont les trois couleurs primaires du système additif ?

Dans laquelle de ces deux présentations avez vous trouvé l’information le plus facilement et le plus rapidement ?

Contraste et hiérarchisation

Tout est une histoire de contraste. L’école Allemande de design Bauhaus du début du siècle (1919) préconisait déjà l’utilisation du contraste pour capturer et retenir l’attention de l’observateur.

Pour établir une hiérarchie visuelle dans une composition, il faut jouer avec des techniques graphiques qui vous permettent de mettre en place du contraste entre les éléments. La mise en place de contraste va déterminer l’ordre dans lequel les utilisateurs vont percevoir et donc appréhender l’information visuelle.

Comme nous l’avons vue dans les exemples précédents, si tous les éléments sont similaires, il n’y a pas de progression logique du regard à travers le contenu et vous parcourez ce contenu de façon confuse. Si par contre des éléments plus larges que les autres se distinguent de la masse, votre attention est tout de suite attiré par ces éléments.

Pour qu’un élément soit remarquable, il faut qu’il se distingue des autres. Cela ne peut se faire que si une partie des autres éléments restent relativement neutres. En effet, si le graphiste cherche à rendre remarquable tous les éléments, le résultat donnera l’effet inverse.

Voici, à travers des exemples, différentes manières de créer du contraste pour mettre en place une hiérarchie visuelle dans votre composition:

La taille

Les tailles du logo et de l’encadré de gauche sont telles qu’elles attirent immédiatement notre attention. Ces deux éléments prennent une position dominante dans la hiérarchisation de la mise en page.

La texture

Pour distinguer le menu actif, le graphiste a utilisé dans cet exemple un contraste de texture.

La forme

La forme des rectangles qui contient les items du menu principal est la même pour tous les items sauf pour celui de la rubrique active. Ce contraste de forme permet à l’internaute de savoir immédiatement dans quel rubrique il se trouve.

La couleur

Ce menu latéral est traité avec trois couleurs différentes. Un seul item est rouge. Cet item rouge est le plus important hiérarchiquement car il indique le thème de la page courante.

La position

En décalant le paragraphe vers la droite, le graphiste créer un contraste de position qui le détache du reste du texte.

L’orientation

L’ensemble des textes de cette page sont horizontaux sauf le libellé « SERVICES » qui est orienté verticalement. La lecture verticale est généralement déconseillée par les recommandations ergonomiques mais ici, la taille du texte est suffisamment grande pour offrir une lisibilité du mot acceptable. Cette particularité dans la page retient notre attention sur le mot « Services ».

La valeur

Même avec une palette de couleur monochrome, vous pouvez créer de l’emphase en jouant sur les valeurs de gris. Le mot « LABEL » ressort ici parfaitement du menu.

La saturation

Cette page est une mosaïque de vignettes sur lesquelles il est possible de cliquer. Toutes les vignettes sont complètement désaturées. Au passage de la souris, la vignette devient colorée et se distingue alors des autres. En passant la souris sur une vignette, celle-ci devient un cours instant la vignette hiérarchiquement la plus importante puisque vous êtes susceptible de cliquer dessus.

La netteté

Le graphiste a voulu ici attirer notre attention sur le carré central en rendant les autres carrés flous.

Hiérarchisation et parcours de lecture

Voici une page web utilisant plusieurs types de contrastes (couleur, taille, valeur …) pour hiérarchiser l’information contenu dans sa mise en page. Nous voyons bien que certains éléments attirent plus notre attention que d’autres. Par exemple le header possède un arrière plan texturé, un logo de grande taille avec une typographie de couleur rouge, couleur que l’on retrouve dans l’onglet actif du menu. Ces caractéristiques jouent un rôle sur la façon dont nous allons scanner cette page. Nous somme davantage attiré par le contenu du header au premier regard que par le contenu texte des paragraphes situés plus bas.

Cette hiérarchisation des éléments nous conduit à appréhender les informations de cette page dans un certain ordre et selon un parcours visuelle bien définie que j’ai tracé ci-après en bleu et numéroté par ordre de progression.

Conclusion

Les préoccupations de hiérarchisation interviennent dès les premières phases de conception du site. Par exemple lors du zoning, il est important de déterminer quelles seront les zones de contenu et les grandes fonctionnalités qui devront prendre de l’importance dans la mise en page. Il faudra penser à placer ces éléments au dessus de la ligne de fold (ligne virtuelle en dessous de laquelle il est nécessaire de scroller pour voir le contenu de la page), ensuite le graphiste devra mettre du contraste sur ces éléments pour qu’ils se distinguent dans la composition.

De cette manière, vous proposez au visiteur une espèce de « visite guidée » censé l’aider à scanner la page pour trouver ce qu’il cherche.