5 best-practices UX de la page d’accueil de Airtable

5 best-practices UX de la page d’accueil de Airtable

Cet article est une analyse des best-practices UX de la page d’accueil de Airtable, une solution de création d’applications webs qui comptait 300,000 utilisateurs en 2021.

Découvrez les best-practices de cette page d’accueil et réutilisez-les pour vos propres projets.

Best practice n°1 : Ne mettez pas de chat directement sur la page d’accueil

S’il y a bien quelque chose qui nous énerve, chez nous, à Wexperience, ce sont les fenêtres de chat inopinée qui s’ouvrent avant même que vous ayiez commencé à faire quelque chose.

Ça ne sert à rien.

Ça énerve l’utilisateur.

Ça provoque la même sensation que ce vendeur ou cette vendeuse en magasin qui vous saute dessus aussitôt que vous avez franchi le seuil de la porte de son magasin.

Ça bloque l’interface que vous voulez utilisez.

Et souvent, c’est nul.

Ne faites donc pas ça !

Best practice n°2 : ne mettez pas d’animations en vidéo pour illustrer vos propos

Vous allez nous dire qu’ils font n’importe quoi chez Airtable, mais force est de reconnaître que mettre des vidéos en animation pour illustrer des arguments, ça n’est pas une très bonne idée.

C’est lourd à télécharger (2,6Mo pour une seule)

Ça prend de la bande passante

On a toujours dit que quand on pouvait éviter la vidéo, il ne fallait pas en mettre.

Ça n’apporte rien au propos.

Notre conseil : ne mettez de vidéos au format vidéo que si vous ne pouvez pas faire autrement. Sinon, ne mettez pas de vidéos ou bien faites comme sur Duolingo en utilisant le format SVG, bien plus léger.

Best practice n°3 : arrêtez avec les animations qui ne servent à rien

Les designers ont mis beaucoup d’animations pour … eh bien… animer la page…

Des petits effets de carrousels, des barres de progression (c’est la mode, en ce moment) qui ne servent à rien, des cars qui défilent sans qu’on leur ait rien demandé.

Encore une fois, une animation doit être justifiée et servir un propos.

• Elle doit créer de l’émotion
• Elle doit sous-tendre une identité de marque (encore une fois, l’exemple de Duolingo est très bon)
• Elle peut servir à animer un schéma pour expliquer un concept compliqué

Mais mettre de l’animation juste pour mon montrer qu’on a bien utilisé toute la librairie possible d’effets javascript et parce que ça fait joli, non !

Ça surcharge en scripts inutiles la page.

Ça surcharge visuellement la page. (Si vous voulez voir ce que donne une page surchargée en animations, allez donc voir celle là).

Bref, si vous mettez des animations, faites-le avec parcimonie.

Best practice n°4 : utilisez un langage direct

On n’allait pas faire que critiquer, quand même.

Airtable fait aussi des choses bien.

Par exemple, ces petits blocs directs, efficaces qui viennent impacter le regard aussi finement qu’une pointe de flèche dardée par Robin des bois devant le méchant Prince Jean.

-> Le texte est court

-> Il est écrit en très grosses lettres : impacte le regarde et fixe l’attention

-> Il affiche une promesse concrète.

(Bon, on ne comprend rien à l’illustration, mais, ici, ça vaut mieux que pas d’illustration du tout)

Best practice n°5 : utilisez des espaces blancs

Bon, ok, il n’y a pas que Airtable qui fait ça, mais il le fait bien.

Laissez vivre votre page, laissez-la respirer et laissez vos utilisateurs se reposer un peu en laissant des espaces vides autour de vos contenus.

C’est quand même pas compliqué, bon sang !

Utiliser les espaces vides permet de créer du rythme, de regrouper les bonnes informations ensemble (la fameuse Loi de proximité) et aussi de ne pas surcharger visuellement la page, ce qui donnerait trop de travail au cerveau pour arriver à comprendre quelque chose.

Besoin d’en savoir plus sur ce sujet, consultez cette vidéo de Nielsen Norman Group ou bien regardez ces quelques explications (en anglais) sur la bonne manière de ménager ses espaces dans une page.