Ergonomie des sites Web 21 novembre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2580/

La semaine dernière Conception centrée utilisateur Analyse des besoins Maquette Validation

Et donc on fait quoi aujourd’hui? Les critères ergonomiques Design des pages Web

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 selon Schneiderman (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é Allociné: Grosse pub + incitation barre de recherche Ex: metro

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.

Qu’est ce qui diminue la lisibilité d’un texte? 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 ltteers dnas un mto n'a pas d'ipmrotncae, la suele coshe ipmrotnate est que la pmeirère et la drenèire soeint à la bnnoe pclae. Le rsete peut êrte dnas un dsérorde ttoal et vuos puoevz tujoruos lrie snas porlbème. C'est prace que le creaveu hmauin ne lit pas chuaqe ltetre elle-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? Approbation 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

Graphiques et images Images : Fonds : 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) 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

Atelier

Site du cours MTH6301 de Poly http://www.cours.polymtl.ca/mth6301/ Trouvez une autre façon de concevoir le site. Changer l’interface et faire la maquette. Rajouter des fonctions si vous en trouver des utiles.