Support cours 1 -MAster PRANET
1 j'aime916 vues
Le document traite de l'interaction entre le design et Internet, en se concentrant sur des concepts tels que les interfaces, l'expérience utilisateur et l'évolution des technologies numériques. Il décrit également le rôle du design dans la conception de services innovants et l'importance de l'interaction humain-machine. Enfin, il met en lumière les exigences professionnelles actuelles, notamment la demande pour des graphistes et des experts en design d'interactivité.
Support cours 1 -MAster PRANET
- 1. ! Internet et design Laurent Neyssensas 17 Février 2011 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 2. ? présentation ( ) Enseignant et Responsable Veille Technologies Réseaux L’école de design Nantes Atlantique Design Interactivité Images Histoires IUT de la Roche sur Yon Gestion de projet collaboratif Usages ... Arts Ping Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 3. Designer Sommaire < Design > Interactivité Designer > d’interactivité Designer > Internet > Web Interfaces > histoire > Humain > Machine Humain > Système Humain > environnement Réalité > virtuelle > augmentée > mixte Evolutions > affichage > outils > métier Etapes > conception > ?... Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 4. 1_ Le Design Numérique (Media design) 9_ Le P de WIMP : Concerne avant tout les contenus Désigne la "souris" Est le synonyme de design d'interactivité Concerne tous les périphériques de pointage Concerne avant tout les interfaces Désigne "l'écran" 2_ IHM est un acronyme qui signifie : Interfaces Humains-Machines 10_La manipulation directe a été définie par : Interaction Humains-Machines Ben Schneiderman Ada Lovelace Interactivité Humains-Machines Chris Crawford 3_ G.U.I. signifie : General Users Initiative 11_ La réception de mail s'opère via : Generic Users Interaction POP / IMAP Graphical Users Interfaces SMTP NNTP 4_ La réalité virtuelle est aujourd'hui un outil de conception industriel à part entière : 12_ Le Web 2.0 est caractérisé par : Vrai L'avènement des portails Faux Les moteurs de recherches L'ajout de contenus par les usagers 5_ Le Web est né : chez Yahoo au CERN 13_ Une interface : chez Microsoft Est avant tout une solution graphique Permet le dialogue entre deux systèmes 6_ Quelle liste de noms regroupe "ceux qui ont fait" Ne concerne que la micro-informatique Internet Renzo Piano, Jean Nouvel Alan Turing, John Von Neumann 14_ L'interaction est un domaine qui concerne : Vinton Cerf, Robert Kahn Tous les designers Uniquement le cursus de design d'interactivité 7__ Quelle liste de noms regroupe "ceux qui ont fait" Plus particulièrement le cursus de design produits le World Wide Web Steve Jobs, Steve Wozniak - Tim Berners Lee, Robert Cailliau Larry Page, Serguei Brin 15_ La prochaine (R)évolution est terme d'IHM semble incarnée par : RFID 8_ Le Protocole IP concerne : BOCODE L'assignation d'un n° unique à chacune des machines connectés à Internet KINECT La correction des erreurs de transmission des messages L'envoi et la réception d'e-mail QCM Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 5. Design ? * Une activité intégrable dans un processus projet qui a pour objectif de produire de la valeur ajoutée : Usages / Technologie / Identité Confusions et définitions * 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 » Source image Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 6. Interactivité et interaction Adopter une conception restrictive de l’interactivité : - Interaction : relation Humain - Humain Confusions et définitions - Interactivité : relation Humain - Machine Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 7. Interactivité nf. INFORM. « Qualité d’un logiciel dont l’exécution prend constamment en compte les Fonctionnelle et intentionnelle informations fournies par l’utilisateur.» « Degré de satisfaction atteint par l’usager dans l’interaction vécue avec une machine » (interaction design / interactive design) Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 8. 1. Production de contenus (design numérique / media design) Design d’interactivité ? 2. Réalisation d’interfaces (graphiques) 3. Nouvelles modalités d’interaction 4. Conception de services innovants Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 9. Quel métier ? Les profils recherchés par l’entreprise en ce moment sont des graphistes ! Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 10. les 3 questions de Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 11. Interaction Design Process Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 12. Internet et le Web Un environnement en perpétuel évolution. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 13. Internet / Arpanet Les profils recherchés par l’entreprise 1969 en ce moment sont des Rober Khan Vinton Cerf et graphistes ! Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 14. Internet / Domain Name System DNS .com Espaces dédiés à des pratiques commerciales .org Organisations à but non lucratif .edu Education / Enseignement .gov Institutions / Gouvernements .net Evolution d’Internet Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 15. Internet / TCP /IP Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 16. Internet / Adresse IP Adresse physique : «IP» 172.26.100.126 " IP-‐Adresse als Des.na.onsangabe? " Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012 h5p://www.flickr.com/photos/lender/3220610925/sizes/o/in/photostream/
- 17. Internet / Routage Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 18. Internet / Users http://www.ipligence.com/worldmap/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 19. Web 2.0 Avant les réseaux sociaux Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 20. Web 2.0 / Front End Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 21. Web 2.0 / Back End Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 22. Web 2.0 / Wikipédia http://fr.wikipedia.org/wiki/Universit%C3%A9_Rennes_2 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 23. Web 2.0 / Realy Simple Syndication Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 24. Web 2.0 / Partage et Rich Media Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 25. Web 2.0 / Commentaires, Tags et Folksonomie Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 26. Web 2.0 / Réseaux Sociaux http://cpbotha.net/wp-content/uploads/2011/05/cpbotha_linkedin_network_20110522.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 27. Web 2.0 / Mash Up Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 28. Partie 2 : Interfaces et services Clic h&p://www.gizmodo.fr/wp-‐content/uploads/2011/08/Fotolia_22355574_SubscripFon_XXL.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 29. Partie 2 : Interfaces et services Sommaire 1. INTRODUCTION & NOTIONS DE BASE - INTERFACE ? - PARADIGMES UTILISES - SERVICE ? - L’UX : EXPERIENCE UTILISATEUR & BETA PERPETUELLE 2. INTERFACES & INTERACTIONS - L’IMPORTANCE DU DESIGN DANS LES IHM - ELEMENTS CONSTITUTIFS D’UNE INTERFACE - EXEMPLES D’INTERFACES - DEROULEMENT D’UN PROJET - LE PAPIER - INNOVATIONS DANS LES INTERFACES - LES APPORTS DE LA GAMIFICATION - LANGAGES ET PARADIGMES FUTURS 3. DESIGN DE SERVICES - ORIGINE DU DESIGN DE SERVICE - INTERETS DU DESIGN DE SERVICE - EXEMPLES DE DESIGNS DE SERVICES - ANTICIPATION & PROSPECTION . http://www.intel.com/pressroom/innovation/archive.htm Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 30. INTRODUCTION & NOTIONS DE BASE Clic h&p://www.gizmodo.fr/wp-‐content/uploads/2011/08/Fotolia_22355574_SubscripFon_XXL.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 31. Interface ? Permettre le dialogue entre deux systèmes. 1. INTRODUCTION & NOTIONS DE BASE Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 32. Interface Utilisateur Interface ? Permet l’interaction avec un ordinateur. 1. INTRODUCTION & NOTIONS DE BASE Nécessité d’un langage commun. - Dispositifs de contrôle physiques - Graphical User Interfaces - Voice User Interfaces - Gestuelle Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 33. Interface ? Interface Utilisateur 1. INTRODUCTION & NOTIONS DE BASE GUI : Graphical User Interface Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 34. Les objets ont une représentation permanente (métaphore des icônes) Paradigmes utilisés Les actions physiques directes remplacent la saisie de commandes textuelles Le résultat des actions sur les objets est immédiatement visible La manipulation directe - 1982 Les opérations sont rapides, incrémentables et réversibles Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 35. Paradigmes utilisés Ligne de commandes Graphical User Interface CLI VS GUI Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 36. Paradigmes utilisés WIMP WIMP Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 37. Paradigmes utilisés W.I.M.P / Windows Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 38. Paradigmes utilisés W.I.M.P / Icons h&p://1.bp.blogspot.com/-‐4kZQLWGelgk/Tck1PvAn6aI/AAAAAAAAAiI/Y-‐-‐uEnqReJ4/s1600/pppp.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 39. Paradigmes utilisés W.I.M.P / Menus Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 40. Paradigmes utilisés W.I.M.P / Pointing Devices W.I.M.P. Windows / Icons / Menus / Pointing Devices Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 41. Paradigmes utilisés 1. INTRODUCTION & NOTIONS DE BASE W.I.M.P. Windows / Icons / Menus / Pointing Devices Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 42. Paradigmes utilisés What You See.. Is What you Get WYSIWYG Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 43. Service ? Implique une solution globale, un écosystème d’interfaces basé sur la compréhension du comportement des usagers Design de service Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 44. UX & bêta perpétuelle UX / Expérience utilisateur Nintendo Wii Commercial Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 45. UX & bêta perpétuelle Bêta perpetuelle Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 46. INTERFACES & INTERACTIONS Clic h&p://www.gizmodo.fr/wp-‐content/uploads/2011/08/Fotolia_22355574_SubscripFon_XXL.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 47. L’importance du design dans les interfaces Technologie / Usages / Besoins Call of Duty Elite Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 48. Concept - Fonctionnalités Eléments constitutifs d’une interface Architecture - Contenu Interactions - Graphisme Windows 8 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 49. Eléments constitutifs d’une interface Ce que l’on crée USAGES Windows 8 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 50. Eléments constitutifs d’une interface L’importance du facteur social ou culturel Japanese Toilets h&p://www.southerngirltravels.com/wp-‐content/uploads/2011/07/JapanToilet.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 51. Exemples d’interfaces Google Reader Web : Information 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 52. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 53. Exemples d’interfaces Netvibes Web : Information 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 55. Exemples d’interfaces Deezer Web : Browser Application 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 56. App Store A1-‐ ATELIER DESIGN D’INTERACTIVITE 2011-‐2012 h&p://www.flickr.com/photos/crisFano_be&a/2909483129 F.Michel - L. Neyssensas - C.Thiery
- 57. Exemples d’interfaces Songza Web : Browser Application 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 58. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 59. Exemples d’interfaces Monet 2010 Web : Expérience 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 61. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 62. Exemples d’interfaces Facebook Web : social networking 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 63. App Store A1-‐ ATELIER DESIGN D’INTERACTIVITE 2011-‐2012 h&p://www.flickr.com/photos/crisFano_be&a/2909483129 F.Michel - L. Neyssensas - C.Thiery Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 64. Exemples d’interfaces GoingToRain Web : Service météo 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 65. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 66. Exemples d’interfaces XBOX 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 67. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 68. Exemples d’interfaces Shazam Mobile : outil 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 69. App Store A1-‐ ATELIER DESIGN D’INTERACTIVITE 2011-‐2012 h&p://www.flickr.com/photos/crisFano_be&a/2909483129 F.Michel - L. Neyssensas - C.Thiery
- 70. Exemples d’interfaces Convertbot Mobile : outil 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 72. Exemples d’interfaces Amplitube Tablet : Création Musicale 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 73. App Store A1-‐ ATELIER DESIGN D’INTERACTIVITE 2011-‐2012 h&p://www.flickr.com/photos/crisFano_be&a/2909483129 F.Michel - L. Neyssensas - C.Thiery
- 74. Exemples d’interfaces Weather Station Pro Tablet : Outil 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 75. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 76. Exemples d’interfaces Microsoft Surface Table tactile : démonstrateur 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 78. Exemples d’interfaces Catalogue de gestes 2. INTERFACES & INTERACTIONS http://gesturecons.com/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 79. Déroulement d’un projet Le cycle d’un projet respecte des règles et des étapes. Le processus design Implémentation Problématique Recherche Exploration Réalisation Développement & mise en ligne Architecture de Définition du projet Analyse de Production des Développement l'information, & objectifs l’existant (stats, etc.) contenus éditoriaux back-end scénarios d'usage Observation des Cahier des charges, Design de l'interface Déclinaison des attentes et usages Recettage, tests brief graphique principaux gabarits des utilisateurs Raffinement des Développement Recueil des besoins pistes de travail front-end Contexte : technologie, contraintes, culture de l’entreprise, parties prenantes Benoît Drouillat, architecte de l'information, www.drouillat.com Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 80. Le papier Le dénominateur commun à tous les designers et base de toute réflexion créative Paper Wireframes h&p://www.ian-‐thomas.net/wp-‐content/uploads/2011/02/Wireframing-‐revised-‐homepage.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 81. Innovation dans les interfaces Les apports de la SF Minority Report Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 82. Innovation dans les interfaces Les apports de la SF John Underkoffler at TED’s conference h&p://www.ted.com/talks/john_underkoffler_drive_3d_data_with_a_gesture.html Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 83. Innovation dans les interfaces Head Up Display Les apports des jeux vidéo Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 84. Innovation dans les interfaces Les apports des jeux vidéo Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 85. Les apports de la gamification Les badges de Foursquare Utilisation des mécanismes du jeu pour inciter à l’utilisation Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 86. Les apports de la gamification Epic Win Une To Do List sous forme d’un RPG Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 87. Les apports de la gamification Carwings + Nissan Leaf Utilisation des mécanismes du jeu 2. INTERFACES & INTERACTIONS pour inciter la conduite écolo Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 88. Langages et paradigmes futurs Tactile & Interfaces Tangibles Faire communiquer des objets réels 2. INTERFACES & INTERACTIONS et des interfaces virtuelles Reactable h&p://fr.wikipedia.org/wiki/Reactable Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 89. Langages et paradigmes futurs Tactile & Interfaces Tangibles Faire communiquer des objets réels 2. INTERFACES & INTERACTIONS et des interfaces virtuelles Reactable h&p://fr.wikipedia.org/wiki/Reactable Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 90. Langages et paradigmes futurs Interfaces gestuelles naturelles Un langage corporel pour manipuler les éléments virtuels 2. INTERFACES & INTERACTIONS Sixthsense h&p://www.pranavmistry.com/projects/sixthsense/images/full/sixthsense04.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
- 91. Langages et paradigmes futurs Interfaces gestuelles physiques Le problème du feedback 2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012