240 likes | 497 Views
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.
E N D
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
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
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
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
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
É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
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
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.
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
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
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
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
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
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
Structure Structure statique des pages Combien de liens et de boutons dans la page Programmation ? Illustrator PageMaker Word
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
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é
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, ...
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
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
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
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
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 ?