Share
En tant que concepteurs de sites Web, nous suivons de nombreux paradigmes de conception et principes de mise en page: grilles, cohérence verticale, disposition en F, disposition en Z, règle des tiers, rapport doré, etc. Si vous prêtez attention à ces principes, vous obtiendrez un design attrayant et fonctionnel: examinons maintenant la simple division d'une page en deux parties égales..
Bien que cela puisse sembler un peu bête et évident au début, cette mise en page fondamentale peut être très efficace. Nos yeux ont tendance à suivre un mouvement de zig-zag en parcourant une page. Si l'œil suit une ligne droite horizontale - comme dans la disposition en Z, il / elle se concentre (ou essaie de). Étant donné que 90% du trafic Web provenant de votre site ne prête pas une attention particulière à votre page, il sera certainement rentable de rendre votre conception "économe"..
D'après les études d'eye tracking de Yahoo!:
Les internautes sont toujours pressés. Ils ont autre chose à faire. Rester derrière pour apprécier la beauté et l'esthétique de votre site Web est la dernière chose à laquelle vous pouvez vous attendre. Même si un bon design est d’une grande importance, il n’incite pas le visiteur à agir: il suffit de cliquer sur le bouton «Acheter maintenant» ou «En savoir plus»..
Nous ne pouvons pas leur en vouloir. Vous rappelez-vous quand vous vouliez chercher quelque chose? Vous vous précipitez sur le premier résultat de recherche dans Google, puis vous «feuilletez» ou plutôt parcourez rapidement la page. La plupart du temps, vous faites même défiler la liste vers le bas sans faire très attention. Après cette phase, si vous décidez que la page vaut votre temps, vous faites défiler vers le haut, puis vous faites l'effort de lire et de faire attention..
Quel est le but du skimming initial? Pour obtenir le maximum d'informations, vous pouvez obtenir un premier coup d'œil sur la page. Si nous «codifions» en quelque sorte ce modèle d'écrémage, nous devrions pouvoir attirer l'attention de plus de visiteurs. À partir d'observations sur des cartes thermiques de différents sites, j'ai dégagé une tendance commune.
Vous remarquerez que vous pouvez regarder les points rouges sans effort. Étrangement, de notre expérience, nous pouvons dire que nos yeux doivent facilement suivre des lignes droites plutôt que des angles - puisque nous lisons en lignes droites. Notez que je parle de la phase initiale de survol, pas de la partie où vous portez une attention particulière à chaque détail du site..
Chaque fois que vous ne payez pas beaucoup d'attention, c'est la tendance naturelle de vos yeux - le zig-zag. Sauf s’il existe des éléments plus contrastés et plus lourds qui vous interpellent, vous suivrez probablement le schéma ci-dessus. Vous remarquerez également que ce modèle ressemble à la présentation F et que les extrémités rouges sont celles où les utilisateurs prennent une pause momentanée..
Ces points de pause momentanés sont ceux où un instantané est pris par votre cerveau. Dans une présentation en zig-zag avec des éléments contenant des informations importantes au niveau des «points de pause», le cerveau absorbe naturellement plus de détails, car il associe chaque point final en zig-zag en tant qu'entités distinctes..
Le design n’est pas simplement ce à quoi il ressemble et se sent. Le design est la façon dont cela fonctionne. -Steve Jobs
Vous pouvez (par exemple) utiliser cette fonctionnalité de la présentation Half Split pour positionner efficacement les aperçus de votre portefeuille de travaux ou les fonctionnalités importantes de votre produit ou service afin que les visiteurs en prennent connaissance rapidement. Cela les encourage finalement à rester plus de temps sur votre site et les convainc ainsi d’entreprendre des actions. Le résultat? De meilleurs taux de conversion pour vous et une meilleure expérience utilisateur pour eux.
Rendre votre conception et votre mise en page «compatibles zig-zag» est très simple. En fait, il suffit de diviser votre page en deux moitiés égales! Les moitiés égales fonctionnent bien parce que les extrémités de Zig-Zag sont plus ou moins alignées vers le centre de ces moitiés. Utilisés en superposition, ils vont bien ensemble. Placez les éléments d’importance aux extrémités des points rouges du Zig-Zag de votre page. C’est le concept de base de la demi-division ou de la mise en page 1/2.
Récemment, je travaillais sur une page de renvoi «Coming Soon». J'ai expérimenté différentes configurations, mais rien ne fonctionnait bien. J'ai tout essayé - Grilles, Nombre d'or, F-Layout. Le moment Eureka est arrivé lorsque j'ai simplement divisé la page en deux parties égales. La solution était aussi simple que ça! Cela avait l'air élégant et soigné et me rappelait le fait important que simple n'est pas nécessairement mauvais. Avez-vous vu le nouveau logo Microsoft?
La simplicité est la sophistication ultime. -Léonard de Vinci
Vous pouvez voir comment les moitiés donnent une belle hiérarchie visuelle. Tout d'abord, le ruban rouge «Coming Soon» en haut est remarqué. Ensuite, le logo est vu. Maintenant, après le zig-zag mentionné précédemment, le visiteur finit par regarder le curseur Image dans la moitié droite et enfin le formulaire de soumission par courrier électronique..
Voyons maintenant comment fonctionne la disposition divisée pour une page Portfolio d'un concepteur Web. L'objectif d'une page de galerie dans un portfolio est de montrer rapidement un corpus à un client potentiel. Il y a beaucoup d'options pour eux, car cette industrie est à peu près saturée à l'heure actuelle. Pourquoi devraient-ils vous payer? Faire une bonne première impression pourrait faire pencher la balance dans votre direction. Voyons ce que nous pouvons faire à ce sujet.
La disposition ci-dessus est divisée en deux moitiés, mais elle ne suit pas le principe de "zig-zag" que j'ai mentionné plus tôt..
Bien que cela semble être une bonne mise en page et facile à regarder, il devient assez terne après les deux premiers éléments. Couper le courant pour augmenter l'intérêt visuel aidera. Non seulement que; mais lorsque vous essayez de survoler la disposition ci-dessus, vos yeux devraient voir la première image, puis passer au texte du deuxième élément. Étant donné que vos visiteurs n’ont aucune intention de lire à ce stade, ils passent à un autre point ou quittent entièrement votre site.!
Et si vous faisiez un simple changement comme celui-ci?
Beaucoup plus intéressant, non? Interchanger simplement les positions du texte et l'image de chaque élément augmente l'intérêt visuel, de sorte que la cohérence ne rende pas votre visiteur ennuyé. Vous pouvez également placer un appel au bouton d’action en suivant le motif Zig-Zag..
Le bouton "Contactez-moi" aura désormais une plus grande chance d'être remarqué et cliqué par un plus grand nombre de vos visiteurs (pourquoi ne pas lancer un test A / B pour vérifier cela?)
La conception est un plan pour organiser les éléments de manière à atteindre au mieux un objectif particulier. -Charles Eames
La mise en page séparée est entrée dans les feux de la rampe avec le nouveau design de la timeline de Facebook. Remarquez comme vos yeux «passent» facilement d'un poste à un autre.
Apple suit également la mise en page divisée. Voici la page de l'iPad mini. Vous verrez comme il est facile d'associer chaque image à une fonctionnalité distincte de l'iPad mini. Ça me semble juste.
Microsoft a été crédité d’avoir ouvert de nouvelles voies avec son récent changement de marque, ici après une mise en page séparée sur sa page d’informations sur la surface..
Stacey est une représentation minimaliste du 1/2 Layout.
J'aime la page d'accueil de Quora. Peut-on démontrer plus simplement la disposition divisée??
Consumerbarometer.com passe au niveau supérieur avec des animations et une variation triangulaire du Zig-Zag.
Qu'avons-nous appris?
Cet article est juste un rappel gentil qu'il ne faut jamais oublier d’utiliser des schémas de base et des méthodes de conception fondamentales. En fait, il peut augmenter vos taux de conversion s'il est utilisé correctement..
Accentsconagua