Your SlideShare is downloading. ×
!    Internet et design        Laurent Neyssensas                                                                         ...
?présentation                                   (                                           )Enseignant et Responsable Vei...
DesignerSommaire           <           Design     > Interactivité           Designer   > d’interactivité           Designe...
1_ Le Design Numérique (Media design)                                               9_ Le P de WIMP :     Concerne avant t...
Design ?                   * Une activité intégrable dans un processus projet qui a pour objectif                         ...
Interactivité et interaction         Adopter une conception restrictive de l’interactivité :                              ...
Interactivité                     nf. INFORM.                                    « Qualité d’un logiciel dont l’exécution ...
1. Production de contenus (design numérique / media design)Design d’interactivité ?   2. Réalisation d’interfaces (graphiq...
Quel métier ?                     Les profils recherchés par l’entreprise                                  en ce moment son...
les 3 questions de                     Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Interaction Design Process                             Laurent Neyssensas Master Communication- PRANET : «Internet et desi...
Internet et le Web    Un environnement en perpétuel évolution.                     Laurent Neyssensas Master Communication...
Internet / Arpanet                     Les profils recherchés par l’entreprise1969                                   en ce ...
Internet / Domain Name SystemDNS                                       .com                                       Espaces ...
Internet / TCP /IP                     Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Internet / Adresse IP                                                    Adresse physique : «IP» 172.26.100.126"	  IP-­‐Ad...
Internet / Routage                     Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Internet / Users http://www.ipligence.com/worldmap/                                      Laurent Neyssensas Master Communi...
Web 2.0Avant les réseaux sociaux                            Laurent Neyssensas Master Communication- PRANET : «Internet et...
Web 2.0 / Front End                      Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Web 2.0 / Back End                     Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Web 2.0 / Wikipédiahttp://fr.wikipedia.org/wiki/Universit%C3%A9_Rennes_2                                                  ...
Web 2.0 / Realy Simple Syndication                             Laurent Neyssensas Master Communication- PRANET : «Internet...
Web 2.0 / Partage et Rich Media                             Laurent Neyssensas Master Communication- PRANET : «Internet et...
Web 2.0 / Commentaires, Tags et Folksonomie                            Laurent Neyssensas Master Communication- PRANET : «...
Web 2.0 / Réseaux Sociauxhttp://cpbotha.net/wp-content/uploads/2011/05/cpbotha_linkedin_network_20110522.jpg              ...
Web 2.0 / Mash Up                    Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Partie 2 : Interfaces et servicesClich&p://www.gizmodo.fr/wp-­‐content/uploads/2011/08/Fotolia_22355574_SubscripFon_XXL.jp...
Partie 2 : Interfaces et servicesSommaire1. INTRODUCTION & NOTIONS DE BASE- INTERFACE ?- PARADIGMES UTILISES- SERVICE ?- L...
INTRODUCTION & NOTIONS DE BASEClich&p://www.gizmodo.fr/wp-­‐content/uploads/2011/08/Fotolia_22355574_SubscripFon_XXL.jpg  ...
Interface ?                                            Permettre le dialogue entre deux systèmes.1. INTRODUCTION & NOTIONS...
Interface UtilisateurInterface ?                                     Permet l’interaction avec un ordinateur.1. INTRODUCTI...
Interface ?                                                Interface Utilisateur1. INTRODUCTION & NOTIONS DE BASE         ...
Les objets ont une représentation permanente (métaphore des icônes)Paradigmes utilisés              Les actions physiques ...
Paradigmes utilisés                                Ligne de commandes                                                   Gr...
Paradigmes utilisésWIMP                 WIMP                      Laurent Neyssensas Master Communication- PRANET : «Inter...
Paradigmes utilisésW.I.M.P / Windows                      Laurent Neyssensas Master Communication- PRANET : «Internet et d...
Paradigmes utilisésW.I.M.P / Iconsh&p://1.bp.blogspot.com/-­‐4kZQLWGelgk/Tck1PvAn6aI/AAAAAAAAAiI/Y-­‐-­‐uEnqReJ4/s1600/ppp...
Paradigmes utilisésW.I.M.P / Menus                      Laurent Neyssensas Master Communication- PRANET : «Internet et des...
Paradigmes utilisésW.I.M.P / Pointing Devices W.I.M.P. Windows / Icons / Menus / Pointing Devices                         ...
Paradigmes utilisés1. INTRODUCTION & NOTIONS DE BASEW.I.M.P.Windows / Icons / Menus / Pointing Devices                    ...
Paradigmes utilisés                                          What You See.. Is What you GetWYSIWYG                      La...
Service ?           Implique une solution globale, un écosystème d’interfaces                    basé sur la compréhension...
UX & bêta perpétuelleUX / Expérience utilisateur              Nintendo	  Wii	  Commercial                                 ...
UX & bêta perpétuelleBêta perpetuelle                        Laurent Neyssensas Master Communication- PRANET : «Internet e...
INTERFACES & INTERACTIONSClich&p://www.gizmodo.fr/wp-­‐content/uploads/2011/08/Fotolia_22355574_SubscripFon_XXL.jpg       ...
L’importance du design dans les interfacesTechnologie / Usages / Besoins             Call	  of	  Duty	  Elite             ...
Concept - FonctionnalitésEléments constitutifs d’une interface                             Architecture - Contenu         ...
Eléments constitutifs d’une interface                              Ce que l’on crée                                       ...
Eléments constitutifs d’une interface                                                                  L’importance du fac...
Exemples d’interfaces                                                               Google Reader                         ...
Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples d’interfaces                                                                            Netvibes                 ...
Exemples d’interfaces                                                                               Deezer                ...
App	  Store                                          A1-­‐	  ATELIER	  DESIGN	  D’INTERACTIVITE	  2011-­‐2012h&p://www.flic...
Exemples d’interfaces                                                                              Songza                 ...
Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples d’interfaces                                                                      Monet 2010                     ...
Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples d’interfaces                                                                          Facebook                   ...
App	  Store                                                                                    A1-­‐	  ATELIER	  DESIGN	  ...
Exemples d’interfaces                                                                   GoingToRain                       ...
Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples d’interfaces                                                                                 XBOX2. INTERFACES & ...
Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples d’interfaces                                                                             Shazam                  ...
App	  Store                                          A1-­‐	  ATELIER	  DESIGN	  D’INTERACTIVITE	  2011-­‐2012h&p://www.flic...
Exemples d’interfaces                                                                       Convertbot                    ...
Exemples d’interfaces                                                                         Amplitube                   ...
App	  Store                                          A1-­‐	  ATELIER	  DESIGN	  D’INTERACTIVITE	  2011-­‐2012h&p://www.flic...
Exemples d’interfaces                                                     Weather Station Pro                             ...
Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples d’interfaces                                                           Microsoft Surface                         ...
Exemples d’interfaces                                                     Catalogue de gestes 2. INTERFACES & INTERACTIONS...
Déroulement d’un projet                                                         Le cycle d’un projet respecte des règles e...
Le papier                                                        Le dénominateur commun à tous les designers et base de to...
Innovation dans les interfacesLes apports de la SFMinority	  Report                                 Laurent Neyssensas Mas...
Innovation dans les interfacesLes apports de la SF   John	  Underkoffler	  at	  TED’s	  conference   h&p://www.ted.com/talks...
Innovation dans les interfaces                                  Head Up DisplayLes apports des jeux vidéo                 ...
Innovation dans les interfacesLes apports des jeux vidéo                                 Laurent Neyssensas Master Communi...
Les apports de la gamification       Les badges de Foursquare                                    Utilisation des mécanismes...
Les apports de la gamification                        Epic Win                                                     Une To D...
Les apports de la gamification                                Carwings + Nissan Leaf                                       ...
Langages et paradigmes futurs                                    Tactile & Interfaces Tangibles                           ...
Langages et paradigmes futurs                                    Tactile & Interfaces Tangibles                           ...
Langages et paradigmes futurs                                                       Interfaces gestuelles naturelles      ...
Langages et paradigmes futurs                            Interfaces gestuelles physiques                                  ...
Support cours 1 -MAster PRANET
Support cours 1 -MAster PRANET
Support cours 1 -MAster PRANET
Support cours 1 -MAster PRANET
Upcoming SlideShare
Loading in...5
×

Support cours 1 -MAster PRANET

711

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
711
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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

×