14 novembre 2012 Grégory Petit

La semaine dernière Les types dimage Gestion de la taille des images Utilisation des images avec Dreamweaver

Et donc on fait quoi aujourdhui? Conception centrée utilisateur Analyse des besoins Maquette Validation

Maquette Scénarisation interactive Analyse des besoins Objectifs de communication Cas dutilisation, scénarios Description du contenu et exemples Design de la structure dinteraction Design des principaux écrans et des boutons Validation par les usagers Programmation Validation par le client

Conception centrée utilisateur

Encore des préjugés chez les concepteurs … « Bien sur que je sais quel genre dutilisateur va utiliser mon produit! » « Jai été étudiant, donc je sais comment concevoir un produit pour des étudiants. » « Si jai une bonne idée, les utilisateurs laimeront certainement! » « De toute façon, les utilisateurs ne savent comment dire ce quils veulent! »

Conception centrée utilisateur

Connaitre lutilisateur!!! Koko et Penny Patterson : création dun langage des signes adapté aux gorilles! Ordinateur pour Koko, le Kokos Mac II qui lui permet dactiver des phrases vocales en touchant des icones sur un écran tactile :

Connaitre lutilisateur!!! Définir les caractéristiques de lutilisateur : Connaître la physiologie et la psychologie basique humaine Groupe spécifique? (non-voyants, enfants, personnes âgées…) Ses connaissances, compétences et expériences avec la technologie Son éducation, sa profession Ses habitudes de travail Etc.

Conception centrée utilisateur Produit dun processus de consultation et de participation active des utilisateurs Préoccupation en amont des utilisateurs, de leurs tâches et de leur environnement Répartition appropriée des fonctions entre les utilisateurs et les concepteurs

Conception centrée utilisateur Cycle de conception : itération de solutions démarche qui boucle et reboucle jusqu'à ce que le système satisfasse aux exigences définies au départ Intervention d'une équipe de conception multidisciplinaire Spécification et poursuite dobjectifs précis dutilisabilité

Analyse des besoins

Maquette Scénarisation interactive Analyse des besoins Objectifs de communication Cas dutilisation, scénarios Description du contenu et exemples Design de la structure dinteraction Design des principaux écrans et des boutons Validation par les usagers Programmation Validation par le client

Analyse des besoins Inventaire des attentes par rapport au site Web (fournisseurs et utilisateurs du site) Analyser les expériences antérieures Analyser ce qui existe, ce qui va bien et ce qui doit changer Commencer à répertorier les objets, les actions, les attributs, le vocabulaire à utiliser Caractéristiques des usagers potentiels, leurs compétences et attitudes Les usagers doivent être impliqués dans lanalyse des besoins!

Analyse des besoins Inventaire général des sources d'information, exemple de contenus, caractéristiques médiatiques du contenu, contraintes à l'accès Ressources disponibles pour aider à l'élaboration, la mise en forme, la mise à jour Description des contraintes techniques à considérer pour l'élaboration et la diffusion

Analyse des besoins – méthodologie Étude ethnographique Observation des activités, des tâches, de lutilisation des systèmes existants Identification des processus de communication, des goulots détranglement, observation et recueil en situation des besoins Entrevues auprès des principaux acteurs concernés par lélaboration du système Entrevues auprès des usagers et clients

Analyse des besoins – méthodologie Recherche expériences similaires, systèmes existants, sources de contenus Description fonctionnelle de lapplication à développer Intentions, cas dutilisation, fonctions principales, scénarios Esquisse générale de structuration des objets, du contenu Estimation préliminaire des coûts et de léchéancier

Analyse des besoins – produits Texte décrivant les besoins et contraintes Texte décrivant le contexte prévu dutilisation Texte décrivant la compétition et expérience antérieure étude de lexistant Texte spécifiant les objectifs et la stratégie privilégiée Liste des acteurs, leur contexte dutilisation et des exemples de fonctions Liste de cas dutilisation proposés et mis en ordre de priorité diagramme de cas dutilisation

Les cas dutilisation On fait cette étape suite aux entrevues et en examinant ce qui existe analyse des besoins! On représente tout ce que le système fait ou tout ce quon veut faire avec. Quels sont les buts et les usages? Cas = Acteur + Activité ou utilisation sur une composante de loutil ou sur un autre acteur

Les cas dutilisation Exemple dun forum entre professeurs et étudiants Étudiant Écrire des messages sur ce quil lit. Associer les messages avec ce qui a été vu en cours. Prof Être averti de ceux qui ne sont pas branchés depuis X jours. Tous Sélectionner les messages que lon veut pouvoir relire, et les mettre à part. Trier les messages en ordre de priorité.

Diagramme de cas dutilisation Trier messages Archiver messages Surveiller la présence UsagerÉtudiant Ecrire messages Associer messages Professeur

Définition des objectifs de communication Choisir parmi les besoins, les fonctions possibles et préciser la stratégie Trop mieux La meilleure approche la plus directe Les fonctions et objectifs primaires et secondaires Spécifier le message à passer et les fonctions visées

Définition des objectifs de communication Choisir une métaphore si besoin et la justifier Choisir les outils techniques à utiliser (environnement matériel et logiciel) Choisir les techniques de médiatisation (composantes des médias) Définir la stratégie générale de l'interface Définir les critères de performance et dutilisabilité visés.

Maquette

Scénarisation interactive Analyse des besoins Objectifs de communication Cas dutilisation, scénarios Description du contenu et exemples Design de la structure dinteraction Design des principaux écrans et des boutons Validation par les usagers Programmation Validation par le client

Les représentation structurales Il est nécessaire de faire une représentation structurale des scénarios et des interactions dune application avant tout codage! Cela se fait avant la maquette physique. On peut faire ça sur papier, ou avec des logiciel spécialisés (Microsoft Visio, Smartdraw, Axure, Omnigraffle, ConceptDraw) ou non (Word, Photoshop, etc.). On pense déjà aux futurs boutons, menus et autres moyens dinteraction qui déclencheront les actions.

La partie statique Cas dutilisation Décrire toutes les fonctionnalités du système, tous les échanges possibles entre les usagers et le système. Les ordonner et les choisir. Structure des objets De quoi on parle, quest-ce quon veut savoir ou montrer, avec quels détails? Catégories et exemples des composantes. Structure du site et hiérarchies des pages Comment on organise le site pour faciliter la communication. Stratégie de navigation et structure des pages.

La partie dynamique Flux et divers processus Décrire la communication entre différentes personnes ou diverses fonctions sur un système. Flux et décisions Structure dynamique Décrire la navigation avec des conditionnels. Flux et séquence Montrer plus en détail ce qui se passe « derrière » une interaction (les processus en activités, enregistrements, vérifications et calculs).

Et donc? Partie statique + partie dynamique = représentation des interfaces Avec les structures, on peut donc associer une représentation visuelle à lapplication multimédia que lon veut faire. On pense ainsi aux futurs boutons, menus et autres moyens dinteraction qui déclencheront les actions.

Le contenu Définir les contenus dinformation Définir les variables dont on aura besoin pour classer l'information et pour construire les pages daccès au contenu Définir comment les informations vont interagir, si elle doivent interagir

Structure des objets Collectif de salles de spectacle Catégories: Spectacle : titre, artiste, date, heure, prix du billet Salle de spectacle : nom, lieu, capacité de spectateur, superficie de la scène, type de forfait de location Exemple! Spectacle : The Flower Tour, Émilie Simon, 23 aout 2008, 20h, 35$ (régulier) Salle de spectacle : Spectrum, Ste Catherine, 3000 spectateurs, 350 pieds carrés, [forfait 1 jour (2000$), forfait moins dune semaine (1500$ par jour), forfait moins dun mois (1200$ par jour)]

Description des actions Définir les principales actions que lon veut faire sur les objets Les actions de bases souvent utilisées : Menus, barre doutils Trier Rechercher et filtrer de linformation Imprimer, enregistrer Commenter Décider des actions en fonction de la fréquence, des standards, du degré dinteraction désiré, de lutilisation des clés de claviers, etc.

Structure statique des pages Diagramme permettant de donner une vision globale du site Web On ne met pas tous les liens! Mais on met les contenus, les dossiers et les pages!

Structure statique des pages Accueil Flash Section 1 Section 2 Section 3 Section 4 IntroFlash Intro Accueil Section 5 Références Aide Glossaire Forum Choix Automatique Changement dans le cadre seulement Sous-section Sections

Structure statique des pages AccueilDescriptionLiensRéférences Plan de Cours Évaluation Travail 1 Travail 2 Projet Structure du site Web du cours

Structure dynamique des pages Information sur les bourses Calendrier des demandes Une bourse pour vous ? Étranger ? 1er Cycle ? Liste des bourses Accessibles aux étrangers Boursier ? Liste des bourses De premier cycle Classées par département Règlement pour le renouvellement oui non etc.

Théâtre du rideau vert Le théâtre nexiste pas sans vous Venez y jouer votre rôle Information Passion Rêve Tendresse Amour Ouverture: Animation mots apparaissent Trois coups… Interaction: Mois - Effet 3D au survol Bienvenue au Théâtre du Rideau Vert Saison 2008 Sortie : Seul le cadre droit en bas change Noubliez pas les titres, Respectez la grille et les cohérence interne Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc English

Théâtre du rideau vert Bienvenue au Théâtre du Rideau Vert Programme Janvier 2008 Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc English 6 janvier au 13 mars Le malade imaginaireMolière 18 janvier au 19 avril La maison de poupée Ibsen 20 janvier au 15 février Ubu RoiIonesco Ouverture : Choix du mois reste sélectionné Interaction : 3 lignes de biographie des auteurs apparaissent au survol 3 lignes de description apparaissent au survol du titre Étoiles liées aux évaluations des spectateurs

Théâtre du rideau vert Bienvenue au Théâtre du Rideau Vert Le Malade Imaginaire Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc English Argan : Remy Girard Toinette: Guylaine Tremblay Le Malade imaginaire est la dernière comédie écrite par Molière. C'est une comédie-ballet en trois actes (comportant respectivement 8, 9 et 15 scènes), représentée au Théâtre du Palais- Royal le 10 février 1673 par la troupe de Molière ; elle puise son inspiration dans la commedia dell'arte. La musique est de Marc- Antoine Charpentier et les ballets de Pierre Beauchamp. Mettre les vrais textes, un aperçu des vraies images, de façon à tester les grandeurs, la lisibilité, etc.. Ne pas oublier les éléments généraux, comme le titre Rideau Vert, le bouton pour la version anglaise, etc.. Vous pouvez justifier les aspects ergonomiques de la page.. Interaction: Description défilable Acteurs sont cliquables Les étoiles permettent de coter. Votre évaluation ?

Validation

Maquette Scénarisation interactive Analyse des besoins Objectifs de communication Cas dutilisation, scénarios Description du contenu et exemples Design de la structure dinteraction Design des principaux écrans et des boutons Validation par les usagers Programmation Validation par le client

Préjugés Le développement et lévaluation, cest cher! Je connais le domaine je sais que jai fait un truc bien! On a testé loutil en interne Je sais lutiliser donc tout le monde peut lutiliser On a fait passer un questionnaire et toute le monde aime ça Personne naime les critiques

But de lévaluation Toujours préciser les objectifs de lévaluation en premier! Évaluer un système adapté aux activités et au contexte? Quelle est la valeur ajoutée du système?

Comment mettre en place lévaluation? Rechercher les autres systèmes, les usagers, les théories, les expériences qui se rapportent au système à évaluer. Comparer un système à un autre ou à une version antérieure observer les différences Utilisabilité critères ergonomiques Impact notion dutilité (apprentissage, vente, échange) À quoi ça sert, qui, pourquoi? Différents usagers, attentes

Problématique Une problématique permet donc de bien identifier : Pourquoi on met en place une évaluation Ce quon veut évaluer Comment on va évaluer

Méthodes dévaluation Évaluation analytique ou heuristique Tests utilisateurs aussi appelé « évaluation empirique avec des usagers »

Evaluation heuristique Faite par des experts en utilisabilité. Utilisabilité: Efficacité : but atteint ou non Efficience : but atteint en combien de temps? erreurs? Satisfaction de lusager Ces experts sont familiers avec les différents critères ergonomiques à respecter pour faire un site Web facile à utiliser par tout le monde (voir prochain cours).

Evaluation heuristique Classer les problèmes ergonomiques trouvés pour pouvoir mieux les régler Comment? Description du problème ergonomique trouvé Quel principe ergonomique est bafoué? Classement du problème selon sa sévérité : Fréquence Impact Persistance du problème

Evaluation heuristique Echelle de classement du problème selon sa sévérité : 0 = Pas de problème 1 = Problème cosmétique à corriger éventuellement 2 = Problème mineur : basse priorité 3 = Problème majeur : haute priorité 4 = Catastrophe : impératif à régler avant de sortir le produit

Tests utilisateurs Protocole expérimentale Méthodologie danalyse des observations Méthodologie danalyse des traces Utilisation des questionnaires

Protocole expérimental Préparation Choix des sujets Installation Déroulement

Protocole expérimental – préparation Définir la problématique Définir les tâches Trouver un contexte réel dactivité

Protocole expérimental – choix des sujets Echantillon représentatif ou au hasard? Mesures répétées? Schéma contrebalancé? GroupeTemps 1Temps2 ACondition 1Condition 2 B Condition 1

Protocole expérimental – installation Tester si tout marche : Vidéo Audio Lapplication à évaluer Etc. Parcourir de nouveau la consigne

Protocole expérimental – déroulement Formulaire de consentement Consigne Pratique de la verbalisation (think aloud) Expérimentation Intervenir le moins possible Observer Rappeler quil faut verbaliser Questionnaires

Observation Noter : Temps mis pour réaliser une tâche Notices dutilisation utilisées Questions posées Erreurs commises Satisfaction de lutilisateur Actions de lutilisateur Diagnostic des problèmes ergonomiques Suggestions sur le vif

Laboratoire de test : Bell Web

Observation : Eye Tracking Eye Tracking : suivi oculaire iViewX (SMI) ASL Tobii T60

Observation : Eye Tracking

Corrections du site Réviser globalement latteinte des objectifs du système, qualifier et regrouper ce qui est le plus significatif Repenser la structure des activités, de la navigation, des boîtes de dialogue Faire la liste des corrections à apporter au niveau du vocabulaire et des icones Réviser systématiquement les écrans, les boîtes de dialogues, les commandes et corriger en assurant lergonomie Dire ce que ca apporte et ce quil faut faire ensuite

Atelier

Structure statique et maquette Le gouvernement du Québec veut ajouter sur son site Web une partie donnant des petits trucs pour mieux respecter lenvironnement dans la vie quotidienne. A faire : Faire lanalyse des besoins (public cible, besoin de communication existant, métaphores et style à employer, etc.) Faire un diagramme de cas dutilisation Faire une maquette

Des questions??? Merci de votre attention! A la semaine prochaine!