• Tweet
• 
• 

Que nous a appris la théorie ? En gros que nous percevons tous les formes de façon similaire, et que nous avons tous les mêmes réflexes dans la perception des formes et des ensembles de formes. Cool, maintenant : comment les manipuler ? Comment les appliquer pour que le design que je prépare corresponde à l’utilisateur que je vise ? Voici quelques exemples d’application…

La page web : une forme simple

Dans le billet précédent, on parle du premier principe : un ensemble de forme est d’abord perçu comme une forme simple. Qu’à cela ne tienne, voyons les formes simples que peuvent constituer une page web, et quels effets et impressions sur l’utilisateur.

1. Le rectangle : forme que l’on retrouve le plus souvent sur le web. Tout le contenu de la page est calé sur la même largeur : pas de mouvement, mais un équilibre parfait. Simple et efficace.
2.  Le trapèze (haut) : moins utilisé, le header est plus large que le reste de la page. Aucune ouverture vers le haut et il garantit une assise au contenu du header sur le reste de la page. Au risque d’être écrasant. Cette forme suggère également un mouvement descendant.
3. Le trapèze (bas) : le contraire du précédent, la page s’assoit complètement sur le footer, et propose une ouverture vers le haut, donc un mouvement ascendant.
4. En V : header et footer sont plus large que le reste du contenu. Cette organisation du contenu propose une dynamique qui va vers le contenu.
5. En O : Le header et le footer sont moins large que le reste de la page. Je n’ai pas d’exemple en tête, c’est une organisation de page très peu utilisée. ….

Le cadre ainsi créé va mettre en condition votre utilisateur, lui donner une première impression et un ressenti global vis-à-vis du site qu’il regarde tout au long de sa navigation. C’est comme parler à quelqu’un qui fait 2 mètres et qui est taillé comme une armoire à glace ou à quelqu’un qui fait 1,50 mètres pour 40 kilos : le discours ne sera pas le même. Donc, à partir de là, choisissez le meilleur cadre par rapport au contenu de votre page et à la ligne éditoriale du site.

Le call-to-action

Ou, en bon français, l’appel à l’action. Avec les principes qu’on a vu dans le billet précédent, il était question d’harmoniser et de structurer logiquement une page pour qu’elle soit plus facilement et plus rapidement compréhensible par l’utilisateur. Et si on plaçait au milieu de cette univers harmonieux et équilibré un gros machin en relief avec une couleur flashy ? Voilà le call-to-action.

Même si c’est caricatural, c’est un peu la place du call-to-action quand on parle de gestaltisme : jouer sur les principes que l’on a vu précédemment et les détourner, dans une certaine mesure. Pour le plus grand bonheur des marketeux.

Reprenons votre page, bien organisée, symétrique, et placez-y un bouton, de la même forme que les autres, au centre du contenu de la page, d’une couleur singulière, que vous n’aviez pas encore utilisé, assez saturée. Augmentez sa taille, rajoutez un effet quelconque, et vous avez votre call-to-action.

Exemple : la page d’accueil de Twitter. Sur l’ensemble de la page, on reste sur des teintes bleues / grises, et hop, en plein milieu, on glisse un bouton jaune pétant avec un effet de brillance. Et comme par hasard, il s’agit du bouton incitant à s’inscrire au réseau. L’exemple parfait de call-to-action.

Organiser sa page comme un chef

Avec les principes que l’on a vu dans le billet précédent, et surtout les exemples donnés, on a pu remarquer que certains des principes évoqués facilitaient la lecture, le classement de l’information et la navigation de l’utilisateur. Le principe de proximité, dans un premier temps : on regroupe naturellement les informations les plus proches ensemble. De ce fait, il faut donc faire très attention à l’utilisation de l’espace. Un bon moyen pour éviter de se prendre la tête avec ça est de partir de l’interligne de base d’un paragraphe comme unité d’espacement, et, selon la proximité sémantique entre les éléments, la multiplier.

Ensuite, le principe de similitude nous a montré que des éléments ayant une fonction similaire doivent être représenté de la même façon. Une application concrète de ce principe est le classement de l’information. Imaginons un blog avec plusieurs catégories : plutôt que de d’identifier chaque post par un nom de catégorie, difficilement identifiable, on peut associer à ce post une couleur liée à la catégorie et pourquoi pas, un pictogramme. En faisant la même chose sur les éléments de menu, le lecteur repèrera facilement la catégorie qui l’intéresse et le confort de navigation n’en sera que meilleur.

En deux mots…

Avec ces deux billets, on a vu des principes avec un nom à coucher dehors, qui donnent des clés pour comprendre comment on perçoit les formes, les ensembles de formes. Forcément, les conclusions que l’on a pu en tirer s’appliquent au webdesign et à l’ergonomie d’une page web. En effet, si on suit les conseils de Monsieur Gestalt (non, il n’existe pas), on arrive à faire des pages bien structurées, bien organisées et bien rangées. De fait, ils sont consciemment ou inconsciemment utilisés par tous les webdesigners, puisqu’ils sont garants d’une page bien perçue.