• Save
Support cours 1 -MAster PRANET
Upcoming SlideShare
Loading in...5
×
 

Support cours 1 -MAster PRANET

on

  • 825 views

support de cours MASTER PRANET - RENNES 2

support de cours MASTER PRANET - RENNES 2

Statistics

Views

Total Views
825
Views on SlideShare
821
Embed Views
4

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 4

http://www.docseek.net 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Support cours 1 -MAster PRANET Support cours 1 -MAster PRANET Presentation Transcript

  • ! Internet et design Laurent Neyssensas 17 Février 2011 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • ?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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 design» Février 2012
  • Internet et le Web Un environnement en perpétuel évolution. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • 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
  • 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-­‐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/
  • Internet / Routage Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Internet / Users http://www.ipligence.com/worldmap/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Web 2.0Avant les réseaux sociaux Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Web 2.0 / Realy Simple Syndication Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Web 2.0 / Partage et Rich Media Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Web 2.0 / Commentaires, Tags et Folksonomie Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • 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.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • 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
  • Interface ? Permettre le dialogue entre deux systèmes.1. INTRODUCTION & NOTIONS DE BASE Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • Interface ? Interface Utilisateur1. INTRODUCTION & NOTIONS DE BASE GUI : Graphical User Interface Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • Paradigmes utilisés Ligne de commandes Graphical User InterfaceCLI VS GUI Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Paradigmes utilisésWIMP WIMP Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Paradigmes utilisésW.I.M.P / Windows Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • Paradigmes utilisésW.I.M.P / Menus Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • 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
  • Paradigmes utilisés What You See.. Is What you GetWYSIWYG Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • UX & bêta perpétuelleUX / Expérience utilisateur Nintendo  Wii  Commercial Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • UX & bêta perpétuelleBêta perpetuelle Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • L’importance du design dans les interfacesTechnologie / Usages / Besoins Call  of  Duty  Elite Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • 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
  • 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
  • Exemples d’interfaces Google Reader Web : Information2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Exemples d’interfaces Netvibes Web : Information2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Exemples d’interfaces Deezer Web : Browser Application2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • App  Store A1-­‐  ATELIER  DESIGN  D’INTERACTIVITE  2011-­‐2012h&p://www.flickr.com/photos/crisFano_be&a/2909483129 F.Michel - L. Neyssensas - C.Thiery
  • Exemples d’interfaces Songza Web : Browser Application2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Exemples d’interfaces Monet 2010 Web : Expérience2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Exemples d’interfaces Facebook Web : social networking2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • Exemples d’interfaces GoingToRain Web : Service météo2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Exemples d’interfaces XBOX2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Exemples d’interfaces Shazam Mobile : outil2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • App  Store A1-­‐  ATELIER  DESIGN  D’INTERACTIVITE  2011-­‐2012h&p://www.flickr.com/photos/crisFano_be&a/2909483129 F.Michel - L. Neyssensas - C.Thiery
  • Exemples d’interfaces Convertbot Mobile : outil2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Exemples d’interfaces Amplitube Tablet : Création Musicale2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • App  Store A1-­‐  ATELIER  DESIGN  D’INTERACTIVITE  2011-­‐2012h&p://www.flickr.com/photos/crisFano_be&a/2909483129 F.Michel - L. Neyssensas - C.Thiery
  • Exemples d’interfaces Weather Station Pro Tablet : Outil2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Exemples d’interfaces Microsoft Surface Table tactile : démonstrateur2. INTERFACES & INTERACTIONS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Exemples d’interfaces Catalogue de gestes 2. INTERFACES & INTERACTIONShttp://gesturecons.com/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • 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
  • Innovation dans les interfacesLes apports de la SFMinority  Report Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • Innovation dans les interfaces Head Up DisplayLes apports des jeux vidéo Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • Innovation dans les interfacesLes apports des jeux vidéo Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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