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
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
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