Conception et spécifications

1. Conception et spécifications Analyse des besoins Spécification des objectifsFonctions et cas d’utilisationDifférentes formes de spécifications du contenu

2. Conception et spécifications en Arts Numériques Analyse des besoins Spécification des objectifsFonctions et cas d’utilisationDifférentes formes de spécifications du contenu Existants Technologies Idée artistique Envies Tendances Contexte

3. Comment développer et décrire ce que vous voulez faire. ce que vous avez fait • Chercher et prendre des notes – Web Bibliothèque • Schéma pour organiser ce qui nous intéresse, ce qui existe • Cas d’utilisation • Structure d’un système – objet, interaction, scénario, règles, séquences. • Interfaces d’un système • Maquette • Prototype • Rapport Acteurs Entreprise Systèmes Existants Contenus Contexte d’utilisation

4. Outils et formation • Papier & crayon • Delicious – Tag – Endnote – Blog – Facebook • Mindnote • Omnigraffle • WireFrame • Axure (Demander version pour étudiant) pour le labo • Powerpoints, Dreamweaver • Mode Plan en Word. • Aujourd’hui.. Décrire un système.. Le vôtre ou un autre.

5. Conception – Analyse de l’existant et des besoins • Établir ce qui existe – compétition, techniques, contraintes • Préciser ce qu’on veut faire d’innovateur • Penser aux différents usagers et usages • Préciser les attentes, les préférences • Choisir un objectif – Décrire et montrer • Spécifications du système - dépend du médium • web, animation, installation, application portable, jeux, • Différentes formes de spécifications • Cas d’utilisation, Structure, scénario, Propriétés des composantes (personnages, input, output), règles, écrans, etc.

6. Analyse des attenteset des possibles • Inventaire des attentes par rapport au système : commande, contenus, contexte • Expériences antérieures, point de comparaison, compétiteursAnalyser ce qui existe, ce qui est innovateur • Commencer à répertorier les contenus, les images, les senseurs, le contexte, les contraintes à l’accès. • Caractéristiques des usagers potentiels, compétences, attitudes, • Ressources disponibles pour aider à l'élaboration, à la réalisation,la mise en forme, la mise à jour • Description des contraintes techniques à considérer pour l'élaboration et la diffusion

7. Conception centrée utilisateurergolab 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é • Au delà de l’utilisabilité viser la qualité de l’interaction • L’innovation, la satisfaction de l’utilisateur

8. 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é)

9. Étapes de la scénarisation interactive Analyse des attentes et possibles Objectifs Cas d’utilisation, scénarios Maquette Design visuel, audio, capteursDéroulement Contenus, instruments Design de la structure d ’interaction Validation par le client Validation par les usagers Programmation

10. Étapes de la scénarisation interactive Maquette

11. Scénarisation interactive en contexte artistique Analyse des attentes et possibles Objectifs Cas d’utilisation, scénarios Maquette Design visuel, audio, capteursDéroulement Contenus, instruments Design de la structure d ’interaction Programmation Validation public

12. Contenus • Installation – Axure • Vos projets – formations prévues. • Recherche Endnote • Analyse des besoins • Mindnote • Schémas – cas d’utilisation Omnigraffle • Maquette - Exemples • Structure • Contenus • Écrans

13. Analyse des attentes • 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é.Exemples 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

14. Analyse des attentes – Cas d’utilisation • Liste de cas d’utilisation proposés et mis en ordre de priorité.Exemples de cas d’utilisation pour une installation interactive • Usager pointe une des composantes du tableau et elle s’active • Dispositif s’active si l’usager bouge ou parle fort • Couleur du vêtement de l’Usager change les couleurs de projection • Vitesse de l’usager qui approche accélère l’affichage • Usager s’éloigne dispositif s’éteint ou se plaint • Deux usagers sont devant l’installation et voie ce que l’autre fait. • Compétition entre usagers – affichage dépend de la force. • Création collective dans l’installation • Exemples de cas d’utilisation pour un Jeu • Usager choisit son personnage • Usager accumule des points, enregistre des parties • Usager joue à plusieurs ou contre un avatar du système • Usager choisit difficulté.

15. Répertorier tous les aspects, les acteurs de l’interaction Cas d’utilisation

16. Cas d’utilisation Quels sont les dimensions de communication du système ? Usager Nutritionniste

17. Intégration de soutien personnalisé dans un environnement virtuel de jeu pour l'apprentissage des sciences: Approche intégrant IHM et Informatique Cognitive Aude Dufresne Université de Montréal LRCM – CITÉ – MATI – CIRTA

18. Une journée à l’hypermarché Apprendre la géométrie en vendant un cadre, Apprendre la chimie en faisant du dentifrice Comprendre la génomique Sauver une forêt. Génomique. QCM, procédures scientifiques à suivre, Résoudre un problèmes, écrire une lettre à la ministre. Avatars qui expliquent et questionnent. Structure d’apprentissage rigide.Intégrer soutien plus flexible et qui tienne compte de l’environnement exploratoire, du contexte et des styles d’apprentissage.

19. Cas d’utilisationSciences en Jeu Interface professeur suit ses élèves

20. Cas d’utilisationSciences en Jeu Conseiller qui aidel’élève

21. Cas d’utilisationSciences en Jeu Aide en fonction des styles d’apprenants

22. Quoi dire ? Quoi montrer ? Définir des objectifs • Spécifier les objectifs • Choisir parmi les fonctions possibles et préciser la stratégie Trop≠ mieux La meilleure approche ≠la plus directe Les fonctions et objectifs primaires et secondaires (Macontrexperience) • Spécifier le message, les fonctions visées. • Choix d'une métaphore, d’une approche 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.

23. DESIGN Maquette • Cas d’utilisation choisis • Structure statique du site (organisation des pages, des sections) • Structure dynamique (si interactif) dans le cas d’un site interactif (branchements conditionnels, règles)Vérification d’un formulaire, variables, calculs. • Maquette basse définition des principaux éléments Écrans (boutons,menus, texte, illustrations), description des effets et de l’interaction. • Input reconnus - output • Scénario • Contexte – Lieu, temps, métaphore, • Personnages – Héro, Adjuvant, Opposant • Quête • Déroulement

24. Structure et contenus 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 d’information (les feuilles) • Définir les concepts, les catégories 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 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

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

26. 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.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é d’interaction désiré, de l’utilisation des clés de claviers..(reconnaître le RETURN)

27. Structure statique des pages web Structure Intro IntroFlash 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

28. Structure statique

29. CREOStructures des étapes et des concepts Il faut décrire les structures de concepts

30. Exemples …

31. Visualisation de la progression dans les quêtesGroupeclasse, problème d’apprentissageProposer activité et vérifierActivités récentesDonner accès à l’enfant, Auto-évaluationSuggérer des activités reliées à un concept

32. Visualisation de la progression dans les concepts.

33. 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 n’est faite qu’en 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 d’animation • Les principaux calques et ce qu’il y aura dedans. Voici un exemple simple.. Puis un plus complexe:

34. Exemple: Auberge avec activités d’hiver • Principales séquences Important : intégrez des animations dans la présentation et la navigation- Exemples: Cinema et images animées

35. Exemple: Auberge avec activités d’hiver • Séquence d’activités ..suite d’animations et calques

36. Exemple: Auberge avec activités d’hiver • Séquence Formulaire • Suite des sections • Quels seraient les calques, boutons de navigation ?

37. Modèle intégrant Flash et htmlExemple semblable au Site de fondation Daniel Langlois

38. Structure dynamique Structure dynamique des interactifs Autres exemples de jeux utilisant des variables et des règles

39. Description d’une interaction en Flash - graphe de séquence

40. Scenario dans les jeuxFreeman (2008) Créer des émotions dans les jeux. • Écriture différente encourager l’interaction • Personnalité des personnages : Diamond • Profondeur de l’interaction • Dialogues et actions • Comment dévoiler l’information. • Créez des groupes intéressants. Spécifications: Personnages Déroulement Visuel Vidéos, animations, effets. Dialogues

41. Scenario dans les jeuxPersonnalité des personnages : Diamond • Au moins 4 traits dont un incompatible. • Han Solo • Brave • Batailleur • Narquois • Arrogant • Gandalf • Magique • Mystérieux • Bon • Sage

42. Scenario dans les jeuxProfondeur de l’interaction • Émotions négatives, ambivalence des personnages • Complexité couches • Regret, émotions fausses et vraies mêlées. • Ajouter des aspects inattendus • Personnage meurt, change de personnalité, incertitude • Travailler la structure des groupes • Évolution d’un personnage, semée d’embuches • Ne pas le dire .. Ambiguité et incertitude, laisser deviner.

43. Structuralisme - Schéma actantiel (Greimas) • Les jeux = structuré autour d’une histoire • Analyse des récits, des contes (Propp) • Définir les principaux rôles - Schéma actantiel • Récit repose sur une quête…

44. Structuralisme - Carré sémiotique (Greimas) • Autres schémas Hénaut(1983)

45. Scénarios déroulement: Computers as Theatre [Laurel, 1991] • Analogie du théâtre • Interaction est une scène • l’usager partage la scène avec le système • chacun a un rôle relativement prédéfini (rôles forment un tout cohérent, ils sont interdépendants, prédéfinis) • Théorie dramatique • plus universel et plus vrai (que la réalité) • possible -> probable ->nécessaire jauger les probabilités • Présenter à l ’usager un univers où il est peu à peu amener à deviner ce qui va se passer

46. Scénarios déroulement: Computers as Theatre [Laurel, 1991] • description de l’intensité dramatique: Graphe de Freytag Montée…climax…résolution Climax (Crisis, Turning Point) Rising Action (Complication) Falling Action Introduction of the Complication Denoument (Catastrophe, Resolution)

47. 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, ...

48. 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.

49. Animation Entrée Titres apparaissent puis l’animation s’arrête Information clignote une fois Continu Théâtre brille Sortie Audio=Bruits d’applaudissements 3 sec 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 Interaction Barre Mois clic = Accès à Horaire/ancre du mois survol= effet 3D Enveloppe clic = Lance courriel Info@rideauVert.qc.ca Amour English

50. 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 Animation Entrée Mois sélectionné est illuminé Ancre du mois choisi Audio: trois coups d’ouverture Horaire Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Interaction Le Malade Imaginaire Survol = Audio et textes apparaissent Clic = Ouvre Description Mois Clic change de mois Théâtre du Rideau Vert English