SlideShare une entreprise Scribd logo
DESIGN DE SERVICES




Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Origine du design de services
3. DESIGN DE SERVICES




                                Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Origine du design de services
3. DESIGN DE SERVICES




      "    Quand deux cafés se situent l'un à coté de l'autre et vendent
           exactement le même café au même prix, le design de services
           est ce qui vous incite à franchir l'une des deux portes.
           31 Volts Design Service
                                                                                                       "



                                      Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Intérêts du design de services
3. DESIGN DE SERVICES




            Approche
        globale entre les
            différents
           secteurs de
            l’industrie                   Affinage des
                                            usages                         Innovation à
                                                                            différentes
                                                                          échelles : micro
                             Projets                                         & macro
                        transversaux et
                          organisation
                            verticale




                                            Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples de designs de services
3. DESIGN DE SERVICES




                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples de designs de services
3. DESIGN DE SERVICES




                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples de designs de services
3. DESIGN DE SERVICES




                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples de designs de services                                                    Bornes Navigo
                                                                                               Attoma Design
3. DESIGN DE SERVICES




                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples de designs de services                                                                Hipmunk
                                                                                Service de gestion de trajets
3. DESIGN DE SERVICES




                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples de designs de services                                                                                              Bornes Navigo
                                                                                                                                              Attoma Design
3. DESIGN DE SERVICES




            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 de designs de services                                                                   Digitick
                                                                                     Billeterie dématérialisée
3. DESIGN DE SERVICES




                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exemples de designs de services                                                     Google Wallet
                                                                                     Mobile + Porte monnaie
3. DESIGN DE SERVICES




                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Anticipation & Prospection
3. DESIGN DE SERVICES




     Orienter des
                             Anticipation
     secteurs de
                              des usages
      l’industrie




                                           Positionnement
                                             stratégique




                                Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Partie 3 : Cycle de vie d’un projet




             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Partie 2 : Cycle de vie d’un projet
Sommaire
1. INTRODUCTION
- Place du designer
- Cadrer un projet

2. CYCLE D’UN PROJET DESIGN
- Définition & problématique
- Recherche
- Exploration
- Realisation

3. OUTILS
- txt

4. INNOVATION & CREATIVITÉ
- txt

BILAN




                 Lifecycle
                 h&p://fr.wikipedia.org/wiki/Fichier:Frog_lifecycle.jpg
                                                                          Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Acteurs d’un projets
1. INTRODUCTION




                       Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Place du Designer
1. INTRODUCTION




                    Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Cadrer un projet
1. INTRODUCTION




                   Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Titre
    Les étapes d'un projet de design
2. CYCLE D’UN PROJET 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
Définition & problématique                                                              From Scratch
2. CYCLE D’UN PROJET DESIGN




                              Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Définition & problématique                                                                Projet Client
2. CYCLE D’UN PROJET DESIGN




                              Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Exploration
2. CYCLE D’UN PROJET DESIGN




                              Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Réalisation
2. CYCLE D’UN PROJET DESIGN




                              Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Réalisation                                                                                     Front end
2. CYCLE D’UN PROJET DESIGN




           www.createlier.org
                                Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Réalisation                                                                                      Back end
2. CYCLE D’UN PROJET DESIGN




           www.createlier.org
                                Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Réalisation                                                                                          Déclinaisons
2. CYCLE D’UN PROJET DESIGN




           h&p://precious-­‐forever.com/
                                           Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Réalisation                                                                             Déclinaisons
2. CYCLE D’UN PROJET DESIGN




                              Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Réalisation                                     La plasticité des interfaces est leur capacité à s’adapter
                                                 à leur contexte dans le respect de leur utilisabilité.
Plasticité des interfaces




                            Utilisateur              Plate-Forme
                                        IHM
                                   Environnement




                                          Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Finalisation                                           Tests / Recettage / Livraison
CYCLE D’UN PROJET DESIGN




                           Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Veille créative
OUTILS




         h&p://www.netvibes.com/lecolededesign#veille_design
                                                               Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Le carnet de notes
OUTILS




                     Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Le planning
OUTILS




Dot
h&p://www.flickr.com/photos/13124525@N00/134228354
                                                    Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Le wireframing
2. OUTILS




            h&p://bit.ly/qpfdBY

                                  Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Le wireframing (exemple)
l’interface finie




“ahead” / C. Faydi et M. Denié / 2010

                                        Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Hiérarchisation des fonctions
Le wireframing (exemple)                                  Séquence de navigation
dessin                                                    Définition des interacteurs
                                                          Mise en forme des contenus




“ahead” / C. Faydi et M. Denié / 2010
                                        Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Eléments nécessaires à la réalisation de l’interface graphique
Le wireframing (exemple)                     Wireframe (gabarits)
Production                                   Mockup (maquette graphique) / Layout
                                             Préconisations et Spécifications techniques




“Subatech” / S. Mouton et A. Milien / 2010
                                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Wireframing (Pencil)
Outils               Langages (xHTML, CSS, Javascript, Php, MySql)
Production           Logiciels (Bloc notes !, Adobe DreamWeaver… Filezilla)




             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Outils
Production




             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Outils                                       http://littlebigdetails.com/
Production




             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Outils                                     http://verifyapp.com/
Production




             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Innovation ?                                                                                                Descendante
2. INNOVATION & CREATIVITÉ




« You can't just ask customers what they want and then try to
give that to them. By the time you get it built, they'll want
something new. »

Steve Jobs 2005




                                                   Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Innovation ?                                                                             Ascendante
2. INNOVATION & CREATIVITÉ




                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Innovation ?                                                                               De rupture
2. INNOVATION & CREATIVITÉ




                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Créativité ?                                                                                 Entonnoir
2. INNOVATION & CREATIVITÉ




                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Créativité ?                                                                                                    Itérative
2. INNOVATION & CREATIVITÉ




h&p://www.flickr.com/photos/ario/2284113847
                                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
I/O                                    Partie 4 : Entrées / Sorties




korean_tupperware
h&p://www.flickr.com/photos/regarde/456378850
                                                       Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Partie 1 : Introduction




.
http://www.intel.com/pressroom/innovation/archive.htm       Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Partie 1 : Introduction

Sommaire
                   1. PRINCIPE D'ENTREES SORTIES

                   2. INTERACTEURS PHYSIQUES

                   3. TRANSMISSION DE DONNEES ET GEOLOCALISATION

                   4. DETECTIONS VIDEO (computer vision)

                   5. EVOLUTIONS




.
http://www.intel.com/pressroom/innovation/archive.htm
                                                            Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties   On appelle Entrées-Sorties les échanges d'informations entre le processeur
                  et les périphériques qui lui sont associés. De la sorte, le système peut
1. Principes      réagir à des modifications de son environnement, voire le contrôler.




                                    Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Les capteurs logiques traduisent 2 états (ouvert/fermé)
Entrées Sorties                                               Les capteurs analogiques traduisent une infinité d’états.
                                                              Interrupteurs : 1 « bouton » = 1 action (on/off…)
Interacteur Physique ( à contact )
                                                              Variateurs : Potentiomètres = variation de l’effet de l’action (linéaires/rotatifs)




 h&p://www.flickr.com/photos/loneyss/5724111291/in/set-­‐72157626729246032

                                                                                  Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties                            Les capteurs permettent de récupérer, à des fins de traitement, les
                                           informations relatives à la situation courante d’un utilisateur et de
2. Interacteur Physique ( sans Contact )   l’environnement.




                                                                                                                                                “




                                                          Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties                            On trouvera sur le site « Interfaces-z » une liste exhaustive de capteurs
                                           http://www.interface-z.com/produits/index.htm
2. Interacteur Physique ( sans Contact )




                                                        Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties                                     Les transmissions de données sans fil permettent non seulement
                                                    la circulation de l’information mais également la localisation de
3. Transmission de données et géolocalisation       l’utilisateur en temps réel




http://www.flickr.com/photos/twicepix/3173645095/
                                                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties
                                                Les transmissions sont quantifiées par :
                                                leur portée: distance maximale de réception par rapport à l’émetteur (en mètres)
3. Transmission de données et géolocalisation   leur débit : quantité d’information qui peut être transportée ( bit/secondes )




                                                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties
                                                                      Le Wi Fi est une technologie basée sur la norme IEEE 802.11 qui
                                                                      concerne la mise en place de réseaux informatiques internes sans fils
                                                                      qui est devenue un moyen d’accès à haut débit.
    3. Le Wi Fi




w.flickr.com/photos/brendangates/299362817/in/photostream/lightbox/

                                                                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties
                                                                       Technologie radio courte distance conçue par Ericsson en 1994
                                                                       destiné à simplifier les connexions entre les appareils électroniques
                                                                       (7 esclaves «actifs».
3. BlueTooth




 http://www.flickr.com/photos/rickyromero/3744838397/in/photostream/
                                                                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties
                                                   Le standard Bluetooth se décompose en différentes normes
                                                   permettant d’obtenir des débits de 1 à 100 mW (Milliwatt)
                                                   soit des portée entre quelques mètres et une centaine .T
  3. BlueTooth




http://www.flickr.com/photos/yourdon/2681728522/
                                                        Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties     Un Personal Area Network ou Body Area Network désigne la
                    mise en réseau d’équipements nomades embarqués sur son
3. BlueTooth(PAN)   corps (mobile / oreillette, casques, capteurs physiologiques…)




                                                             http://www.athena-gatech.org/research/BIOMEDICAL/
                                                              index.html#Antenna%20Body%20Area%20Networks




                         Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
méthode de mémorisation et de récupération par ondes radio des données
  Entrées Sorties                                            stockées dans des « radio-étiquettes » (« RFID tag » ou «  RFID transponder).
                                                             Les tags sont collés ou incorporés dans des objets (étiquette électronique de
  Radio Frequency Identification                              type « code barre »), produits (cartes d’accès, de transport, de paiement…)




http://izationlabs.com/2009/12/22/a-body-mod-most-curious/
                                                                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties
R.F.I.D




                  Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties
                                                  donne en temps réel la localisation géographique d’un utilisateur.
                                                  A noter : Le GPS ne fonctionne qu’en extérieur !! (nécessite 4
  Global Positionning System                      satellites) / Précision de 10 à 20 mètres et de 5 à 3 mètres (DGPS)




http://www.flickr.com/photos/olibac/2415284302/
                                                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties
Récapitulatif Transmission de données et géolac




                                                                                                                       Nokia Sports Tracker (beta)



 GPS : N’importe où sur la planète… mais en extérieur !
 WiFi / GPRS : Triangulation par rapport à plusieurs bornes
 Bluetooth : Proximité de l’émetteur fr/)
 RFID : Par contact ou rapproché


                                                              Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties                                   “The Catalogue ” / Chris Oakley / 2004
                                                                                  Vidéo
Cybersurveillance




                    Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Analyse et d’interprétation en temps réel d’une image captée par une simple
Entrées Sorties                     « Webcam ». Cette technologie très abordable ouvre la voie à de nombreuses
Détection Vidéo / Computer Vision   applications de « Tracking » et d’identification telles que celles employées en RA




 Webcam Logitech
                                                      Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties                       Il existe des « bibliothèques » de composants logiciels qui permettent de détecter
                                      une forme (ici une main) et de suivre ses déplacements en temps réel.
Détection et Tracking




http://en.wikipedia.org/wiki/OpenCV
                                                          Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties        Ils permettent d’inscrire dans l’espace physique des informations
                       numériques consultables via tous types de caméras (Mobiles).
 Quick Response Code




                             Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties
 Quick Response Code




                       Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Ils permettent de capter la position d’un objet dans l’espace mais aussi son
Entrées Sorties              orientation (x,y et z). Aujourd’hui les AR Markers disparaissent au profit de
                             symboles plus simples, d’images photographiques ou encore grâce à la seule
 Augmented Reality Markers   géolocalisation & inclinaison (mobiles).




                                           Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties      « Controller-less » Kinnect par Microsoft
                     Détection de 4 joueurs, Reconnaissance faciale & vocale…
Evolution




                  Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Entrées Sorties                                            Envisager les opportunités et les possibilités techniques en amont du projet.
                                                           Proposer des principes, schéma technique…
Conclusion




http://www.flickr.com/photos/tornad3/5193474102/in/photostream/

                                                                           Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
# Architecture / Schéma de navigation
# Ergonomie
# Fonctionnalité
# Graphisme
# Bilan UX
Eye	
  Tracking	
  
h&p://www.gazehawk.com/blog/wp-­‐content/uploads/2011/08/applecomparison.png
                                                                                                                                                 PDF A3
                                                                               Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Création d’une partie galerie photo (Front End et Back End) intégré dans un site institutionnel

                 Réalisation d’une proposition d’interface graphique
                 Wireframe (gabarits)
                 Mockup (maquette graphique) / Layout
                 Préconisations et Spécifications techniques
                                                Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
Ce support est un «mash-up»
                        issu de collaborations et
                        production avec :



                        Grégoire Cliquet (lecolededesign.com - READi)
                        Florent Michel (lecolededesign.com - READi)
                        Clément Thiery (lecolededesign.com - anthitheses.com)




Illustration :   http://www.flickr.com/photos/loneyss/sets/72157609816817388/with/3667502087/ (sauf indication contraire)
                                                           Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012

Contenu connexe

En vedette

Presentacion paradoja uft
Presentacion paradoja uftPresentacion paradoja uft
Presentacion paradoja uft
Nelson Montesdeoca
 
Education
EducationEducation
Education
Yomkipour
 
Los cabos – basse californie – vues aériennes
Los cabos – basse californie – vues aériennesLos cabos – basse californie – vues aériennes
Los cabos – basse californie – vues aériennes
Le Grand Journal du Mexique
 
The University of Granada on Social Networks
The University of Granada on Social NetworksThe University of Granada on Social Networks
The University of Granada on Social Networks
Beatriz Muñoz Pérez del Pulgar
 
Début guillotine
Début guillotineDébut guillotine
Début guillotine
papydompointcom
 
Surprise Solutions Profile
Surprise Solutions ProfileSurprise Solutions Profile
Surprise Solutions Profile
Surprise Solutions
 
Publicacion de indicadores 2014
Publicacion de indicadores 2014Publicacion de indicadores 2014
Publicacion de indicadores 2014
marianlennis08
 
Equipo twitteras, grupo 5.rol del-asesor-en-línea-para-una-comunidad
Equipo twitteras, grupo 5.rol del-asesor-en-línea-para-una-comunidadEquipo twitteras, grupo 5.rol del-asesor-en-línea-para-una-comunidad
Equipo twitteras, grupo 5.rol del-asesor-en-línea-para-una-comunidad
Sector 7 Estatal Primarias
 
25ème dimanche ordinaire année b messe des familles
25ème dimanche ordinaire année b messe des familles25ème dimanche ordinaire année b messe des familles
25ème dimanche ordinaire année b messe des familles
Paroisse d'Assesse
 
Le PhéNomèNe Iphone
Le PhéNomèNe IphoneLe PhéNomèNe Iphone
Le PhéNomèNe IphoneEric Ferrari
 
V565 La première en chemin
V565 La première en cheminV565 La première en chemin
V565 La première en chemin
Paroisse d'Assesse
 
Expo proyecto 2 sampier
Expo proyecto 2 sampierExpo proyecto 2 sampier
Expo proyecto 2 sampier
Diana Quijano
 
Article Presse EndyMed - Anti Age Magazine - Avril 2011
Article Presse EndyMed - Anti Age Magazine - Avril 2011Article Presse EndyMed - Anti Age Magazine - Avril 2011
Article Presse EndyMed - Anti Age Magazine - Avril 2011
pbcom1998
 
Programme des activités MCL de Gérardmer 2014/2015
Programme des activités MCL de Gérardmer 2014/2015Programme des activités MCL de Gérardmer 2014/2015
Programme des activités MCL de Gérardmer 2014/2015
actumcl
 
Yihoud
YihoudYihoud
Yihoud
mikhoel
 
Ixatapa - Zihuatanejo
Ixatapa - ZihuatanejoIxatapa - Zihuatanejo
Ixatapa - Zihuatanejo
Le Grand Journal du Mexique
 
Art nouveau2
Art nouveau2Art nouveau2
Art nouveau2alvinne29
 
La force de_la_nature
La force de_la_natureLa force de_la_nature
La force de_la_natureSIBIOS
 
Raccourcis clavier
Raccourcis clavierRaccourcis clavier
Raccourcis clavier
Incubateur CIPMEN
 

En vedette (20)

201103Newsletter1AGEHSCPGrandsLacs
201103Newsletter1AGEHSCPGrandsLacs201103Newsletter1AGEHSCPGrandsLacs
201103Newsletter1AGEHSCPGrandsLacs
 
Presentacion paradoja uft
Presentacion paradoja uftPresentacion paradoja uft
Presentacion paradoja uft
 
Education
EducationEducation
Education
 
Los cabos – basse californie – vues aériennes
Los cabos – basse californie – vues aériennesLos cabos – basse californie – vues aériennes
Los cabos – basse californie – vues aériennes
 
The University of Granada on Social Networks
The University of Granada on Social NetworksThe University of Granada on Social Networks
The University of Granada on Social Networks
 
Début guillotine
Début guillotineDébut guillotine
Début guillotine
 
Surprise Solutions Profile
Surprise Solutions ProfileSurprise Solutions Profile
Surprise Solutions Profile
 
Publicacion de indicadores 2014
Publicacion de indicadores 2014Publicacion de indicadores 2014
Publicacion de indicadores 2014
 
Equipo twitteras, grupo 5.rol del-asesor-en-línea-para-una-comunidad
Equipo twitteras, grupo 5.rol del-asesor-en-línea-para-una-comunidadEquipo twitteras, grupo 5.rol del-asesor-en-línea-para-una-comunidad
Equipo twitteras, grupo 5.rol del-asesor-en-línea-para-una-comunidad
 
25ème dimanche ordinaire année b messe des familles
25ème dimanche ordinaire année b messe des familles25ème dimanche ordinaire année b messe des familles
25ème dimanche ordinaire année b messe des familles
 
Le PhéNomèNe Iphone
Le PhéNomèNe IphoneLe PhéNomèNe Iphone
Le PhéNomèNe Iphone
 
V565 La première en chemin
V565 La première en cheminV565 La première en chemin
V565 La première en chemin
 
Expo proyecto 2 sampier
Expo proyecto 2 sampierExpo proyecto 2 sampier
Expo proyecto 2 sampier
 
Article Presse EndyMed - Anti Age Magazine - Avril 2011
Article Presse EndyMed - Anti Age Magazine - Avril 2011Article Presse EndyMed - Anti Age Magazine - Avril 2011
Article Presse EndyMed - Anti Age Magazine - Avril 2011
 
Programme des activités MCL de Gérardmer 2014/2015
Programme des activités MCL de Gérardmer 2014/2015Programme des activités MCL de Gérardmer 2014/2015
Programme des activités MCL de Gérardmer 2014/2015
 
Yihoud
YihoudYihoud
Yihoud
 
Ixatapa - Zihuatanejo
Ixatapa - ZihuatanejoIxatapa - Zihuatanejo
Ixatapa - Zihuatanejo
 
Art nouveau2
Art nouveau2Art nouveau2
Art nouveau2
 
La force de_la_nature
La force de_la_natureLa force de_la_nature
La force de_la_nature
 
Raccourcis clavier
Raccourcis clavierRaccourcis clavier
Raccourcis clavier
 

Similaire à Support_Cours 2 Master Pranet Université Rennes 2

Acfas 13-05-2010
Acfas 13-05-2010Acfas 13-05-2010
Acfas 13-05-2010
Houda Bagané, MBA
 
Presentation overside
Presentation oversidePresentation overside
Presentation overside
Overside
 
RSE & Orange Business
RSE & Orange BusinessRSE & Orange Business
RSE & Orange Business
Orange Business Services
 
Innovative Architecture Design
Innovative Architecture DesignInnovative Architecture Design
Innovative Architecture DesignAirmis
 
Cours ergonomie des IHM web - Chapitre 1 - contexte
Cours ergonomie des IHM web - Chapitre 1 - contexteCours ergonomie des IHM web - Chapitre 1 - contexte
Cours ergonomie des IHM web - Chapitre 1 - contexte
ElodieDescharmes
 
Interactivite@ledna
Interactivite@lednaInteractivite@ledna
Interactivite@ledna
Laurent Neyssensas
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2
Cap'Com
 
AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !Agile Toulouse
 
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Ardesi Midi-Pyrénées
 
Ms project
Ms projectMs project
Ms project
Hocine Sahnoun
 
Websiteburo Corporate
Websiteburo CorporateWebsiteburo Corporate
Websiteburo Corporate
websiteburo
 
Innovation 2.0
Innovation 2.0Innovation 2.0
Innovation 2.0
AFEIT
 
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
AudéLor
 
PrésentationSoutenance.pptx
PrésentationSoutenance.pptxPrésentationSoutenance.pptx
PrésentationSoutenance.pptx
islame808
 
Batir Un Site Web 2011
Batir Un Site  Web 2011Batir Un Site  Web 2011
Batir Un Site Web 2011
Alain-Marie Carron
 
Présentation des métiers du design numérique, janvier 2009
Présentation des métiers du design numérique, janvier 2009Présentation des métiers du design numérique, janvier 2009
Présentation des métiers du design numérique, janvier 2009
designers interactifs
 
Démo des nouvelles versions Dynamics CRM, L'utilisateur au centre des innovat...
Démo des nouvelles versions Dynamics CRM, L'utilisateur au centre des innovat...Démo des nouvelles versions Dynamics CRM, L'utilisateur au centre des innovat...
Démo des nouvelles versions Dynamics CRM, L'utilisateur au centre des innovat...
Microsoft Décideurs IT
 

Similaire à Support_Cours 2 Master Pranet Université Rennes 2 (20)

Acfas 13-05-2010
Acfas 13-05-2010Acfas 13-05-2010
Acfas 13-05-2010
 
Presentation overside
Presentation oversidePresentation overside
Presentation overside
 
RSE & Orange Business
RSE & Orange BusinessRSE & Orange Business
RSE & Orange Business
 
Innovative Architecture Design
Innovative Architecture DesignInnovative Architecture Design
Innovative Architecture Design
 
Cours ergonomie des IHM web - Chapitre 1 - contexte
Cours ergonomie des IHM web - Chapitre 1 - contexteCours ergonomie des IHM web - Chapitre 1 - contexte
Cours ergonomie des IHM web - Chapitre 1 - contexte
 
Interactivite@ledna
Interactivite@lednaInteractivite@ledna
Interactivite@ledna
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2
 
3 architecte-si
3 architecte-si3 architecte-si
3 architecte-si
 
AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !
 
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
 
Presentation Ai3 V2
Presentation Ai3   V2Presentation Ai3   V2
Presentation Ai3 V2
 
Ms project
Ms projectMs project
Ms project
 
Websiteburo Corporate
Websiteburo CorporateWebsiteburo Corporate
Websiteburo Corporate
 
Innovation 2.0
Innovation 2.0Innovation 2.0
Innovation 2.0
 
B7 saa s_inopad
B7 saa s_inopadB7 saa s_inopad
B7 saa s_inopad
 
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
 
PrésentationSoutenance.pptx
PrésentationSoutenance.pptxPrésentationSoutenance.pptx
PrésentationSoutenance.pptx
 
Batir Un Site Web 2011
Batir Un Site  Web 2011Batir Un Site  Web 2011
Batir Un Site Web 2011
 
Présentation des métiers du design numérique, janvier 2009
Présentation des métiers du design numérique, janvier 2009Présentation des métiers du design numérique, janvier 2009
Présentation des métiers du design numérique, janvier 2009
 
Démo des nouvelles versions Dynamics CRM, L'utilisateur au centre des innovat...
Démo des nouvelles versions Dynamics CRM, L'utilisateur au centre des innovat...Démo des nouvelles versions Dynamics CRM, L'utilisateur au centre des innovat...
Démo des nouvelles versions Dynamics CRM, L'utilisateur au centre des innovat...
 

Plus de Laurent Neyssensas

Support design fiction la roche
Support design fiction la rocheSupport design fiction la roche
Support design fiction la roche
Laurent 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 yon
Laurent Neyssensas
 
Conférence Ux d poitiers 201313
Conférence Ux d poitiers 201313Conférence Ux d poitiers 201313
Conférence Ux d poitiers 201313
Laurent Neyssensas
 
Conférence journee numérique 2013
Conférence  journee numérique 2013Conférence  journee numérique 2013
Conférence journee numérique 2013
Laurent 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 demain
Laurent Neyssensas
 
Souriez vous êtes mort !
Souriez vous êtes mort !Souriez vous êtes mort !
Souriez vous êtes mort !
Laurent Neyssensas
 
Initiation numérique partie2
Initiation numérique partie2Initiation numérique partie2
Initiation numérique partie2
Laurent Neyssensas
 
Initiation numérique partie1
Initiation numérique partie1Initiation numérique partie1
Initiation numérique partie1
Laurent Neyssensas
 
Atelier#1 Renum Sénior
Atelier#1 Renum SéniorAtelier#1 Renum Sénior
Atelier#1 Renum Sénior
Laurent Neyssensas
 
Atelier#2 Renum Sénior
Atelier#2 Renum SéniorAtelier#2 Renum Sénior
Atelier#2 Renum Sénior
Laurent Neyssensas
 
Conf i3 c_futur_du_peripherique
Conf i3 c_futur_du_peripheriqueConf i3 c_futur_du_peripherique
Conf i3 c_futur_du_peripherique
Laurent Neyssensas
 
Support Siggraph asie2011
Support Siggraph asie2011Support Siggraph asie2011
Support Siggraph asie2011
Laurent Neyssensas
 
Journée numerique11
Journée numerique11Journée numerique11
Journée numerique11
Laurent Neyssensas
 
Vr4 d design_dev
Vr4 d design_devVr4 d design_dev
Vr4 d design_dev
Laurent Neyssensas
 
Notions ihm
Notions ihmNotions ihm
Notions ihm
Laurent Neyssensas
 
Recherche documentaire a1
Recherche documentaire a1Recherche documentaire a1
Recherche documentaire a1
Laurent Neyssensas
 
Support_intervention_Green_Connected_Cities_2009
Support_intervention_Green_Connected_Cities_2009Support_intervention_Green_Connected_Cities_2009
Support_intervention_Green_Connected_Cities_2009
Laurent Neyssensas
 
Idem17_Presentation_Group5
Idem17_Presentation_Group5Idem17_Presentation_Group5
Idem17_Presentation_Group5
Laurent 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 2 Master Pranet Université Rennes 2

  • 1. DESIGN DE SERVICES Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 2. Origine du design de services 3. DESIGN DE SERVICES Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 3. Origine du design de services 3. DESIGN DE SERVICES " Quand deux cafés se situent l'un à coté de l'autre et vendent exactement le même café au même prix, le design de services est ce qui vous incite à franchir l'une des deux portes. 31 Volts Design Service " Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 4. Intérêts du design de services 3. DESIGN DE SERVICES Approche globale entre les différents secteurs de l’industrie Affinage des usages Innovation à différentes échelles : micro Projets & macro transversaux et organisation verticale Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 5. Exemples de designs de services 3. DESIGN DE SERVICES Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 6. Exemples de designs de services 3. DESIGN DE SERVICES Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 7. Exemples de designs de services 3. DESIGN DE SERVICES Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 8. Exemples de designs de services Bornes Navigo Attoma Design 3. DESIGN DE SERVICES Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 9.
  • 10. Exemples de designs de services Hipmunk Service de gestion de trajets 3. DESIGN DE SERVICES Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 11. Exemples de designs de services Bornes Navigo Attoma Design 3. DESIGN DE SERVICES 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
  • 12. Exemples de designs de services Digitick Billeterie dématérialisée 3. DESIGN DE SERVICES Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 13. Exemples de designs de services Google Wallet Mobile + Porte monnaie 3. DESIGN DE SERVICES Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 14. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 15. Anticipation & Prospection 3. DESIGN DE SERVICES Orienter des Anticipation secteurs de des usages l’industrie Positionnement stratégique Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 16. Partie 3 : Cycle de vie d’un projet Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 17. Partie 2 : Cycle de vie d’un projet Sommaire 1. INTRODUCTION - Place du designer - Cadrer un projet 2. CYCLE D’UN PROJET DESIGN - Définition & problématique - Recherche - Exploration - Realisation 3. OUTILS - txt 4. INNOVATION & CREATIVITÉ - txt BILAN Lifecycle h&p://fr.wikipedia.org/wiki/Fichier:Frog_lifecycle.jpg Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 18. Acteurs d’un projets 1. INTRODUCTION Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 19. Place du Designer 1. INTRODUCTION Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 20. Cadrer un projet 1. INTRODUCTION Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 21. Titre Les étapes d'un projet de design 2. CYCLE D’UN PROJET 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
  • 22. Définition & problématique From Scratch 2. CYCLE D’UN PROJET DESIGN Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 23. Définition & problématique Projet Client 2. CYCLE D’UN PROJET DESIGN Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 24. Exploration 2. CYCLE D’UN PROJET DESIGN Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 25. Réalisation 2. CYCLE D’UN PROJET DESIGN Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 26. Réalisation Front end 2. CYCLE D’UN PROJET DESIGN www.createlier.org Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 27. Réalisation Back end 2. CYCLE D’UN PROJET DESIGN www.createlier.org Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 28. Réalisation Déclinaisons 2. CYCLE D’UN PROJET DESIGN h&p://precious-­‐forever.com/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 29. Réalisation Déclinaisons 2. CYCLE D’UN PROJET DESIGN Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 30. Réalisation La plasticité des interfaces est leur capacité à s’adapter à leur contexte dans le respect de leur utilisabilité. Plasticité des interfaces Utilisateur Plate-Forme IHM Environnement Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 31. Finalisation Tests / Recettage / Livraison CYCLE D’UN PROJET DESIGN Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 32. Veille créative OUTILS h&p://www.netvibes.com/lecolededesign#veille_design Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 33. Le carnet de notes OUTILS Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 34. Le planning OUTILS Dot h&p://www.flickr.com/photos/13124525@N00/134228354 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 35. Le wireframing 2. OUTILS h&p://bit.ly/qpfdBY Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 36. Le wireframing (exemple) l’interface finie “ahead” / C. Faydi et M. Denié / 2010 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 37. Hiérarchisation des fonctions Le wireframing (exemple) Séquence de navigation dessin Définition des interacteurs Mise en forme des contenus “ahead” / C. Faydi et M. Denié / 2010 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 38. Eléments nécessaires à la réalisation de l’interface graphique Le wireframing (exemple) Wireframe (gabarits) Production Mockup (maquette graphique) / Layout Préconisations et Spécifications techniques “Subatech” / S. Mouton et A. Milien / 2010 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 39. Wireframing (Pencil) Outils Langages (xHTML, CSS, Javascript, Php, MySql) Production Logiciels (Bloc notes !, Adobe DreamWeaver… Filezilla) Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 40. Outils Production Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 41. Outils http://littlebigdetails.com/ Production Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 42. Outils http://verifyapp.com/ Production Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 43. Innovation ? Descendante 2. INNOVATION & CREATIVITÉ « You can't just ask customers what they want and then try to give that to them. By the time you get it built, they'll want something new. » Steve Jobs 2005 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 44. Innovation ? Ascendante 2. INNOVATION & CREATIVITÉ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 45. Innovation ? De rupture 2. INNOVATION & CREATIVITÉ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 46. Créativité ? Entonnoir 2. INNOVATION & CREATIVITÉ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 47. Créativité ? Itérative 2. INNOVATION & CREATIVITÉ h&p://www.flickr.com/photos/ario/2284113847 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 48. I/O Partie 4 : Entrées / Sorties korean_tupperware h&p://www.flickr.com/photos/regarde/456378850 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 49. Partie 1 : Introduction . http://www.intel.com/pressroom/innovation/archive.htm Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 50. Partie 1 : Introduction Sommaire 1. PRINCIPE D'ENTREES SORTIES 2. INTERACTEURS PHYSIQUES 3. TRANSMISSION DE DONNEES ET GEOLOCALISATION 4. DETECTIONS VIDEO (computer vision) 5. EVOLUTIONS . http://www.intel.com/pressroom/innovation/archive.htm Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 51. Entrées Sorties On appelle Entrées-Sorties les échanges d'informations entre le processeur et les périphériques qui lui sont associés. De la sorte, le système peut 1. Principes réagir à des modifications de son environnement, voire le contrôler. Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 52. Les capteurs logiques traduisent 2 états (ouvert/fermé) Entrées Sorties Les capteurs analogiques traduisent une infinité d’états. Interrupteurs : 1 « bouton » = 1 action (on/off…) Interacteur Physique ( à contact ) Variateurs : Potentiomètres = variation de l’effet de l’action (linéaires/rotatifs) h&p://www.flickr.com/photos/loneyss/5724111291/in/set-­‐72157626729246032 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 53. Entrées Sorties Les capteurs permettent de récupérer, à des fins de traitement, les informations relatives à la situation courante d’un utilisateur et de 2. Interacteur Physique ( sans Contact ) l’environnement. “ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 54. Entrées Sorties On trouvera sur le site « Interfaces-z » une liste exhaustive de capteurs http://www.interface-z.com/produits/index.htm 2. Interacteur Physique ( sans Contact ) Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 55. Entrées Sorties Les transmissions de données sans fil permettent non seulement la circulation de l’information mais également la localisation de 3. Transmission de données et géolocalisation l’utilisateur en temps réel http://www.flickr.com/photos/twicepix/3173645095/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 56. Entrées Sorties Les transmissions sont quantifiées par : leur portée: distance maximale de réception par rapport à l’émetteur (en mètres) 3. Transmission de données et géolocalisation leur débit : quantité d’information qui peut être transportée ( bit/secondes ) Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 57. Entrées Sorties Le Wi Fi est une technologie basée sur la norme IEEE 802.11 qui concerne la mise en place de réseaux informatiques internes sans fils qui est devenue un moyen d’accès à haut débit. 3. Le Wi Fi w.flickr.com/photos/brendangates/299362817/in/photostream/lightbox/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 58. Entrées Sorties Technologie radio courte distance conçue par Ericsson en 1994 destiné à simplifier les connexions entre les appareils électroniques (7 esclaves «actifs». 3. BlueTooth http://www.flickr.com/photos/rickyromero/3744838397/in/photostream/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 59. Entrées Sorties Le standard Bluetooth se décompose en différentes normes permettant d’obtenir des débits de 1 à 100 mW (Milliwatt) soit des portée entre quelques mètres et une centaine .T 3. BlueTooth http://www.flickr.com/photos/yourdon/2681728522/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 60. Entrées Sorties Un Personal Area Network ou Body Area Network désigne la mise en réseau d’équipements nomades embarqués sur son 3. BlueTooth(PAN) corps (mobile / oreillette, casques, capteurs physiologiques…) http://www.athena-gatech.org/research/BIOMEDICAL/ index.html#Antenna%20Body%20Area%20Networks Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 61. méthode de mémorisation et de récupération par ondes radio des données Entrées Sorties stockées dans des « radio-étiquettes » (« RFID tag » ou «  RFID transponder). Les tags sont collés ou incorporés dans des objets (étiquette électronique de Radio Frequency Identification type « code barre »), produits (cartes d’accès, de transport, de paiement…) http://izationlabs.com/2009/12/22/a-body-mod-most-curious/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 62. Entrées Sorties R.F.I.D Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 63. Entrées Sorties donne en temps réel la localisation géographique d’un utilisateur. A noter : Le GPS ne fonctionne qu’en extérieur !! (nécessite 4 Global Positionning System satellites) / Précision de 10 à 20 mètres et de 5 à 3 mètres (DGPS) http://www.flickr.com/photos/olibac/2415284302/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 64. Entrées Sorties Récapitulatif Transmission de données et géolac Nokia Sports Tracker (beta) GPS : N’importe où sur la planète… mais en extérieur ! WiFi / GPRS : Triangulation par rapport à plusieurs bornes Bluetooth : Proximité de l’émetteur fr/) RFID : Par contact ou rapproché Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 65. Entrées Sorties “The Catalogue ” / Chris Oakley / 2004 Vidéo Cybersurveillance Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 66. Analyse et d’interprétation en temps réel d’une image captée par une simple Entrées Sorties « Webcam ». Cette technologie très abordable ouvre la voie à de nombreuses Détection Vidéo / Computer Vision applications de « Tracking » et d’identification telles que celles employées en RA Webcam Logitech Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 67. Entrées Sorties Il existe des « bibliothèques » de composants logiciels qui permettent de détecter une forme (ici une main) et de suivre ses déplacements en temps réel. Détection et Tracking http://en.wikipedia.org/wiki/OpenCV Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 68. Entrées Sorties Ils permettent d’inscrire dans l’espace physique des informations numériques consultables via tous types de caméras (Mobiles). Quick Response Code Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 69. Entrées Sorties Quick Response Code Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 70. Ils permettent de capter la position d’un objet dans l’espace mais aussi son Entrées Sorties orientation (x,y et z). Aujourd’hui les AR Markers disparaissent au profit de symboles plus simples, d’images photographiques ou encore grâce à la seule Augmented Reality Markers géolocalisation & inclinaison (mobiles). Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 71. Entrées Sorties « Controller-less » Kinnect par Microsoft Détection de 4 joueurs, Reconnaissance faciale & vocale… Evolution Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 72. Entrées Sorties Envisager les opportunités et les possibilités techniques en amont du projet. Proposer des principes, schéma technique… Conclusion http://www.flickr.com/photos/tornad3/5193474102/in/photostream/ Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 73. # Architecture / Schéma de navigation # Ergonomie # Fonctionnalité # Graphisme # Bilan UX Eye  Tracking   h&p://www.gazehawk.com/blog/wp-­‐content/uploads/2011/08/applecomparison.png PDF A3 Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 74. Création d’une partie galerie photo (Front End et Back End) intégré dans un site institutionnel Réalisation d’une proposition d’interface graphique Wireframe (gabarits) Mockup (maquette graphique) / Layout Préconisations et Spécifications techniques Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012
  • 75. Ce support est un «mash-up» issu de collaborations et production avec : Grégoire Cliquet (lecolededesign.com - READi) Florent Michel (lecolededesign.com - READi) Clément Thiery (lecolededesign.com - anthitheses.com) Illustration : http://www.flickr.com/photos/loneyss/sets/72157609816817388/with/3667502087/ (sauf indication contraire) Laurent Neyssensas Master Communication- PRANET : «Internet et design» Février 2012