Les 7 Principes Fondamentaux de Design d’un Site

Post image of Les 7 Principes Fondamentaux de Design d’un Site
Classé dans : Guest Posting , Taux de Conversion 20 commentaires

 

7principes150 Les 7 Principes Fondamentaux de Design dun Site

Les 7 Principes Fondamentaux de Design d’un Site



Cette semaine, le blog accueille Tarik Peudon de Clicboutic, qui nous livre une adaptation d’une grande qualité sur les fondamentaux en ergonomie et webdesign. Une aventure « livresque », au travers des théories fondamentales a avoir en tete a l’heure de concevoir un site.

 
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 :

 Les 7 Principes Fondamentaux de Design dun Site

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.

 Les 7 Principes Fondamentaux de Design dun Site

 
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.
 Les 7 Principes Fondamentaux de Design dun Site
 

  • 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.

 
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 :

 Les 7 Principes Fondamentaux de Design dun Site

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 :

 Les 7 Principes Fondamentaux de Design dun Site
Est-ce qu’on l’utilise de nos jours ? Pour réaliser des sites internet par exemple ?

Twitter le fait…

 Les 7 Principes Fondamentaux de Design dun Site

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.

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.
 
Par exemple, 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.

 Les 7 Principes Fondamentaux de Design dun Site
 
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 :
 Les 7 Principes Fondamentaux de Design dun Site

 
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. Cette méthode vous permettra de tirer le maximum des visuels de votre site !

 Les 7 Principes Fondamentaux de Design dun 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:

 Les 7 Principes Fondamentaux de Design dun Site

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. 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.
     Les 7 Principes Fondamentaux de Design dun Site
  • 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.
     Les 7 Principes Fondamentaux de Design dun Site

2. La loi de similitude

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.

 Les 7 Principes Fondamentaux de Design dun Site

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.

 Les 7 Principes Fondamentaux de Design dun Site

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.

 Les 7 Principes Fondamentaux de Design dun Site

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 :

 Les 7 Principes Fondamentaux de Design dun Site

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.

 Les 7 Principes Fondamentaux de Design dun Site

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 même direction.

 Les 7 Principes Fondamentaux de Design dun Site

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.).

6. 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 :

 Les 7 Principes Fondamentaux de Design dun Site

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.
 
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 :

 Les 7 Principes Fondamentaux de Design dun Site

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).

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.

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.Dites-moi si vous avez des questions dans les commentaires ou si vous voulez discuter de votre propre site!

 
Publié par Matthieu   @   24 mars 2013 20 commentaires
Tags : , , , , ,

Suivez cet article

RSS Digg Twitter StumbleUpon Delicious Technorati

20 Commentaires

Commentaires
mar 25,
0 h 23 min
#1 Jean-Marie :

L’article est excellent. La traduction aussi.

Par contre il est dommage de ne pas citer la source.

En effet, cet article date de mai 2012 et à été publié sur le très bon site conversionxl à cette adresse : http://conversionxl.com/8-universal-web-design-principles-you-should-to-know/

Bien cordialement,
Jean-Marie

mar 25,
0 h 38 min

Bonjour et merci !
C’est un superbe article. Il n’y a rien à jeter, même pas les espaces négatifs

Auteur mar 25,
1 h 47 min
#3 Matthieu :

@Jean-Marie : Un grand merci pour cette précision de taille. C’est grace a des gens comme vous que la qualité de la blogosphere est préservée. Je ne connaissais pas ce blog conversionxl.com : je l’ajoutes immédiatement a mon aggrégateur ! Quant a l’article, merci pour Tarik de souligner toute la qualité du billet qu’il a choisi.

@Babi : Merci pour Tarik :)

mar 25,
9 h 53 min
#4 Hubert :

Bonjour,
Pour un novice comme moi en la matière, j’ai trouvé l’article vraiment très intéressant, il me fait voir les choses sous un autre angle désormais. J’ai beaucoup apprécié apprendre toutes ces choses, maintenant le plus dur pour moi sera de les appliquer sur mes sites.

mar 25,
11 h 01 min
#5 Jean :

En effet c’est un article exhaustif à bookmarker absolument ! Une ressource pour tout webdesigner et graphiste qui se respecte. Merci beaucoup, je note qu’il y a des différences entre cette traduction et l’article anglais original, vous avez remarqué les photos prises en exemple ?

mar 25,
14 h 47 min
#6 Luc :

Très bon article! Merci

mar 26,
9 h 50 min
#7 Johanna :

Hello,
J’aime beaucoup l’outil Golden Ratio Calculator pour calculer les mensurations parfaites de son site internet. Joli billet qui m’en apprends beaucoup sur les coulisses du design.

Amitiés,

Auteur mar 27,
21 h 59 min
#8 Matthieu :

@Hubert: Merci pour ce commentaire. Vous pouvez vous adressez a des professionnels pour vous aider a la mise en place. Avant, calculez combien cette amélioration du design de votre site vous permettra de gagner de CA en plus. Vous verrez vite si cela vaut le coup.

@Jean: Effectivement quelques details diff´rents entre les 2 articles

@Luc: Merci a vous !

@Johanna: J’ai eu la meme reflexion a la lecture de l’article; cet outil est une vraie pépite !

mar 28,
17 h 21 min

on apprend vraiment beaucoup de choses dans cet article! merci à l’auteur

mar 29,
19 h 19 min
#10 Tarik Peudon :

Salut tout le monde, je suis ravi que cet article vous ait appris de nouvelles choses. N’hésitez-pas à m’adresser vos questions, je ferai le maximum pour vous aider !

Tarik

mar 31,
2 h 07 min
#11 Morgan :

Excellent cet article. Super complet et bien expliqué avec les schémas qui vont bien. Avec ca on ne peut que faire des sites propres et qui convertissent !

avr 28,
23 h 39 min
#12 Dauphine :

Article assez intéressant. C’est amusant je n’étais pas du tout au courant de l’utilisation du nombre d’or dans le web design. Par contre je trouve que le principe numéro 7 est l’un des plus importants. L’espace sur le bord d’une page n’est pas du vide, il permet de construire en creux la page et bien des web designers l’oublient…

Trackbacks to this post.
Ecrire un commentaire

Subscribe without commenting

Article précédent
«
Article suivant
»