la scénarisation interactive

La scénarisation interactive

14 novembre 2012Grégory Petit

http://lrcm.com.umontreal.ca/greg/COM2580/

La semaine dernièreLes types d’image

Gestion de la taille des images

Utilisation des images avec Dreamweaver

Et donc on fait quoi aujourd’hui?

Conception centrée utilisateur

Analyse des besoins

Maquette

Validation

Maquette

Scénarisation interactiveAnalyse des besoins

Objectifs de communication

Cas d’utilisation, scénarios

Description du contenu

et exemples

Design de la structure

d’interaction

Design des principaux écrans et

des boutons

Validation par les usagers

Programmation

Validation par le client

Conception centrée utilisateur

Conception centrée utilisateurEncore des préjugés chez les concepteurs …

« Bien sur que je sais quel genre d’utilisateur va utiliser mon produit! »

« J’ai été étudiant, donc je sais comment concevoir un produit pour des étudiants. »

« Si j’ai une bonne idée, les utilisateurs l’aimeront certainement! »

« De toute façon, les utilisateurs ne savent comment dire ce qu’ils veulent! »

Conception centrée utilisateur

Connaitre l’utilisateur!!!

Koko et Penny Patterson : création d’un langage des signes adapté aux gorilles!http://www.koko.org/index.phpOrdinateur pour Koko, le Koko’s Mac II qui lui permet d’activer des phrases vocales en touchant des icones sur un écran tactile : http://www.beanblossom.in.us/larryy/KokoChapter.html

Connaitre l’utilisateur!!!Définir les caractéristiques de l’utilisateur :

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 professionSes habitudes de travailEtc.

Conception centrée utilisateur

Produit d’un 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 utilisateurCycle 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 d’objectifs précis d’utilisabilité

Analyse des besoins

Maquette

Scénarisation interactiveAnalyse des besoins

Objectifs de communication

Cas d’utilisation, scénarios

Description du contenu

et exemples

Design de la structure

d’interaction

Design des principaux écrans et

des boutons

Validation par les usagers

Programmation

Validation par le client

Analyse des besoinsInventaire des attentes par rapport au site

Web (fournisseurs et utilisateurs du site)Analyser les expériences antérieuresAnalyser ce qui existe, ce qui va bien et ce

qui doit changerCommencer à répertorier les objets, les

actions, les attributs, le vocabulaire à utiliserCaractéristiques des usagers potentiels, leurs

compétences et attitudesLes usagers doivent être impliqués dans

l’analyse des besoins!

Analyse des besoinsInventaire 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 ethnographiqueObservation des activités, des tâches, de

l’utilisation des systèmes existantsIdentification 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 l’application à développer

Intentions, cas d’utilisation, 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 – produitsTexte décrivant les besoins et contraintesTexte décrivant le contexte prévu d’utilisationTexte décrivant la compétition et expérience

antérieure étude de l’existantTexte spécifiant les objectifs et la stratégie

privilégiéeListe des acteurs, leur contexte d’utilisation et

des exemples de fonctionsListe de cas d’utilisation proposés et mis en

ordre de priorité diagramme de cas d’utilisation

Les cas d’utilisationOn 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 qu’on veut faire avec.

Quels sont les buts et les usages?

Cas = Acteur + Activité ou utilisation sur une composante de l’outil ou sur un autre acteur

Les cas d’utilisationExemple d’un forum entre professeurs et étudiantsÉtudiant

Écrire des messages sur ce qu’il 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 l’on veut pouvoir

relire, et les mettre à part.Trier les messages en ordre de priorité.

Diagramme de cas d’utilisation

Trier message

sArchiver message

s

Surveiller la

présence

Usager

Étudiant

Ecrire message

s

Associer messages

Professeur

Définition des objectifs de communication

Choisir parmi les besoins, les fonctions possibles et préciser la stratégieTrop ≠ mieuxLa meilleure approche ≠ la plus directeLes 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 d’utilisabilité visés.

Maquette

Maquette

Scénarisation interactiveAnalyse des besoins

Objectifs de communication

Cas d’utilisation, scénarios

Description du contenu

et exemples

Design de la structure

d’interaction

Design des principaux écrans et

des boutons

Validation par les usagers

Programmation

Validation par le client

Les représentation structuralesIl est nécessaire de faire une représentation

structurale des scénarios et des interactions d’une 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 d’interaction qui déclencheront les actions.

La partie statiqueCas d’utilisation

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, qu’est-ce qu’on 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 dynamiqueFlux 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 à l’application multimédia que l’on veut faire.

On pense ainsi aux futurs boutons, menus et autres moyens d’interaction qui déclencheront les actions.

Le contenuDéfinir les contenus d’information

Définir les variables dont on aura besoin pour classer l'information et pour construire les pages d’accès au contenu

Définir comment les informations vont interagir, si elle doivent interagir

Structure des objetsCollectif de salles de spectacleCaté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 locationExemple!

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 d’une semaine (1500$ par jour), forfait moins d’un mois (1200$ par jour)]

Description des actionsDéfinir les principales actions que l’on veut faire

sur les objetsLes actions de bases souvent utilisées :

Menus, barre d’outilsTrierRechercher et filtrer de l’informationImprimer, enregistrerCommenter

Décider des actions en fonction de la fréquence, des standards, du degré d’interaction désiré, de l’utilisation 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

ChoixAutomatiqueChangement dans le cadre seulement

Sous-section

Sous-section

Sections

Structure statique des pages

Accueil Description

LiensRéférences

Plan de CoursÉvaluatio

n

Travail 1

Travail 2

Projet

Structure du site Web du cours

Structure dynamique des pagesInformation 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 cycleClassées par département

Règlement pour lerenouvellement

oui

oui oui

nonnon etc.

Théâtre du rideau vert

• Le théâtre n’existe pas sans vous• Venez y jouer votre rôle

• Information 345-2278

Passion

Rêve

Tendresse

Amour

Ouverture:Animation mots apparaissentTrois coups…

Interaction:Mois - Effet 3D au survol

Bienvenue au Théâtre du Rideau VertSaison 2008

Sortie :Seul le cadre droit en bas change

N’oubliez pas les titres, Respectez la grille et les cohérence interne

JanFévMarAvrMaiJuinJuilAoûtSeptOctNovDéc

English

Théâtre du rideau vertBienvenue au Théâtre du Rideau VertProgramme Janvier 2008

JanFévMarAvrMaiJuinJuilAoûtSeptOctNovDéc

English

6 janvier au 13 marsLe malade imaginaire Molière

18 janvier au 19 avrilLa maison de poupée Ibsen

20 janvier au 15 févrierUbu Roi Ionesco

Ouverture :Choix du mois reste sélectionné

Interaction :3 lignes de biographie des auteursapparaissent au survol3 lignes de description apparaissent au survol du titreÉtoiles liées aux évaluations des spectateurs

Théâtre du rideau vertBienvenue au Théâtre du Rideau VertLe Malade Imaginaire

JanFévMarAvrMaiJuinJuilAoûtSeptOctNovDéc

English

Argan : Remy GirardToinette: 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éfilableActeurs sont cliquables

Les étoiles permettent de coter.

Votre évaluation ?

Validation

Maquette

Scénarisation interactiveAnalyse des besoins

Objectifs de communication

Cas d’utilisation, scénarios

Description du contenu

et exemples

Design de la structure

d’interaction

Design des principaux écrans et

des boutons

Validation par les usagers

Programmation

Validation par le client

PréjugésLe développement et l’évaluation, c’est cher!Je connais le domaine je sais que j’ai fait un

truc bien!On a testé l’outil en interneJe sais l’utiliser donc tout le monde peut

l’utiliserOn a fait passer un questionnaire et toute le

monde aime çaPersonne n’aime les critiques

But de l’évaluationToujours 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 ergonomiquesImpact notion d’utilité (apprentissage,

vente, échange) À quoi ça sert, qui, pourquoi? Différents usagers, attentes

ProblématiqueUne problématique permet donc de bien

identifier :

Pourquoi on met en place une évaluation

Ce qu’on veut évaluer

Comment on va évaluer

Méthodes d’évaluation

Évaluation analytique ou heuristique

Tests utilisateursaussi appelé « évaluation empirique avec des

usagers »

Evaluation heuristiqueFaite par des experts en utilisabilité.

Utilisabilité:Efficacité : but atteint ou nonEfficience : but atteint en combien de temps?

erreurs?Satisfaction de l’ usager

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 heuristiqueClasser 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 heuristiqueEchelle 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 utilisateursProtocole expérimentale

Méthodologie d’analyse des observations

Méthodologie d’analyse 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 d’activité

Protocole expérimental – choix des sujetsEchantillon représentatif ou au hasard?

Mesures répétées?

Schéma contrebalancé?

Groupe Temps 1 Temps2

A Condition 1 Condition 2

B Condition 2 Condition 1

Protocole expérimental – installation

Tester si tout marche :VidéoAudioL’application à évaluerEtc.

Parcourir de nouveau la consigne

Protocole expérimental – déroulement

Formulaire de consentementConsignePratique de la verbalisation (think aloud)Expérimentation

Intervenir le moins possibleObserverRappeler qu’il faut verbaliser

Questionnaires

ObservationNoter :Temps mis pour réaliser une tâcheNotices d’utilisation utiliséesQuestions poséesErreurs commisesSatisfaction de l’utilisateurActions de l’utilisateurDiagnostic des problèmes ergonomiquesSuggestions sur le vif

Laboratoire de test : Bell Web

Observation : Eye TrackingEye Tracking : suivi oculaire

iViewX (SMI)

ASL

Tobii T60

Observation : Eye Tracking

Corrections du siteRéviser globalement l’atteinte 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 l’ergonomie

Dire ce que ca apporte et ce qu’il faut faire ensuite

Atelier

Structure statique et maquetteLe gouvernement du Québec veut ajouter sur

son site Web une partie donnant des petits trucs pour mieux respecter l’environnement dans la vie quotidienne.

A faire :Faire l’analyse des besoins (public cible, besoin

de communication existant, métaphores et style à employer, etc.)

Faire un diagramme de cas d’utilisationFaire une maquette

Des questions???

Merci de votre attention!

A la semaine prochaine!

gregory.petit@umontreal.cahttp://lrcm.com.umontreal.ca/greg/COM2580/