UX - La couleur du Zèbre · • Système de cache pour accélérer la navigation AMP (anglais > “Accelerated Mobile Pages”) Ce nouveau type de page web optimisé pour nos smartphones

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


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/



Leschiffresclés





Leschiffresclés





Leschiffresclés





Leschiffresclés





Leschiffresclés





Systèmesd’exploitationetinterfaces

2motssurlessystèmesd’exploitation

Lire:https://www.cnetfrance.fr/news/android-p-vs-ios-12-le-match-39869325.htm




2motssurlessystèmesd’exploitation

Lire:https://www.cnetfrance.fr/news/android-p-vs-ios-12-le-match-39869325.htm




…ducôtéinterfaceAndroidVSIOS

Lire(dansChromepourlatraductionfrançaise!;-):https://medium.com/@chunchuanlin/android-vs-ios-compare-20-ui-components-patterns-part-1-ad33c2418b45




…ducôtéinterfaceAndroidVSIOS

Lire(dansChromepourlatraductionfrançaise!;-):https://medium.com/@chunchuanlin/android-vs-ios-compare-20-ui-components-patterns-part-1-ad33c2418b45



Manipulationethabitudesutilisateurs

Unemanipulationspécifique











Quellestratégiepourunprojetmobile?

>StratégiemobiledédiéeAPPMobilefirst>Stratégieplate-formeunifiéePWAAMPRWD




>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#




Lemobilefirstestunefaçondeconcevoiretdepilotersonsiteenmettantlemobileaucentredeschoix.

http://mobibot.io/blog/420/devenir-mobile-first-doit-etre-votre-objectif-en-2018.html#




>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/




>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




RWD




RWD



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!



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)



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.




Extrait«Expérienceutilisateuretbanquemobile»,uneétudemenéeparWordAppeal

















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…;-)


Avantdepartir;-)

Àvoirpourlefun…https://www.youtube.com/watch?v=rlYin9j0JCw


Agencedecommunication3placedesOrphelins67000StrasbourgITel0369964169I

www.lacouleurduzebre.com

(àbientôt!;-)

Contact:[email protected]

Documents

UX - La couleur du Zèbre · • Système de cache pour accélérer la navigation AMP (anglais > “Accelerated Mobile Pages”) Ce nouveau type de page web optimisé pour nos smartphones