Analyse des besoins

1
Conception et spécifications

• Analyse des besoins
• Spécification des objectifsFonctions et cas
  dutilisationDifférentes formes de
  spécifications du contenu

2
Conception centrée utilisateurergolab

• La conception est le produit dun 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 dobjectifs précis
  dutilisabilité

3
Conception centrée utilisateur
4
Approche Persona

• Ne pas définir un usager typique..décrire
  différents types dusagers
• 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 linterface, va-t-elle
  apprécier le module dachat en ligne, etc.?
• Imaginer plusieurs usagers typiques et confronter
  le produit à des archétypes précis
• Presbyterébarbatif à la technologie
  pressé..Jeunes, vieux
• Sassurer quon choisit bien les différents
  usagers typiques.
• Prévoir des chemins spécifiques (flexibilité)

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

• Inventaire des attentes par rapport au système
  (fournisseurs et utilisateurs du système
  d information). Exigences organisationnelles,
  Weinschenk - tâches critiques.
• Expériences antérieures, point de comparaison,
  compétiteursAnalyser ce qui existe, ce qui va
  bien et ce qui doit changerCommencer à
  répertorier les objets, les actions, les
  attributs, le vocabulaire.
• Caractéristiques des usagers potentiels,
  compétences, attitudes,
• 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

7
Analyse des besoins - Méthodologies

• É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  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 lapplication à
  développer
• Intentions, cas dutilisation, fonctions
  principales, scénarios
• Esquisse générale de structuration des objets, du
  contenu Weinschenk Table Objet -Action fig 3.3
• Estimé préliminaire des coûts et de léchéancier
  (Gayeski)

8
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
• 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é.Exemples de cas dutilisation
  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 dun tableau selon
  différentes tailles
• Ajouter un nouveau tableau avec son descriptif

9
Cas dutilisation
Répertorier tous les aspects, les acteurs de
linteraction
10
Cas dutilisation
Quels sont les dimensions de communication du
système ?
Usager
Nutritionniste
11
Objectifs de communication
Quoi dire ? Quoi montrer ?

• 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 directe
• Les 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 dutilisabilité visés.

12
Design - Weinscheink Ch3

• Sassurer que les tâches se feront comme les
  usagers veulent les faire (théorie de lactivité)
• Maquette assez détaillée pour permettre un
   parcours - walk through , une validation par
  des scénarios correspondant aux cas types.
• Session de scénarisation - Equipe
  multidisciplinaire, 2h00, tableau blanc,
  scénarios (cas dutilisation prêts)
• Ne pas faire linterface..mais la structure
  dabord.
• Décrire les objets, leurs attributs, les actions
  sur ces objets.(fig 3.3)
• Choisir la métaphore
• 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

13
Produits - Maquette
DESIGN

• Cas dutilisation
• Structure statique du site (organisation des
  pages)
• Structure dynamique (si interactif) dans le cas
  dun site interactif (branchements
  conditionnels, règles)Vérification dun
  formulaire, variables, calculs.
• Maquette basse définition des principales pages
  (boutons,menus, texte, illustrations),
  description des effets et de linteraction.

14
Produits - Description
DESIGN

• 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
• Description générale des composantes
  animations, vidéos.

Nous verrons
Contenu, Structure, Écrans
15
Contenu
DESIGN

• Exemples de la structure et des caractéristiques
  du contenu décrit de façon structurée (sections,
  Catégories)
• Décider les contenus dinformation (les feuilles)
• Définir les concepts, les catégories dont on aura
  besoin pour classer l'information et pour
  construire les pages daccès au contenu
• Créer la structure dans un environnement sur
  papier puis dans un environnement, où il sera
  facile de rajouter des informations et de les
  trier
• Structure dans PowerPoint
• tableau - Excel ou Word
• base de données - File Maker, Access
• Graphes - pour les structures plus complexes
  (accès multiples, interactifs) - Visio,
  OmniGraffle.
• Éventuellement déléguer l'élaboration du contenu,
  formulaire

16
Contenu
DESIGN
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 feuilles Demander à lusager
de les classer,de créer la structure daccès,
les choix de menus. Libellés potentiels Regroupem
ents possibles AmbiguîtéMultiples chemins
Méthode http//www.ergoweb.ca/cartes.html EZ
Sort http//www-3.ibm.com/ibm/easy/eou_ext.nsf/P
ublish/410
17
Contenu
DESIGN

• Définir les objets, les informations à diffuser,
  les feuilles et leurs contenus
• 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

18
Décrire les actions, les outils de navigation
Contenu

• Définir les principales actions que lon veut
  faire sur les objets
• Par exemple pour une commande ? Pour un jeu ?
• Menus, Barre doutils, commandes, recherche
• Trier
• Rechercher ou Filtrer linformation
• Weinschenk Table Objet - Action fig 3.3 table
  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é
  dinteraction désiré, de lutilisation des clés
  de claviers..(reconnaître le RETURN)

19
Planifier limplantation et le soutien aux
usagers
Contenu

• Information et formation aux différentes phases
  de développement
• Impact et changements organisationnels
  associés.Changements dans le processus de
  traitement de linformation.
• Personnel requis pour faire la recherche, la
  validation et la mise à jour de linformation
  Personnel requis pour faire le suivi, pour
  répondre aux consommateurs
• Voir Wenschenk

20
Structure statique
Organisation statique des pages Combien de liens
de boutons dans la page Programmation ?
Illustrator Omnigraffle Visio
21
Structure statique des pages
Structure
IntroFlash
Intro
Aide
Références
Cinema
CinamaFlash
Glossaire
Sections
Apprentissage
Scénarisation
Production
Systèmes
Ergonomie
Forum
Sous-section
Page et ancres
Choix Automatique Page Cadre
Page et ancres
Sous-section
N.B. Toutes les sections comme la Section Systèmes
22
Scénarisation - Structure en Flash

• Définir ce qui est fait en Flash..et ce qui est
  fait dans le pages Internet.
• Vous pouvez faire une application qui nest faite
  quen Flash, comme un jeu, une borne dans un
  musée, sur un Iphone ou Ipadmais il faut la
  charger sur Internet.
• Pour votre scénario il faut présenter
• la structure des séquences
• Pour chaque séquence la succession danimation
• Les principaux calques et ce quil y aura dedans.
• Voici un exemple simple..
• Puis un plus complexe

23
Exemple Auberge avec activités dhiver

• Principales séquences

Important intégrez des animations dans la
présentation et la navigation- Exemples
Cinema et images animées
24
Exemple Auberge avec activités dhiver

• Séquence dactivités ..suite danimations et
  calques

25
Exemple Auberge avec activités dhiver

• Séquence Formulaire
• Suite des sections
• Quels seraient les calques, boutons de navigation
  ?

26
Modèle intégrant Flash et htmlExemple semblable
au Site de fondation Daniel Langlois
27
Structure des contenus de navigation

• Choix et évaluation des possibilités
• écran unique
• hiérarchie
• contextuel, réalité virtuelle
• linéaire
• réseau (index multiples)
• animation
• intelligent (basé sur règles)

Quest-ce que cest ? Survol ? Recherche
? Apprendre ? Résumé ?
Niveau et densité dinformation approprié
28
Structure statique
29
Structure dynamique

• Structure dynamique des interactifs

Autres exemples de jeux utilisant des variables
et des règles
30
Description dune interaction en Flash - graphe
de séquence
31
Structure
Description et justification de la structure

• 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 ergonomiquesfermeture, erreurs,
  ...

32
Design d'écrans

• Design visuel des pages en général
• Définir une grille - zones de textes et de
  dessinsDé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
• Voir notes sur les principes de design décrans.

33
Théâtre du Rideau Vert Saison 97-98
Animation
Entrée Titres apparaissent puis lanimation
sarrête Information clignote une
fois Continu Théâtre brille Sortie AudioBruits
dapplaudissements 3 sec
Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Dé
c
Passion

• Le théâtre nexiste pas sans vous
• Venez y jouer votre rôle
• Information 345-2278

Tendresse
Rêve
Interaction
Barre Mois clic Accès à Horaire/ancre du
mois survol effet 3D Enveloppe clic
Lance courriel Info_at_rideauVert.qc.ca
Amour
English
34
Horaire
Animation
Entrée Mois sélectionné est illuminé Ancre du
mois choisi Audio trois coups douverture
Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Dé
c

• 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

Interaction Le Malade Imaginaire Survol
Audio et textes apparaissent Clic Ouvre
Description Mois Clic change de mois
Théâtre du Rideau Vert
English
35
Horaire
Animation
Entrée Mois sélectionné est illuminé Ancre du
mois choisi Audio trois coups douverture
Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Dé
c

• 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

Interaction Le Malade Imaginaire Survol
Audio et textes apparaissent Clic Ouvre
Description Mois Clic change de mois
Théâtre du Rideau Vert
English
36
Le malade Imaginaire, Molière
6 janvier au 13 mars
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......
Théâtre du Rideau Vert
Remy Girard Guylaine Tremblay
English
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..
37
Atelier - Deuxième travail

• Choix du sujet
• Remue méninges
• Analyse des besoins
• Cas dutilisation
• Objectifs
• Structure possible
• Composantes médias
• Conseils
• Un projet réaliste..une maquette qui présente ce
  que serait le site..
• Testez les interactions que vous voulez intégrer
• Réduisez la taille et décomposez en sous parties
• Organisez bien vos fichiers et faites des copies
  de sauvegarde.