La mise en forme du contenu

Un site web doit se montrer ergonomique et attractif. Les mises en forme du contenu doivent apporter clarté et attrait pour l'utilisateur. C'est par la conception visuelle qu'on peut présager du succès ou de l'échec d'un site internet. Le visiteur de la page est la seule personne qui clique sur la souris et décide de tout, donc, la conception doit être centrée sur l'utilisateur.

La conception visuelle est typiquement quelque chose qui n'est pas tangible, quelque chose de très subjectif. Elle dépend en partie de chacun d'entre nous et on ne va pas forcément aimer les mêmes choses, visuellement, que son voisin. Mais pourtant Google semble chercher à quantifier ces conceptions très subjectives pour les intégrer dans l'algorithme de son moteur de recherche. Sans entrer dans les détails, sachez que Google est capable de « percevoir » l'organisation d'une page web, ses différents espaces, sa structure, etc... Il sait faire la distinction entre un site d'une seule colonne et un site présenté en trois colonnes et entre une boutique de commerce en ligne et un blog. Google a intégré dans son algo de grands principes du web-design, des règles heuristiques et des approches purement perspectives pour évaluer l'efficacité de votre site sur le plan de sa portée visuelle auprès des internautes.

Pour utiliser ces principes correctement, nous devons d'abord comprendre comment les utilisateurs interagissent avec les sites Web, la façon dont ils pensent et quels sont les motifs de base du comportement des utilisateurs.

Les habitudes des utilisateurs sur le Web ne sont pas si différentes des habitudes des clients dans un magasin. Les visiteurs regardent un peu de partout autour d'eux. Quand ils ouvrent une page ils numérisent une partie du texte en la parcourant en long et en large, parfois ils ne font même pas descendre la page avec l'ascenseur. Ensuite ils cliquent sur le premier lien qui attire leur attention ou ressemble vaguement à la chose qu'ils recherchent. En fait, il y a de grandes parties de la page qu'ils ne regarderont même pas. Il ne faut donc pas organiser une page web comme une page du roman posé sur votre table de nuit.

La plupart des utilisateurs recherchent quelque chose d'intéressant (ou d'utile) qui soit cliquable. Dès qu'ils trouvent quelque chose qui pourrait ressembler à ce qu'ils attendent et semble être un candidat prometteur, ils cliquent. Si la nouvelle page ne répond pas aux attentes de l'utilisateur, le bouton Retour-Arrière est cliqué et le processus de recherche se poursuit.

Les utilisateurs apprécient la qualité et la crédibilité. Si une page fournit aux utilisateurs un contenu de haute qualité, ils sont prêts à sacrifier le contenu des publicités et la conception du site. Ceci est la raison pour laquelle les sites Web, sans forcément être bien conçus sur le plan visuel ou ergonomique, mais avec du contenu de haute qualité, gagnent beaucoup de trafic au cours des années. Le contenu est plus important que la conception qui le supporte. Mais il ne faut pas pour autant négliger le visuel car c'est ce qui peut, à contenu équivalent, vous faire passer devant vos concurrents.

Les utilisateurs suivent leur intuition. Dans la plupart des cas, les utilisateurs ne vont pas lire les recommandations fournies sur la page. S'ils trouvent quelque chose qui fonctionne ils s'en tiennent à ça. Il n'y a aucune importance pour un internaute de comprendre le fonctionnement des choses, tant qu'il peut les utiliser ça lui suffit.

Les utilisateurs veulent avoir le contrôle et être en mesure de contrôler leur navigateur et comptent sur une présentation des données cohérente sur tout le site. Par exemple ils n'apprécient pas du tout les fenêtres pop-up qui surgissent inopinément, les sites qui se mettent en plein écran tout seul ou l'aspect des ascenseurs ou de la souris qui se retrouve modifié contre leur gré. Les sites qui jouent de la musique automatiquement vont également à l'encontre d'une bonne expérience utilisateur. Et c'est la même chose pour les fenêtres modales qui viennent en splash au dessus d'une page de contenu affichée en dessous par transparence.

Ils veulent être en mesure de revenir, avec le bouton "Retour-arrière", sur le site qu'ils visitaient avant ou sur la page précédente. Ca ne les intéresse pas d'apprendre un nouveau système de navigation propre à un site sur lequel ils vont rester moins d'une minute alors qu'ils savent déjà utiliser leur navigateur qui leur apporte tous les outils nécessaires à la navigation. Ils n'aiment pas non plus que le navigateur soit pris en otage et que son aspect soit modifié (modification de l'aspect des ascenseurs ou de l'aspect de la souris, suppression de la barre de menu, affichage plein écran, démarrage automatique de vidéos ou de diaporamas). En général ce genre d'excentricités les fait fuir immédiatement.

La règle de base quand on conçoit un site doit être que c'est le visiteur qui décide et qui conserve le contrôle. En partant de ce principe vous commencez déjà à vous mettre l'utilisateur dans la poche.

Une page web devrait être évidente et explicite. Lorsque vous créez un site, votre travail consiste à vous débarrasser de tous les points d'interrogation. Les décisions des utilisateurs ont besoin d'être effectuées consciemment, en considérant les avantages, les inconvénients et les alternatives.

Si la navigation et l'architecture du site ne sont pas intuitifs, le nombre de points d'interrogation se développe et rend plus difficile pour les utilisateurs à comprendre le fonctionnement du système et comment ils doivent faire pour se rendre du point A au point B. Une structure claire, des indices visuels modérés et facilement reconnaissables, peuvent aider les utilisateurs à trouver leur chemin plus facilement vers leur but.

C'est le rôle du concepteur de faire en sorte que le nombre de points d'interrogation soit proche de zéro. Quelques titres clairs accompagnés d'explications visuelles sans équivoque peuvent suffir et augmentent la convivialité.

Google prend en compte tous ces éléments et favorise les sites qui semblent avoir une mise en forme optimale pour le confort des visiteurs.

Dans un projet où vous allez offrir à vos visiteurs un certain service ou des outils, essayez de ne pas les gaver avec des formulaires d'inscription ou l'obligation de devoir donner leur adresse email. Proposez directement aux utilisateurs de tester le service ou offrez-leur des exemples, sous forme de copie d'écran, de ce que l'outil est capable de faire. Obliger les visiteurs à remplir un long formulaire pour ouvrir un compte qu'ils n'utiliseront sans doute jamais c'est perdre beaucoup de clients potentiels. Même sur un site de e-commerce, les visiteurs doivent pouvoir ajouter des articles dans leur caddie avant même de s'inscrire. Ce sera suffisamment temps de le faire au moment de passer au paiement.

L'utilisateur doit pouvoir explorer le site sans avoir à partager des données privées. Il n'est pas raisonnable de forcer les utilisateurs à entrer une adresse e-mail pour tester une fonctionnalité alors qu'ils ne savent même pas ce qu'ils vont obtenir en retour.

Un bon site doit être convivial, discret et rassurant. L'utilisateur doit s'y sentir bien pour le visiter en toute liberté sans avoir de contraintes. Il faut supprimer tous les obstacles tels que la nécessité d'abonnements ou d'inscriptions. Un enregistrement forcé de l'utilisateur est une entrave à la navigation et va réduire le trafic entrant et augmenter le taux de rebond. Même une simple fenêtre qui s'ouvre pour inviter l'utilisateur à s'inscrire à la newsletter est quelque chose de rédhibitoire.

Comme les sites Web fournissent à la fois du contenu statique et dynamique, certains aspects de l'interface utilisateur attirent l'attention plus que d'autres. Évidemment, les images sont plus accrocheuses que le texte. Il en va de même pour les phrases marquées en gras et les titres qui ressortent bien du reste du contenu.

L'œil humain est un dispositif complexe et qui permet de reconnaître instantanément les contours, les motifs et les couleurs, mais également les choses en mouvement. Voilà pourquoi les annonces basées sur la vidéo, du point de vue marketing, font parfaitement leur travail qui est de capter l'attention des utilisateurs.

Les éléments animés permettent de concentrer l'attention des utilisateurs sur des zones spécifiques du site où l'on veut qu'ils aillent. Ils sont ainsi guidés pour aller d'un point A vers un point B sans avoir à réfléchir.

Les designs Web modernes sont très souvent critiqués en raison de leur approche minimaliste avec très souvent de gros boutons avec des effets visuels, etc. Mais du point de vue de la conception de ces éléments, ce ne sont pas réellement de mauvaises choses. Au contraire, ces lignes directrices sont extrêmement efficaces car elles conduisent les visiteurs à travers le contenu du site de manière très simple et conviviale. Les mises en formes complexes du passé étaient sans aucun doute beaucoup plus travaillées et belles graphiquement, mais peut-être moins efficaces.

Une bonne interface doit proposer les différentes options de navigation clairement afin qu'elles soient visibles au premier coup d'œil. Permettre à l'utilisateur de voir clairement quelles sont les fonctions disponibles est un principe fondamental de la conception réussie d'une interface utilisateur. Ca n'a pas vraiment d'importance de savoir comment cela est réalisé. Ce qui importe c'est que le contenu soit bien compris et que les visiteurs se sentent à l'aise avec la façon dont ils interagissent avec le système.

Je pense que des gadgets à base de JQuery ou de javascript sont totalement improductifs pour mettre en forme une interface. Le CSS est amplement suffisant pour faire passer un message clair et simple. Il faut rester dans le sobre et éviter la complexité car ça nuit à la clarté.

Le Web étant bien différent du support papier, il est nécessaire d'ajuster le style d'écriture pour les préférences des utilisateurs et les habitudes de navigation. Les longs blocs de texte sans images ni mots-clés signalisés en gras ou en italique seront ignorés. L'utilisation de vocabulaire trop technique ou propre à une entreprise sera ignoré. Le contenu doit s'adresser aux visiteurs et doit être rédigé dans leur langage familier.

Par exemple, si vous décrivez un service et que vous proposez aux utilisateurs de créer un compte, "s'inscrire" sera mieux que "commencer dès maintenant !" ou "explorer nos services". Il faut être direct. L'utilisateur doit comprendre instantanément ce qu'on veut de lui. Des boutons avec des textes tels que "s'inscrire" ou "commander" sont tout à fait explicites. Pas besoin d'écrire un roman dans un langage chatié si on veut juste signifier à l'utilisateur que c'est ici qu'il faut cliquer pour commander le produit.

Une solution optimale pour l'écriture efficace est d'utiliser des phrases courtes et concises et d'utiliser un langage simple et objectif. On peut aussi utiliser plusieurs niveaux de titres et utiliser des éléments visuels et des listes à puces qui cassent le flux de blocs de texte uniformes. Parfois il est également intéressant d'encadrer des passages, avec une couleur de fond différente ou non.

« Rester simple » devrait être l'objectif principal lors de la conception d'un nouveau site. Les utilisateurs sont rarement sur un site pour profiter de sa conception. En outre, dans la plupart des cas, ils sont à la recherche d'une information en dépit de la conception. Tendre vers la simplicité plutôt que vers la complexité doit rester l'idée maitresse.

Les designs simples et épurés font souvent recette. On peut reconnaître directement les éléments de navigation, l'en-tête, la zone de contenu et le pied de page. Des icônes bien choisis peuvent communiquer de l'information par eux-mêmes. On peut ensuite en savoir plus en survolant simplement les icônes avec la souris.

Du point de vue des visiteurs, la meilleure conception de site est un texte pur, sans aucune publicité ou autres blocs de contenu, qui corresponde exactement à la requête utilisée. Ceci est une des raisons pour lesquelles les mises en formes conviviales des pages web sont des aspects essentiels pour une bonne expérience utilisateur. Google l'a compris et il en tient compte pour évaluer une page de son index.

Il est vraiment difficile d'estimer l'importance de l'espace blanc. Non seulement il peut aider à réduire la charge cognitive pour les visiteurs, mais il permet de mieux percevoir l'information présentée sur l'écran. Quand un nouveau visiteur se retrouve confronté à une page web, la première chose qu'il essaie de faire est de numériser mentalement la page et de diviser la zone de contenu en blocs d'information digestes plus facilement assimilables.

Les structures complexes sont plus difficiles à lire et à analyser. Si vous avez le choix pour séparer deux segments de texte par une ligne visible ou par quelques espaces, il est généralement préférable d'utiliser la solution des espaces.

L'espace blanc peut être utilisé comme un élément décoratif. Le résultat sera une disposition bien analysable qui donne au contenu la position dominante qu'il mérite. Mettre en forme votre contenu en l'aérant est une très bonne chose.

Pour une communication visuelle efficace, les trois principes fondamentaux de l'utilisation du langage visuel sont les suivants :

Organiser : fournir à l'utilisateur une structure conceptuelle claire et cohérente. La cohérence, la mise en page de l'écran, les relations et la navigabilité sont des concepts importants de l'organisation. Les mêmes conventions et les règles doivent être appliquées à tous les éléments.

Économiser : faire le plus avec le moins d'indices et d'éléments visuels. Quatre points importants à prendre en considération : la simplicité, la clarté, le caractère distinctif, et l'accent.

• La simplicité ne comprend que les éléments qui sont les plus importants pour la communication.
• La clarté : tous les composants doivent être conçus de sorte que leur sens ne soit pas ambiguë.
• Distinctif : les propriétés importantes des éléments nécessaires doivent être distinguées.
• L'accent : les éléments les plus importants doivent être facilement perçus.

Communiquer : faire correspondre la présentation aux capacités de l'utilisateur. L'interface utilisateur doit garder un équilibre entre la lisibilité, la typographie, le symbolisme, les multiples points de vue, et la couleur ou la texture afin de communiquer avec succès. Utilisez au maximum 3 polices de caractères dans un maximum de 3 tailles et un maximum de 18 mots ou 50-80 caractères par ligne de texte. La surcharge et la complexité vont nuire à une communication efficace.

La conception classique des éléments de site ne conduit pas à un site Web ennuyeux. En définitive, les conventions sont très utiles, car elles réduisent la courbe d'apprentissage des utilisateurs, la nécessité de comprendre comment les choses fonctionnent. Il est nécessaire de leur présenter des éléments conventionnels pour ne pas qu'ils se sentent dépaysés. Par exemple, ce serait un cauchemar de convivialité si tous les sites web avaient différentes présentations visuelles pour les flux RSS. Cela n'est pas si différent de notre vie ordinaire où nous avons tendance à nous habituer aux principes de base de la façon dont nous organisons des données (dossiers) ou nous faisons du shopping (disposition des produits en rayonnage).

Avec les conventions, vous pouvez gagner la confiance et la fiabilité des utilisateurs et leur prouver votre crédibilité. Suivez les attentes des utilisateurs sans chercher à inventer un nouveau langage qu'ils ne comprendrons forcément pas. Comprendre ce qu'ils attendent d'une navigation sur le site, la structure du texte, l'emplacement des recherches, et vous aurez fait un grand pas pour produire un site web totalement ergonomique.

Un exemple typique pour vérifier l'utilisabilité d'un site est de traduire une page en japonais ou dans une autre langue forcément inconnue de vos testeurs. Pour vérifier la conviviabilité du site, ces derniers auront pour tâche de trouver quelque chose dans la page de langue différente de la leur. Si les conventions sont correctement appliquées, les utilisateurs seront en mesure d'atteindre un objectif même s'ils ne peuvent pas comprendre un mot. Cet objectif peut être de télécharger un document, d'accéder à une autre page spécifique du site, d'ajouter un produit à son caddie, d'accéder à la page contact, etc...