Support_Cours 2 Master Pranet Université Rennes 2

DESIGN DE SERVICES

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

Origine du design de services
3. DESIGN DE SERVICES


Origine du 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
"


Intérêts du design de services

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


Exemples de designs de services


Exemples de designs de services Bornes Navigo
Attoma Design


Exemples de designs de services Hipmunk
Service de gestion de trajets


Exemples de designs de services Bornes Navigo
Attoma Design

App
Store A1-‐
ATELIER
DESIGN
D’INTERACTIVITE
2011-‐2012
h&p://www.ﬂickr.com/photos/crisFano_be&a/2909483129 F.Michel - L. Neyssensas - C.Thiery

Exemples de designs de services Digitick
Billeterie dématérialisée


Exemples de designs de services Google Wallet
Mobile + Porte monnaie


Anticipation & Prospection

Orienter des
Anticipation
secteurs de
des usages
l’industrie

Positionnement
stratégique


Partie 3 : Cycle de vie d’un projet


Partie 2 : Cycle de vie d’un projet
Sommaire
1. INTRODUCTION
- Place du designer
- Cadrer un projet

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

3. OUTILS
- txt

4. INNOVATION & CREATIVITÉ
- txt

BILAN

Lifecycle
h&p://fr.wikipedia.org/wiki/Fichier:Frog_lifecycle.jpg

Acteurs d’un projets
1. INTRODUCTION


Place du Designer
1. INTRODUCTION


Cadrer un projet
1. INTRODUCTION


Titre
Les étapes d'un projet de design

Implémentation
Problématique Recherche Exploration Réalisation Développement
& mise en ligne

Architecture de
Déﬁnition 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

Raﬃnement 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


Déﬁnition & problématique From Scratch


Déﬁnition & problématique Projet Client


Exploration


Réalisation


Réalisation Front end

www.createlier.org

Réalisation Back end

www.createlier.org

Réalisation Déclinaisons

h&p://precious-‐forever.com/

Réalisation Déclinaisons


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


Finalisation Tests / Recettage / Livraison
CYCLE D’UN PROJET DESIGN


Veille créative
OUTILS

h&p://www.netvibes.com/lecolededesign#veille_design

Le carnet de notes
OUTILS


Le planning
OUTILS

Dot
h&p://www.ﬂickr.com/photos/13124525@N00/134228354

Le wireframing
2. OUTILS

h&p://bit.ly/qpfdBY


Le wireframing (exemple)
l’interface ﬁnie

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


Hiérarchisation des fonctions
Le wireframing (exemple) Séquence de navigation
dessin Déﬁnition des interacteurs
Mise en forme des contenus

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

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éciﬁcations techniques

“Subatech” / S. Mouton et A. Milien / 2010

Wireframing (Pencil)
Outils Langages (xHTML, CSS, Javascript, Php, MySql)
Production Logiciels (Bloc notes !, Adobe DreamWeaver… Filezilla)


Outils
Production


Outils http://littlebigdetails.com/
Production


Outils http://verifyapp.com/
Production


Innovation ? Descendante

« 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


Innovation ? Ascendante


Innovation ? De rupture


Créativité ? Entonnoir


Créativité ? Itérative

h&p://www.ﬂickr.com/photos/ario/2284113847

I/O Partie 4 : Entrées / Sorties

korean_tupperware
h&p://www.ﬂickr.com/photos/regarde/456378850

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

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 modiﬁcations de son environnement, voire le contrôler.


Les capteurs logiques traduisent 2 états (ouvert/fermé)
Entrées Sorties Les capteurs analogiques traduisent une inﬁnité 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.ﬂickr.com/photos/loneyss/5724111291/in/set-‐72157626729246032


Entrées Sorties Les capteurs permettent de récupérer, à des ﬁns de traitement, les
informations relatives à la situation courante d’un utilisateur et de
2. Interacteur Physique ( sans Contact ) l’environnement.

“


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 )


Entrées Sorties Les transmissions de données sans ﬁl 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/

Entrées Sorties
Les transmissions sont quantiﬁé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 )


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 ﬁls
qui est devenue un moyen d’accès à haut débit.
3. Le Wi Fi

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


Entrées Sorties
Technologie radio courte distance conçue par Ericsson en 1994
destiné à simpliﬁer les connexions entre les appareils électroniques
(7 esclaves «actifs».
3. BlueTooth

http://www.flickr.com/photos/rickyromero/3744838397/in/photostream/

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/

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


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 Identiﬁcation type « code barre »), produits (cartes d’accès, de transport, de paiement…)

http://izationlabs.com/2009/12/22/a-body-mod-most-curious/

Entrées Sorties
R.F.I.D


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/

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é


Entrées Sorties “The Catalogue ” / Chris Oakley / 2004
Vidéo
Cybersurveillance


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’identiﬁcation telles que celles employées en RA

Webcam Logitech

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

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


Entrées Sorties
Quick Response Code


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 proﬁt de
symboles plus simples, d’images photographiques ou encore grâce à la seule
Augmented Reality Markers géolocalisation & inclinaison (mobiles).


Entrées Sorties « Controller-less » Kinnect par Microsoft
Détection de 4 joueurs, Reconnaissance faciale & vocale…
Evolution


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.ﬂickr.com/photos/tornad3/5193474102/in/photostream/


# 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

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éciﬁcations techniques

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.ﬂickr.com/photos/loneyss/sets/72157609816817388/with/3667502087/ (sauf indication contraire)

Support_Cours 2 Master Pranet Université Rennes 2

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Support_Cours 2 Master Pranet Université Rennes 2

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

Plus de Laurent Neyssensas

Plus de Laurent Neyssensas (20)

Support_Cours 2 Master Pranet Université Rennes 2