Méthodologie de conception

Approche centrée utilisateur et approche Persona

Analyse des besoinsDéfinition des objectifs, fonctions et cas d’utilisationOrganisation du contenu - Méthodes des cartes

Conception d’une maquette basse définition

D’abord

Site de la bibliothèque

Présentation du premier travail

Conception centrée utilisateurergolab

La conception est le produit d’un processus de consultation…

• Une préoccupation en amont des utilisateurs, de leurs tâches et de leur environnement

• La participation active de ces utilisateurs• Une répartition appropriée des fonctions entre les utilisateurs et

la technologie• L'itération des solutions de conception : on peut s'imaginer le

cycle comme une spirale, une démarche qui boucle et reboucle jusqu'à ce que le système satisfasse aux exigences définies au départ.

• L'intervention d'une équipe de conception multi-disciplinaire• Spécification et poursuite d’objectifs précis d’utilisabilité

Conception centrée utilisateur

Approche Persona

• Ne pas définir un usager typique..décrire différents types d’usagers• Personnaliser les interactions, que chaque personne se sente unique

Alan Cooper• « Choisir une femme précise, lui donner une biographie, un âge, une

occupation, un foyer, une famille, des attentes face au produit, etc. Ce qui permet de concevoir son application en faisant constamment référence à cette personne et à ses attentes. Par exemple, est-ce que Judith aimerait tel aspect de l’interface, va-t-elle apprécier le module d’achat en ligne, etc.? »

• Imaginer plusieurs usagers typiques et confronter le produit à des archétypes précis…– Presbyte…rébarbatif à la technologie… pressé..Jeunes, vieux

S’assurer qu’on choisit bien les différents usagers typiques.

• Prévoir des chemins spécifiques (flexibilité)

Exemple des personas

• Michel est un étudiant de 21 ans, en seconde année de baccalauréat en communication à l’Université de Montréal. Il sait très bien rédiger ses idées sur papier depuis le secondaire.

• Il vit en collocation avec 2 amis. Il a un ordinateur portable, une imprimante et une connexion internet chez lui.

• Il utilise généralement son ordinateur pour écouter de la musique, écrire des articles pour le journal de l’université, envoyer des courriels et discuter sur MSN.

• Il utilise souvent le site web de la bibliothèque de l’UdeM mais n’a aucune idée comment ce système a pu être conçu.

• Il tient régulièrement un jour un blog où il parle de sa passion pour la photographie. Il y met d’ailleurs ses meilleures photos.

• Conférence d’Eric Brangier au HEC sur les Personas

Conception centrée utilisateur

Connaitre l’utilisateur!!!

http://www.ville.montreal.qc.ca/accessimple• Site pour les handicapés mentaux

Étapes de la scénarisation interactive

Analyse des besoins

Objectifs de communication

Validation par le client Validation par les usagers

Programmation

Description du contenu et exemples

Design de la structure d ’interaction

Design des principaux écrans et des boutons

Maquette

Cas d’utilisation, scénarios

Pour chaque partieLe contenuLes méthodesLes produits

Analyse des besoins

• Inventaire des attentes par rapport au système (fournisseurs et utilisateurs du système d ’information)

• Expériences antérieures, point de comparaisonAnalyser ce qui existe, ce qui va bien et ce qui doit changerCommencer à répertorier les éléments du système (images, contenus, attributs, connaître les gens, les besoins, le vocabulaire)

• Caractéristiques des usagers potentiels

• 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éthodologies• Étude ethnographique

– observation des activités, des tâches, de l’utilisation des systèmes existants.

– Identification des processus de communication, des goulots d’étranglement, observation et recueil « in situ » des besoins.

• Entrevues auprès des principaux acteurs concernés par le changement• Entrevues auprès des usagers et clients

• 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

• Estimé préliminaire des coûts et de l’échéancier

Consensus

Analyse des besoins - Produits

• Texte décrivant les besoins et contraintes• Texte décrivant le contexte prévu d’utilisation• Texte décrivant la compétition et expérience antérieure

• Texte spécifiant les objectifs et la stratégie privilégiée

• Liste des acteurs, le contexte d’utilisation et des exemples de fonctions.

• Liste de cas d’utilisation proposés et mis en ordre de priorité.

Exemple de cas d’utilisation pour une Galerie virtuelle de tableaux– Naviguer de façon historique dans les tableaux – Trier les tableaux selon la grandeur, la date, la couleur– Rechercher un tableau sur un thème– Rechercher les tableaux à vendre– Acheter la reproduction d’un tableau selon différentes tailles– Ajouter un nouveau tableau avec son descriptif

Objectifs de communication

• Spécifier les objectifs de communication• Choisir parmi les besoins, les fonctions possibles et préciser la stratégie

Trop ≠ mieux

La meilleure approche ≠ la plus directeLes fonctions et objectifs primaires et secondaires

• Spécifier le message, les fonctions visées.

• Choix d'une métaphore et justification• Choix techniques (environnement matériel et logiciel)• Choix médiatiques (composantes des médias)• Stratégies générales de l'interface

• Critères de performance et d’utilisabilité visés.

Mais dans le temps …comment s’organisent les différentes représentations ? 1/2

Cas d’utilisation - théorie de l’activité

décrire toutes les fonctionnalités du système, tous les échanges possibles entre usagers et systèmeles ordonner et les choisir

Structure des objets..

de quoi on parle, qu’est-ce qu’on veut savoir ou montrer et avec quels détailscatégories et exemples des composantes

Structure du site et hiérarchies des pages

Comment on l’organise pour faciliter la communication

Stratégie de navigation et structure des pagesAn

alys

e st

atiq

ue

Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2

Flux et divers processus

Décrire la communication entre différentes personnes ou diverses fonctions sur un système

Flux et décisions 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.. Enregistrement, vérification, calcul)

Et finalement

Représentation des interfaces

Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions.

An

alys

e dy

nam

iqu

e

Mais dans le temps …comment s’organisent les différentes représentations ? 1/2

Cas d’utilisation - théorie de l’activité

décrire toutes les fonctionnalités du système, tous les échanges possibles entre usagers et systèmeles ordonner et les choisir

Structure des objets..

de quoi on parle, qu’est-ce qu’on veut savoir ou montrer et avec quels détailscatégories et exemples des composantes

Structure du site et hiérarchies des pages

Comment on l’organise pour faciliter la communication

Stratégie de navigation et structure des pagesAn

alys

e st

atiq

ue

Les Cas d’utilisation

• Suite aux entrevues.. En examinant l’existant..• Représentez tout ce que le système fait ou tout ce qu’on veut faire avec.Quels sont les buts les usages

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

Forum1. Etudiant Écrire des messages sur ce que je lis 2. et les associer au document3. Tous Sélectionner les messages que je veux pouvoir relire, 4. et les mettre à part.5. Tous Trier les messages en ordre de priorité6. Prof être averti de ceux qui ne sont pas branchés depuis X jours

Cas d’utilisation

Cas d’utilisation

Représentation graphique des Cas d’utilisation

Définir les différents buts que le système permettra de réaliser

et les systèmes ou acteurs impliqués.

Exercice - Cas d’utilisation

Dessinez les cas d’utilisation

Pour donner l’information sur mon Laboratoire..

pour informer les étudiants sur les bourses

Autre ?

Décrivez les cas d’utilisation des différents acteurs.

N’oubliez pas de représenter les activités hors du site.

Utilisez les éléments suivants

Utilisation

• Copiez, collez les et changez les textes.• Ce qui est important c’est de représenter les communications et le

traitement d’information visées

Système

Acteur

Cas d’utilisation de Studium

Suggérer URL

Studium

Lire syllabus

Suggérer document Prof

Étudiant

Modifier syllabus

Vérifier Ajouts

Cas d’utilisation de Studium

Suggérer URL

Studium

Lire syllabus

Suggérer document Prof

Étudiant

Modifier syllabus

Vérifier Ajouts

Courriel

Étapes de la scénarisation interactive

Analyse des besoins

Objectifs de communication

Validation par le client Validation par les usagers

Programmation

Description du contenu et exemples

Design de la structure d ’interaction

Design des principaux écrans et des boutons

Maquette

Cas d’utilisation, scénarios

Mais dans le temps …comment s’organisent les différentes représentations ? 1/2

Cas d’utilisation - théorie de l’activité

décrire toutes les fonctionnalités du système, tous les échanges possibles entre usagers et systèmeles ordonner et les choisir

Structure des objets..

de quoi on parle, qu’est-ce qu’on veut savoir ou montrer et avec quels détailscatégories et exemples des composantes

Structure du site et hiérarchies des pages

Comment on l’organise pour faciliter la communication

Stratégie de navigation et structure des pagesAn

alys

e st

atiq

ue

• Catégories– Événement

• Date, Titre, Auteur, Metteur en scène, Acteurs, Historique de la pièce, historique du réalisateur

– Images ou vidéos• Sujet, Document, format, taille, Description

• Exemple– 6 jan-3mars, Le Malade Imaginaire, Molière, De Andrea, [Remy Girard,

Guylaine.....]– Images

• Remy Girard, Girard.gif, gif, 20k, penche chaise• Guylaine, à trouver, photo

– Vidéo• Malade Imaginaire, Imagi.moo, Quicktime, 100k, Enreg scène 2

Structure statique des objetsThéâtre du Rideau Vert

• Catégories– Professeur

• Nom, bureau, téléphone, courriel, Description, publications, site web– Horaire

• Trimestre, Jour, heure, Sigle de cours, Nom de cours, Professeur, local– Programme

• Nom, numéro• Cours

– Sigle, description, crédits• Bloc

– Statut - obligatoire vs optionnel– Minimum, maximum– Liste de cours

Structure statique des objetsDépartement de Communication

• Catégories– Lieux

• Entrée, Corridor, PremierNiveau, 2eNiveau, 3eNiveau• Magasin, Sortie

– Biens• Armes

– Épée, fusil, arbalète, • Pouvoirs

– Invisible, poison, vue, • Niveaux d’énergie

– Santé– Force– Intelligence– Popularité

• Richesse– Or

– Historique des points• Nombre de parties jouées• Points moyens

– Personnages - Force, honnêteté, rapidité, intelligence, pouvoirs• Orques, Nains, chevaliersNoirs, Sorciers

Structure statique des objetsJeux sur ordinateur

Mais dans le temps …comment s’organisent les différentes représentations ? 1/2

Cas d’utilisation - théorie de l’activité

décrire toutes les fonctionnalités du système, tous les échanges possibles entre usagers et systèmeles ordonner et les choisir

Structure des objets..

de quoi on parle, qu’est-ce qu’on veut savoir ou montrer et avec quels détailscatégories et exemples des composantes

Structure du site et hiérarchies des pages

Comment on l’organise pour faciliter la communication

Stratégie de navigation et structure des pagesAn

alys

e st

atiq

ue

Méthodes des cartes pour organiser le contenu

“individus choisis pour leur représentativité du public cible sont invités à grouper par famille un ensemble de cartes établi préalablement par l'expérimentateur.”Ergoweb 2003

Cartes = les feuillesDemander à l’usager de les classer,de créer la structure d’accès, les choix de menus.

Libellés potentielsRegroupements possiblesAmbiguïtéMultiples chemins

Méthode http://www.ergoweb.ca/cartes.htmlEZ Sort : http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/410

Produits

• Stratégie générale d'interaction• Design de la navigation• Croquis papier de quelques pages

• Justification de la maquette par rapport aux besoins et aux objectifs• Justification en termes d'utilisabilité

– principes directeurs– efficacité (valeur ajoutée)

• Justification en termes motivationnels par rapport aux besoins

Contenu, Structure, Écrans

Nous verrons

Nous avons vu avec la technique des cartes qu’il n’était pas facile de choisir une bonne structure pour un site d’information

Mais comment représenter cette structure ?

Axure WireFrame…HiérarchieOrganigrammeStructure des séquences.

Structure statique des pages

IllustratorPageMakerWord

Organisation statique des pagesCombien de liens de boutons dans la page Programmation ?

Structure statique des pages

Pas tous les liens..mais les contenus…les dossiers et les pages

CinamaFlash

Apprentissage Ergonomie Scénarisation Production

IntroFlash Intro

Cinema

Systèmes

Références

Aide

Glossaire

Forum

ChoixAutomatiqueChangement dans le cadre seulement

N.B. Toutes les sections comme la Section Systèmes

Sous-section

Sous-section

Sections

Page et ancres

Page et ancres

Structure générale des contenus de navigation

• Pour certaines structures de navigation il faut d’autres formes de représentation

• écran unique• Hiérarchie• Linéaire• réseau (index multiples)• contextuel, réalité virtuelle• animation• intelligent (basé sur règles)

Qu’est-ce que c’est ?

Survol ?

Recherche ?

Apprendre ?

Résumé ?

• Exemples de la structure et des caractéristiques du contenu décrit de façon structurée (sections, Catégories)

• Définir les contenus d’information (les feuilles)• Définir les variables dont on aura besoin pour classer l'information et pour

construire les pages d’accès au contenu• Créer la structure dans un environnement où il sera facile de rajouter des

informations et de les trier – Mode plan– tableaux - Excel ou Word– base de données - File Maker, Access– Graphes - pour les structures plus complexes (accès multiples, interactifs)

- Visio, Omnigraffle, Illustrator.• Éventuellement déléguer l'élaboration du contenu, formulaires• Contribute contenus dynamiques.• Logiciel Wireframe

Décrire les actions, les outils de navigation

• Définir les principales actions que l’on veut faire sur les objets– Par exemple pour une commande ? Pour un jeu ?

• Menus, Barre d’outils, commandes, recherche• Trier• Rechercher ou Filtrer l’information

– Weinschenk Table Objet - Action fig 3.3table des actions fig 3.9

• Imprimer, enregistrer, commenter, réserver un produit.

• 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..(reconnaître le RETURN)

Planifier l’implantation et le soutien aux usagers

• Information et formation aux différentes phases de développement

• Impact et changements organisationnels associés.Changements dans le processus de traitement de l’information.

• Personnel requis pour faire la recherche, la validation et la mise à jour de l’information Personnel requis pour faire le suivi, pour répondre aux consommateurs

• Voir Wenschenk

Flux et divers processus

Décrire la communication entre différentes personnes ou diverses fonctions sur un système

Flux et décisions 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.. Enregistrement, vérification, calcul)

Et finalement

Représentation des interfaces

Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions.

Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2

An

alys

e dy

nam

iqu

e

Flux de données

Interaction du conseiller avec l’application d’EXAO

DFD - Flux de données

Flux et divers processus

Décrire la communication entre différentes personnes ou diverses fonctions sur un système

Flux et décisions Décrire la navigation avec des conditionnels ou règles

Flux et séquence

Montrer plus en détail ce qui se passe « derrière » une interaction

(les processus en activités.. Enregistrement, vérification, calcul)

Et finalement

Représentation des interfaces

Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions.

Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2

An

alys

e dy

nam

iqu

e

Structure dynamique des interactifs

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 cycleClassées par département

Règlement pour lerenouvellement

oui

oui oui

nonnon

Structure dynamique des décisions

Règles ex: dans les jeux

Conditions ActionsSi Temps_depuis_douche > 24 hres Popularité = Popularité - 10

Si Popularité > 50 Voisins visitent

Exemple - Système Conseiller utilisant des règles

Définir l’aide

Règles

Flux et divers processus

Décrire la communication entre différentes personnes ou diverses fonctions sur un système

Flux et décisions 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.. Enregistrement, vérification, calcul)

Et finalement

Représentation des interfaces

Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions.

An

alys

e dy

nam

iqu

eMais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2

Flux et divers processus

Décrire la communication entre différentes personnes ou diverses fonctions sur un système

Flux et décisions 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.. Enregistrement, vérification, calcul)

Et finalement

Représentation des interfaces

Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions.

An

alys

e dy

nam

iqu

eMais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2

Organisation des pages et navigation

Commentaires sur les aspects d'organisation du contenu , de flexibilité, de support à la navigation, etc...

On peut définir une structure générale de choix auquel on a accès partout - bannière ou frame.

Ne pas trop limiter l'espace réservé à l'information.

Planifier

Réversibilité - l'accès et le recul dans l'information.

Flexibilité - plusieurs accès aux informations

Visibilité et orientation - Indices du contexte

Bien répartir l'information - rapidité, pas trop complexe

Autres critères ergonomiques…fermeture, erreurs, ...

Description et justification de la structure

Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2

Flux et divers processus

Décrire la communication entre différentes personnes ou diverses fonctions sur un système

Flux et décisions 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.. Enregistrement, vérification, calcul)

Et finalement

Représentation des interfaces

Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions.

An

alys

e dy

nam

iqu

e

• Design visuel des pages en général– Définir une grille - zones de textes et de dessins

Définir modèle (template)– Design des outils de navigation

• Critique en fonction des critères ergonomiques du design d'écrans• Tenir compte des possibilités techniques• Intégration dans la maquette d'exemples de contenus (croquis

numérisés, photos non traitées)• Développement d'un exemple des principaux types de pages selon la

structure• Montage de la maquette papier et du document de présentation

Théâtre du Rideau Vert Saison 97-98

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

• Information 345-2278

Jan

Fév

Mar

Avr

Mai

Juin

Juil

Août

Sept

Oct

Nov

Déc

Passion

Rêve

Tendresse

Amour

English

EntréeTitres apparaissent puis l’animation s’arrêteInformation clignote une fois

ContinuThéâtre brille

SortieAudio=Bruits d’applaudissements 3 sec

Animation

Barre Mois clic = Accès à Horaire/ancre du mois survol= effet 3D

Enveloppe clic = Lance courrielInfo@rideauVert.qc.ca

Interaction

Jan

Fév

Mar

Avr

Mai

Juin

Juil

Août

Sept

Oct

Nov

Déc

Th

éâtre du

Rid

eau V

ert

Horaire

English

EntréeMois sélectionné est illuminéAncre du mois choisi

Audio: trois coups d’ouverture

Animation

Interaction Le Malade Imaginaire Survol = Audio et textes apparaissent Clic = Ouvre Description

Mois Clic change de mois

6 janvier au 13 mars

Le malade imaginaire - Molière

« Drelin, drelin, drelin: ah, mon Dieu! Ils me laisseront ici mourir. »

14 mars au 19 mai

La maison de poupée - Ibsen

« NORA - Je crois que je suis avant tout un être humain, au même titre que toi ou que je dois en tout cas essayer de le devenir »

20 mai au 24 juin

Ubu Roi Ionesco

Le malade Imaginaire, Molière

Remy Girard

Guylaine Tremblay

Une fois de plus un grand auteur.. Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur......

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 ici le titre Rideau Vert, le bouton pour la version anglaise, etc..

Th

éâtre du

Rid

eau V

ert

English

6 janvier au 13 mars

AtelierAnalyse des besoins sur un site

Site sur la recherche à l’Université de Montréal....

À réaliser• Analyse des besoins• Cas d’utilisations• Représentation de la structure actuelle.• Représentation de la structure proposée.

• Site de la Société des Arts Technologiques http://sat.qc.ca• Fondation Daniel Langlois http://www.fondation-langlois.org/html/e/