L’internaute est le seul maître à bord, il clique où il veut et décide de tout : c’est pourquoi le webdesign est aujourd’hui centré sur l’utilisateur. En effet, l’ergonomie – et non le seul aspect esthétique – détermine en grande partie le succès ou l’échec d’un site web.

En gardant cela en tête, les webdesigners professionnels ont établi peu à peu des règles indispensables pour réaliser une interface utilisateur (UI) harmonieuse et efficace.

Pourtant, aujourd’hui encore, beaucoup de personnes créent leur site sans prendre en compte ces 10 principes indispensables pour un Webdesign tourné vers l’utilisateur. C’est dommage, car cela nuit à l’aspect visuel et aux performances de leur site.

Et vous, connaissez-vous ces principes ? Les appliquez-vous correctement sur votre (futur) site ? Il est temps de vous en assurer !

Vous verrez que ces bonnes pratiques, appliquées consciencieusement, mettront votre contenu en valeur et déclencheront les bonnes décisions chez vos visiteurs.

Ce qu’il faut toujours garder en tête

Afin d’appliquer sur votre site ces principes du webdesign de manière pertinente, nous devons d’abord comprendre :

• comment les utilisateurs interagissent avec un site
• comment ils pensent
• et quels sont les schémas basiques du comportement utilisateur

Comment pense et se comporte un utilisateur ?

De base, les habitudes d’un visiteur sur votre site ne diffèrent pas beaucoup de celles d’un client dans un magasin. Les visiteurs jettent un coup d’œil à chaque nouvelle page qui se présente à lui.

Ils scannent rapidement des bribes de texte et des images, avant de cliquer sur le premier lien qui retient leur attention ou qui ressemble vaguement à ce qu’ils sont venus chercher. Dans le pire des cas, ils ne trouvent rien qui leur plaît vraiment et cliquent sur le bouton retour de leur navigateur.

En fait, ils ne s’attardent que très rarement les détails de vos contenus. Dans la grande majorité des cas, seules une ou deux petites parties de la page sont consultées.

En effet, gardez à l’esprit que vos visiteurs cherchent quelque chose – consciemment ou inconsciemment – en venant sur votre site. S’ils trouvent un élément cliquable qui pourrait répondre à leurs attentes, ils cliquent. Sinon, ils s’en vont.

Et ce choix se fait très rapidement – parfois en moins d’une seconde.

Comportement 1 : Recherche de qualité

Les utilisateurs apprécient avant toute chose la qualité et la crédibilité. En fin de compte, quelle que soit la nature précise de leur recherche, c’est cela qu’ils veulent.

S’ils sentent qu’ils peuvent le trouver chez vous et s’ils atteignent rapidement une page qui leur fournit un contenu de grande qualité, alors ils seront prêts à faire des compromis sur le design et même la publicité de votre site.

C’est pourquoi des sites peu esthétiques peuvent quand même générer énormément de trafic. Soyons honnête : pour vos visiteurs, le contenu est plus important que le design.

Croyez-vous, par exemple, qu’ils reviendront s’ils trouvent votre site magnifique mais que votre contenu est pauvre et de faible qualité ? C’est peu probable…

En revanche, un bon design améliorera beaucoup les performances d’un bon contenu. Si vous avez les deux alors vos résultats seront au top.

Comportement 2 : Scan de la page

Les visiteurs ne lisent pas, ils scannent. Cette action est rapide et exigeante. En analysant une page web, les utilisateurs recherchent des repères et des liens qui les guideront à travers le contenu du site ou de la page.

Comportement 3 : Impatience et satisfaction immédiates

Les utilisateurs sont de grands impatients. Ils recherchent la gratification instantanée pour un minimum d’efforts. Le principe est simple : si votre site n’est pas en mesure de répondre à leurs attentes rapidement, vous les perdrez.

Plus il y a d’éléments à analyser sur une page et moins la navigation est intuitive, plus vos visiteurs seront enclins à quitter votre site et à chercher des alternatives.

Comportement 4 : Des choix peu avisés

Les utilisateurs font rarement les choix optimaux. Ils n’utilisent pas la meilleure méthode pour atteindre au plus vite l’information précise dont ils ont besoin. Ils ne scannent pas non plus la page de manière linéaire, passant de façon séquentielle d’un élément à un autre.

Au lieu de cela, ils se contentent souvent de la première option qu’ils ont sous la main, tant que celle-ci correspond vaguement à ce qu’ils veulent. Dès qu’ils trouvent un lien qui semble pouvoir les mener à bon port, il y a de fortes chances pour qu’ils cliquent dessus sans se poser plus de questions.

Rechercher avec attention est difficile et prend du temps. Se laisser guider par les opportunités est plus simple… Mais pas forcément plus efficace.

En revanche, il peut s’agir de la meilleure option pour vos utilisateurs, si vous avez pris cela en compte dans votre design.

Comportement 5 : Intuition > Raison

Les visiteurs suivent leur intuition. Dans la plupart des cas, ils vont se débrouiller tout seuls plutôt que de chercher à suivre vos indications.

Si vous passez du temps à expliquer par quoi commencer, comment tirer le meilleur parti de votre site, où trouver quoi, etc., vous pouvez être sûre que l’immense majorité de vos utilisateurs ne prendront même pas la peine de vous lire et chercheront à faire comme ils en ont l’habitude, en cliquant au petit bonheur, sans trop se poser de questions.

La raison ?

En fait, ils ne s’intéressent pas à la manière dont fonctionne votre site. Peu importe à leurs yeux comment les choses marchent, tant qu’ils peuvent les utiliser. Pensez à vous, lorsque vous démarrez votre voiture ou lancez une appli sur votre smartphone… est-ce que vous voulez vraiment savoir ce qui se passe au cœur de la machine ?

Comportement 6 : Envie de tout contrôler

Les utilisateurs veulent garder le contrôle. Autrement dit, ils n’aiment pas être perturbés dans leurs habitudes et avoir l’impression de perdre la main. Ils doivent rester maîtres de leur navigation, sans quoi ils vous en voudront.

Par exemple, ils n’aiment pas voir une fenêtre pop-up s’afficher sous leur nez alors qu’ils n’ont rien demandé. Ils souhaitent pouvoir revenir à la page précédente grâce au bouton « retour » du navigateur.

Si vous leur imposez du contenu de manière agressive ou si vous les emprisonnez, ils vous en voudront. Et ils sauront s’en souvenir, en évitant votre site à l’avenir…

Les grands principes du webdesign : c’est parti !

Maintenant que vous avez tout ça en tête, on va pouvoir aborder les grands principes en eux-mêmes.

Vous allez voir, il n’est pas question ici de détails trop précis (comme l’emplacement idéal pour votre barre de recherche, etc.). Les grands principes du webdesign constituent l’ensemble des bonnes pratiques à décliner sur chaque site. Ils se veulent donc assez universels.

En vous assurant que vous êtes en accord avec eux, vous vous garantissez d’aller dans la bonne direction.

1. Ne laissez pas de question sans réponse

Une page web devrait toujours être facile à comprendre. Quand vous créez un site, votre travail consiste à vous débarrasser de tous les points d’interrogation.

Leurs décisions (cliquer sur tel ou tel lien, acheter un produit, s’abonner à votre newsletter, etc.) devront être prises en toute conscience. Vous devez donc leur indiquer très clairement ce qu’ils ont à gagner, ce à quoi ils s’engagent et quelles sont leurs alternatives.

Si la navigation et l’architecture de votre site ne sont pas intuitives, le nombre de points d’interrogation va augmenter et vos visiteurs ne trouveront pas facilement ce qu’ils recherchent (et donc, ils fuiront).

Une structure limpide, quelques clés visuelles et des liens facilement reconnaissables guideront vos utilisateurs vers ce qu’ils sont venus chercher.

En réduisant la charge cognitive (le nombre et la complexité des informations à analyser) de votre site, vous vous assurerez que vos visiteurs comprennent instantanément comment celui-ci fonctionne. Ainsi, ils saisiront plus facilement l’utilité de votre site et tout ce que vous pouvez leur apporter.

A contrario, les gens n’utiliseront pas votre site s’ils ont du mal à s’y retrouver.

2. N’abusez pas de la patience de vos visiteurs

Quel que soit votre projet, lorsque vous offrez à vos visiteurs vos outils, produits ou services, rendez leur démarche évidente et minimale.

Moins l’utilisateur aura d’actions à accomplir pour accéder à ce que vous lui proposez, plus il y a de chances qu’il essaie.

Les visiteurs qui arrivent pour la première fois sur votre site veulent connaître ou tester vos services, pas remplir de longs formulaires pour créer un compte dont ils pourraient ne jamais se servir par la suite.

Laissez vos utilisateurs découvrir vos services sans les forcer à partager leurs données personnelles. Il n’est pas raisonnable d’exiger une adresse mail pour simplement tester un service ou naviguer sur un site.

Vos utilisateurs seront beaucoup plus enclins à fournir leur email s’ils ont le temps de découvrir ce qu’ils obtiendront en échange.

Je vous conseille donc de lever un maximum de barrières. N’exigez pas d’inscription à une mailing list ou la création d’un compte dès le départ. Une pop-up demandant l’adresse mail ou la connexion dès la première page est un procédé intrusif. Beaucoup d’utilisateurs rebrousseront chemin aussitôt.

Pensez à eux et laissez-les apprécier un peu leur visite sur votre site avant de leur demander quoi que ce soit.

3. Captez l’attention de l’utilisateur

Les sites web proposent un mélange de contenus statiques et dynamiques. C’est pourquoi certains aspects de l’interface captent davantage l’attention que d’autres.

Une image attire l’œil bien mieux que du texte – tout comme les mots en gras l’emportent sur le texte non formaté.

L’oeil humain se comporte de manière non-linéaire et c’est bien normal : l’environnement naturel n’a pas grand-chose à voir avec une page de texte ! Pour notre propre survie, nous sommes programmés pour repérer les changements, les mouvements, ce qui paraît important.

Le visiteur d’une page aura donc toujours tendance à se laisser happer par les éléments qui « surgissent » de votre page.

Voilà pourquoi les vidéos sur une page sont très attirantes pour vos visiteurs. Par conséquent, elles peuvent aussi bien se montrer perturbantes (si elles détournent l’attention du contenu ou du message essentiel) qu’extrêmement efficaces (si vous les utilisez de manière ciblée, dans un but précis).

Attirer l’attention des utilisateurs sur des zones spécifiques de votre site, à l’aide d’un usage modéré d’éléments visuels peut aider vos visiteurs à trouver ce qu’ils cherchent sans perdre de temps ni risquer de se perdre sur votre site et de renoncer.

Plus vous baliserez le chemin, plus ils auront confiance en vous et en votre site. Guidez-les, facilitez-leur les choses, ainsi leur expérience sera meilleure et ils vous en seront reconnaissants.

4. Fléchez le parcours

Les sites modernes sont organisés pour guider l’utilisateur : étapes 1-2-3, grands boutons avec effets visuels, etc. D’un point de vue design, c’est une excellente chose. Un chemin très balisé est très efficace, car il guide l’utilisateur sur un chemin très simple et très « user-friendly ».

Montrez clairement à l’utilisateur les fonctions disponibles et le parcours à suivre. C’est un principe fondamental pour un bon design d’interface utilisateur.

Peu importe la façon dont vous vous y prenez. Ce qui compte, c’est que le chemin et son contenu soient très lisibles et que les visiteurs se sentent à l’aise avec la manière dont vous leur présentez les choses.

5. Ecrivez de manière efficace

Le web est un média très différent de l’imprimé. Il est donc nécessaire d’ajuster votre style d’écriture aux habitudes de navigation de vos utilisateurs.

Un contenu purement promotionnel ne sera pas lu. De longs blocs de texte avec des mots-clés en gras spammés un peu partout seront eux aussi évités. Les tournures outrancières (quand tout est super-, hyper-, incroyablement, démentiellement génial) seront ignorées.

Allez droit au but.

Pour ce qui est du contenu, soyez donc utile, claire, sincère. Adaptez-vous à votre audience – adressez-vous à vos visiteurs exactement comme s’ils étaient en face de vous. Le ton dépend donc aussi bien d’eux que de vous.

Et pour ce qui est de la présentation (car c’est bien le design qui nous intéresse ici) :

• faites des paragraphes courtes
• ne dépassez pas 3 – 4 lignes pour vos paragraphes
• faites des listes quand l’occasion se présente
• aérez vos textes avec quelques images
• délimitez vos parties avec des titres (un titre tous les 200 à 300 mots maximum)
• mettez éventuellement en gras ou en italique quelques passages pertinents

Tout cela rendra vos contenus beaucoup plus aérés et agréables à lire !

Au contraire, si vos lecteurs tombent sur des « murs de texte » interminables, il y a fort à parier qu’ils rebroussent chemin…

6. Recherchez la simplicité

Restez simple. Cela devrait être l’objectif numéro 1 de tout design web.

Les utilisateurs sont rarement sur un site pour en apprécier l’apparence. Bien sûr, quand le côté esthétique est au rendez-vous, l’expérience utilisateur est encore meilleure… Mais gardez à l’esprit que vos visiteurs viennent avant tout pour l’information ou le service que vous pouvez leur fournir.

C’est pour cela que l’apparence doit toujours être au service du contenu et non l’inverse. La simplicité doit donc toujours l’emporter sur les fioritures et la complexité : il ne faut pas détourner le visiteur de ce qu’il vient chercher chez vous.

Aujourd’hui, c’est l’aspect épuré qui domine. Évitez de surcharger votre site d’options et de fonctionnalités. En voulant bien faire, vous risqueriez de perturber vos utilisateurs.

7. N’ayez pas peur des grands espaces vides

En fait, il est difficile de surestimer l’importance de l’espace vide :

1. cela aide à réduire la charge cognitive de l’utilisateur
2. cela permet de percevoir immédiatement l’information importante sur l’écran

Quand un visiteur découvre un site, la première chose qu’il ou elle essaie de faire est de scanner la page et de la diviser en zones d’informations assimilables.

Les structures complexes rendent cette analyse instinctive plus difficile.

Si vous avez le choix entre séparer deux segments de design par une ligne visible ou par un espace blanc, il est presque toujours préférable de choisir l’espace vide.

Les structures hiérarchiques réduisent la complexité : mieux vous parviendrez à transmettre à votre utilisateur une hiérarchie entre les quelques éléments de votre page, plus votre contenu sera assimilable.

En rajoutant un élément visuel (comme une ligne ou autre séparateur), vous complexifiez la hiérarchie de votre page et la rendez donc plus difficile à comprendre.

8. Communiquez efficacement avec un « langage visuel »

Il existe trois clés fondamentales du « langage visuel » (le contenu qu’un utilisateur voit à l’écran) :

1. Organisation : fournissez à l’utilisateur une structure conceptuelle cohérente. Répartition des zones, relation entre elles et navigabilité sont d’importants concepts de l’aspect « organisation ». Mettez en avant la hiérarchie (les éléments les plus importants sont les plus visibles, les plus dynamiques). Mais n’oubliez pas que l’ensemble des éléments doivent rester cohérents entre eux (utilisez une approche cohérente : palette de couleurs, polices…)
2. Economie : faites le maximum avec le minimum d’éléments visuels. Quatre points essentiels doivent être pris en considération : simplicité, clarté, distinction, emphase. La simplicité implique de vous limiter aux éléments les plus importants à communiquer (débarrassez-vous du superflu). Clarté : tous les composants de votre page doivent transmettre un message clair, unique, facile à comprendre. Distinction : chaque élément de votre page doit être facilement identifiable et transmettre un message propre. Emphase : les éléments les plus importants doivent pouvoir être identifiés immédiatement.
3. Communication : adaptez votre présentation à votre cible (ses attentes et ses capacités). Pour communiquer votre message efficacement, l’interface utilisateur doit rester lisible tout en utilisant une dose raisonnable d’outils visuels (typographies, couleurs, textures, éléments dynamiques, images, etc.). Par exemple, utilisez un maximum de 3 polices, dans pas plus de 3 tailles différentes, et un maximum de 18 mots ou 50 – 80 caractères par ligne de texte.

9. Les conventions sont vos amies

Un design conventionnel ne signifie pas qu’un site est insipide. En fait, les habitudes et les conventions sont très utiles, dans ce sens où elles limitent l’effort que devra fournir l’utilisateur pour se repérer chez vous.

Imaginez quel cauchemar ce serait si tous les sites fonctionnaient complètement différemment les uns des autres… Il faudrait une demi-heure pour comprendre chacun d’eux et trouver enfin la bonne information !

Les conventions vous permettent de rassurer l’utilisateur, de lui faire gagner du temps et de prouver votre crédibilité. Suivez les attentes de l’utilisateur. Comprenez ce qu’ils veulent en naviguant sur un site comme le vôtre, la structure, l’emplacement des différents éléments, les différents types de pages.

Par exemple, il est rare qu’un site pro n’intègre pas de page à propos, dont le lien se situera dans le menu du haut. C’est donc à cet endroit que l’utilisateur s’attendra à trouver le lien grâce auquel il pourra en apprendre plus sur vous. S’il ne trouve pas cela rapidement, il risque de se méfier ou de trouver votre site « bizarre ».

Vous devriez donc vous intéresser aux sites concurrents qui fonctionnent bien. Observez les caractéristiques qui reviennent systématiquement et intégrez-les à votre site de la même manière.

Il ne s’agit pas de copier, mais de s’inspirer et de réutiliser des recettes qui fonctionnent.

Une fois ceci fait, vous verrez qu’il vous reste une marge importante pour personnaliser votre webdesign !

10. Testez et re-testez

Créez votre site, peaufinez son design, mais ne vous arrêtez pas là. En fait, le voyage ne fait que commencer. Testez et re-testez votre site !

Bien appliqué, c’est le principe le plus précieux de tous.

Testez l’interface de votre site dès que vous le pouvez. Demandez à un(e) ami(e) de faire une action sur votre site, sur son ordinateur, mais aussi sur son téléphone et sa tablette. Voyez comment et en combien de temps elle y arrive. Continuez, renouvelez ces tests régulièrement. Vous serez surprise des résultats.

Rien de tel que l’expérience pour voir surgir les failles que vous n’imaginiez pas et améliorer grandement le design de votre site.

Cela vaut aussi quand votre site est théoriquement « fini ». N’hésitez pas à re-tester et à l’améliorer régulièrement. Les habitudes et les attentes des utilisateurs évoluent.

Une fois votre site lancé, il existe des outils spécifiques d’analyse (comme le fameux Google Analytics) pour étudier le comportement de vos visiteurs. Apprenez à vous en servir.

Une fois de temps en temps, vous pouvez aussi réaliser des tests A-B ou des sondages auprès de vos utilisateurs. En fait, personne mieux que vos utilisateurs ne saura vous dire si votre webdesign est réussi ou non.
 

Article librement traduit et adapté de celui-ci.