Article original : How to Use Viewing Patterns in Your Website Designs
Lors de la navigation sur un site web ou une application, les gens ont tendance à assimiler les informations affichées différemment. Vous avez peut-être remarqué que parfois une personne peut manquer des informations que d'autres ne manqueraient pas. Cela vous est peut-être déjà arrivé.
Cela est dû au fait que chacun a une manière particulière de traiter les informations. En design, cela s'appelle les schémas de visualisation (ou de lecture). En tant que designer, il est important de comprendre comment vos utilisateurs (y compris les potentiels) consomment les informations, et comment placer au mieux les informations les plus cruciales pour que personne ne les manque.
Dans cet article, nous parlerons des différents schémas de visualisation, comment choisir les meilleurs pour votre projet, et nous verrons également des exemples concrets de ces schémas.
Voici ce que nous allons couvrir :
- Ce que vous devez savoir avant de lire
- L'origine des schémas de visualisation
- Les schémas de visualisation courants
- Pourquoi les schémas de visualisation sont-ils importants ?
- Comment choisir un schéma de visualisation pour mon projet de design ?
- Conclusion
Prérequis :
Avant d'entrer dans le vif du sujet, veuillez noter qu'il sera utile d'avoir des connaissances de base sur les principes de design de base et l'importance de ces principes pour guider l'attention des utilisateurs et organiser les informations de manière efficace.
Mais cela n'est pas nécessaire, car j'ai écrit cet article pour tout le monde, y compris les débutants absolus.
L'Origine des Schémas de Visualisation
Le concept des schémas de visualisation peut être retracé dans le domaine de la psychologie, plus précisément dans l'étude des mouvements oculaires et de la perception visuelle.
Alors que les gens lisent et consomment des informations visuelles depuis longtemps, l'observation et l'analyse appropriées des comportements de lecture ont émergé avec le développement de la technologie de suivi du regard et des méthodologies de recherche scientifique à la fin du 19ème et au début du 20ème siècle.
De nombreux pionniers et chercheurs tels que Louis Emile Javal, Edmund Huey, Alfred L. Yarbus et Charles H. Judd ont mené des expériences pour observer les mouvements et comportements oculaires à la fin du 19ème siècle et au début à la moitié du 20ème siècle.
La formalisation des schémas de visualisation/lecture en tant que principes de design dans le contexte du design graphique et de l'architecture de l'information a commencé à gagner en traction dans la seconde moitié du 20ème siècle. Les designers et experts en utilisabilité ont commencé à appliquer les insights des études de suivi du regard pour optimiser les mises en page pour les médias imprimés, la signalétique et les interfaces numériques.
Avec le temps, l'étude des schémas de visualisation s'est étendue au-delà de la lecture basée sur le texte pour inclure divers formats de médias, tels que les pages web, les présentations multimédias et les interfaces interactives.
Aujourd'hui, les schémas de visualisation continuent d'évoluer avec les avancées technologiques et les changements dans les comportements des utilisateurs, guidant la manière dont les designers abordent la mise en page, la navigation et la présentation du contenu.
Schémas de Visualisation Courants
Maintenant que nous savons comment les schémas de visualisation sont apparus, parlons de quelques schémas de visualisation courants.
Le Schéma en F
Il s'agit d'un schéma de visualisation courant observé dans la consommation de contenu en ligne. Selon ce schéma, les utilisateurs scannent la page dans un mouvement horizontal en haut, puis descendent la page, scannant des sections horizontales plus courtes. Ils continuent à lire moins de contenu, jusqu'à ce qu'ils commencent finalement à lire verticalement, formant la forme de F.
Diagramme illustrant le fonctionnement du schéma en F sur un wireframe. Crédit Image : Nielsen Norman Group
Pour tirer parti du schéma en F, vous pouvez placer des informations importantes telles que les titres, les points clés et les CTAs en haut et sur le côté gauche de la page pour assurer une visibilité maximale.
Voici quelques exemples de plateformes réelles qui utilisent le schéma en F :
Le Schéma en Z
Le schéma en Z est un autre schéma de visualisation courant. Ce schéma peut être remarqué dans les designs où l'utilisateur est censé déplacer ses yeux en un motif en zigzag à travers la page.
Ce schéma commence généralement par un mouvement horizontal en haut de la page (formant le premier trait du "Z"), suivi d'un mouvement diagonal de haut-droit à bas-gauche (formant le deuxième trait), et enfin, un autre mouvement horizontal en bas de la page (complétant le "Z").
Diagramme illustrant le schéma en Z. Crédit Image : UX Planet
Pour tirer parti de ce schéma, vous pouvez aligner les informations sur le chemin prédit du schéma en Z pour guider l'attention des utilisateurs plus efficacement, en particulier dans les designs comme les pages de destination et les présentations.
Voici quelques exemples de plateformes réelles qui utilisent le schéma en Z :
Le Diagramme de Gutenberg
Le diagramme de Gutenberg décrit un schéma de visualisation basé sur le mouvement naturel des yeux des lecteurs occidentaux, et est influencé par des facteurs culturels et linguistiques.
Le diagramme de Gutenberg divise la page en quatre quadrants : la zone optique primaire (en haut à gauche), la zone de jachère forte (en haut à droite), la zone de jachère faible (en bas à gauche), et la zone terminale (en bas à droite).
Le schéma suggère que l'œil balayera la page horizontalement et verticalement dans une série de mouvements horizontaux appelés axes d'orientation. Chaque balayage commence un peu plus loin du bord gauche et se rapproche un peu plus du bord droit. Le mouvement global est que l'œil se déplace de la zone primaire à la zone terminale... – Stephen Bradley (Vanseo Design)
Image illustrant le diagramme de Gutenberg divisé en 4 quadrants. Crédit Image : Techwala
Vous pouvez placer stratégiquement le contenu en fonction du diagramme de Gutenberg pour optimiser la hiérarchie visuelle et la lisibilité, en veillant à ce que les informations importantes reçoivent le plus d'attention.
Voici quelques exemples de plateformes réelles qui utilisent le diagramme de Gutenberg :
Le Schéma en Couches
Le schéma en couches implique l'empilement de plusieurs couches de contenu verticalement, chaque couche contenant des informations ou des éléments visuels distincts.
Image illustrant le schéma en couches sur une mise en page. Crédit Image : Chip Cullen
Les utilisateurs interagissent généralement avec ce schéma en scannant d'abord la couche supérieure, puis en explorant séquentiellement les couches plus profondes en fonction de leur intérêt ou de leur curiosité. Vous pouvez utiliser ce schéma pour présenter des informations complexes dans un format plus structuré, permettant aux utilisateurs de naviguer à travers les couches de contenu à leur propre rythme.
Voici quelques exemples de plateformes réelles qui utilisent le schéma en couches :
Pourquoi les Schémas de Visualisation sont-ils Importants ?
Les schémas de visualisation vous aident à guider la manière dont les utilisateurs visualisent et consomment les informations sur vos designs. Ils vous aident à organiser le contenu de manière à ce qu'il s'aligne naturellement avec les habitudes de lecture de vos utilisateurs. En plaçant les informations là où les utilisateurs sont les plus susceptibles de regarder en premier, vous vous assurez que les messages clés sont communiqués efficacement.
De plus, comprendre les schémas de visualisation vous aide à répondre aux besoins d'un groupe diversifié d'utilisateurs. Différentes personnes traitent les informations de différentes manières et comprendre ces habitudes garantit que vous concevez en gardant l'accessibilité à l'esprit.
De plus, les designs qui s'alignent avec les schémas de visualisation existants offrent une expérience utilisateur plus intuitive et moins stressante.
Comment Choisir un Schéma de Visualisation pour mon Projet de Design ?
Choisir un schéma de visualisation pour votre design dépend de plusieurs facteurs, notamment le contexte de votre projet, les préférences des utilisateurs, les objectifs du projet, etc.
Voici un guide étape par étape pour vous aider à sélectionner le meilleur schéma de lecture pour votre projet :
- Connaître vos Utilisateurs : Vous devez d'abord comprendre la démographie de vos utilisateurs cibles ou potentiels. Que préfèrent-ils ? Quels sont leurs objectifs ? Dans quelles situations utiliseraient-ils votre projet ? Recueillez des insights sur la manière dont ils interagissent avec le contenu et leur niveau de compétence technique.
- Définir les Objectifs de votre Projet : Assurez-vous de clarifier les objectifs et les résultats souhaités du projet sur lequel vous travaillez. Essayez-vous d'informer ou de faciliter une action spécifique ? Votre design doit-il être très sérieux ou un peu ludique ? Vous devez identifier les messages clés que vous souhaitez transmettre à vos utilisateurs, et les prioriser en fonction de leur importance.
- Évaluer le Contexte et la Plateforme : Prenez en compte la manière dont vos utilisateurs verront votre produit. Verront-ils votre contenu sur un site web, une application ou un support imprimé ? Considérez les types d'appareils et les tailles d'écran que vos utilisateurs sont susceptibles d'utiliser.
- Sélectionner le Schéma de Visualisation : En tenant compte des données disponibles et des insights que vous avez recueillis, vous pouvez choisir un schéma de visualisation qui s'aligne le mieux avec les objectifs de votre projet.
Maintenant que vous avez sélectionné un schéma de visualisation pour votre design, assurez-vous de surveiller constamment son efficacité grâce à des tests et des retours.
Note : Vous pouvez intervertir ces étapes ou même en sauter certaines. Faites simplement ce qui fonctionne le mieux pour vos utilisateurs.
Faisons un petit exercice pratique :
Supposons que vous travaillez sur une section héro pour un nouveau site web de commerce électronique vendant des équipements de plein air. Certaines choses que vous devez considérer pour ce projet incluent :
- L'objectif principal : mettre en avant les dernières offres de produits dans la section héro et inciter les visiteurs à explorer davantage le site web. Vous voudrez mettre en avant les caractéristiques clés, les produits et les appels à l'action (CTAs) pour encourager la conversion, comme effectuer un achat ou s'inscrire à une newsletter.
- Vos utilisateurs cibles : probablement des passionnés de plein air, y compris des randonneurs, des campeurs et des aventuriers. Ils seront probablement des personnes avec un temps limité à passer sur chaque page web.
- Contexte et plateforme : Les utilisateurs accéderont probablement à la page sur plusieurs appareils, y compris des ordinateurs de bureau, des ordinateurs portables, des tablettes et des smartphones. Vous voudrez considérer comment le design s'adaptera de manière responsive à travers différentes tailles d'écran et orientations, en priorisant l'optimisation mobile pour les utilisateurs en déplacement.
En raison des contraintes de temps de vos utilisateurs et du besoin de capter rapidement l'attention, le schéma en F peut être un choix approprié. Placez le contenu de haute priorité, comme les produits phares, les meilleures offres et les CTAs proéminents, en haut et sur le côté gauche de la page, là où les utilisateurs sont les plus susceptibles de regarder en premier.
Vous pouvez utiliser des indices visuels tels que des flèches, une typographie en gras et des couleurs contrastées pour attirer l'attention sur les éléments clés et guider les mouvements des yeux des utilisateurs vers le bas de la page.
Voici ce que j'ai conçu à partir du design pratique :
Section héro que j'ai conçue en utilisant le schéma en F.
Dans le design ci-dessus, dans l'ordre séquentiel, il y a :
- une navigation en haut contenant le logo, des liens vers d'autres sous-pages, et les CTAs de connexion et d'inscription.
- un titre principal, une description et un appel à l'action (Shop Now) sur le côté gauche de la page.
- une section montrant les dernières arrivées sur le site web.
Image montrant comment le schéma en F est représenté sur le design.
J'aimerais voir les résultats de cet exercice pratique de votre côté.
Conclusion
Les schémas de visualisation sont très importants comme je l'ai mentionné précédemment. Ils sont inestimables pour les designers de toutes les disciplines, et sont faciles à comprendre et à incorporer dans vos designs.
Vous devez simplement être sûr de ce qui fonctionne le mieux pour vos utilisateurs, et concevoir en gardant cela à l'esprit. Assurez-vous également d'expérimenter avec différents schémas de visualisation afin de découvrir votre propre style unique. Amusez-vous à expérimenter !