Concevoir des interfaces web ergonomiques et accessibles est souvent bien plus qu’un ensemble de recommandations à suivre. Le facteur humain, le gout et les choix personnels du concepteur ainsi que les tendances influencent directement l’apparence visuelle et l’organisation de l’interface.
Question de tendances
Les études des comportements des utilisateurs ainsi que les réussites notables d’applications web avec une ergonomie innovante font que les habitudes changent rapidement. De nouveaux modèles s’imposent et des concepts parfois improbables sont normalisés. Les grands Sliders panoramiques , les sites à page unique ou encore le « responsive design » sont des exemples de tendance qui ont émergé pendant l’année dernière.
L’influence des acteurs majeurs
Les géants comme Google, Microsoft ou aussi Apple influencent sans cesse les tendances. Ils propulsent les nouveaux concepts à une grande panoplie d’utilisateurs. La réussite de leurs produits est une métrique généralement fiable pour adopter leurs orientations. Google n’a cessé de propulser le principe des interfaces simples et minimalistes. La réussite de son moteur de recherche historique est à l’origine principalement basée sur la simplicité de sa page d’accueil avec un champ de saisie unique alors que les autres concurrents comme Yahoo! ou MSN présentaient des pages d’accueil surchargées d’informations. Nous citons également l’interface Metro de Microsoft et l’usage des boites avec des couleurs prononcées ou Apple qui a longtemps excellé dans la présentation pertinente des fonctionnalités et l’iconographie simplifiée. La réussite ergonomique de l’iPhone a également influencé tout le monde mobile.
Et les bonnes pratiques ?
Au-delà des tendances et des techniques, un ensemble de recommandations reste toujours fiable et universel. Nous essayons de lister les principales clés d’une ergonomie réussie et d’une interface utilisateur accessible :
Simplicité
- Utiliser une iconographie et des illustrations compréhensibles et conventionnelles
- Utiliser des mots significatifs et simples pour la navigation
- Éviter la redondance et les scénarios complexes
- Trop de couleurs et/ou de formes tuent l’identité
- Aérer les blocs, un espace vide n’est pas obligatoirement exploitable
- Raccourcir les longues séquences. Un formulaire sur une seule page est plus pertinent qu’un assistant interminable
Cohérence
- Les boutons, les formes des blocs, les styles et l’iconographie doivent être les mêmes dans toutes les sections
- Cohérence des couleurs, des choix graphiques et de la typographie. Éviter d’utiliser plus de deux polices de caractères.
Importance de la page d’accueil
- Principale vitrine du site, la page d’accueil doit résumer le but ou le sujet du site et proposer des accès rapides aux différentes sections clés.
- Privilégier des illustrations captivantes (les photos commerciales et les modèles ne sont plus du gout des jours)
- La page d’accueil doit donner le ton, elle doit être particulièrement soignée car elle constitue généralement la première impression que se fait l’utilisateur de tout le site et du sérieux de l’entité qui se cache derrière ce dernier.
Mémoire de l’utilisateur
- Introduire des aides à la navigation comme un fil d’Ariane
- Favoriser les repères visuels prononcés (illustrations, couleurs) plutôt que les textes
- Utiliser des messages courts, pertinents et faciles à mémoriser
Attention de l’utilisateur
- Prendre en considération la mise en page spécifique des éléments clés (couleur ou taille de police différente)
- Éviter les compositions de couleurs dérangeantes (rouge sur bleu par exemple)
- Utiliser des codes universels, le vert pour la validation et les annonces et le rouge pour annuler ou signaler un problème
- Ne pas abuser de l’audio/vidéo
Navigation
- Le menu principal doit être particulièrement soigné. Les menus déroulants interminables créent une frustration chez l’utilisateur
- Privilégier les liens importants pointant vers les sections clés. Le contenu supplémentaire peut être joint en sous sections
- Proposer des widgets de navigation contextuels
Interaction
- Le web 2.0 est fondé sur l’interaction. L’utilisateur a tendance à vouloir interagir, il devrait pouvoir laisser un commentaire par exemple
- Mettre en place un vrai formulaire de contact plutôt qu’un numéro de téléphone et une adresse mail
- Proposer un module de feedback ou de messagerie instantanée si besoin
Confiance et crédibilité
- Présenter un contenu compréhensible et clair
- Les fautes d’orthographe ont une influence directe sur la crédibilité du message
- Citer les sources et autoriser les liens vers d’autres sites
- Mettre en avant le côté humain et mentionner les vrais noms des auteurs
Respect de l’utilisateur
- Être transparent, mentionner l’usage des cookies, l’enregistrement de la situation géographique ou l’adresse IP
- Éviter les pop-up intensifs et répétitifs. Pour les messages répétés, prévoir une case « ne plus afficher »
- Éviter de désactiver les boutons du navigateur ou d’altérer son fonctionnent
- Ne jamais lancer des messages audio ou vidéo en lecture automatique
- La publicité ne doit pas choquer, occuper un grand espace ou remplacer un message clé
Cet article présente un aperçu rapide des directives clés d’un bon Design. Mais il faut retenir que l’aspect fonctionnel ainsi que la thématique du site influe grandement sur son look & feel. L’innovation est également à prendre en considération. Mais vouloir faire différent crée souvent le risque du rejet.
Pour l’audit de l’ergonomie de vos interfaces web, n’hésitez pas à contacter nos experts pour un devis gratuit.