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