ergonomie web

Download Ergonomie web

Post on 15-Apr-2017

12 views

Category:

Education

2 download

Embed Size (px)

TRANSCRIPT

Design de linformation

Clment DussarpsAvril 2017Ergonomie web

Lergonomie ?Ergonomie :(Grec) ergon + nomos = Travail + LoiUn ensemble de connaissances scientifiques et de mthodologiesAide pour concevoir des outils / dispositifs / services adapts lhommeBut = que ces outils / dispositifs / services soient utiliss avec le maximum de confort, de scurit et defficacit par le plus grand nombre (Socit dErgonomie de Langue franaise)Optimiser les conditions physiques et psychologiques du travail faciliter laccomplissement des tches et diminuerles efforts inutiles.*

*Christian Ega, interview dans : Blond, M.-V., Marcelin, O., Zerbib M. (2011) Lisibilit des sites web. Eyrolles.

Ergonomie : pourquoi ?Trop dinformations = au secours !

Ergonomie : pourquoi ?De lordinateur aux supports mobiles diffrentes lectures.

Ergonomie : pourquoi ?Lcran : un mauvais support pour la lecture ? ~4 fois plus difficile que sur papier !)

Oui, cest en taille relle!

Ergonomie : pourquoi ?Satisfaction de lutilisateur

Pour que lutilisateur se repre sur le site web

Pour que le message soit bien compris

Pour que lutilisateur ne parte pas ds son arrive (rebond)et quil revienne (exprience positive)

Ergonomie : comment ?Du bon sens et de lempathie (se mettre la place de lusager ignare). (Mais pas seulement il y a des rgles qui ne relvent pas directement du bon sens.)

Exemple de bons sens :Ne pas imposer un scrolling vertical sans raison importante et faire en sorte quil soit clair quil y a de linformation plus bas

Autre exemple :Avoir un site web complexe avec environ 50 pages et aucun point de repre de navigation (fil dariane, plan, etc.)

Exemples de bonnes pratiquesIdentit du site : qui produit linformation, quelles sont ses missions (si le logo ne le dit pas clairement)

Rcence du contenu un site web non mis jour est mort et les informations indiques ont moins de valeur sauf cas particuliers (dossier sur un sujet ancien, avec rares possibilits de mises jour).

Pas trop de longs textes (lcran nest PAS fait pour lire). Une ligne de texte devrait tre constitue de 65 95 caractres environ.

Un menu = 4 7 lments (pour le menu principal), en haut ou gauche. JAMAIS droite, JAMAIS en footer, sauf sil sagit dun rappel.

Inspir de : https://www.slideshare.net/adviso/27-conseils-pratiques-en-ergonomie-web-presentation?qid=b1e158d3-311c-439a-a1e1-dbdece40b09a&v=&b=&from_search=2

Exemples de bonnes pratiquesLes textes du menu doivent tre clairs et courts (2 mots maximum)

Tout lien doit tre clair (lusager doit savoir o il va arriver / ce qui va se passer)

Facultatif mais apprciable : modifier lapparence dun lien au passage de la souris = on devine de suite que cest un lien

Si un lien pointe vers un site web extrieur, lindiquer autant que possible

Inspir de : https://www.slideshare.net/adviso/27-conseils-pratiques-en-ergonomie-web-presentation?qid=b1e158d3-311c-439a-a1e1-dbdece40b09a&v=&b=&from_search=2

Exemples de bonnes pratiquesProposer un fil dariane pour savoir o lon est.

Proposer un plan du site web, un moteur de recherche

Sur un site web avec du texte susceptible dtre imprim = prvoir une CSS dimpression

Surcharge dinformations : pas trop de scrolling vertical, pas trop dinformations sur un mme cranInspir de : https://www.slideshare.net/adviso/27-conseils-pratiques-en-ergonomie-web-presentation?qid=b1e158d3-311c-439a-a1e1-dbdece40b09a&v=&b=&from_search=2

Exemples de bonnes pratiquesConcernant les couleurs :Attention au contraste criture / fond (il doit tre lev)Attention aux couleurs identiques pour des contenus = il doit y avoir un lien logiqueLe choix nest couleur nest pas souvent une affaire de got!3 6 couleurs maximum

Outils utiles :Contraste texte/fond :https://snook.ca/technical/colour_contrast/colour.htmlhttps://www.paciellogroup.com/resources/contrastanalyser/Association de couleurs : http://paletton.com

Exemples de bonnes pratiquesConcernant les couleurs : quelques exemplesProblme de lecture du blanc sur le fond clair, selon les zones de la photo

Mettre un filtre sur le fond pour crer un contraste plus rgulier :

Exemples de bonnes pratiquesConcernant la typographie :Sobre, simpleTaille texte : entre 10 et 12 (aller jusqu 14 pour les seniors et jeunes enfants). La taille peut tre personnalise (via le site web ou navigateur)Attention lanti-crnelage (lissage) = rend le texte un peu flouPrfrer les minuscules aux majusculesPolices standards : Arial, Verdana, Open Sans, Georgia, TahomaPlus un paragraphe est large, plus il faut dinterligneMettre en gras limportantRarfier litalique et viter le soulignAvec ou sans emptement (serif / sans-serif) ? Dpend de la longueur du texte

Exemples de bonnes pratiquesConcernant les images :

Attention au poids totalPenser une navigation sans image

De mme, penser la lecture de site pour les personnes mal ou non voyantes

Exemples de bonnes pratiquesLe feedback immdiatSavoir si on fait bien ou mal ou quelles sont les limites immdiatementExemple : Twitter avec le nombre de caractre, import dun document dans Gmail (temps restant), niveau de scurit du mot de passe, etc.Eviter tout de mme les excs (sous peine dtre dcourageant si les attentes sont trop leves ou de noyer lusager sous la masse dinformation)

Lois de Gestalt : focus sur similarit & proximitSimilarit : lments similaires (forme, couleur, taille) auront une fonction identiqueProximit : les lments proches fonctionnent ensemble, les lments loigns non

Lois de Gestalt : focus sur similarit & proximitSimilarit : lments similaires (forme, couleur, taille) auront une fonction identiqueProximit : les lments proches fonctionnent ensemble, les lments loigns non

Lois de Gestalt : focus sur similarit & proximitSimilarit : lments similaires (forme, couleur, taille) auront une fonction identiqueProximit : les lments proches fonctionnent ensemble, les lments loigns non

Lois de Gestalt : focus sur similarit & proximitSimilarit : lments similaires (forme, couleur, taille) auront une fonction identiqueProximit : les lments proches fonctionnent ensemble, les lments loigns non

Lois de Gestalt : focus sur similarit & proximitSimilarit : lments similaires (forme, couleur, taille) auront une fonction identiqueProximit : les lments proches fonctionnent ensemble, les lments loigns non

Lois de Gestalt : focus sur similarit & proximitSimilarit : lments similaires (forme, couleur, taille) auront une fonction identiqueProximit : les lments proches fonctionnent ensemble, les lments loigns non

Lois de Gestalt : focus sur similarit & proximitSimilarit : lments similaires (forme, couleur, taille) auront une fonction identiqueProximit : les lments proches fonctionnent ensemble, les lments loigns non

Lois de Gestalt : focus sur similarit & proximitSimilarit : lments similaires (forme, couleur, taille) auront une fonction identiqueProximit : les lments proches fonctionnent ensemble, les lments loigns non

Loi de Fitts applique aux interfacesPlus cest loin et plus cest petit, plus on aura de difficult latteindre et cliquer dessus.Mathmatisable : http://www.guillaumegronier.com/ihm/resources/Supports-Cours/LoiDeFitts.pdf

Taille suffisante (pas ncessairement norme), en fonction du public. La taille peut concerner le bouton mais aussi la zone de clic.Regrouper ce qui fonctionne ensemble, viter les marginauxPlus un bouton est susceptible dtre utilis, plus il doit tre accessibleSur mobile : penser la porte des doigts (ex. pour un droitier sur un tlphone tenu verticalement, viter les boutons gauche / en haut gauche)

Ergonomie : les ides reuesOn lit les pages en ZOn lit les pages en FOn lit les pages en C

Cela dpend du contenu, de la forme de la page !

La mise en page guide la lecture et donc la bonne rception du message

Ergonomie : les ides reuesLa rgle des 3 clics :Pas une mauvaise ide, mais limite la notion daccessibilit au nombre de clicsOr, le temps mis pour identifier o est linformation, par ex., est au moins autant voire plus important !

Sil est ncessaire dutiliser + de 3 clics, ce nest pas forcment ngatif, du moment que lutilisateur ne se lasse pas et quil sait o il se trouve et comment passer la suite. toutefois, limiter le nombre de clics ncessaire pour accder une information est une bonne ide en soi !

Ergonomie : les ides reuesLopposition ergonomie / esthtique :Un site peut tre ergonomique mais moche mais un site peut aussi allier les deux.De plus, lesthtique peut aider lergonomie !

Ergonomie : les ides reuesOn ne scrolle jamais !Ah bon ? Moi si. Et toi ? Oui toi aussi ?Sur Facebook, cest mme le principe de baseEt avant Facebook ? Une tude de ClickTale (2006) :120 000 pages vues, dont 91 % scrollables76 % des pages ont t scrolles22 % jusquen bas

Boucher, A. (2007). Ergonomie Web : pour des sites web efficaces. Eyrolles.

Quelques liens utilesQuality Street : de bons conseils, avec exemples de bonnes et mauvaises pratiqueshttp://www.qualitystreet.fr/2010/08/04/design-dinterface-et-critere-ergonomique-1-lincitation/

Studiovitamine : voir notamment la partie sur les policeshttp://ergonomie-web.studiovitamine.com/mise-en-forme-du-texte,359,fr.html

Ensemble : analyses chaud

Ensemble : analyses chaud

Ensemble : analyses chaud

Ensemble : analyses chaud

Ensemble : analyses chaud

Ensemble : analyses chaud

Ensemble : analyses chaud

Ensemble : analyses chaud

Travail pour le 05 mai 2017 16h00A laide de ce cours et des liens suivants :https://www.slideshare.net/adviso/27-conseils-pratiques-en-ergonomi