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

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


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


CHAP2/LeUdeUX

L’interactionHomme/machine

Illustration:Del’ergonomiegénéraleàl’ergonomieweb.


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/


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



2conditionsessentiellesderéussited’unsiteweboud’uneapplication.

CHAP2/LeUdeUX


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?…


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é


CHAP2/LeUdeUX

L’accessibilité

Voirlavidéo(enanglais)«OpenWebPlateformeforthefuture»:https://vimeo.com/110256895(1min50’)


CHAP2/LeUdeUX

L’accessibilité

Voirledocument:01_Multiscreenworld_google.pdf


CHAP2/LeUdeUX

L’accessibilité

Voirledocument:01_Multiscreenworld_google.pdf


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


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/


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


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


CHAP2/LeUdeUX



LestestsutilisateursetinterviewsSansfairedetestsutilisateurs,sanssoumettresanscesselesinterfacesauxutilisateursfinaux,ilyadegrandeschancesdepasseràcôtédel’essentiel.C’estuneméthodeefficacepourévalueruneinterface:>comprendrecequifonctionne(ounon)>déterminerprécisément:lespointsd’achoppementsoulesaxesd’optimisation…

CHAP2/LeUdeUX


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


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



CHAP2/LeUdeUX


Réaliserdesergonomies,wireframe,prototypes…C’estuneformalisationefficacepour:•écouteretcomprendrelesschémasdepenséesdesutilisateurs(interactionsetdynamismeentre:contexte/utilisateur/système)•expérimenter•résoudredesproblèmeLesoutils>Figma>Sketch>AdobeXD


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/


CHAP2/LeUdeUX



CHAP2/LeUdeUX



CHAP2/LeUdeUX



Alors… enconclusion…qu’est-cequ’unebonneUX?


(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…

Documents

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