Rappel des principes de scénarisation

1. Rappel des principes de scénarisation Ergonomie et Principes ergonomiques Site CINEMA - Ergonomie Site CINEMA - Scénarisation Analyse des besoins Scénario à remettre Représentations dans une maquette Site CINEMA - Représentations Atelier : Décrivez le jeu de l’alimentation

2. Principes d’ergonomie...1 Langage compréhensible • compréhensible - cohérence externe et métaphore • structuré, bien organisé • consistant -cohérence interne • physique - position, délais, • sémantique - mots, icones, formes, • syntaxe -commandes, séquences et composition • facile à retenir - réduit l'effort de mémorisation • concis (minimise les composantes et la complexité) • précis: dialogue simple, naturel, sans ambiguité • language direct, orienté vers l’action • Copier, supprimer

3. Principes d’ergonomie...2 Flexible et contrôlable • Offre plusieurs voies d’accès, plusieurs utilisations • Facilite le passage d’une vue globale à la vue détaillée • Facile à manipuler, à arrêter, à sortir • Facile de faire et défaire • Offre des niveaux d’utilisation (spirale de l’expertise) • Offre des configurations, des options

4. Principes d’ergonomie... 3 • Supportant pour l’utilisateur • facile à apprendre, graduel • tolérant aux erreurs • constructif - message d’erreurs qui suggèrent • offrant un support adéquat (guidage - aide) • adaptable à l’usager ou par l’usager

5. Principes d’ergonomie... 4 • Efficace et intégré • rapide • sans erreurs • fiable • performant • adapté aux activités pour lequel il est utilisé • compatible - s’intègre aux autres activités et technologies • évolutif - facile à développer, à corriger, à mettre à jour, à modifier lorsque les besoins ou la technologie évolue

6. Étapes de la scénarisation interactive Analyse des besoins Objectifs de communication 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

7. 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 comparaison • 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

8. Quoi dire ? Quoi montrer ? 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 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 d’utilisabilité visés.

9. 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, leur contexte d’utilisation et des exemples de fonctions • Liste de cas d’utilisation proposés et mis en ordre de priorité. • Naviguer de façon historique dans les tableaux • 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

10. Scénario Maquette et rapport Rapport sur les besoins et les objectifs de communication Maquette • Modèle général du contenu et exemples - objets, propriétés • Structure statique du site (organisation des pages) • Structure dynamique des interactifs (différents processus, décisions) • Maquette basse définition des principales pages (boutons,menus, texte, illustrations) Description des éléments de la maquette et justification au plan ergonomique

11. Rapport • Stratégie générale d'interaction • Description de la maquette • 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

12. Contenu Maquette Structure statique des objets • 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 PowerPoint • tableau - Excel ou Word • base de données - File Maker, Access • Graphes - pour les structures plus complexes (accès multiples, interactifs) - Visio, persuasion, Illustrator. • Éventuellement déléguer l'élaboration du contenu, formulaire

13. Contenu Maquette Structure statique des objets • 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

14. Contenu Maquette • 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 • Libellés potentiels • Regroupements possibles • Ambiguîté Méthode http://www.ergoweb.ca/cartes.html EZ Sort : http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/410

15. Structure Structure statique des pages Combien de liens et de boutons dans la page Programmation ? Illustrator PageMaker Word

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

17. Structure générale 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) Qu’est-ce que c’est ? Survol ? Recherche ? Apprendre ? Résumé ? Niveau et densité d’information approprié

18. 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 ergonomiques…fermeture, erreurs, ...

19. Design d'écrans • Design visuel des pages en général • Grille, zones de textes et de dessins • 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 • Mettre des commentaires en parallèle

20. Théâtre du Rideau Vert Saison 97-98 Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Passion • Le théâtre n’existe pas sans vous • Venez y jouer votre rôle • Information 345-2278 Tendresse Rêve Amour English

21. Page avec commentaires

22. 6 janvier au 13 mars Le malade imaginaire Molière 14 mars au 19 mai La maison de poupée Ibsen 20 mai au 24 juin Ubu Roi Ionesco Programme Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Théâtre du Rideau Vert English

23. Le malade Imaginaire, Molière Photo de Molière 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 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 il manque le titre Rideau Vert, le bouton pour la version anglaise, etc.. English

24. AtelierDécrivez le jeu de l’alimentation Représentation statique des objets des pages où vous choisissez Représentation statique des paramètres qui servent à garder ce que vous avez mangé depuis le début la valeur des aliments que vous choisissez Représentation statique des écrans du jeu Représentation du flux de données lorsque vous choisissez un aliment lorsque vous sortez du jeu Y a-t-il d’autres représentations que vous pourriez utiliser ? Dans ce cas, quelles sont celles qui sont le plus utiles ?