Ergonomie et UX design : Quelques tips pour bien démarrer son site internet

Vous avez pour projet de créer ou refondre votre site internet, vous souhaitez vous impliquer pleinement dans sa création mais vous n’êtes pas designer ?


Nous vous livrons quelques conseils de base en ergonomie et UX design (User Experience) afin de bien penser votre nouveau site web.

# Proposez une navigation intuitive

Quoi de pire que d’arriver sur un site, et de ne pas trouver l’information souhaitée ?

Il faut se mettre à la place de l’utilisateur et éviter une erreur très fréquente lorsque l’on travaille sur son propre site : complexifier l’information.
Vous connaissez votre entreprise, votre marque, votre métier … Mais le client lui n’est peut-être pas un expert !

Soyez simple.

Proposez un menu principal clair et efficace, voici une structure basique de laquelle nous pourrions partir pour presque n’importe quel site vitrine :

 

ergonomie et UX design

 

Bien évidemment il faut nuancer selon vos besoins, mais ceci est une bonne base de départ.

# Un contenu structuré & des informations hiérarchisées

Si on devait schématiser au plus simple une page web, nous aurions trois grandes sections :
Le header, contenant de manière générale le logo, le menu de navigation et le titre de la page.
Le corps, contenant tous les éléments structurés en une ou plusieurs colonnes.
Le footer, contenant les éléments de contact, de navigation ou d’identification.

Ergonomie mon amie.

Il est important d’exprimer votre créativité, ou l’identité de votre marque, cependant il vous faut respecter certains codes, notamment en matière d’UX (expérience utilisateur).
Dans le corps de la page, pensez vos éléments dans un ordre logique, mettez vous à la place de l’utilisateur : quelles informations vient-il chercher, et dans quel ordre de priorité ?

Pour la home par exemple, vous pouvez partir de votre menu de navigation et vous inspirer de la règle marketing des “5W” :

  • Qui êtes vous ? Présentation concise de votre entreprise/marque
  • Que faites-vous ? Vos services / Prestations : à quels besoins répondez-vous ?
  • Comment le faites vous ? Par quels moyens répondez-vous à ce besoin ? Des clients peuvent témoigner.
  • Où vous contacter ? Les Call-to-actions, vos coordonnées….

Free the click

Vos call-to-action doivent être facilement identifiables, créer des boutons, colorer les liens, distinguez-les du reste des contenus. D’un coup d’oeil les visiteurs doivent savoir où ils peuvent cliquer.
Ajouter des liens internes entre vos pages pour permettre aux utilisateurs de naviguer d’une information à l’autre si elles sont liées, sans repasser par les pages précédentes ou le menu principal.

Les blancs, c’est bien.

Espacez vos sections, aérez les informations. Votre site n’en sera que plus clair et plus impactant.

# Pensez à tous les formats

Parce qu’on ne le répétera jamais assez, pensez responsive. Nous dirions même plus pensez mobile first
Comme nous vous l’avions déjà expliqué, nos modes de consommation évoluent, les technologies s’y adaptent et il est désormais indispensable non plus d’ajuster votre site, mais de le penser pour ses versions mobiles.

# Du design, quelques règles de base :

Des images, oui mais de bonne qualité

Enrichissez vos contenus avec des images bien sélectionnées, tant en terme de signification que de qualité. Rien de pire qu’une image déformée et pixelisée pour ruiner le professionnalisme de votre site web.
Vous pouvez trouver des ressources libres de droits sur des sites comme Pexels ou Unsplash .

Pensez également à optimiser celles-ci :

  • Une image pour le web n’a pas besoin d’une résolution supérieure à 72dpi,
  • N’utilisez pas une image de 1900 pixels pour un affichage à 400 pixels au risque de surcharger inutilement votre site web, et donc de ralentir son chargement.

Utilisez les outils en ligne comme Compressor.io si vous n’avez pas accès à des logiciels de retouches ou de compression.

De la couleur, oui mais pas n’importe comment

Bien choisir un univers de couleur n’a rien d’évident. Si vous n’avez pas la fibre colorimétrique, ou envie de gagner du temps, quelques outils sont à votre disposition pour vous proposez des associations qui fonctionnent comme Coolors ou vous proposez de tester les vôtres comme Khroma.

 

 

N’hésitez pas à vous pencher sur la signification des couleurs, votre secteur d’activité, votre cible ou les valeurs que vous souhaitez transmettre sont les bases de votre réflexion autour de votre palette de couleur.

Des typos, oui mais pas trop

Associez intelligemment les typographies, si vous n’êtes pas sûr de vous, limitez-vous à deux choix, sans négliger la lisibilité. Un pour les titres, un pour le corps de texte.
Vous pourrez jouer sur les graisses et les tailles pour dynamiser le contenu, en pensant à garder une cohérence et une unité au sein de tout votre site.

Laissez-les mots respirer !

Un texte trop condensé n’est pas user friendly, vous risquez de perdre vos utilisateurs avant qu’ils n’ai pu accéder à l’information recherchée.

L'espacement - Conseil ergonomie web KEOLIO
https://developer.apple.com/design/tips/

Vous trouverez des centaines de typographies sur des librairies comme Google fonts ou Adobe fonts.

 

Nous pourrions passer des heures à évoquer des choses à faire et à ne pas faire, il y a une part de règles préétablies, de bonnes pratiques UX et ergonomiques, et une part de sensibilité graphique.

 

Le design prend du temps et demande de l’entraînement mais pour éviter les faux-pas il y a une règle d’or : Faire simple.