les 7 principes fondamentaux de design d’un site web

19
Les 7 Principes Fondamentaux de Design d'un Site Hello, je suis Tarik, le cofondateur 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 ecommerce 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. Ignorezles à 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 :

Upload: clicboutic

Post on 28-Nov-2014

631 views

Category:

Documents


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Les 7 Principes Fondamentaux de Design d’un site web

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'ouvrirvotre 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 vosconversions. Peu importe les tactiques que vous avez déjà mises en oeuvre pourbooster votre taux de conversion, si votre site ne ressemble à rien : vous gaspillez vosressources.

Le design ne se réduit pas au travail d’un graphiste. Le design, c'est aussi du marketing. Ledesign, c'est votre produit et son fonctionnement.

Vous trouverez ici 7 principes fondamentaux d'ergonomie et de design qui vous permettrontd'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, lesvisuels les plus proéminents remplissent ce rôle sur le web. La hiérarchie visuelle est l’un desprincipes fondamentaux du web design. Il s'agit de l'ordre dans lequel l’œil humain perçoit leschoses.

Exercice. Classez ces cercles par ordre d’importance :

Page 2: Les 7 Principes Fondamentaux de Design d’un site web

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 plusimportants que d'autres (formulaires, boutons, proposition de valeur, etc.) et ils doiventfacilement 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 soientplus 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 secondairegrâce à sa couleur.

Page 3: Les 7 Principes Fondamentaux de Design d’un site web

Commencez toujours par l'objectif de votre entreprise.

Quel est votre objectif principal quand un client arrive sur votre site web ? Cet objectif doitdé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­êtretemps de renouveler mes draps !), suivi de la proposition de valeur ("Réveillez votre intérieur" etsurtout ­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 enpromotion et les éléments de réassurance de la boutique. La navigation est le dernier élément.C'est une bonne hiérarchie visuelle.

Page 4: Les 7 Principes Fondamentaux de Design d’un site web

Exercice : Parcourez plusieurs sites et obligez­vous à classer les éléments par ordred'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 auxproportions esthétiquement parfaites ­ du moins, un certain sens de l'équilibre et de l'harmonie.

Voici à quoi ressemble le nombre d'or :

Page 5: Les 7 Principes Fondamentaux de Design d’un site web

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 :

Page 6: Les 7 Principes Fondamentaux de Design d’un site web

Voici ce que Doug Bowman, le directeur artistique de Twitter, a révélé après la sortie de lanouvelle 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 zonede contenu doit mesurer 593px et la barre latérale 367px. Si la hauteur de votre site est de760px, vous pouvez le scinder en deux parties de 470px pour la zone de contenu et 290px pourle 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 pourprendre une décision.

Pensez à toutes ces fois où vous vous êtes retrouvé au restaurant à devoir choisir parmi unmenu sans fin... C’est tout le temps un casse­tête. En revanche, si le menu vous permettait dechoisir 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.

Page 7: Les 7 Principes Fondamentaux de Design d’un site web

Cette loi s’applique également au web : plus il y a de catégories sur votre site, plus ce seradifficile pour vos clients de choisir sur quel lien cliquer (et certains ne cliqueront nulle part). Vouspouvez améliorer l'expérience de vos clients en réduisant le nombre de choix disponibles. Cesdé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 ensortir.

Lorsqu'on vend une grande quantité de produits, on a besoin de filtres ! Si vous gérez uneboutique 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 defiltres leur permet de ne pas afficher l'intégralité des catégories et des sous­catégories de leurcatalogue sur la page d'accueil de leur site :

Page 8: Les 7 Principes Fondamentaux de Design d’un site web

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 :

Page 9: Les 7 Principes Fondamentaux de Design d’un site web

Ca ne veut pas forcément dire qu'il faut augmenter la taille de vos boutons à tout prix. Un boutonqui prend la moitié de l'écran n'est pas une bonne idée : pas besoin de citer une étudemathé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 vousaugmentez sa taille de 20 % tandis qu'augmenter dans les mêmes proportions la taille d'unbouton 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. Vousdevriez jeter un oeil à vos statistiques pour savoir quels boutons sont les plus utilisés afind'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 toujoursvos 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 neufparties égales. Les 4 points formés par les intersections du quadrillage servent ainsi à alignerles éléments les plus importants de votre image. Ce type de composition attire plus facilementl'oeil humain sur l'objet que vous voulez mettre en avant que lorsque vous centrez simplement laphoto.

Page 10: Les 7 Principes Fondamentaux de Design d’un site web

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é avantde les appréhnder comme éléments individuels.

Si je prends cette image par exemple...

Page 11: Les 7 Principes Fondamentaux de Design d’un site web

Vous avez remarqué de quelle manière vous avez reconnu un chien sans avoir eu à vousconcentrer sur chacun des points noirs qui le constituent ? Nous voyons toujours une imagedans 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 unsecond temps qu'ils vont percevoir la bannière d'en­tête, le menu, le pied de page et ainsi desuite.

Il existe 8 lois de Gestalt pour nous aider à anticiper la manière dont les gens vont percevoirnotre 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 sonttrop proches les uns des autres, ils seront perçus comme un seul et même objet.

Page 12: Les 7 Principes Fondamentaux de Design d’un site web

En matière de web design, assurez­vous que les éléments d'une page n’appartenant PAS aumême groupe ne soient pas perçus comme un objet unique. De même, certains éléments devotre site doivent être regroupés (votre menu, le pied de page, etc.) pour montrer qu'ils fontpartie du même ensemble.

Le site de petites annonces Vivastreet utilise cette méthode pour rendre visible l'appartenanced'une sous­catégorie à une catégorie principale.

2. La loi de similitude

Page 13: Les 7 Principes Fondamentaux de Design d’un site web

Lorsque la distance entre les différents objets ne nous permet pas de les distinguer, on a alorstendance à regrouper les plus similaires entre eux. Il peut s'agir d'une forme ou d'une couleursimilaire ou d'autres caractéristiques.

Sur l'image ci­dessous, l'oeil humain va rassembler les points noirs dans un groupe et les pointsblancs dans un autre.

Sur notre site, les avis de clients Clicboutic sont tous présentés de la même manière. Unvisiteur doit intuitivement comprendre que chaque bloc a le même contenu.

Page 14: Les 7 Principes Fondamentaux de Design d’un site web

3. La loi de clôture

Nous cherchons naturellement la perfection. C'est pour cette raison que notre perception remplitles vides lorsqu'on observe des formes qui ne sont pas fermées. Sur l'image ci­dessous, nousvoyons 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 longueursvariables. 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 :

Page 15: Les 7 Principes Fondamentaux de Design d’un site web

4. La loi de symétrie

Notre esprit perçoit les objets comme étant symétriques et se construisant autour d’un pointcentral. C'est à la fois plus facile et plus rassurant de pouvoir séparer visuellement plusieursobjets 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 allonsnaturellement les associer pour composer une forme cohérente.

Si vous regardez l'image ci­dessus, vous voyez certainement trois paires de parenthèsessymétriques. Au lieu de six parenthèses individuelles.

Si votre site e­commerce est construit autour de trois colonnes, assurez­vous que les colonnesde gauche et de droite ont la même largeur. L'espacement entre les blocs doit également êtreidentique 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

Page 16: Les 7 Principes Fondamentaux de Design d’un site web

même direction.

Dans l'exemple du dessus, on regroupe mentalement les mains pointées en direction du logocar elles suivent la même direction.

Vous pouvez utiliser ce principe pour guider l'attention de vos visiteurs vers un élémentimportant d'une page de votre site (un formulaire d'inscription, votre proposition de valeur, unbouton etc.).

5. La loi de continuité

Lorsqu'on voit une ligne, on attribue à cette ligne une trajectoire. Dans le cas d'une intersectionentre plusieurs objets (par exemple des lignes), nous allons percevoir deux lignes comme deuxentités ininterrompues. Même si elles se chevauchent, notre esprit continue à distinguer leslignes d'origine.

Le studio graphique Fixel utilise ce principe pour associer les visages de l'équipe à leursbiographies respectives :

Page 17: Les 7 Principes Fondamentaux de Design d’un site web

Il existe d'autres lois de Gestalt comme la loi de la bonne figure ou de la familiarité mais jepense 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 lecombler. Il permet aux différents objets d'une page d'exister. L'espace négatif est la base d'unebonne 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 lanavigation de vos visiteurs et beaucoup d'entre eux ne feront même pas l'effort de lire ce quevous avez à dire.

Page 18: Les 7 Principes Fondamentaux de Design d’un site web

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 nese résume pas à retirer du contenu. Pour obtenir un design propre et épuré, utilisez l’espacedont 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 votremessage 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é etguident l’œil de vos clients vers l’essentiel.

Ressources supplémentaires : Voici un article regroupant plusieurs liens utiles sur l'espacenégatif et la simplicité (anglais).

Page 19: Les 7 Principes Fondamentaux de Design d’un site web

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 envous aidant des principes présentés dans cet article.

Dites­moi si vous avez des questions dans les commentaires ou si vous voulez discuter devotre propre site !