![Page 1: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/1.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP2/LeUdeUX
§ Interactionhomme/machine§ Lesdeuxprincipalescomposantesdel’UX:l’utilisabilitéetl’utilité
§ L’accessibilité§ Lemarketing§ Lesoutils,lescontrôlesetlestests
>Réaliserdespersonas>Lestestsutilisateursetinterviews>Réaliserdesergonomies,wireframe,prototypes…>Utiliserlesgrillesdecritèresergonomiques
![Page 2: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/2.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
Danssapratique,l’UXdesignerchercheàfondersontravailsurl’analysedel’activitéréelledesutilisateurshumainsdansleurenvironnement>démarcheparticipativeetitérative.PourévaluerlaqualitéUXd’unoutil(uneapplication,unsite)onchercheàdéterminersicetoutilestadapté:•auxutilisateursvisés,•auxcontextesoùsedéroulentcesinteractions,•àlatâchepourlaquellel’outilaétéconçu,•auxactivitésquedoiventmettreenœuvrelesutilisateurspourréaliserleurtâcheetinteragiravecl’outil.
CHAP2/LeUdeUX
L’interactionHomme/machine
![Page 3: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/3.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP2/LeUdeUX
L’interactionHomme/machine
Illustration:Del’ergonomiegénéraleàl’ergonomieweb.
![Page 4: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/4.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
C’estJakobNielsenqui–danslesannées90’estàl’originedudéveloppementdesconceptsdel’utilitéetdel’utilisabilitéet–parlasuite-debeaucoupderéflexionsUX.C’estundesexpertsmajeursdudomainedel'ergonomieinformatiqueetdel'utilisabilitédessiteswebetplusglobalement,desinteractionshomme-machine.Ilaconceptualisé10principes–socledecequ’estladémarcheUXquel’onconnaîtaujourd’hui.
CHAP2/LeUdeUX
L’utililisabiltéetl’utilité
Lirearticle:www.optimisation-conversion.com/webdesign/ckecklist-de-10-principes-heuristiques-usability-de-jakob-nielsen/
![Page 5: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/5.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
1/Visibilitédestatutdusystème
2/Correspondanceentrelesystèmeetlemonderéel
3/Contrôledel’utilisateuretliberté
4/Conventionetstandards
5/Préventioncontreleserreurs
6/Reconnaissanceplutôtquerappel
7/Flexibilitéd’utilisationetefficience
8/Designesthétiqueetminimaliste
9/Fonctionsdel’aide(reconnaissance,diagnosticetrécupérationd’erreurs)
10/Aideetdocumentation
CHAP2/LeUdeUX
L’utililisabiltéetl’utilité
![Page 6: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/6.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
2conditionsessentiellesderéussited’unsiteweboud’uneapplication.
CHAP2/LeUdeUX
L’utililisabiltéetl’utilité
L’usabilitévientdel’anglais«usability»(=estfaciled’utilisation)SelonJakobNielsen,l’utilisabilitéwebdoitpermettre:1.l’efficience2.lasatisfaction3.lafiabilité4.lafacilitéd’apprentissage5.lafacilitéd’appropriation
L’utilitévientdel’anglais«utility»(=répondauxbesoinsréelsdesutilisateurs)UneproductionUXrépondauxbesoinsréelsdesutilisateurs–elleleurestdoncutile.Alors,unepluiedequestionsarrive...quelssontdonclesbesoinsetattentesdesutilisateurs?etquisontlesutilisateurs?commentilssecaractérisent?…
![Page 7: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/7.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
LadémarcheUX:conceptioncentréesurl’utilisateurestparticulièrementenphaseaveclesenjeuxdel’accessibilité:•adéquationauxattentesdesutilisateurs,•simplicitédel’organisationgénérale,•contenusbienstructurés•prioritéàlanavigationintuitive(linéaritédelanavigation,repérageetorientationconstants),•respectdesprincipesdenavigation(rôle,aspectetusagedulien),•unicitédelafenêtredunavigateur,•circonspectiondansl’usagedesframesetdesfenêtrespop-ups,•circonspectiondesplug-ins(enparticulierFlash).Eneffet,l’enjeud’unsiteoud’uneappestbiensouventdes’adresseràtouslestypesdecomportements,tantnovicesqu’experts.
CHAP2/LeUdeUX
L’accessibilité
![Page 8: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/8.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP2/LeUdeUX
L’accessibilité
Voirlavidéo(enanglais)«OpenWebPlateformeforthefuture»:https://vimeo.com/110256895(1min50’)
![Page 9: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/9.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP2/LeUdeUX
L’accessibilité
Voirledocument:01_Multiscreenworld_google.pdf
![Page 10: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/10.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP2/LeUdeUX
L’accessibilité
Voirledocument:01_Multiscreenworld_google.pdf
![Page 11: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/11.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
EnmutationavecInternet,lesoutilsnumériquesetlesréseauxsociaux.Ladémarchemarketingsouffreleplussouventd’uneimagenégative,coloréeduseulobjectifde«fairevendre».Pourtant,commeàpeuprèstouslessecteurs,lemarketingetUXvontdésormaisdepaire.…Aujourd’huiilfautallervite,êtreréactif:aveclesretoursd’utilisateursqualifiés,aveclesdatarécoltées,l’analysedesparcours…Lesstratégies,lesmessagesetleciblageévoluentviteetdeviennentitératifs.
CHAP2/LeUdeUX
Lemarketing
![Page 12: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/12.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP2/LeUdeUX
Lemarketing
Lireplusd’info:http://blog.lunaweb.fr/ux-dans-le-marketing
ethttps://www.oni.fr/web-academie/kpi-icp-indicateurs-cles-performance/
Illustration:www.usabilis.com/
definition-ux-experience-utilisateur-user-experience/
![Page 13: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/13.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
Méthodesàdispositionpourévaluerlaqualitédel’expérienceutilisateuretcela,àdifférenteétape…
CHAP2/LeUdeUX
Outilsettests:Lestestsutilisateursetinterviews
Voirarticle>Différentesphasestemporellesdel’UX(https://uxmind.eu/2014/07/09/l-ux-est-dynamique/)image:phases-temporelle-ux.png
![Page 14: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/14.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
RéaliserdespersonasUnpersonaestunarchétypereprésentantungroupedepersonnesdontlescomportements,motivationsetbutssontproches.LespersonassontutilisésenDesign,Marketing,UX,etc.pourpermettreau(x)concepteur(s)dedéterminercequeleproduitouservicedoitfaireetcommentildevraitfonctionner.Lespersonasserventà:•Synthétiserlesidéesquiémergentdesobservationsetentretiensdesutilisateurs;•Communiqueretpartagerunevisioncommunedesutilisateursauseindel’équipe;•Générerdel’affectetdel’empathiepourdesutilisateursparfoisdifficilementaccessibles.
CHAP2/LeUdeUX
Outilsettests:personas,Wireframesetprototypes
Voiraussi:https://www.easybear.fr/blog/comment-creer-personaethttp://www.weloveusers.com/formation/apprendre/personas.html
![Page 15: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/15.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP2/LeUdeUX
Outilsettests:personas,Wireframesetprototypes
![Page 16: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/16.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
LestestsutilisateursetinterviewsSansfairedetestsutilisateurs,sanssoumettresanscesselesinterfacesauxutilisateursfinaux,ilyadegrandeschancesdepasseràcôtédel’essentiel.C’estuneméthodeefficacepourévalueruneinterface:>comprendrecequifonctionne(ounon)>déterminerprécisément:lespointsd’achoppementsoulesaxesd’optimisation…
CHAP2/LeUdeUX
Outilsettests:personas,Wireframesetprototypes
Articledétaillésur:https://wexperience.fr/blog/vos-bonnes-resolution-lux-2017/https://www.usability.gov/how-to-and-tools/methods/planning-usability-testing.html
![Page 17: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/17.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
Spécificitédel’UX:lesparcoursutilisateur(userflow)Ils’agitdereprésenterschématiquement(diagramme,storyboard,etc.)leparcoursempruntéparl’utilisateurpouratteindresonobjectif.Exemples:•Pourunmagasinphysique(ex.Ikea),ilpourraits’agirdesdéplacementsdanslelieu.•Pourl’interfaced’unlogiciel,leparcourspourraitêtreunedescriptiondelaséquenced’écransquel’utilisateurconsulteetleschoixqu’ileffectuedansdesmenusdenavigation.
CHAP2/LeUdeUX
Outilsettests:personas,Wireframesetprototypes
![Page 18: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/18.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP2/LeUdeUX
Outilsettests:personas,Wireframesetprototypes
Réaliserdesergonomies,wireframe,prototypes…C’estuneformalisationefficacepour:•écouteretcomprendrelesschémasdepenséesdesutilisateurs(interactionsetdynamismeentre:contexte/utilisateur/système)•expérimenter•résoudredesproblèmeLesoutils>Figma>Sketch>AdobeXD
![Page 19: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/19.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
UtiliserlescritèresergonomiquesdeBASTIENETSCAPINLescritèresergonomiquessontissusdetravauxenpsychologiecognitive(mémoire,langage,intelligence,raisonnement,résolutiondeproblèmes,perceptionouattention).
Ilssontutilisésavecsuccèsdepuisplusde20anssurdifférentstypesd’interfacesdigitalescarbienquelesinterfacesaientchangées,l’êtrehumain,lui,estrestélemême.Lescritèresergonomiquess’appuientsurlacapacitédel’êtrehumainàcomprendreetinterpréterlesinformations.Ilsresterontd’actualitéencorependantdenombreusesdécennies.
CHAP2/LeUdeUX
Outilsettests:LescritèresergonomiquesdeBastienetScapin
IllustrationlescritèresdeBastienetScapin:www.pinterest.fr/pin/170222060895523837/
![Page 20: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/20.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP2/LeUdeUX
Outilsettests:LescritèresergonomiquesdeBastienetScapin
![Page 21: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/21.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP2/LeUdeUX
Outilsettests:LescritèresergonomiquesdeBastienetScapin
![Page 22: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/22.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP2/LeUdeUX
Outilsettests:LescritèresergonomiquesdeBastienetScapin
![Page 23: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/23.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
Alors… enconclusion…qu’est-cequ’unebonneUX?
![Page 24: UX - La couleur du Zèbrel’utilisabilité web doit permettre : 1.l’efficience 2.la satisfaction ... En mutation avec Internet, les outils numériques et les réseaux sociaux. La](https://reader034.vdocuments.pub/reader034/viewer/2022042412/5f2c1cffb4b1627c743fc20f/html5/thumbnails/24.jpg)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
(voilà,
C’estfini)
https://start.lesechos.fr/images/2016/04/14/4345_1460630912_datagency-aquent-totem-uxdesigner-v3-02.jpghttps://newflux.fr/2017/09/07/top-50-ux-designers-francais-a-suivre-2017/
UnbonUXdesigner!;-)OuUXmanager,ouUXleader,ouUXGuru…