SlideShare une entreprise Scribd logo
1  sur  91
!




    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 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
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
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
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 - Humain
Confusions 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 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
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’entreprise
1969                                   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 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
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 2012
h5p://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.0
Avant 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édia




http://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 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
Web 2.0 / Mash Up




                    Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
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
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
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
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 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
Interface ?                                                Interface Utilisateur
1. 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 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
Paradigmes utilisés                                Ligne de commandes
                                                   Graphical User Interface
CLI VS GUI




                      Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Paradigmes utilisés
WIMP




                 WIMP

                      Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Paradigmes utilisés
W.I.M.P / Windows




                      Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
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
Paradigmes utilisés
W.I.M.P / Menus




                      Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
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
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
Paradigmes utilisés                                          What You See.. Is What you Get
WYSIWYG




                      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 usagers
Design de service




                    Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
UX & bêta perpétuelle
UX / Expérience utilisateur




              Nintendo	
  Wii	
  Commercial
                                              Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
UX & bêta perpétuelle
Bêta perpetuelle




                        Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
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
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
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
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 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
Exemples d’interfaces                                                               Google Reader
                                                                                              Web : Information
2. 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 : Information
2. INTERFACES & INTERACTIONS




                               Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples d’interfaces                                                                               Deezer
                                                                                    Web : Browser Application
2. INTERFACES & INTERACTIONS




                               Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
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
Exemples d’interfaces                                                                              Songza
                                                                                    Web : Browser Application
2. 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érience
2. 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 networking
2. INTERFACES & INTERACTIONS




                               Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
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
Exemples d’interfaces                                                                   GoingToRain
                                                                                           Web : Service météo
2. 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                                                                                 XBOX
2. 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 : outil
2. INTERFACES & INTERACTIONS




                               Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
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
Exemples d’interfaces                                                                       Convertbot
                                                                                                   Mobile : outil
2. INTERFACES & INTERACTIONS




                               Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples d’interfaces                                                                         Amplitube
                                                                                     Tablet : Création Musicale
2. INTERFACES & INTERACTIONS




                               Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
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
Exemples d’interfaces                                                     Weather Station Pro
                                                                                                    Tablet : Outil
2. 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émonstrateur
2. INTERFACES & INTERACTIONS




                               Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples d’interfaces                                                     Catalogue de gestes
 2. INTERFACES & INTERACTIONS




http://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
                                                     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
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
Innovation dans les interfaces
Les apports de la SF




Minority	
  Report

                                 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
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
Innovation dans les interfaces                                  Head Up Display
Les apports des jeux vidéo




                                 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Innovation dans les interfaces
Les 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 jeu
2. 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é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
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
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
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

Contenu connexe

Tendances

Blogspirit CCI Strasbourg 25 mai 2007
Blogspirit CCI Strasbourg 25 mai 2007Blogspirit CCI Strasbourg 25 mai 2007
Blogspirit CCI Strasbourg 25 mai 2007Stéphane BAYLE
 
Entreprise 2.0 serge van oudenhove ichec 2011
Entreprise 2.0 serge van oudenhove ichec 2011Entreprise 2.0 serge van oudenhove ichec 2011
Entreprise 2.0 serge van oudenhove ichec 2011Serge Van Oudenhove
 
Slide presentation ideoscop-2013 v5
Slide presentation ideoscop-2013 v5Slide presentation ideoscop-2013 v5
Slide presentation ideoscop-2013 v5Ideoscop.com
 
Communautes virtuelles
Communautes virtuellesCommunautes virtuelles
Communautes virtuellesIsabelle Gonon
 
Pistes enseignement Informatique et Internet
Pistes enseignement Informatique et InternetPistes enseignement Informatique et Internet
Pistes enseignement Informatique et InternetPatrick Genoud
 
Modèles et Outils Documentaires pour les Hypervidéos sur le Web
Modèles et Outils Documentaires pour les Hypervidéos sur le WebModèles et Outils Documentaires pour les Hypervidéos sur le Web
Modèles et Outils Documentaires pour les Hypervidéos sur le WebMadjid Sadallah
 
Entreprise 2.0 lyonnaise des eaux
Entreprise 2.0   lyonnaise des eauxEntreprise 2.0   lyonnaise des eaux
Entreprise 2.0 lyonnaise des eauxCHARLES Frédéric
 
Emakina Academy - Blue Kiwi - 20070614
Emakina Academy - Blue Kiwi -  20070614Emakina Academy - Blue Kiwi -  20070614
Emakina Academy - Blue Kiwi - 20070614Marin
 
Guide pratique e_reputation_usage_entreprises
Guide pratique e_reputation_usage_entreprisesGuide pratique e_reputation_usage_entreprises
Guide pratique e_reputation_usage_entreprisesAmal BELKAMEL
 
Comment marche la visioconference
Comment marche la visioconferenceComment marche la visioconference
Comment marche la visioconferenceHusseinAlarab1
 
L'entreprise 2.0 et le crowdsourcing cours ichec_sergevanoudenhove_20120322
L'entreprise 2.0 et le crowdsourcing cours ichec_sergevanoudenhove_20120322L'entreprise 2.0 et le crowdsourcing cours ichec_sergevanoudenhove_20120322
L'entreprise 2.0 et le crowdsourcing cours ichec_sergevanoudenhove_20120322Serge Van Oudenhove
 
Guide pratique e-reputationà l'usage des individus
Guide pratique e-reputationà l'usage des individusGuide pratique e-reputationà l'usage des individus
Guide pratique e-reputationà l'usage des individusActulligence Consulting
 

Tendances (16)

Blogspirit CCI Strasbourg 25 mai 2007
Blogspirit CCI Strasbourg 25 mai 2007Blogspirit CCI Strasbourg 25 mai 2007
Blogspirit CCI Strasbourg 25 mai 2007
 
Entreprise 2.0 serge van oudenhove ichec 2011
Entreprise 2.0 serge van oudenhove ichec 2011Entreprise 2.0 serge van oudenhove ichec 2011
Entreprise 2.0 serge van oudenhove ichec 2011
 
Slide presentation ideoscop-2013 v5
Slide presentation ideoscop-2013 v5Slide presentation ideoscop-2013 v5
Slide presentation ideoscop-2013 v5
 
Communautes virtuelles
Communautes virtuellesCommunautes virtuelles
Communautes virtuelles
 
Pistes enseignement Informatique et Internet
Pistes enseignement Informatique et InternetPistes enseignement Informatique et Internet
Pistes enseignement Informatique et Internet
 
Modèles et Outils Documentaires pour les Hypervidéos sur le Web
Modèles et Outils Documentaires pour les Hypervidéos sur le WebModèles et Outils Documentaires pour les Hypervidéos sur le Web
Modèles et Outils Documentaires pour les Hypervidéos sur le Web
 
Entreprise 2.0 lyonnaise des eaux
Entreprise 2.0   lyonnaise des eauxEntreprise 2.0   lyonnaise des eaux
Entreprise 2.0 lyonnaise des eaux
 
Emakina Academy - Blue Kiwi - 20070614
Emakina Academy - Blue Kiwi -  20070614Emakina Academy - Blue Kiwi -  20070614
Emakina Academy - Blue Kiwi - 20070614
 
Visioconference
Visioconference Visioconference
Visioconference
 
RSE & Orange Business
RSE & Orange BusinessRSE & Orange Business
RSE & Orange Business
 
Guide pratique e_reputation_usage_entreprises
Guide pratique e_reputation_usage_entreprisesGuide pratique e_reputation_usage_entreprises
Guide pratique e_reputation_usage_entreprises
 
Comment marche la visioconference
Comment marche la visioconferenceComment marche la visioconference
Comment marche la visioconference
 
L'entreprise 2.0 et le crowdsourcing cours ichec_sergevanoudenhove_20120322
L'entreprise 2.0 et le crowdsourcing cours ichec_sergevanoudenhove_20120322L'entreprise 2.0 et le crowdsourcing cours ichec_sergevanoudenhove_20120322
L'entreprise 2.0 et le crowdsourcing cours ichec_sergevanoudenhove_20120322
 
Intranet/extranet
Intranet/extranetIntranet/extranet
Intranet/extranet
 
Les enjeux du Poste de Travail
Les enjeux du Poste de TravailLes enjeux du Poste de Travail
Les enjeux du Poste de Travail
 
Guide pratique e-reputationà l'usage des individus
Guide pratique e-reputationà l'usage des individusGuide pratique e-reputationà l'usage des individus
Guide pratique e-reputationà l'usage des individus
 

En vedette (20)

Calidad presentacion
Calidad   presentacionCalidad   presentacion
Calidad presentacion
 
Redes sociales twitter
Redes sociales twitterRedes sociales twitter
Redes sociales twitter
 
Recursos web 2
Recursos web 2Recursos web 2
Recursos web 2
 
Investigacion andrea alvis leguia
Investigacion  andrea alvis leguiaInvestigacion  andrea alvis leguia
Investigacion andrea alvis leguia
 
Festival Imagen - MoMo Lab - Monetizacion
Festival Imagen - MoMo Lab - MonetizacionFestival Imagen - MoMo Lab - Monetizacion
Festival Imagen - MoMo Lab - Monetizacion
 
Placa base atx
Placa base atxPlaca base atx
Placa base atx
 
Tp mahiquez
Tp mahiquezTp mahiquez
Tp mahiquez
 
spec
specspec
spec
 
Practica 6
Practica 6Practica 6
Practica 6
 
Saberes hoy
Saberes hoySaberes hoy
Saberes hoy
 
Unidad iii. lectura analogica.
Unidad iii. lectura analogica.Unidad iii. lectura analogica.
Unidad iii. lectura analogica.
 
Sexpotit@
Sexpotit@Sexpotit@
Sexpotit@
 
Paneles de Eco Resina
Paneles de Eco ResinaPaneles de Eco Resina
Paneles de Eco Resina
 
Derechos de autor.
Derechos de autor.  Derechos de autor.
Derechos de autor.
 
Pract26 27-28-29
Pract26 27-28-29Pract26 27-28-29
Pract26 27-28-29
 
Dia de la mujer 2014
Dia de la mujer 2014Dia de la mujer 2014
Dia de la mujer 2014
 
La empresa familiar y los agentes de su éxito 3
La empresa familiar y los agentes de su éxito 3La empresa familiar y los agentes de su éxito 3
La empresa familiar y los agentes de su éxito 3
 
Tics y educacionnn bolggggggggggggg enviar de urgee
Tics y educacionnn bolggggggggggggg   enviar de urgeeTics y educacionnn bolggggggggggggg   enviar de urgee
Tics y educacionnn bolggggggggggggg enviar de urgee
 
Redes sociales raquel palacio
Redes sociales raquel palacioRedes sociales raquel palacio
Redes sociales raquel palacio
 
Conversiones de unidades
Conversiones de unidadesConversiones de unidades
Conversiones de unidades
 

Similaire à Support cours 1 -MAster PRANET

1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptxssusercb2b311
 
Wif 2012 : programme des conférences et ateliers
Wif 2012 : programme des conférences et ateliersWif 2012 : programme des conférences et ateliers
Wif 2012 : programme des conférences et ateliersWif
 
Kinect en moins de 10 Minutes
Kinect en moins de 10 MinutesKinect en moins de 10 Minutes
Kinect en moins de 10 MinutesMicrosoft
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2Cap'Com
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1bduverneuil
 
Intranet : définition, outils, usage, organisation
Intranet : définition, outils, usage, organisationIntranet : définition, outils, usage, organisation
Intranet : définition, outils, usage, organisationNumeriCube
 
Les métiers du design interactif (2011)
Les métiers du design interactif (2011)Les métiers du design interactif (2011)
Les métiers du design interactif (2011)designers interactifs
 
Présentation de l'agence Access Dev
Présentation de l'agence Access DevPrésentation de l'agence Access Dev
Présentation de l'agence Access DevAccess Dev
 
Cours tic complet
Cours tic completCours tic complet
Cours tic completsofixiito
 
CV // Julien Dumail
CV // Julien DumailCV // Julien Dumail
CV // Julien Dumailjuliendumail
 
Conception Et Mise En œUvre D’Une Plate Forme Edi Pour La Communaté Portuaire...
Conception Et Mise En œUvre D’Une Plate Forme Edi Pour La Communaté Portuaire...Conception Et Mise En œUvre D’Une Plate Forme Edi Pour La Communaté Portuaire...
Conception Et Mise En œUvre D’Une Plate Forme Edi Pour La Communaté Portuaire...Ojdoc Quen
 
Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009France
 
Websiteburo Corporate
Websiteburo CorporateWebsiteburo Corporate
Websiteburo Corporatewebsiteburo
 
Prefercom présentation
Prefercom présentationPrefercom présentation
Prefercom présentationLEVY REMI
 
Designers, prenez le pouvoir !
Designers, prenez le pouvoir !Designers, prenez le pouvoir !
Designers, prenez le pouvoir !David Koss
 
Guide pratique e_reputation_usage_entreprises
Guide pratique e_reputation_usage_entreprisesGuide pratique e_reputation_usage_entreprises
Guide pratique e_reputation_usage_entreprisesIdnition
 
Guide pratique e_reputation_usage_entreprises
Guide pratique e_reputation_usage_entreprisesGuide pratique e_reputation_usage_entreprises
Guide pratique e_reputation_usage_entreprisesJuliette Carrasco
 

Similaire à Support cours 1 -MAster PRANET (20)

1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx
 
Interactivite@ledna
Interactivite@lednaInteractivite@ledna
Interactivite@ledna
 
Wif 2012 : programme des conférences et ateliers
Wif 2012 : programme des conférences et ateliersWif 2012 : programme des conférences et ateliers
Wif 2012 : programme des conférences et ateliers
 
Metiers Design Numerique 2009
Metiers Design Numerique 2009Metiers Design Numerique 2009
Metiers Design Numerique 2009
 
Ux
UxUx
Ux
 
Kinect en moins de 10 Minutes
Kinect en moins de 10 MinutesKinect en moins de 10 Minutes
Kinect en moins de 10 Minutes
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
 
Intranet : définition, outils, usage, organisation
Intranet : définition, outils, usage, organisationIntranet : définition, outils, usage, organisation
Intranet : définition, outils, usage, organisation
 
Les métiers du design interactif (2011)
Les métiers du design interactif (2011)Les métiers du design interactif (2011)
Les métiers du design interactif (2011)
 
Présentation de l'agence Access Dev
Présentation de l'agence Access DevPrésentation de l'agence Access Dev
Présentation de l'agence Access Dev
 
Cours tic complet
Cours tic completCours tic complet
Cours tic complet
 
CV // Julien Dumail
CV // Julien DumailCV // Julien Dumail
CV // Julien Dumail
 
Conception Et Mise En œUvre D’Une Plate Forme Edi Pour La Communaté Portuaire...
Conception Et Mise En œUvre D’Une Plate Forme Edi Pour La Communaté Portuaire...Conception Et Mise En œUvre D’Une Plate Forme Edi Pour La Communaté Portuaire...
Conception Et Mise En œUvre D’Une Plate Forme Edi Pour La Communaté Portuaire...
 
Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009
 
Websiteburo Corporate
Websiteburo CorporateWebsiteburo Corporate
Websiteburo Corporate
 
Prefercom présentation
Prefercom présentationPrefercom présentation
Prefercom présentation
 
Designers, prenez le pouvoir !
Designers, prenez le pouvoir !Designers, prenez le pouvoir !
Designers, prenez le pouvoir !
 
Guide pratique e_reputation_usage_entreprises
Guide pratique e_reputation_usage_entreprisesGuide pratique e_reputation_usage_entreprises
Guide pratique e_reputation_usage_entreprises
 
Guide pratique e_reputation_usage_entreprises
Guide pratique e_reputation_usage_entreprisesGuide pratique e_reputation_usage_entreprises
Guide pratique e_reputation_usage_entreprises
 

Plus de Laurent Neyssensas

Support design fiction la roche
Support design fiction la rocheSupport design fiction la roche
Support design fiction la rocheLaurent Neyssensas
 
Presentation Activités PRO A3 Decembre 2013
Presentation Activités PRO A3 Decembre 2013Presentation Activités PRO A3 Decembre 2013
Presentation Activités PRO A3 Decembre 2013Laurent Neyssensas
 
Presentation innovation Week LA roche sur yon
Presentation innovation Week LA roche sur yonPresentation innovation Week LA roche sur yon
Presentation innovation Week LA roche sur yonLaurent Neyssensas
 
Conférence Ux d poitiers 201313
Conférence Ux d poitiers 201313Conférence Ux d poitiers 201313
Conférence Ux d poitiers 201313Laurent Neyssensas
 
Conférence journee numérique 2013
Conférence  journee numérique 2013Conférence  journee numérique 2013
Conférence journee numérique 2013Laurent Neyssensas
 
Le design d'aujourd'hui dans la cité de demain
Le design d'aujourd'hui dans la cité de demainLe design d'aujourd'hui dans la cité de demain
Le design d'aujourd'hui dans la cité de demainLaurent Neyssensas
 
Conf i3 c_futur_du_peripherique
Conf i3 c_futur_du_peripheriqueConf i3 c_futur_du_peripherique
Conf i3 c_futur_du_peripheriqueLaurent Neyssensas
 
Support_intervention_Green_Connected_Cities_2009
Support_intervention_Green_Connected_Cities_2009Support_intervention_Green_Connected_Cities_2009
Support_intervention_Green_Connected_Cities_2009Laurent Neyssensas
 

Plus de Laurent Neyssensas (20)

Support design fiction la roche
Support design fiction la rocheSupport design fiction la roche
Support design fiction la roche
 
Presentation Activités PRO A3 Decembre 2013
Presentation Activités PRO A3 Decembre 2013Presentation Activités PRO A3 Decembre 2013
Presentation Activités PRO A3 Decembre 2013
 
Presentation innovation Week LA roche sur yon
Presentation innovation Week LA roche sur yonPresentation innovation Week LA roche sur yon
Presentation innovation Week LA roche sur yon
 
Conférence Ux d poitiers 201313
Conférence Ux d poitiers 201313Conférence Ux d poitiers 201313
Conférence Ux d poitiers 201313
 
Design fiction
Design fictionDesign fiction
Design fiction
 
Conférence journee numérique 2013
Conférence  journee numérique 2013Conférence  journee numérique 2013
Conférence journee numérique 2013
 
Le design d'aujourd'hui dans la cité de demain
Le design d'aujourd'hui dans la cité de demainLe design d'aujourd'hui dans la cité de demain
Le design d'aujourd'hui dans la cité de demain
 
Souriez vous êtes mort !
Souriez vous êtes mort !Souriez vous êtes mort !
Souriez vous êtes mort !
 
Initiation numérique partie2
Initiation numérique partie2Initiation numérique partie2
Initiation numérique partie2
 
Initiation numérique partie1
Initiation numérique partie1Initiation numérique partie1
Initiation numérique partie1
 
Atelier#1 Renum Sénior
Atelier#1 Renum SéniorAtelier#1 Renum Sénior
Atelier#1 Renum Sénior
 
Atelier#2 Renum Sénior
Atelier#2 Renum SéniorAtelier#2 Renum Sénior
Atelier#2 Renum Sénior
 
Conf i3 c_futur_du_peripherique
Conf i3 c_futur_du_peripheriqueConf i3 c_futur_du_peripherique
Conf i3 c_futur_du_peripherique
 
Support Siggraph asie2011
Support Siggraph asie2011Support Siggraph asie2011
Support Siggraph asie2011
 
Journée numerique11
Journée numerique11Journée numerique11
Journée numerique11
 
Vr4 d design_dev
Vr4 d design_devVr4 d design_dev
Vr4 d design_dev
 
Notions ihm
Notions ihmNotions ihm
Notions ihm
 
Recherche documentaire a1
Recherche documentaire a1Recherche documentaire a1
Recherche documentaire a1
 
Support_intervention_Green_Connected_Cities_2009
Support_intervention_Green_Connected_Cities_2009Support_intervention_Green_Connected_Cities_2009
Support_intervention_Green_Connected_Cities_2009
 
Idem17_Presentation_Group5
Idem17_Presentation_Group5Idem17_Presentation_Group5
Idem17_Presentation_Group5
 

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
  • 54.
  • 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
  • 60.
  • 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
  • 71.
  • 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
  • 77.
  • 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