Dialogue classique à la livraison d'une maquette de site pour un client
- Mais qu'allez-vous mettre dans les trous ?
- Les trous ? Quels trous ?
- Et bien les espaces blancs, pourquoi ne les avez-vous pas remplis ?
- Mais ces espaces blancs servent justement à rendre visible ce qui est à côté, ce qui est important.
- Mais on pourrait y mettre du texte, une image ?
- Pour quoi faire ? En quoi cela renforcerait-il l'objectif de la page ?
- Je ne sais pas... c'est juste pour ne pas laisser de trous.
- ...
À trop vouloir en mettre, le visiteur ne comprend plus rien.
Les espaces blancs ne sont en aucun cas de la place gaspillée, bien au contraire, c'est de la place savamment disposée pour permettre au lecteur, à l'acheteur, au prospect, de se concentrer sur les éléments jugés importants.
Si vous avez 10 choses aussi importantes les unes que les autres dans votre page, c'est que vous avez un problème. Vous n'avez pas su hiérarchiser la valeur de vos informations, et croyez-moi, le visiteur ne le fera pas à votre place, il verra juste un gros fouillis et préfèrera probablement la clarté du site de votre concurrent...
Oui, mais j'ai beaucoup de choses à dire et à montrer !
Pas de souci, dites-les, mais évitez d'empiler les informations sans les organiser, sans laisser à l'oeil du visiteur la place de respirer, de passer d'un contenu à l'autre sans se fatiguer. Des tas de méthodes existent pour intégrer un gros volume d'information en laissant des espaces « vides » qui vont aérer la page pour rendre sa lecture plus facile.
Un exemple en image.
Ces deux sites proposent l'achat de vin. En regardant une fiche produit sur chacun d'entre eux, on se rend compte que celle qui propose le plus d'informations est paradoxalement celle qui est la plus aérée, étonnant non ?
Cliquez pour agrandir
Cliquez pour agrandir
Les espaces blancs sont indispensables au webdesign.
Ne vous focalisez pas sur le mot "blanc", les "blancs" peuvent être de n'importe quelle couleur, celle du fond de votre page.
Bien sûr, votre visiteur ne "verra" pas ces espaces proprement dits, mais il les perçoit. Sans ces blancs la consultation d'une page devient un enfer.
Je vous avais déjà donné l'exemple du site Arngren.net qui prend volontairement le contrepied de cette règle de design. S'il est très amusant de s'y perdre comme on le fait dans le fouillis d'un vide grenier, je vous défie de retrouver un article que vous aviez vu 10 pages auparavant.
Voyons d'ailleurs en image quelques extrêmes
Voici quelques illustrations reprenant des pages d'accueil que vous reconnaitrez parfois. Sans aucun doute, le confort de visualisation et de lecture est très différent de l'une à l'autre. Je vous laisse juges.
Vous avez dit fouillis ?
Connu pour sa sobriété
Connu aussi 🙂
Lorsque l'un de nos clients nous écoute 🙂
Des pros de la pureté
Les espaces vides sont aussi indispensables pour les textes
Je dois avouer que j'ai toujours eu du mal quand je lis les mémoires rédigés par certains étudiants. Les gros pavés de texte sont rapidement indigestes, il faut une volonté de fer pour se les coltiner. À l'écran, c'est pire, les yeux fatiguent encore plus vite.
Pour rendre un texte agréable à lire sur un écran il est préférable de :
- Scinder l'article en plusieurs paragraphes.
- Rédiger des intertitres.
- Faire des sauts de lignes dans les paragraphes.
- Ne pas justifier le texte (typo)
- Prévoir un interlignage suffisant
- Avoir des marges ou coupures de tailles suffisantes à droite et à gauche
- Utiliser des listes à puces (si c'est possible)
- L'illustrer avec quelques images
- Indenter les textes par rapport aux titres
En conclusion
Amener un client à comprendre que les espaces vides sont importants est sans doute un des points les plus difficiles pour un designer web. Je lisais sur CSS4 Design :
"il ne faut pas avoir peur d’user et d’abuser de l’espace blanc. Il ne coûte pas cher à produire, mais se fait curieusement plus rare à mesure que le talent du Webdesigner diminue"
Mais je dois avouer que nous abandonnons l'argumentation au bout d'un moment quand le client veux absolument faire du remplissage. Bizarrement, sur les sites des voisins, le confort de visualisation est apprécié, mais sur leurs propres sites, de nombreux clients ont peur d'avoir oublié de dire ou de montrer quelque chose... et veulent à tout prix boucher les trous !
Salut Sylvain
Alors, tu as bien profité de tes vacances au soleil ?
Tu donnes des exemples diamétralement opposés et j'aime ça. Et tu connais mon goût prononcé pour la sobriété.
J'ai encore appris une chose : ne pas justifier le texte. J'étais à mille lieux de penser que cela pouvait causer un désagrément à la lecture. J'ai corrigé ce défaut sur Infinisearch 😉
Tout à fait d'accord.
Ce que tu dis est également valable pour les pages avec du texte au kilomètre, comme une FAQ par exemple : il faut aérer les paragraphes.
Bonjour Sylvain,
Un article très réaliste, mais la situation que tu partages touche surtout des sociétés qui ont déjà quelques notions du web, sinon le néophyte te laisse faire ce que bon te semble, pourvu que ça rapporte, c'est bien trop souvent le cas d'ailleurs et les propriétaires de sites n'étant pas responsabilisé, ils se plantent lamentablement mais bref ça c'est une autre histoire et que tu avais déjà abordé en plus.
Bizarrement la tendance en matière de design, d'ergonomie est à la simplicité, on est un peu sur le monochrome de whiteman, sobriété et pureté font meilleur effet pour la vente.
Qu'une boutique comme Cdiscount joue la carte de la grande braderie c'est légitime, car ça répond à une envie de fouiller pour trouver la bonne affaire, mais leur moteur de recherche fonctionne plutôt bien et retrouver une information est tout à fait possible.... Après qu'un autre adopte cette méthode, c'est une erreur car dans la réalité on aime trouver l'information vite et une page avec trop d'informations fait perdre du temps. Il serait intéressant d'ailleurs de mesurer le taux de rebond d'une page trop fouillis par rapport à une page normale....
De bons conseils en tout cas pour de nombreux webmasters/référenceurs.
Comme dans un blog où le but est de lire, il faut aérer ses textes...
Les lecteurs resteront : pourtant il y aura moins à lire, quand qualité ne rime pas obligatoirement avec quantité
En matière de design, on entend souvent l'adage "Less is More", et parmi les captures d'écran de cet article, on voit bien quelles sont les marques qui l'applique...
Mais tout dépend de la cible à séduire ! La mise en page de type "prospectus pour grande surface" permet de toucher un très large public, alors que les grands espaces blancs ou "vides" s'adressent à des CSP+ et le haut du panier des consommateurs internautes.
La maquette de site, dès la conception du wireframe par l'intégrateur web, permet d'adresser ces questions et d'y répondre selon le but recherché : les sites "chargés" graphiquement sont souvent de type catalogue, qui cherchent à transformer rapidement la visite de l'internaute en acte d'achat.
Le design plus sobre et recherché des marques connotées "luxe" vise plutôt à renforcer l'image (branding) dans le but d'aliéner et fidéliser l'internaute, même si c'est pour déclencher l'achat des semaines voire des mois après sa visite.
Reste que l'intégration web permet de transformer une maquette statique grâce à des technologies (scripts Ajax, Flash, applet Java...) qui permettent de partir d'une présentation simple et épurée pour compléter (au survol de la souris par exemple) le contenu de la page à la volée.
En tant qu'intégrateur, je préfère largement utiliser les blancs, qui ne sont surtout pas des "espaces vides" comme on pourrait le penser 😉
A titre personnel, je trouve que justifier un texte est plus lisible et plus agréable visuellement parlant.
Par contre pour tous les autres points 100% d'accord.
Bon dimanche.
S.
Intéressant cet article, on parle souvent du vent dans le SEO, mais jamais du néant!
Et pourtant il est vraiment important de savoir gérer l'espace, un peu comme sa respiration dans une longue phrase. Sinon le visiteur/auditeur décroche et zappe...
Ca me rappelle deux acronymes ricains que j'affectionne : KISS, "keep it stupid and simple" et le fameux "less is more" !
Bel élan de rentrée !
Le "concept" est difficile à faire passer aux clients parce qu'il n'est déjà pas intégré ni par les informaticiens, ni par les néographistes et les designers autoproclamés.
Mais "heureusement" qu'il en est ainsi : ça laisse une bonne part de marché pour faire du travail propre et... Communiquant.
Bon dimanche,
MM
J'ai entendu pour la première fois cette notion d'espace vide pendant mon stage, et c'est intéressant de voir dans cet article des exemples bien opposés.
Le webdesign... je suis en plein dedans !
Oui mon site internet m'a été livré il y a peu mais ma vision de ce que devait être un espace web ergonomique a évolué depuis !
Le visiteur doit avoir accès à l'information qui l'intéresse et non celle qui nous ferait plaisir qu'il lise...
Un texte trop long ? Une astuce: "Accordion" vient à votre secours ! Cette ptite bête vous rend également de bons service en barre latérale pour le pas faire une liste interminable d'infos à la queue leu-leu.
Couleurs, sobriété, donner envie...pas si simple, un métier en somme 🙂
Allez hop j'y retourne
Concis précis et pertinent même en ce qui concerne le web design. Tout ce qui se conçoit bien s'énonce clairement...Je vous laisse terminer.
Sympa l'article
Merci
Bonjour.
Un bon rappel qui devrait faire parti de l'enseignement dans les études de Webdesigner !
J'aime quand c'est clair, épuré et blanc !
Par contre, il y a un point sensible en SEO avec les espaces vides car nous devons constamment créer du contenu.
Et il est parfois difficile de trouver le juste milieu entre le temps de travail à la mise en forme (titre, sous-titre, saut de ligne, etc ...) et le budget alloué pour effectuer ce travail ! 😉
Bref, c'est un peu HS comme réflexion car cela concerne plus l'aspect graphique plutôt qu’éditorial mais cette pensée m'a traversé l'esprit quand j'ai lu cet article ...
Le côté fouillis d'un site est à proscrire, pour en arriver à une réelle clarté visuelle et ne pas être en contradiction avec l'ergonomie tout aussi primordiale !
Mais parfois, il y a lieu de s'étonner de la notoriété d'un site par le fait le le Webdesign ne soit vraiment pas pris en considération...
Il est certain que le contenu est roi, mais il faut absolument prendre en considération l'image (la digitalisation et l'aération).
Comme tu le dis si bien, le client à toujours le dernier mot et en ta qualité de prestataire tu as pour obligation de le satisfaire...
L'espace blanc est une aération, un repos, mais aussi un moyen de diriger le regard de l'internaute, c'est en effet souvent un point de discorde avec le client, le minimalisme est un état d'esprit qui reflète une capacité de synthèse et d'efficacité... A voir aussi, les packagings des produits Apple et Microsoft, la page d'accueil de Google, etc.
Bien cool de lire un billet orienté design et ergonomie web ! Les sites épurés sont effectivement plus agréables mais on a parfois des surprises sur le roi de certains sites "à l'ancienne" !
Tres bon article, merci, je me sens concerne a vrai dire
je vais revoir ca
Tres juste !
Il est vrai qu'il est souvent difficile de placé ces espaces vides sans avoir le sentiments de perdre quelques choses. On nous ressasse sans cesse que la ligne de flottaison est importante, alors forcement, on essaie d'y mettre "tout" au dessus.
Et pourtant tout le monde apprécie les sites aérés voire sobre.
Je vois d'ailleurs que le site arngren a encore un petit coup de pub de blogaxe, meme s'il n'y a pas de lien cette fois.
Bon dimanche
Bonjour Sylvain,
A ce sujet, j'ai toujours un dilemme face à la page d'accueil des sites vitrine.
Je suis tout à fait d'accord avec toi et à titre personnel j'aime beaucoup les sites très épurés, notamment pour la page d'accueil.
Mais je remarque une chose : un site avec peu de contenu en page d'accueil se place moins bien (moins vite ?). Pour les autres pages on peut toujours créer des pages plus profondes pour répartir le contenu.
Mais la page d'accueil ! C'est vraiment un problème.
Du coup j'ai plutôt tendance à conseiller de fournir en contenu la page d'accueil. C'est un vrai dilemme... Vaut-il mieux avoir des visiteurs sur un site peut-être un peu trop chargé en page d'accueil ou vaut-il mieux avoir moins de visiteurs sur un site épuré...? Tu préfères avoir deux bras en mousse ou des jambes de 3 mètres ? ;o))
Bonne journée,
Julie
Merci de mettre des mots sur un réflexe profondément humain résumé par Voltaire...Le mieux est l’ennemi du bien...
Je suis tout à fait d'accord avec toi, à trop vouloir remplir le site, l'internaute va se lasser de chercher l'information et va partir. Rien de mieux qu'un site bien aéré où on se plait à visiter page après page et surtout à retrouver ce qu'on cherchait.
Mais encore faudrait-il que les clients se rendent compte de cela 🙂 Parfois ils oublient que la lecture sur écran est plus dure que sur papier...
Encore et toujours un bon article que tu nous proposes 🙂
Article pertinent mettant bien en évidence la problématique contenu/mise en avant. Les exemples sont bien trouvés. Il demeure toujours compliqué de faire le tri dans ses priorités et la communication que l'on souhaite aborder. Après au vue du temps moyen d'un internaute sur une page d'environ 33s donc il est évident qu'il convient de notifier l'essentiel du discours et celui bien en évidence en évitant les fioritures même si arngren.net est assez funny
Ne pas justifier le texte ? Ah oui tient j'avais pas réalisé...
Je ne comprends pas ? En ce qui me concerne je préfère largement un texte justifié à la lecture...
Un petit article que je viens de trouver et qui corrobore tes propos :
Dingue !
Un article tellement vrai... c'est le combat du relatif contre l'absolu (vous pouvez grossir le logo par rapport au slogan... OK par contre maintenant le slogan ressort moins bien, vous pouvez le grossir aussi ?). Je rajouterais que tu peux étendre ça à tous les médias visuels et pas seulement au Web : imprimerie, vidéo, cinéma, etc. Mais après c'est au designer ou au chef de projet de savoir expliquer au client pourquoi les aérations dans la page sont importantes pour mettre en avant certaines parties et comment fonctionnent les relations entre les différents éléments du design.
C'est vrai que ces remarques reviennent souvent en création de sites, en règle général ceux qui ne sont pas trop expérimentés vont même se baser sur les concurrents ou LE concurrent principal...
Comme si les autres faisaient un travail parfait et étaient des références dans leurs domaines.
Le pire je crois en webdesign, c'est que les clients y attachent une importance gigantesque alors que bien souvent l'impact sera nul.
Dès que l'on prendre en compte "les goûts et les couleurs" de chacun, personne n'est d'accord sur ce qui est "bien" et sur ce qui est "le mieux". J'ai vu des sites horribles qui transformaient très bien, alors que l'ergonomie et l'aération du design étaient ce qui doit se faire de pire dans le monde...
Un article intéressant (de toute façon, ici, ils le sont tous :p) mais qui selon moi est un peu biaisé, et ne va pas jusqu'au fond du sujet.
Pourquoi faut-il un design "épuré"? La question n'est pas anodine selon moi, surtout quand on sait que des sites comme Cdiscount (avec un design ultra pourri) ont pendant très longtemps tenu le haut du panier des sites du eCommerce (il a été leader pendant pas mal de temps, le bougre...)
=> d'autant plus que le design" brouillon" de Cdiscount était une stratégie : donner l'image d'un site low-cost pour donner au visiteur l'impression qu'il se retrouve sur une braderie web, où il pourra faire des affaires.
Tout ceci pour dire qu'un design épuré, avec des blancs, doit être fait derrière un modèle stratégique, et ne doit donc pas être mis en place de manière automatique. Tout découle d'une image de marque à construire.
Bref, ici comme dans le SEO (comme dans la vie, tiens, aussi), il n'y a pas de recette miracle 😉
Excellent billet comme toujours Sylvain. Des fois à vouloir mettre trop d'informations on fini par ne plus intéresser le visiteur. Il vaut mieux privilégier parfois la sobriété plutôt que le fouillis.
Hello Sylvain,
Voilà un billet à diffuser le plus largement possible... j'ai débuté par le graphisme à une époque ou l'on travaillait sur des maquettes papier à l'aide de Rotring, de gouache et de Lettraset (ce qui ne nous rajeunit pas, j'en conviens) et je peste en permanence contre la négligence de telles notions de base : le pouvoir des "trous", la gestion des marges (pas bénéficiaires, celles qui facilitent la lecture), les bases de la typographie, j'en passe et des meilleures. En effet le néophyte a peur du vide et pense que le prix d'un travail graphique est proportionnel à la densité des couleurs et au nombre d'éléments graphiques... un des pires boulots qu'on m'a demandé de faire a été un logo ou je devais insérer : une couronne, un jet, une villa et un yacht (bon courage).
Bonne rentrée 🙂
Salut Sylvain
🙂
Un article intéressant
on oublie souvent que le design et le designer, c'est plus qu'important
c'est comme faire simple, c'est tres compliqué en fait.
j'ajouterai dans ton article la notion de "stress" un site comme cd discount utilise cette notion et c'est fait expres, perso je n'aime pas du tout, mais leur design est une des raisons de leur succès,
par contre Apple c'est exactement le contraire, c'est "zen".
Il est certain que la categorie "les csp+" comme on dit sont bien plus sensibles à un joli design
Bravo Sylvain pour ce trait d'humour (volontaire?) : parler de blanc quand tout le monde revient de vacances tout bronzé...
J'ai apprécié la qualité de démonstration des screenshot, j'ai cependant un doute sur le texte justifié.
Je me pose quand même une question : A partir de quand la mode a-t-elle été à un design épuré sur le web. Dans mes souvenirs, tous les sites avant étaient archi saturé d'information.
@ Hervé
Trop courtes:-)
@ Pierre
Je pense que la tendance à la simplicité vient du fait qu'un site doit maintenant pouvoir s'adapter à de multiples terminaux (ordinateurs, tablettes, et surtout smartphones).
@ Integrateur
Je te rejoins complètement dans l'utilisation de techniques qui permettent d'afficher des compléments seulement au survol du curseur.
@ Syndrael
Le fait de justifier un texte rend celui-ci plus "joli", il occupe l'espace de manière plus graphique.
En revanche, ceci réduit fortement la lisibilité à l'écran, car l'oeil n'a plus de repère pour passer d'une ligne à l'autre.
Joli ne veut donc pas dire lisible. Pour preuve, les superbes enluminures réalisées par les moines, c'est graphiquement superbe, mais un enfer à lire.
C'est moins flagrant sur de petites largeurs, mais là on se retrouve avec des problèmes de césures et parfois de gros trous blancs désagréables pour la lecture.
@ Samuel
En effet, je n'ai pas repris ces acronymes, mais je plussoie.
@ Nicolas Augé
Bien sûr, nous devons mettre du contenu (SEO), mais cela n'empêche pas de le laisser respirer. Et puis performer en SEO pour que le visiteur reparte de suite n'est pas très utile.
@ Déesse julie
Même réponse qu'à Nicolas, en ajoutant la technique mentionnée par "Integrateur".
Et pour le texte justifié, c'est assez flagrant.
Un petit exemple de texte justifié assez difficile à lire alors que le contenu est intéressant ici
-http://www.philippebilger.com/blog/2012/08/la-norv%C3%A8ge-lavenir-de-la-france-.html
On est quand même sauvés, il aurait pu faire comme certains qui s'obstinent à écrire en blanc sur fond noir.
@ Mitmi.fr
Amusant ton exemple du logo et du slogan.
@ Daniel
Tu l'as dit, d'ailleurs, il est assez rare que nous réalisions des sites qui nous plaisent vraiment, le client à toujours raison et il n'a pas forcément tort 🙂
@ Spleog
Je ne suis pas un inconditionnel du design épuré, mais aéré. Je crois que l'on peut mettre beaucoup de choses dans une page web, mais en les organisant de manière à donner des points d'accroche forts pour faciliter la vie du lecteur.
@ François
Dans ton exemple, je me demande comment s'affichait le logo en petite taille 🙂
Bravo Sylvain pour ce trait d’humour (volontaire?) : parler de blanc quand tout le monde revient de vacances tout bronzé…
J’ai apprécié la qualité de démonstration des screenshot, j’ai cependant un doute sur le texte justifié.
Je me pose quand même une question : A partir de quand la mode a-t-elle été à un design épuré sur le web. Dans mes souvenirs, tous les sites avant étaient archi saturé d’information. Ne serait-ce pas google qui aurait lancé la voie, avec son design minimaliste? Apple qui aurait renforcé cette mode, avec l'iphone et l'interface simplifié à l'extrême?
La gestion du blanc négatif ("les espaces blancs") est sans doute l'exercice le plus compliqué.
Pourtant, c'est toujours négligé.
Les espaces blancs (terme "white space" plus connu en webdesign et plus parleur) est indispensable à la clarté d'un site, sinon l'utilisateur va vite se perdre et quitter le site ! La hiérarchisation des infos serait aussi invisible...
C'est vrai que les sites épurés, sobres et minimalistes sont de plus en plus "tendances" mais je pense qu'on peut très bien faire un site "graphique", avec beaucoup d'infos et de visuels tout en utilisant le white space judicieusement.
@Sylvain :
Il ne s'affichait pas, j'ai quand même monté le truc pour démontrer au client que ça n'était pas possible, il ne voulait rien entendre malgré une dépense d'énergie énorme pour lui faire comprendre que non seulement ça n'était pas possible mais que de surcroit ça ne pourrait que nuire à l'image "luxe" qu'il prétendait vouloir dégager ; j'ai donc envoyé une facture pour le boulot effectué et je l'ai envoyé se faire faire un logo chez les grecs.
Effectivement il est fini le temps où il fallait placer un maximum de textes en vue du référencement. aujourd'hui les stats utilisateur sont ce qu'il y a de plus important.
Eviter le superflu, garder que l'essentiel, dans un design cohérent avec la teneur de l'offre commerciale.
Bonjour,
Merci pour l'article.
Je suis tout à fait d'accord avec vous.
Il ne faut pas encombrer la page web. En fait, il ne s'agit pas de tout écrire mais plutôt de bien écrire. Le contenu web doit être simple, précis et concis.
Marie
Il est bien que Sylvain rappelle cette règle de base de lisibilité :
« Le fait de justifier un texte rend celui-ci plus « joli », il occupe l’espace de manière plus graphique. En revanche, ceci réduit fortement la lisibilité à l’écran, car l’œil n’a plus de repère pour passer d’une ligne à l’autre. »
Qui fait que, qu'on soit sur du papier ou sur un site desktop (ce qui ne change aujourd'hui pas trop trop grand chose), il vaut mieux que le texte ne soit pas justifié pour les lignes trop longues, ou trop courtes (qui génèrent souvent une exagération de la taille des blancs inter-mots).
Resteraient les lignes "moyennes", mais elles n'offrent guère de jeu de colonnage relativement à la ligne de flottaison... Et on est en plus, là, confrontés à la taille de l'écran de l'éventuel smartphone dont la largeur va également générer des lignes "blanchies".
Donc, oui, il vaut mieux éviter autant qu'on peut le texte justifié.
Cdiscount et Arngren c'est le mal de tête assuré en dix secondes chrono, moi ce genre de site, j'en ressors aussi vite que je suis arrivé. C'est pourtant pas compliqué de faire de quelque chose de simple et d'aéré! Enfin chacun voit bien midi à sa porte 😉
tres tres vrai tout cela - je suis d'ailleurs en train de me pencher sur une nouvelle version du muscle et j'essai de l'alléger beaucoup. pour avoir un design plus aéré claie et comme tu le dis essayer de mettre plus en avant les infos interessantes.
Je pense que le succès d'un site vient de l'ergonomie et de son SEO, entre autres. Une page d'accueil comme Cdiscount est adapté selon moi au site. Je pense qu'ils ne sont pas bête chez Cdiscount et une entreprise comme ca ne peut pas avoir que des manchots en webdesign pour combler les "blancs"
Je pense que le fouilli de la page d'accueil est adapté à la "culture" du site, à savoir des bon plans partout. C'est à l'internaute de chercher. Ce genre de page me fait penser à une brocante où le visiteur doit chercher les bons plans. Tout ca pour dire que ce qui marche pour un site ne marchera pas pour l'autre. Il y a pleins de choses à prendre en compte dans l'élaboration du design, la culture de la marque, sa cible, sa promesse, etc...
On tend de plus en plus vers les sites dits "aérés" pour améliorer l'interface utilisateur et privilégier l'ergonomie. Mais c'est vrai que malgré qu'on soit en 2012, beaucoup de clients pensent encore qu'avoir un site chargé permet d'afficher toutes les informations possibles.
L'oeil humain ne verra donc plus l'information utile mais un amat d'image de texte etc. Cdiscount est un site qui "est l'exception qui confirme la règle". Je le trouve non ergonomique, sapin de noêl et paradoxalement il marche.
Si il y a bien une chose sur la quelle je n'arrive pas à luter, c'est la justification du texte.
Allez faire comprendre qu'un dyslexique a en horreur ce genre de pages est impossible...
L'espace est précieux, il est aussi signifiant de la richesse réelle ou symbolique de l'émetteur ou du destinataire, ce qui est loin d'être une nouveauté. Ex. :
- Lorsqu'on écrivait au roi, on signifiait son importance en aérant le plus possible sa lettre, voire en gaspillant de l'espace. Inversement, le roi écrivait très serré sur un petit espace de papier pour signifier que vous étiez peu important.
- Chez les indiens, la cérémonie du Potlatch : plus on dépensait, plus on gaspillait, plus on signifiait la hauteur de sa fonction hiérarchique.
On retrouve les mêmes logiques en architecture : les sièges sociaux des grandes entreprises ont souvent des halls d'entrée immense.
Bref, on pense faire riche en remplissant à outrance l'espace alors qu'offrir au visiteur de l'espace (du blanc !) est aussi signifiant de sa richesse. Au client de le comprendre !
[désolé pour cet intermède intellectuel 😉 ]
@ Djohlan
En effet, j'avais oublié ce cas pas si rare que ça.
@ Tendactu
Non, non, tu as bien fait, j'aime bien ton intermède.
Bonjour et merci pour cet article. Je suis toujours étonné de voir à quel point certaines personnes manquent de bon sens quand il s'agit de leur page web. A trop vouloir en dire, on ne dit plus rien. C'est pourtant simple à comprendre!
Super article et je suis pratiquement d'accord avec tout sauf pour la justification.
Personnellement, j'ai toujours été embêté par la justification en raison des espaces que cela créée entre les mots. (visuellement ça me déplait fortement)
Pourtant avec les nouvelles techniques de césures il est possible d'obtenir quelque chose de très lisible à condition de ne pas négliger les autres aspects de la typographie (dont la taille du texte et l'espace entre les lignes).
Voici quelques éléments pour implémenter les césures automatiques:
* hyphens : dans le CSS3 les navigateurs pourront rajouter des césures automatiquement ( http://www.w3.org/TR/css3-text/#hyphens )
* hyphenator.js : une librairie qui fait les césures en javascript ( http://code.google.com/p/hyphenator/ )
Cependant le cas des personnes dyslexiques est évidemment à considérer (je ne connais pas d'étude qui compare les textes justifiés avec et sans césure) et à étudier de près.
Charlie est à côté du poteau en haut de l'image, rayé en bas du poteau par les traditionnels couleur blanche et rouge.
Je le trouve plutôt simple à trouver, alors pourquoi mettre des blancs dans des sites internet. CDiscount marche du feu de dieu, avec la crise tout est bon pour faire des économies, même passer 3h à chercher un produit 😀
Ah non je suis peut être pas dans le vrai là ?
On est d'accord l'ergonomie web intègre selon moi déjà ce principe de pureté qu'il faut absolument avoir. Pour certains c'est de la branlette intellectuelle, pour les autres qui l’utilise, c'est le moyen de ce payer de belles vacances en fin d'année 😉
Bonjour,
Je découvre avec délice votre blog !!!
Dans le même esprit que cet article, je me permets de vous proposer cette vidéo (que vous connaissez peut-être déjà), réalisée par une agence américaine, trouvée sur YouTube initialement et qui a maintenant son propre site internet : http://www.makemylogobiggercream.com/
Bonne continuation à tous
Si les espaces blancs doivent être utilisés habilement selon les principes, légitimes, de design, il faut faire attention à son audience avant de péter son nouveau design trop classe.
L'exemple de CDiscount est marquant, puisque tout le monde trouve ça vilain, mais ça marche du tonnerre. C'est normal puisque ça correspond au positionnement et à son audience. L'image un peu cheap du site colle tout à fait au "discount", alors qu'il n'y a pas que de bonnes affaires sur ce site.
Un autre exemple que j'avais lu dans les commentaires sur SEOMoz, le site d'une société de création de site pas cher avait décider de refaire le design pour qu'il soit plus joli. Résultat, les clients potentiels ne convertissaient plus autant car l'image renvoyée ne correspondait pas à l'offre.
Pas évident en effet de faire comprendre aux clients que les espaces vides ont un intérêt pour l'ergonomie...Comme je l'ai souvent entendu, il en veut "pour son argent" et ça passe par du remplissage inutile...
Entièrement d'accord avec le point de vue de l'article. Je serais intéressé de savoir quel impact peut avoir un passage du "chargé " vers l"épuré" en terme de temps de navigation, taux de transformation et CA. Pour ma part les sites très chargés ne font que me faire fuir, je les visites juste pour me tenir informé des tendances ( Cdiscount, priceminister...) mais je n'y achète jamais rien. LDLC parvient à faire clair dans un domaine ou l'on pourrait vite tomber dans la surabondance de référence. Résultat, à chaque fois que j'y vais, c'est pour acheter.
Autre aspect, acheter sur un site brouillon me donne un autre stress. Si j'ai un problème avec ma commande, j'ai l'impression que je vais devoir traiter le problème avec un interlocuteur qui aime bien les choses en "brouillon"-, et ce petit à priori est clairement rédhibitoire pour moi.
Bonjour,
L'espace vide c'est obligatoire dans un design déjà pour l'ergonomie mais aussi simplement pour le confort. L'exemple d'apple est très bien tout est clair et lorsque l'ont cherche quelque chose sur le site c'est facile de si retrouver. Mais c'est souvent pas évident d'expliquer à un client l'utilité de laisser des espaces vides.
ah ah... il me semble avoir déjà eu cette discussion avec un client 🙂
Dans le cas de ventes en lignes de produits discount, l'interet premier est la vente. En augmentant les points d'accroche sur la page d'accueil il y a un risque de noyer le visiteur, mais un autre encore plus grand de favoriser les achats (et notamment les achats en nombre). L'effet inverse est aussi vrai : avec un design sobre et aéré cela donne l'effet d'un produit d'exception, en général le prix va aussi avec. Berf on cherche souvent à vendre un produit unique et non en masse.
Je pense que les 2 designs ne sont pas incompatibles, ils touchent différentes sensibilités de clientèles, d'un coté ceux qui aiment la "sobriété", et l'autre qui donne l'impression d'être dans une brocante aux bonnes affaires, les gens ayant l'impression de "fouiner".
La largeur de la ligne est aussi un critere important pour le confort de lecture : pas trop long. Les regles typographiques en print precisent qu'il ne faut pas plus de 10-12 Mots par ligne. C'est peut etre moins en web.
Pas trop court non plus! les pavés de 4 mots par ligne sont difficiles a lire car l'oeil fait un va-et-vient permanent.
J'ai envie d'imprimer ce billet et de l'encadrer sur mon bureau. Heureusement qu'il y a de l'espace... c'est le point de départ de la lisibilité de l'information
Un espace c'est comme une respiration. Si on ne respire pas en parlant (sans parler de la couleur schtroumpf que l'on risque d'adopter) on perdra du sens et de l'intérêt à l'écoute.
Ben là c'est pareil !
Super article sur l'ergonomie ! On a tendance à penser trop référencement et pas assez ergonomie : )
Pour Cdiscount c'est effectivement trop chargé mais je pense que c'est un parti pris. Il me semble avoir lu un article de neuromarketing disant que le fait de proposer un maximum de choses pousse le client à acheter davantage. M'enfin je me dis que ca doit bien fonctionner sinon aucun intérêt de le faire
J'ajoute que le syndrome remplissage est présent également dans le secteur du print. Sur des flyers ou affiches, les clients ont peur d'oublier des éléments et souhaitent saturer les supports de photos et textes !
Un début d'article très intéressant, malheureusement le corps en 12px m'a rendu aveugle avant d'atteindre la fin 😛
@ Christophe
En tous cas, ta réflexion est intéressante. Elle a fait l'objet d'un long débat chez-nous, surtout avec un vieux comme moi qui a la vue qui baisse 🙂
En fait, nous avions clos cette question en nous disant que nous allions afficher quasiment la même taille de police que Google avec les paramètres par défaut, mais en utilisant du verdana réputée un poil plus lisible.
Reste que tout le monde ne sait pas forcément que l'on peut ajuster la taille de police sur un navigateur.
Bref, je suis d'accord avec toi, ce n'est pas encore parfait.
Je pense personnellement, que plus un design est simple et minimaliste mieux ça passe !
Quand tu vois le site d'Apple ( ouai Steeve Jobs était un dieu pour moi ^^ ) Trois photos et 20 mots de description et ça fait un carton !
Sinon sujet très intéressant 🙂 merci !
Pas sûr de saisir la comparaison entre les deux sites de vente de vins en ligne.
Laquelle est tellement "plus aérée" que l'autre ?
J'ai essayé de mesurer les surfaces en blanc pour comparer mais bof....
Enlight me, Master Sylvain 😀
/salute
Merci pour l'article qui rappel un minima de principes.
HAHA ton intro m'as bien fait marré. Designer de métier, j'ai souvent eu ce genre de réflexions, va faire comprendre le concept du "negative space" à ton garagiste toi 😀
J'aurais tendance à user et d'abuser des blancs, le visiteurs est ainsi focalisé sur l'information, sans parasitage.
Un site aéré est bien plus agréable à visiter. Un site comme CDiscount me fait fuir, tout est surchargé, les fiches produits sont difficilement lisibles, bref, c'est galère et je préfère acheter sur Amazon. Au moins tout est plus clair et niveau tarif c'est kif-kif.
J'ai aussi l'impression que de plus en plus de banques s'inspirent du "design" de CDiscount, voilà quelques exemples :
-https://www.lcl.fr/
-http://www.ca-loirehauteloire.fr/
-http://www.ca-sudrhonealpes.fr/
-http://www.bnpparibas.net/
Franchement, ils se foutent du monde, c'est du n'importe quoi.
un site comme cdiscount est un style lié à ce qu'il propose … un fourre tout !
il est certain que le designer a un rôle pour l'ergonomie d'un site, l'accès à l'info etc …
mais tenter de convaincre le client est parfois inutile … il veut mettre sa patte (pour logo idem) !
Parfois, il est préférable de le laisser faire ses propres erreurs plutôt que de l'éduquer en tentant de vouloir avoir raison (et perdre son temps) …
Il paie, il a ce qu'il veut … à partir du moment ou vous vous êtes exprimés (donner votre avis de pro) ! il se rendra compte de lui même de ces erreurs en échangeant avec partenaires / proches etc … le tout est de ne pas le perdre !
seuls les faits comptes : ROI, transformation etc …
@Olivier : OMG les sites de banque, on dirait des sites de VPC …
ya du boulot à prendre / faire !
Ca me fait raler quand je m'ID sur la SG et qu'on me me propose des produits alors que je veut mon compte bancaire !
Sebastien
Des espaces blancs, ou de couleur! Mais des espace libres sont en effets nécessaires, ca joue sur le taux de transfo c'est indéniable surtout quand on veut générer de la prise de contact, il faut que les éléments soient clairement visible du premier coup d'oeil.
Contrairement au commentaire précédent, je trouve que certains sites comme c discount sont les exception qui confirment la règle. Ok le site donne mal au crâne mais on a l'impression qu'on peut absolument tout trouver, quoiqu'on cherche! Et en plus qu'on va faire de bonnes affaires vu que les promo et les ventes flash clignotent de partout!
Merci pour cet article, il est vrai qu’aujourd’hui beaucoup de webdesigner suive la bonne tendance pour valoriser le contenu de leurs sites. Malgré tout je vois encore souvent des sites au contenu et mise en page "magazine" et à l'ergonomie douteuse...
Je pense que le problème vient d'ici, certaines agences ont gardées à l'esprit une mise en page "print" et la répète sur le web peut être par peur de manquer de place ? Qu'en pensez vous ?
Merci pour ces exemples concrets.
Salutations,
C'est typiquement le genre d'article qui porte à sourire en le lisant.
Totalement d'accord avec toi, la sobriété (lorsque c'est possible) c'est la clé de la communication graphique.
Tu nous parles ici des clients qui veulent tout combler, j'ai eu affaire (en tant que graphiste) à un dirigeant d'entreprise de création de site internet qui ne supportait pas les "blancs" sur les maquettes, je ne garde pas les meilleurs souvenirs de notre collaboration :).
Les règles de rédaction s'appliquent aussi pour les commentaires !
Encore merci pour l'article.
C'est bien les blancs dans le web design...
En plus dans le vide on ne s'entend pas crier.
Référence à Alien, le CD discount de l'espace internet.
Évidemment que les larges espaces apportent un plus à une mise en page. Le tout est d'arriver à le justifier. Le client en veut pour son argent et a tellement de choses à dire sur son produit que chaque pixel de l'écran doit contenir un argument.
La phrase à sortir à ce moment là est bien "on entend mieux un chuchotement dans le silence qu'un cri dans une foule".
Tu as tout à fait raison sur le fait qu'il faille aérer le contenu, surtout lorsqu'il s'agit d'un site e-commerce qui est normalement très riche en contenu. Il faut également penser que plus l'internaute s'enfonce dans les profondeur du site plus il se "lasse". Il est donc primordial de penser une ergonomie permettant au surfer de trouver son bonheur en 3 clics max.
Après il y a une autre chose à pouvoir mettre en avant. Il faut utiliser un type de graphisme et de mise en page qui soit en adéquation avec le message que l'on veut faire passer. Si la page d'accueil de CDISCOUNT est aussi "fouillis", c'est aussi pour accentuer le côté discount des produits proposé ( en contraste avec la page d'accueil de APPLE qui est épurée pour laisser transparaitre le côté sobre, efficace, réfléchi, ... )
J'ai beaucoup rit en lisant le passage de cet article : "Mais qu’allez-vous mettre dans les trous ?". Merci 🙂
Une publicité disait un jour : "Le luxe c'est l'espace." De la même façon, je pense que "Le luxe, c'est le minimalisme". En quelque sorte...
Perso quand je visite un site comme Cdiscount je trouve qu'un peu de blanc ça peut faire du bien aux yeux ;). Plus sérieusement trop d'info tue l'info et ça devient compliqué d'avoir une ergonomie potable quand on surcharge tout son design d'éléments "pailettes" en tout genre.
J'admets avoir été moi même concerné par l'effet remplissage mais c'est effectivement pas ce qu'il y'a de mieux et je l'ai constaté avec un taux de rebond de plus de 80%. Après épuration, le client à l'air tout de suite plus attiré et c'est du benef en plus qui n'est pas de refus. Après épuration, c'est presque 15% d'augmentation du CA ! 😉