Voici le ppt qui accompagne mon intervention en 4e année de l'école Maryse Eloy. On y aborde les nouveaux usages, l'ergonomie, les méthodes de conception et quelques tendances...

1. LE DESIGN
NUMERIQUE
A short introduction to

2. Je m’appelle Marc-André et je travaille depuis plus de 20
ans dans le monde de la communication. J’ai débuté comme
directeur artistique dans les grandes agences. Parallèlement,
j’ai été un des pionniers de l’infographie en France et j’ai
connu les débuts du design numérique (télématique). J’ai
ouvert deux studios spécialisés dans la création graphique
« print » : Bleu Petrol et Public Image Factory. Je suis
actuellement à la tête du studio i-breed spécialisé dans le
design numérique… »
« Hello !

3. Le Web a évolué. On estime que depuis
2004,
il est entré dans ce que certains spécialistes
appellent sa version 2.
Au départ (dans sa version 1), la plupart
des pages Web disponibles étaient surtout
statiques et peu remises à jour.
Avec l’apparition du haut débit et de meilleures
installations, avec de meilleurs ordinateurs,
le Web s’oriente définitivement vers une plus grande
interaction avec l’utilisateur.
Au début était le Web 1.0

4. Un peu d’histoire !
1971 > 1er email (@)
1978 > 1er spam
1981 > 1er virus
1985 > .com
1990 > www
1992 > 1er email « formaté »
• > Flash et hotmail
• > Google
• > Wikipedia
2004 > Facebook

5. Notons qu’internet
est un réseau
en étoile…

6. Par lequel du code est transmis

7. Puis finalement être interprété
par notre navigateur :

8. >> Le Web 1.0 :
• des pages statiques
• un simple report des pages papiers
• peu d’interactivité
• de longs temps de chargement
• du matériel informatique préhistorique
• un « tuyau » étroit
• un temps de connection « coûteux »
LE WEB 1.0 = LA TELEVISION
« un diffuseur vers n utilisateurs, chaque contenu est optimisé
pour plaire au plus grand nombre car le temps de diffusion est
limité, l’interaction est faible. »

9. Bref, le Web 1.0
est toujours d’actualité…

10. Depuis 2001 et l’explosion
de la « bulle internet »,
le Web évolue et est entré
dans sa deuxième version…
Le choix du « 2.0 » n’est pas anodin !
Le terme « Web 2.0 » a été utilisé pour la première fois en 2004
par Dale Dougherty

11. Petite leçon de langage numérique
à l’usage de ceux qui veulent briller
dans les soirées mondaines en ville :
On ne dit pas :
« Web deux points zéro »
Mais bien :
« Web deux points »
Ou mieux encore :
« Web : »

12. Le WEB 2.0 est le marronnier
de la presse française…

13. « Le Web 2.0 c’est tout simplement
l’internet d’aujourd’hui, c’est à dire le…
Ce que… Enfin… Le, le, enfin sur quoi
surfent tous les français, moi comme les
autres (…) C’est à dire internet
d’aujourd’hui ! »
A la question « Qu’est-ce que le
Web 2.0 ? » posé par un
journaliste de BFM, Frédéric
Lefebvre, l'un des ex-porte-
paroles de l'UMP répondait (il y
a 4 ans) de cette façon :

14. >> Mais c’est quoi alors, le Web 2.0 ?
Si le Web n’a pas changé, son contenu,
lui, évolue. On admet généralement qu'un
site ou une application Web est Web 2.0
lorsque :
• Elle repose sur le partage
des informations ou des données
• Les standards sont respectés*
• Il existe une dimension sociale
* soit des technologies standards recommandées par le W3C :
html, Xhtml, feuilles de style, Ajax… Etc. Le site peut être utilisé
d’un navigateur standard !

15. >> Et le Web 2.0 est arrivé…
Le Web s’oriente définitivement vers une plus
grande interaction avec l’utilisateur, ou entre
utilisateurs. La notion de groupe, de réseau
est au cœur du Web 2.0
« Qu’est -ce que le Web 2.0 ?»
par Tim O’Reilly
(article fondateur)

16. Google versus Netscape

17. = service
« Le service s’améliore quand le nombre
de ses utilisateurs augmente ».
Cette dimension communautaire est une spécificité du
Web 2.0.
Si possible gratuit !

18. • 90 % des foyers français utilisent Google
• + de 67% de parts de marché au niveau mondial
(devant Yahoo, Baidu, Bing…etc)
90%

19. >> 7 critères pour un Web 2.0
• Offrir un service,
• Disposer de données uniques
qui vont s’accroître et s’enrichir
à mesure de leur utilisation,

20. 7 critères pour un Web vraiment 2.0
• Considérer les utilisateurs comme
des co-développeurs,
• Tirer parti de l’intelligence collective,
• Toucher le marché jusque dans sa
longue traîne,
Seul, le cycliste ira beaucoup
moins loin qu’un peloton dûment
constitué où physiquement
chaque individu créera un effet
d’aspiration sur son voisin.
Plutôt que de vendre massivement un
produit en grande quantité dans un lieu
unique de vente, on vend une multitude de
produits en petite quantité via une
multitude de réseaux. C’est notamment la
raison de la réussite de sites comme
Amazon.

21. 7 critères pour un Web vraiment 2.0
La longue traine et le monde de l’édition…

23. 7 critères pour un Web enfin 2.0
• Libérer le logiciel du seul PC
en visant notamment le nomadisme
et les « devices » adaptés (pda,
smartphones, portables…),
• Offrir de la souplesse dans les
interfaces utilisateurs, les modèles
de développement et les modèles
de gestion.

24. Mais attention, le nomadisme démultiplie
les contraintes en terme de design !

25. >> le Web 2.0 crée de nouveaux
usages, des nouveaux outils…
• Le succès de sites Web 2.0 crée de nouveaux
usages et de nouveaux standards
(Soit des habitudes communes à un groupe, en l’occurrence ici les
internautes) LE DESIGN DOIT ACCOMPAGNER CES STANDARDS
• On apprend en même temps que l’on découvre
ces nouveaux services
LE DESIGN DOIT ENCADRER CET APPRENTISSAGE
• Jour après jour, les technologies se démultiplient
LE DESIGN DOIT S’ADAPTER AUX CONTRAINTES
Du fait de ce dernier point….

26. Le design
numérique
donne encore
(et pour l’instant)
le lead à
la technique

27. En gros, on est passé de :

28. À… Et ce en moins de 25 ans

29. Du fait de ses contraintes, le Web 2.0 crée une esthétique

30. Qui colonise notre quotidien numérique… et donne un sens
différent à la « beauté » graphique !
Google est ressenti comme « beau » car pratique, voir
reposant…

32. Le Web 2.0, c’est aussi le Web
des « services »
Google est le champion des services « gratuits »
• Le moteur de recherche :
- Utilisé par 91% des internautes français
- 1 000 Milliards de page indexées
- 2,5 Milliards / requête Jour
• le navigateur : Google Chrome
• Google desktop
• Google documents
• Google pack (11 applications gratuites)
• Google Alerte
• Google reader (flux rss)
• Google Earth et Map

33. Le Web 2.0, c’est aussi le Web
des « services »
Google est le champion des services « gratuits »
• Google Books
• Google Analytics
• Google talk
• Google Groupes
• Picasa
• YouTube
• Google Sites
• Le Smartphone Android
• Google Labs :
- Google Image Swirl
- Google fast flip
- Google Wave
- Etc…

34. Service ou non, la guerre du contenu
a commencé !
• Il y a plus de 40 millions d’internautes en France
(pour 65 millions d’habitants),
• Depuis 1990, le prix moyen des micro-ordinateurs
baisse de 30% par an,
• 93,6 % des foyers ayant accès à Internet ont choisi
le haut débit (ADSL ou câble),
• 19 millions de mobinautes en France,
• 77,2% des internautes se connectent tous les jours.

35. > La musique (et le téléchargement illégal) !
> Le cinéma, les replays et la V.O.D. !
> L’édition, la presse…
Les créateurs historiques
de contenus ont été pris
de vitesse…
Les blogs et les
communautés diffusent
des contenus illégaux !

36. Les créateurs historiques
de contenus ont été pris
de vitesse…
Le graphiste/designer
a un rôle à jouer dans
ces futurs contenus
à créer…

37. Ces contenus êtant un peu
plus que de belles images
avec des belles couleurs…
En résumé :
Quelle expérience, les marques
et les entreprises peuvent-elles
offrir à leur utilisateur ?

39. « L’expérience utilisateur représente la
qualité d’une expérience globale
perçue par une personne (utilisateur)
qui interagit avec un système. Cette
expérience d’un produit/service se fait
sur une relation durable et donc
globale car elle tient compte de TOUS
les moments d’utilisation,
avant/pendant/après l’acte d’achat : la
prise de conscience, la découverte, la
commande, l’achat, l’installation, le
service, le support, l’évolution, la fin
d’utilisation… »

40. UXUne bonne UX
= un bon design

41. UXUne bonne UX:
-Des usages « utiles »
-Un bon design graphique
-Une bonne animatique

42. (L’expérience utilisateur selon le blog synthesio.fr)

43. les wikis« Tirer parti de l’intelligence collective »
Trois types :
• généraliste (wikipedia)
• thématiques (également wikipedia)
• d’entreprise
Wikipedia
Jurispedia
Wikipol
« wikiwiki » signifie « vite » en hawaïen !
Quelques usages…

44. L‘hébergement
et partage de medias« Je t’envoie les photos et des vidéos du petit dernier ! »
Photos
C’est une des résultantes du « tout numérique » : appareil photo, visionnage
et partage des photos. Les acteurs historiques de la photographie proposent
tous des solutions (Kodak, Fnac..) de mises en ligne et de partage, mais c’est
bien sûr flickr qui tire son épingle du jeu.
Vidéos
Les services tels que DailyMotion et YouTube constituent une véritable
révolution : avant eux, partager une vidéo personnelle avec ses proches
relevait du parcours du combattant. Il fallait par exemple régler finement
la compression de la vidéo, choisir un hébergement Internet approprié,
construire son site Web, etc.
Attention aux © et aux ® !

45. Documents (ppt)
Les services de partage de présentation PowerPoint ou Impress
(OpenOffice) sont de plus en plus nombreux. Ils vous permettent de mettre
en ligne vos présentations facilement et rapidement. Les fonctionnalités de
ces services se rapprochent de celles que nous retrouvons sur YouTube.
C’est-à-dire que vous pouvez non seulement partager vos présentations
depuis le site qui offre ce service, mais vous pouvez aussi les intégrer sur
votre site Web ou blogue.
- slideshare
- zohoshow
- slideburner
- scribd
Attention aux © et aux ® !
L‘hébergement
et partage de medias« Je partage ma prez ! »

46. YouTube est devenu un
réseau social !
• Plus de 72h de vidéos sont uploadées
chaque minute !
• Aux Etats-Unis, les internautes ont visionné
en mai 16 milliards de vidéos en streaming,
• Ces utilisateurs ont représenté 136 millions
de visiteurs uniques* en mai.
* Internaute identifié comme unique visitant un site pendant une période donnée, un mois en général. Ce visiteur est identifié par
une adresse IP unique et un témoin (cookie). Une audience de 100 000 visiteurs uniques par mois signifie que 100 000
internautes différents (100 000 ordinateurs différents en fait) ont visité le site pendant la période de référence.

47. Les flux RSS« Je m’abonne pour avoir des infos avant tout le monde ! »
RSS désigne une famille de formats XML utilisés pour la syndication de
contenu Web.Ce standard est habituellement utilisé pour obtenir les mises à jour
d'informations dont la nature change fréquemment. Typiquement cela peut être des
listes de tâches dans un projet, des prix, des alertes de toutes natures, des nouveaux
emplois proposés, les sites d'information ou les blogs.
Trois formats peuvent être désignés par ces initiales :
• Rich Site Summary (RSS 0.91)
• RDF Site Summary (RSS 0.90 et 1.0)
• Really Simple Syndication (RSS 2.0)

49. Les Agrégateurs« Je centralise l’information »
Un agrégateur est un logiciel permettant de suivre plusieurs fils de
syndication en même temps. Il prévient de la mise à jour d'un site web ou des
actualités qu'il publie (par notification sonore, visuelle, etc.). Également, il
importe le contenu nouveau en question et il le fait pour un ensemble de
sites. (editeur ou hébergeur ?)
En ligne :
Alvinet
Google Blackle
Mon MSN
Mon Yahoo
Netvibes
NewsRSS
Onemoretab
Symbaloo
Technorati
(existe en local aussi)

50. Les tags« J‘étiquette mes contenus pour mieux les échanger »
Les tags sont simplement des étiquettes qu'on peut coller comme on le souhaite sur
du contenu - le lecteur de ce contenu va lui-même ajouter ses propres
tags). Le classement et l’organisation de ces tags est directementréalisé par
ceux qui les utilisent (folksonomie)…

51. Le social
bookmarking« J’échange mes bonnes adresses »
Le social bookmarking (en français « marque-page social », « navigation
sociale » ou « partage de signets ») est une façon pour les internautes de
stocker, de classer, de chercher et de partager leurs liens favoris.
Bookmarks.fr
Blogmarks.net
Mister-Wong.fr
Shimoo
Delicious
Digg
Diigo
Jamespot
…Etc.

52. Les configurateurs« J’achète des produits uniques »
Un configurateur est un logiciel applicatif permettant de guider un
consommateur acheteur vers la définition exacte ou approchée du
Bien ou du Service censé répondre à ses besoins et attentes. Ces
configurateurs sont proposés en magasin, sur Internet, ou
disponibles par l'intermédiaire d'un délégué commercial lors d'un
contact client.
Très présent dans le monde automobile : Audi, Citroën, BMW… et dans
le monde du prêt à porter : My Adidas, NikeiD, Converse, H&M… Etc.

53. L‘open source, le partage
de ressources et
d’information
« Je suis le pionnier d’un monde meilleur »
La désignation open source s'applique aux logiciels dont la licence
respecte des critères précisément établis par l'Open Source
Initiative, c'est-à-dire la possibilité de libre redistribution, d'accès au
code source et aux travaux dérivés.
Souvent, un logiciel libre est qualifié d'« open source », car les
licences compatibles open source englobent les licences libres selon
la définition de la Free Software Foundation ou FSF.
Ce mouvement a permis l’émergence de CMS
ultra-efficaces (plug-ins et back offices) avec
une grosse communauté pour les soutenir.

54. Le partage d’infos
à travers des plates-formes « accessibles »
à tous… Comme par exemple :

55. Le Cloud« Je suis sur un nuage »
Le Cloud computing est l'accès via un réseau
de télécommunications, à la demande et en
libre-service, à des ressources informatiques
partagées configurables…

56. Le Crowd sourcing
« L’intelligence du communautaire.»
« le crowdsourcing consiste à canaliser les
besoins ou désirs d'experts pour résoudre
un problème et ensuite partager librement
la réponse avec tout le monde. Google et
Wikipédia sont les plus gros utilisateurs de
crowdsourcing. »
Henk van Ess
journaliste économique
Un exemple symptomatique : Eyeka

57. Le Micro blogging« Je bloggue sur ma vie en direct live »
Twitter est un outil de réseau social et de
microbloggage qui permet aux utilisateur
d’envoyer gratuitement des messages brefs,
appellés tweets (gazouillis), par Internet,
par messagerie instantanée ou par SMS.

58. Les blogs« Je raconte ma vie qui est super intéressante ! »
Blog vient de la contraction de deux mots Web et log.
Web pour Internet et log qui est un journal de bord dans le
milieu de l’aviation - navigation.
En français, on a opté officiellement pour bloc note ou bloc
tant dis que les Canadiens ont eux adopté blogues.
Un blog est une suite antéchronologique de billets
(d’articles, notes ou postes) constitués de texte, d’image,
de sons, de vidéos. Il s’agit donc d’un site inernet interactif
composés d’articles qui peuvent êtres commentés par tout
internaute.

59. Les forums« Je pose des questions et on m’aide à y répondre »
Un forum de discussion est un forum utilisant
les ressources d'Internet.
Un forum est tout simplement un site d'échange, par le biais de
messages, que ceux-là soient disponibles sur Internet ou bien
sur un réseau interne comme un intranet ou encore un extranet
(Utilisation du "net" dans laquelle une organisation structure le
réseau pour s'interconnecter avec ses partenaires...).
Les discussions y prennent place sous la forme de « fils » de
messages, à publication instantanée ou différée ; cette
publication est souvent durable, car les messages ne sont pas
effacés. Elle est par nature le fait de plusieurs auteurs. Dans
certains forums à inscription, les messages sont modifiables a
posteriori par leurs auteurs.

60. Les réseaux sociaux
« Si je n’ai pas le temps de te retrouver au café, je te retrouve
sur Facebook ou Viadeo ! »
Quelques exemples :
• MySpace
• Facebook
• Viadeo
• Linkedin
• Copains d’avant
En 1988, la première plate-forme sociale est lancée par AOL
En juillet 2005, MySpace est lancé,
Février 2004, Facebook est lancé…

61. Si Facebook
est ouvert à tous,
Pinterest
est réservé
à « l’image ».
Pinterest est un réseau social créé en 2010 permettant à ses
utilisateurs de partager de belles photos ou contenus trouvés sur
le web. Le principe de base de ce réseau social est d'épingler ses
trouvailles sur un tableau (board), comme on pourrait épingler des
photos sur un tableau en liège. Ce site, étroitement interconnecté
avec Facebook, connaît une croissance fulgurante aux Etats-Unis.

62. En tant qu’éditeur de site Internet, vous êtes soumis
à diverses dispositions issues de la loi du 29 juillet
1881 sur la liberté de la presse, de la loi du 30
septembre 1986 sur la liberté de la communication
audiovisuelle, de la loi du 1er août 2000, et de la loi
du 21 juin 2004 pour la confiance dans l’économie
numérique (LCEN).
Le succès des Réseaux
Sociaux change le monde
de la communication/design
« La stupéfiante croissance du temps
consacré par les gens à ces sites change
la manière dont ils organisent leur temps sur
Internet et a des ramifications sur la manière
dont les gens se comportent, partagent et
interagissent dans leurs vies quotidiennes.
Par conséquent, les industries des médias
et de la publicité font face à de nouveaux
défis autour des opportunités et des risques
que ce nouveau média crée. » Etude Nielsen 2009

63. La marque doit « expliquer »
en configuration « ONE to ONE ».
Bref, elle doit engager une
« Conversation »
Le marketing conversationnel consiste à construire et à maintenir dans le
temps un dialogue personnalisé sur l’ensemble des canaux. Alors que les
plate-formes marketing traitaient traditionnellement les campagnes
sortantes, les plate-formes de marketing conversationnel fusionnent les
campagnes sortantes et les contacts entrants, à l’initiative du
consommateur.

64. 3.0
>> Et demain ? Le Web 3.0
« Idéalement, le système du Web
sémantique doit être capable de donner
une réponse complète à une question du
type « Je veux partir en vacances cet été
en Toscane. J’ai un budget de 4 000
euros. Et nous avons un enfant de 8 ans ».
Aujourd’hui, répondre à une telle question
va exiger des heures de tri dans des listes
distinctes d’hôtels et de location de
voitures. »

65. On nomme ergonomie
« l'étude scientifique de la relation entre
l'homme et ses moyens, méthodes et
milieux de travail »
Pour faciliter l’accès
à ces usages et/ou
ces nouvelles
fonctionnalités…
l’ergonomie se développe

66. et l'application de ces connaissances à
la conception de systèmes « qui
puissent être utilisés avec le maximum
de confort, de sécurité et d'efficacité
par le plus grand nombre. »

67. Certains domaines de pointe ont
permis de développer l’ergonomie
(accessibilité et réactivité)

68. L’ergonomie
par essence à pour vocation
d’« d’aider » et d’être
« pratique »
Elle concerne les espaces
physiques, les processus
de production, les interfaces
professionnelles ou grand public.

69. On parle aussi d’IHM
L'interface homme-machine, interaction humain-
machine (IHM), intégration homme-système (IHS) ou
interface personne-machine (IPM) définit, les moyens
et outils mis en œuvre, afin qu'un humain puisse
contrôler et communiquer avec une machine.

70. On parle aussi d’IHM
Le «WEB » n’est qu’une partie du problème…
Aujourd’hui tout est « connecté » : de l’automobile
au frigidaire !
LA NOTION « D’INTERFACE » EST LE CŒUR DU
DESIGN NUMERIQUE D’AUJOURD’HUI !!!

71. L’ergonomie
permet d’optimiser (par exemple)

72. L'ergonomie est l'utilisation de
connaissances scientifiques relatives
à l'homme (psychologie, physiologie,
médecine) dans le but d'améliorer son
environnement de travail.
L'ergonomie se caractérise généralement selon
deux composantes :

73. L'efficacité,
consistant à adopter des solutions
appropriées d'utilisation d'un produit,
au-delà du bon sens du concepteur ;
Dans le cas d’ergonomie Web,
on préférera parler d’Utilité
(= répondre à un besoin)

74. L'utilisabilité,
marquant l'adéquation aux capacités
de l'utilisateur.
Elle se décline en
confort d'utilisation, consistant à réduire au
maximum la fatigue physique et nerveuse.
sécurité, consistant à choisir des solutions
adéquates pour protéger l'utilisateur ;

75. Pour résumer, l’ergonomie web :
Ergonomie générale
Ergonomie des interfaces
homme-machine
Ergonomie informatique
Ergonomie web

76. L’ergonomie a ses stars…
Par exemple, Amélie Boucher
(et son blog ergolab.net)

77. La vision ergo. est
orientée « utilisateur »
On part d’un utilisateur, d’objectifs et d’un
contexte pour atteindre :
1 > L’efficacité
2 > L’efficience
3 > La satisfaction
L'efficience est la qualité d'un rendement permettant de réaliser un
objectif avec l'optimisation des moyens engagés. Autrement dit
c'est l'efficacité de l'efficacité.

78. Le design numérique
s’appuie sur des
méthodes de conception
« spécifique »
du fait du« lead »
technique, et de l’approche
ergonomique
De fait, deux visions/
méthodes s’affrontent…
Et doivent cohabiter !

79. Vision « développement » Vision « design »
(on s’en fout, si c’est un peu pixellisé )
Le vert anis, parce que c’est tendance !

80. Pour l’instant,
le design numérique
et le designers doivent
enrichir et compléter
des dispositifs purement
informatiques et techniques.

81. Un designer
peut aider à créer des
interfaces qui prennent en compte
les 3 facteurs fondamentaux :
1 > la fonction : à quoi ça sert ?
2 > l'esthétique : est-ce que c'est beau ?
3 > l’économie : combien ça vaut ?

82. Certaines méthodologies sont souvent utilisées
par les designers
le design
émotionnel
D’après Emotional Design de Donald A. Norman

83. Il existe trois niveaux d’appréhension
de l’objet chez l’être humain :
• le niveau viscéral,
• le niveau comportemental (inconscient)
• le niveau intellectuel.
D’après A. Norman, la bonne équation (comme
souvent) se situe à l’intersection de la prise en
considération des trois !

84. les décisions prises par l’utilisateur
sont liées instantanément à ce faisceaux
d’influences qui le traversent face à un
design.
L’intelligence objective évalue l’intérêt de
l’objet (ou du service) pour l’individu propre
mais une partie émotionnelle en qualibre
parallèlement les valeurs émotionnelles
(telles que la nostalgie, l’empathie, …).

85. la performance ergonomique
d’un site web ne suffit pas à en faire un site
bien « designé ».
Il faut aussi qu’il parle au « cœur » de
l’usager pour produire une bonne UX
(tout en sachant que « l’usager » n’existe
pas, il y a des usagers ; et donc des choix à
opérer dans sa communication ; ou
multiplier ses choix).

86. Pour en revenir au design émotionnel !
A.Walter fait un parallèle avec la pyramide
des besoins de Maslow

87. « Pour engager
émotionnellement
votre public,
vous devez afficher la
personnalité de votre
marque »

88. Le design émotionnel s’appuie
sur des principes ultra-
simples…

89. Une 2e approche :
La conception
centrée utilisateur

90. La Conception Centrée Utilisateur est un modèle
de conception, au carrefour de disciplines
différentes (facteurs humains, architecture de
l'information, design, marketing, qualité, etc.)
qui vise une expérience utilisateur optimale.
En effet de nombreux défauts d'utilisabilité
n'apparaissent qu'à l'occasion de tests avec des
participants semblables aux utilisateurs finaux.

91. Un processus général de conception centrée
sur les utilisateurs (user-centred design) se
caractérise par :
1 > des solutions de conception itératives
2 > l'implication active des utilisateurs
3 > des équipes de conception multidisciplinaires
incluant techniciens et spécialistes des facteurs
humains
4 > une allocation appropriée des fonctions
entre l'utilisateur et le système

92. En pratique, au cours d'un tel processus,
il s'agit de :
• spécifier le contexte d'utilisation :
les utilisateurs, leurs buts, leurs tâches,
et leurs environnements
• spécifier les besoins d'efficacité, d'efficience
et de satisfaction
• prototypage itératif
• tests auprès d'utilisateurs représentatifs

93. Ce qui nous amène
au fameux :
Design Thinking

94. L'expression « Design Thinking » est à entendre
comme une abréviation de « Design Thinking
Process ».
Cela signifie : le processus de pensée propre
aux designers.
Parler de « Design Thinking », c'est parler du
« Thinking like a designer ». Ce qu'on suggère
par là, c'est que le design est avant tout une
pratique de penseur ou une méthode de pensée.

95. Mais laissons les pros parler, à savoir
Tim Brown de l’agence IDEO

96. 3 accroches qui résument bien le bousin :
« Human needs is the
place to start »
« Learning by making »
« Design is too important
to be left to designers »

97. Le Design Thinking est une méthode de conception
particulière :
• définition du brief
• recherche
• conceptualisation des solutions
• création du prototype
• sélection de la méthode retenue
• mise en œuvre de la création
débriefing

99. Prototyper (rapidement)
Le designer cherche à tester la faisabilité
Technique d’un concept. Le prototype n’a
pas besoin d’être fait dans les bons
matériaux avec les bonnes techniques… On
peut
Faire du « Quick and dirty ».

102. Ou pour les interfaces…

104. « …pour être simple, le design thinking
c’est la discipline qui utilise la sensibilité
et les méthodes d’un designer pour
satisfaire les besoins des gens avec ce
qui est technologiquement faisable et
dans le but de convertir une opportunité
de marché en proposition de valeur
économiquement viable ».
Tim Brown / Ideo

105. Enfin, le design graphique donne la touche
Finale au Design (avec un grand D)
Parmi une multitude de
courants, 2 vagues graphiques
ont marqué ces 5 dernières
années

106. En matière de design, il décrit un élément visuel dont la forme
n’est pas directement liée à la fonction, mais qui reproduit de
manière ornementale un élément qui était nécessaire dans
l’objet d’origine, par exemple, des éléments d’interface
reproduisant des objets physiques (cf: les textures de cuir, de
papier, de bois…). Les exemples les plus connus sont les
icônes d’IOS 6 comme pour la plateforme de jeux Game
Center, le calepin Notes ou encore la Boussole2.
Le
skeuomorphisme

108. Le flat design, à l’opposé du Skeumorphisme, prend le parti
pris du minimalisme. Le flat design exclut tout effet de
profondeur, d’ombre portée, de reflets. Il privilégie les grands
aplats de couleurs, sans bordures, sans chichi… Les
défenseurs du « design-plat » affirment que les interfaces
graphiques ne doivent pas chercher à imiter « visuellement »
les fonctionnalités existantes, mais se concentrer l’essentiel,
trouver le plus court chemin pour transmettre une information
afin de faciliter la navigation et optimiser la lisibilité. Less is
more prends tout son sens avec le Flat-Design.
Le flat design

111. Google
& Windows 8
sont des
pionniers

113. > Le design par le code
> Une optimisation du
design pour une meilleure
UX.

114. Le flat design poussé
dans ses derniers
retranchements :
Le responsive design

118. Ajoutons une bonne dose
d’HTML5 et de typographies

121. Sans oublier les CSS
qui vont bien…
Pour de beaux effets de
Parallaxe !

122. Des sites en 1 page
Pour une belle navigation

123. Un peu de gifs animés
pour que ça bouge un peu !