Loi de proximité et loi de similarité ( les théories de la Gestalt )

La loi de proximité

Notre cerveau regroupe les éléments qui sont proches, il considère que les éléments proches dans l’espace ont des points communs et par analogie, l’éloignement des éléments évoque la différence.

Ergonomiquement parlant, il est donc primordial de rassembler les éléments du même type et d’éloigner les éléments qui n’ont pas de points communs; cette logique facilitera l’utilisation du site.

La Redoute

Exemple : le site de La Redoute

La loi de proximité est très bien mise en application dans cet exemple. En effet, l’information est claire et les éléments ayant une fonction similaire sont regroupés. La navigation est donc facilitée.

La loi de similarité

Notre cerveau regroupe les éléments qui se ressemblent (forme, taille, couleur…); la mise en application de cette loi permet une navigation plus intuitive.

Ikea

Exemple : le site d’Ikea

Dans cet exemple, on peut remarquer que les pictos sont de même taille et de même couleur; cela paraît logique mais avec une telle quantité de pictos, il était essentiel d’appliquer cette règle pour garder une harmonie visuelle. Par ailleurs, les 2 blocs traitant du même sujet (l’écologie) ont une mise en page similaire, les couleurs et les formes utilisées sont les mêmes.

Le Fittsizing

Le fittsizing est le principe de compensation de la distance pour aller à un point par l’augmentation de sa taille; il permet un gain de temps non négligeable pour l’internaute.

L’affordance / langage visuel

L’affordance est la qualité d’un objet à suggérer son utilisation. Plus l’objet a une forte affordance, plus le comportement de l’internaute est anticipé, et plus il trouve facilement l’information qu’il cherche.

Carré blanc

Exemple : le site de Carré Blanc

« Les unis » et  « Nouvelle collection » constituent 2 blocs entièrement cliquables. Ces 2 blocs ne sont pas « gros » par hasard : il se situent dans une zone froide de l’écran, il est donc important de leur donner une taille importante et de la couleur afin d’attirer notre regard. D’autre part, pour les atteindre, il faut parcourir l’écran en diagonale; donc plus le bloc est gros, plus la distance est courte et plus l’internaute va vite (Fittsizing). Et plus on va vite, plus on est content!!

Le principe d’Affordance est lui aussi bien illustré : le nuancier de couleur évoque tout de suite la possibilité de choisir une couleur, tout comme les pictos évoquent la fonction qui leur est attribuée.

Accessibilité visuelle / optimisation graphique

Optimiser les formes et les couleurs pour une bonne lisibilité.

Club Med

Contre-exemple : le site du Club Med

Dans le cas présent, un contre-exemple est beaucoup plus parlant qu’un simple exemple : sur le site du Club Med, ils ont le chic pour mettre des textes minuscules en ton sur ton, ce qui gène terriblement la lisibilité; l’internaute se lasse vite parce qu’il n’aime pas faire trop d’efforts pour accéder à l’information qu’il recherche. Et un internaute qui se lasse est un internaute qui va voir ailleurs!

7 règles pour optimiser l’ergonomie d’un site

1. Organisation et cohérence (le site et la page doivent être bien rangés)
2. Séduction > il faut séduire l’internaute pour lui laisser une bonne impression
3. Information > l’internaute doit pouvoir trouver facilement l’information qu’il cherche
4. Compréhension > l’utilisation de la symbolique (pictos) et du vocabulaire doivent aider l’internaute à accéder aux informations recherchées
5. Rapidité > l’internaute doit pouvoir accéder rapidement aux informations qu’il recherche – Règle des 3 clics -
6. Accessibilité > optimiser le site pour qu’il soit accessible au plus grand nombre – Normes W3C -
7. Satisfaction > proposer des fonctionnalités attractives et innovantes qui provoqueront l’envie de retourner le site

Il s’agit donc de :

SEDUIRE > FAIRE RESTER > REDIRIGER VERS D’AUTRES INFORMATIONS

Coca-Cola

Exemple : le site de Coca-Cola

Coca-cola sait séduire grâce aux couleurs gaies utilisées par touches, grâce à ses éléments graphiques qui évoquent le dynamisme et la vitalité.
Coca-cola redirige l’internaute vers une multitude d’informations, ce qui provoque son intérêt; il sera donc tenté de revenir sur le site parce qu’il aura retenu qu’il y a un jeu concours ou une animation sympa ou encore que Coca-cola organise des événements sportifs.
Cette redirection vers d’autres informations (pourvu qu’elles soient intéressantes et en accord avec l’esprit de la marque) donne envie de revenir sur le site et d’en parler autour de soi. Car n’oublions pas que le buzz créé autout d’un événement a parfois des effets bien plus considérables qu’un joli site ou qu’un joli design!!

Remarques :

1. il ne faut pas négliger le seuil de lisibilité (qui se situe à 570px pour une résolution d’écran de 1024×768); il est préférable de ne pas faire chevaucher les éléments entre la zone visible et la zone non visible.
2. pour faire le design le plus ergonomique possible, le mieux, c’est de se mettre à la place de l’internaute!

En savoir plus :

Théorie de Gestalt : théorie due à Köhler, Wertheimer et Koffka, qui refuse d’isoler les phénomènes les uns des autres pour les expliquer et qui les considère comme des ensembles indissociables structurés (formes). Cette théorie a notamment permis de découvrir certaines lois de la perception. [Larousse]

La loi de la proximité : nous regroupons les points d’abord les plus proches les uns des autres. [Wikipedia]

La loi de similitude : si la distance ne permet pas de regrouper les points, nous nous attacherons ensuite à repérer les plus similaires entre eux pour percevoir une forme. [Wikipedia]

Règle des 3 clics : La règle des trois clics (en anglais three-click rule) est, en conception de site web, un principe informel d’ergonomie selon lequel l’internaute doit pouvoir accéder à n’importe quelle information présente sur le site en suivant au plus trois clics de souris depuis la page d’accueil. Elle est basée sur l’idée que le visiteur devient frustré s’il n’obtient pas rapidement l’information qu’il recherche, et risque de quitter le site pour aller la trouver sur un autre. [Wikipedia]

W3C : Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le W3C n’émet pas des normes au sens européen, mais des recommandations à valeur de standards industriels. [Wikipedia]