Meilleures pratiques de conception d'interface utilisateur pour une meilleure scannabilité

Les concepteurs de produits communiquent souvent beaucoup d'informations en peu de temps. Ceux qui comprennent le terme «scannabilité», les modèles de suivi oculaire courants et les principes de conception modernes sont mieux équipés pour créer du contenu facilement consommable et des «interfaces utilisateur collantes».

Chaque jour, Internet se développe avec de nouvelles applications, sites Web, articles, etc. Il devient de plus en plus difficile de retenir l'attention des utilisateurs surchargés d'informations qui ont du mal à filtrer les informations pertinentes du contenu non pertinent. L'expert en marketing David Zheng a constaté que dans plus de 60 % des cas, les visiteurs abandonnent et quittent un site Web en moins de 15 secondes .

La recherche indique que les utilisateurs ne lisent pas réellement tout ce qu'ils voient mot par mot - ils scannent et déterminent ensuite si le matériel vaut leur temps. En rendant le contenu approprié instantanément scannable, un concepteur de produit peut convertir un visiteur à court terme en un utilisateur de longue durée. Vous trouverez ci-dessous une sélection des meilleures pratiques de conception d'interface utilisateur pour aider à amplifier le facteur important de la conception de l'utilisabilité qui est souvent négligé : la capacité d'analyse .

Qu'est-ce que la scannabilité ?

Les experts UX du groupe Nielsen Norman ont mené des recherches pour répondre à la question : Comment les gens lisent-ils sur le Web ? Ses découvertes étaient simples. Ils ne le font pas.

Le groupe a constaté que seulement 16 % des nouveaux visiteurs d'un site Web sont susceptibles de le lire mot à mot. Les 84 % restants rechercheront rapidement des éléments d'accroche, tels que des titres, des phrases, des images ou des animations avant de décider d'approfondir le contenu. Ce comportement n'est pas limité aux interfaces numériques. Par exemple, les gens lisent rarement chaque mot dans un journal. Au lieu de cela, ils analysent les mêmes éléments (titres, images, etc.) pour déterminer ce qui est digne de leur temps.

La scannabilité est donc l'approche consistant à disposer le contenu de manière à ce qu'il soit facile à scanner. Il n'y a souvent qu'une courte période de temps pour impressionner un visiteur avec un contenu précieux à l'écran, ce qui rend essentiel l'optimisation complète d'une interface pour la façon dont les utilisateurs lisent sur le Web. Que le produit numérique soit un site Web, une application ou un autre type d'interface utilisateur, la capacité de numérisation est l'un des facteurs les plus importants d'une conception conviviale.

Les avantages d'une interface scannable

Le moyen idéal pour déterminer la scannabilité d'un produit numérique est de l'observer du point de vue de l'utilisateur et de répondre à ces questions clés :

1. Le contenu de la page correspond-il aux attentes du public ?
2. Le message principal de la page est-il facile à comprendre en peu de temps ?

Bien que la production d'interfaces scannables demande des efforts, elle est payante à long terme en créant une conception d'interface utilisateur collante. L'étude de Nielsen Norman Group montre que les pages optimisées pour la scannabilité deviennent beaucoup plus efficaces des manières suivantes :

• Les utilisateurs ont des temps d'exécution des tâches plus rapides
• Les utilisateurs peuvent facilement définir si le contenu leur convient
• Les utilisateurs font moins d'erreurs de mémoire
• Les utilisateurs ont une meilleure idée de la structure d'une page
• Un site reçoit des évaluations subjectives plus favorables pour la crédibilité et la qualité du contenu
• Les taux de rebond sont réduits
• La probabilité de visites de retour est augmentée
• L'optimisation des moteurs de recherche (SEO) est améliorée

Le pouvoir des habitudes des utilisateurs dans les modèles de numérisation

Tout le monde consomme du contenu différemment. Cependant, grâce à la recherche, des modèles de suivi oculaire bien définis ont émergé. Savoir comment les utilisateurs interagissent avec les interfaces dans les premières secondes peut aider les concepteurs à hiérarchiser le contenu, à placer les informations importantes dans les principales zones visibles et à établir une hiérarchie visuelle solide.

Selon le groupe Nielsen Norman, il existe sept modèles courants dans lesquels les utilisateurs analysent une interface :

• Le fameux motif F : Douze ans après sa découverte, ce motif est toujours le motif d'analyse le plus courant, même lors de l'analyse d'interfaces mobiles. L'œil se déplace horizontalement, comme c'est généralement le cas lors de la lecture, puis passe au contenu ci-dessous. Cela peut être fait lentement et systématiquement ou rapidement avec une carte thermique ponctuelle.
• Motif en Z : le modèle en zigzag est typique des pages Web avec une présentation uniforme des informations et une faible hiérarchie visuelle.
• Layer Cake Pattern : les utilisateurs suivent ce modèle lors de la numérisation des titres et des sous-titres pour déterminer rapidement où (et si) les informations qu'ils recherchent peuvent être trouvées sur la page.
• Motif à pois : les créations suivent généralement ce modèle de numérisation, dans lequel elles ignorent de gros morceaux de texte et analysent des composants visuels tels que des anomalies de couleur, de forme et de proportion pour trouver une information spécifique.
• Modèle de marquage : comme un danseur se fixant sur un objet pour rester en équilibre pendant qu'il tourne, les utilisateurs gardent l'œil concentré sur un endroit pendant le défilement - un modèle très courant pour l'UX mobile.
• Modèle de contournement : les utilisateurs ignorent délibérément les premiers mots d'une ligne lorsque plusieurs lignes de texte d'une liste commencent toutes par le(s) même(s) mot(s).
• Modèle d'engagement : il s'agit d'un modèle rare qui ne se produit que lorsqu'un utilisateur est très intéressé par le contenu et motivé à tout consommer.

Les modèles adoptés par l'utilisateur seront principalement liés à la motivation pour visiter la page Web : quel type d'information recherche-t-il ? Combien de temps sont-ils prêts à consacrer pour le trouver ? Existe-t-il d'autres sites Web qui pourraient fournir ces informations plus rapidement ?

Offrir de la valeur grâce à la recherche d'utilisateurs et aux modèles d'analyse

Le Dr Donald Norman, le chercheur en sciences cognitives qui a inventé le terme « conception centrée sur l'utilisateur », a écrit : « Il ne suffit pas de créer des produits qui fonctionnent, qui sont compréhensibles et utilisables, nous devons également créer des produits qui apportent de la joie et de l'excitation. , plaisir et amusement, et oui, beauté dans la vie des gens.

La recherche d'utilisateurs est la pierre angulaire de la conception centrée sur l'utilisateur et des meilleures pratiques de conception d'interface utilisateur. Par la suite, pour améliorer la scannabilité d'une interface numérique, un concepteur doit comprendre l'utilisateur final. Lorsque les modèles d'interface utilisateur sont conçus du point de vue de l'utilisateur final, une expérience naturelle et intuitive se produit.

Les solutions percutantes ne sont pas faites d'abstractions. Vous trouverez ci-dessous un ensemble de produits numériques beaux, fonctionnels et durables. Chaque équipe de conception a défini le public clé, utilisé des modèles de suivi oculaire et conçu des mises en page de contenu pour produire une interface utilisateur collante.

Instacart tire parti de la conception centrée sur l'utilisateur grâce à ses modèles de conception d'interface utilisateur. Une partie importante de leur public est composée de personnes âgées et d'utilisateurs ayant une déficience visuelle, de sorte que les articles sont répertoriés dans une grille à contraste élevé avec un accent clair sur les principaux CTA. La conception permet au mode de numérisation Spotted Pattern d'accueillir des visiteurs de longue durée.

Yelp sert les utilisateurs à la recherche des meilleurs restaurants, boutiques, vie nocturne, nourriture, etc. Yelp présente donc le contenu d'une manière facilement scannable, en mettant l'accent sur des éléments spécifiques tels que les notes, les images et les adresses.

Airbnb est sans doute l'une des applications les plus appréciées, et c'est en grande partie grâce à leur recherche d'utilisateurs. Parce qu'ils savent que leurs utilisateurs utilisent souvent des appareils mobiles, ils conçoivent pour s'adapter au modèle de marquage. L'interface claire et intuitive est conçue de manière à mettre en valeur les grandes images d'appartements pleine largeur. Ils ont intentionnellement limité le nombre d'images de couverture par écran à deux afin que l'utilisateur puisse correctement consacrer son temps et voir si la liste attire son attention ou non.

Un facteur à garder à l'esprit lors de l'amélioration de la scannabilité d'un produit numérique est de définir le type d'appareil sur lequel il sera visualisé. La plateforme mobile d'Airbnb reçoit un trafic important. Comme le montre la carte thermique de l'utilisation du pouce, Airbnb a stratégiquement placé les éléments d'interface utilisateur les plus couramment utilisés, tels que "Explorer" et "Recherches enregistrées", facilement accessibles lors du défilement et de la numérisation.

Meilleures pratiques de conception d'interface utilisateur pour une meilleure scannabilité

Créer une hiérarchie visuelle appropriée

La hiérarchie visuelle d'une interface numérique fait référence à l'agencement et à la présentation des éléments de conception de l'interface utilisateur pour communiquer les niveaux d'importance afin que les utilisateurs puissent rechercher rapidement les informations souhaitées. Il existe plusieurs facteurs dans la conception d'une mise en page avec une hiérarchie visuelle appropriée :

• Taille
• Couleur
• Contraste
• Proximité
• Alignement
• Espace négatif
• Répétition

En tenant compte de ces modèles de conception d'interface utilisateur lors de la création d'une conception de mise en page d'interface utilisateur, un concepteur s'assurera que le produit final a une mise en page attrayante, harmonieuse et intuitivement scannable.

La page de résultats de recherche de Google utilise tous les facteurs de la hiérarchie visuelle pour augmenter la lisibilité. Les titres sont accentués par l'utilisation de la couleur, de la taille et, par la suite, du contraste. L'espace négatif entourant chaque titre contribue à ce qu'il soit la première chose qu'un utilisateur va scanner.

Lorsqu'un utilisateur trouve un titre pertinent, il peut vérifier la crédibilité du lien, un élément facilement reconnaissable en raison de sa couleur et de sa proximité. Ensuite, pour mieux évaluer le résultat, ils creuseront dans la copie de contenu qui est cohérente en termes de couleur, de taille et de proximité. En plus de ces facteurs, la répétition et l'alignement rendent les résultats de recherche Google généralement faciles à parcourir.

Tirer parti de l'espace négatif

Le brillant Claude Debussy a dit un jour : « La musique est l'espace entre les notes. Le même sentiment est vrai pour la scannabilité : l'espace négatif entre les éléments est ce qui fait le succès d'une mise en page. La bonne quantité d'espace négatif (blanc) autour des éléments de l'interface utilisateur met l'accent sur les éléments eux-mêmes. Il met l'accent sur le contenu et offre l'espace de respiration nécessaire pour garantir que la mise en page ne semble pas encombrée. Sans répit, le cerveau humain est moins susceptible de scanner les points d'intérêt et plus susceptible d'être confus.

Utilisez des sous-titres pour résumer le contenu

Les gens réagissent souvent négativement à de gros morceaux de texte. Cela peut déclencher l'hypothèse qu'ils perdront du temps si le paragraphe ne correspond pas à leurs intérêts. Les meilleures pratiques de conception d'interface utilisateur offrent une solution à ce problème. En ajoutant de brefs sous-titres au début des longs articles, l'utilisateur a un aperçu ultime du sujet.

Lors de la rédaction du sous-titre, il est crucial de rester concis. Communiquez simplement le message clé que le contenu ci-dessous offre.

Créer des listes à puces et numérotées

Le cerveau humain est très systématique : il observe le contenu et le regroupe ensuite en unités significatives. Par conséquent, un utilisateur est plus susceptible de comprendre une liste à puces ou numérotée que plusieurs points fusionnés dans un paragraphe textuel.

L'espace négatif créé par les listes facilite l'analyse pour un utilisateur, il est donc avantageux de rechercher attentivement les opportunités. Si plus de deux points dans un texte sont parallèles et qu'ils ne nécessitent pas chacun plus de deux phrases pour être décrits, il s'agit d'un bon candidat pour une liste. Nielsen Norman Group fournit des informations encore plus détaillées sur la création de contenu numérique à puces.

Visualisez le contenu

Les utilisateurs numériques modernes sont naturellement visuels et ne sont pas toujours susceptibles de bien réagir au contenu textuel (même s'il est parfaitement structuré et suit tous les conseils de conception d'interface utilisateur pour une lisibilité idéale). Les environnements externes seront toujours un facteur. Par conséquent, pour compenser les mises en page riches en texte, l'utilisation d'images et de graphiques offre des pauses visuelles à la fois informatives et émotionnellement attrayantes. Comme dit le proverbe, une image vaut mille mots !

Des visuels originaux (illustrations, photos attrayantes, etc.) peuvent facilement capter l'attention d'un utilisateur et soutenir le concept stylistique général. De plus, ils peuvent améliorer la hiérarchie visuelle et rendre le texte plus facile à digérer. Cependant, il existe un danger qu'un graphique puisse provoquer un contre-effet s'il n'est pas utilisé correctement. Avant de transformer des idées clés en graphiques, il est essentiel que les concepteurs comprennent parfaitement le contenu qu'ils conçoivent.

Mettre l'accent sur les CTA

La majorité des expériences numériques visent à susciter une action particulière de la part de l'utilisateur. Bien que les boutons d'appel à l'action (CTA) semblent souvent très simples, ils sont stratégiquement conçus pour aider l'utilisateur à effectuer une action, comme acheter, ajouter à un panier ou simplement aller sur une autre page.

Les meilleures pratiques de conception d'interface utilisateur suggèrent de positionner le CTA près du contenu qui décrit l'action, ce qui le rend intuitif pour l'utilisateur. Un moyen efficace de tester si le CTA est bien proportionné, coloré et positionné consiste à convertir temporairement la conception finale en niveaux de gris. Si le CTA reste clairement visible et mis en valeur, l'interface utilisateur collante est bien faite.

L'importance de la scannabilité

De nombreux éléments déterminent si une conception de mise en page d'interface utilisateur sera bien accueillie par les utilisateurs, tels que la pertinence du contenu, les solutions concurrentes et la logique métier. Selon Forbes , la scannabilité est peut-être le facteur le plus négligé du marketing de contenu. En créant du contenu scannable, un visiteur à court terme peut devenir un utilisateur de longue durée.

Le contenu scannable montre à l'utilisateur final que son temps est précieux et offre la possibilité de comprendre le message principal en jetant simplement un coup d'œil sur une conception de mise en page. Le blogueur viral et professeur de journalisme Kim Keller fait remarquer aux designers que « vous entamez une conversation avec quelqu'un que vous voulez comme client. C'est une relation, et aucune relation ne peut survivre si vous ne passez pas du temps ensemble. Respectez leur temps et valorisez-le.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Meilleures pratiques de conception d'interface utilisateur et erreurs courantes
• États vides - L'aspect le plus négligé de l'UX
• La simplicité est la clé - Explorer la conception Web minimale
• Principes heuristiques pour les interfaces mobiles
• Concevoir pour la lisibilité - Un guide de la typographie Web