21 conseils en webdesign et ergonomie à appliquer immédiatement sur votre blog


Dans cet article, je vous propose 21 conseils en webdesign pour améliorer l’ergonomie et l’apparence de votre blog. Le but du jeu : faire en sorte que la navigation soit agréable pour vos visiteurs tout en tenant compte des contraintes des moteurs de recherche.

Les erreurs de design web sont fréquentes et elles peuvent vraiment affecter le comportement des visiteurs sur votre site. Alors, apprenez à les éviter !

21 conseils en webdesign pour donner à votre blog un look plus travaillé
21 conseils en webdesign pour donner à votre blog un look plus travaillé

L’architecture globale du site

1. Mettez les éléments clés là où vos visiteurs vont les chercher.

En tant qu’internaute, nous avons une certaine expertise en webdesign. Même si au premier abord vous n’en avez pas conscience, vous savez instinctivement comment sont construites la plupart des pages web. Cette connaissance vous permet de gagner du temps lorsque vous naviguez car vous savez tout de suite où trouver telle ou telle information.

Par exemple, vous savez que les mentions légales sont en général placées en bas de page. Vous savez que le menu, lui, se trouve plutôt en haut, tout comme le logo du site. Lorsqu’à votre tour vous créez un site, veillez à respecter la position de ces éléments. De même, la rubrique « Contact » et la rubrique « A propos » s’appellent toujours de cette manière… Changer ce titre standard peut dérouter les visiteurs.

2. Rendez votre logo ou le titre de votre site cliquable.

Cela fait partie aussi des réflexes que l’on acquiert en tant qu’internaute : le logo ou le titre d’un site doit renvoyer vers la page d’accueil.

3. L’information doit être structurée de manière logique.

Pendant longtemps, on a vanté les mérites de la règle des trois clics : un visiteur devait pouvoir accéder en trois clics maximum à n’importe quelle page du site web. A la lumière des connaissances actuelles, il semblerait que ce ne soit pas si inflexible.

Ce qui prime en réalité est la manière dont le visiteur est capable à tout instant de se repérer dans le site : où suis-je ? Où puis-je aller ensuite ? En quoi ai-je intérêt à cliquer sur les liens à disposition ? Bien sûr, plus le visiteur accède rapidement à ce qu’il cherche, mieux c’est…

Certains ont visiblement une grande maîtrise du sujet. Ahem. A voir sur Arngren.net.

Arngren

4. Le contenu important se situe au-dessus de la ligne de flottaison.

La ligne de flottaison, c’est ce moment où l’on doit scroller pour afficher la suite de la page. En résumé, tout votre contenu important doit être visible sans que vos visiteurs n’aient besoin de descendre sur la page (logo, menu, début des articles, etc).

5. Permettez à vos visiteurs de faire des recherches sur votre site.

Un moteur de recherche présent sur chaque page les aidera à voir si vous avez déjà abordé un sujet. C’est notamment très utile dans le cas des sites riches en contenu.

Webdesign : pensez aux menus et aux liens

6. Le menu doit être clair et ses titres doivent être concis.

Le menu d’un site permet à la fois d’en refléter le contenu (il donne une idée des rubriques) mais aussi de guider plus facilement l’internaute vers les informations qu’il cherche. Il doit donc être concis et concret à la fois. Vous aurez tout le loisir d’être original dans vos textes… mais pour un menu, mieux vaut éviter les intitulés alambiqués !

7. Dites adieu aux menus interminables.

A une époque, il était très à la mode de faire des menus avec un nombre incalculable de sous-menus. On pensait alors que c’était plus clair pour le visiteur. En réalité, ces menus sont souvent très peu fonctionnels : pensez notamment aux utilisateurs qui, sur mobile, doivent scroller interminablement avant de venir à bout de vos 8 sous-menus et 6 sous-sous-menus !

8. Les liens doivent être faciles à repérer.

J’ai croisé beaucoup de blogs où les liens étaient de la même couleur que le texte… et où le texte en gras, lui, était d’une couleur différente. Historiquement, les liens ont toujours été d’une autre couleur que le texte… On ne vous demande plus de les souligner et de les mettre en bleu systématiquement mais faites au moins en sorte qu’ils soient faciles à identifier.

Typographie et couleurs

9. Ne multipliez pas les polices d’écriture originales.

Utiliser une police d’écriture originale pour des titres, pourquoi pas… mais écrire tous vos textes avec ce type de police peut rebuter les visiteurs. En webdesign, mieux vaut vous limiter à 3 polices différentes.

Typographie web

10. Veillez à la lisibilité des caractères.

Elle passe par plusieurs facteurs :

  • La taille de la police, qui doit être adaptée à l’écran et suffisamment grande.
  • La graisse de la police (est-elle plutôt mince ou plutôt grasse ?) : une police trop fine peut être difficile à lire, en particulier sur un écran où le contraste est mauvais.
  • L’espacement des caractères : une police trop condensée est difficile à lire… tout comme une police trop espacée.
  • L’interligne : sur le web, on peut l’augmenter un peu pour rendre les textes moins « compacts » et plus aérés.
  • Le bon usage du gras et de l’italique : ils sont censés mettre en évidence des éléments du texte… mais si 90% du texte est en gras et/ou italique, ils n’ont plus aucun sens !

11. Il doit y avoir du contraste…

Le fond et le texte doivent être suffisamment distincts pour que le texte ressorte clairement. Certaines couleurs comme le jaune sur fond blanc sont difficilement lisibles. Pensez aussi au fait que tous les écrans ne sont pas calibrés de la même manière. Chez certains, le contraste est naturellement plus faible.

12. … mais attention aux fonds noirs !

Les textes clairs sur fond noir étaient très populaires dans les années 90… mais il faut être très prudent avec ce type de choix, en particulier si vous avez un site qui met l’accent sur le texte. Lire sur fond noir est plus fatigant. Si vous optez pour un fond noir, préférez un texte gris clair à un texte tout blanc pour réduire un peu cette fatigue visuelle.

Texte blanc sur fond noir et texte noir sur fond blanc

13. On évite les arcs-en-ciel !

Même si c’est très joli après une bonne averse, on évite sur son site web de multiplier les couleurs différentes. Ce n’est pas seulement une histoire d’esthétique, c’est aussi une histoire d’apprentissage pour vos visiteurs : s’ils savent que vos liens sont toujours de telle couleur, que les sous-titres sont toujours de telle couleur, etc, ils se repéreront plus vite dans votre contenu que si vous changez ces règles d’un article à l’autre.

Trois couleurs sont aussi à utiliser avec prudence en webdesign : le vert et le rouge (daltoniens) et le bleu (historiquement réservé aux liens donc que l’on préférera éviter pour du contenu texte, même si cette pratique se perd de plus en plus).

Un bon usage des couleurs permet souvent de donner une apparence plus professionnelle à son site.

Fluidité et confort de navigation

14. Votre site doit se charger rapidement.

Si votre page met plus de 2 secondes à se charger, vous perdez déjà 12% de vos visiteurs. Au bout de 4 secondes, vous en avez perdu un quart. Sur les mobiles, les visiteurs sont un peu plus patients… mais sans jamais dépasser 6 à 10 secondes de chargement. Pensez notamment au chargement des images, qui alourdissent souvent les pages.

Veillez aussi à ne pas multiplier les plugins gourmands en ressources si vous utilisez des plateformes comme WordPress.

La vitesse de chargement est devenue un critère de référencement et des formats comme le format AMP se développent pour rendre le web encore plus rapide sur mobile.

15. La publicité ne gêne pas la navigation.

Les pop-up, les publicités dont on ne sait pas comment couper le son ont tendance à être rédhibitoires pour les visiteurs… et c’est encore plus gênant sur les mobiles quand une pop-up mal placée vient couvrir tout l’écran sans que l’on sache comment s’en débarrasser.

World's Worst Website : le pire site web au monde
Le mythique World’s Worst Website qui compile avec humour le meilleur du pire du webdesign des années 90 !

16. Prenez en compte les différences de résolution d’écran.

Je ne le répéterai jamais assez : le responsive design est aujourd’hui indispensable. Votre site doit s’adapter à la lecture sur mobile et tablette (40% de mon trafic pour vous donner une idée !). N’hésitez pas aussi au passage à tester l’affichage sur différents navigateurs. Le visiteur ne doit jamais avoir à scroller horizontalement pour afficher toute votre page.

17. Évitez les systèmes de défilement infini.

Ce sont des designs de sites sans pagination, où le contenu s’affiche au fur et à mesure que l’on descend dans la page.

Google a souligné la complexité de cette pratique en matière de référencement mais elle est aussi médiocre en termes d’expérience utilisateur. Mieux vaut répartir le contenu sur plusieurs pages, avec une vraie pagination, plutôt que tout afficher sur la même page.

Ergonomie et contenu

18. Les images et les liens ont tous une description.

Quand vous mettez en ligne une image, complétez toujours le champ description (attribut « alt »). De même, entrez si possible la description d’un lien (attribut « title »). Pour les images, c’est essentiel en termes de référencement : un moteur de recherche n’étant pas capable de décrypter le sens d’une image, ces mots clés vont l’aider à la positionner correctement dans ses résultats. Mais surtout, cela aidera vos éventuels visiteurs malvoyants (les lecteurs d’écran leur liront cette description).

Vous pouvez parcourir ces conseils complémentaires pour bien référencer les images de votre blog.

19. Les articles sont bien hiérarchisés.

Un gros titre, des titres, des sous-titres. Utile non seulement pour structurer votre réflexion mais aussi pour faciliter la lecture rapide.

20. Écrivez pour des êtres humains.

Adieu les titres bourrés de mots clés…

21. N’hésitez pas à avoir recours à des guides visuels.

Des icônes bien placées peuvent vous aider à orienter l’attention du visiteur.

Par exemple, ceci est un avertissement !

De même, le pointeur de la souris peut se changer en main au survol d’un lien.

Conclusion

Cela fait une sacrée checklist pour un webdesign aux petits oignons, je le reconnais… mais une bonne ergonomie joue un grand rôle dans la satisfaction des visiteurs !

Qu’est-ce qui vous freine quand vous visitez un site ?
Thèmes : Design 

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

13 commentaires sur “21 conseils en webdesign et ergonomie à appliquer immédiatement sur votre blog

  • wissal

    Bonjour,
    Merci beaucoup pour les conseils qui vont en aider plus qu’un :).
    Pour ce qui est de ce conseil :
    « Mettez les éléments clés là où vos visiteurs vont les chercher. »
    Les webdesigners ont tendance à utiliser la stratégie visuelle du F. Je pense que c’est un bon moyen pour savoir là où le visiteur lance son regard en premier.

    Répondre à wissal
    • Marlène

      Merci pour le conseil, il y a d’ailleurs des solutions vraiment innovantes et intéressantes pour mener des études poussées sur les comportements des visiteurs en ligne, Content Square par exemple est assez dingue mais il ne s’adresse pas à un public de « petits webmasters ».

      Répondre à Marlène
  • Pascal

    Comme pour chaque article, je trouve mon compte ici ; ton blog est agréable à lire et les conseils vraiment intéressants, pour les novices comme pour les blogueurs confirmés.
    D’ailleurs, en rapport avec le point 10 (la lisibilité des caractère) bravo et merci pour mes yeux de quadra, je me régale à lire !
    Par contre, il y a un point dont tu ne parles pas – et pour cause – c’est le problème des textes justifiés. Il semble – et il me semble – que l’on perd en lisibilité, par rapport à un simple alignement à gauche. Qu’en penses-tu ?

    Répondre à Pascal
    • Marlène

      Merci Pascal ! Effectivement, mieux vaut aligner à gauche que justifier le texte, une copine graphiste ne cesse de me le répéter (et je ne suis pas ce conseil, comme tu l’as constaté). Ça permet à l’espace entre les mots d’être toujours équivalent et évite au cerveau de faire la gymnastique de chercher le mot suivant plus ou moins loin !

      Répondre à Marlène
  • Emilie

    Merci pour cet article bourré de bons conseils !
    Je n’avais pas pensé à la description des images, ça me paraissait fastidieux et inutile, mais j’avais bien tord on dirait ! Du coup je viens de passer les dernières 45 minutes à reprendre toutes mes images et leurs descriptions, non seulement pour le référencement mais aussi pour les personnes qui ne peuvent les voir.
    Un blog accessible à tous c’est quand même mieux !
    Je file lire les autres conseils car mon blog n’a même pas encore un mois et je suis sûre qu’il y a encore beaucoup à améliorer avant d’être lue par des milliers de lecteurs ! ;)

    Répondre à Emilie
    • Marlène

      Bienvenue dans la blogosphère alors :) Les images c’est super important, je pense toujours à bien les nommer et à remplir les « alt » et ça m’apporte quand même plusieurs milliers de visiteurs par mois via Google Images, c’est loin d’être négligeable alors qu’on y pense moins qu’à ses textes en général !

      Répondre à Marlène
  • Patpatleloup

    Depuis plus d’une heure je navigue sur ton blog remplis de conseils tous plus intéressants les uns que les autres et je n’arrive pas à décrocher. La raison ? Je suis une  » bille » en réseaux sociaux que je regarde avec un œil circonspect pensant, peut être à juste titre, que Big Brother se cache derrière chacun de nos clics. Mais là, ma vie est en train de de changer et je vais prendre à 55 ans un virage à 90°. Je vais me lancer dans la création d’objets recyclés ( certes l’idée n’est pas nouvelle) mais je ressens au plus profond de moi ce besoin de créer  » utile » et je me rends compte que pour pouvoir vendre mes creations, il va bien falloir que j’ai une visibilité sur le net…et là, je suis comme le 1er homme ( femme) préhistorique qui découvre qu’il peut faire du feu !! Oui, mais il faut que j’apprenne à manier les outils, à apprendre une langue qui ressemble à du martien ( flux RSS …kesako ?) et c’est là que je découvre ton blog sur Hello Cotton. Je sens qu’il va falloir que je le lise de fond en comble pendant des jours pour arriver à me faire une idée de ce monde inconnu dans lequel je veux rentrer sans y laisser des plumes. J’ai déjà laissé ma peau dans mon précédent travail, assistante de direction pendant 10 ans, si je laisse mes plumes maintenant, je vais me retrouver complètement à poil, la honte!!! Donc je te lis avidement et lorsque j’aurais ingurgité toutes les infos qui pourront m’aider, je me permettrais de te poser peut être quelques questions pour éclairer ma lanterne de femme de cro-magnon. ( hé oui, je suis née avec la télé en noir et blanc, le téléphone à cadran, et le 1er homme sur la lune) alors, l’ordinateur dans le travail, je l’ai découvert à 40 ans… J’ai l’impression de venir d’une tribu en voie de disparition au fin fond de l’Amazonie ! En tous cas 1000 fois merci d’écrire des choses aussi utiles de façon claire et précise. Et à très bientôt.

    Répondre à Patpatleloup
    • Marlène

      Merci beaucoup pour ce commentaire et ce partage d’expérience ! Il faut toujours beaucoup de courage pour se reconvertir… mais la chance qu’on a avec Internet, c’est d’avoir une multitude de ressources, d’articles, d’explications à disposition pour essayer d’éclairer sa lanterne ! Tu peux aussi te renseigner sur tous les sites de vente d’objets faits main (Etsy, A Little Market, Dawanda, etc), ça peut être un bon moyen de créer ta petite boutique en ligne en complément d’un blog par exemple.

      Répondre à Marlène
    • Patpatleloup

      Merci d’avoir répondu aussi vite. Je connais Etsy et A little Market mais pas Dawanda. Je vais aller voir et je continue ma formation en accéléré. Et du courage et de l’enthousiasme, j’en ai une caisse pleine!

      Répondre à Patpatleloup
  • Letizia

    Très intéressant cette checklist! Je n’avais pas pensé au 18… Pour le reste, il y a toujorus des amélioration à faire mais il me semble que mon site n’est pas trop illisible :) Ce qui me freine c’est les sites qui ne mettent pas la balise « lire la suite » où tu dois défiler et défiler pour trouver la suite et les photos gigantesques qui prennent la place du contenu (à part sur les blogs photos of course).

    Répondre à Letizia
    • Marlène

      Merci Letizia ! Ton site est très lisible :)

      Dans le même esprit que le scroll infini, il y a aussi un défaut qu’on retrouve souvent sur les blogs Blogger (et parfois sur WordPress) : la pagination permet juste d’afficher les « Articles plus récents » et les « Articles plus anciens » mais si tu veux aller directement voir la page 20 par exemple ou les tout premiers articles du blog, tu ne peux pas parce qu’il n’y a pas de numéro de page en bas.

      Pour les améliorations constantes, je confirme ! Le pire c’est quand on va regarder des thèmes sur des sites comme Theme Forest, ça donne envie de refaire son blog du sol au plafond !

      Répondre à Marlène
  • Lolita

    Merci des conseils. Tu penses quoi du choix entre une police sérif et une sans sérif, qu’est-ce qui est mieux?

    Ce qui me freine: les photos en fond d’écran, moche !

    Répondre à Lolita
    • Marlène

      Pour la police, je pense qu’aujourd’hui, il n’y a plus le même écart qu’avant entre les sérifs et sans sérif, les écrans sont de bonne qualité, les polices elles-mêmes ont évolué. On peut trouver de jolies polices sérif au-delà du Times New Roman. L’année dernière, on m’a demandé de faire un site web « tout sérif » pour un jeune homme de 24 ans donc le serif ne fait plus « peur » ;)

      En revanche, les deux types de police n’ont pas la même image. Le sérif garde une image assez « formelle », sérieuse, digne de confiance (cf l’impression qui se dégage du site du New York Times), le sans sérif paraît plus moderne, accessible. Je choisirais donc la police selon la nature du projet. Rien n’empêche d’associer les deux (titres en sérif, texte en sans sérif par exemple).

      Pour ce qui est des « photos en fond d’écran », je ne suis pas toujours d’accord. Si la photo est pixellisée, qu’elle ne s’adapte pas au contenu et empêche de se focaliser sur le texte, je suis d’accord avec toi. Mais si la photo est bien choisie, qu’elle s’ajuste à la taille de la fenêtre, qu’elle est assez discrète (épurée et/ou en noir et blanc ou en sépia par exemple), ça passe très bien. Cf ce thème par exemple : si tu vas sur le Live preview puis dans le menu News > Right Sidebar, le blog utilise une image de fond en transparence, ça reste très lisible je trouve !

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.