10 bonnes pratiques en webdesign

Avez-vous déjà remarqué que lorsque vous arrivez sur un site, celui-ci peut vous paraître familier ? Vous savez où cliquer pour obtenir ce que vous étiez venu chercher même lors d’une première visite. Si cela est le cas, il est fort probable qu’il réponde sous plusieurs aspects aux bonnes pratiques du webdesign. 

De manière générale, celles-ci visent à ce que l’interface soit ergonomique pour que son contenu soit accessible. La base de l’ergonomie est donc que l’interface s’adapte à l’homme pour lui faciliter la vie. Nous réfléchissons donc au webdesign grâce à deux spectres liés celui de l’UX design (User EXperience) dont le rôle est de créer un parcours utilisateur optimal, et l’UI design (User Interface) qui s’attachera aux éléments perceptibles et graphiques de l’interface.

Dans cet article, vous pourrez découvrir un certain nombre de bonnes pratiques concernant ces deux aspects du webdesign, bien évidemment cette liste est non exhaustive et surtout non fixée dans le temps.
Vous êtes prêts ? Allons à la découverte des bonnes pratiques du moment !

Penser le parcours utilisateur

Un peu comme on construit une maison, nous commençons à dessiner les plans, ici le parcours utilisateurs grâce à des wireframes (dessin schématique de l’interface utilisateur afin de définir les zones et composants nécessaires, c’est ici que notre liste peut commencer.

1. Contenu structuré et hiérarchisation de l’information

Cela peut paraître évident et pourtant ! Il est important de repérer les informations principales que vous souhaitez faire parvenir à votre visiteur. Une fois ce contenu déterminé, les webdesigners utilisent les sens de lecture (occidental) généralement en Z, E ou F. La structuration de votre contenu passera également par des niveaux de titres qui seront d’autant plus importants pour votre SEO (article à venir).

2. Menu court

Un menu court bénéficie d’une meilleure mémorisation. Ayez également à l’esprit que les termes utilisés en début et fin de menu seront en moyenne plus retenus, pensez à y disposer vos onglets importants. Enfin, si votre menu doit être très complet donner accès à un grand nombre de pages, les mégas menus seront vos alliés.
 

3. CTA descriptif

Le CTA, autrement dit « bouton d’appel à l’action » permet comme son nom l’indique de faire passer votre visiteur à l’action. Ceux-ci doivent se distinguer du reste du contenu et être clair sur l’action à effectuer en cliquant dessus.
 

4. L’utilisateur sait se situer à tout moment

Afin que votre visiteur ne soit jamais perdu sur votre site, plusieurs petites astuces seront à intégrer : fil d’Ariane, la sur-brillance de l’onglet actif, bouton de back to top, menu accessible en header et footer…

5. Navigation simple et usuelle

Les habitudes de navigation seront à prendre en considération pour la conception de votre interface. Rien ne sert de réinventer la roue, le plus important et d’apporter de la lisibilité à votre utilisateur. Ainsi, nous retrouvons régulièrement un logo en haut à gauche dont le lien ramène à la page d’accueil, un menu en header, un menu burger pour le responsive, un pied de page avec mentions légales et autres CGV…

Garder une cohérence graphique

Si votre interface se doit d’être intuitive et donc reprendre les codes usuels de navigation web, votre site se différenciera de la concurrence par l’utilisation de votre identité visuelle. Pour en savoir plus sur ce qu’est une identité visuelle, découvrez l’article de notre designer graphique, Angélique, " Qu’est-ce qu’une identité visuelle ? » . Ainsi, l’originalité de votre interface résidera dans les couleurs et visuels choisis. Les règles de l’UI design ne s’arrêtent néanmoins pas à cette simple règle.

6. Mobile First ou responsive design

Aujourd’hui, plus de 80% des internautes utilisent leur mobile pour surfer sur le web (source : https://blog-referencement-seo.fr/). On ne se cachera pas que votre interface devra proposer une adaptabilité aux supports utilisés, ce que l’on appelle le responsive design. Si votre projet est amené à être plus visionné sur mobile on réfléchira à son design de manière « mobile first ». C’est à dire que nous partirons de la version mobile pour aller vers la version desktop (écran d’ordinateur).

7. Charte graphique

Afin de vous identifier facilement, votre site devra reprendre les grands principes de votre charte graphique : couleurs, typographie, éléments graphiques, style photographique…
Attention toutefois à ne pas démultiplier le nombre de typographies, en utiliser 2/3 grand maximum suffisent.
Si votre charte graphique n’est pas définie ou le style de typographie libre de choix, vous pouvez vous appuyer sur des outils tel que Font Pair  afin de choisir des compatibilités de typographies pour les titres et corps de texte. 

8. Lisibilité

Bien sûr, nous intégrons votre charte graphique pour la cohérence de vos supports de communication. Il sera toutefois indispensable de penser à la lisibilité de vos typographies notamment grâce leur taille et leur affichage. Les typos trop fines ou avec empattements peuvent être plus difficiles à lire. La lisibilité passe également par une bonne utilisation des contrastes.
Plusieurs sites proposent de tester vos contrastes fond/texte en ligne. Ici, je vous propose Tanaguru Contrast Finder

9. Animer avec parcimonie

De plus en plus de site web utilise l’animation de leur contenu afin de donner du dynamisme lors de la navigation. Une idée que vous pourriez conserver à condition de les utiliser avec parcimonie. En effet, trop d’animations peuvent handicaper la lecture et brouiller le message que vous souhaitez faire passer.

10. Personnaliser vos images

Ce n’est un secret pour personne, les banques d’images gratuites sont aujourd’hui de grande qualité et offrent une diversité de visuels gigantesques. Malgré l’immensité de l’offre, vous ne serez jamais à l’abri que votre concurrent choisisse les mêmes visuels. C’est pourquoi il vous sera toujours conseillé d’utiliser vos propres visuels pour votre webdesign. Afin d’obtenir une interface de qualité et unique, n’hésitez pas à faire appel à un photographe professionnel. Une chose est sure, vous ferez la différence !

Notre petite sélection des bonnes pratiques du webdesign touche à sa fin. Il sera de bon ton de se tenir informer des avancées dans le secteur afin d’être toujours plus efficace pour votre expérience utilisateur. Retrouvez d’ailleurs les dernières tendances 2021 en webdesign.

400

Partager