Post on 04-Apr-2015
Ergonomie du web(ou la science complexe de ne pas perdre ses utilisateurs)
Alain Robillard-Bastien<arbastien@ideactif.com>
Québec, 16 novembre 2000
arbastien@ideactif.com
Sommaire
ObjectifsL’ergonomieL’expérience utilisateurLe site ergonomiqueOutils ergonomiquesAttitude ergonomique
arbastien@ideactif.com
Faits vécus (attention: troublant)
« Ca me permet de payer mes factures de téléphone » (après une heure d’utilisation d’un site interentreprises d’une compagnie de téléphone)
« Je vais utiliser le site pour passer ma commande d’épicerie » (en utilisant un site de distribution de coupons rabais)
« C’est de ma faute, je ne suis pas assez bon (mais je n’y retournerais jamais…) » (L’utilisateur moyen de bien trop de sites)
arbastien@ideactif.com
Faits vécus (attention: troublant)
« Tout le monde sait ça! » (Ha? Pas eux?)
« Les autres sites sont identiques. »
(Sont-ils tous efficaces?) « C’est flash, c’est cool! »
(Serait-ce aussi peine perdue?)
arbastien@ideactif.com
Objectifs
Compréhension du concept d’ergonomie appliqué au web
Caractérisation d’un site ergonomique basée sur des critères
Connaissance des outils de base de l’ergonomie
arbastien@ideactif.com
L’ergonomie Ergonomie : Didac. Science de l'adaptation du
travail à l'homme. (Elle porte sur l'amélioration des postes et de l'ambiance de travail, sur la diminution de la fatigue physique et nerveuse, sur l'enrichissement des tâches, etc.)
Utilisabilité : Capacité d'un système donné à être utilisé par un individu. Par extension, l'ensemble des moyens et des ressources permettant d'évaluer et de faciliter l'utilisation d'un système.
arbastien@ideactif.com
L’ergonomie
Le défi ergonomique web:
Performance
« Branding » Utilisabilité
arbastien@ideactif.com
L’ergonomie
Le défi ergonomique web:
Performance
« Branding » Utilisabilité
Interface
arbastien@ideactif.com
L’ergonomie
Interface: Dispositif (matériel et logiciel) grâce auquel s'effectuent les échanges d'informations entre deux systèmes.
Espace de relation, de communication, entre l’utilisateur et le site
arbastien@ideactif.com
L’expérience utilisateur
Source: axance.fr
arbastien@ideactif.com
L’expérience utilisateur
Source: axance.fr
arbastien@ideactif.com
L’expérience utilisateur
Qualité première d’un site web:Assurer la meilleure expérience possible d’un contexte donné ou d’une activité prédéfinie, pour l’utilisateur qui initie ou poursuit une relation dans cet espace communicationnel, transactionnel et dynamique.
arbastien@ideactif.com
L’expérience utilisateur
« In order to achieve high-quality user experience in a company's offerings there
must be a seamless merging of the services of multiple disciplines, including
engineering, marketing, graphical and industrial design, and interface design. »
-Nielsen Norman Group
arbastien@ideactif.com
L’expérience utilisateur
Regroupe toutes les dimensions de la relation entre l’utilisateur et le diffuseur
Requiert une forte synergie entre différents services
Critique dans un monde d’affaires et de services électroniques
L’interface est un des canaux privilégiés
arbastien@ideactif.com
Le site ergonomique
arbastien@ideactif.com
Le site ergonomique
arbastien@ideactif.com
Le site ergonomique
arbastien@ideactif.com
Le site ergonomique
LA définition du site ergonomique n’existe pas car chaque site s’adresse à un public spécifique, possède ses propres objectifs et doit assumer ses contraintes propres.
arbastien@ideactif.com
Le site ergonomique
Des outils pour évaluer et penser l’ergonomie d’un site: l’ergonomie se mesure et n’est pas que le « gros bon sens »!
•Les guides de style et les heuristiques
•Les critères ergonomiques
arbastien@ideactif.com
Le site ergonomique
Les guides de style et heuristiques• Heuristiques de Nielsen
– « Visibility of system status »
– « Match between system and the real world »
– « Consistency and standards »
– « Aesthetic and minimalist design »
– Etc.
arbastien@ideactif.com
Le site ergonomique
Les guides de style et heuristiques• Heuristiques de Nielsen
– Faciles à assimiler et utiliser
– Imprécises, portent à interprétation
– Difficulté à obtenir un consensus
– Identification partielle des problèmes ergonomiques
– Bon assistant de création
arbastien@ideactif.com
Le site ergonomique
Les guides de style et heuristiques• Heuristiques de Nielsen
– Version web commentée par Keith Instone:« Consistency and standards » « Within your site, use wording in your content and buttons consistently. »
arbastien@ideactif.com
Le site ergonomique
Les guides de style et heuristiques• « IBM »: Ease of use
– « Planning »
– « Design »
– « Production »
– « Maintenance »
– Etc.
arbastien@ideactif.com
Le site ergonomique
Les critères ergonomiques• Excellents outils pour voir, comprendre et
expliquer des problèmes ergonomiques• Orienter les choix de conception vers des pistes
ergonomiquement solides• Aucune, ou peu d’influence sur la mercatique• Éviter les pièges de la subjectivité et des goûts
personnels en donnant un cadre de travail neutre et efficace
arbastien@ideactif.com
Le site ergonomique Les critères ergonomiques
Guidage Charge de travail Contrôle explicite Adaptabilité Gestion des erreurs Homogénéité/Cohérence Signifiance des Codes et Dénominations Compatibilité
arbastien@ideactif.com
Le site ergonomique: critères
• Guidage• Moyens mis en oeuvre pour conseiller, orienter,
informer et conduire l'utilisateur lors de ses interactions avec l'ordinateur.
• Sous critères:• Incitation• Groupement – Distinction: format, localisation• Feedback immédiat• Lisibilité
arbastien@ideactif.com
Le site ergonomique: critères
• Guidage: exemple d’incitation
arbastien@ideactif.com
Le site ergonomique: critères
• Guidage: exemple de groupement
arbastien@ideactif.com
Le site ergonomique: critères
• Guidage: exemple de groupement
arbastien@ideactif.com
Le site ergonomique: critères
• Guidage: exemple de groupement
arbastien@ideactif.com
Le site ergonomique: critères
• Guidage: exemple de feedback immédiat
arbastien@ideactif.com
Le site ergonomique: critères
• Guidage: exemple de lisibilité (et autres!)
arbastien@ideactif.com
Le site ergonomique: critères
• Guidage: exemple de lisibilité (et autres!)
arbastien@ideactif.com
Le site ergonomique: critères
• Charge de travail• Réduction: charge perceptive, mnésique• Augmentation: efficacité du dialogue
• Sous-critères:• Briéveté
• Concision, Actions minimales• Densité informationnelle
arbastien@ideactif.com
Le site ergonomique: critères
• Charge de travail: exemple de concision
arbastien@ideactif.com
Le site ergonomique: critères
• Charge de travail: exemple de densité
arbastien@ideactif.com
Le site ergonomique: critères
• Contrôle explicite• Prise en compte par le système des actions
explicites des utilisateurs et le contrôle qu'ont les utilisateurs sur le traitement de leurs actions.
• Sous critères:• Action explicite• Contrôle utilisateur
arbastien@ideactif.com
Le site ergonomique: critères
• Contrôle explicite: exemple, contrôle util.
arbastien@ideactif.com
Le site ergonomique: critères
• Contrôle explicite: exemple, contrôle util.
arbastien@ideactif.com
Le site ergonomique: critères
• Adaptabilité• Capacité à réagir selon le contexte et
selon les besoins et les préférences des utilisateurs.
• Sous-critères:• Flexibilité• Prise en compte de l’expérience de
l’utilisateur
arbastien@ideactif.com
Le site ergonomique: critères
• Adaptabilité: exemple de flexibilité
arbastien@ideactif.com
Le site ergonomique: critères
• Adaptabilité: exemple de prise en compte…
arbastien@ideactif.com
Le site ergonomique: critères
• Gestion des erreurs• Moyens permettant d'une part d'éviter ou
de réduire les erreurs, d'autre part de les corriger lorsqu'elles surviennent.
• Sous-critères:• Protection contre les erreurs• Qualité des messages d’erreurs• Corrections des erreurs
arbastien@ideactif.com
Le site ergonomique: critères
• Gestion des erreurs: exemple de protection
arbastien@ideactif.com
Le site ergonomique: critères
• Gestion des erreurs: exemple de message
arbastien@ideactif.com
Le site ergonomique: critères
• Homogénéité/Cohérence• Les choix de conception d'interface
doivent être conservés pour des contextes identiques, et doivent être différents pour des contextes différents.
• Notion d’homogénéité corporative et institutionnelle
arbastien@ideactif.com
Le site ergonomique: critères
• Homogénéité/Cohérence: exemple
arbastien@ideactif.com
Le site ergonomique: critères
• Homogénéité/Cohérence: exemple
arbastien@ideactif.com
Le site ergonomique: critères
• Homogénéité/Cohérence: exemple
arbastien@ideactif.com
Le site ergonomique: critères
• Homogénéité/Cohérence: exemple
arbastien@ideactif.com
Le site ergonomique: critères
• Signifiance des Codes et Dénominations• Adéquation entre l'objet ou l'information
affichée ou entrée, et son référent.
arbastien@ideactif.com
Le site ergonomique: critères
• Compatibilité• Accord entre les caractéristiques des
utilisateurs et des tâches, d'une part, et l'organisation des sorties, des entrées et du dialogue d'une application donnée, d'autre part.
arbastien@ideactif.com
Le site ergonomique: critères
• Compatibilité: exemple
arbastien@ideactif.com
Outils ergonomiques
Classement de cartes Évaluation experte (heuristique) basée sur
des critères Tests d’utilisabilité
arbastien@ideactif.com
Attitude ergonomique
Neutralité face aux intervenants Conscience de l’utilisateur Connaissance de la tâche
arbastien@ideactif.com
Références Web Axance
http://www.axance.fr Nielsen Norman Group
http://www.nngroup.com/about/userexperience.html
Heuristiques de Nielsen: http://www.useit.com/papers/heuristic/heuristic_list.html
Commentaires de Keith Instone:http://webreview.com/wr/pub/97/10/10/usability/sidebar.html
Ergonomie du web:http://www.crim.ca/~arbastie/index.html
arbastien@ideactif.com
Contact
Alain Robillard-Bastien
arbastien@ideactif.com
www.ideactif.com
Cette présentation:
www.ideactif.com/16nov/