• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Les 7 Principes Fondamentaux de Design d’un site web
 

Les 7 Principes Fondamentaux de Design d’un site web

on

  • 489 views

 

Statistics

Views

Total Views
489
Views on SlideShare
489
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Les 7 Principes Fondamentaux de Design d’un site web Les 7 Principes Fondamentaux de Design d’un site web Document Transcript

    • Les 7 Principes Fondamentaux de Design dun SiteHello, je suis Tarik, le co­fondateur de Clicboutic, le moyen le plus rapide et le plus facile douvrirvotre propre boutique en ligne. Quand je ne travaille pas à améliorer lexpérience de nos clients,jaide 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, cest aussi du marketing. Ledesign, cest votre produit et son fonctionnement.Vous trouverez ici 7 principes fondamentaux dergonomie et de design qui vous permettrontdaméliorer votre site internet. Ignorez­les à vos risques et périls.Principe 1 : La Hiérarchie VisuelleSi les blondes à forte poitrine attirent plus facilement lattention 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 sagit de lordre dans lequel l’œil humain perçoit leschoses.Exercice. Classez ces cercles par ordre d’importance :
    • Alors même que vous ne savez RIEN de ces cercles, vous avez pu  les classer sans effort.Leur hiérarchie visuelle sest imposée à vous.Ce principe est également applicable à votre site internet. Certains éléments sont plusimportants que dautres (formulaires, boutons, proposition de valeur, etc.) et ils doiventfacilement attirer lattention de vos prospects.Si votre menu de navigation affiche 10 liens, demandez­vous sils 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 nest pas uniquement une question de taille. Prenons lexemple dAmazon :le bouton “Ajouter au Panier” attire immédiatement lattention au détriment du bouton secondairegrâce à sa couleur.
    • Commencez toujours par lobjectif de votre entreprise.Quel est votre objectif principal quand un client arrive sur votre site web ? Cet objectif doitdéterminer lordre 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 daccès aux catégories enpromotion et les éléments de réassurance de la boutique. La navigation est le dernier élément.Cest une bonne hiérarchie visuelle.
    • Exercice : Parcourez plusieurs sites et obligez­vous à classer les éléments par ordredimportance 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 dOrLe nombre dor (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 lharmonie.Voici à quoi ressemble le nombre dor :
    • 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 lexemple le plus célèbre :Est­ce quon lutilise de nos jours ? Pour réaliser des sites internet par exemple ? Twitter le fait :
    • 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 sinterrogent sur le nouveau design de Twitter, sachez que nousn’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 HickLa 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.
    • 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 lexpé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.Lorsquon 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 soffrent àvos clients en utilisant une navigation par filtres.Urban Outfitters a une offre extrêmement large de vêtements et de chaussures. Lutilisation defiltres leur permet de ne pas afficher lintégralité des catégories et des sous­catégories de leurcatalogue sur la page daccueil de leur site :
    • Pour en apprendre plus sur la loi de Hick (article en anglais).Principe 4 : La Loi de FittsLa 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 :
    • Ca ne veut pas forcément dire quil faut augmenter la taille de vos boutons à tout prix. Un boutonqui prend la moitié de lécran nest 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 quaugmenter dans les mêmes proportions la taille dunbouton déjà très gros représente un avantage négligeable.Concrètement, la taille dun bouton doit être proportionnelle à sa fréquence dutilisation. Vousdevriez jeter un oeil à vos statistiques pour savoir quels boutons sont les plus utilisés afindaugmenter 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 TiersVous utilisez probablement déjà des images sur votre site. Une image communiquera toujoursvos idées plus rapidement que nimporte 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 facilementloeil humain sur lobjet que vous voulez mettre en avant que lorsque vous centrez simplement laphoto.
    • 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 FormeCette 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...
    • 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 lintégralité de votre site en premier. Cest seulement dans unsecond temps quils vont percevoir la bannière den­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 dabord 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.
    • En matière de web design, assurez­vous que les éléments dune 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 quils fontpartie du même ensemble.Le site de petites annonces Vivastreet utilise cette méthode pour rendre visible lappartenancedune sous­catégorie à une catégorie principale.2. La loi de similitude
    • 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 sagir dune forme ou dune couleursimilaire ou dautres caractéristiques.Sur limage ci­dessous, loeil 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.
    • 3. La loi de clôtureNous cherchons naturellement la perfection. Cest pour cette raison que notre perception remplitles vides lorsquon observe des formes qui ne sont pas fermées. Sur limage ci­dessous, nousvoyons un cercle et un carré bien que ces formes nexistent 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 :
    • 4. La loi de symétrieNotre esprit perçoit les objets comme étant symétriques et se construisant autour d’un pointcentral. Cest à 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 nont pas de lien entre eux, nous allonsnaturellement les associer pour composer une forme cohérente.Si vous regardez limage 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. Lespacement entre les blocs doit également êtreidentique au risque de donner aux visiteurs un sentiment de déséquilibre.5. La loi de destin communNous 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.Dans lexemple 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 lattention de vos visiteurs vers un élémentimportant dune page de votre site (un formulaire dinscription, votre proposition de valeur, unbouton etc.).5. La loi de continuitéLorsquon voit une ligne, on attribue à cette ligne une trajectoire. Dans le cas dune 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 dorigine.Le studio graphique Fixel utilise ce principe pour associer les visages de léquipe à leursbiographies respectives :
    • Il existe dautres 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éLespace "négatif" est la partie dune page laissée "vide". Cest lespace qui sépare les visuels,les textes, les bordures,  lespace 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 dune page dexister. Lespace négatif est la base dunebonne hiérarchie de l’information, qu’il s’agisse de textes, de couleurs ou dimages.Une page sans espace négatif aura l’air lourde et surchargée. Cela compliquera la lecture et lanavigation de vos visiteurs et beaucoup dentre eux ne feront même pas leffort de lire ce quevous avez à dire.
    • Si vous utilisez correctement les espaces négatifs, votre site web aura lair "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 lespacenégatif et la simplicité (anglais).
    • Conclusion : Design et Art sont Deux Choses DifférentesLorsque vous travaillerez sur le design de votre prochain site ou lamélioration dun 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 lutilisateur et lobjectif 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 !