Support cours 1 -MAster PRANET

!

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

?
présentation

( )
Enseignant et Responsable Veille Technologies Réseaux L’école de design Nantes Atlantique
Design Interactivité
Images Histoires IUT de la Roche sur Yon
Gestion de projet collaboratif
Usages
...
Arts Ping

Designer
Sommaire
<
Design > Interactivité
Designer > d’interactivité
Designer > Internet > Web
Interfaces > histoire >
Humain > Machine
Humain > Système
Humain > environnement
Réalité > virtuelle
> augmentée
> mixte
Evolutions > afﬁchage
> outils
> métier
Etapes > conception

> ?...


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

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éﬁnitions
* Il a pour ﬁnalité 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


Interactivité et interaction Adopter une conception restrictive de l’interactivité :
- Interaction : relation Humain - Humain
Confusions et déﬁnitions
- Interactivité : relation Humain - Machine


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)


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


Quel métier ? Les proﬁls recherchés par l’entreprise
en ce moment sont des graphistes !


les 3 questions de


Interaction Design Process


Internet et le Web Un environnement en perpétuel évolution.


Internet / Arpanet Les proﬁls recherchés par l’entreprise
1969 en ce moment sont des Rober Khan
Vinton Cerf et graphistes !


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


Internet / TCP /IP


Internet / Adresse IP Adresse physique : «IP» 172.26.100.126

"
IP-‐Adresse
als
Des.na.onsangabe?
"
h5p://www.ﬂickr.com/photos/lender/3220610925/sizes/o/in/photostream/

Internet / Routage


Internet / Users

http://www.ipligence.com/worldmap/

Web 2.0
Avant les réseaux sociaux


Web 2.0 / Front End


Web 2.0 / Back End


Web 2.0 / Wikipédia

http://fr.wikipedia.org/wiki/Universit%C3%A9_Rennes_2

Web 2.0 / Realy Simple Syndication


Web 2.0 / Partage et Rich Media


Web 2.0 / Commentaires, Tags et Folksonomie


Web 2.0 / Réseaux Sociaux

http://cpbotha.net/wp-content/uploads/2011/05/cpbotha_linkedin_network_20110522.jpg

Web 2.0 / Mash Up


Partie 2 : Interfaces et services

Clic
h&p://www.gizmodo.fr/wp-‐content/uploads/2011/08/Fotolia_22355574_SubscripFon_XXL.jpg

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

INTRODUCTION & NOTIONS DE BASE

Clic

Interface ? Permettre le dialogue entre deux systèmes.


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


Interface ? Interface Utilisateur
1. INTRODUCTION & NOTIONS DE BASE GUI : Graphical User Interface


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


Paradigmes utilisés Ligne de commandes
Graphical User Interface
CLI VS GUI


Paradigmes utilisés
WIMP

WIMP


W.I.M.P / Windows


W.I.M.P / Icons

h&p://1.bp.blogspot.com/-‐4kZQLWGelgk/Tck1PvAn6aI/AAAAAAAAAiI/Y-‐-‐uEnqReJ4/s1600/pppp.jpg


W.I.M.P / Menus


W.I.M.P / Pointing Devices

W.I.M.P.
Windows / Icons / Menus / Pointing Devices



W.I.M.P.
Windows / Icons / Menus / Pointing Devices


Paradigmes utilisés What You See.. Is What you Get
WYSIWYG


Service ? Implique une solution globale, un écosystème d’interfaces
basé sur la compréhension du comportement des usagers
Design de service


UX & bêta perpétuelle
UX / Expérience utilisateur

Nintendo
Wii
Commercial

UX & bêta perpétuelle
Bêta perpetuelle


INTERFACES & INTERACTIONS

Clic

L’importance du design dans les interfaces
Technologie / Usages / Besoins

Call
of
Duty
Elite

Concept - Fonctionnalités
Eléments constitutifs d’une interface Architecture - Contenu
Interactions - Graphisme

Windows
8

Eléments constitutifs d’une interface Ce que l’on crée
USAGES

Windows
8

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

Exemples d’interfaces Google Reader
Web : Information


Exemples d’interfaces Netvibes
Web : Information


Exemples d’interfaces Deezer
Web : Browser Application


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 d’interfaces Songza
Web : Browser Application


Exemples d’interfaces Monet 2010
Web : Expérience


Exemples d’interfaces Facebook
Web : social networking


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 d’interfaces GoingToRain
Web : Service météo


Exemples d’interfaces XBOX


Exemples d’interfaces Shazam
Mobile : outil


Exemples d’interfaces Convertbot
Mobile : outil


Exemples d’interfaces Amplitube
Tablet : Création Musicale


Exemples d’interfaces Weather Station Pro
Tablet : Outil


Exemples d’interfaces Microsoft Surface
Table tactile : démonstrateur


Exemples d’interfaces Catalogue de gestes

http://gesturecons.com/

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


Le papier Le dénominateur commun à tous les designers et base de toute réﬂexion créative

Paper
Wireframes
h&p://www.ian-‐thomas.net/wp-‐content/uploads/2011/02/Wireframing-‐revised-‐homepage.jpg

Innovation dans les interfaces
Les apports de la SF

Minority
Report


Les apports de la SF

John
Underkoﬄer
at
TED’s
conference
h&p://www.ted.com/talks/john_underkoﬄer_drive_3d_data_with_a_gesture.html

Innovation dans les interfaces Head Up Display
Les apports des jeux vidéo


Les apports des jeux vidéo


Les apports de la gamiﬁcation Les badges de Foursquare
Utilisation des mécanismes du jeu pour inciter à l’utilisation


Les apports de la gamiﬁcation Epic Win
Une To Do List sous forme d’un RPG


Les apports de la gamiﬁcation Carwings + Nissan Leaf
Utilisation des mécanismes du jeu
2. INTERFACES & INTERACTIONS pour inciter la conduite écolo


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

Langages et paradigmes futurs Interfaces gestuelles naturelles
Un langage corporel pour manipuler les éléments virtuels

Sixthsense
h&p://www.pranavmistry.com/projects/sixthsense/images/full/sixthsense04.jpg

Langages et paradigmes futurs Interfaces gestuelles physiques
Le problème du feedback


Support cours 1 -MAster PRANET

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (16)

Destaque

Destaque (20)

Semelhante a Support cours 1 -MAster PRANET

Semelhante a Support cours 1 -MAster PRANET (20)

Mais de Laurent Neyssensas

Mais de Laurent Neyssensas (20)

Support cours 1 -MAster PRANET