Best-practices UX de la page d’accueil de Figma

Best-practices UX de la page d’accueil de Figma

Cet article est une analyse des best-practices UX de la page d’accueil de Figma, une solution collaborative de design de produits numériques : sites webs, app mobiles, applications pros. En 2024, Figma compte environ 100 millions d’utilisateurs.

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

Best-practices organisation générale

Gros titre avec grosse police de caractères

• Inférieur à 3 lignes
• Moins de 20 mots
• Bien contrasté (noir sur blanc) pour une meilleure lisibilité
• Icônes dans le texte qui animent le titre, mais diminuent la lisibilité

Principal bouton d’action immédiatement sous le titre

• Incite directement à l’action
• Guide l’utilisateur rapidement
• Ne propose pas de s’inscrire, mais d’essayer, ce qui est moins freinant

Grand visuel attrayant

• Donne une impression de richesse fonctionnelle
• Animations sympas qui augmentent l’attractivité de la page
• Certaines fonctionnalités sont déjà visibles à travers les animations

Présentation en quinconce classique

• Favorise l’apprentissage de la lecture de la page
• Titres courts pour accélérer la lecture et le repérage dans la page
• Call-to-action pour chaque bloc afin de favoriser l’engagement
• Très grands visuels pour augmenter l’effet d’immersion de l’utilisateur
• Grands espaces entre les éléments de page pour réduire la charge cognitive

Best-practices apparence esthétique

Design enjoué et coloré

• Favorise les émotions positives (mais attention à ne pas mettre trop de couleurs)

Animations partout

• Augmentent l’attention de l’utilisateur
• Permet d’expliquer plus facilement des concepts
• Effet de dégradés colorés qui changent au scroll : effet super positif !

Attention à ne jamais trop mettre d’animations. Cela peut finir par nuire au guidage dans la page

Style graphique créé uniquement par la typographie et les couleurs

Wording / tone of voice

• Vouvoiement pluriel : traduit l’approche collaborative du produit
• Phrases d’engagement sur des bénéfices pour des équipes
• Mise en avant d’une promesse : augmentation de la productivité, amélioration de la collaboration, raccourcissement des délais de production

Le wording de la page d’accueil s’adresse avant tout à des équipes de design.

Conclusion

Figma est un bon exemple de page d’accueil attractive et efficace.

• La page n’est pas trop surchargée ce qui lui permet d’être parcourue rapidement du regard
• Les titres sont assez gros et suffisamment espacés entre eux pour créer un rythme de lecture agréable
• Les call-to-action ressortent bien et sont guidants
• Les visuels sont colorés et animés, ce qui renforcent l’attractivité de la page. Cela renforce aussi l’état émotionnel de l’utilisateur dans un sens positif.

Vous avez aimé cet article ? On en a un autre pour vous sur l’onboarding de Figma.