Un bon UX design doit toujours aller plus loin que le simple « C’est bien »

Je trouve qu’en UX, on se contente trop souvent d’appliquer des bonnes règles, des bonnes méthodes, et qu’on s’estime trop souvent heureux lorsque l’expérience utilisateur est fluide et que les choses se passent sans trop d’anicroches.

Mais pour moi, un bon UX design doit aller plus loin que cela et doit arriver à aboutir le plus possible à transcender l’expérience client en réinventant les concepts auxquels nous sommes habitués. Cela veut dire : fournir la même fonction, la même utilité, mais en transformant la façon de le faire par l’utilisateur, de manière à provoquer chez lui la surprise, enchantement et le ravissement. Et que ces trois émotions lui donnent envie de revenir à votre site web, de réutiliser encore une fois votre app. Bref, qu’il tombe amoureux de votre produit 🙂

Cela n’est pas simple, je vous l’accorde. Et atteindre ce nirvana demande nécessairement de déployer une énergie qui nous est rarement accordée. Pourtant, travailler à cette réinvention permanente de l’expérience client (ou utilisateur) sera ce qui vous permettra de toujours proposer une expérience meilleure que celle de vos concurrents.

Exemple.

Réinvention de la calculatrice

https://imgur.com/QrG8v8g

On ne peut pas dire que les interfaces de calculatrice aient beaucoup évolué au fil du temps. Un clavier de calculatrice de 1968 ressemble exactement à un clavier de calculatrice de 2018. Et ce n’est pas la digitalisation des écrans qui y a changé grand chose. Prenez votre smartphone, lancez la calculatrice, et vous découvrirez ni plus ni moins que le bon vieux clavier que vous avez sûrement découvert pendant votre scolarité.

Alors si on vous demandait aujourd’hui de réinventer le clavier de la calculatrice, comment vous y prendriez-vous ? Et pensez-vous que vous pourriez y arriver ? La plupart des gens vous répondraient : pourquoi s’embêter ? Il n’y a rien de nouveau à faire dans le domaine du calcul et ça n’aurait aucun intérêt : une calculatrice sera toujours une calculatrice.

Eh bien, détrompez-vous !

En 2014, Microblink, une société croate, lançait Photomath, une application qui pourrait bien « révolutionner » la manière de faire des maths, dirait Steve Jobs s’il était encore parmi nous. « Révolutionnaire », peut-être pas, mais bluffante, oui. Dans Photomath, il n’y a plus de clavier. Le clavier, c’est l’appareil photo. Vous scannez une formule sur un bout de papier et Photomath vous la résout presque instantanément ! Ça a un côté presque magique vraiment et c’est très amusant.

Que se passe-t-il lorsque vous utilisez Photomath ?

Vous continuez à faire du calcul, mais la façon de le faire change entièrement.

Vous n’utilisez plus le clavier (même si vous pouvez et devez parfois encore le faire). Vous vous concentrez sur votre feuille de papier, vous la grattez avec frénésie en tentant de résoudre un problème. Et quand vous avez besoin de faire un calcul, vous sortez votre app, et sans avoir rien à taper au clavier, celle-ci vous sort un résultat.

Même résultat qu’avec une calculatrice, mais expérience différente. Et expérience innovante !

Je ne sais pas si Photomath est un hit, mais ce que je sais, c’est qu’elle montre parfaitement qu’on peut toujours « disrupter » les choses (même si j’ai horreur d’utiliser ce mot là, tant on en abuse). Et cette possibilité de « disrupter » existe toujours et dans tous les cas. Que vous fassiez un site de ecommerce, une app d’informations, il existe toujours une possibilité de faire mieux et de nouveau que ce qui existe. Et de faire quelque chose qui surprenne vos utilisateurs.

Rappelez-vous de cette phrase de Rebecca Sinclair, l’ex Directrice UX de AirBNB : « Vous devez savoir avoir le courage de créer quelque chose de mieux que ce que le client aurait imaginé lui même« .

Le « courage ». Retenez bien ce mot, car c’est celui dont vous aurez souvent le plus besoin lorsque vous devrez convaincre votre client de « changer les choses », d’inventer quelque chose de différent. Bref, de faire du nouveau. Car souvent la nouveauté fait peur et implique de prendre des risques. Et peu de gens aiment prendre des risques.

Il est toujours possible de « réinventer la roue »

Photomath nous montre qu’il est toujours possible de « réinventer la roue ». Cette possibilité n’est pas toujours présente. Elle n’est pas toujours spectaculaire. Elle peut souvent ne concerner qu’une toute partie de l’expérience utilisateur/client que vous offrez. Mais elle existe toujours. Et il faut que vous sachiez la découvrir et mettre en oeuvre les moyens de la découvrir. Le Design Thinking et la conception centrée utilisateur n’ont pas été inventés pour rien.

Innover ne veut jamais dire « écouter son imagination ». Innover veut dire : savoir observer, connaître la technologie, faire collaborer les cerveaux autour de vous, co-concevoir avec vos clients, tester et tester encore. Et alors, souvent, apparaitra la lumière. Celle qui fera surgir des solutions innovantes, nouvelles, transcendantes qui feront que l’expérience utilisateur sur votre site ou votre app sera « inoubliable », « mémorable », et que vous pourrez tirer les bénéfices qui découlent de ces deux mots, comme une pluie d’or sur votre chiffre d’affaire 😉

Excellente journée !

Pourquoi les horodateurs de la ville de Brive se moquent de l’ergonomie et pourquoi vous ne pouvez pas faire la même chose avec votre site web

 

Quand je vois l’interface de cet horodateur, croisé pendant mes vacances du côté de Brive la Gaillarde, en Corrèze, je me demande bien comment les ingénieurs qui l’ont conçu, ont pensé à son design. Et j’imagine bien les réunions qui ont donné lieu à ce cauchemar ergonomique :

 

« Et le clavier, on le met où le clavier ?

– Ben, là, en bas, y reste de la place.

– Mais ça rentre pas.

– Pas grave, tu changes la forme et ça rentrera.

– Ok. Et les boutons ? On met pas de libellés ?

– Non, on les mets sur l’écran, comme ça on peut écrire en plusieurs langues.

– Ah super, mais c’est pas très intuitif du coup.

– Mais si, il suffit de le savoir.

– Ah ouais, t’as raison.

– Par contre, on est obligé de mettre autant de textes sur un petit écran ?

– Ah, je sais pas, moi, c’est le cahier des charges !

– Ok ! »

 

Un cas d’école pour les ergonomes

Si l’on voulait montrer tout ce qu’il ne faut pas faire en ergonomie, cet horodateur constituerait un très bon cas d’école. Prix cachés, instructions incompréhensibles, guidage nul, clavier non conventionnel : la liste des erreurs perpétrées bat des records. Et pourtant, nul doute que la ville de Brive, qui tire des revenus de ces affreuses machines, n’en soit pleinement satisfaite. Ce qui n’est pas surprenant. Lorsque vous voulez garer votre voiture et rester dans le droit chemin, payer 1€ pour 1h de stationnement vaut bien un effort. Un effort qui n’est rien comparé à la somme dont vous devriez vous acquitter si vous vous retrouviez en flagrant délit de non paiement pour stationnement. Et tant pis si vous devez passer deux ou trois minutes pour y arriver.

Ce raisonnement , ce calcul, c’est amusant, c’est exactement le même que celui que vous faites lorsque vous décidez d’acheter quelque chose en ligne. Plus votre désir (ou votre obligation) est grand, plus vous êtes prêt à franchir les obstacles pour l’assouvir. Si vous voulez acheter le dernier iPhone X, rien ne vous arrêtera ! Pas même le tunnel de commande sans fin de Apple.com

Dans les deux cas, vous répondez à une injonction, une injonction si forte que vous êtes prêt à tout faire pour y répondre.

Nous sommes la proie de nos désirs

La différence est que, sur un site de ecommerce, votre injonction n’est pas de risquer de prendre une amende. En revanche, il est, dans ce cas, celui de ne pas pouvoir assouvir votre sacro-saint Désir consumériste ! Ce dernier téléphone à la mode. Ce voyage. Cette jupe. Tous ces objets que les fabricants font reluire dans les vitrines des magasins et des sites webs provoquent en vous un besoin irrésistible : celui de posséder, comme dans la vidéo de la célèbre série IT Crowd, ci dessous.

 

 

Et lorsque l’objet de vos désirs vous aura mis le grappin dessus, le seul obstacle qu’il y aura entre vous et lui, hormis le contenu de votre porte-monnaie, sera l’effort que vous serez prêt à accomplir pour le posséder. A ce sujet, vous noterez qu’on peut prendre le désir dans les deux sens : il peut être une attirance. Mais il peut aussi être une crainte : ne pas voir à temps le dernier film à la mode, rater une super promo, ne pas assister au concert de [mettez le nom de votre idole préférée].

 

C’est le principe même du marketing que de créer ce désir. Et, par conséquence, c’est rôle de l’ergonome (ou de l’UX designer), de permettre de l’assouvir le plus rapidement possible.

 

Il est possible de se passer d’ergonomie, mais…

Et pourtant, on le voit bien, il est possible de se passer d’ergonomie pour faire « cracher les gens au bassinet ». Ce n’est pas la ville de Brive qui me démentira. Mais alors pourquoi tant de sociétés continuent quand même à investir des millions dans l’UX et l’ergonomie ?

 

Parce qu’un site web n’est pas un pré carré. Un acheteur aura toujours le choix d’aller voir ailleurs, sans aucun effort supplémentaire. Et non seulement, il risque de trouver moins cher, mais en plus, si c’est plus facile à faire, alors il le fera chez votre concurrent.

 

Ça vous dit quelque chose ?

 

Eh oui, c’est exactement sur ce principe que fonctionne Amazon. Meme si les offres n’y sont pas toujours les meilleures, c’est pourtant chez le géant américain que finissent une bonne part des achats en ligne en France.

Et l’ergonomie joue une grand rôle là dedans. On ne le répétera jamais assez : l’expérience utilisateur/client est une obsession chez Amazon. Et des années d’investissements dans ce domaine depuis sa création ont fait de ses sites et de ses apps de redoutables machines à cash. Demandez à votre entourage pourquoi ils achètent chez Amazon. La réponse, la plupart du temps, sera : « Parce que c’est pratique. »

L’UX/l’ergonomie n’est pas un investissement d’un jour

Alors, évidemment, il n’est pas question de vouloir concurrencer Amazon. Vous ne disposez certainement pas de ses moyens, ni de ses budgets, et vous n’avez certainement ni les ressources humaines, ni le temps, pour arriver au même niveau d’expérience utilisateur. Mais, en revanche, vous pourrez toujours faire mieux que vos concurrents qui ne s’intéressent pas à l’UX/l’ergonomie et qui pensent, comme les designers des horodateurs de la ville de Brive, qu’on n’a pas besoin de s’en occuper, puisqu’il y aura toujours des clients qui seront prêts à faire des efforts pour payer.!

 

C’est fou ce qu’un horodateur peut être inspirant, non ?

 

Attendez, ne partez pas !

Et à propos d’Amazon, n’oubliez pas de venir me rejoindre le 26 septembre à Lille pour une présentation gratuite et exclusive de la première étude UX sur les assistants vocaux commercialisés en masse désormais en France : Amazon Echo et Google Home. Vous serez surpris ! Inscription ici !!!

 

PS : Et pour ceux que ça intéresse, la photo de fond de l’article est une vue de la Vallée de la Dordogne, près de Brive 🙂

Cet article vous donne de nombreux conseils pour améliorer la vitesse réelle et perçue d’un site mobile.

Comment optimiser la perception de la vitesse d’un site web mobile

D’après Google, la perception de la vitesse de chargement d’une page, de son affichage, de la vitesse de réaction d’une interface et de sa fluidité font partie du critère le plus important de l’expérience utilisateur.

Qu’elle soit bonne ou mauvaise, dans tous les cas, elle a un impact significatif sur l’engagement des utilisateurs et sur leur satisfaction. Meilleure est cette perception, meilleure sont les performances du site.

Dans cet article, écrit d’après une étude très complète de Awwwards.com et Google à télécharger gratuitement , nous allons voir :

1. comment les humains perçoivent la vitesse quand ils surfent sur un site web mobile
2. comment optimiser la perception de vitesse et de fluidité d’un site web mobile

La perception de la vitesse dépend de plusieurs facteurs extérieurs

Assez curieusement, la perception de la vitesse de l’application peut être perçue différemment selon les situations. Certaines personnes vont avoir l’impression que le site est plus long qu’il ne l’est réellement. Pour d’autres, ça sera l’inverse.

L’étude de Google et Awwwards dénombre 4 facteurs extérieurs affectant la perception de la vitesse :

• L’état émotionnel
• L’âge
• Le lieu d’utilisation
• Et, ce qui est appelé dans l’étude, l’Effective Use, c’est à dire le moment où un site semble effectivement utilisable

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

D’un point de vue factuel, il apparait tout de même que la plupart des humains réagissent de la même manière à la vitesse et à la réactivité d’une interface. Plus ces temps sont longs, plus les chances d’abandon sont grandes. Le plus simple est de retenir ce chiffre : 53% des utilisateurs abandonnent un site si les temps de téléchargement ou de réaction excèdent 3s.

Google a pu déterminer une corrélation directe entre la perception de la vitesse et certains indicateurs très intéressants :

• Meilleure est la perception de la vitesse, plus grande sera la propension d’un utilisateur à retourner sur un site
• Meilleure est-elle, plus grande sera la satisfaction (d’après une autre étude , l’UX contribue à 31% au Net Promoter Score)

11 conseils pour optimiser la vitesse de votre site

N°1 : Affichez d’abord le contenu au dessus de la ligne de flottaison

C’est une pratique très courante sur les sites de ecommerce. Une étude de Norman Nielsen Group a récemment montré que 74% passée du temps sur une page l’était sur les les deux premières hauteurs d’écran. Optimisez le code d’une page de manière à afficher en priorité ce qui se trouvera tout de suite visible à l’écran. Travailler sur cette optimisation demande beaucoup de connaissances techniques et de réglages fins du code et si, nous pourrions en dérouler le détail ici, nous préférons vous orienter, avant d’aller plus loin dans cet article, vers cet excellent document de travail : Time to First Meaningful Paint, à consulter gratuitement.

N°2 : Activez plus rapidement le « tap »

Toujours dans l’optique de parer à l’impatience de l’utilisateur, une autre technique consiste à pouvoir activer plus rapidement le « tap ». Par défaut, il existe un délai d’environ 350ms qui suit toujours un « tap » (un toucher de l’écran du bout du doigt). Ce délai existe pour que l’écran puisse éventuellement recevoir un « double-tap », mais cette fonction n’étant pas systématiquement nécessaire, il est dès lors possible de la retirer parfois.

Cela peut se réaliser très simplement en modifiant  le code de la page.

Ainsi, en ajoutant dans l’entête de page, la balise :

<meta name=’ »viewport » content= »width=device-width »>

Vous parviendrez au résultat attendu. Ce code n’est pas le même pour tous les navigateurs. Renseignez-vous !

N°3 : Rendez l’utilisateur actif

Google a séparé les utilisateurs en 2 types : les passifs et les actifs. Il est primordial de faire passer les « passifs » en  « actifs », les premiers ayant tendance à sous-estimer la vitesse et la réactivité de l’interface de 36% par rapport à ce qu’elle est réellement. L’état passif se déclenche lors de temps d’attente prolongés, qu’il est possible d’estomper selon Google. Plusieurs techniques existent pour lutter contre cet effet :

Affichez un petit jeu vidéo ou une petite animation interactive pendant un temps de traitement long est un bon moyen de garder l’utilisateur actif. Exemple : ce palmier que vous pouvez secouer avec votre souris sur un site évènementiel (désolé, on n’a pas trouvé d’exemple sur mobile, mais vous saisissez l’idée).

Animez vos feedbacks : les feedbacks sont des signaux émis par le système pour montrer qu’il a bien réagi à votre demande. Souvent, ces feedbacks n’apparaissent pas assez rapidement et laissent l’utilisateur s’impatienter. Il est pourtant simple grâce au css et au js de créer des mini-animations qui transformeront les feedbacks en moment de plaisir visuel et réactiveront votre utilisateur.

Utilisez la bonne barre de téléchargement : pour les temps de téléchargement les plus courts, utilisez les spinners (vous savez, ces petites animations tournoyantes). Elles ne sont pas indispensables, mais permettent une continuité de l’expérience utilisateur. Dans le cas de temps de téléchargement plus long, utilisez alors une barre de téléchargement.

N°4 : Utilisez les techniques de démarrage préemptives

Ces techniques de démarrage consistent à démarrer une tâche avant même que l’utilisateur ne la démarre. En voici quelques exemples.

Téléchargez de assets sur la page de login. La page de login demandant toujours un peu de temps à l’utilisateur pour parvenir à son but, il est très facile d’en profiter pour commencer à télécharger des éléments de l’écran suivant pour gagner du temps.

Téléchargez des contenus sur des états précédents. Lors de tâche ou de processus longs, vous pouvez anticiper le téléchargement d’éléments suivants en sachant que l’utilisateur passera forcément dessus. Cette technique s’applique très bien à des formulaires. Un formulaire à plusieurs pages pourra être chargé pendant que l’utilisateur remplit les champs.

N°5 : Anticipez la complétion d’une page avec des images progressives

Une autre technique pour donner l’impression de fluidité à l’utilisateur est de commencer à montrer des éléments d’interface avant qu’ils ne soient totalement chargés. C’est une vieille technique du web qui est revenue à la mode avec l’arrivée du mobile.

Des images progressives sont des images compressées avec un algorithme (comme le jpg) qui charge l’image en strates successives. Oui, oui, vous savez, ce sont ces images affreusement pixellisées qui s’affinent au fur et à mesure du temps (et qui ont donné lieu à pas mal de blagues).

N°6 : Utilisez le design optimiste

Le design optimiste est une technique de design un tantinet audacieuse qui consiste à présenter une tâche non terminée comme terminée ! Oui, tout à fait ! L’avantage est qu’elle donne l’impression à l’utilisateur que la tâche a été exécutée avec succès immédiatement, alors, qu’en réalité, elle est reportée à plus tard. Evidemment, il ne faut pas que le système plante !

C’est exactement ce que fait Twitter, par exemple. Lorsque vous likez un tweet, cette action n’est pas stockée directement en base de donnée, mais seulement quelques instants plus tard. Cela permet de ne pas ralentir le « flow » utilisateur tout en prenant en compte une action qui requiert du temps de requête.

Mais mieux qu’un « like », un téléchargement « optimiste » est une action encore plus belle 🙂 Plutôt que de faire attendre un utilisateur le téléchargement d’un fichier (en mode ascendant), faites-lui croire que le fichier a été presqu’immédiatement téléchargé et laissez le continuer  à faire ce qu’il a à faire ensuite. Cette technique peut être réalisée grâce aux Web Workers qui sont des script javascript qui exécutent des scripts en tâche de fond dans une page HTML.

Evidemment, cela suppose que l’utilisateur ne quitte pas trop vite la page et qu’il soit informé comme il se doit en cas d’échec du téléchargement.

N°7 : Créez des animations fluides et optimisées

Pour qu’une animation soit perçue comme totalement fluide, chaque image ne doit pas apparaître plus de 16ms, ce qui veut dire qu’une bonne animation doit être réglée à 60img/s. C’est un premier point, mais ça n’est pas le seul.

Tout étant question de psychologie comme nous l’avons vu au début de cet article, il y a un autre moyen de jouer sur la perception de la fluidité et de la vitesse des animations. Comme nous le rappelle Awwwards, il existe quatre type de transitions de mouvement (« easing », en anglais, c’est quand même beaucoup plus court).

• L’easing linéraire : c’est un mouvement sans accélération ni décélération ni au début ni à la fin du mouvement. C’est l’easing, par défaut. Assez désagréable et sans saveur, il est ressenti comme mécanique et peu humain.
• L’ease-in : L’animation commence lentement et accélère
• L’ease-out : l’animation commence très rapidement et décélère
• L’ease-inout : c’est la conjonction des deux animations précédentes

En fonction des circonstances, il est recommandé de jouer sur ces différents types d’accélérations.

Pour ce qui concerne les interactions avec l’interface :

• L’ease-out est recommandé pour tout ce qui requiert une réaction instantanée : menus, boutons.
• L’ease-in est recommandé pour les fenêtres d’alerte.

Pour ce qui concerne les animations :

• L’ease-inout est recommandé pour les animations courtes. Lors d’animation longues, elles donnent l’impression
• Par ailleurs, ce type d’effet ne doit pas dépasser les 200 à 500ms pour ne pas être perçues comme trop longues.

N°8 : Optimisez le code de vos animations

Le travail d’ergonomie des animations ne se fait pas que dans la composition de l’animation, mais aussi dans le code. Voici encore quelques recommandations, toujours d’après Awwwards, pour y voir clair.

Certaines propriétés sont plus gourmandes en ressources, mais également en temps d’exécution. Pour l’animation de propriétés CSS, Awwwards recommande de n’utiliser sur mobile qu’exclusivement les propriétés : opacity et transform.(rotate, translate, scale).

N’animez pas les propriétés qui affectent les layers : width, height, padding, margin.

N’animez pas les propriétés qui affectent le Paint : color, background, background-image, border.

(attention, ça va devenir un peu technique)

Le javascript peut également être optimisé. Voici les conseils que donnent Awwwards.

• Utilisez RequestAnimationFrame
• Evitez SetTimeOut et setInterval
• Evitez de changer les styles inline sur chaque image de l’animation
• Déconnectez les évènements des animations
• Evitez les boucles de reflow et de repaint
• Utilisez les accélérations de la carte graphique avec les transformations 3DMatrix

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

N°9 : Adoptez une stratégie de conception collaborative

L’optimisation de la perception de la vitesse semble être essentiellement un travail d’optimisation du code. Ce n’est pas ce que nous dit Awwards. Selon eux, il semble, au contraire, essentiel, de sensibiliser très en amont les UI/UX designers à ces problématiques. Et je pense qu’ils ont tout à fait raison. Les obliger à penser en terme de performance les fera envisager leur contribution au projet d’une autre manière et participer à une performance globale qui affecte également la performance business d’un site.

Mais pour parvenir à cette implication, il semble nécessaire de créer un Budget de performance.

Le budget de performance pour rendre vos sites aussi rapides qu’une fusée

Le budget de performance est un ensemble de contraintes que vous allez pouvoir appliquer à vos pages en fonction de votre cible utilisateurs et du matériel dont elle dispose (des vieux Android achetés en supérette ou des iPhone X dernier cri).

Plutôt que d’entrer dans la théorie, je vous propose d’aller calculer vous même ce budget en vous rendant sur performancebudget.io. Saisissez le temps de téléchargement que vous estimez nécessaire à obtenir la meilleure expérience utilisateur, puis saisissez le type de connexion sur laquelle surfe vos internautes et hop, c’est parti !

Voici le résultat :

Voilà, vous avez compris ! Comme vous pouvez le constater, avec des données aussi faciles à mesurer, tout le monde peut participer, le but du jeu étant de ne pas dépasser le poids indiqué (600ko). Amusez-vous bien !

N°10 : Utilisez les bonnes pratiques des apps

Les vrais apps (développées pour iOs et Android) recèlent des bonnes pratiques qu’il peut aussi parfois être utiles de réemployer pour encore améliorer la perception de fluidité d’usage d’un site.

Barre de progression de chargement lorsque le site est affiché en plein écran

Les Progressive Web App (PWA : nous reviendrons sur ce sujet prochainement) permettent d’afficher un site web en plein écran. Cela implique très notablement que les boutons du navigateur ne sont alors plus affichés. Pour cette raison, il devient intéressant d’afficher des barres de chargement qui viennent pallier à ce manque et qui, si elles ne sont pas  présentes, risquent de rendre l’expérience utilisateur moins fluide, l’utilisateur n’ayant pas de feedback sur les moments où des pages se chargent ou pas.

Continuité de chargement en utilisant des templates squelettes

Oui, des templates squelettes ! C’est un peu curieux comme terme, mais ça définit assez bien de quoi il s’agit.

Un des problèmes de nombreux sites web est le temps de latence d’affichage d’une page lorsque l’utilisateur clique sur un bouton. En général, la page reste affichée de manière statique tant que le contenu de la page suivante n’a pas commencé à être envoyée. Ce qui peut être extrêmement énervant pour l’utilisateur.

Pour éviter cet effet, essayez toujours de donner la sensation que la structure du site web est stockée entièrement sur le terminal utilisé et que seul le nouveau contenu est téléchargé à chaque requête.

Pour simuler cette impression, c’est là que les templates squelettes font leur office. Affichez-les en premiers avant de télécharger le contenu final de la page (ces templates ayant été téléchargés au préalables avant même que le bouton n’ait été cliqué).

Sauts de page intempestifs

Mais oui, vous les connaissez ces sauts de pages intempestifs, lorsque vous téléchargez une page et qu’au fur et à mesure de l’apparition des images, toute la page saute. Cela est due au fait que la dimension des images n’a pas été incluse dans le code HTML qui la décrit et doit être « devinée » par le navigateur lorsque l’image est finalement réellement téléchargée, provoquant ce fameux saut de page intempestif.

N°11 : Optimisez et priorisez les scripts css et javascript

L’habitude a été prise depuis longtemps d’accompagner chaque page HTML d’une farandole de scripts CSS et javascript. Si cela ne pose, à priori, pas de problème, pour les ordinateurs les plus rapides avec de bonnes connexion, comme l’explique Addy Osmani, ingénieur chez Google, en revanche, cela est moins vrai sur des machines moins évoluées avec des connexions moins rapides, et notamment sur mobile. Les script prennent du temps à télécharger et du temps à être compilés. Sur certains vieux appareil, cela peut entraîner un temps d’activation de la page allant jusqu’à plus de 19s, C’est donc un point crucial à aborder avec attention.

Pour cela, Awwards nous fournit plusieurs bons précieux conseils :

Ne téléchargez que le code minimal nécessaire. Tronçonnez votre code javascript et CSS en blocs et ne téléchargez dans certain cas que les blocs absolument nécessaires.

Préchargez sur la page les éléments critiques. Pour cela, utilisez la balise <link rel= »preload »> et décidez quels sont les médias à télécharger en priorité.

Intégrez le code CSS le plus indispensable à votre page directement dans le header de la page.

Conclusion

L’optimisation de la perception de la vitesse est un vrai sujet : à la fois design et à la fois technique. Pour les sites à fort volume de trafic, c’est un enjeu essentiel, car il peut se chiffrer directement en CA effectif. Pour tous les autres sites, n’oubliez pas que Google indexe désormais les pages en fonction de la vitesse, et que votre capacité à fournir dans toutes les situations des pages dans des conditions acceptables pour l’utilisateur, influera sur votre positionnement. Tout le monde est donc concerné par cette problématique. Alors, qu’attendez-vous pour vous mettre au travail ?

Sources des illustrations

• Menu de rechargement liquide par Rawmedia
• Barre de téléchargement sur Boingboing
• Easeout sur Bonobo
• Animation de VisiUtah
• Animation AirBNB
• Photo de la foule dans une gare par Timon Studler sur Unsplash
• Photo d’illustration de l’article par Mathew Schwartz sur Unsplash