Share
Z-Layout est un excellent moyen de démarrer n'importe quel projet de conception Web, car il répond aux exigences essentielles de tout site efficace: stratégie de marque, hiérarchie, structure et appel à l'action. Bien que le classique "Z-Layout" ne soit pas la solution idéale pour chaque site Web, il s'agit certainement d'une présentation suffisamment efficace pour justifier son inclusion dans l'arsenal de concepteurs de concepteurs de sites Web..
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 premier d'une série où 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 le motif en forme de "F", 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..
Le principe de Z-Layout est en fait assez simple: superposez la lettre Z sur la page. Placez les éléments que vous souhaitez que le lecteur voie en haut du Z. L'œil suivra naturellement le chemin du Z. Le but est donc de placer votre "appel à l'action" à la fin. Tout au long du chemin, vous pouvez inclure des informations qui vont jusqu'à l'appel à l'action. Regardons le diagramme:
Notez que nous avons numéroté les points clés le long du chemin - ceux-ci représentent l'ordre dans lequel un lecteur est susceptible de voir le contenu de la page. Voyons comment cela se traduit par une mise en page réelle:
Maintenant superposons le diagramme en Z au dessus de la disposition:
Simple, non? Ce schéma n’a rien de compliqué, mais il permet de déplacer rapidement et efficacement l’œil du point 1 au point 4 dans un ordre logique et se termine par un puissant appel à l’action. Il y a encore quelques choses que nous pouvons faire pour pimenter cette mise en page bien… ajoutons donc quelques choses à la conception:
Ici, vous pouvez voir que le nouveau bouton "Inscription" dans la navigation se démarque davantage; Le "curseur" que nous avons ajouté à la zone de classement aide à maintenir l'attention de l'utilisateur au centre du cadre; Les 2 icônes situées à côté des blocs de contenu du point 3 contribuent également à les rendre un peu plus intéressants visuellement. Encore une fois - ce genre de choses est simple, mais simple peut être bon quand il s'agit de concevoir un site Web! Vous pouvez créer des couches de complexité à votre guise, sans oublier la puissance d'une présentation simple et efficace..
Z-Layout n'a certainement pas besoin d'être la solution concrète finale pour tous les sites, mais comme je l'ai déjà mentionné, c'est souvent un bon point de départ pour tout projet de conception, car il aborde les 4 grands principes d'une conception efficace:
Cela fonctionne parce que la plupart des lecteurs occidentaux numériseront un site de la même manière qu’ils numériseraient un livre - de haut en bas, de gauche à droite. À partir de cette base simple, vous pouvez pratiquement aller n’importe où: ajoutez plusieurs appels à l’action, réduisez la hauteur du Z, étendez-le, faites ce que vous voulez qui correspond au but du site..
Jetons un coup d'œil à quelques superbes conceptions de sites utilisant la structure Z-Layout. Une chose que vous voudrez noter dans ces exemples est la capacité d'adaptation de z-layout. L'appel à l'action peut ne pas toujours être le même (certains sites peuvent vouloir vous conduire à leur portefeuille plus qu'ils ne vous veulent "Inscrivez-vous"); le contenu le long du chemin peut paraître nettement différent de notre exemple. La chose à noter est la façon dont l’aspect narratif est transmis: 1, 2, 3, Action! En déplaçant l'œil le long du Z-Path, les chances qu'un spectateur finisse par faire ce que vous voulez qu'il fasse soient augmentées.
Pendant que vous visualisez ces exemples, essayez de trouver le chemin Z que le concepteur souhaite vous voir suivre..
À première vue, Evernote semble complexe, mais un examen plus attentif révèle un chemin z se terminant par le bouton "Télécharger". 
Beaucoup plus simple, le site Daina Reed fournit quelques informations brèves, puis une action "Entrez en contact". 
Le chemin sur CodeMonkey commence au logo et se termine à "Get Started". 
C'est un peu plus difficile à voir ici à cause de la palette duo-chrome, mais la disposition en z crée le cadre général. 
Cet exemple se termine par une étiquette de prix brillante et audacieuse. 
Probablement l’une des utilisations les plus claires de la Z-Layout, la conception Blue Acorn touche chaque point du parcours.. 
La conception de Campaign Monitor mélange la mise en page, mais les étapes 1, 2, 3 et 4 sont toutes intactes.. Il est important de noter que la disposition en Z n'est pas le seul paradigme de disposition existant. Heck, il y a à peu près autant de mises en pages qu'il y a de lettres dans l'alphabet. La disposition en Z est l’une des principales dispositions, car elle est si simple à utiliser comme base, mais vous voudrez toujours faire confiance à votre instinct lorsqu’il sera temps de prendre une décision finale..
… Indépendamment de toute mise en page spécifique, les téléspectateurs sont plus susceptibles de se tourner vers les éléments les plus volumineux, les plus brillants et les plus contrastés d'une page..
De nombreuses études intéressantes sur le suivi oculaire suggèrent que tenter de prédire le mouvement des yeux sur un site Web est à peu près aussi erratique que d'envoyer 1 000 enfants dans un magasin de bonbons. Plusieurs études ont également montré que la disposition en forme de «F» (que nous examinerons ensuite dans cette série) est plus efficace pour contrôler le mouvement des yeux du spectateur sur une page. La vérité est que, quel que soit le modèle de mise en page spécifique, les utilisateurs sont plus susceptibles d’abord de regarder les éléments les plus grands, les plus brillants et les plus contrastés d’une page. Garde ça en tête; si votre objectif est de guider le spectateur à travers la mise en page Z, ne lui donnez pas plus d'occasions de se laisser distraire le long du chemin qu'il ne l'a déjà fait.
Z-Layout brille vraiment dans les projets de conception où la simplicité et la motivation à passer à l'action sont les principes les plus importants. Essayer de forcer une Z-Layout sur une structure de contenu complexe ne fonctionnera probablement pas bien, mais permettre au motif-Z de constituer un cadre pour un site très basique peut apporter un sentiment d'ordre qui peut vous aider à augmenter votre taux de conversion..
Découvrez le modèle en forme de "F"!
Oh! Consultez la liste des modèles de stock utilisant la disposition Z ici.
Accentsconagua