{"id":6358,"date":"2017-10-13T09:40:23","date_gmt":"2017-10-13T07:40:23","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6358"},"modified":"2020-03-08T14:46:43","modified_gmt":"2020-03-08T13:46:43","slug":"ameliorer-performance-entre-realite-ressenti-paris-web","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/ameliorer-performance-entre-realite-ressenti-paris-web","title":{"rendered":"Am\u00e9liorer la performance : entre r\u00e9alit\u00e9 et ressenti"},"content":{"rendered":"<p>La semaine derni\u00e8re j&rsquo;ai eu l&rsquo;occasion de donner une conf\u00e9rence lors de l&rsquo;\u00e9v\u00e9nement <a href=\"https:\/\/www.paris-web.fr\/2017\/conferences\/\">Paris Web<\/a>. Il s&rsquo;agissait de ma premi\u00e8re intervention en solo sur une th\u00e9matique que je n&rsquo;ai pas l&rsquo;habitude d&rsquo;aborder m\u00eame \u00e0 l&rsquo;\u00e9crit : l&rsquo;exp\u00e9rience utilisateur\u00a0avec comme sujet la performance ressentie. Voici un transcript de la conf\u00e9rence donn\u00e9e.<\/p>\n<p><!--more--><\/p>\n<h2>La vid\u00e9o de la conf\u00e9rence<\/h2>\n<p>J&rsquo;ai tent\u00e9 de retranscrire de t\u00eate mes propos en compl\u00e9tant quelque peu dans cet article. Vid\u00e9o et article sont donc compl\u00e9mentaires.<\/p>\n<p><iframe title=\"Am\u00e9liorer la Performance : entre r\u00e9alit\u00e9 et perception - Paris Web 2017\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/D5-Ze-1FFBc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2>Pourquoi parler de performance ?<\/h2>\n<p>Il est \u00e9vident que nous n&rsquo;avons pas tous la m\u00eame d\u00e9finition de performance, il est donc important de d\u00e9finir quelques notions et termes, mais aussi des objectifs, dont un principal : la satisfaction de l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span>.<\/p>\n<h3><span style=\"font-weight: 400;\">Les utilisateur<span class=\"s2\">\u00b7rice\u00b7<\/span>s n\u2019attendent pas<\/span><\/h3>\n<p>Les \u00e9tudes montrent que 53% des utilisateur\u00b7rice\u00b7s abandonnent un site qui met plus de 3 secondes \u00e0 se charger sur mobile. En sachant que le temps moyen de chargement d\u2019un site web en 3G est de 19 secondes, cela ne laisse que peut de chance \u00e0 vos visiteurs de finir (voire commencer) leur navigation sur mobile. <em>(source: <a href=\"https:\/\/www.soasta.com\/blog\/google-mobile-web-performance-study\/\">Soasta<\/a>)<\/em><\/p>\n<h3>Les utilisateur<span class=\"s2\">\u00b7rice\u00b7<\/span>s attendent de moins en moins<\/h3>\n<p>La dur\u00e9e moyenne d\u2019attention passe de 12 secondes (en 2000) \u00e0 8.25 secondes (en 2015). La baisse est vraiment importante en site peu d&rsquo;ann\u00e9es entre la premi\u00e8re prise de mesure et 2015.\u00a0Pour l&rsquo;anecdote c\u2019est une seconde de moins que la dur\u00e9e d\u2019attention d\u2019un poisson rouge. (source : <a href=\"http:\/\/www.statisticbrain.com\/attention-span-statistics\/\">StaticBrain<\/a>)<\/p>\n<p>Cette information nous permet quand m\u00eame d&rsquo;estimer la perte d&rsquo;attention de l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> (voire l&rsquo;utilisateur<span class=\"s1\">\u00b7rice lui\u00b7elle-m\u00eame<\/span>) alors qu&rsquo;il n&rsquo;est pas encore arriv\u00e9 \u00e0 10s d&rsquo;attente.<\/p>\n<h2>La notion de temps<\/h2>\n<p>Le temps est certainement l&rsquo;une des dimensions les plus difficiles \u00e0 appr\u00e9hender. Il ne s&rsquo;agit pas juste de la mesure (et encore m\u00eame l\u00e0 c&rsquo;est compliqu\u00e9), mais aussi d&rsquo;un ressenti.<\/p>\n<h3>Il existe plusieurs temps<\/h3>\n<p><strong>Le temps objectif<\/strong> est celui qui est mesurable gr\u00e2ce \u00e0 une montre. C&rsquo;est la dur\u00e9e d&rsquo;une action, d&rsquo;un chargement de page, c&rsquo;est les secondes \u00e9coul\u00e9es encore un d\u00e9but et une fin.<\/p>\n<p><strong>Le temps psychologique<\/strong> ou \u00e9galement le temps ressenti est plus difficilement mesurable et va d\u00e9pendre de plusieurs param\u00e8tres li\u00e9s au contexte et \u00e0 la personne.<\/p>\n<p>Les deux peuvent servir dans le cadre de la performance, mais nous allons surtout aborder le deuxi\u00e8me.<\/p>\n<h3>Les dur\u00e9es psychologiques<\/h3>\n<p>Plusieurs \u00e9tudes crois\u00e9es ont permis de d\u00e9finir des intervalles de temps approximatifs qui permettent de classer les d\u00e9lai suivant des ressentis.<\/p>\n<ul>\n<li><strong>de 0,1 \u00e0 0,2s<\/strong> : aucun d\u00e9lai n&rsquo;est ressenti par la personne, c&rsquo;est le bon interval pour placer des animations tr\u00e8s courtes qui donnent une impression de fluidit\u00e9 dans les transitions.<\/li>\n<li><strong>de 0,5 \u00e0 1s<\/strong> : il s&rsquo;agit d&rsquo;un d\u00e9lai imm\u00e9diat proche d&rsquo;une r\u00e9ponse d&rsquo;humain \u00e0 humain, un \u00e9change rapide o\u00f9 aucun indice ne laisse \u00e0 penser qu&rsquo;il y a une attente.<\/li>\n<li><strong>de 2 \u00e0 5s<\/strong> : c&rsquo;est le d\u00e9lai optimal pour une t\u00e2che, une activit\u00e9, dont on attend une r\u00e9ponse. Le sentiment qu&rsquo;une action \u00e0 eu lieu et que l&rsquo;attente aura \u00e9t\u00e9 raisonnable.<\/li>\n<li><strong>de 5 \u00e0 10s<\/strong> : c&rsquo;est la dur\u00e9e maximale d&rsquo;attention d&rsquo;un utilisateur<span class=\"s1\">\u00b7rice<\/span> pour une t\u00e2che donn\u00e9e.<\/li>\n<\/ul>\n<h3>Perception non lin\u00e9aire<\/h3>\n<blockquote><p>Cette semaine est pass\u00e9e super vite, je n&rsquo;ai pas vu le temps filer. \u2014Quelqu&rsquo;un, parfois.<\/p><\/blockquote>\n<p>La perception du temps n&rsquo;est pas lin\u00e9aire, dans le sens o\u00f9 un m\u00eame temps objectif peut avoir un temps psychologique compl\u00e8tement diff\u00e9rent.<br \/>\nCe ressenti du temps qui passe d\u00e9pend de plusieurs param\u00e8tres comme :<\/p>\n<ul>\n<li><strong>Le type et la complexit\u00e9 de la t\u00e2che<\/strong> : au plus la t\u00e2che en elle-m\u00eame est complexe, au plus l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> va prendre du temps pour la faire, mais \u00e9galement y porter beaucoup d&rsquo;attention et possiblement ne pas voir le temps qui passe.<\/li>\n<li><strong>L\u2019exp\u00e9rience de la personne sur des t\u00e2ches similaires<\/strong> : lorsque la personne est habitu\u00e9e \u00e0 une t\u00e2che proche de celle qu&rsquo;il accomplit, il l&rsquo;a fait plus rapide, mais peut \u00e9galement en perdre l&rsquo;envie et la motivation et avoir le sentiment de s&rsquo;ennuyer.<\/li>\n<li><strong>La disposition de la personne<\/strong> : le stress, la fatigue, l&rsquo;\u00e2ge peuvent \u00e9galement \u00eatre des facteurs.<\/li>\n<\/ul>\n<h3>Comment am\u00e9liorer la perception de l&rsquo;attente ?<\/h3>\n<p>On va pouvoir jouer sur diff\u00e9rents leviers :<\/p>\n<ul>\n<li><strong>La stimulation<\/strong> : ce sont les indices qui rappellent l&rsquo;attente \u00e0 l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span>, comme par exemple une animation cyclique, une interface qui fige, etc.<\/li>\n<li><strong>La dur\u00e9e<\/strong> : la vraie dur\u00e9e d&rsquo;une action, ou celle ressentie.<\/li>\n<li><strong>L&rsquo;attention<\/strong> : l&rsquo;occupation du cerveau \u00e0 une t\u00e2che (la principale) ou \u00e0 une autre (un d\u00e9tournement).<\/li>\n<\/ul>\n<p>Pour cela on va manipuler la personne \u00e0 plusieurs niveaux, notamment sur le temps objectif en optimisant r\u00e9ellement le temps de chargement, sur les indicateurs de l&rsquo;attente en fournissant un indicateur adapt\u00e9 au type d&rsquo;attente, sur le d\u00e9tournement de l&rsquo;attention de l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> gr\u00e2ce \u00e0 quelques feintes, et enfin sur mon pr\u00e9f\u00e9r\u00e9 : un simple mensonge. :p<\/p>\n<h2>Ce que vous avez d\u00e9j\u00e0 fait<\/h2>\n<p>J&rsquo;esp\u00e8re que c&rsquo;est le cas, car le but n&rsquo;est pas de trainer sur l&rsquo;aspect technique.<\/p>\n<h3>La solution serveur (\u00e0 jour)<\/h3>\n<p>Nginx, Apache\u2026 testez et retenez le meilleur pour vos besoins.\u00a0Nginx par exemple est meilleur (2 fois plus rapide qu\u2019Apache) pour servir des documents statiques l\u00e0 o\u00f9\u00a0Apache et Nginx s\u2019\u00e9quivalent sur l\u2019aspect dynamique.<\/p>\n<p>Le fait de conserver votre solution (syst\u00e8me) \u00e0 jour vous permet aussi de rester performant. Des mises \u00e0 jour de s\u00e9curit\u00e9 sont souvent disponibles avec les mises \u00e0 jour de performance. Un site hack\u00e9 offline n&rsquo;a plus vraiment besoin d&rsquo;\u00eatre performant finalement\u2026<br \/>\nPHP7 par exemple est presque 2 fois plus performant que PHP 5.6 (sa version pr\u00e9c\u00e9dente). Apache entre sa version 2.2 et 2.4 est environ 40% plus performant.<\/p>\n<p>Rien qu&rsquo;en maintenant votre syst\u00e8me \u00e0 jour vous pouvez gagner de pr\u00e9cieuses secondes.<\/p>\n<h3>La mise en cache<\/h3>\n<p>On en parle mais il y a encore pas mal de sites web qui tournent sans solution de mise en cache. Je parle de deux caches diff\u00e9rents : le cache serveur et le <a href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mettre-en-cache-les-fichiers-statiques-de-votre-site-web-htaccess\">cache navigateur<\/a>.<\/p>\n<ul>\n<li><strong>Le cache serveur<\/strong> :\u00a0\u00c9vite \u00e0 votre machine de refaire les calculs en cr\u00e9ant des fichiers statiques r\u00e9g\u00e9n\u00e9r\u00e9s r\u00e9guli\u00e8rement.<\/li>\n<li><strong>Le cache navigateur<\/strong> :\u00a0Stocke des fichiers dans le navigateur client pour les servir plus rapidement puisqu&rsquo;ils sont stock\u00e9s localement.<\/li>\n<\/ul>\n<p>Les deux combin\u00e9s vous permettront de gagner \u00e9norm\u00e9ment de temps de chargement.<\/p>\n<h3>Retirez les publicit\u00e9s<\/h3>\n<p><span style=\"font-weight: 400;\">Les publicit\u00e9s et scripts de r\u00e9seaux sociaux sont parfois les plus lourdes ressources d\u2019une page. Trouvez une alternative, retirez-les. Cela peut para\u00eetre radical, mais si vous d\u00e9pendez enti\u00e8rement de la publicit\u00e9, peut-\u00eatre qu&rsquo;il est temps de trouver une alternative \u00e0 votre <em>business-model<\/em>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.dareboost.com\/fr\/home\">Dareboost<\/a>, l\u2019outil de mesure de performance de votre site web vous propose de faire des mesures comparatives avec et sans ces ressources, vous devriez essayer, cela pourrait vous faire voir la performance d&rsquo;un autre \u0153il.<\/span><\/p>\n<h3>Pensez \u00e0 votre Progressive Web App<\/h3>\n<p>Profiter des avantages des Service Workers pour b\u00e9n\u00e9ficier d&rsquo;aspects comme :<\/p>\n<ul>\n<li><strong>Offline \/ Connexion bas d\u00e9bit<\/strong> :\u00a0permet d\u2019acc\u00e9der \u00e0 des ressources m\u00eame hors-ligne. Les informations sont alors mises \u00e0 jour d\u00e8s qu&rsquo;une connexion est trouv\u00e9e et peuvent l&rsquo;\u00eatre au compte-gouttes.<\/li>\n<li><strong>Rapidit\u00e9<\/strong> : une partie des fichiers \u00e9tant stock\u00e9e sur la machine de l\u2019utilisateur\u00b7rice, la web app est charg\u00e9e quasiment instantan\u00e9ment.<\/li>\n<\/ul>\n<h3>Mais sans oublier\u2026<\/h3>\n<p class=\"p1\"><span class=\"s1\">Parce qu\u2019on ne peut pas tout voir l\u00e0 maintenant ensemble, pensez aussi \u00e0 :<\/span><\/p>\n<ul>\n<li><span class=\"s2\">HTTP\/2,<\/span><\/li>\n<li><span class=\"s2\">CSS Critical Path,<\/span><\/li>\n<li><span class=\"s2\">local\/sessionStorage,<\/span><\/li>\n<li><span class=\"s2\">Optimiser vos bases de donn\u00e9es,<\/span><\/li>\n<li><span class=\"s2\">Optimiser vos images (formats, compression),<\/span><\/li>\n<li><span class=\"s2\">Minifier et concat\u00e9ner CSS et JS<\/span><\/li>\n<li><span class=\"s2\">CDN G\u00e9olocalis\u00e9<\/span><\/li>\n<li>etc.<\/li>\n<\/ul>\n<h3>Les r\u00e9ponses imm\u00e9diates<\/h3>\n<p>L\u2019interface doit faire ressortir les r\u00e9ponses imm\u00e9diates. Ce sont les r\u00e9ponses que l&rsquo;utilisateur\u00b7rice attend au survol, focus ou activation d\u2019un \u00e9l\u00e9ment par exemple, ou encore lors d&rsquo;une action instantan\u00e9e trait\u00e9e en JS sans forc\u00e9ment avoir besoin d&rsquo;une r\u00e9ponse serveur.<\/p>\n<p>Proposez un changement d&rsquo;\u00e9tat visuel permet de confirmer aupr\u00e8s de la personne que l&rsquo;action s&rsquo;est bien d\u00e9roul\u00e9e. Comme par exemple sur cette copie de cl\u00e9 dans l&rsquo;interface web de SecuPress.<\/p>\n<div style=\"width: 778px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6358-1\" width=\"778\" height=\"184\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/copy-key.mp4?_=1\" \/><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/copy-key.mp4\">https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/copy-key.mp4<\/a><\/video><\/div>\n<p>Pour cet exemple pr\u00e9cis, il y a un tutoriel sur ce blog pour cr\u00e9er un <a href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/copier-presse-papier-en-javascript\">\u00ab\u00a0copy to clipboard\u00a0\u00bb en JS avec une jolie animation<\/a>.<\/p>\n<h2>Faire patienter l&rsquo;utilisateur\u00b7rice<\/h2>\n<p>Pour faire patienter un utilisateur\u00b7rice, rien de mieux que de lui indiquer qu&rsquo;une action est en cours par un indice visuel, notamment s&rsquo;il doit attendre entre une et plusieurs secondes.<\/p>\n<p>Il existe plusieurs mani\u00e8res de proc\u00e9der pour faire patienter une personne, plusieurs indices visuels qui n\u2019expriment pas la m\u00eame chose.<\/p>\n<ul>\n<li><strong>Le spinner<\/strong> :\u00a0Ce petit truc qui tourne ind\u00e9finiment, id\u00e9al pour les courtes attente.<\/li>\n<li><strong>La barre de chargement<\/strong> :\u00a0Qui propose un d\u00e9but et une fin, id\u00e9al pour les dur\u00e9es d\u00e9finies.<\/li>\n<li><strong>Les faux contenus<\/strong> :\u00a0Pour aider \u00e0 la projection et la d\u00e9couverte de l&rsquo;interface.<\/li>\n<li><strong>Les mots<\/strong> :\u00a0Pour expliciter le pourquoi du comment, sous la forme de phrases claires.<\/li>\n<\/ul>\n<h3>Le spinner<\/h3>\n<p class=\"p1\"><span class=\"s1\">Pratique pour une attente courte, par exemple lorsqu&rsquo;un<\/span><span class=\"s2\">\u00a0traitement d&rsquo;une information dure entre 2 et 8 secondes. En dessous de 2 secondes vous risquez de provoquer la sensation e bug visuel : votre spinner se met en place, l&rsquo;utilisateur\u00b7rice commence \u00e0 calculer qu&rsquo;il est cens\u00e9 attendre puis pouf ! Le spinner disparait rapidement. Si votre traitement dure moins de 2 secondes, proposez \u00e9galement un visuel pour la fin de traitement, affich\u00e9 plus longtemps, comme le fait Stripe lors du processus de paiement.<br \/>\n<\/span><\/p>\n<div style=\"width: 296px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6358-2\" width=\"296\" height=\"326\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/loader-stripe.mp4?_=2\" \/><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/loader-stripe.mp4\">https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/loader-stripe.mp4<\/a><\/video><\/div>\n<p>N&rsquo;oubliez pas qu&rsquo;un indicateur doit \u00eatre plac\u00e9 proche de la zone activ\u00e9e par l&rsquo;utilisateur\u00b7rice pour que sa d\u00e9couverte soit facilit\u00e9.<\/p>\n<p>N&rsquo;h\u00e9sitez pas \u00e9galement \u00e0 \u00eatre originaux sur l&rsquo;aspect de vos spinners. En effet cela vous permet d&rsquo;int\u00e9grer les moments d&rsquo;attente \u00e0 votre identit\u00e9 graphique : animation du logo ou d&rsquo;un \u00e9l\u00e9ment de la charte. Cela permet de cr\u00e9er des boucles anim\u00e9es un poil plus longue, d\u00e9lecter l&rsquo;utilisateur<span class=\"s2\">\u00b7rice<\/span> si l&rsquo;animation est sympa et augmenter sa capacit\u00e9 d&rsquo;attente et sa satisfaction.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-6368\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/hypnotik.gif\" alt=\"\" width=\"800\" height=\"328\" \/><\/p>\n<p>Si la situation vous le permet, ajoutez un brin d&rsquo;humour ou de \u00ab\u00a0kawai\u00a0\u00bb, comme par exemple cette petite collection de chats :p<\/p>\n<p class=\"center\"><img decoding=\"async\" class=\"alignnone wp-image-6369\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/animaloader-cat-b8.gif\" alt=\"\" width=\"199\" height=\"150\" \/> <img decoding=\"async\" class=\"alignnone wp-image-6370\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/animaloader-cat.gif\" alt=\"\" width=\"300\" height=\"150\" \/> <img decoding=\"async\" class=\"alignnone wp-image-6371\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/animaloader-cat2.gif\" alt=\"\" width=\"199\" height=\"150\" \/><\/p>\n<h3>La barre de chargement<\/h3>\n<p>Pour une attente quantifiable moyenne, c&rsquo;est l&rsquo;indicateur id\u00e9al. En effet, la barre de chargement propose un d\u00e9but et une fin de t\u00e2che d\u00e9finis par sa section compl\u00e8te et la jauge interne qui \u00e9volue. Cela permet \u00e0 l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> d&rsquo;estimer le temps restant pour lui permettre de faire autre chose en attendant, ou d&rsquo;estimer si l&rsquo;attente vaut le coup.<\/p>\n<p>Des recherches ont permis de sugg\u00e9rer que l&rsquo;acc\u00e9l\u00e9ration en fin de chargement de la barre provoqu\u00e9 un sentiment positif, puisque celle-ci fini par proposer un processus plus rapide qu&rsquo;estim\u00e9 initialement.<\/p>\n<div style=\"width: 1060px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6358-3\" width=\"1060\" height=\"124\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/progressbar-speed.mp4?_=3\" \/><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/progressbar-speed.mp4\">https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/progressbar-speed.mp4<\/a><\/video><\/div>\n<p>De la m\u00eame mani\u00e8re, une animation de d\u00e9filement invers\u00e9 dans la jauge elle-m\u00eame provoquerait une sensation de vitesse positive.<\/p>\n<div style=\"width: 1048px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6358-4\" width=\"1048\" height=\"112\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/progressbar-animated.mp4?_=4\" \/><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/progressbar-animated.mp4\">https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/progressbar-animated.mp4<\/a><\/video><\/div>\n<p>Sur-optimisation ou pas, ces \u00e9tudes sont \u00e0 prendre en compte dans le ressenti de vos utilisateur<span class=\"s2\">\u00b7rice\u00b7<\/span>s. Faites vos tests \ud83d\ude09<\/p>\n<h3>Les faux contenus<\/h3>\n<p>Les faux contenus, nomm\u00e9s aussi <em>placeholder<\/em> permettent de mettre en place l&rsquo;interface petit \u00e0 petit et de projeter l&rsquo;utilisateur<span class=\"s2\">\u00b7rice dans ce qu&rsquo;elle sera une fois enti\u00e8rement charg\u00e9e. Anim\u00e9s, ces faux contenus peuvent permettre de faire patienter l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> tout en le faisant passer en phase de d\u00e9couverte pr\u00e9alable de l&rsquo;interface, ce qui facilitera grandement sa progression dans celle-ci une fois tous les \u00e9l\u00e9ments charg\u00e9s.<\/span><\/p>\n<p>Vous pouvez utiliser ces faux contenus pour l&rsquo;ensemble de l&rsquo;interface, ou pour les \u00e9l\u00e9ments secondaires par exemple, laissant ainsi la priorit\u00e9 aux contenus principaux pour se charger.<\/p>\n<div style=\"width: 349px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6358-5\" width=\"349\" height=\"364\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/linkedin-content-placeholder.mp4?_=5\" \/><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/linkedin-content-placeholder.mp4\">https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/linkedin-content-placeholder.mp4<\/a><\/video><\/div>\n<h3>Paroles, les Paroles\u2026<\/h3>\n<p>Et parfois, ajouter simplement une information claire avec des mots, des phrases, peut largement arranger votre affaire. Cela peut sembler b\u00eate dit ainsi, mais \u00e7a rassurer et souvent les designers l&rsquo;oublient.<\/p>\n<p>Vous pouvez par exemple expliquer le processus en cours, donner les \u00e9tapes accomplies du processus, faire un d\u00e9compte des t\u00e2ches restantes, etc. Donner cette lecture \u00e0 l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> le met dans une position d&rsquo;attente active, au lieu de rester passif. Je vais vous expliquer \u00e7a.<\/p>\n<h2>D\u00e9tourner l&rsquo;attention de l&rsquo;attente<\/h2>\n<p><span class=\"s2\">Quand l&rsquo;utilisateur\u00b7rice est occup\u00e9 \u00e0 une autre t\u00e2che que celle de l\u2019attente il passe d&rsquo;attente\u00a0<b>passive<\/b> \u00e0 <b>active<\/b>. Son cerveau est occup\u00e9 sur autre chose que les indicateurs de l&rsquo;attente, il a l&rsquo;impression que le temps passe plus rapidement.<\/span><\/p>\n<p>Cette activit\u00e9 propos\u00e9e \u00e0 la personne peut \u00eatre ludique ou utile, selon vos envies ou vos besoins.<\/p>\n<h3>Proposer de la lecture<\/h3>\n<p>Vous pouvez par exemple donner de la lecture en offrant aux u<span class=\"s2\">tilisateur\u00b7rice\u00b7s les news de votre blog, des astuces sur l&rsquo;interface, raconter une anecdote ou blague.<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-6382\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/hearthstone-waiting-screen.jpg\" alt=\"\" width=\"1128\" height=\"700\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/hearthstone-waiting-screen.jpg 1128w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/hearthstone-waiting-screen-300x186.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/hearthstone-waiting-screen-768x477.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/hearthstone-waiting-screen-600x372.jpg 600w\" sizes=\"(max-width: 1128px) 100vw, 1128px\" \/><\/p>\n<p>Ce screenshot de HearthStone pendant la mise en place du jeu propose plusieurs textes : de l&rsquo;humour, une astuce sur le jeu ou l&rsquo;interface, et le temps d&rsquo;attente estim\u00e9 avant le d\u00e9but de la partie.<\/p>\n<h3>Proposer une activit\u00e9<\/h3>\n<p>Proposer une activit\u00e9 utile ou ludique \u00e0 l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> est encore un bon moyen de d\u00e9tourner son attention. Par exemple sur Youtube, lorsque vous envoyez une vid\u00e9o, l&rsquo;interface propose d&rsquo;afficher le temps d&rsquo;attente avec plusieurs indicateurs, mais vous invite \u00e9galement \u00e0 <strong>renseigner une foule d&rsquo;informations<\/strong> sur votre vid\u00e9o, vous faisant passer \u00e0 une t\u00e2che utile le temps du chargement de la vid\u00e9o.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/youtube-upload-3249.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6384\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/youtube-upload-3249.png\" alt=\"\" width=\"2088\" height=\"966\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/youtube-upload-3249.png 2088w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/youtube-upload-3249-300x139.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/youtube-upload-3249-768x355.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/youtube-upload-3249-600x278.png 600w\" sizes=\"(max-width: 2088px) 100vw, 2088px\" \/><\/a><\/p>\n<p>Autre cas, celui d&rsquo;un compte utilisateur<span class=\"s1\">\u00b7rice<\/span> \u00e0 valider par un administrateur. Imaginons qu&rsquo;un utilisateur<span class=\"s1\">\u00b7rice<\/span> vienne de s&rsquo;inscrire sur votre site et que tous les comptes soient valid\u00e9 manuellement. Pendant l&rsquo;attente de sa validation, <strong>laissez \u00e0 l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> la possibilit\u00e9 de compl\u00e9ter son profil<\/strong>, ne le bloquez pas. D&rsquo;autant plus qu&rsquo;il vous est impossible ici de lui fournir un indicateur d&rsquo;attente. Sur un projet sur lequel je travaille actuellement, voici ce que nous avons propos\u00e9 comme message.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/esthetic-consult-account.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6385\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/esthetic-consult-account.jpg\" alt=\"\" width=\"1200\" height=\"661\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/esthetic-consult-account.jpg 1200w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/esthetic-consult-account-300x165.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/esthetic-consult-account-768x423.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/esthetic-consult-account-600x331.jpg 600w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a><\/p>\n<p>Une autre activit\u00e9 distrayante est <strong>la possibilit\u00e9 d&rsquo;\u00e9changer avec une communaut\u00e9<\/strong>. Je reprends un exemple dans le monde du vid\u00e9oludique car les interfaces sont souvent assez bien travaill\u00e9es lorsque le jeu est abouti. Sur League Of Legend par exemple, lors de la s\u00e9lection des champions, plusieurs indicateurs d&rsquo;attente sont en place (autour des avatars des champions un spinner tourne), un d\u00e9compte du temps restant figure en haut de l&rsquo;\u00e9cran, et une fen\u00eatre de discussion est disponible en bas \u00e0 gauche, en plus de votre t\u00e2che de s\u00e9lection de champion. De quoi faire patienter un peu le temps que le jeu se mette en place.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/lol-selection.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6386\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/lol-selection.jpg\" alt=\"\" width=\"1276\" height=\"722\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/lol-selection.jpg 1276w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/lol-selection-300x170.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/lol-selection-768x435.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/lol-selection-600x339.jpg 600w\" sizes=\"(max-width: 1276px) 100vw, 1276px\" \/><\/a><\/p>\n<h2>Mentir sur le temps d&rsquo;attente<\/h2>\n<p>J&rsquo;aime bien cet aspect, mais pour le bien de votre visiteur. En effet, il n&rsquo;a pas besoin de toujours tout savoir sur les processus et le moteur pr\u00e9sent sous le capot (sous l&rsquo;interface).<\/p>\n<h3>Fake It Until You Make It<\/h3>\n<p>C&rsquo;est l&rsquo;id\u00e9e de la positive attitude : partir du principe que dans 95 ou 99% des cas votre syst\u00e8me va r\u00e9pondre positivement (succ\u00e8s) \u00e0 votre utilisateur<span class=\"s1\">\u00b7rice<\/span>. Vous d\u00e9clenchez donc au plus t\u00f4t une r\u00e9ponse positive sur votre interface gr\u00e2ce \u00e0 un indice visuel. Puis si jamais dans les 1% des cas restants vous devez intervenir, affichez un message d&rsquo;erreur pour alerter l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span>. Ainsi votre application\/site web paraitra performant dans 99% des cas.<\/p>\n<p>C&rsquo;est ce que fait Twitter lors d&rsquo;une action de like (anciennement mise en favori).<\/p>\n<div style=\"width: 2876px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6358-6\" width=\"2876\" height=\"796\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/like-twitter.mp4?_=6\" \/><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/like-twitter.mp4\">https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/like-twitter.mp4<\/a><\/video><\/div>\n<p>\u00c0 gauche dans la vid\u00e9o, la fen\u00eatre d&rsquo;un tweet sur laquelle je vais faire un like. Vous voyez d&rsquo;abord le coeur r\u00e9agir. A droite, sur la vue Network, on voit \u00e0 quel moment la r\u00e9ponse serveur est faite. \u00c0 ce moment seulement le chiffre du nombre de like est incr\u00e9ment\u00e9.<\/p>\n<h3>Mensonge par omission<\/h3>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/instagram-loading-2-4653.jpg\"><img decoding=\"async\" class=\"alignleft wp-image-6388 \" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/instagram-loading-2-4653-337x600.jpg\" alt=\"\" width=\"169\" height=\"301\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/instagram-loading-2-4653-337x600.jpg 337w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/instagram-loading-2-4653-169x300.jpg 169w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/instagram-loading-2-4653.jpg 750w\" sizes=\"(max-width: 169px) 100vw, 169px\" \/><\/a><br \/>\nC&rsquo;est un peu ce que fait Instagram \u00e9galement.<\/p>\n<p>Le principe est de ne pas tout vous dire sur le processus en cours et de le cacher en t\u00e2che de fond. Lorsque vous chargez une image sur Instagram, pendant la phase o\u00f9 vous renseignez votre description de photo, la photo est charg\u00e9e en t\u00e2che de fond. Lorsque vous publiez cette photo, elle l&rsquo;est instantan\u00e9ment car elle a eu le temps de se charger sur les serveurs du site.<\/p>\n<p>Si la photo n&rsquo;est toujours pas charg\u00e9e, l&rsquo;interface s&rsquo;affiche quand m\u00eame avec une photo floue et un loader dessus, comme sur l&rsquo;image de gauche ici, permettant de faire patienter l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span>.<\/p>\n<p>C&rsquo;est \u00e9galement ce que nous avons entrepris lors du travail sur Imagify. Lorsque l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> embarque le plugin pour la premi\u00e8re fois sur son site web, il est invit\u00e9 \u00e0 suivre un processus d&rsquo;inscription et param\u00e9trage en 3 \u00e9tapes. Pendant ce processus, nous lan\u00e7ons un travail de calcul dans la biblioth\u00e8que des m\u00e9dias de WordPress afin de conna\u00eetre ses habitudes de consommation en mega octets. Ainsi lorsqu&rsquo;il arrive sur la page de r\u00e9glage du plugin, s&rsquo;il souhaite ajuster son offre, nous lui proposons rapidement une offre adapt\u00e9e \u00e0 ses besoins et l&rsquo;informons m\u00eame si la version gratuite lui suffit.<\/p>\n<figure id=\"attachment_6390\" aria-labelledby=\"figcaption_attachment_6390\" class=\"wp-caption alignnone\" style=\"width: 1210px\"><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/imagify-offer-modal.jpg\"><img decoding=\"async\" class=\"wp-image-6390 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/imagify-offer-modal.jpg\" alt=\"\" width=\"1200\" height=\"1277\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/imagify-offer-modal.jpg 1200w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/imagify-offer-modal-282x300.jpg 282w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/imagify-offer-modal-768x817.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/imagify-offer-modal-564x600.jpg 564w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption id=\"figcaption_attachment_6390\" class=\"wp-caption-text\">Ici sur la partie haute de l&rsquo;\u00e9cran, les chiffres affich\u00e9s on \u00e9t\u00e9 calcul\u00e9s en t\u00e2che de fond.<\/figcaption><\/figure>\n<h3>Du contenu \u00e0 la demande<\/h3>\n<p>Une bonne technique pour ne pas faire attendre l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> pour le contenu principal, c&rsquo;est de charger le contenu secondaire ou plus bas dans la page uniquement quand c&rsquo;est n\u00e9cessaire. La technique du Lazyload permet de faire \u00e7a pour les images, les iframes ou d&rsquo;autres composants de votre page.<\/p>\n<p>C&rsquo;est ce que fait Medium par exemple pour ses images, en proposant une version floue basse qualit\u00e9 de l&rsquo;image pour commencer \u00e0 la mettre en place dans la page, puis en affichant la version compl\u00e8tement une fois charg\u00e9e.<br \/>\n<a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/netflix-logo.jpg\"><img decoding=\"async\" class=\"alignleft wp-image-6392\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/netflix-logo.jpg\" alt=\"\" width=\"200\" height=\"199\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/netflix-logo.jpg 400w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/netflix-logo-100x100.jpg 100w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/netflix-logo-300x300.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/netflix-logo-32x32.jpg 32w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/netflix-logo-50x50.jpg 50w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/netflix-logo-64x64.jpg 64w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/netflix-logo-96x96.jpg 96w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/netflix-logo-128x128.jpg 128w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a>C&rsquo;est \u00e9galement ce que fait Netflix. C&rsquo;est le principe de la <strong>Early Completion<\/strong>\u00a0: commencez avec un chargement rapide et court, et proposez un d\u00e9but de contenu, pendant ce temps Netflix s&rsquo;occupe de charger le reste de la vid\u00e9o. La plupart des solutions de service vid\u00e9o en ligne propose ce principe.<\/p>\n<p>Netflix va plus loin puisqu&rsquo;il arrive en g\u00e9n\u00e9ral \u00e0 ne pas vous couper le b\u00e9n\u00e9fice du service lorsque votre connexion flanche. En effet la vid\u00e9o va baisser en qualit\u00e9 pendant un moment le temps que votre connexion reprenne du poil de la b\u00eate. Une fois fait, la vid\u00e9o repasse en pleine qualit\u00e9.<\/p>\n<h3>Cacher derri\u00e8re une animation<\/h3>\n<p>Une autre mani\u00e8re de cacher un peu la poussi\u00e8re sous le tapis c&rsquo;est de cacher un processus derri\u00e8re une animation pour gagner quelques centi\u00e8mes de secondes et m\u00eame quelques secondes parfois. Par exemple, votre utilisateur<span class=\"s1\">\u00b7rice<\/span> clique sur un lien dans votre application, une vid\u00e9o doit s&rsquo;afficher et se jouer. Entre le moment du clic et le moment o\u00f9 la vid\u00e9o va se lancer, effectuez une animation vers cette vid\u00e9o, puis des \u00e9l\u00e9ments de l&rsquo;interface de lecture, le temps de gagner 1 \u00e0 2s pour pr\u00e9-charger les premi\u00e8res secondes de vid\u00e9o.<\/p>\n<div style=\"width: 247px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6358-7\" width=\"247\" height=\"441\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/demo-animations.mp4?_=7\" \/><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/demo-animations.mp4\">https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/demo-animations.mp4<\/a><\/video><\/div>\n<h3>Et si on prenait notre temps ?<\/h3>\n<p>Parfois, il faut savoir prendre son temps. J&rsquo;aime raconter l&rsquo;anecdote du restaurant. Elle est courte, vous verrez.<br \/>\nVous commandez un plat dans un restaurant, 4 min apr\u00e8s vous \u00eates servi. Ok, il y a un souci, on est d&rsquo;accord ? 4 minutes pour pr\u00e9parer un plat ce n&rsquo;est plus signe de performance, mais plut\u00f4t de mauvaise qualit\u00e9 (cuisine au micro-onde, plat pr\u00e9-p\u00e9rarer)<\/p>\n<p>En parlant de qualit\u00e9, que penseriez-vous d&rsquo;un plugin de s\u00e9curit\u00e9 pour votre site WordPress qui vous proposerez un r\u00e9sultat de scan et des r\u00e9solutions de probl\u00e8me en 1 \u00e9tapes et en moins de 10 secondes ? Performant ? Peu qualitatif ? C&rsquo;est un peu la question que nous nous sommes pos\u00e9e lors de notre travail sur le plugin SecuPress. Prendre son temps, diviser les interventions de l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> en 4 \u00e9tapes, prendre du temps \u00e0 expliquer ce qui va \u00eatre fait et pourquoi, permet de restaurer la confiance et donner de la plus value \u00e0 un achat immat\u00e9riel (SecuPress ayant une version grauite et payante).<\/p>\n<p>Ci-dessous la phase de scan (acc\u00e9l\u00e9r\u00e9e pour la d\u00e9mo).<\/p>\n<div style=\"width: 2128px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6358-8\" width=\"2128\" height=\"1188\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/secupres-scanning-x4.mp4?_=8\" \/><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/secupres-scanning-x4.mp4\">https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/secupres-scanning-x4.mp4<\/a><\/video><\/div>\n<p>Comme vous le voyez pendant l&rsquo;attente, nous avons une barre de progression, le bout de la barre clignote pour informer de la t\u00e2che en cours. Un pourcentage et affich\u00e9 ainsi qu&rsquo;un compte des points de s\u00e9curit\u00e9 scann\u00e9s.<\/p>\n<p>Ci-dessous la deuxi\u00e8me \u00e9tape d&rsquo;un processus actif de 3 \u00e9tapes, la 4\u00e8me \u00e9tant un compte rendu.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/secupress-steps.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6395\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/secupress-steps.jpg\" alt=\"\" width=\"900\" height=\"1159\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/secupress-steps.jpg 900w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/secupress-steps-233x300.jpg 233w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/secupress-steps-768x989.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/secupress-steps-466x600.jpg 466w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<h2>L\u00e2chons le chronom\u00e8tre<\/h2>\n<p>Et si au lieu de faire gagner du temps \u00e0 l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span>, nous travaillions \u00e0 ne pas lui en faire perdre.<\/p>\n<h3>Soyez pr\u00e9voyant<span class=\"s1\">\u00b7e\u00b7<\/span>s<\/h3>\n<p>Imaginez que vous soyez en train de remplir un formulaire, puis votre navigateur freeze. Vous \u00eates oblig\u00e9 de le red\u00e9marrer, \u00e0 moins qu&rsquo;il ne crash comme un grand. Vous revenez sur la page en red\u00e9marrant le navigateur (qui propose de vous rouvrir vos onglets j&rsquo;esp\u00e8re). Le formulaire est vide, il vous faut tout recommencer :\/<br \/>\nOk, si vous aviez pens\u00e9 \u00e0 utiliser localStorage pour stocker temporairement les informations renseign\u00e9es localement sur la machine de l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span>, vous auriez pu pr\u00e9-remplir les champs, en informant l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> de ce fonctionnement pour \u00e9viter de le surprendre.<\/p>\n<p>C&rsquo;est ce que nous avons fait avec mon fr\u00e8re lors d&rsquo;un projet pour un client : le m\u00e9decin remplit un compte rendu pour un patient, si son navigateur crash, nous lui proposons de le restaurer, car un compte rendu \u00e7a peut \u00eatre tr\u00e8s long \u00e0 r\u00e9diger.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/ec-crash.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6396\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/ec-crash.jpg\" alt=\"\" width=\"900\" height=\"814\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/ec-crash.jpg 900w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/ec-crash-300x271.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/ec-crash-768x695.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/ec-crash-600x543.jpg 600w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p>Le m\u00e9decin \u00e0 alors le choix entre restaurer son compte rendu, ou conserver l&rsquo;actuel (qu&rsquo;il peut comparer plus bas dans l&rsquo;interface). Il a toujours le choix, rien n&rsquo;est impos\u00e9.<\/p>\n<h3>Ne demander que l&rsquo;indispensable<\/h3>\n<p>Les formulaires sont un point noir dans les sites web, sur desktop et encore plus sur mobile. Par exemple lorsque vous demandez \u00e0 un utilisateur<span class=\"s1\">\u00b7rice<\/span> d&rsquo;entrer ses informations de paiement, c&rsquo;est une \u00e9tape critique, demandez-lui le moins de choses possible (on peut m\u00eame scanner une carte aujourd&rsquo;hui\u2026 pourquoi pas).<\/p>\n<p>La d\u00e9tection du type de carte peut \u00eatre faite automatiquement grace aux premiers num\u00e9ros. Profitez-en pour ne pas avoir \u00e0 lui demander cette information et la d\u00e9tecter.<\/p>\n<div style=\"width: 1488px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6358-9\" width=\"1488\" height=\"608\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/credit-card-detection.mp4?_=9\" \/><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/credit-card-detection.mp4\">https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/credit-card-detection.mp4<\/a><\/video><\/div>\n<p>Pour information,\u00a035% des abandons du processus de commande ont lieu car un compte est n\u00e9cessaire pour passer commande, 27% des abandons sont dus a un trop grand nombre de de champs \u00e0 remplir. C&rsquo;est \u00e9norme, il faut faire gagner du temps \u00e0 l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> ici.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/amazon-1slidetobuy-5096.jpg\"><img decoding=\"async\" class=\"alignleft wp-image-6398 \" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/amazon-1slidetobuy-5096-337x600.jpg\" alt=\"\" width=\"209\" height=\"372\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/amazon-1slidetobuy-5096-337x600.jpg 337w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/amazon-1slidetobuy-5096-169x300.jpg 169w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/10\/amazon-1slidetobuy-5096.jpg 750w\" sizes=\"(max-width: 209px) 100vw, 209px\" \/><\/a>Amazon va m\u00eame plus loin en vous proposant d&rsquo;enregistrer vos cartes bancaires dans son service. D&rsquo;autres services le proposent, mais Amazon va plus loin en ne vous demandant plus aucune autre information pour passer commande.<\/p>\n<p>Sur la photo ci-contre, j&rsquo;ai fait un achat \u00ab\u00a0en 1 clic\u00a0\u00bb sur mobile, Acheter &gt; Swipe sur le bouton jaune et c&rsquo;est fini.<\/p>\n<p>Vous n&rsquo;\u00eates pas oblig\u00e9s de vous limiter uniquement aux donn\u00e9es bancaires, mais \u00e0 toute forme de donn\u00e9es qui pourraient \u00eatre stock\u00e9es de mani\u00e8re s\u00e9curis\u00e9e et r\u00e9utilis\u00e9es au bon endroit au bon moment. Bien s\u00fbr, prenez toujours le temps d&rsquo;en informer l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> et ne le faites jamais dans son dos lorsqu&rsquo;il s&rsquo;agit de donn\u00e9es sensibles.<\/p>\n<h3>Proposez une alternative<\/h3>\n<p>Quoiqu&rsquo;il arrive, si un processus risque de s&rsquo;\u00e9terniser, proposez toujours une alternative \u00e0 l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span>. WebPageTest, le service de test de performance de page web propose de mettre en queue un processus d&rsquo;analyse et de revenir plus tard sur votre page (qui a un identifiant unique). Vous pouvez m\u00eame fermer le navigateur et revenir plus tard, votre r\u00e9sultat sera propos\u00e9 une fois le processus termin\u00e9.<\/p>\n<p>Une autre solution peut simpler \u00eatre de proposer une annulation du processus en cours, ou une pause dans le processus, si vous le pouvez. Le choix offert \u00e0 l&rsquo;utilisateur<span class=\"s1\">\u00b7rice<\/span> lui donnera meilleure satisfaction, surtout s&rsquo;il s&rsquo;agit d&rsquo;une porte de sortie.<\/p>\n<h2>Quelques ressources<\/h2>\n<p>Pas mal de ressources m&rsquo;ont servi pour la composition de ma conf\u00e9rence et de cet article, en voici quelques unes.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.doubleclickbygoogle.com\/articles\/mobile-speed-matters\/\">Mobile Speed Matters<\/a> (DoubleClick)<\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2015\/09\/why-performance-matters-the-perception-of-time\/\">The perception of time<\/a> (Smashing Mag)<\/li>\n<li><a href=\"http:\/\/www.statisticbrain.com\/attention-span-statistics\/\">Attention Span Statistics<\/a> (Statistic Brain)<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/getting-started\/codelabs\/your-first-pwapp\/\">Getting Started with PWA<\/a> (Google Devs)<\/li>\n<li><a href=\"https:\/\/baymard.com\/lists\/cart-abandonment-rate\">Cart Abandonment Rate<\/a> (<a href=\"http:\/\/baymard.com\">baymard.com<\/a>)<\/li>\n<li><a href=\"https:\/\/www.researchgate.net\/profile\/Carine_Lallemand\/publication\/254002817_La_vitesse_de_defilement_des_barres_de_progression_influence-t-elle_la_perception_du_temps_d'attente\/links\/00b7d52cdafe307c9f000000\/La-vitesse-de-defilement-des-barres-de-progression-influence-t-elle-la-perception-du-temps-dattente.pdf?origin=publication_detail\">\u00c9tude sur la vitesse de d\u00e9filement des barres de progression<\/a> (Carine Lallemand)<\/li>\n<li><a href=\"https:\/\/www.lighttpd.net\/\">Lighttpd<\/a> solution serveur.<\/li>\n<li><a href=\"https:\/\/www.nginx.com\/\">Nginx<\/a> solution serveur.<\/li>\n<li><a href=\"http:\/\/gwan.com\/\">G-Wan<\/a> solution serveur.<\/li>\n<li><a href=\"https:\/\/github.com\/aFarkas\/lazysizes\">LazySizes<\/a>: Lazyload et la technique de l\u2019image de remplacement floue.<\/li>\n<li><a href=\"https:\/\/baymard.com\/checkout-usability\/credit-card-patterns\">Credit Card IIN Ranges<\/a><\/li>\n<\/ul>\n<h3>Slides de la conf\u00e9rence<\/h3>\n<p>Les slides de la conf\u00e9rence sont disponibles en <a href=\"https:\/\/geoffrey.crofte.fr\/conferences\/paris-web-2017.pdf\">PDF<\/a>, sur <a href=\"https:\/\/www.slideshare.net\/GeoffreyCrofte\/amliorer-la-performance-entre-code-et-tricheries\">Slideshare<\/a> ou sur <a href=\"https:\/\/speakerdeck.com\/creativejuiz\/ameliorer-la-performance-entre-realite-et-ressenti\/\">Speakerdeck<\/a> suivant votre pr\u00e9f\u00e9rence, mais les animations propos\u00e9es sur la keynote originale ne seront pas disponibles.<\/p>\n<p>N&rsquo;h\u00e9sitez pas si vous avez des questions, l&rsquo;espace de commentaires est l\u00e0 pour \u00e7a.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La semaine derni\u00e8re j&rsquo;ai eu l&rsquo;occasion de donner une conf\u00e9rence lors de l&rsquo;\u00e9v\u00e9nement Paris Web. Il s&rsquo;agissait de ma premi\u00e8re intervention en solo sur une th\u00e9matique que je n&rsquo;ai pas l&rsquo;habitude d&rsquo;aborder m\u00eame \u00e0 l&rsquo;\u00e9crit : l&rsquo;exp\u00e9rience utilisateur\u00a0avec comme sujet la performance ressentie. Voici un transcript de la conf\u00e9rence donn\u00e9e.<\/p>\n","protected":false},"author":4,"featured_media":6400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[875,9],"tags":[120,107,554,578],"coauthors":[597],"class_list":["post-6358","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-experience-utilisateur","category-tutoriels","tag-animation","tag-conference","tag-ui","tag-ux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=6358"}],"version-history":[{"count":1,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6358\/revisions"}],"predecessor-version":[{"id":7256,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6358\/revisions\/7256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/6400"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=6358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6358"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}