Comprendre la disposition F dans la conception Web

Aujourd'hui, nous allons examiner la "disposition de modèle F". Plutôt que d'essayer de forcer le flux visuel du spectateur, F-Layout s'adapte aux comportements naturels de la plupart des internautes et s'appuie sur des études scientifiques pour le sauvegarder. Ce didacticiel vous expliquera les principes de la mise en page F, pourquoi cela fonctionne et comment créer votre propre.

Comprendre comment différentes mises en page peuvent modifier le comportement des utilisateurs est l’un des principes centraux de la création d’une expérience utilisateur efficace..

Cet article est le deuxième d'une série dans laquelle nous examinerons la grande variété de paradigmes de mise en page existant dans le monde de la conception Web. L'objectif: mieux comprendre pourquoi vous pouvez choisir un concept de présentation plutôt qu'un autre. Dans cette série, nous examinerons également la disposition en forme de «Z», la disposition ouverte et certaines dispositions hors de la boîte qui ne manqueront pas de vous donner d'excellentes idées. Comprendre comment différentes dispositions peuvent modifier le comportement des utilisateurs est l’un des principes centraux de la création d’une expérience utilisateur efficace..

Présentation de la mise en page F

Le F-Layout s’appuie sur diverses études de traçage des yeux pour son concept fondamental. Ces études scientifiques montrent que les internautes lisent l’écran selon un motif en "F" - en observant le plus haut, le coin supérieur gauche et le côté gauche de l’écran… ne lançant parfois que des regards vers le côté droit de l’écran. Ces études de traçabilité des yeux plaident en faveur du placement des éléments les plus importants de votre site (stratégie de marque, navigation, appel à l'action) dans la partie gauche du dessin..

Jetons un coup d'œil à une carte thermique en utilisant Webdesigntuts + comme exemple:

Cette carte thermique montre la forme abstraite en F vers laquelle le général de l'utilisateur gravite. Les points chauds (rouge / orange / jaune) représentent les endroits où l'attention de l'utilisateur s'attarde le plus longtemps.

Permettez-moi de vous expliquer le comportement général:

• Les visiteurs commencent en haut à gauche de la page.
• Ensuite, ils parcourent le haut du site (navigation, abonnement, recherche, etc.)
• Ensuite, ils descendent, lisant la rangée complète suivante de contenu… dans la barre latérale..
• Enfin, les internautes entrent dans un "modèle de balayage" une fois qu'ils ont touché la majeure partie du contenu du site.

Prenons un moment pour transformer ce modèle en une structure filaire à nu:

Prenez un moment pour remarquer quelques modèles de comportement clés; La lecture se fait en grande partie de la même manière qu'un livre: de haut en bas, de gauche à droite; Le contenu de la barre latérale est souvent rejeté sous le "pli" et n'est généralement analysé que brièvement. Le gros de l'attention reste dans la colonne du contenu principal où, dans ce cas, la liste d'articles est située.

Une inspection minutieuse révèle une hiérarchie visuelle à laquelle vous pourriez normalement vous attendre:

• La marque et la navigation retiennent avant tout l'attention du visiteur.
• Au sein de la structure du concours, les images reçoivent le plus d'attention.
• Les titres viennent ensuite.
• Le texte semble être numérisé, pas lu à fond.

Application de la disposition F à un dessin

À titre d’exercice, passons à la création d’un dessin à l’aide de la présentation en F. Commençons par esquisser l’emplacement approximatif de nos principaux éléments de contenu à l’aide d’une méthode filaire:

Notez que nous essayons de rendre notre "déclaration de mission" principale aussi près que possible du haut de la page pour tenter de communiquer rapidement l'objectif du site. Nous cédons également au désir des visiteurs de "numériser" le contenu en divisant notre conception en deux colonnes principales: l'une pour notre contenu principal, l'autre pour les informations auxiliaires (la barre latérale)..

Ensuite, ajoutons du contenu réel à la conception pour voir à quoi elle ressemble:

C'est rude, mais les ingrédients clés sont là. Vous remarquerez que l’intention principale du site est maintenant communiquée en quelques secondes… la rangée supérieure de contenu remplit à présent l’obligation de "guider" le visiteur; Si votre navigation est ici, ils savent également où ils peuvent aller.

Au-dessous de la rangée du haut, nous utilisons des images et des titres "accrocheurs" pour attirer l'attention des internautes… même s'ils ne sont intéressés que par la numérisation du contenu, il y a de fortes chances qu'ils puissent trouver quelque chose d'intéressant.

Nous essayons également de capitaliser sur la deuxième ligne du "F" en plaçant une publicité ou un "appel à l'action" ici (# 4).

Maintenant, superposons la mise en page F originale pour voir comment nous correspondons:

Pas mal non? Nous voudrons peut-être bricoler les détails (style, libellé des titres, etc.), mais la plupart du temps, nous autorisons le comportement d'analyse du motif F à dicter notre conception..

Une chose à noter ici est que la hauteur de chacune des deux lignes au-dessus du "F" peut être variable. Certains concepteurs peuvent choisir de les laisser aussi minces que possible pour encourager les utilisateurs à commencer à numériser immédiatement. d'autres pourraient choisir d'en faire une partie beaucoup plus dominante de la conception.

Que se passe-t-il quand vous voulez sortir le surfeur du "modèle de balayage"? Vous ne bénéficierez certainement pas d'un utilisateur ennuyé s'il commence à ternir tout, alors ajoutons un élément "gênant" dans la zone de numérisation pour maintenir l'intérêt de l'utilisateur..

Cette technique de "briser les attentes" de la mise en page peut être utile lorsque vous avez de très longues longueurs verticales de contenu qui vous paraissent ennuyeux ou ennuyeux lorsque vous faites défiler les deux premiers titres. En envoyant une boule de commande au spectateur, vous pouvez laisser les utilisateurs bouger sur votre site en fournissant des éléments visuellement intéressants 1 000, 2 000, voire 3 000 pixels en dessous du pli..

Pourquoi ça marche

F-Layout fonctionne car il permet aux internautes de numériser du contenu de manière naturelle. La mise en page est confortable car les gens lisent de haut en bas, de gauche à droite depuis le début de leur vie. Les implications de ce comportement sont en quelque sorte une arme à double tranchant:

• Si vous avez besoin de dire quelque chose, vous devez absolument le dire en haut, car…
• Les utilisateurs ne vont pas lire chaque mot de la page. En fait, la plupart des lecteurs ne se soucieront même pas de lire l'extrait d'un article. Tout ce qui dépasse un titre ne sera probablement là que pour le référencement.
• Les images et les titres ne sont fiables que s'ils sont intéressants et attrayants.

Si tout cela semble indiquer que vous concevez un site plus comme un annonceur qu'un concepteur, vous auriez raison. La plupart des sites qui s'appuient fortement sur F-Layout se fient également à la publicité ou à d'autres arguments de type "appel à l'action" dans l'encadré latéral pour générer des revenus ou une autre forme de participation des utilisateurs. Ce n'est pas forcément une mauvaise chose (hé, ces publicités se trouvent-elles dans notre barre latérale?!), Mais cela souligne la relation entre le contenu et la barre latérale… le contenu est roi, la barre latérale est généralement là pour vous impliquer dans quelque chose qui vous mènera à un autre niveau.

Alors qu'est-ce que cela signifie pour une barre latérale? Une relation efficace entre la colonne de contenu et la colonne de la barre latérale dans une conception utilisera la barre latérale de l'une des deux manières suivantes:

1. Présenter un contenu "pertinent". Cela pourrait être une publicité, une liste "d'articles connexes", un widget de médias sociaux, etc..
2. En tant qu'outil permettant aux utilisateurs de trouver un contenu spécifique. L'exemple le plus évident est une barre de recherche, mais il s'agirait également d'une liste de catégories, d'un nuage de tags, d'un widget "messages populaires", etc..

La poule ou l'oeuf?

Alors qui est venu en premier? F-Layout a-t-il été conçu en réponse à la numérisation de sites par le F-Pattern, ou bien les internautes ont-ils commencé à numériser des pages dans le F-Pattern en réponse à tant de sites conçus de cette façon… Je suppose que c'est un un peu des deux. Oui, les gens ont toujours lu de haut en bas, de gauche à droite; mais la prédominance de la disposition du site à deux colonnes incite certainement les visiteurs du site Web à analyser ce qu'ils font..

Le fait est que le modèle F est étayé par la recherche. Par conséquent, que vous souhaitiez ou non que votre présentation y adhère étroitement, il est utile de considérer au moins la réaction des visiteurs à votre site s'ils préfèrent utiliser le "scan F". la toile.

Exemples de mise en page F en action

Ok, donc avant d’énumérer ces éléments, il est utile de préciser que toute configuration de site Web sur la présentation de blog traditionnelle à 2 colonnes utilise une présentation "Motif F", il est donc trop prévisible de vous montrer davantage de sites utilisant la norme. Motif F.

Ce que nous sont Nous allons voir dans ces exemples comment chacun de ces modèles excelle à manipuler le flux oculaire du motif F… remarquez que les modèles les plus efficaces sont ceux qui anticipent le comportement de balayage du motif F, puis les exploitent à leur avantage..

DesignSnack.com vous dit non seulement en quoi ils consistent en haut du "F", mais en fait, ils vous impliquent avant même que vous ne commenciez à faire défiler. Le site LAtimes.com est l'un de mes sites de journaux préférés. Vous voudrez remarquer à quel point ils "brisent les attentes en matière de mise en page" une fois que vous commencez à faire défiler. Kickstarter délivre une déclaration de mission efficace au sommet, mais ils se séparent du moule en abandonnant complètement l'encadré en faveur d'un résultat de balayage absolu sous le pli. Les clichés photo (ou l’un des sites du réseau Tuts +) reposent fortement sur le flux oculaire du motif F. Prenez note de cette barre latérale là-bas. Est-ce ennuyeux? Nope… chaque widget de la barre latérale comprend un peu de design personnalisé qui le rend intéressant et pertinent. Oh, et notez à quel point les titres sont numérisables… parfois, un modèle de conception simple et direct constitue la meilleure approche.. CollegeHumor est peut-être le dernier endroit auquel vous pensez pour une leçon de design formel, mais jetez un regard attentif sur leur première page. Ils le déposent sur THICK en haut de la partie F… à tel point que vous pourriez appeler cela la disposition FFFFF. Le raisonnement est simple: si vous ne pouvez pas battre le désir d'un utilisateur de survoler rapidement votre contenu à la recherche de quelque chose d'intéressant, vous pouvez également vous y joindre. GigaOm est un autre site qui excelle à "briser les attentes en matière de mise en page". Lorsque vous visitez le site, faites défiler la page pour voir comment ils diffusent un contenu intéressant jusqu'au pied de page.. La visite guidée des produits de SquareSpace montre qu'il n'est pas nécessaire que la barre latérale se trouve du côté droit… en fait, vous pouvez tirer parti du fait que les utilisateurs graviteront autour de la tige du F en y plaçant une sous-navigation.. J'ai sauvé CreativeSessions pour la fin parce qu'ils font quelque chose de complètement différent. Ils utilisent essentiellement la partie supérieure du F comme énormes énigmes (notez qu’il n’ya pas d’image de marque ou de message là-haut). Ce faisant, ils vous encouragent à lire ce qui se trouve en dessous du pli.

Mises en garde à mentionner

Il y a des inconvénients à trop compter sur le "motif F" comme base de conception. D'une part, les conceptions qui collent trop étroitement à la disposition en F peuvent sembler ennuyeuses et prévisibles… pour lutter contre cela, vous devrez, en tant que concepteur, apporter un certain niveau d'innovation à la table. Des widgets bien conçus, des titres accrocheurs et des images attrayantes sont des astuces utiles, mais vous voudrez probablement aller plus loin..

Une fois que vous avez plongé sous les deux premières lignes du «F», il devient souvent difficile pour un designer de garder les choses intéressantes. J'ai constaté que de nombreux concepteurs vendent les 600 pixels d'un site à leurs clients… tout va bien (c'est ce que les visiteurs voient en premier), mais les leçons de la mise en page F sont qu'il est également important de garder les choses intéressant lorsque vous commencez à faire défiler.

Tout comme une chanson qui a un rythme constant peut vous donner mal à la tête, une page peut souvent devenir terne et répétitive si vous ne prenez pas la peine d'ajouter un élément intéressant de temps en temps. Briser le rythme d'un design en limitant les éléments répétitifs est une technique cruciale que vous voudrez concevoir sur vos sites pour amener votre travail au niveau supérieur..

Assurez-vous également de lire le post "Z-Layout"!

Avez-vous vos propres pensées ou commentaires? Partagez-les ci-dessous!