Interfaces & Ergonomie du Web
Management & Nouvelles Technologies (MNT) 23 Novembre 2011
James Eagan
INTRODUCTION
• Pourquoi l’ergonomie est-il important ?
• Applis internes : moins de performance –> plus cher
• Externe : moins de ventes
IBM
• 1999 : « Most popular feature was ... search ... people couldn’t figure out how to navigate the site »
• « The 2nd most popular feature was the help button, because the search technology was so ineffective. »
• Après re-conception du site centrée utilisateur :
• Utilisation du bouton « help » a baissé 84 %
AUJOURD’HUI
• Capacités Humaines
• Conception centrée utilisateur
• Analyse de tâches (connaître son utilisateur)
• Patrons de conception en ergonomie/web
• Prototypage léger / Prototypage en papier
• Evaluation (avec ou sans utilisateurs)
PERCEPTION
REGARDONS L’ŒUIL
• Capte trois couleurs : bleu, vert, rouge (en réalité jaune)
• Chaque photo-pigment sensible aux parties différentes du spectre
• Autre couleurs perçu en combinant ces trois
from http://insight.med.utah.edu/Webvision/index.html
FOCUS
• Plus de besoin de focus pour des couleurs saturés que désaturés
• Conséquence : évite les couleurs saturés dans les interfaces graphique sauf pour attirer l’attention
MODÉLISATION DE L’UTILISATEUR
• Pourquoi modéliser l’utilisateur ?
• Pour tester compréhension
• Prédire l’influence, efficacité d’une nouvelle technologie
MODÈLE PROCESSEUR HUMAIN
• Développé par Card, Moran, Newell (’83)
• à partir des observations empiriques
Long-term Memory Working Memory
Visual Image Store
Auditory Image Store
Perceptual Motor Cognitive
Eyes
sensory buffers
PRINCIPES DE BASES
• Parfois serial, parfois parallèle
• serial en action, parallèle en reconnaissance
• appuyer sur une touche en réponse à une lumière
• conduire (lire des panneau, écouter à la fois)
• Paramètres :
• Temps de cycle pour chaque processeur (~100-200 ms)
MÉMOIRE
• Mémoire de travail
• Faible capacité (7 ± 2 éléments)
• 0670236646 vs. 06 70 23 66 46
• DECIBMGBC vs. DEC IBM GBC
• Accès rapide (~70 ms), désintégration rapide (~200 ms)
• Mémoire à long terme
• sans limite ?
• lente (~100 ms), mais peu de désintégration
PRINCIPES DU MPH
• Cycles de reconnaissance-action
• À chaque cycle, contenus de la mémoire de travail déclenche actions associée dans la mémoire à long terme
• Actions modifient les contenus de la mémoire de travail
• Principe de discrimination
• Mémoire trouvée déterminée parmi candidats selon stimuli
FITTS’ LAW
• Temps de mouvement gouverné par la taille de la cible et sa distance :
• Tpos = a + b log2 (Dist/Size + 1)
• Conclusion : temps de mouvement de la main dépend seulement sur la précision relative nécessaire
PERCEPTION
• Deux stimuli dans le même cycle sont fusionné pour créer un seule concept
• Film semble «réel» à 10 images/sec
• Causalité
• Deux stimuli peuvent fusionné si le premier semble causer l’autre
EXPÉRIENCE
• Volontaire
• Lisez les couleurs dans la liste aussi vite que possible
• Dites quand vous avez terminé
• Tout le monde vous chronométra
READY... GO!
• Papier
• Maison
• Arrière
• Schédule
• Page
ENCORE UNE FOIS...
READY... GO!
• Jaune
• Blanche
• Noir
• Vert
• Rouge
MÉMOIRE
• Interférence
• Deux indices fortes dans la mémoire de travail
• Liée à deux élément différents dans la mémoire à long terme
• Pourquoi se concerner avec la mémoire ?
• Aide à comprendre l’utilisateur
• Plus important avec des personnes âgées
FAVORISER
RECONNAISSANCE
• Éviter d’obliger l’utilisateur à chercher dans sa mémoire
33 % conversion
66 % conversion
Conception Centrée Utilisateur
Conception
Prototypage
Evaluation
•
Qui est l’utilisateur ?
•
Quels sont ses besoins ?
•
Quel est le contexte d’utilisation ?
•
Sociale, dans l’organisme, environnement
•
Pourquoi veut-il faire ces tâches ?
MYTHES DE LA CONCEPTION CENTRÉE UTILISATEUR
• Mythe 1 : Un bon design est juste du bon sens
• Pourquoi y a-t-il autant de mauvais sites ?
• Mythe 2 : Seulement les experts peuvent créer des bons designs
• Les experts sont plus rapides, mais tout le monde peut comprendre la CCU
•
Mythe 3 : On peut toujours changer l’interface avant de déployer
•
Ça suppose que le site comporte déjà de la
bonne fonctionnalité est des bonnes pratiques de développement
•
Mythe 4 : Un bon design prend trop de temps/est trop cher
•
CCU aide à trouver des problèmes tôt dans le
processus, réduisant le coût et le temps de
•
Mythe 5 : Un bon design n’est que des jolies images
•
N’est qu’une part de l’identité de l’organisme
•
Mythe 6 : Suivre des guidelines suffit pour créer un bon design
•
Guidelines s’occupe seulement de
l'implémentation, pas de la fonctionnalité et son
organisation
•
Mythe 7 : Le client peut toujours se servir de la doc/aide
•
Si le client regarde la doc, il est déjà énervé !
•
Mythe 8 : Market Research suffit pour comprendre les besoins du client
•
Montre ce que le client dit, pas ce qu’il fait.
•
Mythe 9 : l’assurance de qualité/tests peuvent montrer si un site marche bien
•
Le testing montre seulement si le site
corresponde à la spécification, pas ce qui arrive
avec des vrais clients
Clients :
• Rôles (Qui) • Tâches (Quoi) • Contexte
Marketing : • Priorités • Messages Technologie : • Produits
• Architecture
Définition du design
• Description de problèmes
Processus de Développement
Design Discovery
Design
Exploration Evaluation Exécution
Clients, Produits, Entreprise, Marketing
Clients, Produits,
Entreprise, Marketing Clients, Produits, Entreprise, Marketing
Storyboards
Proposal
• Démos
• Prototypes légers Itération
• Réaliser le design
• Évaluation avec utilisateurs
ITÉRATION
Design
Prototype
Évaluation
À chaque étape !
DESIGN
• Un bon design dépend des besoins
• Le but de l’objet
• Pas comment c’est implémenté
• e.g., portable moins important que «app mobile»
DESIGN = REPRÉSENTATION
• Pour un interface, ça peut être :
• sketches ou storyboards
• outline / diagrammes de flux
• prototypes exécutables
Schématiques
Storyboards
UTILISABILITÉ
• Selon l’ISO :
• « le degré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte
d’utilisation spécifié »
• Pas besoin d’un design « sec » ou conçu que pour des novices
BUTS D’UTILISABILITÉ
• Capacité à apprendre
• Plus rapide la 2ème fois...
• Mémorable
• De séance à séance
• Flexible
• Plusieurs moyennes de
• Robuste
• Minimise taux d’erreur
• Feedback
• Découvrable
• Fun
CONCEPTION CENTRÉE UTILISATEUR
• Connaître son utilisateur
• Capacités cognitives
• Perception
• Manipulation d’objets physiques
• Mémoire
• Contexte dans l’entreprise
• L’utilisateur est impliqué dans tout le processus
CONCEPTION CENTRÉE UTILISATEUR
• Principe : l’utilisateur final est le mieux placé pour évaluer et utiliser le produit
• Ceci n’est pas à dire que l’utilisateur à toujours raison !
ANALYSES DE TÂCHES
ANALYSE DE TÂCHES
• Observation de pratiques existantes
• Exemples et scénarios de vrais usages
• Permettre d’essayer de nouvelles idées avant de les construire
PATRONS DE CONCEPTION
• Manipulation Directe
• Entonnoir de processus « Process funnel »
• Création de compte
• Organisation par tâche / organisation hiérarchique
• Validation/prévention d’erreurs
MANIPULATION DIRECTE
• Interagir directement avec l’objet
• Souvent avec drag-n-drop
MANIPULATION DIRECTE
• Interagir directement avec l’objet
• Souvent avec drag-n-drop
ENTONNOIR DE PROCESSUS
• Version simplifiée de l’interface
• Adaptée pour focaliser sur le processus impliqué
• Évite de distractions, confusion
PROTOTYPES LÉGERS
MAGICIEN D’OZ
• L’intervenant joue l’ordinateur
• Très important pour des fonctionnalités difficile à implémenter
ÉVALUATION HEURISTIQUE
• 5-7 Experts
• Heuristiques d’évaluation
10 HEURISTIQUES DE NIELSEN
• Visibility of system status
• Match between system and the real world
• User control and freedom
• Consistency and standards
• Error prevention
• Recognition rather than recall
USER TESTING
• <Vidéo>
SOMMAIRE
• Capacités Humaines
• Conception centrée utilisateur
• Analyse de tâches (connaître son utilisateur)
• Patrons de conception en ergonomie/web
• Prototypage léger / Prototypage en papier
• Evaluation (avec ou sans utilisateurs)
