UX - La couleur du Zèbre · • Système de cache pour accélérer la navigation AMP (anglais >...
Transcript of UX - La couleur du Zèbre · • Système de cache pour accélérer la navigation AMP (anglais >...
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UX
etlemobile
§ Chiffresclés
§ Systèmesd’exploitationetinterfaces
§ Manipulationethabitudes
§ Stratégiemobiledédiéeouunifiée?
§ Continuitédel’expérienceetperceptiondutemps
§ L’importancedel’expérienceutilisateur
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Leschiffresclés
Étatdeslieux2018(Extraitdel’usaged’Internet,desréseauxsociauxetdumobileenFrance)
Lirearticle:https://www.blogdumoderateur.com/etat-lieux-2018-internet-reseaux-sociauxEtSlidecomplet:https://www.slideshare.net/wearesocial/le-digital-en-france-en-2018etlireaussi:https://comarketing-news.fr/les-francais-et-leur-mobile-tous-les-chiffres-a-connaitre-en-2018/
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Leschiffresclés
Étatdeslieux2018(Extraitdel’usaged’Internet,desréseauxsociauxetdumobileenFrance)
Lirearticle:https://www.blogdumoderateur.com/etat-lieux-2018-internet-reseaux-sociauxEtSlidecomplet:https://www.slideshare.net/wearesocial/le-digital-en-france-en-2018etlireaussi:https://comarketing-news.fr/les-francais-et-leur-mobile-tous-les-chiffres-a-connaitre-en-2018/
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Leschiffresclés
Étatdeslieux2018(Extraitdel’usaged’Internet,desréseauxsociauxetdumobileenFrance)
Lirearticle:https://www.blogdumoderateur.com/etat-lieux-2018-internet-reseaux-sociauxEtSlidecomplet:https://www.slideshare.net/wearesocial/le-digital-en-france-en-2018etlireaussi:https://comarketing-news.fr/les-francais-et-leur-mobile-tous-les-chiffres-a-connaitre-en-2018/
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Leschiffresclés
Étatdeslieux2018(Extraitdel’usaged’Internet,desréseauxsociauxetdumobileenFrance)
Lirearticle:https://www.blogdumoderateur.com/etat-lieux-2018-internet-reseaux-sociauxEtSlidecomplet:https://www.slideshare.net/wearesocial/le-digital-en-france-en-2018etlireaussi:https://comarketing-news.fr/les-francais-et-leur-mobile-tous-les-chiffres-a-connaitre-en-2018/
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Leschiffresclés
Étatdeslieux2018(Extraitdel’usaged’Internet,desréseauxsociauxetdumobileenFrance)
Lirearticle:https://www.blogdumoderateur.com/etat-lieux-2018-internet-reseaux-sociauxEtSlidecomplet:https://www.slideshare.net/wearesocial/le-digital-en-france-en-2018etlireaussi:https://comarketing-news.fr/les-francais-et-leur-mobile-tous-les-chiffres-a-connaitre-en-2018/
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Leschiffresclés
Étatdeslieux2018(Extraitdel’usaged’Internet,desréseauxsociauxetdumobileenFrance)
Lirearticle:https://www.blogdumoderateur.com/etat-lieux-2018-internet-reseaux-sociauxEtSlidecomplet:https://www.slideshare.net/wearesocial/le-digital-en-france-en-2018etlireaussi:https://comarketing-news.fr/les-francais-et-leur-mobile-tous-les-chiffres-a-connaitre-en-2018/
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Systèmesd’exploitationetinterfaces
2motssurlessystèmesd’exploitation
Lire:https://www.cnetfrance.fr/news/android-p-vs-ios-12-le-match-39869325.htm
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Systèmesd’exploitationetinterfaces
2motssurlessystèmesd’exploitation
Lire:https://www.cnetfrance.fr/news/android-p-vs-ios-12-le-match-39869325.htm
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Systèmesd’exploitationetinterfaces
…ducôtéinterfaceAndroidVSIOS
Lire(dansChromepourlatraductionfrançaise!;-):https://medium.com/@chunchuanlin/android-vs-ios-compare-20-ui-components-patterns-part-1-ad33c2418b45
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Systèmesd’exploitationetinterfaces
…ducôtéinterfaceAndroidVSIOS
Lire(dansChromepourlatraductionfrançaise!;-):https://medium.com/@chunchuanlin/android-vs-ios-compare-20-ui-components-patterns-part-1-ad33c2418b45
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Manipulationethabitudesutilisateurs
Unemanipulationspécifique
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Manipulationethabitudesutilisateurs
Unemanipulationspécifique
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Manipulationethabitudesutilisateurs
Unemanipulationspécifique
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Quellestratégiepourunprojetmobile?
>StratégiemobiledédiéeAPPMobilefirst>Stratégieplate-formeunifiéePWAAMPRWD
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Quellestratégiepourunprojetmobile?
>StratégiemobiledédiéeAPP>ApplicationnativeUneapplicationnativedésigneunepetitlogicielutilisésurmobileoutablette.Cesapplicationssetéléchargentets'installentsurlesmartphoneàl'inversed'uneapplicationwebmobilequi,quantàelle,n'estautrequ'unsitewebadaptépourlemobile.Mobilefirst(Mobileonly)Lemobilefirstn’estpasjusteproposeruneversionresponsiveouuneapplication:•Laconstructiond’unsitemobileenpremierlieuquipeutêtreétenduenmodedesktop.•Lacréationdetableauxdebordspécifiquesauxmobiles•L’investissementdansdesoutilstechniquesdédiésauxmobiles•Fairedestestsd’ergonomieetd’ABtestingdédiésauxmobiles•Analyserlesparcoursclientsenmodemobile(incluredes«personasmobiles»depuisuneconnexion3G,surdespetitsécrans,enmarchantparexemple).
http://blog.lunaweb.fr/mobile-only-on-en-est-ou/
http://glossaire.infowebmaster.fr/application-native/http://mobibot.io/blog/420/devenir-mobile-first-doit-etre-votre-objectif-en-2018.html#
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Quellestratégiepourunprojetmobile?
Lemobilefirstestunefaçondeconcevoiretdepilotersonsiteenmettantlemobileaucentredeschoix.
http://mobibot.io/blog/420/devenir-mobile-first-doit-etre-votre-objectif-en-2018.html#
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Quellestratégiepourunprojetmobile?
>Stratégieplate-formeunifiéePWACelarevientàdévelopperunsitequivafonctionnercommeuneapplicationsuruntéléphone:•Possibilitédel’installerdepuislebrowsersanspasserparunstoredetypegoogleplayouAppstore•Possibilitédenaviguersurlesitemêmehorsligne•SystèmedecachepouraccélérerlanavigationAMP(anglais>“AcceleratedMobilePages”)Cenouveautypedepageweboptimisépournossmartphonesestl’aboutissementd’unprojetentechnologieopensourcemené–entreautres–parGoogle,quisouhaitefaciliteretfluidifierlanavigationwebsurmobile.unetechnologieopensource
https://www.codeur.com/blog/vitesse-pages-mobile-amp/AMPouPWA:https://www.search-foresight.com/smx-paris-amp-pwa-nouveaux-paradigmes-search-mobile-pwamp/
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Quellestratégiepourunprojetmobile?
>Stratégieplate-formeunifiéeRWD>sitewebadaptatif(anglais>responsivewebdesign)estunsitewebdontlaconceptionviseàoffriruneconsultationconfortablesurdesécransdetaillesdifférentes.L'utilisateurpeutainsiconsulterlemêmesiteweb(viaordinateur,smartphone,tablettes,télévision…)
aveclemêmeconfortvisueletsansavoirrecoursaudéfilementhorizontalouauzoomavant/arrière(surlesappareilstactilesnotamment).
RWDouAPP:http://mobibot.io/blog/668/responsive-design-application-mobile.htmlAPPouPWA>Lire:https://fr.goodbarber.com/blog/faut-il-choisir-une-pwa-ou-une-app-native-a874/
ethttps://fr.slideshare.net/agencedagobert/le-responsive-design-par-dagobert?next_slideshow=1https://www.info-ecommerce.fr/9808/le-futur-du-web-est-aux-progressive-web-apps
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Quellestratégiepourunprojetmobile?
RWD
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Quellestratégiepourunprojetmobile?
RWD
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Continuitédel’expérienceetperceptiondutemps
Continuitédel’expériencedansl’UXL’UXFlowestl’étatd’engagementmaximald’unutilisateurdansuneactivité.Ilsetrouvedansunétattotaldeconcentration,d’engagementetdesatisfaction.
http://www.ux-republic.com/perception-temps-experience-utilisateur/iOS8:Appletentederenouvelerl’expériencemobile:https://www.itespresso.fr/ios-8-apple-tente-renouveler-experience-mobile-75978.html?inf_by=5c4ae306671db84f2d8b4a1b
Parcoursd’achat«1clic»surAmazoneAveclebouton«Acheteren1-click»etsanavigationfluide,Amazonmaîtriseleflow.Ainsi,entantqueclient,àpeinea-t-onterminéunecommandequenoussouhaitonsdéjàenfaireuneseconde!
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
Continuitédel’expérienceetperceptiondutemps
Perceptiondutempsdansl’UXGérerletemps:•VérifierleFlowdesesparcours,•Prendreletempsd’unediscussion,•Attendreestaussiuneexpérience,•Illustrerletemps(penserparexempleiciauxmicrointeractions…).Tenircomptedesspécificitésdumobile:>Minimiserdeseffortsdefrappe(attentionformulaire!:peud’actionsetpeudechamps),>Intégrerdesvaleurspardéfautintelligente(autodétectiondelocation,présaisiededonnées:mail,denom…)>Favoriserlessélectionssanssaisie(modesélectaulieudesearch(éviteungrandnombred’erreurdesaisie)>Proposerdesétiquettesdeformulaireapparente(àfavoriserhorsduchamp)>Veilleràunevalidationentempsréel(champparchamp-sansattendrelafind’unformulaire)
http://www.ux-republic.com/perception-temps-experience-utilisateur/-«Expérienceutilisateursurmobile»voirlavidéodeK.Jouanno:https://www.youtube.com/watch?v=5yqRsZDbzHY)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
L’importancedel’expérienceutilisateur
LesapplicationsmobilesdédiéesÉtudedecasdansledomainedelabanqueenligne«Expérienceutilisateuretbanquemobile»,uneétudemenéeparWordAppeal>panoramaUXd’interfacesd’applicationsmobilesbancairesexistantessurlemarchéfrançais.
Étudecomplète:https://fr.slideshare.net/Pelhammedia/exprience-utilisateur-et-banque-mobileLireaussil’article:http://blog.lunaweb.fr/ux-et-banque-mobile/
Contexted’utilisation:•48%desfrançaisutilisentlesservicesbancairessurleursmartphone,•Lesfrançaisconsultentleurapplimobilebanque11,3fois/mois,•Lesbanquessurmobilefontpartiedes3applislesplusutiliséeslematinauréveil,
UX>levierdecréationdevaleuravec39%desclientspourraientchangerdebanqueenraisond’uneexpérienceclientdéficiente(étudeDeloitte),>agitsurl’attractivitéetlaperformanceduservicelui-même.
Lesdéfisdumobile:•Atteindreunesatisfactionoptimale,•Assurerladisponibilitéetlaperformance,•Garantirlasécuritéetlaconfidentialité,•Adopterdesconventions,•Faciliterl’interactiontactile.
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
L’importancedel’expérienceutilisateur
Extrait«Expérienceutilisateuretbanquemobile»,uneétudemenéeparWordAppeal
Étudecomplète:https://fr.slideshare.net/Pelhammedia/exprience-utilisateur-et-banque-mobileLireaussil’article:http://blog.lunaweb.fr/ux-et-banque-mobile/
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
L’importancedel’expérienceutilisateur
Extrait«Expérienceutilisateuretbanquemobile»,uneétudemenéeparWordAppeal
Étudecomplète:https://fr.slideshare.net/Pelhammedia/exprience-utilisateur-et-banque-mobileLireaussil’article:http://blog.lunaweb.fr/ux-et-banque-mobile/
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
L’importancedel’expérienceutilisateur
Extrait«Expérienceutilisateuretbanquemobile»,uneétudemenéeparWordAppeal
Étudecomplète:https://fr.slideshare.net/Pelhammedia/exprience-utilisateur-et-banque-mobileLireaussil’article:http://blog.lunaweb.fr/ux-et-banque-mobile/
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
CHAP6/L’UXetlemobile
L’importancedel’expérienceutilisateur
Extrait«Expérienceutilisateuretbanquemobile»,uneétudemenéeparWordAppeal
Étudecomplète:https://fr.slideshare.net/Pelhammedia/exprience-utilisateur-et-banque-mobileLireaussil’article:http://blog.lunaweb.fr/ux-et-banque-mobile/
Opportunitésetspécificitésdumobilesurlesquelleslesecteurs’appuiepourenrichiretrenouvelerl’expérienceutilisateurbancaire:•Interactionstactiles(notamment3DTouch),•Reconnaissancebiométriquevocale(améliorerlasécurité)etphoto(déposerunchèque/bordereaunumérique),•Géolocalisation:pourlesdépenses(opérationeffectuéechezuncommerçantpourleretrouver),pourlasécurité(excluredesopérationssurcertaineszones)+pourlabanque>exploitationdesdonnéesàdesfinsmarketing…•SMS,agentsconversationnels(textuelmaisaussividéo),•Sanscontact,•Offres,servicesetfonctionnalitéspersonnalisés,accessiblesenraccourcis…
L’attractivitédel’interface(créationdevaleurd’usageàpartirdel’interface):•Ledesignd’information>datadesign(mettreenscènel’interfacepourtranscrirelesdonnéescomplexesdansuneformegraphiquequiapportedelaclarté).•Lesmétaphoresversundesignémotionnel(susciterunressentipositifauprèsdesclients):faciliterlalectureetlesactions,rôlesignalétiquedesicônesaupremierplan.•Lesanimationsquiapportentdesbénéficesconcrets,enaméliorantlaperceptiondelamanipulationdirecte,aidentl’utilisateuràvoirlerésultatdesactionsmenées,contextualisentl’information,permettentlacohésiondansl’enchaînementdesécrans.+manipuleravecfundesdonnéessensibles…sonargent…;-)
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
Avantdepartir;-)
Àvoirpourlefun…https://www.youtube.com/watch?v=rlYin9j0JCw
UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION
Agencedecommunication3placedesOrphelins67000StrasbourgITel0369964169I
www.lacouleurduzebre.com
(àbientôt!;-)
Contact:[email protected]