Support cours 1 -MAster PRANET

933 views

Published on

support de cours MASTER PRANET - RENNES 2

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
933
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Support cours 1 -MAster PRANET

  1. 1. ! Internet et design Laurent Neyssensas 17 Février 2011 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  2. 2. ?présentation ( )Enseignant et Responsable Veille Technologies Réseaux L’école de design Nantes AtlantiqueDesign Interactivité Images Histoires IUT de la Roche sur YonGestion de projet collaboratif Usages ... Arts Ping Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  3. 3. DesignerSommaire < 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. 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 dinteractivité 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 Crawford3_ G.U.I. signifie : General Users Initiative 11_ La réception de mail sopère via : Generic Users Interaction POP / IMAP Graphical Users Interfaces SMTP NNTP4_ La réalité virtuelle est aujourdhuiun outil de conception industriel à part entière : 12_ Le Web 2.0 est caractérisé par : Vrai Lavènement des portails Faux Les moteurs de recherches Lajout de contenus par les usagers5_ 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èmes6_ Quelle liste de noms regroupe "ceux qui ont fait" Ne concerne que la micro-informatiqueInternet Renzo Piano, Jean Nouvel Alan Turing, John Von Neumann 14_ Linteraction est un domaine qui concerne : Vinton Cerf, Robert Kahn Tous les designers Uniquement le cursus de design dinteractivité7__ Quelle liste de noms regroupe "ceux qui ont fait" Plus particulièrement le cursus de design produitsle World Wide Web Steve Jobs, Steve Wozniak - Tim Berners Lee, Robert Cailliau Larry Page, Serguei Brin 15_ La prochaine (R)évolution est terme dIHM semble incarnée par : RFID8_ Le Protocole IP concerne : BOCODE Lassignation dun n° unique à chacune des machines connectés à Internet KINECT La correction des erreurs de transmission des messages Lenvoi et la réception de-mail QCM Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  5. 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. 6. Interactivité et interaction Adopter une conception restrictive de l’interactivité : - Interaction : relation Humain - HumainConfusions et définitions - Interactivité : relation Humain - Machine Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  7. 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 satisfactionatteint par l’usager dansl’interaction vécue avec une machine » (interaction design / interactive design) Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  8. 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. 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. 10. les 3 questions de Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  11. 11. Interaction Design Process Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  12. 12. Internet et le Web Un environnement en perpétuel évolution. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  13. 13. Internet / Arpanet Les profils recherchés par l’entreprise1969 en ce moment sont des Rober Khan Vinton Cerf et graphistes ! Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  14. 14. Internet / Domain Name SystemDNS .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. 15. Internet / TCP /IP Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  16. 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 2012h5p://www.flickr.com/photos/lender/3220610925/sizes/o/in/photostream/
  17. 17. Internet / Routage Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  18. 18. Internet / Users http://www.ipligence.com/worldmap/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  19. 19. Web 2.0Avant les réseaux sociaux Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  20. 20. Web 2.0 / Front End Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  21. 21. Web 2.0 / Back End Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  22. 22. Web 2.0 / Wikipédiahttp://fr.wikipedia.org/wiki/Universit%C3%A9_Rennes_2 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  23. 23. Web 2.0 / Realy Simple Syndication Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  24. 24. Web 2.0 / Partage et Rich Media Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  25. 25. Web 2.0 / Commentaires, Tags et Folksonomie Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  26. 26. Web 2.0 / Réseaux Sociauxhttp://cpbotha.net/wp-content/uploads/2011/05/cpbotha_linkedin_network_20110522.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  27. 27. Web 2.0 / Mash Up Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  28. 28. Partie 2 : Interfaces et servicesClich&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. 29. Partie 2 : Interfaces et servicesSommaire1. INTRODUCTION & NOTIONS DE BASE- INTERFACE ?- PARADIGMES UTILISES- SERVICE ?- L’UX : EXPERIENCE UTILISATEUR & BETA PERPETUELLE2. 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 FUTURS3. 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. 30. INTRODUCTION & NOTIONS DE BASEClich&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. 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. 32. Interface UtilisateurInterface ? 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. 33. Interface ? Interface Utilisateur1. INTRODUCTION & NOTIONS DE BASE GUI : Graphical User Interface Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  34. 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 visibleLa 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. 35. Paradigmes utilisés Ligne de commandes Graphical User InterfaceCLI VS GUI Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  36. 36. Paradigmes utilisésWIMP WIMP Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  37. 37. Paradigmes utilisésW.I.M.P / Windows Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  38. 38. Paradigmes utilisésW.I.M.P / Iconsh&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. 39. Paradigmes utilisésW.I.M.P / Menus Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  40. 40. Paradigmes utilisésW.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. 41. Paradigmes utilisés1. INTRODUCTION & NOTIONS DE BASEW.I.M.P.Windows / Icons / Menus / Pointing Devices Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  42. 42. Paradigmes utilisés What You See.. Is What you GetWYSIWYG Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  43. 43. Service ? Implique une solution globale, un écosystème d’interfaces basé sur la compréhension du comportement des usagersDesign de service Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  44. 44. UX & bêta perpétuelleUX / Expérience utilisateur Nintendo  Wii  Commercial Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  45. 45. UX & bêta perpétuelleBêta perpetuelle Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  46. 46. INTERFACES & INTERACTIONSClich&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. 47. L’importance du design dans les interfacesTechnologie / Usages / Besoins Call  of  Duty  Elite Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  48. 48. Concept - FonctionnalitésEléments constitutifs d’une interface Architecture - Contenu Interactions - Graphisme Windows  8 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  49. 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. 50. Eléments constitutifs d’une interface L’importance du facteur social ou culturelJapanese  Toiletsh&p://www.southerngirltravels.com/wp-­‐content/uploads/2011/07/JapanToilet.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  51. 51. Exemples d’interfaces Google Reader Web : Information2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  52. 52. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  53. 53. Exemples d’interfaces Netvibes Web : Information2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  54. 54. Exemples d’interfaces Deezer Web : Browser Application2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  55. 55. App  Store A1-­‐  ATELIER  DESIGN  D’INTERACTIVITE  2011-­‐2012h&p://www.flickr.com/photos/crisFano_be&a/2909483129 F.Michel - L. Neyssensas - C.Thiery
  56. 56. Exemples d’interfaces Songza Web : Browser Application2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  57. 57. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  58. 58. Exemples d’interfaces Monet 2010 Web : Expérience2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  59. 59. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  60. 60. Exemples d’interfaces Facebook Web : social networking2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  61. 61. App  Store A1-­‐  ATELIER  DESIGN  D’INTERACTIVITE  2011-­‐2012h&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
  62. 62. Exemples d’interfaces GoingToRain Web : Service météo2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  63. 63. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  64. 64. Exemples d’interfaces XBOX2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  65. 65. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  66. 66. Exemples d’interfaces Shazam Mobile : outil2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  67. 67. App  Store A1-­‐  ATELIER  DESIGN  D’INTERACTIVITE  2011-­‐2012h&p://www.flickr.com/photos/crisFano_be&a/2909483129 F.Michel - L. Neyssensas - C.Thiery
  68. 68. Exemples d’interfaces Convertbot Mobile : outil2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  69. 69. Exemples d’interfaces Amplitube Tablet : Création Musicale2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  70. 70. App  Store A1-­‐  ATELIER  DESIGN  D’INTERACTIVITE  2011-­‐2012h&p://www.flickr.com/photos/crisFano_be&a/2909483129 F.Michel - L. Neyssensas - C.Thiery
  71. 71. Exemples d’interfaces Weather Station Pro Tablet : Outil2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  72. 72. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  73. 73. Exemples d’interfaces Microsoft Surface Table tactile : démonstrateur2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  74. 74. Exemples d’interfaces Catalogue de gestes 2. INTERFACES & INTERACTIONShttp://gesturecons.com/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  75. 75. 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 linformation, & objectifs l’existant (stats, etc.) contenus éditoriaux back-end scénarios dusage Observation des Cahier des charges, Design de linterface 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 linformation, www.drouillat.com Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  76. 76. Le papier Le dénominateur commun à tous les designers et base de toute réflexion créativePaper  Wireframesh&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
  77. 77. Innovation dans les interfacesLes apports de la SFMinority  Report Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  78. 78. Innovation dans les interfacesLes 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
  79. 79. Innovation dans les interfaces Head Up DisplayLes apports des jeux vidéo Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  80. 80. Innovation dans les interfacesLes apports des jeux vidéo Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  81. 81. 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
  82. 82. 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
  83. 83. Les apports de la gamification Carwings + Nissan Leaf Utilisation des mécanismes du jeu2. INTERFACES & INTERACTIONS pour inciter la conduite écolo Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  84. 84. Langages et paradigmes futurs Tactile & Interfaces Tangibles Faire communiquer des objets réels2. INTERFACES & INTERACTIONS et des interfaces virtuellesReactableh&p://fr.wikipedia.org/wiki/Reactable Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  85. 85. Langages et paradigmes futurs Tactile & Interfaces Tangibles Faire communiquer des objets réels2. INTERFACES & INTERACTIONS et des interfaces virtuellesReactableh&p://fr.wikipedia.org/wiki/Reactable Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  86. 86. Langages et paradigmes futurs Interfaces gestuelles naturelles Un langage corporel pour manipuler les éléments virtuels2. INTERFACES & INTERACTIONSSixthsenseh&p://www.pranavmistry.com/projects/sixthsense/images/full/sixthsense04.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  87. 87. Langages et paradigmes futurs Interfaces gestuelles physiques Le problème du feedback2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012

×