SlideShare une entreprise Scribd logo
Good Morning UX #1
@Newflux_fr @Le_laptop
Initiation aux bases de la
conception UX
GOOD MORNING UX #1
Quels avantages en concevant UX ?
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UX
Le ROI de l’UX
+35%
L’augmentation des revenus de ESPN
après avoir pris en compte les retours
des utilisateurs dans leur refonte
29%
Des utilisateurs sur mobile vont
directement changer de site ou
d’application s’ils ne trouvent pas
rapidement ce qu’ils cherchent
90%
Des utilisateurs sur mobile vont rester
sur un site s’ils arrivent facilement et
rapidement à trouver l’information
qu’ils sont venus chercher
x5
Un petit effort sur la satisfaction client
et cela entraîne de l'engagement qui
peut multiplier par 5 les revenus
x6
Cela coûte 6 fois plus cher de
récupérer un nouveau client plutôt
que d’en garder un déjà fidélisé
89%
Des utilisateurs insatisfaits vont voir la
concurrence directement
La différence entre UX et ergonomie
Théorie de la Gestlat
Structurer l’information de façon à rendre sa lecture logique
- La loi de la bonne forme
Une forme simple, symétrique et reconnaissable
- La loi de continuité
Prolongement d’une continuité de formes
- La loi de la proximité
Assimiler les formes rapprochées
- La loi de similitude
Assimiler les formes similaires
- La loi de destin commun
Perception d’une forme de parties en mouvement
- La loi de familiarité
Perception plus significatives des formes famillières
Loi de Fitts
Minimiser la difficulté d’une tâche grâce à des principes de design
Plus la cible est proche et grosse, moins l’utilisateur met de
temps à l’atteindre
Plus la cible est éloignée et petite, plus l’utilisateur met de
temps à l’atteindre.
Affordance
Définir l’importance de l’information
Une interface se lit comme un livre,
elle a donc des principes de lecture
dont l’affordance en est l’une règle.
Processus de conception d’une interface
Recherche utilisateur
Définir les contours de son expérience grâce aux informations des utilisateurs
Se documenter sur les différents
besoins et usages des potentiels
utilisateurs en récoltant un maximum
d’information grâce à des recherches
ciblées et des questionnaires
personnalisés
Good Morning UX #1 : Initiation à la conception UX
Experience map
Mettre en forme l’expérience dans sa globalité
Créer un parcours dans lequel votre
expérience vient s’ajouter au déroulement
habituel d’un utilisateur en prenant en
compte son contexte
Architecture de l’information
Récolter et prioriser les informations en s’appuyant du storytelling
Structurer les contenus en fonction des
recherches utilisateurs et des habitudes de
navigation.
S’aider du tri des cartes pour hiérarchiser le
contenu par importance en s’appuyant d’un
user story
User flow
Établir les parcours utilisateurs
Créer des parcours qui viennent s’ancrer dans
les usages réels des utilisateurs, en prenant
en compte le lien entrant et l’objectif que
s’est défini l’utilisateur
Design fonctionnel
Définir les fonctionnalités et les contenus attribués
Mettre sous forme de parcours les différents
processus fonctionnels qui demandent des
interactions avec l’utilisateur pour s’assurer de
bien maîtriser tous les points de contact
Design d’idéation
Imaginer et itérer rapidement des prototypes d’interface
6to 1
Good Morning UX #1 : Initiation à la conception UX
Wireframe
Mettre en forme ses écrans en suivant la logique des parcours utilisateurs
C’est le squelette du site qui sert à
vérifier si les articulations
fonctionnent correctement.
Good Morning UX #1 : Initiation à la conception UX
Test utilisateur
Valider ses parcours et ses principes de design
Définir des parcours à tester pour
l’utilisateur avec des objectifs bien
précis sans pour autant le guider
dans ses choix. Ne pas oublier de
demander pourquoi !
Traiter les retours des tests utilisateurs
Gérer la restitution des retours et pouvoir s’en servir pour améliorer l’expérience
Design d’interaction
L’adaptation entre l’humain et le virtuel
Ajuster l’interface aux notions d’ergonomie cognitive
Le design d’interaction s’appuie
essentiellement sur la relation
homme-machine, ainsi il faut
prendre en compte la manipulation
faite par l’homme.
●Théorie de Gesltat
●Incitation : conduit l’utilisateur à effectuer des actions spécifiques
●Distinction : groupe des fonctions de même type facilitant l’accès, la mémorisation et l’apprentissage
●Retour utilisateur : réunit les différents comportements de l’interface visant à montrer le fonctionnement
du système
●Lisibilité : éclaircir et limiter le nombre d’éléments différents présents sur l’interface
●Flexibilité : concerne la capacité de l’interface à s’adapter à différents contextes d’utilisation
●Concision : afficher le contenu de façon à faciliter l’exploitation des données
●Principes de Mayer
Le facilitateur d’interaction
Le design d’interaction joue de multiples codes cognitifs
Donner de l’importance à l’interface
Créer de la proximité avec l’utilisateur grâce aux design d’interaction
● Donner des feedbacks
● Guider le parcours
● Apporter de l’émotion
● Afficher l’état d’avancement
Différents états d’une interface
Etat initial
La première impression qu’aura l’utilisateur d’une interface
Etat vide
Guider et/ou informer l’utilisateur de la future présence d’éléments
Etat actif
Action en cours d’exécution
Etat correct
Permettre de rassurer et d’inciter l’utilisateur dans ses actions
Etat incorrect
Donner un message d’erreur efficace et qui va accompagner l’utilisateur
Tâche répétitive
Séquencer les étapes pour faire comprendre à l’utilisateur son action
Tâche en cours
Étape transitoire qui permet de faire patienter l’utilisateur
Tâche accomplie
Montrer la complétion d’une action
Design emotionnel
Storytelling
Capter l’attention de l’utilisateur pour faciliter la lecture du contenu
Nous aimons tous les histoires,
surtout quand elles sont bien racontées.
● Une histoire apporte de l’ordre et du sens à un récit en clarifiant les points complexes
● Une histoire améliore la mémorisation d’un produit / service
● Une histoire dévoile implicitement des émotions et des sensations aux clients
● Une histoire persuade là où les faits échouent
● Une histoire va humaniser et personnaliser une enseigne en la rendant unique
Gamification
On apprend mieux en s’amusant
Faire assimiler à l’utilisateur des notions
parfois complexes ou émouvantes à travers
des moyens ludiques
Contexte d’utilisation
Les contraintes d’utilisation liées au contexte
Penser à concevoir des expériences qui prennent en compte le contexte d’usage
● Les contraintes sociales
Le stress du travail, la proximité dans le métro ou les
bousculades dans la rue sont gênants pour l’utilisateur
● Les contraintes météorologiques
L’écran tactile mouillé par la pluie, les reflets du soleil
ou le vent qui empêche d’utiliser le micro, des
contraintes liées à l'environnement de l’utilisateur
● Les contraintes d’accessibilité
Une main dans le plâtre, une bras occupé par un bébé
ou une personne qui conduit n’ont pas tout leur
physique pour correctement naviguer dans l’interface
Inclusive design
Design en mobilité
Circular Design
Merci :)
@Newflux_fr @Le_laptop
BONNE JOURNÉE !

Contenu connexe

Tendances

La matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousLa matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tous
Kiss The Bride
 
#Good Morning UX #2 : Grands principes du design thinking
#Good Morning UX #2 : Grands principes du design thinking#Good Morning UX #2 : Grands principes du design thinking
#Good Morning UX #2 : Grands principes du design thinking
Newflux UX/UI News
 
Techniques d’UX & UI Design
Techniques d’UX & UI DesignTechniques d’UX & UI Design
Techniques d’UX & UI Design
Microsoft
 
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Guillaume Abel
 
Conférence Picth l'UX à ta grand-mère
Conférence Picth l'UX à ta grand-mèreConférence Picth l'UX à ta grand-mère
Conférence Picth l'UX à ta grand-mère
Benjamin Richy
 
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Carine Lallemand
 
Symposium uxdesign
Symposium uxdesignSymposium uxdesign
Symposium uxdesign
Versusmind
 
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
Carine Lallemand
 
Formation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webFormation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et web
NovUp
 
Conférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Conférence Paris Web 2015 - Vers une bonne pratique du Pair DesignConférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Conférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Catherine Verfaillie
 
Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait) Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait)
Usabilis
 
WAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine LallemandWAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine Lallemand
Carine Lallemand
 
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
Flupa
 
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine LallemandBlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
Carine Lallemand
 
Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...
Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...
Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...
Flupa
 
Ux design
Ux designUx design
Ux design
niklofr
 
Lean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork AxanceLean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork Axance
Alexandre Jubien
 
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Marie Glandus
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
Audrey CHATEL
 

Tendances (20)

La matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousLa matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tous
 
#Good Morning UX #2 : Grands principes du design thinking
#Good Morning UX #2 : Grands principes du design thinking#Good Morning UX #2 : Grands principes du design thinking
#Good Morning UX #2 : Grands principes du design thinking
 
Techniques d’UX & UI Design
Techniques d’UX & UI DesignTechniques d’UX & UI Design
Techniques d’UX & UI Design
 
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
 
Conférence Picth l'UX à ta grand-mère
Conférence Picth l'UX à ta grand-mèreConférence Picth l'UX à ta grand-mère
Conférence Picth l'UX à ta grand-mère
 
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
 
Symposium uxdesign
Symposium uxdesignSymposium uxdesign
Symposium uxdesign
 
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
 
Formation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webFormation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et web
 
Conférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Conférence Paris Web 2015 - Vers une bonne pratique du Pair DesignConférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Conférence Paris Web 2015 - Vers une bonne pratique du Pair Design
 
Ux
UxUx
Ux
 
Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait) Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait)
 
WAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine LallemandWAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine Lallemand
 
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
 
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine LallemandBlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
 
Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...
Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...
Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...
 
Ux design
Ux designUx design
Ux design
 
Lean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork AxanceLean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork Axance
 
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
 

Similaire à Good Morning UX #1 : Initiation à la conception UX

ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVwebExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
Valtech Canada
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
Loic Nunez
 
#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design
Virginie Boullé
 
FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011
Flupa
 
UX guidelines
UX guidelinesUX guidelines
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
Laurent Barbat
 
Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015
Idean France
 
10 tendances UX Mobile, Application en 2015
10 tendances UX Mobile, Application en 2015 10 tendances UX Mobile, Application en 2015
10 tendances UX Mobile, Application en 2015
servicesmobiles.fr
 
Work n coffee : l'Ux design au service de ma performance
Work n coffee : l'Ux design au service de ma performanceWork n coffee : l'Ux design au service de ma performance
Work n coffee : l'Ux design au service de ma performance
Net Design
 
Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...
Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...
Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...
Valtech Canada
 
Chp2 - Conception UX-UI des Applications Mobiles
Chp2 - Conception UX-UI des Applications MobilesChp2 - Conception UX-UI des Applications Mobiles
Chp2 - Conception UX-UI des Applications Mobiles
Lilia Sfaxi
 
Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?
Idean France
 
Formation M2i - Placer l'ux au coeur de sa stratégie
Formation M2i - Placer l'ux au coeur de sa stratégieFormation M2i - Placer l'ux au coeur de sa stratégie
Formation M2i - Placer l'ux au coeur de sa stratégie
M2i Formation
 
Blue Forest - Pitch Deck v1.4
Blue Forest - Pitch Deck v1.4Blue Forest - Pitch Deck v1.4
Blue Forest - Pitch Deck v1.4
Blue Forest
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
Georges59
 
L'approche Bertin Ergonomie des MVP
L'approche Bertin Ergonomie des MVPL'approche Bertin Ergonomie des MVP
L'approche Bertin Ergonomie des MVP
Hugues Randriatsoa
 
Ergonomie des IHM web - Grille d'analyse de Bastien et Scapin
Ergonomie des IHM web - Grille d'analyse de Bastien et ScapinErgonomie des IHM web - Grille d'analyse de Bastien et Scapin
Ergonomie des IHM web - Grille d'analyse de Bastien et Scapin
ElodieDescharmes
 
Jabes 2019 Forum "L'utilisateur au coeur des projets à l'INIST : parlons UX !
Jabes 2019 Forum "L'utilisateur au coeur des projets à l'INIST : parlons UX ! Jabes 2019 Forum "L'utilisateur au coeur des projets à l'INIST : parlons UX !
Jabes 2019 Forum "L'utilisateur au coeur des projets à l'INIST : parlons UX !
ABES
 
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
Flupa
 

Similaire à Good Morning UX #1 : Initiation à la conception UX (20)

ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVwebExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
 
#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design
 
FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011
 
UX guidelines
UX guidelinesUX guidelines
UX guidelines
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
 
Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015
 
10 tendances UX Mobile, Application en 2015
10 tendances UX Mobile, Application en 2015 10 tendances UX Mobile, Application en 2015
10 tendances UX Mobile, Application en 2015
 
Work n coffee : l'Ux design au service de ma performance
Work n coffee : l'Ux design au service de ma performanceWork n coffee : l'Ux design au service de ma performance
Work n coffee : l'Ux design au service de ma performance
 
Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...
Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...
Expérience Utilisateur : L’art et la science de satisfaire… et de faire de l’...
 
Chp2 - Conception UX-UI des Applications Mobiles
Chp2 - Conception UX-UI des Applications MobilesChp2 - Conception UX-UI des Applications Mobiles
Chp2 - Conception UX-UI des Applications Mobiles
 
ESG - Lesson 5
ESG - Lesson 5ESG - Lesson 5
ESG - Lesson 5
 
Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?
 
Formation M2i - Placer l'ux au coeur de sa stratégie
Formation M2i - Placer l'ux au coeur de sa stratégieFormation M2i - Placer l'ux au coeur de sa stratégie
Formation M2i - Placer l'ux au coeur de sa stratégie
 
Blue Forest - Pitch Deck v1.4
Blue Forest - Pitch Deck v1.4Blue Forest - Pitch Deck v1.4
Blue Forest - Pitch Deck v1.4
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
 
L'approche Bertin Ergonomie des MVP
L'approche Bertin Ergonomie des MVPL'approche Bertin Ergonomie des MVP
L'approche Bertin Ergonomie des MVP
 
Ergonomie des IHM web - Grille d'analyse de Bastien et Scapin
Ergonomie des IHM web - Grille d'analyse de Bastien et ScapinErgonomie des IHM web - Grille d'analyse de Bastien et Scapin
Ergonomie des IHM web - Grille d'analyse de Bastien et Scapin
 
Jabes 2019 Forum "L'utilisateur au coeur des projets à l'INIST : parlons UX !
Jabes 2019 Forum "L'utilisateur au coeur des projets à l'INIST : parlons UX ! Jabes 2019 Forum "L'utilisateur au coeur des projets à l'INIST : parlons UX !
Jabes 2019 Forum "L'utilisateur au coeur des projets à l'INIST : parlons UX !
 
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
 

Good Morning UX #1 : Initiation à la conception UX

  • 1. Good Morning UX #1 @Newflux_fr @Le_laptop
  • 2. Initiation aux bases de la conception UX GOOD MORNING UX #1
  • 3. Quels avantages en concevant UX ?
  • 6. Le ROI de l’UX
  • 7. +35% L’augmentation des revenus de ESPN après avoir pris en compte les retours des utilisateurs dans leur refonte 29% Des utilisateurs sur mobile vont directement changer de site ou d’application s’ils ne trouvent pas rapidement ce qu’ils cherchent 90% Des utilisateurs sur mobile vont rester sur un site s’ils arrivent facilement et rapidement à trouver l’information qu’ils sont venus chercher
  • 8. x5 Un petit effort sur la satisfaction client et cela entraîne de l'engagement qui peut multiplier par 5 les revenus x6 Cela coûte 6 fois plus cher de récupérer un nouveau client plutôt que d’en garder un déjà fidélisé 89% Des utilisateurs insatisfaits vont voir la concurrence directement
  • 9. La différence entre UX et ergonomie
  • 10. Théorie de la Gestlat Structurer l’information de façon à rendre sa lecture logique - La loi de la bonne forme Une forme simple, symétrique et reconnaissable - La loi de continuité Prolongement d’une continuité de formes - La loi de la proximité Assimiler les formes rapprochées - La loi de similitude Assimiler les formes similaires - La loi de destin commun Perception d’une forme de parties en mouvement - La loi de familiarité Perception plus significatives des formes famillières
  • 11. Loi de Fitts Minimiser la difficulté d’une tâche grâce à des principes de design Plus la cible est proche et grosse, moins l’utilisateur met de temps à l’atteindre Plus la cible est éloignée et petite, plus l’utilisateur met de temps à l’atteindre.
  • 12. Affordance Définir l’importance de l’information Une interface se lit comme un livre, elle a donc des principes de lecture dont l’affordance en est l’une règle.
  • 13. Processus de conception d’une interface
  • 14. Recherche utilisateur Définir les contours de son expérience grâce aux informations des utilisateurs Se documenter sur les différents besoins et usages des potentiels utilisateurs en récoltant un maximum d’information grâce à des recherches ciblées et des questionnaires personnalisés
  • 16. Experience map Mettre en forme l’expérience dans sa globalité Créer un parcours dans lequel votre expérience vient s’ajouter au déroulement habituel d’un utilisateur en prenant en compte son contexte
  • 17. Architecture de l’information Récolter et prioriser les informations en s’appuyant du storytelling Structurer les contenus en fonction des recherches utilisateurs et des habitudes de navigation. S’aider du tri des cartes pour hiérarchiser le contenu par importance en s’appuyant d’un user story
  • 18. User flow Établir les parcours utilisateurs Créer des parcours qui viennent s’ancrer dans les usages réels des utilisateurs, en prenant en compte le lien entrant et l’objectif que s’est défini l’utilisateur
  • 19. Design fonctionnel Définir les fonctionnalités et les contenus attribués Mettre sous forme de parcours les différents processus fonctionnels qui demandent des interactions avec l’utilisateur pour s’assurer de bien maîtriser tous les points de contact
  • 20. Design d’idéation Imaginer et itérer rapidement des prototypes d’interface 6to 1
  • 22. Wireframe Mettre en forme ses écrans en suivant la logique des parcours utilisateurs C’est le squelette du site qui sert à vérifier si les articulations fonctionnent correctement.
  • 24. Test utilisateur Valider ses parcours et ses principes de design Définir des parcours à tester pour l’utilisateur avec des objectifs bien précis sans pour autant le guider dans ses choix. Ne pas oublier de demander pourquoi !
  • 25. Traiter les retours des tests utilisateurs Gérer la restitution des retours et pouvoir s’en servir pour améliorer l’expérience
  • 27. L’adaptation entre l’humain et le virtuel Ajuster l’interface aux notions d’ergonomie cognitive Le design d’interaction s’appuie essentiellement sur la relation homme-machine, ainsi il faut prendre en compte la manipulation faite par l’homme.
  • 28. ●Théorie de Gesltat ●Incitation : conduit l’utilisateur à effectuer des actions spécifiques ●Distinction : groupe des fonctions de même type facilitant l’accès, la mémorisation et l’apprentissage ●Retour utilisateur : réunit les différents comportements de l’interface visant à montrer le fonctionnement du système ●Lisibilité : éclaircir et limiter le nombre d’éléments différents présents sur l’interface ●Flexibilité : concerne la capacité de l’interface à s’adapter à différents contextes d’utilisation ●Concision : afficher le contenu de façon à faciliter l’exploitation des données ●Principes de Mayer Le facilitateur d’interaction Le design d’interaction joue de multiples codes cognitifs
  • 29. Donner de l’importance à l’interface Créer de la proximité avec l’utilisateur grâce aux design d’interaction ● Donner des feedbacks ● Guider le parcours ● Apporter de l’émotion ● Afficher l’état d’avancement
  • 31. Etat initial La première impression qu’aura l’utilisateur d’une interface
  • 32. Etat vide Guider et/ou informer l’utilisateur de la future présence d’éléments
  • 33. Etat actif Action en cours d’exécution
  • 34. Etat correct Permettre de rassurer et d’inciter l’utilisateur dans ses actions
  • 35. Etat incorrect Donner un message d’erreur efficace et qui va accompagner l’utilisateur
  • 36. Tâche répétitive Séquencer les étapes pour faire comprendre à l’utilisateur son action
  • 37. Tâche en cours Étape transitoire qui permet de faire patienter l’utilisateur
  • 38. Tâche accomplie Montrer la complétion d’une action
  • 40. Storytelling Capter l’attention de l’utilisateur pour faciliter la lecture du contenu Nous aimons tous les histoires, surtout quand elles sont bien racontées. ● Une histoire apporte de l’ordre et du sens à un récit en clarifiant les points complexes ● Une histoire améliore la mémorisation d’un produit / service ● Une histoire dévoile implicitement des émotions et des sensations aux clients ● Une histoire persuade là où les faits échouent ● Une histoire va humaniser et personnaliser une enseigne en la rendant unique
  • 41. Gamification On apprend mieux en s’amusant Faire assimiler à l’utilisateur des notions parfois complexes ou émouvantes à travers des moyens ludiques
  • 43. Les contraintes d’utilisation liées au contexte Penser à concevoir des expériences qui prennent en compte le contexte d’usage ● Les contraintes sociales Le stress du travail, la proximité dans le métro ou les bousculades dans la rue sont gênants pour l’utilisateur ● Les contraintes météorologiques L’écran tactile mouillé par la pluie, les reflets du soleil ou le vent qui empêche d’utiliser le micro, des contraintes liées à l'environnement de l’utilisateur ● Les contraintes d’accessibilité Une main dans le plâtre, une bras occupé par un bébé ou une personne qui conduit n’ont pas tout leur physique pour correctement naviguer dans l’interface