1. Les 7 Principes Fondamentaux de Design d'un Site
Hello, je suis Tarik, le co­fondateur de Clicboutic, le moyen le plus rapide et le plus facile d'ouvrir
votre propre boutique en ligne. Quand je ne travaille pas à améliorer l'expérience de nos clients,
j'aide les entrepreneurs à augmenter leurs ventes sur le blog e­commerce de Clicboutic.
Le design de votre site est plus important que vous ne le pensez pour améliorer vos
conversions. Peu importe les tactiques que vous avez déjà mises en oeuvre pour
booster votre taux de conversion, si votre site ne ressemble à rien : vous gaspillez vos
ressources.
Le design ne se réduit pas au travail d’un graphiste. Le design, c'est aussi du marketing. Le
design, c'est votre produit et son fonctionnement.
Vous trouverez ici 7 principes fondamentaux d'ergonomie et de design qui vous permettront
d'améliorer votre site internet. Ignorez­les à vos risques et périls.
Principe 1 : La Hiérarchie Visuelle
Si les blondes à forte poitrine attirent plus facilement l'attention des hommes dans la rue, les
visuels les plus proéminents remplissent ce rôle sur le web. La hiérarchie visuelle est l’un des
principes fondamentaux du web design. Il s'agit de l'ordre dans lequel l’œil humain perçoit les
choses.
Exercice. Classez ces cercles par ordre d’importance :

2. Alors même que vous ne savez RIEN de ces cercles, vous avez pu les classer sans effort.
Leur hiérarchie visuelle s'est imposée à vous.
Ce principe est également applicable à votre site internet. Certains éléments sont plus
importants que d'autres (formulaires, boutons, proposition de valeur, etc.) et ils doivent
facilement attirer l'attention de vos prospects.
Si votre menu de navigation affiche 10 liens, demandez­vous s'ils ont tous la même importance.
Où voulez­vous que l’utilisateur clique ? Faites en sorte que les liens les plus importants soient
plus visibles que les autres.
La hiérarchie visuelle n'est pas uniquement une question de taille. Prenons l'exemple d'Amazon :
le bouton “Ajouter au Panier” attire immédiatement l'attention au détriment du bouton secondaire
grâce à sa couleur.

3. Commencez toujours par l'objectif de votre entreprise.
Quel est votre objectif principal quand un client arrive sur votre site web ? Cet objectif doit
déterminer l'ordre dans lequel les éléments de votre site web sont hiérarchisés.
Si vous ne vous êtes pas fixé de but précis, vous ne pourrez pas établir de hiérarchie.
Voici un exemple, c’est une capture d’écran du site Becquet.fr, une boutique de linge de maison.
L’oeil se focalise d’abord sur le visuel coloré et proéminent de linge de lit (Mmh, il est peut­être
temps de renouveler mes draps !), suivi de la proposition de valeur ("Réveillez votre intérieur" et
surtout ­40% de réduction sur le linge de lit) et le bouton principal (Accéder à toute la sélection).
Les quatrième et cinquième choses les plus visibles sont les liens d'accès aux catégories en
promotion et les éléments de réassurance de la boutique. La navigation est le dernier élément.
C'est une bonne hiérarchie visuelle.

4. Exercice : Parcourez plusieurs sites et obligez­vous à classer les éléments par ordre
d'importance dans la hiérarchie visuelle. Allez maintenant sur votre propre site. Si certains
éléments importants (des informations essentielles pour les visiteurs qui arrivent sur votre site)
sont moins visibles que des éléments superflus, corrigez le problème.
Pour en savoir plus sur la hiérarchie visuelle (article en anglais).
Principe 2 : Le Nombre d'Or
Le nombre d'or (1,618) est un ratio "magique" qui permet de réaliser des interfaces aux
proportions esthétiquement parfaites ­ du moins, un certain sens de l'équilibre et de l'harmonie.
Voici à quoi ressemble le nombre d'or :

5. Beaucoup d’artistes et d’architectes ont proportionné leur travail en s’inspirant du nombre d’or.
Le Parthénon, à Athènes, est sans doute l'exemple le plus célèbre :
Est­ce qu'on l'utilise de nos jours ? Pour réaliser des sites internet par exemple ? Twitter le fait :

6. Voici ce que Doug Bowman, le directeur artistique de Twitter, a révélé après la sortie de la
nouvelle version du site :
“ Pour ceux qui s'interrogent sur le nouveau design de Twitter, sachez que nous
n’avons pas choisi ces proportions par hasard. ”
Donc, si la largeur de votre page est de 960 pixels, divisez­la par 1,618 (=593 pixels). La zone
de contenu doit mesurer 593px et la barre latérale 367px. Si la hauteur de votre site est de
760px, vous pouvez le scinder en deux parties de 470px pour la zone de contenu et 290px pour
le pied de page (760/1.618 = ~470).
Ressources supplémentaires : Voici un outil pour calculer les proportions divines de votre site.
Principe 3 : La Loi de Hick
La loi de Hick énonce que chaque choix supplémentaire augmente le temps nécessaire pour
prendre une décision.
Pensez à toutes ces fois où vous vous êtes retrouvé au restaurant à devoir choisir parmi un
menu sans fin... C’est tout le temps un casse­tête. En revanche, si le menu vous permettait de
choisir uniquement entre deux plats, ce serait beaucoup plus rapide. Ce principe s’apparente au
"Paradoxe du Choix" : plus vous donnez de choix aux gens, moins ils choisissent.

7. Cette loi s’applique également au web : plus il y a de catégories sur votre site, plus ce sera
difficile pour vos clients de choisir sur quel lien cliquer (et certains ne cliqueront nulle part). Vous
pouvez améliorer l'expérience de vos clients en réduisant le nombre de choix disponibles. Ces
décisions doivent être prises dès le début du processus de création de votre site. Ne cédez pas
à la tentation de rajouter des options en cours de réalisation du design et vous devriez vous en
sortir.
Lorsqu'on vend une grande quantité de produits, on a besoin de filtres ! Si vous gérez une
boutique en ligne avec un important catalogue, affichez progressivement les choix qui s'offrent à
vos clients en utilisant une navigation par filtres.
Urban Outfitters a une offre extrêmement large de vêtements et de chaussures. L'utilisation de
filtres leur permet de ne pas afficher l'intégralité des catégories et des sous­catégories de leur
catalogue sur la page d'accueil de leur site :

8. Pour en apprendre plus sur la loi de Hick (article en anglais).
Principe 4 : La Loi de Fitts
La loi de Fitts stipule que le temps requis pour se déplacer vers une zone cible (par exemple :
cliquer sur un bouton) est une fonction de la distance de la cible sur la taille de la cible.
Autrement dit, plus un objet est gros et proche, plus il est facile à atteindre.
Deezer facilite la sélection du bouton "Lecture" par rapport aux autres :

9. Ca ne veut pas forcément dire qu'il faut augmenter la taille de vos boutons à tout prix. Un bouton
qui prend la moitié de l'écran n'est pas une bonne idée : pas besoin de citer une étude
mathématique pour le savoir. Cela étant, la loi de Fitts est un logarithme binaire.
Du coup, un bouton minuscule deviendra beaucoup plus facile à cliquer lorsque vous
augmentez sa taille de 20 % tandis qu'augmenter dans les mêmes proportions la taille d'un
bouton déjà très gros représente un avantage négligeable.
Concrètement, la taille d'un bouton doit être proportionnelle à sa fréquence d'utilisation. Vous
devriez jeter un oeil à vos statistiques pour savoir quels boutons sont les plus utilisés afin
d'augmenter leur taille (et faciliter leur sélection).
Pour en savoir plus sur la loi Loi de Fitts (article en français).
Principe 5 : La Règle des Tiers
Vous utilisez probablement déjà des images sur votre site. Une image communiquera toujours
vos idées plus rapidement que n'importe quel texte.
Les meilleures images respectent la règle des tiers. En gros, vos images sont divisibles en neuf
parties égales. Les 4 points formés par les intersections du quadrillage servent ainsi à aligner
les éléments les plus importants de votre image. Ce type de composition attire plus facilement
l'oeil humain sur l'objet que vous voulez mettre en avant que lorsque vous centrez simplement la
photo.

10. Cette méthode vous permettra de tirer le maximum des visuels de votre site !
Principe 6 : La Théorie de Gestalt et les Principes de la Forme
Cette théorie psychologique postule que l'œil humain perçoit les objets dans leur intégralité avant
de les appréhnder comme éléments individuels.
Si je prends cette image par exemple...

11. Vous avez remarqué de quelle manière vous avez reconnu un chien sans avoir eu à vous
concentrer sur chacun des points noirs qui le constituent ? Nous voyons toujours une image
dans son ensemble avant de nous concentrer sur les éléments individuels qui la constituent.
Les gens perçoivent toujours l'intégralité de votre site en premier. C'est seulement dans un
second temps qu'ils vont percevoir la bannière d'en­tête, le menu, le pied de page et ainsi de
suite.
Il existe 8 lois de Gestalt pour nous aider à anticiper la manière dont les gens vont percevoir
notre site. Les voici :
1. La loi de la proximité
Les gens regroupent d'abord les objets les plus proches dans l’espace. Si des éléments sont
trop proches les uns des autres, ils seront perçus comme un seul et même objet.

12. En matière de web design, assurez­vous que les éléments d'une page n’appartenant PAS au
même groupe ne soient pas perçus comme un objet unique. De même, certains éléments de
votre site doivent être regroupés (votre menu, le pied de page, etc.) pour montrer qu'ils font
partie du même ensemble.
Le site de petites annonces Vivastreet utilise cette méthode pour rendre visible l'appartenance
d'une sous­catégorie à une catégorie principale.
2. La loi de similitude

13. Lorsque la distance entre les différents objets ne nous permet pas de les distinguer, on a alors
tendance à regrouper les plus similaires entre eux. Il peut s'agir d'une forme ou d'une couleur
similaire ou d'autres caractéristiques.
Sur l'image ci­dessous, l'oeil humain va rassembler les points noirs dans un groupe et les points
blancs dans un autre.
Sur notre site, les avis de clients Clicboutic sont tous présentés de la même manière. Un
visiteur doit intuitivement comprendre que chaque bloc a le même contenu.

14. 3. La loi de clôture
Nous cherchons naturellement la perfection. C'est pour cette raison que notre perception remplit
les vides lorsqu'on observe des formes qui ne sont pas fermées. Sur l'image ci­dessous, nous
voyons un cercle et un carré bien que ces formes n'existent pas réellement.
Sans cette illusion de la perception, nous verrions juste différentes lignes aux longueurs
variables. Mais la loi de clôture nous permet de combiner les lignes en une forme pleine.
Cela peut vous aider à réaliser votre prochain logo. Un bon exemple est celui de WWF, dessiné
par Sir Peter Scott en 1961 :

15. 4. La loi de symétrie
Notre esprit perçoit les objets comme étant symétriques et se construisant autour d’un point
central. C'est à la fois plus facile et plus rassurant de pouvoir séparer visuellement plusieurs
objets en un nombre égal d'éléments symétriques.
Lorsque nous voyons deux éléments symétriques qui n'ont pas de lien entre eux, nous allons
naturellement les associer pour composer une forme cohérente.
Si vous regardez l'image ci­dessus, vous voyez certainement trois paires de parenthèses
symétriques. Au lieu de six parenthèses individuelles.
Si votre site e­commerce est construit autour de trois colonnes, assurez­vous que les colonnes
de gauche et de droite ont la même largeur. L'espacement entre les blocs doit également être
identique au risque de donner aux visiteurs un sentiment de déséquilibre.
5. La loi de destin commun
Nous avons tendance à percevoir des objets comme des lignes ayant une trajectoire.
Concrètement, nous regroupons ensemble les objets ayant la même trajectoire, qui vont dans la

16. même direction.
Dans l'exemple du dessus, on regroupe mentalement les mains pointées en direction du logo
car elles suivent la même direction.
Vous pouvez utiliser ce principe pour guider l'attention de vos visiteurs vers un élément
important d'une page de votre site (un formulaire d'inscription, votre proposition de valeur, un
bouton etc.).
5. La loi de continuité
Lorsqu'on voit une ligne, on attribue à cette ligne une trajectoire. Dans le cas d'une intersection
entre plusieurs objets (par exemple des lignes), nous allons percevoir deux lignes comme deux
entités ininterrompues. Même si elles se chevauchent, notre esprit continue à distinguer les
lignes d'origine.
Le studio graphique Fixel utilise ce principe pour associer les visages de l'équipe à leurs
biographies respectives :

17. Il existe d'autres lois de Gestalt comme la loi de la bonne figure ou de la familiarité mais je
pense que celles qui sont présentées ici sont les plus utiles à connaitre.
Principe 7 : Espace Négatif et Design Epuré
L'espace "négatif" est la partie d'une page laissée "vide". C'est l'espace qui sépare les visuels,
les textes, les bordures, l'espace entre les colonnes ou différentes images.
Ne considérez pas cet espace comme simplement du "vide" et résistez à la tentation de le
combler. Il permet aux différents objets d'une page d'exister. L'espace négatif est la base d'une
bonne hiérarchie de l’information, qu’il s’agisse de textes, de couleurs ou d'images.
Une page sans espace négatif aura l’air lourde et surchargée. Cela compliquera la lecture et la
navigation de vos visiteurs et beaucoup d'entre eux ne feront même pas l'effort de lire ce que
vous avez à dire.

18. Si vous utilisez correctement les espaces négatifs, votre site web aura l'air "propre" et facile à
parcourir. Un design épuré est crucial pour communiquer clairement votre message mais ça ne
se résume pas à retirer du contenu. Pour obtenir un design propre et épuré, utilisez l’espace
dont vous disposez, pas davantage.
Le site de mobilier design Made.com fait un excellent usage de l’espace négatif :
Une juste utilisation des espaces négatifs aidera vos visiteurs à se concentrer sur votre
message principal et vos images et facilitera la lecture de vos textes.
Les espaces négatifs contribuent à souligner l'élégance de votre site, améliorent la lisibilité et
guident l’œil de vos clients vers l’essentiel.
Ressources supplémentaires : Voici un article regroupant plusieurs liens utiles sur l'espace
négatif et la simplicité (anglais).

19. Conclusion : Design et Art sont Deux Choses Différentes
Lorsque vous travaillerez sur le design de votre prochain site ou l'amélioration d'un site existant,
votre créativité et votre "sens artistique" passent après. Si vous voulez améliorer vos ventes,
prenez l’habitude de vous concentrer sur l'utilisateur et l'objectif de votre entreprise en
vous aidant des principes présentés dans cet article.
Dites­moi si vous avez des questions dans les commentaires ou si vous voulez discuter de
votre propre site !