Une expérience utilisateur inclusive Ergonomie et accessibilité, une équipe gagnante! Stéphanie Levasseur 23 novembre 2012

1. Conception centrée sur l’utilisateur

5 critères essentiels dans la démarche La prise en compte en amont des utilisateurs, de leurs tâches et de leur environnement. La participation active des utilisateurs, garantissant la fidélité des besoins et des exigences liées à leurs tâches. La répartition appropriée des fonctions entre les utilisateurs et la technologie. L'itération des solutions de conception, jusqu'à satisfaction des besoins et des exigences exprimés par les utilisateurs. L'intervention d'une équipe de conception multidisciplinaire, visant une expérience utilisateur optimale.

Le système répond aux besoins Conception centrée sur l'opérateur humain pour les systèmes interactifs (ISO 9241-210:2010) 1. Analyse 2.Conception 3. Évaluation Le système répond aux besoins Mise en ligne OUI NON

1. Phase d’analyse Objectif: Intrants: Méthodes utilisées: Préciser l’utilité recherchée par les utilisateurs de l’application. Intrants: Attentes et besoins des utilisateurs finaux; Tâches des utilisateurs; Contexte d’utilisation. Méthodes utilisées: Questionnaires; Entrevues; Grilles d’observation heuristiques; Groupes de discussions, etc. Test de tri de cartes

Attentes et besoins des utilisateurs finaux Caractéristiques de l’environnement: Température ambiante; Niveau de sécurité; Éclairage, etc.

Attentes et besoins des utilisateurs finaux Caractéristiques psychologiques: Niveau de stress; Capacité de concentration; Motivation envers la tâche à exécuter, etc.

Attentes et besoins des utilisateurs finaux Caractéristiques physiologiques Cognitives; Visuelles; Motrices; Auditives Source: Ressources humaines et Développement des compétences Canada http://www.rhdcc.gc.ca/fra/condition_personnes_handicapees/rapports/rhf/2009/page03.shtml

Diversité de la clientèle grand public Handicaps ou limitations sévères Limitations modérées ou légères Limitations temporaires Limitations liées au vieilissement Analphabètes fonctionnels Faible maîtrise de la langue Effets secondaires de médicaments Fatigue extrême Etc.

2. Phase de conception Objectif: Intrants: Itérations: Créer une maquette ou prototype (bas ou haut niveau). Intrants: Analyse des utilisateurs et leurs besoins; Analyse des tâches; Principes et recommandations ergonomiques (lignes directrices, heuristiques); Standards de conception (conventions); Besoins d’affaires, technologiques, etc. Itérations: Modifications suite aux tests utilisateurs; Nombre: 2-3.

Prototype papier

Maquette fil de fer (wireframe)

Maquette graphique

3. Phase d’évaluation Objectif: Validation Tests utilisateurs Mesurer l’utilisabilité du produit. Validation Satisfaction; Efficience; Efficacité. Tests utilisateurs Tâches réelles; Participants (caractéristiques des utilisateurs réels).

Mesures quantitatives et qualitatives Le taux de succès; Le nombre d'erreurs effectuées; Le temps d'exécution de chaque tâche; Le nombre d'étapes nécessaires à la complétion de la tâche. Mesures qualitatives Le recours éventuel à un support ou une aide interne ou externe; Le rythme d'apprentissage; La satisfaction des utilisateurs.

2. Ergonomie vs accessibilité

Quelques classiques en ergonomie Limitations visuelles Grosseur de la police de caractère; Contrastes de couleur; Description pour les images (ALT), etc. Limitations motrices Grosseur des boutons; Espacement entre le liens, etc. Limitations cognitives Nombre d’éléments à mémoriser; Cohérence des interfaces; Groupements des contenus, etc. Limitations auditives Sous-titrage.

Adaptabilité - Flexibilité - Prise en compte de l'expérience de l'utilisateur Source: Les critères ergonomiques de Bastien & Scapin Plan du site Accueil À propos Nouvelles Auteurs Collections Roman illustré Premier roman Roman jeunesse Roman d’aventure Conte pour Tous Points de vente Galerie Contact Règle d’accessibilité: 2.4.5 Accès multiples - AA

Guidage - Groupement / Distinction par le format Source: Les critères ergonomiques de Bastien & Scapin Vous avez des erreurs. Règles d’accessibilité: 1.4.1 Utilisation de la couleur - A 1.3.3 Caractéristiques sensorielles  - A 3.3.3 Suggestion après une erreur - AA

Guidage - Feedback Immédiat Gestion des Erreurs - Protection contre les Erreurs Source: Les critères ergonomiques de Bastien & Scapin Libellé * Libellé Minimum 10 caractères Libellé Libellé Règles d’accessibilité: 3.3.5 Aide – AAA 3.3.4 Prévention des erreurs (juridiques, financières, de données - AA

Gestion des Erreurs - Protection contre les Erreurs - Qualité des Messages d'Erreurs - Correction des Erreurs Source: Les critères ergonomiques de Bastien & Scapin * Nom d’utilisateur * Champ obligatoire * Mot de passe ********** Soumettre Messages d’erreur Le nom d’utilisateur est obligatoire. Le mot de passe doit être composé de chiffres et de lettres. Règles d’accessibilité: 3.3.1 Identification des erreurs - A 3.3.3 Suggestion après une erreur - AA 3.3.4 Prévention des erreurs (juridiques, financières, de données - AA

Charge de Travail Source: Les critères ergonomiques de Bastien & Scapin Section 2 Section 3 Section 4 Section 5 Section A Titre de page B Cliquez ici OK GO Accueil – Section1 – Section 1.1 – Section 1.1.1 Règles d’accessibilité: 2.4.6 En-têtes et étiquettes - AA 2.4.8 Localisation – AAA 3.1.5 Niveau de lecture AAA

Charge de Travail Source: Les critères ergonomiques de Bastien & Scapin Si vous désirez participer au concours, cliquez ici. Suspendisse viverra pulvinar venenatis. Nunc rhoncus quam id erat pharetra vel semper magna feugiat. Nunc dictum quam tincidunt lacus tempor ultrices. Vestibulum malesuada, panier de fruits porta, odio nibh commodo mauris, et tincidunt velit lorem et massa. Nulla orci libero, eleifend quis faucibus et, tincidunt quis quam. Etiam sodales leo vitae enim adipiscing ultricies. Mauris feugiat neque ultricies purus posuere mollis. Integer cursus leo sit amet tortor luctus tincidunt imperdiet risus ornare. Règles d’accessibilité: 2.4.4 Fonction du lien (selon le contexte) - AA 2.4.9 Fonction du lien (lien uniquement) - AAA

Développement Web multidisciplinaire Analyste d’affaires SEO Développeur Designer Ergonome Rédacteur Web Architecte de système Analyste fonctionnel

Questions??? La fin!!! MERCI  Pour me joindre: ca.linkedin.com/in/stephanielevasseur