Le document présente un module d'initiation au design d'interactivité, abordant les concepts de design, interactivité et leurs applications. Il détaille la production de contenus numériques, la réalisation d'interfaces et la conception de services innovants, en soulignant l'importance de l'expérience utilisateur. La formation mentionne également les outils et méthodes pour le design et les nouvelles modalités d'interaction, telles que l'informatique omniprésente.

1. Design d'interactivité ? Module 1ere année d’initiation au design d’interactivité Grégoire Cliquet / Laurent Neyssensas / Clément Thiery L’École de design Nantes Atlantique 2010 - 2011

2. Design ? * Une activité intégrable dans un processus projet qui a pour objectif de produire de la valeur ajoutée : Usages / Technologie / Identité * Il a pour finalité d’étendre la gamme , renforcer la marque ou faciliter l’innovation * Qualité globale perçue d’un produit ou d’un service est déterminée par le design « Un dessin à dessein » http://www.gchangetout.com/images_int/tony2panam/83459/337678.jpg

3. Interactivité ? nf.I NFORM . « Qualité d’un logiciel dont l’exécution prend constamment en compte les informations fournies par l’utilisateur.» « Degré de satisfaction atteint par l’usager dans l’interaction vécue avec une machine » ( interaction design / interactive design ) http://www.flickr.com/photos/lecolededesign/2320698239/in/set-72157604076710360/

4. Design d’Interactivité ? @lecolededesign 1. Production de contenus (design numérique / media design) 2. Réalisation d’interfaces (graphiques) 3. Nouvelles modalités d’interaction 4. Conception de services innovants

5. 1. Design Numérique (media design) Production de Contenus Graphisme (infographie 2d / 3d) / Motion / Son Valentin Millet Jules Leclerc & Jean Christophe Naour The French Flavor designers http://www.thefrenchflavor.com Vidéo

6. 1. Design Numérique (media design) Outils : * Adobe (Photoshop, Illustrator, Flash, etc.) Autodesk, 3dsMax, Proce55ing, Virtools, FL Studio, etc.

7. 2. Design d’interfaces (G.U.I. / Web design) Graphical User Interfaces (Interfaces Graphiques)

8. 2. Design d’interfaces (exemple 1) * Interfaces graphiques : GUI, Applications, Web, Mobiles… * Convergence, Plasticité des interfaces… Accessibilité, Navigabilité “ ahead” / C. Faydi et M. Denié / 2010

9. 2. Design d’interfaces (méthode) * Hiérarchisation des fonctions * Séquence de navigation * Définition des interacteurs * Mise en forme des contenus “ ahead” / C. Faydi et M. Denié / 2010

10. 2. Design d’interfaces (production) Eléments nécessaires à la réalisation de l’interface graphique * Wireframe (gabarits) * Mockup (maquette graphique) / Layout * Préconisations et Spécifications techniques “ Subatech” / S. Mouton et A. Milien / 2010

11. 2. Design d’interfaces Outils : * Wireframing (Pencil) * Langages (xHTML, CSS, Javascript, Php, MySql) * Logiciels (Bloc notes !, Adobe DreamWeaver… Filezilla)

12. 3. Nouvelles modalités d’interaction * Evolution de l’électronique : Disappearing Computer, Ambient & Ubiquitous Computing 1950 2008

13. 3. Nouvelles modalités d’interactions (exemple 1) Mobilité, Hyper Mobilité, Multimodalité Natural User Interface (Gesture / Xtouch) Réalité Virtuelle, Augmentée, Interfaces tangibles Affordance, Ergonomie fonctionnelle “ MindFlow” / T. Da Luz / 2010

14. 3. Nouvelles modalités d’interactions (méthode) * Approche descendante et ascendante * Scénario d’Usages * Etude de faisabilité “ MindFlow” (étude) / T. Da Luz / 2010 Vidéo “ MindFlow” (final) / T. Da Luz / 2010 Vidéo

15. 3. Nouvelles modalités d’interactions (production) * Scénario d’usage * Démonstrateur fonctionnel (Proof Of Concept) “ Scope” / F. Lasorne / IVRC Tokyo 2009 Vidéo “ Immersive Rail Shooter” / D. Arenou / IVRC Tokyo 2010 Vidéo

16. 3. Nouvelles modalités d’interactions (production) * Scénario d’usage * Démonstrateur fonctionnel (Proof Of Concept) “ Laz’s Quest” / I. Ardouin Fumat & M. Garel / Laval Virtual 2010 Vidéo

17. 4. Conception de services innovants Définition et scénarisation de services innovants Innovation Descendante : De la R&D vers les USAGES et les USAGERS Innovation Ascendante : Des USAGES et les USAGERS vers la R&D

18. 4. Design de services (exemple 1/2) Valorisation d’une technologie hardware / software (innovation descendante) Technologie d’analyse sémantique des contenus multimédia (audio/vidéo) http://www.2424actu.fr (Orange Labs Lannion / 2009) de l’abstraction technologique à sa matérialisation… “ 2424actu.fr” / Orange Labs Lannion 2009

19. 4. Design de services (exemple 2/2) Observation des usages, détection de besoins (innovation ascendante) Diffuser, agréger et partager un événement culturel sur les réseaux sociaux : Géographique, Thématique et Relationnel Nouvelles Technologies Nouveaux Usages « Vibrations Culturelles » / C. Thiery / 2008

20. 4. Design de services (méthode / outils) Veille Créative (veille stratégique, agrégation de flux RSS…) Observation des usages (Etudes sociologiques, ergonomiques…) Brainstorming, Mindmapping… (Prise en compte des contraintes technologiques…)

21. 4. Design de services (production) S toryboard / Scénario * Contexte d’utilisation * Définition de service / Présentation des modalités d’usages * Identité du service « Vibrations Culturelles » / C. Thiery / 2008) Vidéo

22. Designer d’interactivité ? * Designer Intégré R&D (Légo, Ubisoft, Orange…) * Designer PME (Wiztivi, Uneek) * Agences / Free Lance (l’arrosoir, Opixido) * Poursuite d’études (doctorat / x2 diplôme ENSAM & Bretagne Telecom)

23. Merci ;) des questions ? [email_address] [email_address] [email_address]