Ou comment Internet redonne du sens au design graphique…

Aude MOUSSET(d.a. et WPF designer @ i-breed)

Marc-André FRANCART(d.a. @ i-breed)

20 Février 2009LES ATELIERS DU STUDIO

>> Aujourd’hui :

A > LE CONTEXTE1 • Au début était le 2.0

2 • Internet crée de nouveaux usages et outils

3 • La guerre du contenu a commencé

B > LES OUTILS4 • Les Rich Internet Application

5 • Les Rich Desktop Application

6 • Un premier pas, les widgets et les gadgets !

7 • Les RIA, un fort potentiel grand public

8 • Les RIA, un fort potentiel b. to b.

C > LA PRATIQUE DU DESIGN9 • l’Expérience utilisateur au cœur de l’internet

10 • Les technologies existantes

11 • Les acteurs

12 • Le designer d’interface d’application

13 • Du graphisme au design : une nouvelle vision

14 • Un nouveau Workflow

maf@i-breed.com

De la théorie !

Du vécu !

> le contexte…

maf@i-breed.com

maf@i-breed.com

1 • Au début était le 2.0le Web s’oriente définitivement vers une plusgrande interaction avec l’utilisateur.

« Qu’est -ce que le Web 2.0 ?» par Tim O’ReillyGoogle versus Netscape

maf@i-breed.com

= service

« Le service s’améliore quand le nombre de ses utilisateursaugmente ».

Cette dimension communautaire est une spécificité du Web 2.0.

maf@i-breed.com

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,

maf@i-breed.com

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 beaucoupmoins loin qu’un peloton dûmentconstitué où physiquementchaque individu créera un effetd’aspiration sur son voisin.

Plutôt que de vendre massivement unproduit en grande quantité dans un lieuunique de vente, on vend une multitudede produits en petite quantité via unemultitude de réseaux. C’est notammentla raison de la réussite de sites commeAmazon.

maf@i-breed.com

« Aujourd’hui, nous avons venduplus de livres qui ne se sont pasvendus hier que nous n’avonsvendu de livres que nous avonsvendu aussi hier. »

(dixit un employé voulant rester anonyme - et l’oncomprend pourquoi - de chez Amazon)

maf@i-breed.com

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.

maf@i-breed.com

2 • Des 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).

> Les technologies se développent en même temps que leur apprentissage.

> Bref… le Web 2.0 a envahi notre cyber quotidien.

maf@i-breed.com

3 • La guerre du contenua commencé…

• 32 millions d’internautes en France, • le prix moyen des micro-ordinateurs

baisse de 30% par an, • plus 10 millions d’internautes se sont

connectés de leur téléphone portable en 2007,

• 93,6 % des foyers connectés ont choisile haut débit (ADSL ou câble),

• Plus de 24 Millions d’internautes« surfent » de leur foyer en haut débit,

• 77,2% des internautes se connectenttous les jours.

maf@i-breed.com

Comment alimenter en contenu ce réseau ?D’ailleurs existe-t-il suffisamment decontenu pour l’alimenter ?

Les créateurs historiques decontenu ont été pris de vitesse :

• téléchargement illégal,• V.O.D. « faible »,• édition/presse souvent contre,• radio juste en « relais » via Internet.

* Wizzgo, Napster : des exemples de réussite grandpublic et d’échecs juridique

maf@i-breed.com

On a d’abord pensé que lesinternautes allaient créer le contenu

• le phénomène des blogs,• les sites de partage d’images (photos et vidéos).

On a ensuite essayé « d’agréger »des contenus existants

• les flux RSS,• le social bookmarking.

maf@i-breed.com

Dans ce contexte,le Designer peut devenirl’homme de la situation…Le graphiste qui, depuis des siècles, sait traiter, traduire ettransformer l’information peut raisonnablement mettre son savoir-faire au service de la création de contenus.

maf@i-breed.com

Les sites Web et lesdesigners d’aujourd’huidoivent proposer uneexpérience utilisateurComme le proposent depuis longtemps les parcs d’attractions.

(L’expérience util isateur selon le blog synthesio.fr)

maf@i-breed.com

Cette expérience utilisateurrépond à des règles précises :

• L’utilité,• La facilité et le confort d’utilisation,• La confiance,• La qualité de service.

Expérience utilisateur = plaisir d’usage*

* D’après Fred Cavazza(le grand gourou françaisdes nouvelles technologieset le roi des bloggers – FredCavazza.net)

> les outils…

maf@i-breed.com

maf@i-breed.com

4 • Tout ça pour en venir (enfin)aux Rich Internet Application

D’après Wikipedia :

« Les Rich Internet Applications (RIA)sont des applications Web qui partagentles caractéristiques des applicationsautonomes sur l'ordinateur. À long terme,les RIA favorisent la fusion des logicielstraditionnels et les logiciels client / serveurde type Internet. »

http://www.picnik.com/

maf@i-breed.com

Les Rich Internet Applicationsfont la synthèse entre :

- les nouveaux usages nés du Web que l’on « rationalise » via le travaild’ergonomie,

- les fonctions (liés à l’applicatiftraditionnel),

- la navigation (qui va se défaire de lanotion de « page »).

maf@i-breed.com

L’ergonomie au cœur de cetterévolution :

« l'ergonomie d'un site Web peut êtredéfinie par sa capacité à répondreefficacement aux attentes desutilisateurs et à leur fournir unconfort de navigation. La principaledifficulté que tente de leverl'ergonomie est la diversité desprofils des visiteurs. »

maf@i-breed.com

Les + des RIA :• les RIA sont « exécutables » d’un

navigateur sans installation préalable,

• les RIA peuvent être utilisées den’importe quel ordinateur connecté,

• les RIA évitent un certain nombre de problèmes de sécurité,

• les RIA sont, de fait, accessibles au plusgrand nombre.

maf@i-breed.com

5 • et aux Rich DesktopApplications

Toujours d’après Wikipedia :Les Rich Desktop Application (RDA) sontdes applications qui se lancent à partird'un navigateur Web mais qui s'exécutentsur une machine virtuelle extérieure auWeb. Chaque RDA nécessite au préalablel'installation d'un moteur d'exécution ausein duquel sera exécutée l'application. »

maf@i-breed.com

Les + des RDA :• Le fait d’être connecté, permet de

garder ses informations décentralisées sur Internet.

• On peut s’affranchir des contraintesdu navigateur.

• L’application peut fonctionner en mode connecté ou déconnecté.

• Les applications sont plus performantes et proposent un plusgrand nombre de fonctions.

Application Otto Store

maf@i-breed.com

> L’exemple type : iTunes

maf@i-breed.com

« Grâce à leur interface graphique attrayanteet leur faible coût de maintenance, ils attirentà la fois les utilisateurs et les développeurs »

Jeffrey S. Hammond,analyste chez Forrester Research

• 90% des marketers déclarent vouloirintégrer les technologies riches dansleur site pour améliorer l’expérienceutilisateur.

• En 2008, d’après Gartner Group, 48%des banques auront déployé des clientsriches.

• D’après Forrester, 70% des utilisateursplébiscitent l’ergonomie de ces nouvelles interfaces.

POUR CONCLURE sur les RIA et les RDA…

maf@i-breed.com

6 • Un premier pas, les gadgetsCes petites applications dédiées, souventdesignées sous la forme d‘objets 3d, font déjàpartie de notre quotidien :

maf@i-breed.com

Les gadgets :• font le lien physiquement entre RDA et RIA.

En effet, les gadgets peuvent être soit directementintégrés sur des sites ou des blogs (Netvibes…)soit être chargés et installés en local sur le bureaude l’ordinateur.

• ont un côté affectif pour l’utilisateur, sont un+marketing pour l’entreprise.A condition qu’il soit utile, identifiable et discrettout en affichant bien l’identité de la société.

• sont en général de deux types :> Simple> Complexe

maf@i-breed.com

un bon gadget=

gadget spécifique

Pour l’e-commerce :

• Fluidité de navigation,• Personnalisation des achats,

• Facilité de paiement, • Large choix à travers des moteurs

de recherches dédiés, • Possibilité de filtrer ses

recherches (par prix, taille…), • Possibilité de comparaisons, • Prévisualisation plus détaillée, • Gestion de l’historique.

maf@i-breed.com

7 • Les RIA, un potentielgrand public…

http://www.amazon.fr/ref=gno_logo_http://www.hm.com/us/inspiration/dressingroom__dressingroom2.nhtmlNikeID

Pour les services (comme par ex. la banque) :

• Fluidité de navigation,• Gestion de l’historique,• Agence virtuelle ouverte 24/24,

• Prolongement logique du service,• Prolongement de la com.,• Possibilité de « vendre » ce service.• …

Pour les médias :• S’affranchir du format télévision,• Créer un lien direct média / internaute,• Proposer des contenus ciblés,• Prolonger l’expérience par le Web,• Magnétoscope numérique et V.O.D.• …

maf@i-breed.com

http://www.m6replay.fr/http://www.cnn.com/SPECIALS/2009/44.president/inauguration/themoment/

Pour les éditeurs de logiciel :

• Lutter contre le piratage,• Offrir des modules ciblés,• Pas de problème de version,

de mise à jour, de compatibilité,de systèmes,

• Créer une lien direct avec l’utilisateur,

• …

D’ailleurs, Ray Ozzie, lechef architecte deMicrosoft, parle aujourd’hui de « softwareplus services » quandil décrit l’activité future deson entreprise.

maf@i-breed.com

https://www.photoshop.com/express/landing.html

• Atteindre un niveau minimumde design conforme aux standardsdu marché

• Et donc mieux vendre l’entrepriseauprès de la jeune génération.

• Améliorer la productivité. • L’intranet 2.0 : des

nouveaux outils et processpour l’entreprise.

• Mieux fédérer en interne grâce à ladimension communautaire.

• Une interface bien designée est unmessage de qualité !

…maf@i-breed.com

8 • Les RIA, un vrai potentielpour l’entreprise…

> la pratiquedu design

maf@i-breed.com

maf@i-breed.com

9 • l’Expérience utilisateurau cœur (économique)de l’Internet de demain

> Vers le Web 3.0

maf@i-breed.com

Un nouveau challenge pour lesacteurs du Web

• La fonctionnalité ne suffit plus,

• Prise en compte de l’utilisateur,

• Service ciblé, spécifique, adapté.

• Confort d’utilisation, quelque soit le support.

• La portabilité des technologies n’est pasencore mûre…

• mais l’utilisateur est uneréalité qui doit être intégréedès maintenant par les équipes de conception d’applications.

maf@i-breed.com

Aujourd’hui,

maf@i-breed.com

10 • Les technologies existantes

maf@i-breed.com

Technologie et graphismeUn accord pas toujours parfait

• Java et Ajax : les développeursmènent le jeu !

• Un mode de création graphique« classique »,

• Une implication du créatif trèsmodérée,

• Des contraintes technologiquesqui brident le visuel.

maf@i-breed.com

Technologie et graphismeUn accord pas toujours parfait

• Flash et Silverlight : les graphistesont leur mot à dire ,

• Une implication qui va au-delàde la maquette statique,

• Un mode de travail riche,

• Des contraintes modérées quilaissent place à l’imagination.

http://www.zunejourney.net/http://thankyou.thisisgrow.com/TFWA

maf@i-breed.com

11 • Les principaux acteurs

maf@i-breed.com

12 • Un nouveau métier : le designer d’interface d’application

• Des technologies qui ouvrentde nouvelles portes au graphiste,

• Des compétences multiples,

• Des logiciels complexes,

• S’affranchir des réflexes contraintsdu Web standard,

• Savoir parler le langage du développeur.

maf@i-breed.com

12 • Un nouveau métier : le designer d’interface d’application

maf@i-breed.com

13 • Du graphisme au design…

Application LCI Integrale

• Une approche « objet »,

• L’utilisateur au centre des préoccupations,

• L’ergonomie, où quand comment ?

maf@i-breed.com

L’habitude utilisateur : bonne ou mauvaise chose ?

• Connaître la cible,• Connaître le contexte,• Des points de repères multiples

(vie quotidienne, jeux vidéos, habitudes).

Application FNAC

14 • Un nouveau « workflow » pour produire des RIA

Cahierdescharges

MaquettesFonctionnelles

Cinématique

MaquettesGraphiques

SqueletteTechnique

IntégrationGraphique

Développement

14 • Un nouveau « workflow » pour produire des RIA

maf@i-breed.com

Des questions ?Des réactions ?

Merci…

Retrouvez cette présentation sur nos blogs :www.r-u-experienced.netwww.technode.info