Prsentation PowerPoint

Workn Coffee

LUX DESIGN AU SERVICE DE MA PERFORMANCE18/09/2015

2QUEL MOTEUR DE RECHERCHE UTILISEZ-VOUS ?

3

Pourquoi utilisez-vous Google ?Quaimez-vous propos de Google ?

Quest-ce que votre famille ou vos amis aiment sur Google ?

Vous rappelez-vous de votre premire impression ?

Facile utiliser

Rapide

Page daccueil trs simple et agrable

Fait ce que je lui demande

Prcis dans les rsultats

Les rsultats saffichent rapidement

Innovant

3

4Pourquoi utilisez-vous Google ?

4

5QUEST-CE QUE LUX ?

6Dfinition

Laszliro Kovacs User centered design @Dribbble

LUX (user experience)

Concerne toutes les expriences, interactions et mme motions quun utilisateur aura avec un produit, un service et tout ce qui gravite autour : interfaces, service client, communaut, emails

6

7Attention aux mauvaises interprtations

LUX ce nest pas juste des jolies graphismes

Ou suivre les dernires modes

8

Les lments de lexprience utilisateur

STRATGIEStratgieObjectifs du produit/serviceEtudes des besoins utilisateurs

CADREDfinir les fonctionnalits du siteSon contenu

STRUCTUREArchitecture de linformationDfinition des interactions

SQUELETTEConception des interfacesDe la navigationDes lments permettant dutiliser le site

SURFACEDesign visuel.A quoi le produit final ressemble

9

Remettre lutilisateur au centre de la rflexion

LUX cest avant tout remettre lutilisateur au centre de la rflexion.

Les comprendre et rpondre leur besoins.

Rgler leurs problmes.

Designer un produitDesigner lexprience

11

12La conception centre utilisateur : les 3 erreurs viter

123Ne prendre en compte que les demandes du client sans sintresser aux besoins des utilisateurs.Penser que les utilisateurs ont les mmes besoins, comportements et gots que moi.

Vous ntes pas lutilisateurForcer les utilisateurs faire ce que lon veut.

Le seul moyen est de comprendre leurs motivations, leurs problmatiques et leurs besoins.

12

Ne pas confondre ce que lutilisateur veut VS ce dont il a besoin

14LUX ce nest pas seulement lutilisateur UXBesoins UTILISATEURSObjectifsBUSINESSQuelle valeur apporte cette exprience lentreprise ?Quen retire lutilisateur ?

14

15QUEST-CE QUI FAIT UNE BONNE UX ?

Les facettes de lexprience utilisateur16VALEURUTILITDSIRABILITCRDIBILITACCESSIBILITTROUVABILITUTILISABILIT

Les facettes de lexprience utilisateur17VALEURDSIRABILITCRDIBILITACCESSIBILITTROUVABILITUTILISABILIT

UTILITDoit rpondre un besoin et aider lutilisateur accomplir ses objectifs

UTILITLes facettes de lexprience utilisateur18VALEURDSIRABILITCRDIBILITACCESSIBILITTROUVABILIT

Doit tre facile utiliser, et fonctionner correctement (pas de bugs)UTILISABILIT

UTILITLes facettes de lexprience utilisateur19VALEURDSIRABILITCRDIBILITACCESSIBILIT

Les diffrents contenus doivent tre facile trouver pour que lutilisateur accde rapidement ce quil chercheUTILISABILITTROUVABILIT

UTILITLes facettes de lexprience utilisateur20VALEURDSIRABILITACCESSIBILIT

Lutilisateur doit avoir confiance et croire ce quon lui dit UTILISABILITTROUVABILITCRDIBILIT

UTILITLes facettes de lexprience utilisateur21VALEURDSIRABILIT

Les contenus doivent tre accessibles aux personnes souffrant dun handicap UTILISABILITTROUVABILITCRDIBILITACCESSIBILIT

UTILITLes facettes de lexprience utilisateur22VALEUR

Gnrer lmotion et ladhsion grce une identit visuelle forte et uniqueUTILISABILITTROUVABILITCRDIBILITACCESSIBILITDSIRABILIT

ACCESSIBILITUTILITLes facettes de lexprience utilisateur23DSIRABILIT

Crer de la valeur pour les utilisateurs finaux et le clientUTILISABILITTROUVABILITCRDIBILITVALEUR

SATISFAISANT MAIS PAS MMORABLE !

LA MMOIRE DE LEXPRIENCE

Le souvenir est suprieur lexprience elle-mme.

Certains lments bien prcis vont fortement colorer ce souvenir, en particulier le dbut, mais surtout la fin de lexprience, qui va avoir linfluence la plus grande.

Le fait de surpasserles attentes des utilisateurs influe aussi sur la mmoire. Cest cette condition que lon cre la surprise, plus exactement lheureuse surprise, celle qui va rester dans les souvenirs.

25

2626

Pourquoi certaines ides restent dans la mmoire ?

Chip & Dan Heath dfinissent les 6 critres dune exprience mmorable (SUCCES)

Simplicity (Simple)Unexpectedness (Inattendu) Concretness (Concret)Credibility (Crdible)Emotions (Emotionnel)Stories (Scnaris)

26

27SIMPLE27

Lexprience doit toujours sembler simple, mme si le parcours estcomplexe, requrant un enchanement dinteractions.

Cest pourquoi il vaut mieux le dcouper en plusieurs petites oprations faciles raliser isolment.

Lexprience doit toujours sembler simple, mme si le parcours est ncessairementcomplexe, requrant un enchanement dinteractions. Cestpourquoi il vaut mieux le dcouper en plusieurs petites oprations faciles raliser isolment,27

28INATTENDU28

Les surprises heureuses que nous rservent certains systmes marquent durablement lesprit.

Il est donc intressant dintgrer de manire pertinente dans les parcours des lments de surprise.

28

29CONCRET29

Labstraction exige toujours de nous plus de concentration et defforts de comprhension que ce qui est concret.

Tout ce qui rend les choses plusconcrtes et plus proches va allger la charge cognitive des utilisateurs.

29

30CRDIBLE30

Denombreuseschosespeuventdonnerducrditetdelautoritundispositif numrique:destmoignagesvrifiables,laffichagedungrandnombre dutilisateurs,desrfrences,etc.

30

31CRDIBLE31

Denombreuseschosespeuventdonnerducrditetdelautoritundispositif numrique:destmoignagesvrifiables,laffichagedungrandnombre dutilisateurs,desrfrences,etc.

Facilit la vrification de la justesse des informations sur le site (citations, rfrences, tiers de confiance)

Montrer quil y a une vritable organisation derrire le site (adresses physiques, photo de lieux)

Mettre en avant lexpertise de la marque ou des quipes

Montrer quil y a des personnes de confiances (humains) derrire le site

Faciliter la prise de contact Un design professionnel ou en relation avec le propos

Un site utile et utilisable Montrer que le site est souvent mis jour

Limiter les erreurs aussi petites soient elles (typo, liens casss) http://credibility.stanford.edu/guidelines/)

31

32MOTIONNEL32

Toutcequiagitsurnosmotionsaunimpactsurnotremmoire.

Parvenircrerdesmotionsrequierttousles talents de lquipe : lardaction,ledesigngraphiqueetlaqualitdelaralisation ferontladiffrence.

32

33SCNARIS 33Les histoires et anecdotes ont un pouvoir de persuasion plus important que les donnes.

Ecouter une histoire agit comme une sorte de simulateur mental favorisant lengagement et lidentification.

33

34QUELQUES PRINCIPES DUX DESIGN RETENIR POUR VOTRE PROCHAIN PROJET

35PENSER LE CONTENU COMME UNE TCHE35

Cestavanttoutlecontenuquimotivelavisite,rarementlesfonctionnalits oulabeautdelinterface

Onperdsouventdevuequelesutilisateursquiviennentconsulterdes informationslefontrarementpourtresimplementplussavantsouplus cultivs:cestbienplussouventunetapedansunetchepluslarge.

35

36COHRENCE36

36

37FAMILIARIT (SUIVRE LES CONVENTIONS)37

Logo en haut gauche

Au clic, renvoie vers la homeRessemble un bouton, agit comme un bouton Liens visits, dans une couleur diffrenteCouleur des liens diffrente du texte

37

38FEEDBACK38

38

39LE PROCESS DE LUX

4040Audit ergonomiqueAnalyse de la concurrencePersonasArchitecture de linformationSpcificationsWireframesLE PROCESS DE LUX

40

41AUDIT ERGONOMIQUE41

Objectif : dtecter les problmes majeurs dergonomieAnalyse de chaque site suivant une grille ergonomiqueIdentification des problmes dutilisabilit majeursRapport danalyse ergonomiqueLIVRABLE

41

42ANALYSE DE LA CONCURRENCE42Objectif : Dtecter les forces et faiblesses des dispositifs des concurrents.

Faire ressortir des bonnes pratiques dun march

Analyse des sites des concurrents grce une grille prdfinieTests utilisateurs sur les sites concurrentsDfinition des fonctionnalits permettant de se dmarquer

42

43PERSONAS43

Objectif : communiquer et partager une vision commune des utilisateurs au sein de lquipe Dfinition des caractristiques des utilisateursDfinition de leurs tches/besoins principauxCration des scnarios utilisateursPersonasLIVRABLE

43

44ARCHITECTURE DE LINFORMATION & PARCOURS44

Objectif : dfinir la structuration des contenus permettant aux utilisateurs de trouver facilement linformationCration dune arborescenceDfinition des principaux gabarits de pageDfinition dune taxonomie permettant de lier les contenus entre euxArborescenceTaxonomieListe des principaux gabaritsLIVRABLES

44

45WIREFRAMES45

Objectif : matrialiser les contenus, fonctionnalits et parcours utilisateurs du site Intgration de tous les lments dinterfaceDfinition de la hirarchie de linformationDynamisation des fonctionnalits importantesOutil utilis : AxurePrototype HTML gnr par AXURELIVRABLE

45

46SPCIFICATIONS FONCTIONNELLES FINALES46

46

INTGRER LUTILISATEUR DANS LE PROCESS

INTEGRATION DES TESTS UTILISATEURS DANS LA PHASE DE CONCEPTIONPrincipaux bnfices : Se baser sur des mesures empiriques plutt que sur des hypothses.Scuriser chaque tape pour viter de repartir de zro.Justifier les choix par une validation utilisateur pour objectiver les dcisions et favoriser ladhsion en interneAudit ergonomiqueAnalyse de la concurrencePersonasArchitecture de linformationSpcificationsWireframesQuestionnaire en ligne

Tri de carte

Tree Testing

Tests utilisateurs

QUESTIONNAIRE EN LIGNEObjectif : rcolter de la donne relle sur les utilisateurs afin de construire des Personas fiables

laboration du questionnaire en ligneDiffusion du questionnaire sur vos fichiers clients ou sur vos sites actulsAnalyse du questionnaire

Outils: SurveyMonkey, SurveyGizmo, Google Formulaire, Hotjar

TRI DE CARTElaboration du questionnaire en ligneDiffusion du questionnaire sur les fichiers clientsAnalyse du questionnaireDescription : Proposer un ensemble dutilisateurs les contenus sous forme de carte quils doivent classer en catgories quils nomment.

Peut tre utilis pour redesigner larborescence dun site, un catalogue produit

Dmonstration en lignehttps://www.optimalworkshop.com/optimalsort-demoOutil: Optimal Workshop > Optimal Sort

TREE TESTING51Description : le tree testing permet dvaluer la facilit daccs linformation. Le test est effectu sur une arborescence interactive sans biais graphiques. On propose des tches effectuer aux utilisateurs et on value leur taux de russite.Dmonstration en lignehttps://www.optimalworkshop.com/treejack-demo

Objectif : valider larborescence dun point de vue utilisateur.Paramtrage du tree testingDiffusion du test en ligneAnalyse

Outil: Optimal Workshop > Treejack

Objectif : identifier les problmes dutilisabilit majeurs et le niveau de satisfaction des utilisateursA lissue des tests utilisateurs les prototypes seront corrigs si ncessaire.

TESTS UTILISATEURSRdaction dun plan de testRecrutement des participantsPassation des tests distanceAnalyse

52Outils: Skype, join.me, GotoMeetin, Morae

53SUCCESS STORIES

LE BOUTON 300 MILLIONS DE $

+ 300 MILLIONS DE DOLLARS SUR 1 AN (+45%)

60SUCCESS STORIES60

Airbnb : Bienvenue la maison la marque nous parle comme un ami nous fait vivre lexprience avant de vivre lexprience

60

61EXEMPLES CONCRETS61

Wufoo (service de cration de formulaire en ligne)

Envoie de lettres manuscrites de remerciement dinscription au service

61

62EXEMPLES CONCRETS62

Wufoo (service de cration de formulaire en ligne)

Envoie de lettres manuscrites de remerciement dinscription au service

62

BONUS !

Pour maintenir le cap et garder lesprit clair tout au long du projet, posez-vous les bonnes questions Quels sont les objectifs du site ou de la marque ?Qui sont mes utilisateurs ?Do viennent-ils ?Que cherchent-ils ?Quest-ce qui est important pour eux ? Quest-ce qui doit absolument tre mis en avant ?Quelles sont les prochaines tapes de lutilisateur ?

MERCI DES QUESTIONS ?

THANK YOU !ANNECYZAC de Valparc, 74330 PoisyT. : +33 (0)4 50 244 244GENEVEWTC II - route de Pr-Bois 291215 GenveT. : +41 (0) 22 320 75 11

www.agencenetdesign.com