i-breed et associés, profile picture
Téléchargé pari-breed et associés
PPT, PDF1,493 vues

Qu'est-ce que le design numérique ? Ebauche d'une réponse...

Le document présente l'évolution du design numérique et du web, en passant du web 1.0 statique au web 2.0 interactif qui mise sur l'expérience utilisateur et l'intelligence collective. Il décrit l'importance croissante des services en ligne, des réseaux sociaux et des nouvelles technologies dans la création de contenu numérique. Enfin, il souligne le rôle crucial des designers dans l'adaptation et l'innovation face à ces transformations.

Intégrer la présentation

Téléchargé 26 fois
1 / 123
2 / 123
3 / 123
4 / 123
5 / 123
6 / 123
7 / 123
8 / 123
9 / 123
10 / 123
11 / 123
12 / 123
13 / 123
14 / 123
15 / 123
16 / 123
17 / 123
18 / 123
19 / 123
20 / 123
21 / 123
22 / 123
23 / 123
24 / 123
25 / 123
26 / 123
27 / 123
28 / 123
29 / 123
30 / 123
31 / 123
32 / 123
33 / 123
34 / 123
35 / 123
36 / 123
37 / 123
38 / 123
39 / 123
40 / 123
41 / 123
42 / 123
43 / 123
44 / 123
45 / 123
46 / 123
47 / 123
48 / 123
49 / 123
50 / 123
51 / 123
52 / 123
53 / 123
54 / 123
55 / 123
56 / 123
57 / 123
58 / 123
59 / 123
60 / 123
61 / 123
62 / 123
63 / 123
64 / 123
65 / 123
66 / 123
67 / 123
68 / 123
69 / 123
70 / 123
71 / 123
72 / 123
73 / 123
74 / 123
75 / 123
76 / 123
77 / 123
78 / 123
79 / 123
80 / 123
81 / 123
82 / 123
83 / 123
84 / 123
85 / 123
86 / 123
87 / 123
88 / 123
89 / 123
90 / 123
91 / 123
92 / 123
93 / 123
94 / 123
95 / 123
96 / 123
97 / 123
98 / 123
99 / 123
100 / 123
101 / 123
102 / 123
103 / 123
104 / 123
105 / 123
106 / 123
107 / 123
108 / 123
109 / 123
110 / 123
111 / 123
112 / 123
113 / 123
114 / 123
115 / 123
116 / 123
117 / 123
118 / 123
119 / 123
120 / 123
121 / 123
122 / 123
123 / 123
LE DESIGN NUMERIQUE A short introduction to
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 !
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
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
Notons qu’internet est un réseau en étoile…
Par lequel du code est transmis
Puis finalement être interprété par notre navigateur :
>> 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. »
Bref, le Web 1.0 est toujours d’actualité…
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
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 : »
Le WEB 2.0 est le marronnier de la presse française…
« 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 :
>> 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 !
>> 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)
Google versus Netscape
= 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 !
• 90 % des foyers français utilisent Google • + de 67% de parts de marché au niveau mondial (devant Yahoo, Baidu, Bing…etc)  90%
>> 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,
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.
7 critères pour un Web vraiment 2.0 La longue traine et le monde de l’édition…
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.
Mais attention, le nomadisme démultiplie les contraintes en terme de design !
>> 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….
Le design numérique donne encore (et pour l’instant) le lead à la technique
En gros, on est passé de :
À… Et ce en moins de 25 ans
Du fait de ses contraintes, le Web 2.0 crée une esthétique
Qui colonise notre quotidien numérique… et donne un sens différent à la « beauté » graphique ! Google est ressenti comme « beau » car pratique, voir reposant…
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
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…
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.
> 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 !
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…
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 ?
« 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… »
UXUne bonne UX = un bon design
UXUne bonne UX: -Des usages « utiles » -Un bon design graphique -Une bonne animatique
(L’expérience utilisateur selon le blog synthesio.fr)
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…
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 ® !
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 ! »
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.
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)
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)
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)…
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.
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.
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.
Le partage d’infos à travers des plates-formes « accessibles » à tous… Comme par exemple :
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…
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
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.
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.
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.
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é…
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.
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
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.
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. »
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
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. »
Certains domaines de pointe ont permis de développer l’ergonomie (accessibilité et réactivité)
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.
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.
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 !!!
L’ergonomie permet d’optimiser (par exemple)
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 :
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)
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 ;
Pour résumer, l’ergonomie web : Ergonomie générale Ergonomie des interfaces homme-machine Ergonomie informatique Ergonomie web
L’ergonomie a ses stars… Par exemple, Amélie Boucher (et son blog ergolab.net)
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é.
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 !
Vision « développement » Vision « design » (on s’en fout, si c’est un peu pixellisé ) Le vert anis, parce que c’est tendance !
Pour l’instant, le design numérique et le designers doivent enrichir et compléter des dispositifs purement informatiques et techniques.
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 ?
Certaines méthodologies sont souvent utilisées par les designers le design émotionnel D’après Emotional Design de Donald A. Norman
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 !
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, …).
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).
Pour en revenir au design émotionnel ! A.Walter fait un parallèle avec la pyramide des besoins de Maslow
« Pour engager émotionnellement votre public, vous devez afficher la personnalité de votre marque »
Le design émotionnel s’appuie sur des principes ultra- simples…
Une 2e approche : La conception centrée utilisateur
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.
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
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
Ce qui nous amène au fameux : Design Thinking
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.
Mais laissons les pros parler, à savoir Tim Brown de l’agence IDEO
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 »
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
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 ».
Ou pour les interfaces…
« …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
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
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
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
Google & Windows 8 sont des pionniers
> Le design par le code > Une optimisation du design pour une meilleure UX.
Le flat design poussé dans ses derniers retranchements : Le responsive design
Ajoutons une bonne dose d’HTML5 et de typographies
Sans oublier les CSS qui vont bien… Pour de beaux effets de Parallaxe !
Des sites en 1 page Pour une belle navigation
Un peu de gifs animés pour que ça bouge un peu !

Contenu connexe

PDF
PO-ST : La communication Web 2.0 des grands musées
parSt John's
 
PPT
SAPIENS 2009 - Module 13 Part1
parChristophe RUDELLE
 
PDF
PO-ST : La communication web 2.0 des Festivals de Cinéma
parSt John's
 
PPT
FAFMRQ groupe 1 - Formation sur les enjeux que soulèvent les pratiques collab...
parPraTIC / projet de l'UQAM
 
PDF
PO-ST : Les Capitales Européennes de la Culture et le web 2.0.
parSt John's
 
PPT
Table BSL - Formation sur les enjeux que soulèvent les pratiques collaborativ...
parPraTIC / projet de l'UQAM
 
PPT
CAFE - Formation sur les enjeux que soulèvent les pratiques collaboratives et...
parPraTIC / projet de l'UQAM
 
PDF
Bleu Bat V2
parGilles Giudicelli
 
PO-ST : La communication Web 2.0 des grands musées
parSt John's
 
SAPIENS 2009 - Module 13 Part1
parChristophe RUDELLE
 
PO-ST : La communication web 2.0 des Festivals de Cinéma
parSt John's
 
FAFMRQ groupe 1 - Formation sur les enjeux que soulèvent les pratiques collab...
parPraTIC / projet de l'UQAM
 
PO-ST : Les Capitales Européennes de la Culture et le web 2.0.
parSt John's
 
Table BSL - Formation sur les enjeux que soulèvent les pratiques collaborativ...
parPraTIC / projet de l'UQAM
 
CAFE - Formation sur les enjeux que soulèvent les pratiques collaboratives et...
parPraTIC / projet de l'UQAM
 
Bleu Bat V2
parGilles Giudicelli
 

Tendances

PDF
TCM - Livre blanc sur les plateformes communautaires Open Source
parJEAN-GUILLAUME DUJARDIN
 
PDF
Blogspirit CCI Strasbourg 25 mai 2007
parStéphane BAYLE
 
PDF
Texteweb2collectif
parRenée Fountain
 
PPT
CCFBJ - Formation sur les enjeux que soulèvent les pratiques collaboratives e...
parPraTIC / projet de l'UQAM
 
PDF
Dossier de Presse Marseille 2.0 -2011
parMarseille 2.0
 
PDF
Livre blanc : Les tendances du web design 2018
parAmetys
 
PDF
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
parAmetys
 
PPT
Webdesign Passe Present et Present Part2
parbduverneuil
 
PPT
Webdesign Passe, Present et... Present Part1
parbduverneuil
 
PDF
Guide ecocentres
parJean Pouly
 
PPT
Webdesign Passe Present et... Present Part3
parbduverneuil
 
PPT
Club de la communication Midi-Pyrénées - Nouveaux outils
parLudovic Dublanchet
 
PPT
Internet Participatif, Flux Rss Et Syndication
parTarn Tourisme
 
PPT
5èmes Rencontres Tourisme & Internet du Tarn
parLudovic Dublanchet
 
PPTX
Les reseaux sociaux en entreprise : l'Artisanat
parXavier Masclaux
 
PDF
Support cours 1 -MAster PRANET
parLaurent Neyssensas
 
PDF
Les agences media et leurs sites internet
parThomas Postclic
 
PDF
Le webdesign au coeur du produit
parFabien Berthoux
 
PDF
Presentation synergie informatique 28 mars rse publication
parSynergie Informatique France
 
PDF
MSIT_Network_2_201309
parGianluca Costanzi
 
TCM - Livre blanc sur les plateformes communautaires Open Source
parJEAN-GUILLAUME DUJARDIN
 
Blogspirit CCI Strasbourg 25 mai 2007
parStéphane BAYLE
 
Texteweb2collectif
parRenée Fountain
 
CCFBJ - Formation sur les enjeux que soulèvent les pratiques collaboratives e...
parPraTIC / projet de l'UQAM
 
Dossier de Presse Marseille 2.0 -2011
parMarseille 2.0
 
Livre blanc : Les tendances du web design 2018
parAmetys
 
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
parAmetys
 
Webdesign Passe Present et Present Part2
parbduverneuil
 
Webdesign Passe, Present et... Present Part1
parbduverneuil
 
Guide ecocentres
parJean Pouly
 
Webdesign Passe Present et... Present Part3
parbduverneuil
 
Club de la communication Midi-Pyrénées - Nouveaux outils
parLudovic Dublanchet
 
Internet Participatif, Flux Rss Et Syndication
parTarn Tourisme
 
5èmes Rencontres Tourisme & Internet du Tarn
parLudovic Dublanchet
 
Les reseaux sociaux en entreprise : l'Artisanat
parXavier Masclaux
 
Support cours 1 -MAster PRANET
parLaurent Neyssensas
 
Les agences media et leurs sites internet
parThomas Postclic
 
Le webdesign au coeur du produit
parFabien Berthoux
 
Presentation synergie informatique 28 mars rse publication
parSynergie Informatique France
 
MSIT_Network_2_201309
parGianluca Costanzi
 

Similaire à Qu'est-ce que le design numérique ? Ebauche d'une réponse...

PPT
Les Tendances Du Web
parFrançois GOUBE
 
PPT
Les Tendances Du Web2009
parFrançois GOUBE
 
PPT
Internet 2.0 CNSN
parPascal Minguet
 
PDF
Web1.0.web2.0 web3.0 et web invisible
partassadit ALLOUNE
 
PPT
Principes, typologie et découverte du Web 2.0
parAref Jdey
 
PPT
Principes, typologie et découverte du Web 2.0
partisi
 
PPT
Introduction aux concepts 2.0
parAymeric
 
PPT
Web 2.0 : Quelles applications ?
parJean-François Ruiz
 
PPT
Mon Intro Au Web 20
paranne.wiener
 
PPTX
Web 2.0 - CGA Guadeloupe
parXavier LAIR
 
PPTX
Le web aujourd'hui
parMEMOIRE PATRIMOINE CLOHARS CARNOET
 
PPT
Formation Web 2.0
parMEMOIRE PATRIMOINE CLOHARS CARNOET
 
PDF
Création, vie et évolution du web, site internet et rôle des acteurs du web m...
parAdrien Ruffier
 
PPTX
Web 2.O
parCGA Guadeloupe
 
PDF
Initiation aux notions du web.2.0
parMEMOIRE PATRIMOINE CLOHARS CARNOET
 
PPT
Où va la relation entre les Marques et les Clients
parHenri Kaufman
 
PDF
Le web 2.0
parmickaelboussard29
 
PDF
2015 01 08_presentation-culture-web
parkattass mourad
 
PPT
Midi Internet
parS6
 
PDF
Culture Web: Histoire socio-technique du web
parClaire WIBAILLE
 
Les Tendances Du Web
parFrançois GOUBE
 
Les Tendances Du Web2009
parFrançois GOUBE
 
Internet 2.0 CNSN
parPascal Minguet
 
Web1.0.web2.0 web3.0 et web invisible
partassadit ALLOUNE
 
Principes, typologie et découverte du Web 2.0
parAref Jdey
 
Principes, typologie et découverte du Web 2.0
partisi
 
Introduction aux concepts 2.0
parAymeric
 
Web 2.0 : Quelles applications ?
parJean-François Ruiz
 
Mon Intro Au Web 20
paranne.wiener
 
Web 2.0 - CGA Guadeloupe
parXavier LAIR
 
Le web aujourd'hui
parMEMOIRE PATRIMOINE CLOHARS CARNOET
 
Formation Web 2.0
parMEMOIRE PATRIMOINE CLOHARS CARNOET
 
Création, vie et évolution du web, site internet et rôle des acteurs du web m...
parAdrien Ruffier
 
Web 2.O
parCGA Guadeloupe
 
Initiation aux notions du web.2.0
parMEMOIRE PATRIMOINE CLOHARS CARNOET
 
Où va la relation entre les Marques et les Clients
parHenri Kaufman
 
Le web 2.0
parmickaelboussard29
 
2015 01 08_presentation-culture-web
parkattass mourad
 
Midi Internet
parS6
 
Culture Web: Histoire socio-technique du web
parClaire WIBAILLE
 

Qu'est-ce que le design numérique ? Ebauche d'une réponse...

  • 1.
  • 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 unréseau en étoile…
  • 6.
    Par lequel ducode est transmis
  • 7.
    Puis finalement êtreinterprété par notre navigateur :
  • 8.
    >> Le Web1.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 Web1.0 est toujours d’actualité…
  • 10.
    Depuis 2001 etl’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 delangage 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.0est le marronnier de la presse française…
  • 13.
    « Le Web2.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’estquoi 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 leWeb 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.
  • 17.
    = service « Le services’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 % desfoyers français utilisent Google • + de 67% de parts de marché au niveau mondial (devant Yahoo, Baidu, Bing…etc)  90%
  • 19.
    >> 7 critèrespour 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 pourun 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 pourun Web vraiment 2.0 La longue traine et le monde de l’édition…
  • 23.
    7 critères pourun 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, lenomadisme démultiplie les contraintes en terme de design !
  • 25.
    >> le Web2.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 (etpour l’instant) le lead à la technique
  • 27.
    En gros, onest passé de :
  • 28.
    À… Et ceen moins de 25 ans
  • 29.
  • 30.
    Qui colonise notrequotidien 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 decontenus ont été pris de vitesse… Le graphiste/designer a un rôle à jouer dans ces futurs contenus à créer…
  • 37.
    Ces contenus êtantun 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ésentela 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: -Desusages « utiles » -Un bon design graphique -Une bonne animatique
  • 42.
  • 43.
    les wikis« Tirer partide 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 demedias« 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 servicesde 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 devenuun 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« Jecentralise 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‘étiquettemes 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’échangemes 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ètedes 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, lepartage 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« Jesuis 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« Jeraconte 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« Jepose 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’éditeurde 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'étudescientifique 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 deces 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 depointe 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 aussid’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 aussid’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.
  • 72.
    L'ergonomie est l'utilisationde 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 à adopterdes 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 auxcapacité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’ergonomieweb : Ergonomie générale Ergonomie des interfaces homme-machine Ergonomie informatique Ergonomie web
  • 76.
    L’ergonomie a sesstars… 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’appuiesur 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 designnumé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 sontsouvent utilisées par les designers le design émotionnel D’après Emotional Design de Donald A. Norman
  • 83.
    Il existe troisniveaux 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 prisespar 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’unsite 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 revenirau design émotionnel ! A.Walter fait un parallèle avec la pyramide des besoins de Maslow
  • 87.
    « Pour engager émotionnellement votrepublic, vous devez afficher la personnalité de votre marque »
  • 88.
    Le design émotionnels’appuie sur des principes ultra- simples…
  • 89.
    Une 2e approche: La conception centrée utilisateur
  • 90.
    La Conception CentréeUtilisateur 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éralde 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, aucours 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 nousamène au fameux : Design Thinking
  • 94.
    L'expression « DesignThinking » 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 lespros parler, à savoir Tim Brown de l’agence IDEO
  • 96.
    3 accroches quiré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 Thinkingest 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 designercherche à 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 lesinterfaces…
  • 104.
    « …pour êtresimple, 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 designgraphique 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 dedesign, 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.
  • 113.
    > Le designpar le code > Une optimisation du design pour une meilleure UX.
  • 114.
    Le flat designpoussé dans ses derniers retranchements : Le responsive design
  • 118.
    Ajoutons une bonnedose d’HTML5 et de typographies
  • 121.
    Sans oublier lesCSS qui vont bien… Pour de beaux effets de Parallaxe !
  • 122.
    Des sites en1 page Pour une belle navigation
  • 123.
    Un peu degifs animés pour que ça bouge un peu !

Notes de l'éditeur

  • #43 L’utilité - les produits ou services développés doivent réellement répondre aux besoins de l’utilisateur. Dans le cas d’un site web, les contenus et services proposé, devront clairement répondre aux attentes du public cible. L’utilisabilité – cette notion est couramment assimiler à la simplicité d’usage, de prise en main d’un produit ou système. Pourtant, l’utilisabilité va bien au delà. La norme ISO 9241, définit l’utilisabilité ainsi: “ the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.” Ainsi, l’utilisabilité d’un produit ou d’un service, revêtirait à la fois, une notion d’efficacité, d’efficience, mais également de satisfaction de l’utilisateur. La « désirabilité » - les produits proposés aux utilisateurs doivent tenir compte de l’émotivité des utilisateurs. Cette notion paraît assez subjective, mais revêt un caractère crucial, connaissant l’influence de l’émotion et de l’affectivité sur la perception des choses. Dans le cas d’un site web, l’attractivité visuelle, le plaisir d’utilisation, la richesse de l’interaction doivent être prise en compte afin d’améliorer considérablement l’expérience utilisateur. La « trouvabilité » - Elle représente la facilité et la rapidité d’accès au service ou au produit désiré. Par exemple, sur un site web, la facilité de navigation sur le site web, la présence de moteurs de recherche répond au critère de « trouvabilité ». L’accessibilité - Les produits et les services, doivent être accessible à toutes les catégories d’utilisateurs, notamment aux personnes souffrant d’handicapes. Ce critère, tend même à devenir une obligation légale. La crédibilité – Cette notion traduit le degré de confiance qu’accordent les utilisateurs à un produit ou à un service. Cette notion relève plus d’un sentiment que d’une qualité factuelle et peut être perçue sous les traits suivants : sérieux, expertise, transparence, ou encore exhaustivité du produit ou service.