Ergonomie des sites Web

Ergonomie des sites Web mars 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/ART6017/

Les critères ergonomiques

Ergonomie d’un site Web • Un site Web doit être beau! • Mais il doit surtout être utilisable! • Un site peut être le plus beau du monde mais il ne servira à rien si les usagers ne peuvent rien faire dessus! • Il existe donc des critères ergonomiques pour améliorer leur utilisabilité.

La manipulation directe selonSchneiderman (1982) • Pourquoi certaines interfaces sont-elles faciles à utiliser? • L’utilisateur voit bien le résultat de chacune de ses actions (résultat, rétroaction) • L’utilisateur voit chaque action s’effectuer • L’interface est physiquement évidente • L’action est continue, instantanée, progressive et réversible • L’utilisateur a toujours le contrôle • Les informations sont visibles • L’interface est flexible, adaptable selon l’usager • Utilisabilité

Principes de Bastien et Scapin (1993) • Guidage • Charge de travail • Contrôle explicite • Adaptabilité • Gestion des erreurs • Homogénéité/Cohérence • Signifiance des codes et des dénominations • Compatibilité

Guidage Conseiller, orienter, informer et conduire l’utilisateur : • Incitation  On incite les utilisateurs à faire des actions biens spécifiques (ex : Allociné) • Groupement et distinction des items par la localisation et le format (ex : sites de nouvelles) • Feedback immédiat • Lisibilité

Charge de travail Réduire la charge perceptive et mnésique de l’utilisateur : • Brièveté  Limiter le travail de lecture, d'entrée et les étapes par lesquelles doivent passer les usagers (concision et actions minimales) • Densité informationnelle  Limiter la densité informationnelle de l’écran en affichant seulement les information nécessaires

Contrôle explicite • Actions explicites  Les actions possibles des utilisateurs dans l’application doivent être le plus explicites possibles (ex : « Voter » et non pas « Valider » dans les machines à voter électroniques) • Contrôle utilisateur  L’utilisateur est toujours le patron. Il doit toujours pouvoir contrôler le déroulement du traitement de l’information par l’application (ex : sauvegarde dans Office)

Adaptabilité L’application doit pouvoir réagir selon le contexte, les besoins et préférences de l’utilisateur • Flexibilité  Interface personnalisable en fonction des habitudes et stratégies de l’utilisateur (ex : Netvibes) • Prise en compte de l’expérience utilisateur (ex : UdeM)

Gestion des erreurs Eviter ou réduire les erreurs, et savoir les corriger lorsqu’elles apparaissent (ex : Google) • Protection contre les erreurs  Prévoir toutes les actions possibles pour détecter les possibles erreurs de manipulation par l’utilisateur • Qualité des messages d’erreurs  Il doit être clair et précis pour que l’utilisateur puisse corriger ses erreurs • Correction des erreurs  L’utilisateur doit pouvoir corriger ses propres erreurs

Homogénéité/Cohérence Les différente parties de l’interface doivent garder les mêmes localisations et même styles si le contexte d’utilisation des informations est identique ex : barre de recherche, menu, etc. toujours au même endroit

Signifiance des Codes et Dénominations • Consistance et cohérence interne  réutilisation des mêmes codes dans des situations similaires • Cohérence externe • Emploie de métaphores correctes et appropriées entre l’information ou l’objet affiché, et son référent. • Ex : le panier dans les sites d’achat en ligne

Compatibilité • Les termes employés doivent être familiers aux utilisateurs et relatifs à la tâche à effectuer. • Accessibilité!!!

Design des pages Web

Design des pages Web • Un contexte général doit être présent sur la page d’accueil. • Créer des blocs fonctionnels : Définir les blocs fixes (éviter le défilement dans ces blocs). • Regrouper les informations et les organiser dans l'ordre naturel de lecture et d'action (sauf les blocs fonctionnels).

Navigation • Maximum 3 clics pour atteindre l’information (idéal). • Cohérence interne. • Utiliser la hiérarchie de sections jusqu’à trois. • Menus textuels et pas seulement par des icônes (plus rapide). • Réduire le nombre de liens dans les pages pour avoir du vrai contenu.

Navigation • Si le site est grand, on peut fournir deux niveaux de navigation (2 menus). • Le survol et le grossissement peuvent aider à la navigation • Choisir de bons labels  éviter « Cliquer ici », « Valider » • Mettre des liens internes (ancres), si les pages sont longues. • Réviser les liens internes et externes régulièrement. • Faire ouvrir les liens externes dans une nouvelle page.

Mise en page • Mettre ce qui est important, intéressant, fréquent au début. • Mettre les principales sections sous forme de grille (menu). • Première page (accueil) sur une seule page (pas de défilement). • Attention aux sauts probables des pages. • Un chargement long pour gêner la mise en page. • Utiliser les tables ou les divs pour la mise en page.

Mise en page • Utiliser les feuilles de styles CSS. • Gérer correctement les espaces horizontaux et verticaux. • Placer le texte près des images (en dessous). • Créer des groupes dans les formulaires et dans les listes longues  indentation • Minimiser le défilement vertical. • Jamais de défilement horizontal.

Textes et typographie Qu’est ce qui diminue la lisibilité d’un texte?

Textes et typographie "Sleon une édtue de l'Uvinertisé de Cmabrigde, l'odrre des ltteersdnas un mto n'a pas d'ipmrotncae, la suelecosheipmrotnate est que la pmeirère et la drenèiresoeint à la bnnoepclae. Le rsete peut êrtednas un dsérordettoal et vuospuoevztujoruoslriesnasporlbème. C'est prace que le creaveuhmauin ne lit pas chuaqeltetreelle-mmêe, mias le mot cmome un tuot."

Typographie • Polices sans empattement (serif) AB vs. AB. • Minimiser le gras. • Éviter l’italique, le souligné. • Pour les changements de grosseur, utiliser les styles standards  Accessibilité. • Dans les listes, suivez les standards de majuscule et de ponctuation.

Textes • Ne pas mettre de titre de manière verticale. • Mettre des sous-titres si nécessaire. • Privilégier les phrases courtes et détachées. • Évitez les césures dans les mots. • Éviter les mots rares et/ou longs, conjonctions, mots ambigus . • Préférer la forme positive, active et au présent. • Évitez les textes tout en majuscule, ou qui clignotent. • Mise en relief  pas plus de 10% du texte, pas trop de différentes tailles. • Utiliser l’alignement à gauche (sauf les titres).

Textes « Pourquoi ce texte, qui est pourtant important, n’est-il pas plus facile à lire et à comprendre, du moins par nos clients. Pourtant il a été rédigé par un diplômé de Communication qui se disait un expert en typographie. » Est-ce difficile à lire? Que changer dans ce texte?

Menus et listes de choix • Deux niveaux et pas plus de 10 items par niveau • Ordre • Standard (cohérence externe) • Alphabétique, chronologique, fréquence d'utilisation en haut à gauche • Similarité sémantique • Organisation spatiale - pays, exploration d'un objet • Ordre d'utilisation (couper, coller...)

Titres • Mettre obligatoirement un titre aux pages (qu’il reste visible) • Choisir soigneusement les titres pour qu’ils désignent bien le contenu et qu’il soient bien distincts les uns des autres. • Choisir le titre des pages qui apparaît dans la barre de titre et apparaîtra dans les favoris. • Mettre des sous-titres dans le contenu. • Mettre titre - sous-titre dans la barre titre. (site du prof)

Titres • Attention aux cadres (frames) • Ne chargent qu’une fois, donc bien pour mettre les données générales  mais pas de barre de titre adaptée • Si les gens arrivent par la recherche, il faut mettre la possibilité de revenir au site à partir des pages • Utiliser un cadre pour les commentaires et détails. • Attention aux multiples fenêtres  logiciels anti pop-up

Formulaire • Titre • Organisation : groupes et ordre naturel d'entrée • Valeurs par défaut • Permettre une façon d’annuler si possible • Montrer clairement les champs à compléter

Formulaire • Fournir des exemples de ce qui est demandé ou des formats requis (dates, numéros de téléphone) • Uniformiser la présentation selon une grille • Minimiser l'information qui doit être entrée • Permettre de corriger (réversibilité) • Boutons exprimant correctement le sens de l’action • Bouton Voter plutôt que Valider

Formulaire • Respecter les types de contrôles et la façon de s’en servir : • Champs de texte à remplir (retour et tabulation) • Menus, menus avec options cochées, menus avec dialogue • Combo box • Listes de sélections • Onglets • Boites à cocher • Boutons radios • Compléments graphiques : • Séparateurs de zone, avec titres • Attributs des éléments par défaut

Formulaire Plusieurs autres aspects améliorent la convivialité et la cohérence externe d’une interface : • La rétroaction (votre commande a bien été effectuée, 10 éléments trouvés). • Les indices de l’attente et de la progression. • La possibilité d’annuler. • Les changements dans le curseur de la souris. • Messages d’alerte et dialogue (« Vous allez perdre les modifications, voulez-vous enregistrer? »).

Qu’est ce qui ne va pas ici? • Nom Prénom • Tél • Adresse • Profession • Intérêts • Formation • Commentaires • Produit commandé • Carte de crédit Alignements Pas de modèles Ordre habituel Grandeur des champs appropriée Chercher à déduire l’information Fournir des choix, éviter d’écrire Bouton Annuler Approbation

Graphiques et images • Images : • Pas de graphiques inutiles. • Taille et qualité minimum (ne pas rapetisser à l’écran). • Mettre aussi du texte  tout le monde ne comprends pas  accessibilité • Mettre un texte alternatif (balise alt)  moteur de recherche + accessibilité • Utiliser des miniatures. • Des images progressives (entrelacement). • Fonds : • Mettre une couleur pendant que les images du fond sont chargées. • Tester les fonds sur plusieurs résolutions d’écran. • Utiliser une petite image répétée (patterns). • Attention à la lisibilité et aux interactions de couleur (différents selon les écrans). • Créer des motifs avec des textures, des photos, des logos. • Éviter le « dithering » (réduction du nombre de couleurs) brouille les caractères.

Icônes • Standard : 16 pixels, 32 pixels, 48 pixels sur le bureau. • Taille pour être sélectionnable : 15 (crayon), 20 (trackball ), 40 (écran tactile). • Chaque icône doit être différentiable des autres. • Cohérence externe et interne. • Reconnaissable même petit ou en noir et blanc.

Icônes • Barres de boutons - thème métaphore, unité visuelle, associer les verbes à des objets. • Sur Internet, prévoir un texte alternatif (ALT) qui apparaît en commentaire et sert aux interfaces non graphiques. • Boutons - Rétroaction lorsque choix courant, lorsque déjà choisi. • Plus une image abstrait les caractéristiques essentielles plus la reconnaissance est rapide (caricature).

Icônes • Prendre en compte le contexte d’utilisation (Arnheim 1964) • Icône : • Reproduit des caractéristiques physiques d'un objet d'abstraction inférieur triangle = montagne • Les images, les caricatures sont des icônes. • Symbole : • Représente concrètement un objet d'un niveau d'abstraction supérieure triangle = hiérarchie • Signe : • Lien arbitraire avec l'objet triangle = danger

Multimédia • Lorsque le non-verbal est plus naturel. • Pour une audience moins lettrée ou internationale. • Pour renforcer l’apprentissage. • Pour attirer l’attention. • Permettre de couper le son. • Éviter les animations qui n’en finissent plus. • Faciliter le chargement des modules complémentaires.

Couleurs • Pas trop de couleurs différentes  on fait des interfaces, pas des pizzas!!! • Plus intéressant que noir et blanc  45% plus remarqué même si moins lisible. • Attire mieux l’attention. • Exprime la relation entre des éléments, découpe zones. • Peut réduire la recherche dans une fenêtre complexe.

Couleurs • L'usager doit connaître (cohérence externe) ou apprendre le code par indices. • Les codes doivent être très différents les uns des autres. • Attention aux daltoniens! • Interaction entre les couleurs contrastantes dans l'espace et dans le temps. • Les bordures changent la couleur perçue, fatiguent. • Fidélité des couleurs selon l’écran. • Problème à l’impression.

Psychologie des couleurs • Physiologie : • Champs de vision : 60° en haut, 70° en bas et 90° environ latéralement. • Fovéa - centre plus détaillé et captant mieux les couleurs. • Symbologie : • Bleu = mer, infini • Rouge= feu, force, sang • Vert= forêt, nature • Noir= nuit, mort • Blanc= pureté, divinité • Personnalité : • Bleu conservateur, violet excentrique, brun solide, noir anarchique, blanc simple, rouge énergique,vert naturel, etc. • Basé sur des tests associant les couleurs à des qualificatifs • Fonctionnalité : • Ex : publicité noir et blanc  Message Couleur  Image

Ergonomie des sites Web