Une grille est une trame qui divise verticalement et horizontalement un espace en deux dimensions. C’est un outil de mise en page millénaire qui a été utilisé dès la rédaction des manuscrits. On l’utilise aujourd’hui pour la conception des supports imprimés et des documents numériques.

Une grille peut être plus ou moins complexe et le graphiste est libre de choisir sa typologie en fonction de ses besoins et de ses envies.

Pourquoi utiliser une grille en design web ?

Tout graphiste qui conçoit un support présentant de l’information (manuscrite, typographique, photographique, schématique … ) se confronte au problème de la composition. Un site web est généralement constitué d’éléments divers : des textes, des images, des icônes, des éléments d’interface …. Comment agencer sur une page blanche tous ces éléments entre eux, dans un espace donné, sachant qu’il existe des milliers de possibilités ?

Aidez-vous d’une grille. En effet, celle-ci apporte de nombreux avantages :

Elle guide le positionnement

La grille définie à l’avance des repères verticaux et horizontaux à partir desquelles le graphiste peut s’appuyer pour caler ses éléments. Il ne place plus ses blocs dans le vide mais se laisse guider par les colonnes et les gouttières de la grille pour subdiviser l’espace de sa page, la structurer et choisir des positionnements précis.

Elle apporte de l’unité

Un site web est le plus souvent constitué de plusieurs pages. Pour que l’utilisateur comprenne que ces pages sont connectées entre elles et qu’elles appartiennent à une même entité, il est nécessaire que le graphiste apporte une certaine unité graphique.

En utilisant une grille commune pour toutes les pages, le graphiste assure une partie de cette unité. En effet, les gouttières qui servent de repère pour les marges, seront les mêmes sur l’ensemble du site et la taille des modules sera proportionnelle à la largeur des colonnes de la grille. Toutes les pages, même si leur composition est différente, seront construites à partir de la même trame.

Elle améliore le confort de lecture

La grille permet des mises en page en colonnes. Cela est particulièrement utile pour les textes qui, au delà d’une soixantaine de signes par ligne, deviennent fatiguant à lire. En effet, notre regard trouve de l’inconfort à lire de longues lignes de texte mais aussi à retrouver la ligne suivante (retour à la ligne) lorsque celui-ci doit parcourir une longue distance.

Le confort de lecture est aussi amélioré par les alignements verticaux car ils guident le regard à travers la page. Un contenu calé sur une grille organise la page et simplifie sa perception globale.

Le site UX Magazine, riche en contenu, pousse l’utilisation de la grille à son paroxysme.

Comment utiliser une grille ?

Du point de vue du graphiste

La première chose à faire est de choisir sa grille. Grille fixe ou flexible ? Quelle largeur globale ? Combien de colonnes ? Quelle largeur pour les colonnes et les gouttières ?

Ces choix seront souvent orientés par les contraintes du projet : site élastique ou fixe, résolution minimale retenue, contenu riche ou pas …

La largeur d’une colonne est l’unité de base pour déterminer quelle sera la largeur minimum d’un élément. Si un élément (bloc de texte, photo, formulaire …) nécessite une largeur plus grande, le graphiste s’arrangera pour choisir une largeur qui est un multiple de l’unité de base (2,3,4 … colonnes).

Les gouttières servent de repères pour les zones d’espace entre les blocs.

Une fois ce principe simple assimilé, divisez votre contenu en modules et disposez les sur la grille. Bien sure, cette disposition n’est pas aléatoire et doit tenir compte d’un certain nombre de critères (harmonie, équilibre, ergonomie, cohérence, hiérarchisation, marketing …)

Dans un processus de création de site web normal, un inventaire du contenu, un zoning et un placement des éléments sur une wireframe ont déjà été effectué. Une partie du travail de positionnement est donc partiellement entamé et le graphiste n’a plus qu’a structurer la page de façon plus stricte sur sa grille de positionnement. Notons que cette étape peut entrainer des modifications de la wireframe sachant que les contraintes d’espace occupé par les contenus et la résolution d’écran peuvent ne pas avoir été pris en compte lors du dessin des wireframes.

Du point de vue de l’intégrateur

Au début de l’ère du HTML, on détournait l’utilisation des balises « table » (prévues pour présenter des données tabulaires) afin de concevoir la mise en page graphique des pages web en calant les éléments dans les cellules du tableau.

Aujourd’hui, cette technique est bannie pour des raisons de sémantique et de performance. Elle a été remplacé par l’utilisation des CSS qui permettent des positionnements précis sur la page.

A l’aide de framework CSS, il est maintenant possible pour le designer et l’intégrateur de concevoir des mises en pages web sur des grilles communes. Le graphiste choisit la grille sur laquelle il va s’appuyer pour sa mise en page et l’intégrateur génère le framework CSS correspondant. Ce framework CSS lui permettra de respecter au mieux les positionnements et les alignements des éléments.

L’utilisation de ces framework ne sont pas obligatoires mais leur usage facilite grandement le travail lorsqu’ils sont maitrisés à la fois par le graphiste et l’intégrateur.

Il existe de nombreux framework CSS qui proposent une feuille de style de positionnement basée sur une grille. Je citerais par exemple 960 Grid System et Blue Print pour ceux que j’ai déjà utilisé.

Faire oublier la grille

Une fois que votre mise en page est terminée, il vous reste encore pas mal de travail de design.

Si vous avez besoin d’estomper l’aspect grille de votre mise en page, il existe des solutions créatives en utilisant judicieusement les images d’arrière plan par exemple.

Sur ce sujet, Jina Bolton a écrit un article intéressant intitulé Breaking Out of the Box publié sur le site SitePoint.

Et pour les allergiques aux grilles, allez faire un tour sur le blog de Peter Gabbor : Design et Typo, pour découvrir l’article sur David Carson, véritable casseur de grilles.

Conclusion

L’utilisation d’une grille dans la conception d’une mise en page est une technique qui à largement fait ses preuves. C’est un outil précieux qui aide les graphistes à ordonner et organiser le contenu, à unifier la composition des pages et à améliorer le confort de lecture.

La rigidité des grilles n’est que apparente et ne doit pas vous inhiber dans la création de vos compositions. N’hésitez pas à explorez la multitude de possibilités qu’elles vous offrent.

Inspirez vous des journaux, magazines et autres support du print. Vous y trouverez d’innombrables exemples de mise en page créatives à base de grilles. Regardez également autour de vous, les grilles se retrouvent partout, dans les motifs, l’architecture, les objets de notre quotidien …

Sur le web, allez faire un tour sur la galerie CSSJuice, vous y trouverez des exemples de sites basés sur un design « grille ».

Sources :

- Ouvrage : The complete Graphic Designer – Ryan Hembree – Edition Rockport
- Design & Typo « Grilles de Mise en Page | typographie web et print« 

Les sprites, c’est quoi ?

L’utilisation des sprites pour le web est une technique permettant d’afficher plusieurs vues d’une seule et même image à l’aide des feuilles de style CSS.

Cette technique est issue des anciens jeux vidéos qui utilisaient des petits personnages pixelisés appelés « sprites » qui étaient tous dessinés sur une seule image pour des raisons de performances.

Il s’agit donc d’utiliser une image sur laquelle est réunie soit plusieurs instances de l’état d’un objet, par exemple un menu, un bouton soit un ensemble d’autres images comme des icônes par exemple.

La technique des sprites permet, grâce aux CSS, de ne montrer qu’une partie (une vue) de l’image globale. Selon le cas, en modifiant les paramètres de positionnement dans la feuille de style CSS, il est possible de déplacer la vue sur l’image globale sans montrer le reste de l’image. Nous utiliserons donc une seule image pour simuler l’affichage de plusieurs images (en réalité différentes vues de l’image globale) sur les pages web d’un site internet.

Quels intérêts d’utiliser les sprites ?

Si vous travaillez dans le secteur internet, vous savez que lors du chargement d’une page web, il y a autant de requêtes http effectuées sur le serveur qu’il y a d’images dans la page. En utilisant qu’une seule image globale, vous réduisez à une requête http le chargement des images (puisqu’en réalité on ne charge qu’une image).

De plus, l’image globale est bien souvent moins lourde que la somme des poids des images individuelles. Cela permet de gagner en performance sur la vitesse d’affichage de la page et en consommation de bande passante dans certains cas.

Donc tout l’intérêt des sprites est de gagner en performance de chargement des pages. Du point de vue du graphiste, il y a un autre avantage : avoir moins de découpes à faire pour l’étape d’intégration.

Comment mettre en place les sprites ?

Comme un exemple, vaut mieux qu’un long discours, nous allons réaliser un bouton image avec effet rollover utilisant la technique des sprites.

Notre bouton aura trois états : un état « initial » lorsque le bouton n’est pas activé ou survolé, un état « survolé » lorsque l’utilisateur passe sa souris sur le bouton et un état « enfoncé » lorsque l’utilisateur clique sur le bouton.

La première chose à faire est de dessiner dans un logiciel de traitement d’images les trois états du bouton puis de les réunir sur une seule image.

Ensuite, il va falloir implémenter le code XHTML/CSS.

Voici le code XHTML qui affiche le bouton :

<a id="container" href="#" title="Exemple de bouton sprite"></a>

Remarque : Le code utilisé dans cet exemple est simple pour vous transmettre la technique mais c’est un très mauvais exemple à suivre sur le plan sémantique et accessibilité. Voir la conclusion.

Il ne nous reste plus qu’à définir le fichier CSS qui va nous permettre notamment grâce à la propriété « background » de positionner notre vue sur l’état du bouton qui convient en fonction de l’action de l’utilisateur.

Le calcul du positionnement de la vue est la partie la plus fastidieuse. Vous pouvez déterminer « à la main » les coordonnées du positionnement en mesurant la position des états du bouton sur l’image globale. Mais si vous ne voulez pas vous embêter à faire ces mesures, vous pouvez utiliser un générateur de sprites pour faire le travail à votre place.

Il y a quelques bogues avec les navigateurs Opéra et Safari à prendre en compte lors de la création de Sprites CSS :

Opéra, pour les versions inférieur ou égale à 9.0, ne reconnait pas une position de fond supérieure à 2042px ou inférieure à -2042px et utilise ces limites à la place en cas de dépassement. Ceci dit 2024px, ça vous laisse pas mal de marge.

Safari a un problème avec la répétition des images de fond. Cela peut être résolu en spécifiant une valeur d’espacement vertical plus large.

Je vous conseille d’utiliser par exemple le générateur de sprites en ligne de « Project Fondue ». Ce générateur prend en compte les bugs des navigateurs Opéra et Safari. Utilisez le comme suit :

1. Réunissez toutes vos images dans un fichier .zip, le nom donné aux images sera repris dans la feuille CSS générée.

2. Uploadez votre fichier .zip via le formulaire du générateur de sprites.

3. Définissez vos paramètres. Dans mon exemple, j’ai gardé le paramétrage par défaut proposé sur la page du générateur. Pour plus de détails sur le paramétrage, lisez l’aide en ligne.

4. Validez le formulaire.

Le générateur de sprites construit alors une image globale :

… et le code CSS correspondant :

.sprite-enfonce { background-position: 0 -30px; }
.sprite-initial { background-position: 0 -108px; }
.sprite-survole { background-position: 0 -186px; }

#container li {
background: url(monImageGlobale.png) no-repeat top left;
}

Le code implémenté pour mon bouton donnera :

a#container {
background:url(MonImageSprite.png) no-repeat 0px -108px; /* initial */
width: 180px;
height: 40px;
display: block;
}
a#container:hover { background-position: 0 -186px; } /* survolé */
a#container:active { background-position: 0 -30px; } /* enfoncé */

Résultat :

Conclusion

Comme nous l’avons vue dans cet article, l’utilisation des sprites permet de gagner en performance au niveau de la vitesse d’affichage des pages web en réduisant le nombre de requêtes http effectuées sur le serveur. Quelques secondes de gagnées sur le chargement de vos pages peut vous rapporter gros car c’est du temps d’attente en moins pour les internautes et donc moins de perte potentielle d’audience.

Pour les graphistes, travailler avec un intégrateur qui utilise les sprites permet de regrouper plusieurs images dans un seul fichier png et d’éviter de fastidieuses découpes.

Cependant, l’utilisation des sprites peut causer quelques inconvénients si ils sont utilisés de manière inappropriée.

Par exemple, laissez suffisamment d’espace entre vos motifs sur l’image globale pour permettre aux utilisateurs de grossir le texte des pages web sans risquer de démasquer les autres motifs. Trouvez un bon compromis entre l’espacement des motifs et la taille de l’image globale car plus votre image globale sera grande, plus il faudra de mémoire à l’agent utilisateur pour la décompresser.

Les sprites peuvent également causer des problèmes de sémantique et d’accessibilité. Mon exemple de bouton est un mauvais exemple sur le plan sémantique car j’utilise une balise html « A » pour afficher un bouton au lieu d’une balise « INPUT » ou « BUTTON ». De plus ma balise « A » ne comporte pas d’intitulé texte. J’ai donc détourné la balise « A » à des fins esthétiques au détriment de la sémantique et de l’accessibilité. Bien que graphiste, je pense qu’il ne faut jamais céder à ce type de compromis.

Il est donc fortement conseillé d’utiliser les sprites pour les images de décorations uniquement (fond d’illustration, icônes …) et pas sur des images de contenu ou des images qui aident à la compréhension du contenu. En effet, si pour une raison ou pour une autre, les CSS sont désactivées, ou si une personne handicapée utilise un navigateur texte, vous perdez l’affichage de vos images. Si il s’agit uniquement d’images de décorations, leur disparition est génante sur le plan graphique mais la page conserve une accessibilité aux informations.

Pour conclure, utilisez les images sprites pour gagner en performance mais ne les utilisez pas dans un contexte où elles réduisent la sémantique et l’accessibilité.

Sources :

– Sprites CSS : Meurs, découpe d’images, meurs ! – Traduction française, sur le site Pompage.net d’un article de Dave Shea parue sur A List Apart.
– Des sprites jusqu’à plus soif – Eric Daspet
– CSS Sprites: What They Are, Why They’re Cool, and How To Use Them – Chris Coyer
– Exactly How to Use CSS Sprites – Nettuts

Générateurs de sprites :

– Application Java ou PHP à télécharger : SmartSprites
– Générateur de sprites en ligne : Project Fondue
– Générateur de sprites en ligne : CSSSprites

Introduction

La maquette graphique est l’aboutissement d’un long travail de réflexion effectué en amont. Elle est généralement attendu comme le Messie par le client, car c’est l’élément qui va donner l’aperçu le plus fidèle du futur site.

Je crois qu’il est opportun d’essayer d’impliquer le client au processus de création. Par exemple, en travaillant avec lui sur l’élaboration du moodboard. Si le client s’est fortement impliqué dans la recherche d’idées, il y a plus de chances qu’il valide la maquette finale, ayant lui même participé à certains choix créatifs.

Attention cependant à rester maitre de la direction artistique car le graphiste professionnel c’est vous, c’est donc vous le plus compétant pour faire les choix créatifs définitifs. Ne laissez donc pas le client jouer au designer et vous transformer en simple exécutant.

Si l’étape du moodboard a été sérieusement préparée et que la proposition a été validée par le client, un certain nombre de choix créatifs ont déjà été décidés. Il vous reste encore pas mal de travail mais vous ne devriez pas avoir l’angoisse de la page blanche. Lorsque vous concrétisez votre création, n’oubliez pas de garder à l’esprit les lignes directrices qui ont été définies lors des réflexions préalables.

Le process

Le process de création que je vous propose ici n’est pas un modèle qui fait référence. C’est simplement une manière de faire parmi d’autres et inspirée de ma pratique personnelle.

Reprendre les éléments du brief créatif

Si vous avez bien travaillé sur le brief créatif, vous disposez déjà d’indices sérieux pour décider du chemin que va prendre votre design. Vous avez normalement définis avec le client un certain nombre d’objectifs auxquels le design va devoir répondre. Raisonner en terme d’objectifs permet de rationaliser les choix créatifs. Cela vous aidera à écarter les évaluations purement personnelles en vous raccrochant lors de vos justifications graphiques aux objectifs qui avaient été décidés.

Le moodboard

Une partie des choix créatifs peut se faire à l’étape du moodboard si vous décidez d’utiliser cette technique.

Pour trouver des idées, je commence par m’imprégner du brief créatif et de l’univers du client. Votre culture graphique et votre culture générale vous aidera également.

Ensuite, je fais une espèce de brainstorming en écrivant sur une feuille de papier tous les mots qui me viennent à l’esprit: verbes, adjectifs, couleurs, objets, références, images … Il est important de ne pas se censurer et d’écrire tout ce qui vous passe par la tête. Je laisse reposer quelques temps et je complète ma liste au fur et à mesure que les idées surgissent. Pour trouver d’autres mots, il m’arrive de consulter la définition du dictionnaire des mots que j’ai écrit ou de consulter un dictionnaire de synonymes.

Quand j’estime avoir fait le tour, je commence à trier ma liste. Je ne garde que les mots qui me semblent se rapprocher le plus du thème qui m’intéresse.

Une fois ma liste triée, je commence une recherche sur les couleurs, les textures, les motifs, les illustrations et les photos. Tous ces éléments doivent suggérer le thème de ma futur création graphique, les valeurs à mettre en avant, le message à faire passer, la tonalité graphique choisie. Pour cela, j’essaye de mettre les mots de ma liste en image ou en couleur. Par exemple, si j’ai noté la mot « vitesse » et que ce mot me parait coller au message graphique, je dessine ou je recherche des illustrations qui évoquent la vitesse.

Si je choisis d’utiliser une image d’arrière plan qui occupera une grande partie de mon design, j’établis généralement ma palette de couleurs en allant piocher des teintes à la pipette dans cette image.

Le croquis

Rester devant son écran peut, à mon avis, devenir vite improductif à cette étape du process. Je pense que sortir une feuille et commencer à gribouiller ses concepts sur le papier est plus productif. Je n’aime pas y passer des heures mais cela me permet de tester plusieurs idées assez rapidement sans perdre du temps sur des détails techniques.

L’inspiration graphique

Pour stimuler ma créativité, j’aime bien parcourir les galeries de site web sur internet ou dans des ouvrages spécialisés. Le risque c’est de proposer des choses qui se rapprochent de ce qui a déjà été fait. Pour être original, mieux vaut trouver ses idées ailleurs : magazines, affiches, packaging, notre environnement … Si je vois une idée qui me séduit, je la mets dans un coin de ma tête ou je prends une photo. Lors de la phase de création, j’essaye de reprendre cette idée et de l’interpréter à ma manière.

Travail sur écran

Je travaille sur un logiciel de traitement d’images bitmap. Certains préfèrent les logiciels vectoriels. A vous de voir.

Je me fixe une règle de nommage pour mes calques afin de m’y retrouver plus facilement par la suite.

Je regroupe mes calques par thème en fonction de leur emplacement sur la maquette : en-tête, menu, colonne latérale droite, pied de page … Si vous travaillez sur Photoshop vous pouvez regrouper vos calques dans des dossiers. Gimp par contre, ne possède pas encore cette fonctionnalité.

J’essaye de garder un maximum de calques car cela me donne plus de souplesse si je dois faire des modifications ultérieures. L’inconvénient c’est que le fichier s’alourdit et que passé un certain nombre de calque, la manipulation devient moins rapide et la recherche du bon calque fastidieuse. J’ai donc tendance à modulariser mes fichiers. Je fait un fichier par bloc ou entité significative. Ensuite, je fais une copie aplatie du bloc et je la colle dans un fichier qui assemble tous les blocs de ma page, donnant l’aspect final de la maquette.

Sur le calque supérieur, je garde toujours l’image d’une grille en mode « Multiplier » (Gimp) qui me sert de repère pour ma mise en page. Cette grille est constituée de colonnes, de gouttières et de modules dont je connais la taille en pixels. Cela me permet, par la suite, de facilement coter ma maquette pour aider les intégrateurs à positionner les éléments et paramétrer leurs feuilles de styles. En plaçant cette grille sur un calque à part, je peux rapidement la masquer ou modifier sa transparence.

Je garde toujours la version originale de mon fichier qui comporte les calques. Je peux en avoir besoin pour décliner les autres pages du site ou pour effectuer des modifications à la demande du client. Je fournis aux intégrateurs une version aplatie épurée des calques de texte et parfois une version avec les côtes en pixels et les codes couleurs.

Une fois la maquette terminée, je m’en éloigne quelques temps pour y revenir plus tard. Il arrive que des choses que je n’avais pas remarqué lors de la phase de création, me choquent lors d’un second regard. J’effectue alors quelques corrections.

Exemples de livrables (maquettes graphiques) pour l’intégration issus du projet jing-inteactive :

> Maquette graphique : aspect finale

> Maquette graphique sans le contenu dynamique

> Maquette graphique livrée avec des informations pour l’intégration (grille placée en transparence)

Préparer un argumentaire

Lorsque vous allez présenter votre maquette, il va falloir être capable de justifier vos choix créatifs.

Lorsque j’estime que ma maquette est terminée, je rédige un petit texte qui explique ma démarche et les raisons de mes choix créatifs. Pendant cette phase, je vérifie que mon discours est en accord avec les informations du brief créatif. Pour réussir cette étape il faut se poser la question : « En quoi mes choix graphiques répondent aux objectifs fixés lors du brief créatif ? »

Conclusion

Ce process correspond à ma façon de travailler lorsque les conditions (temps, budget) sont idéales (ce qui est rarement le cas, il faut bien l’avouer). Lorsque le temps manque, certaines étapes de ce process passent à la trappe. C’est dommage car c’est la qualité du travail qui en pâtit mais lorsque les budgets sont serrés vous n’avez pas beaucoup le choix.

Chacun doit trouver la méthode de travail qui lui correspond le mieux. Elle peut être très éloignée de celle que je viens de vous présenter mais cela n’a aucune importance du moment que vous vous y retrouvez.

Les étapes décrites ci-dessus sont réalisables dans de bonnes conditions si le délai dont vous disposez est raisonnable. Bien souvent, les clients, pour économiser de l’argent, réduisent ces délais. A vous de leurs faire comprendre avec diplomatie, que la qualité de la prestation ne sera pas la même selon la durée de l’échéance dont vous disposerez.

Pour résumer, présentez ces équations à votre client :

Bonne qualité + travail rapide = prix très élevé
Bonne qualité + prix bas = beaucoup, beaucoup de temps
Bonne qualité + prix correct = temps raisonnable
Bonne qualité + prix bas + travail rapide = croire au Père Noël

Introduction

Avant de parler de la simplicité comme mode de communication dans le design et en guise d’introduction, je souhaiterais rappeler quelques définitions issues du dictionnaire (Larousse 2003)

Simplicité

« Qui suffit à soi seul, qui n’a besoin de rien d’autre pour produire l’effet attendu. Qui est constitué d’un petit nombre d’éléments qui s’organisent de manière claire. »

La simplicité s’oppose à la complexité.

Simpliste

« D’une simplicité exagérée, qui ne considère qu’un aspect des choses. »

Quelque chose de simpliste est incomplet, il y a un manque, un oublie volontaire ou involontaire.

Minimalisme

« Recherche de solutions requérant le minimum de moyens. »

Le minimalisme est aussi un mouvement artistique où les formes sont simplifiés à l’extrême et les éléments orchestrés dans la simplicité la plus radicale.

Complexité

« Qui se compose d’éléments différents, combinés d’une manière qui n’est pas immédiatement saisissable. »

Ordre

« Ensemble d’éléments organisés, rangés, classés, disposés de manière logique. »

A l’ordre s’oppose le chaos.

Chaos

« Ensemble d’éléments désordonnés, confus. »

A la lumière des ces définitions, nous voyons qu’il ne faux pas confondre le terme « simple » qui exprime le dépouillement de tout superflu avec le terme « simpliste » qui exprime le fait de ne donner qu’une vision incomplète des choses. A la simplicité s’oppose la complexité mais qui n’a rien à voir avec le chaos. La complexité exprime une notion de quantité alors que le chaos exprime le désordre et la confusion.

Les questions auxquelles je vais essayer de répondre dans cet article sont : « Comment simplifier et pourquoi simplifier ? »

Comment simplifier

La simplicité n’est pas une formule magique qui répond à tous les problèmes de design. Un site web complexe peu sembler difficile à designer, la tentation de le simplifier pour résoudre nos problèmes de design est une fausse solution. Si un certain nombre de contenu (une certaine complexité) est nécessaire, la réponse graphique est davantage dans l’organisation de ce contenu plutôt que dans l’élimination d’éléments. Vous trouverez sur le site de Andy Rutledge , un article intitulé « Complex Order, Simple Chaos » qui décrit bien cette réflexion.

Pour organiser un contenu, je vous renvoie aux articles de ce blog consacrés aux « Grilles », à la « Gestalt », à la « Hiérarchisation de l’information » …

La simplicité est souvent préconisée par les ergonomes, les architectes d’information, certains designer. Cependant, elle ne s’applique pas systématiquement à tous les cas de figure.

Parfois, la complexité ou le chaos sont des effets recherchés. Par exemple pour exprimer certains affects, pour laisser le spectateur se perdre dans un arrangement ou il va explorer et examiner une multitude de sujets ou pour faire vivre une expérience particulière à l’utilisateur dans un contexte bien précis (publicité, expérimentation, innovation …).

Simplifier un design consiste essentiellement à réduire le nombre d’éléments mais aussi à organiser les éléments et utiliser des éléments connus.

Simplifier en réduisant

Comme nous l’avons vue en introduction, la simplification consiste à éliminer tout ce qui semble ne pas être absolument nécessaire. A première vue, cela peut sembler facile à faire mais il n’en ait rien, la simplicité n’est pas simple !

En effet, éliminer des éléments, que se soit des fonctionnalités ou des objets graphiques, se fait sur la base d’une décision subjective. Cette décision comporte un risque, celui de tomber dans une conception trop simpliste, c’est à dire où il manque finalement des éléments. On se rend donc compte que entre simplicité et simplisme, existe une frontière ténue difficile à percevoir mais facile à franchir.

Pour nous aider, Jacob Nielsen, ergonome Américain, préconise avant d’ajouter un élément conceptuel sur un site, de se poser deux questions :

1- « Cet élément simplifie t’il la tâche de l’utilisateur ? »
2- « Cet élément apporte t’il une valeur ajoutée ? »

… si la réponse est « non » éliminez le.

Donc si vous êtes dans une démarche de simplification par la réduction, avant d’ajouter un élément graphique dans votre design, demandez-vous si cet élément rempli un objectif ou participe à communiquer un message. Penser en terme d’objectifs est un bon moyen d’éviter de tomber dans le piège du simplisme.

Simplifier en organisant

Organiser les éléments d’une composition graphique ou d’une mise en page favorise la simplification. Souvenez-vous de notre définition de la simplicité : « Qui est constitué d’un petit nombre d’éléments qui s’organisent de manière claire. » , on y parle bien d’organisation.

Ce qui est organisé devient plus simple à percevoir et plus simple à comprendre parce que notre cerveau a besoin de cet ordre pour analyser plus rapidement son environnement.

Simplifier par la connaissance

Ce qui est connu devient plus simple. En effet, notre cerveau analyse sans cesse ce qu’il perçoit. Toute nouveauté lui demande un effort cognitif intense.

Lorsqu’une situation a déjà été rencontrée, analysée, pratiquée et enregistrée, le cerveau fournit beaucoup moins d’efforts que face à une situation nouvelle. C’est pourquoi les choses connus nous paraissent plus simples. Il est beaucoup plus simple pour un expert en physique quantique de vous expliquer la théorie du Big-Bang que pour un débutant.

Lorsque vous concevez le design d’une interface, vous rendrez la tâche de l’utilisateur beaucoup plus simple si vous faites appel à des références que celui-ci connait. Par exemple si vous utilisez une icône représentant un caddie pour symboliser le panier d’un site e-commerce, l’utilisateur le reconnaitra comme tel parce qu’il connait le sens associé à cette icône.

Pourquoi simplifier

J’ai cherché les raisons qui pourraient motiver un graphiste à se lancer dans une démarche de simplification de ses design. En voici quelques unes, mais il se peut que j’en ai oublié certaines. Si vous en trouvez d’autres, n’hésitez pas à en discuter dans les commentaires de cet article.

Parce que nous avons naturellement besoin de simplicité

La Gestalt (psychologie de la forme) a observé à travers la loi de Prägnanz que notre cerveau recherche toujours la simplicité. Lorsque des choses se présentent à nous de façon ambigüe de sorte qu’elles peuvent être interprétées de différentes manières, notre cerveau choisira toujours l’interprétation la plus simple.

L’exemple le plus évocateur est notre tendance à voir des visages humains partout. Prenez un smileys ce n’est qu’une succession de caractères spéciaux qui n’a aucun sens et ne fait référence à aucune règle (grammaire ou autre…). Ce groupement de caractères peut donc sembler ambigüe. Notre cerveau y cherche une logique, une interprétation, un sens. Il va regarder dans sa « base de données » (la mémoire) pour faire des comparaisons avec des informations connues. Et naturellement, il va identifier un visage et ne retenir que cela à notre attention plutôt que de se dire : « il s’agit d’un point virgule suivie d’un tiret lui même suivi d’une parenthèse fermante ». Pourquoi ? parce que c’est plus simple pour notre cerveau de voir le monde à notre image (chose que nous connaissons bien) que de le voir tel qu’il est dans sa réalité froide et dénuée de sens.

Cette aptitude naturelle à la simplification pourrait aussi s’expliquer par notre instinct de conservation. Dans un environnement hostile et nouveau, notre cerveau réptilien (qui gère notre instinct de survie) à besoin d’identifier le plus rapidement possible ce qui l’entoure pour y distinguer un éventuel danger et prendre la décision de fuir sans perdre de temps. En généralisant un ensemble complexe, nous gagnons du temps.

Imaginez le temps qu’il nous faudrait à identifier une pelouse si nous devions pour cela voir chaque brun d’herbe individuellement. Si un prédateur se trouve dans les parages, il n’attendra pas que vous ayez terminé d’observer tous ces bruns d’herbes.

Donc, lorsque vous simplifiez un design, vous soulagez l’effort cognitif de l’observateur, vous facilitez son travaille de réflexion. Car naturellement, le cerveau humain aime qu’on lui mâche le travaille. Attention cependant, tomber dans la facilité n’est pas toujours heureux car vous risquez de basculer dans l’ennui et le désintérêt.

Mettre en valeur

L’architecte Allemand Ludwig Mies van der Rohe (1886 – 1969) s’est rendu célèbre par ses réalisations mais également par ses formules choques sur le design. Il est l’auteur du fameux « Less is more », « Moins c’est plus ».

Cette formule signifie que moins vous mettez d’éléments, plus ceux qui restent sont mis en valeur. En effet, les éléments d’une composition rentrent en compétitions les uns par rapport aux autres et cela génère ce qu’on appel du « bruit visuel ». Moins il y a de compétiteurs en liste, plus ceux qui restent ont de chance de gagner… l’attention du spectateur.

Cela est également bien exprimé par le dessinateur de BD Scott McCloud, qui dans son livre « L’art de l’invisible » dit en parlant du dessin humoristique : » Quand [...] nous faisons tendre une image vers l’abstraction, nous éliminons des détails mais par contre nous en mettons d’autres en valeurs. En épurant une image pour n’en garder que sa signification essentielle, le dessinateur humoristique amplifie cette signification … »

Donc simplifier un design (par élimination) peut servir à mettre l’accent sur certains éléments considérés comme essentiels. Si on ne voit qu’eux par ce que les autres éléments sont tout simplement absents, notre attention n’a d’autre choix que de se focaliser sur ceux qui existent. Il s’agit donc ici de renforcer la portée d’un visuel en le dépouillant de détails accessoires.

L’attention de l’observateur peut également être obtenu en hiérarchisant le contenu par des procédés graphiques. Mais vous n’obtiendrez jamais l’efficacité qu’apporte la simplification. Si vous considérez que certains éléments sont superflus, éliminez les (simplification) dans le cas contraire, organisez-les (hiérarchisation, grille …).

Faire gagner du temps

Dans un monde où tout va plus vite, où de plus en plus de choses s’offrent à nous, où le temps disponible est précieux; gagner du temps devient appréciable.

Internet est un lieux d’abondance ou l’internaute doit trier et faire des choix parmi une multitude de sites web pour trouver ce qu’il cherche. Comme il manque de temps, l’internaute privilégie les sites claires qui lui permettent de trouver plus facilement l’objet de ses recherches.

Plus un site sera simple, plus il sera claire, plus son confort augmentera et plus rapidement l’internaute trouvera ce qu’il cherche.

Engager le spectateur

Dans l’art Zen, les Japonais pensent que si tout est exprimé, l’intérêt de l’observateur disparaît.

En décrivant les choses de manière la plus dépouillée possible, vous réduisez leur description à leur stricte minimum. Cela permet d’éveiller l’intérêt et l’imagination de l’observateur en lui laissant une marge d’interprétation.

En effet, en ne révélant pas tout, en permettant à l’observateur de se projeter dans votre univers, en lui laissant la liberté d’imaginer une histoire, vous engagez le spectateur dans votre design.

La simplicité en se concentrant sur l’essentiel fourni cette liberté d’interprétation à l’observateur.

Une forme d’esthétisme

La simplicité est une forme d’esthétisme très prisée par certaines cultures. L’art Zen Japonnais en ai le meilleur représentant. A l’opposé, d’autres cultures (Occidentales, Arabes …) ont, à certaines époques, plutôt privilégié l’abondance regorgeant de beautés (jardins à la Française, ornementations baroques, ornementations des mosquées …) saturant d’informations visuelles l’observateur. Cette abondance de beauté était certes un témoignage de richesse et de beauté mais trop de sollicitation ne nous fait il pas passer à côté de l’essentiel ?

Tout cela n’est qu’une histoire de gouts, d’objectifs et de mentalité, là n’est pas la question. Ce qui est intéressant, c’est de comprendre ce que la simplicité peut apporter à l’esthétisme.

La simplicité permet d’apporter le maximum d’impact avec un minimum de choses. C’est une manière d’atteindre une forme de grâce, d’élégance c’est à dire de beauté par la retenue. La simplicité est esthétique parce qu’elle apporte de la subtilité, du raffinement, de l’élégance, de la sérénité et de la suggestivité aux choses auxquelles elle s’applique.

Simplicité et webdesign

Je vais vous présenter quelques exemples de sites web ayant appliqués la simplicité dans leur design.

Voici le site de Almeter Design, une agence de design qui propose des identités visuelles pour les marques. J’ai rarement vue un design web où la simplicité a été poussée à ce point. Tout est réduit à sa plus simple expression, pas de textures, d’aplats, d’ornementations ou de couleurs ostentatoires. Même le logo de l’agence est d’une extrême simplicité.

Page d’accueil :

Page « Contact » :

Page « About » :

Page « Work » :

Prenons maintenant un site de commerce qui à priori est plus complexe qu’un site corporate. Le site Crate & Barrel est un bon exemple. Bien qu’un site e-commerce nécessite de nombreuses fonctionnalités, un catalogue, un système de caddie … vous pouvez, en organisant le design et en retirant les gadgets, aboutir à des pages simples et claires. En voici la preuve :

Page d’accueil :

Une des pages du catalogue :

La encore, rien d’ostentatoire. Les fonctionnalités sont réduites au strict minimum. Pas d’images ou d’effets graphiques gratuits, de l’espace, de l’organisation et de l’alignement.

Dernière exemple avec le site 3Rings. Voici un site au design un peu plus coloré et élaboré. On retrouve bien dans ce design une esthétique épurée, élégante et raffinée. De simples aplats de couleurs, un contenu bien hiérarchisé et aligné, des espaces qui laisse respirer la composition.

Conclusion

Nous avons vue dans cet article que la simplification consiste à réduire (voir masquer), organiser et utiliser des références connues.

La simplification améliore la clarté d’un message ou d’une mise en page et facilite l’effort cognitif de l’observateur tout en l’impliquant dans votre design. La simplicité a donc beaucoup d’avantages et répond a un besoin naturel chez l’observateur.

Simplifier n’est pas un acte aisé, il requiert de la pratique, de la réflexion et de la vigilance. Ce n’est pas une démarche a appliquer systématiquement, surtout si votre objectif n’est pas de clarifié un ensemble d’éléments et d’informations ou d’inciter l’observateur à imaginer ce qui n’est pas montré.

Réfléchissez toujours à vos objectifs et vous saurez alors si vous devez utiliser la simplification ou pas.

Sources :

– Ouvrage « Site web : priorité à la simplicité » de Jakob Nielsen et Hoa Loranger – CampusPress
– Ouvrage « Les mouvements dans le peinture » P. Fride R. -Carrassat et I. Marcadé – Larousse
– Ouvrage « Présentation zen de Garr Reynolds – Pearson
– Ouvrage « Loeil du photographe et l’art de la composition de Michael Freeman – Pearson

Introduction

L’importance de l’unité dans un design web est parfois sous-estimée, c’est pourtant un principe simple à mettre en place. Même si votre site web comporte de nombreuses rubriques qui doivent se distinguer les unes des autres, toutes ces rubriques, sous-rubriques, pages, appartiennent à un même ensemble. Pour que votre internaute sache qu’il se trouve toujours dans cet ensemble, il est important de lui fournir des indices visuels qui baliseront sa navigation. Cette cohérence visuelle, non seulement rassurera votre utilisateur, mais participera aussi à l’harmonie de votre design.

Mettre en place de l’unité dans votre design

Mettre en place de l’unité dans votre design consiste à répéter dans l’ensemble de votre site certaines caractéristiques. Cela donnera un style, une personnalité à vos créations tout en unifiant l’ensemble de vos pages. Cette cohérence participe à l’esthétisme du site, au plaisir d’utilisation de l’interface et permet de donner la sensation à l’utilisateur de naviguer en terrain connu.

Cette unité apparait souvent dans les détails. Pour la mettre en place, vous pouvez jouer sur un ou plusieurs éléments de la composition :

La typographie

Utilisez peu de typographies différentes dans vos créations. Une, deux voire trois sont grandement suffisantes dans la plupart des cas. Si vous choisissez d’utiliser plusieurs typographies, il est préférable que l’une d’entre elles soit la typographie dominante que l’on retrouvera sur toutes les pages du site. Pour apporter de la variation, vous pourrez jouer sur la taille de la police, sur son style, sa couleur ou sa casse.

Si on observe la page d’accueil du blog www.alistapart.com on remarque que le nombre de polices utilisé est faible. Probablement deux, une police bâton pour le texte principal et une police à empattement pour les titres, sous-titres, le menu et le logo. L’unité s’observe donc dans la constance de l’utilisation de deux polices pour des éléments précis avec toujours la même règle d’usage (ex: les titres et sous-titres sont toujours affichés avec la même police à empattement). Malgré un nombre réduit de polices, le webdesigner a su varier les effets typographiques en jouant sur la casse, la justification, la taille, la couleur, le style du texte.

Les images

Grâce aux images, vous pouvez facilement mettre en place une unité de style. Vous pouvez par exemple choisir de n’utiliser que des photographies noir et blanc. Vous pouvez également choisir judicieusement vos images de sorte que certaines lignes ou formes se répètent ou se retrouvent dans l’image d’arrière plan de vos pages. Vous pouvez aussi utiliser des icônes sur toutes vos pages qui seront dessinées dans le même style graphique.

On retrouve dans l’image de la page « About us » du site www.savethetrees.co.uk (un oiseau posé sur une branche) des lignes (diagonales) et des couleurs (le vert) qui rappellent celles qui sont dessinées dans l’image d’arrière-plan.

Les couleurs

Maintenir une palette graphique sur l’ensemble de son design participe beaucoup au style que vous allez instaurer et à la mise en place d’une unité graphique. Rien ne vous empêche par exemple de choisir plusieurs couleurs pour identifier et distinguer différentes rubriques, mais cette typologie chromatique doit s’insérer dans une cohérence colorimétrique plus large pour unifier l’ensemble. L’unité chromatique peut également se retrouver dans la typographie : par exemple en choisissant une seule couleur pour les liens hypertextes, une seule couleur pour les titres de niveau H2, une seule couleur pour le contenu texte…


Nous avons ici, la copie d’écran de deux pages différentes du site www.multimediahaam.com. L’unité des couleurs est respectée sur l’ensemble du site: le texte principal est blanc, les titres vert pomme, le fond texte en noir …

Les formes

Dans un design web, vous retrouvez des formes dans les photographies, le logo, les boutons, les cadres de contenu … Si vous décidez de dessiner des cadres de contenu d’une certaine manière, garder cette cohérence sur toutes vos pages afin de maintenir une unité sur l’ensemble de votre site.

Le site www.exprimo.it a choisi de baser son graphisme sur des formes arrondies en goutte d’eau. Pour rester cohérent avec ce choix, les formes arrondies se retrouvent sur plusieurs éléments comme le logo, le cadre de contenu principal, les cadres de contenus texte à l’intérieur des pages, les vignettes.

Textures/motifs

Comme les images, les textures ou les motifs peuvent être un moyen de maintenir l’unité sur les différentes pages. L’exemple le plus simple est de conserver un unique arrière-plan texturé sur toutes les pages du site.


Le site www.incandescence.com utilise abondamment des motifs géométriques dans le design de ses pages. Bien que le motif ne soit pas exactement le même sur toutes les pages, son utilisation est constante et constitue le principal effet visuel du site.

La mise en page

La façon de disposer certains éléments ou de construire votre mise en page peut être utilisée de manière redondante pour créer de l’unité. Par exemple, garder certains éléments toujours à la même place quelle que soit la page (logo, menu, pied de page, fil d’Ariane …). Maintenir certaines marges constantes de façon à ce que des éléments clés apparaissent toujours de la même manière quelque soit la page. Pour vous aider dans cette démarche, l’utilisation d’une grille de mise en page est fortement conseillée.

La mise en page et la disposition diagonale des pages du site www.angryretail.com est audacieuse mais donne un style bien particulier au site. Ce choix de la mise en page reste constant sur l’ensemble du site.

Conclusion

L’unité est un principe simple à mettre en place. Il permet à la fois de donner de la cohérence au design, ce qui rassure l’utilisateur, et de favoriser l’harmonie visuelle de la composition donc l’esthétisme.

Pour mettre en place de l’unité dans vos design, vous pouvez jouer sur de nombreux éléments. Mais il ne faut pas tomber dans un excès d’unité au risque de produire un visuel trop monotone. A vous de sentir le bon dosage entre variété et unité pour concevoir un design cohérent mais qui éveille suffisamment l’intérêt de l’internaute.

Introduction

Pour faire passer un message, il est important d’interpeler et de retenir l’attention du spectateur. Pour y parvenir, le graphiste doit soigner sa composition. Comme nous l’avons déjà vu, la composition d’une création fait appel à plusieurs principes du langage visuel. La notion d’équilibre est l’un de ces principes.

Les éléments présents dans une composition (formes, lignes, textures, couleurs, densités …) ont chacun un poids visuel. Plus le poids visuel d’un élément est important, plus il aura un pouvoir d’attraction fort.

Notre œil étant naturellement à la recherche d’équilibre, proposer au spectateur une composition équilibrée et harmonieuse lui apportera une certaine satisfaction. On s’approche donc ici de la notion d’esthétisme qui reflète le plaisir qu’éprouve l’observateur à regarder une création.

Nous allons distinguer dans cet article deux types d’équilibre. L’équilibre statique basé sur la symétrie et l’équilibre dynamique qui se construit sur une asymétrie.

L’équilibre statique – symétrie

L’équilibre statique est obtenu en mettant en place au centre de votre cadre un axe ou un centre de symétrie autour duquel les éléments se ressemblent et se répartissent en miroir.

Une composition basée sur un équilibre statique satisfait notre œil car elle est harmonieuse, stable et rassurante. En effet, la symétrie fait partie intégrante de notre environnement. On la trouve par exemple dans l’architecture ou dans la nature et plus particulièrement dans la physiologie des êtres vivants. Une composition basée sur la symétrie renvoie une impression de stabilité, de sérénité, d’équilibre qui satisfait notre perception.

On pourra donc utiliser l’équilibre statique pour mettre en place un effet esthétique, une ambiance statique, une atmosphère rassurante et immuable, une beauté froide, une impression d’équilibre, de pérennité, de structure. L’équilibre statique a été abondamment utilisé en peinture classique.

Si l’équilibre statique est séduisant, rassure et favorise l’harmonie; il a en revanche l’inconvénient d’endormir l’intérêt du spectateur. En effet, les forces mises en jeu sont toutes égales, s’opposent entre elles et finalement s’annulent. Les compositions basées sur un équilibre statique, bien que superficiellement attractives, sont finalement trop simples et manquent de tension pour véritablement éveiller notre intérêt de façon significative.

L’équilibre statique peut donc poser un problème d’attention car lorsque vous êtes dans un environnement serein, vous êtes plus disposé à la sieste qu’a vous maintenir dans un état d’alerte.

C’est la raison pour laquelle, l’équilibre statique, n’est pas toujours recherché par les graphistes, surtout si leur objectif est d’attirer et de maintenir l’attention du spectateur. En revanche, si votre objectif est de rassurer, de calmer et d’établir une ambiance sereine, ce type d’équilibre est tout à fait adéquat.

Exemples d’utilisation de l’équilibre statique en webdesign

Site www.ramarek.com

Site www.baselinedc.com

L’équilibre dynamique – asymétrie

L’équilibre dynamique se construit sur une asymétrie. L’équilibre n’est plus obtenu par une répartition et une disposition identiques des éléments de part et d’autre d’un axe de symétrie mais par une compensation du poids des éléments dans la composition.

L’utilisation de l’équilibre dynamique permet au créatif de générer une tension dans son visuel et donc d’attirer davantage l’intérêt du spectateur tout en conservant une certaine harmonie.

Pour établir une composition équilibrée à partir d’éléments disparates, il va falloir jouer sur la disposition des objets dans le cadre et sélectionner des objets dont les caractéristiques vont permettre de compenser le poids visuel de chacun.

Équilibre des tailles

Plus un objet est de grande taille plus son poids visuel augmente. Pour établir un équilibre entre plusieurs objets de tailles différentes, il faudra les répartir de sorte que leur poids respectif se compensent.

Un objet volumineux sera équilibré si on lui oppose plusieurs objets moins volumineux mais dont la somme des poids compense le poids de l’objet de plus grande taille.

Équilibre spatial

On peut également rétablir l’équilibre entre des objets de tailles différentes dans un cadre donné par leur répartition spatiale par rapport au centre du cadre.

Plus un objet est situé près d’un bord du cadre, plus son poids visuel augmente. Un objet de petite taille peut compenser le poids d’un objet de grande taille si sa disposition spatiale est plus proche du bord que l’objet de grande taille.

Équilibre des couleurs

Plus un objet a une teinte saturée, plus son poids visuel augmente. Si le sujet principal de votre composition a une forte présence colorée, vous pouvez équilibrer cette présence en créant plusieurs rappels avec la couleur en question. Vous pouvez aussi équilibrer la composition en compensant le sujet principal par un autre objet dont la teinte est également saturée. Les artistes utilisent souvent les couleurs complémentaires pour équilibrer et contraster leurs compositions.

Équilibre des valeurs

Toute couleur correspond à une valeur de gris. Le principe d’équilibre des valeurs est donc étroitement lié à celui des couleurs.

Ici, j’ai simplement passé l’image en couleur ci-dessus en valeur de gris. On voit bien que chaque teinte selon sa saturation et sa luminosité possède une valeur qui contraste plus ou moins avec son environnement.

Équilibre des espaces négatifs et positifs

Chaque objet possède une forme qui occupe un espace dans la composition. Ces espaces sont appelés espaces positifs. L’espace présent entre les objets (vide) laisse également apparaitre des formes que l’on appelle espaces négatifs.

En déplaçant les formes on modifie et on déplace à la fois les espaces positifs et les espaces négatifs. Par conséquent espace positifs et négatifs sont interactifs et régissent ensemble l’équilibre de la composition.

Dans le premier cadre, les objets sont répartis de manière uniforme. Comme ils possèdent tous la même valeur, la composition semble encombrée et donne une impression d’étouffement.

Dans le second cadre, l’accumulation des objets dans un coin du cadre laisse l’autre partie vide et provoque un déséquilibre.

Dans le troisième cadre, les objets sont répartis dans tous le cadre mais leur différence de valeur et de texture modifie la perception des pleins et des vides. Le triangle dense du bas attire notre attention mais il est équilibré par l’espace qui l’entoure qui parait moins encombré qu’il n’est en réalité.

Équilibre hétérogène

Les différentes caractéristiques d’un objet (taille, couleurs, valeurs, position spatiale …) peuvent participer à l’équilibre d’une composition. Ici, un objet de grande taille est équilibré par un objet de taille inférieure mais dont la valeur est plus contrastée.

L’espace est encombré. L’occupation de l’espace nous donne une sensation de monotonie et d’étouffement.

Exemples d’utilisation de l’équilibre dynamique en webdesign

Sur la page d’accueil de mon blog, j’avais un déséquilibre à gauche avec la présence du logo, de la vignette et de l’encadré du dernier article publié et la liste des articles secondaires. A droite, le menu principal et le menu secondaire, le champ recherche et l’icône de flux rss formaient un ensemble beaucoup moins dense et semblaient flotter dans un vide que l’on ne retrouvait pas à gauche de la page. Pour rééquilibrer l’ensemble, j’ai placé l’illustration du poulpe en haut à droite.

Sur le site www.tarantinocafe.de, l’oeil est attiré à gauche par la photographie du portrait de Tarantino. Cette photographie noir et blanc est contrebalancée par un cadre vert à droite qui est le seul élément coloré de la page et qui contraste sur la page monochrome. Le teinte verte du cadre se retrouve par petites touches dans le logo et le contenu texte. Ce rappel contribue également à équilibrer la composition.

Le point focal du site clandrei.de et l’enfant se situant à droite du cadre. En effet, les êtres vivants et plus particulièrement les humains, attirent toujours notre attention en premier dans une composition. Le site se divise en trois bandes horizontales. Les deux bandes du haut sont d’une teinte peu saturée alors que celle du bas est saturée. L’enfant se situant dans les deux bandes peu saturées, il est équilibré par la bande du bas d’une teinte beaucoup plus vive. On note également la présence d’une grosse typographie qui rééquilibre la présence de l’enfant sur le plan horizontal. Enfin, un rappel de la teinte saturée de la bande du bas est présent dans le T-shirt de l’enfant.

Dernier exemple avec le site www.dr84.com. A première vue, ce site pourrait sembler déséquilibré par la place imposante de la photographie. Mais la bande noire de gauche, grâce à un fort contraste avec le fond beige, rééquilibre horizontalement le poids de la photographie. La présence du menu en haut et le texte de présentation en police large participe aussi au rééquilibrage de la page mais cette fois ci verticalement.

Conclusion

L’équilibre est une notion importante et puissante qu’il faut prendre en compte dans l’élaboration de nos compositions. Utilisé à bon escient, ce principe peut être d’une efficacité redoutable pour exprimer certaines impressions.

Un équilibre statique est adapté pour certains effets esthétiques (réflexions, ressemblance …) ou pour instaurer une atmosphère rassurante et tranquille.

Pour donner un peu plus de « peps » à une composition, on choisira un équilibre dynamique.

Mais la recherche de l’équilibre n’est pas une fin en soi. Tout dépend de ce que vous voulez exprimer. La mise en place d’un déséquilibre peut aussi être recherchée par le graphiste pour exprimer une instabilité, une gêne, un inconfort… Une fois de plus, vos choix dépendront du message que vous voudrez véhiculer dans vos créations.

Sources:

- Ouvrage: L’oeil du photographe et l’art de la composition – Michael Freeman – Pearson Edition
- Ouvrage: Composition – David Präkel – Editions La Compagnie du Livre
- Révision et approfondissement des notions basiques de composition – Arts appliqués, Academie de la réunion

Introduction

Pour rentrer dans le vif du sujet, voici une définition courte du mot « affordance »: l’affordance est la qualité d’un objet à suggérer son utilisation. L’ergonome, Amélie Boucher, définit l’affordance comme étant les possibilités d’action suggérées par les caractéristiques d’un objet. Ce qui signifie, dans d’autres termes, la même chose.

L’affordance est une notion importante en ergonomie car elle facilite le travail cognitif des internautes. Plus un élément est affordant, plus l’internaute peut anticiper son comportement et son utilité.

Quel rapport avec le webdesign me direz-vous ?

Sur le web, les objets sont virtuels, ils sont représentés graphiquement. Le graphiste peut donc directement intervenir sur l’affordance d’un élément web. En effet, l’apparence des objets va participer à son affordance en jouant sur différentes dimensions tel que la forme, la couleur, sa localisation dans l’interface, la présence d’éléments indiçant la présence d’un lien, sa mise en évidence pour faciliter son repérage. Il faut aussi s’intéresser au comportement de l’objet lorsqu’il est sollicité car cela participe également au renforcement de son affordance.

Graphisme et affordance

Les éléments qui ont besoin d’une affordance forte dans une interface web sont les éléments avec lesquels l’internaute va interagir. On peut donc citer: les boutons, les liens hypertextes, les menus, les éléments de formulaire et plus généralement tous ce qui est cliquable.

Lorsqu’un internaute arrive sur un site qu’il n’a jamais vu, comment sait-il ce qu’il doit faire pour répondre le plus rapidement possible au besoin qui l’a amené sur ce site ?

Tous simplement en reconnaissant, grâce à son expérience du monde réel, des indices qui l’informeront sur l’utilisation des objets présents dans l’interface.

Les facteurs qui vont permettre à l’internaute de percevoir l’affordance d’un objet sont :

– Le contexte: l’environnement dans lequel l’objet est représenté.
– La culture de l’internaute: l’influence des normes sociétales sur la compréhension de l’utilisation de l’objet.
– L’instinct: une association inconsciente entre l’objet et son utilité liée aux caractéristiques physique de l’objet.
– Le mental: la compréhension et les attentes de l’internaute sur son interaction avec l’objet.

Tous ces facteurs pourront être influencés par le traitement graphique de l’objet et c’est là que le travail du graphiste intervient.

Exemple

Prenons un exemple simple, le traitement graphique d’un formulaire de contact. Nous le représenterons par quatre champs textes « nom-prénom(obligatoire) », « e-mail (obligatoire) », « téléphone », « sujet », un champ textarea « votre texte » et un bouton « envoyer le message ».

Voici un formulaire exagérément et volontairement peu affordant:

J’ai un peu forcé le trait et il y a peu de chance que vous trouviez, dans la réalité, un formulaire de contact aussi mal conçu. Mais si j’ai dessiné un formulaire à ce point « mal foutu » c’est pour mieux mettre en évidence les changements subtiles qui peuvent améliorer l’utilisabilité.

Alors, comment améliorer l’affordance de ce formulaire par un traitement graphique ?

(Quand je parle ici de traitement graphique, je pense au dessin des éléments du formulaire mais aussi à sa mise en page et à la mise en place d’éléments qui favorisent la perception de son utilisabilité.)

Voici ma proposition graphique:

Comme vous le constatez, l’utilisabilité de ce formulaire est davantage intuitif pour l’internaute que le précédant. Énumérons les changements graphiques qui ont permis cela:

La mise en page

Pour la mise en page, j’ai utilisé une grille afin d’aligner les éléments qui constituent le formulaire. Ces alignements structurent le visuel et facilite la lecture des informations. Un formulaire est typiquement le genre d’interface qui nécessite un peu de rigueur dans sa présentation pour favoriser son utilisabilité. En travaillant à partir d’une grille, j’applique le principe de continuité de la théorie de la Gestalt. Comme vous le verrez plus loin, d’autres principes de cette théorie seront appliqués dans le design de ce formulaire.

Les formes

Certains éléments sont traités, graphiquement, de manière similaire. Cela permet d’établir un lien entre ces éléments pour indiquer à l’internaute que les objets qui se ressemblent ont probablement une fonction similaire où une importance hiérarchique équivalente. Il s’agit ni plus ni moins d’appliquer le principe de similarité de la théorie de la Gestalt.

En travaillant sur des formes connues, j’augmente l’affordance des éléments. Un bouton est souvent représenté rectangle. Si je le dessine en forme d’étoile, son utilisation sera perçue de manière moins évidente par l’internaute. Cela peut paraitre contraignant pour la créativité mais le design web n’est pas toujours un acte de création pur. Le web design doit s’inscrire dans un contexte et des contraintes d’ergonomie et d’utilisabilité. Le design web doit donc savoir jongler entre esthétisme et normes d’usages.

La taille

La taille des champs de formulaire doivent être suffisante pour suggérer leur utilité. Si le champs est trop court, l’utilisateur se demandera si il correspond bien à l’idée qu’il se fait de son utilité. Par exemple, si un champ « téléphone » fait une taille équivalente à la saisie visible de 4 caractères alors qu’un numéro de téléphone en occupe au minimum 10, le doute s’installera.

Vous aurez aussi remarqué la taille importante du bouton « Envoyer le message ». Je l’ai un peu exagéré ici mais c’était pour illustrer la loi de Fitts qui dit que « Une cible est d’autant plus rapide et facile à atteindre que celle ci est proche et grande. » Il convient donc aussi, pour faciliter le clique de l’internaute, de placer ce bouton suffisamment proche du dernier champs à priori saisi, le textarea « Votre texte ».

Enfin la taille du texte doit permettre une lecture aisée. Plus l’information a de l’importance, plus la taille du texte sera grande. Jouer sur ce facteur est une des solutions (il y en a d’autres) pour établir une hiérarchisation de l’information.

Les couleurs

Le couleurs sont porteuses de sens. Lorsque j’utilise le rouge et le jaune pour le message d’erreur, c’est parce que ces couleurs sont remarquables et associées dans notre imaginaire au danger et aux objets de signalétique.

Les arrières plans doivent être de préférence de couleurs neutres (éviter les couleurs trop saturées) pour ne pas rentrer en compétition avec les éléments importants de l’interface. Gardez les couleurs vives pour attirer l’attention de l’utilisateur (messages d’erreur, titres …).

Les indices

Vous pouvez aider la compréhension du message en utilisant des éléments qui serviront d’indices. Il peut s’agir de puces, de flèches ou d’icônes. Ici j’utilise une lentille jaune avec un point d’exclamation pour indiquer à l’internaute que le message affiché réclame toute son attention.

Les exemples du format de saisi des champs du formulaire (ex: champ téléphone) peuvent être de précieux indices pour éviter à l’internaute de se tromper et de recommencer sa saisie.
Les libellés

Les libellés textes doivent être explicites sans être trop longs. Sur le plan graphique, la couleur du texte doit être lisible en établissement un rapport de contraste suffisant avec son arrière plan.

Le contraste

L’utilisation du contraste permet de faire ressortir certains éléments. Dans mon exemple, j’ai utilisé le contraste pour attirer l’attention de l’internaute sur les titres qui jouent un véritable rôle de panneau indicateur. Cela permet de répondre rapidement aux questions: Ou suis-je ? de quoi s’agit-il ?

Ici, j’ai essentiellement créé du contraste en jouant sur la couleur et la taille des éléments.

La profondeur

Des simulations 3D par des effets de dégradés et d’ombres portées font ressortir les cadres et le bouton.

En donnant du volume au bouton, j’augmente son affordance car j’incite l’internaute à cliquer dessus. En effet, nous avons tendance à appuyer ou à toucher tout ce qui est proéminent. (Attention, votre imaginaire s’égare !)

Les espaces

En laissant respirer la composition par la présence d’espaces, je facilite la lecture du formulaire. Cela me permet aussi d’appliquer le principe de proximité de la théorie de la Gestalt. Par exemple, les libellés des champs sont proches des espaces de saisies qui leur correspondent. Chacun des binômes « libellé-champs de saisi » sont suffisamment espacés les uns des autres pour ne pas apporter d’ambigüité lors de la prise d’information visuelle.

Conclusion

Comme vous l’aurez probablement remarqué, tous ces principes graphiques sont d’une évidence et d’une simplicité déconcertante.

Alors, pourquoi en parler ?

Parce que, malgré ce constat, il arrive encore de trouver des pages web dont le design ne tient pas compte de ces évidences.

Pour pouvoir les mettre en œuvre, encore faut-il y penser au moment de la réalisation des maquettes graphiques. Et pour penser à ces principes simples, il faut commencer par les connaitre pour en prendre conscience dans vos futures créations.

Sources:

- Ouvrage « Ergonomie web. Pour des sites web efficaces » – Amélie Boucher – Edition Eyrolles
- Sur le site web Motive, l’article: Perceived affordance

Le langage visuel est un mode de communication qui pourrait se définir par le sens qu’une image est capable de transmettre à celui qui la regarde. Lorsque nous observons une image, notre cerveau la perçoit grâce à notre vision mais déclenche également tout un processus de reconnaissance basé sur nos expériences antérieures. La vision déclenche donc des pensées qui aboutissent à des émotions, des réflexions, des références à d’autres images, des déductions conditionnées par notre vécu et notre façon d’appréhender le monde.

L’observation d’une image, quelque soit l’individu, n’est donc jamais un acte passif et laisse rarement indifférent.

La composition

Définition

La composition se préoccupe de concevoir l’arrangement des éléments d’une image dans un cadre physique donné. Les éléments d’une image rentrent en interaction les uns avec les autres et ces interactions sont influencées par les caractéristiques de chaque élément (taille, couleur, valeur, orientation, forme, emplacement …).

Se soucier de la composition, c’est choisir de répartir les éléments constitutifs de l’image en fonction de vos objectifs de communication. Ne pas se soucier de la composition, c’est laisser le hasard choisir à votre place et risquer de passer à côté de vos objectifs.

En webdesign, une réflexion sur la composition commence lors de l’étape de mise en page du contenu puis se poursuit lors du design graphique. La composition en webdesign diffère un peu de la composition en photographie car le webdesign doit prendre en compte un ensemble d’objets constitués de textes et d’images pour former un tout cohérent.

Les facteurs qui interviennent dans la composition

Beaucoup de facteurs peuvent être pris en considération pour élaborer une composition. Je vais essayer d’en faire une énumération ici. Pour chacun d’entre eux, je ne rentrerai pas dans les détails car certains de ces facteurs seront traités ultérieurement.

Pour élaborer une composition, vous pouvez vous appuyer sur les notions suivantes:

Les règles de composition

Au cours des siècles, les artistes et les architectes ont définies des règles de composition empiriques basées sur l’expérience et l’observation de la nature. Ces règles, vous en avez probablement déjà entendu parlé. Il s’agit de la règle des tiers et de la règle du nombre d’or.

Présentons rapidement ces deux règles:

Ces règles sont des méthodes de placement du ou des sujets importants de l’image de tel sorte que la composition nous paraissent harmonieuse tout en restant dynamique. Le défaut du photographe débutant est de centrer ses sujets dans ses compositions. Ce type de choix n’est pas mal en soi mais rend la composition statique et donc un brun ennuyeuse.

Voici où placer les centres d’intérêt d’une image selon ces deux règles de composition harmonieuse: (centres d’intérêts = quatre points dessinés)

Le sens de lecture

Selon des études d’observations de type eyes-tracking, les personnes de culture occidentale parcourent une image de haut en bas et de gauche vers la droite selon un trajet en Z. Ce n’est pas un hasard si les logos sur les documents ou les pages web sont souvent placés en haut à gauche.

De même, il semble que la gauche de l’image se réfère au passé et la droite au futur.

Un personnage qui marche et qui se dirige vers la droite de l’image sera interprété comme une personne qui s’éloigne alors que si la personne se dirige vers la gauche de l’image, on aura tendance à penser qu’elle revient sur ses pas.

Dans la même veine, un escalier nous semble descendre si il parcours l’image du coin haut-gauche vers le coin bas-droite et monter si il commence du coin bas-gauche et se termine au coin haut-droite.

Le point de vue

Le changement du point de vue change la composition de l’image. En effet, la forme d’un objet ne sera pas la même si il est représenté ou photographié selon deux points de vue différents.

Choisir un point de vue inhabituel peut montrer un objet banal sous un nouvel angle et changer le regard du spectateur sur cet objet.

En choisissant où vous placez l’horizon dans votre composition, vous changez l’expression de l’image. Un point de vue bas, inclue de façon plus importante le premier plan et fait rentrer le spectateur du bas vers le haut de l’image. Un personnage pris en contre plongée lui donnera un air dominateur. Inversement, un point de vue élevé vous détache de la scène. Vue de haut, un personnage semble plus petit et dominé.

L’échelle

Vous pouvez jouer avec l’échelle dans une composition à condition que vous donniez des indices visuels qui permettent à l’observateur d’apprécier cette échelle. En plaçant un objet connu sur l’image vous révèlerez par comparaison le petitesse ou le gigantisme des autres éléments.

Les éléments formels

Il s’agit du point, de la ligne, des courbes et des formes. Ces éléments, selon la façon dont ils sont placés, orientés, leur taille … n’expriment pas la même chose. Par exemple, des lignes courbes expriment la douceur, la féminité alors que des lignes hachées expriment le cahot, le désordre. Cela est aussi valable pour les formes. Un carré va exprimer l’ordre, la stabilité, la robustesse alors qu’un cercle va exprimer par exemple l’équilibre, l’infini, le renouvèlement.

Lorsque plusieurs objets sont présents dans une composition, ils rentrent en relation, interagissent entre eux, se concurrencent ou s’équilibrent. Des lignes optiques se forment sur lesquelles le regard peut se laisser guider. Ces lignes virtuelles sont de véritables lignes de force qui accompagnent l’observateur dans sa lecture de l’image. Vous pouvez vous en servir pour attirer l’attention de l’observateur vers un centre d’intérêt.

L’équilibre

Si vous êtes à la recherche d’une composition harmonieuse, vous allez essayer d’équilibrer votre composition. Il y a plusieurs paramètres qui permettent d’équilibrer une composition: la répartition des tons, des couleurs, des objets. La répartition des objets sur les différents plans.

Le poids de chaque objet dans une composition va être influencé par sa taille, sa couleur, sa valeur. Les caractéristiques qui augmentent le poids d’un objet sont l’importance de sa taille dans le cadre, l’assombrissement de sa valeur, son contraste, sa densité. Par exemple un petit objet dense et sombre peut être équilibré par un objet plus grand mais plus clair placé en opposition par rapport à un axe central.

La symétrie

Nous sommes sensible à la symétrie car on la trouve en abondance chez les êtres vivants et dans notre anatomie. Cette symétrie quelle soit radiale ou axiale apporte de la structure à l’image mais en revanche la stabilise au point de la rendre parfois trop statique, superficielle, ennuyeuse.

La symétrie est aussi un bon moyen d’équilibrer une composition si c’est l’effet recherché.

Le relation entre le premier plan et le second plan

Vous pouvez, en jouant sur plusieurs plans, simuler la profondeur. Pour cela vous pouvez intervenir sur la profondeur de champs ou la superposition des objets. Arrangez-vous pour que les différents plans ne rentrent pas en concurrence. Un plan sera mis en avant si il est plus net que les autres ou plus contrasté.

Les contrastes

Le contraste est un outil formidable pour retenir l’attention de l’observateur. Le contraste est basé sur une opposition entre deux objets. Sachez qu’il existe plusieurs manière de le générer. Nous en reparlerons dans un article ultérieur.

Conclusion

La composition est une notion incontournable de l’expression graphique qui vous aide à donner du sens à vos images ou à raconter une histoire. Plusieurs facteurs sont à prendre en compte pour vous aider dans cette tâche mais avant de composer votre image réfléchissez à ce que vous voulez exprimer.

Sources:

- Ouvrage « Composition » de David Präkel – Edition La compagnie du livre.

Introduction

Nous connaissons tous le sens du mot « hiérarchie » puisqu’il fait référence à une notion qui s’exerce dans de nombreux domaines de notre vie sociale et professionnelle. Mais savez-vous de quoi il s’agit lorsque l’on parle de « hiérarchie » en design web ?

Le mot « hiérarchie » désigne le fait d’instaurer, par différents procédés graphiques, un classement par ordre d’importance des éléments d’une page web. C’est un outil précieux du langage graphique qui permet de classer et d’organiser le contenu. La mise en place d’une hiérarchie visuelle met en évidence des points d’ancrage sur lesquels l’utilisateur va pouvoir s’appuyer pour scanner rapidement la page et comprendre de quoi il s’agit. Cela va contribuer à contrôler la transmission et l’impact du message. Sans hiérarchie visuelle, le contenu devient fade et difficile à parcourir.

Hiérarchisation du contenu web

Sur une page web on peut avoir besoin de placer beaucoup de choses: un logo, un menu de navigation, des menus secondaires, des informations de contact, des liens hypertextes, des titres, des sous-titres, des paragraphes de textes, des fonctionnalités diverses (moteur de recherche, pannier e-commerce, formulaires …). Imaginez comment tous ces éléments peuvent avoir du sens pour l’utilisateur si tout est traité de la même manière visuelle (même police, même taille, même couleur …). Comment retrouver une information dans une pile d’informations uniformes ?

Grâce à la hiérarchisation de l’information, vous allez pouvoir mettre en place une distinction entre les différents éléments de la page ou au contraire exprimer une similarité entre plusieurs d’entre eux. Vous allez également pouvoir transmettre la relative importance des éléments les uns par rapport aux autres. En opérant ainsi vous allez commencer à donner du sens à votre contenu et faciliter la lecture de la page.

Illustrons nos propos avec un exercice simple. Recherchez dans ces deux présentations, dont le contenu est strictement identique, l’information suivante: quelles sont les trois couleurs primaires du système additif ?

Dans laquelle de ces deux présentations avez vous trouvé l’information le plus facilement et le plus rapidement ?

Contraste et hiérarchisation

Tout est une histoire de contraste. L’école Allemande de design Bauhaus du début du siècle (1919) préconisait déjà l’utilisation du contraste pour capturer et retenir l’attention de l’observateur.

Pour établir une hiérarchie visuelle dans une composition, il faut jouer avec des techniques graphiques qui vous permettent de mettre en place du contraste entre les éléments. La mise en place de contraste va déterminer l’ordre dans lequel les utilisateurs vont percevoir et donc appréhender l’information visuelle.

Comme nous l’avons vue dans les exemples précédents, si tous les éléments sont similaires, il n’y a pas de progression logique du regard à travers le contenu et vous parcourez ce contenu de façon confuse. Si par contre des éléments plus larges que les autres se distinguent de la masse, votre attention est tout de suite attiré par ces éléments.

Pour qu’un élément soit remarquable, il faut qu’il se distingue des autres. Cela ne peut se faire que si une partie des autres éléments restent relativement neutres. En effet, si le graphiste cherche à rendre remarquable tous les éléments, le résultat donnera l’effet inverse.

Voici, à travers des exemples, différentes manières de créer du contraste pour mettre en place une hiérarchie visuelle dans votre composition:

La taille

Les tailles du logo et de l’encadré de gauche sont telles qu’elles attirent immédiatement notre attention. Ces deux éléments prennent une position dominante dans la hiérarchisation de la mise en page.

La texture

Pour distinguer le menu actif, le graphiste a utilisé dans cet exemple un contraste de texture.

La forme

La forme des rectangles qui contient les items du menu principal est la même pour tous les items sauf pour celui de la rubrique active. Ce contraste de forme permet à l’internaute de savoir immédiatement dans quel rubrique il se trouve.

La couleur

Ce menu latéral est traité avec trois couleurs différentes. Un seul item est rouge. Cet item rouge est le plus important hiérarchiquement car il indique le thème de la page courante.

La position

En décalant le paragraphe vers la droite, le graphiste créer un contraste de position qui le détache du reste du texte.

L’orientation

L’ensemble des textes de cette page sont horizontaux sauf le libellé « SERVICES » qui est orienté verticalement. La lecture verticale est généralement déconseillée par les recommandations ergonomiques mais ici, la taille du texte est suffisamment grande pour offrir une lisibilité du mot acceptable. Cette particularité dans la page retient notre attention sur le mot « Services ».

La valeur

Même avec une palette de couleur monochrome, vous pouvez créer de l’emphase en jouant sur les valeurs de gris. Le mot « LABEL » ressort ici parfaitement du menu.

La saturation

Cette page est une mosaïque de vignettes sur lesquelles il est possible de cliquer. Toutes les vignettes sont complètement désaturées. Au passage de la souris, la vignette devient colorée et se distingue alors des autres. En passant la souris sur une vignette, celle-ci devient un cours instant la vignette hiérarchiquement la plus importante puisque vous êtes susceptible de cliquer dessus.

La netteté

Le graphiste a voulu ici attirer notre attention sur le carré central en rendant les autres carrés flous.

Hiérarchisation et parcours de lecture

Voici une page web utilisant plusieurs types de contrastes (couleur, taille, valeur …) pour hiérarchiser l’information contenu dans sa mise en page. Nous voyons bien que certains éléments attirent plus notre attention que d’autres. Par exemple le header possède un arrière plan texturé, un logo de grande taille avec une typographie de couleur rouge, couleur que l’on retrouve dans l’onglet actif du menu. Ces caractéristiques jouent un rôle sur la façon dont nous allons scanner cette page. Nous somme davantage attiré par le contenu du header au premier regard que par le contenu texte des paragraphes situés plus bas.

Cette hiérarchisation des éléments nous conduit à appréhender les informations de cette page dans un certain ordre et selon un parcours visuelle bien définie que j’ai tracé ci-après en bleu et numéroté par ordre de progression.

Conclusion

Les préoccupations de hiérarchisation interviennent dès les premières phases de conception du site. Par exemple lors du zoning, il est important de déterminer quelles seront les zones de contenu et les grandes fonctionnalités qui devront prendre de l’importance dans la mise en page. Il faudra penser à placer ces éléments au dessus de la ligne de fold (ligne virtuelle en dessous de laquelle il est nécessaire de scroller pour voir le contenu de la page), ensuite le graphiste devra mettre du contraste sur ces éléments pour qu’ils se distinguent dans la composition.

De cette manière, vous proposez au visiteur une espèce de « visite guidée » censé l’aider à scanner la page pour trouver ce qu’il cherche.

Introduction

La décision de créer un site web, qu’il s’agisse d’une association, d’une entreprise privée, d’une administration, d’un organisme est souvent motivé par le souci d’être présent sur la toile. Ne pas être présent sur internet, c’est risquer de renvoyer à ses utilisateurs, à ses clients une image un peu ringarde.

C’est pourquoi beaucoup de site web existent parce qu’il faut être présent sur internet mais dont le contenu laisse à désirer et ressemble à une juxtaposition d’informations sans liens ni objectifs bien définis.

Pour concevoir un site efficient, il faut passer du temps sur la définition, les objectifs, l’organisation et la rédaction de son contenu afin de répondre à un véritable besoin des utilisateurs.

Le contenu est roi et constitue la véritable richesse de votre site. Le site n’est qu’une enveloppe qui doit se mettre au service du contenu pour le mettre en valeur. Il serait donc absurde de construire un site sans savoir quel contenu on va y mettre.

Prenons une analogie. Imaginez une famille qui veut faire construire une maison pour y vivre de la façon la plus confortable possible. Cette famille est constitué d’un couple, des ses trois enfants et du grand-père. Avant de construire, la famille va réfléchir avec un architecte sur les plans de la maison. Ils prévoient à l’étage 3 chambres pour les enfants, et deux chambres en rez-de-chaussé pour le couple et le grand-père. Ainsi le grand-père n’aura pas d’escalier à monter et les parents seront à l’abri de l’agitation des enfants. Le garage est prévu suffisamment grand pour accueillir un atelier, un sellier et les deux voitures du couple. Au vu de la composition de la famille (par analogie le contenu) la maison (par analogie le site) est prévue pour rendre la vie de la famille la plus confortable possible avec une organisation spatiale adapté.

Imaginons maintenant que la maison soit construite sans réflexion préliminaire mais avec des chambres, un garage … Lorsque le couple veut s’y installer, il se rend compte que la deuxième voiture dépasse du garage, que la maison ne comporte que 4 chambres en étage et que les murs sont tapissés de moquette alors que le petit dernier est allergique à la poussière.
Bref c’est l’enfer, le grand-père tombe des escaliers en se rendant aux toilettes, les enfants réunies dans la même chambres se tapent dessus toute la journée et le père de famille perd son boulot suite à une dépression nerveuse.

Créer un site sans se préoccuper du contenu, c’est mettre la charrue avant les bœufs.

Quel contenu mettre dans son site ?

Pour déterminer la pertinence d’un contenu, il faut se concentrer sur ses objectifs et les besoins de l’utilisateur. Pour cela procédez par étapes.

(Ces étapes sont largement inspirées de la méthode proposée par Vincent Bénard sur le site Veblog dans l’article « Comment choisir les contenus de votre site web ?« . Je vous propose ici une retranscription personnelle. N’hésitez pas à aller faire un tour sur les archives du site qui sont pleines d’enseignements malgrè l’arrêt du blog depuis plusieurs années « )

Étapes de réflexion pour définir son contenu :

1. Quels sont les objectifs du site auprès de vos utilisateurs ?

La première question à se poser est « A quoi va servir mon site, qu’est ce qu’il est censé proposer aux utilisateurs ? »

Amélie Boucher, consultante ergonome, parle dans son livre « Ergonomie Web » de l’utilité globale de votre site, c’est à dire de l’objectif principal du site qui est généralement déterminé par l’idée qui a sous tendu la création du site. Cela peut être : vendre ma production de fromages, trouver un gite en France, présenter le programme de formation de ma société, fournir des informations techniques pour les ingénieurs de mon service production …

Pour trouver les objectifs de votre site, ne pensez pas en terme de moyen mais en terme de finalité. Penser finalité c’est par exemple se dire: « Mon site doit me permettre de vendre mes produits, de fédérer une communauté autour d’un sujet, de collecter des adhésions pour mon association, de fournir des informations pratiques aux citoyens, d’améliorer le service après vente, me face économiser des frais d’impression de documentation … » penser moyen, c’est se dire: « Mon site doit être moderne pour plaire à mes utilisateurs technophiles, mon site doit être rapide pour répondre aux sollicitations d’un maximum d’internautes … »

Il peut y avoir plusieurs objectifs mais il existe toujours un objectif principale qui correspond à l’utilité générale du site. Si vous définissez plusieurs objectifs, énumérez les tous puis classez les par priorité. L’utilité globale du site doit se trouver en tête des priorités.

2. Quelles actions souhaiteriez-vous proposer à vos utilisateurs ?

La seconde étape consiste à réfléchir sur les actions que vous souhaiteriez que vos utilisateurs effectuent sur votre site. Pour cela il faut penser « verbes ». Je souhaiterais que l’utilisateur :

- Achète mes produits
- S’inscrive dans mes formations
- Lise les actualités de la commune
- Consulte les réalisations de mon portfolio
- Saisisse une demande de devis
- Télécharge les notices d’utilisations de mes produits
- S’abonne à notre magazine …

La aussi, pensez finalité et non moyen.

3. Quels sont les éléments qui vont favoriser ces actions ?

Il s’agit maintenant de déterminer quel petit plus (en terme d’utilité) vous allez pouvoir offrir à vos utilisateurs pour résoudre leurs problèmes, leur faciliter la tâche, leur fournir l’information dont il ont besoin… Vincent Bénard appel ce petit plus un « déclencheur ». C’est ce déclencheur qui va favoriser l’action souhaitée de la part de l’utilisateur.

Amélie Boucher, consultante ergonome, parle dans son livre « Ergonomie Web » de micro utilité. Les micro utilités viennent compléter l’utilité globale pour offrir à votre service une valeur ajouté. Il s’agit de ces petits bonus qui vont se mettre au service de votre utilité globale. Vous avez quelque chose à proposer, comment faire pour que votre offre soit la plus adaptée possible aux besoins de l’utilisateur. Quelle utilité complémentaire vais-je pouvoir proposer à mon utilisateur pour le satisfaire un maximum.

Cela peut être par exemple sur un site de e-commerce de produits alimentaires, la possibilité d’enregistrer des listes de courses personnalisées pour ne pas à refaire son panier à chaque commande. L’utilité globale du site est de permettre l’achat de ses courses alimentaires en ligne, une micro utilité est de pouvoir enregistrer sur son compte une liste de produit fréquemment achetée que l’on réactive à chaque nouvel achat pour remplir directement son panier des produits de bases que nous consommons à chaque commande.

Pour trouver des micro utilités (éléments déclencheurs des actions souhaités), il faut être capable de déterminer les profils et les caractéristiques de ses utilisateurs. Il faut arriver à se mettre à leur place et trouver les problèmes auxquels ils sont confrontés dans leur quotidien afin de trouver des solutions à travers ces micro utilité. L’ergonomie utilise pour cela la technique des « Personas » qui sont des profils types d’internautes pour qui on définie un scénario d’utilisation de votre site et des besoins précis.

Donc posez-vous la question, de quoi sont demandeur vos utilisateurs, quels sont leurs problèmes, leurs besoins, leurs habitudes ….

Attention réfléchissez ensuite au rapport utilité/cout de réalisation. Pour qu’une micro utilité soit retenue, il faut que celle-ci soit vraiment pertinente pour l’internaute par rapport à son cout de développement et de mise en place.
Ou trouver le contenu ?

Ces recommandations sont largement inspirées du livre « Ergonomie Web » d’Amélie Boucher :

Inspirez-vous de l’existant

Commencer par reprendre ce qui existe : site internet, plaquette commerciale, journal interne … et faite le tri. Certaines choses pourront être reprises, d’autres non. Vous devrez également penser à réecrire le texte pour l’adapter au média web.

Sollicitez tous les acteurs du projet

Plus vous serez nombreux à réfléchir, plus vous récolterez d’idées. N’hésitez pas à organiser un brainstorming avec l’ensemble des acteurs du projet.

Mettez-vous à la place de vos internautes

Utilisez la technique des personas pour imaginer des profils types d’utilisateur, leurs besoins, leurs habitudes de navigation.

Pour en savoir plus sur l’utilisation des personas :

- Personas: pas seulement pour une Vision partagée des Utilisateurs…
- Extending a technique group personas
- An introduction to personas and how to create them

Inspirez-vous des besoins exprimés par vos utilisateurs

Interrogez les personnes qui sont le plus en contact avec vos clients. Quelles sont les questions les plus posées ? Quelles sont les problèmes les plus fréquents ? Vous pouvez aussi initier une enquête pour récolter leurs besoins, leurs manques, leurs satisfactions-insatisfactions.

Étudier ce qui se fait ailleurs

Regardez ce qui se fait chez vos concurrents directs mais aussi chez ceux qui offrent les mêmes actions que vous. Vous vendez du fromage, chercher des sites concurrents vendeurs de fromages mais aussi des sites qui se positionnent sur des activités similaires aux vôtres: vendeurs de chocolats, de bricolage, de vêtements … Ce qui compte c’est d’observer ce qui se fait, de repérer les bonnes idées et de s’en inspirer.

Comment présenter, rédiger son contenu ?

Le média web utilise des écrans pour afficher les informations. Les écrans, qu’ils soient d’ordinateur, de téléphone mobile, de PDA ou d’autres machines électroniques sont du fait de leur taille très variable et de leur mode de fonctionnement, d’un confort de lecture moindre que le support papier. Pour cette raison, les utilisateurs ne lisent pas de la même manière les informations sur un média web et sur un média print.

Le média web est aussi une source infinie d’informations. Cette abondance nous oblige à parcourir plusieurs sources afin de choisir celles qui seront les plus proches de nos attentes. Les résultats de recherche dans les moteurs ne sont pas toujours pertinents et nous demande un travail de tri. De plus, nous consultons souvent internet pour gagner du temps et obtenir des informations sans avoir à se déplacer.

Toutes ces caractéristiques font qu’un internaute, lorsqu’il arrive sur une page web, ne lira pas en détails le contenu de la page mais scannera l’information pour évaluer rapidement si il est au bon endroit pour trouver ce qu’il cherche. Le scanne des pages existe aussi sur les supports print mais il est accentué sur le média web. L’internaute sera donc sensible aux indices visuels pour parcourir et évaluer la pertinence du message. Lorsqu’il aura trouvé l’information pertinente, il lira le texte en profondeur.

Recommandations pour rédiger du contenu web :

Utiliser un vocabulaire simple

L’internaute est pressé et veut obtenir ce dont il a besoin le plus rapidement possible. Rédigez donc votre texte en ne mettant que ce qui est nécessaire. Évitez les répétitions, les évidences ou les détails superflues.

Soyez simple et concis. Évitez les mots techniques, le langage spécialisé, les formules littéraires compliquées surtout si votre publique est généraliste. La lecture doit être facile et rapidement compréhensible.

Les internautes préfèrent également un ton direct et personnel plutôt qu’un langage trop formel.

Aller à l’essentiel

Essayez de dire le maximum de choses en un minimum de mots.

Allez droit au but et minimisez le discours marketing. Les internautes ne croient plus aux belles promesses publicitaires. Parlez vrai et simple et laissez l’internaute se faire sa propre idée.

Formater le texte pour le rendre plus lisible

Pour aider l’internaute à scanner vos pages, hiérarchisez l’information et structurez votre texte. Pour cela, utilisez les titres et sous-titres, les énumérations à l’aide de liste, aérez votre texte en faisant des paragraphes courts, faites des phrases courtes.

Pour une meilleure lisibilité, assurez-vous d’avoir suffisamment de contraste entre le texte et l’arrière plan, utilisez une police suffisamment grande, n’ayez pas des paragraphes trop longs horizontalement.

Utiliser la technique de la pyramide inversée

Jakob Nielsen, ergonome Américain, préconise de commencer ses textes par la conclusion puis de dévoiler les faits qui vont l’appuyer. Ainsi vous donnez au lecteur « l’essentiel » des les premières lignes. Si cela l’intéresse, il continuera sa lecture.

Conclusion

Lorsque vous voulez créer un site, portez un soin particulier au contenu. Ce n’est pas le site qui décide du contenu mais le contenu qui détermine la façon dont votre site sera construit.

Pour déterminer le bon contenu, pensez d’abord aux besoins de vos utilisateurs. Vous faite un site pour eux avant-tout. Réfléchissez à ce que vous allez proposer, est-ce que le discours du président du groupe intéressera l’internaute qui veut acheter un téléviseur ?

Pensez également à adapter la rédaction de votre contenu aux habitudes de lecture de vos internautes.

Enfin, ne prenez pas toutes ses règles au pied de la lettre. Chaque type de site a ses particularités et nécessite des adaptations.

Sources :

- Ouvrage « Ergonomie web » – Amélie Boucher – Eyrolles
- Ouvrage « Site web: priorité à la simplicité » – Jakob Nielsen et Hoa Loranger – Campus press
- Site Veblog de Vincent Bénard
- Site Ergologique