Ergonomie des sites Web

mars 2013Grégory Petit

http://lrcm.com.umontreal.ca/greg/ART6017/

Les critères ergonomiques

Ergonomie d’un site WebUn 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)

GuidageCharge de travailContrôle expliciteAdaptabilitéGestion des erreursHomogénéité/CohérenceSignifiance des codes et des

dénominationsCompatibilité

GuidageConseiller, 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 travailRé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 erreursEviter 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 WebUn 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).

NavigationMaximum 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.

NavigationSi 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 pageMettre 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 pageUtiliser 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 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."

TypographiePolices 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.

TextesNe 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 choixDeux niveaux et pas plus de 10 items par

niveau

Ordre Standard (cohérence externe)Alphabétique, chronologique, fréquence d'utilisation en

haut à gaucheSimilarité sémantiqueOrganisation spatiale - pays, exploration d'un objetOrdre d'utilisation (couper, coller...)

TitresMettre 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)

TitresAttention 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

FormulaireTitre

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

FormulaireFournir 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

FormulaireRespecter 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

FormulairePlusieurs 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énomTélAdresse

ProfessionIntérêtsFormationCommentairesProduit commandéCarte de crédit

AlignementsPas de modèlesOrdre habituelGrandeur des champs appropriéeChercher à déduire l’informationFournir des choix, éviter d’écrireBouton Annuler

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ônesStandard : 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ônesBarres 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ônesPrendre 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édiaLorsque 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.

CouleursPas 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.

CouleursL'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 MessageCouleur Image

Des questions???

Merci de votre attention!

gregory.petit@umontreal.cahttp://lrcm.com.umontreal.ca/greg/ART6017/