La mise en page est la structure qui prend en charge les composants visuels d’une interface. L’aide à la vision pour interpréter le contenu via des regroupements et la hiérarchisation du contenu aide l’utilisateur à trouver un sens au contenu. La configuration technique du contenu est invisible pour l’utilisateur, mais pertinente pour la navigation. Une bonne conception de la mise en page est liée aux objectifs et se traduit par une bonne expérience utilisateur. Par conséquent, on peut dire que la configuration correcte permet à l’utilisateur de trouver rapidement ce qu’il recherche. Cela se traduit également par plus de conversions et plus de temps passé sur le site (engagement).

Une bonne utilisation de l’espacement aide à se concentrer sur le contenu, réduit les distractions et améliore la capacité de numérisation des pages. Les distances définissent également des catégories et donnent une signification logique aux processus mentaux de l’utilisateur. En développant cela avec une mise en page créative et dynamique, vous obtenez une conception d’interface utilisateur conviviale, mais également esthétique. Pour créer une mise en page, nous devons connaître les principes de proximité et d’espace négatif. Dans cette étude, nous présenterons sept ressources pour la création professionnelle d’une mise en page debout.

Taille

La hiérarchie des tailles facilite la décision de l’utilisateur. La taille est le moyen le plus clair d’informer l’utilisateur de ce qui est important sur un site Web, c’est pourquoi les présentations de sites Web comportent généralement des blocs d’informations hiérarchiques.

Le jeu de règles de navigation traditionnel actuel peut être divisé en deux types, les pages de navigation et les pages grand public. Lorsqu’un utilisateur entre sur la page d’accueil d’un site Web, il s’agit généralement d’une page de navigation, soit pour découvrir du contenu, soit pour rechercher quelque chose de spécifique. C’est pourquoi vous créez des blocs hiérarchiques, qui agissent comme des portes d’entrée pour tout le contenu d’interface.

D’un autre côté, une fois que l’utilisateur a trouvé ce qu’il cherchait et clique sur un bloc, il doit maintenant consommer le contenu, rendant les hiérarchies moins pertinentes sur cette page. Dans ce scénario, la conception la plus fonctionnelle et la plus conviviale consiste à afficher les informations de manière équilibrée pour faciliter la lecture naturelle de la vue. Tout est lié avec l’objectif de chaque page.

Le voyage visuel

Être conscient du voyage visuel vous donne le pouvoir de le manipuler. Guider le chemin le long d’un chemin proposé est beaucoup plus convivial que de forcer le balayage de contenu, par conséquent, le voyage visuel doit être familier dans la conception.

Il est très courant de commencer à concevoir avec la fausse notion que tous les éléments doivent attirer l’attention, mais concevoir sans aucun ordre de priorité entraîne un manque de clarté et beaucoup de bruit dans la communication. Bien qu’il soit difficile de prendre ces décisions, en particulier dans de petites zones telles que l’écran d’un smartphone, les considérations suivantes peuvent faciliter les choses:

Connaître les informations, comprendre de quoi il s’agit, le but de la page et quels éléments seront inclus.

Esquissez délibérément le contenu, créez une mise en page et commencez à créer des versions alternatives en fonction de l’ordre de priorité établi.

Confirmer le voyage visuel de temps en temps, revenir au design avec des «yeux nouveaux» est un excellent moyen de reconnaître de meilleures opportunités pour améliorer le design et le chemin visuel.

Asymétrie

Les conceptions asymétriques expriment plus de mouvement et de dynamique. L’asymétrie a tendance à être plus expressive à l’œil en raison des lois de composition et d’équilibre, elle facilite la hiérarchie des éléments et leur donne du mouvement.

L’idée principale est d’équilibrer les éléments d’interface de telle manière qu’une partie ne pèse pas plus que l’autre, mais sans être strictement évidente comme dans les conceptions de symétrie. Cela nous oblige à définir une hiérarchie dans la mise en page et à jouer avec des éléments tels que textes, icônes, images, espaces et couleurs de manière plus créative.

Le parcours visuel d’une composition asymétrique va de l’élément principal aux éléments secondaires, exprimant une certaine tension entre eux et une variété d’émotions qui dépendront du design et du style. Il est très important d’entourer les éléments d’un espace négatif approprié. Bref, on peut dire que l’asymétrie est une symétrie cachée, qui est plus intéressante pour l’esprit.

Distances et espaces

La distance correcte définit la disposition. Étant donné que la disposition est documentée par la distance entre les éléments ou l’espace négatif, sa forme dépend de la distance entre certains éléments et d’autres.

Sur Chilimobil.no, vous pouvez voir le regroupement des éléments qui composent une mise en page, l’espace entre le premier groupe (illustration spot et texte), le deuxième groupe, USP, le troisième groupe, société de presse et le quatrième groupe (plans tarifaires) servent de support pour la structure. De cette manière subtile, l’espace négatif forme une mise en page.

Ces espaces contiennent la composition et connectent ou déconnectent les éléments de manière à créer des associations entre eux. Les principales associations visuelles sont déterminées par la mise en page, elles doivent donc être conçues à cet effet dès le début. Nous devons également garder à l’esprit que la distance entre un élément et un autre doit être le reflet de ce que l’utilisateur a à l’esprit comme étant lié et non lié, et que l’isolement d’un groupe d’éléments offre plus de lisibilité et de sens.

Pause

La violation d’un schéma traditionnel retient l’attention de l’utilisateur. La répétition des formes a tendance à conditionner l’esprit, donc changer de forme attire toujours l’attention de l’utilisateur et fait attendre le visiteur pour plus d’informations.

Sur Digitaldagen.no, les haut-parleurs sont affichés de manière à créer une interruption dans la lecture du lecteur. Les images 2, 3, 4, 5, 7 et 8 ont la même dimension, mais les images 1 et 6 cassent le format pour rendre le voyage visuel plus dynamique.

En mettant l’accent sur attirer l’attention, le changement de la même forme liée à la loi visuelle de la répétition et de l’ajustement, où tout élément appartenant à un groupe qui viole l’aliénation ou d’autres caractéristiques, rendra l’élément plus frappant et intéressant pour l’œil.

Garder l’attention de l’utilisateur et rendre l’expérience passionnante a beaucoup à voir avec le mouvement, les échelles, le «fouillis» et la violation de certaines règles. L’ordinaire est agréable, mais l’innovation devient mémorable.

Positionnement

Le chevauchement d’un élément sur un autre crée de la profondeur. Bien que la mise en page vive dans un monde à deux dimensions, placer un élément sur une autre profondeur en expansion donnera du réalisme à la composition.

Cette capture d’écran de Digitaldagen.no montre la superposition des textes: « Cette année », « Conférence », « Accès à toutes les conférences » et la superposition avec l’image de la conférence équilibre le monde plat de la conception d’interface utilisateur et le style tridimensionnel que la conception graphique peut avoir.

L’utilisation de différentes couches rend le design plus réaliste et visuellement plus intéressant. L’une des règles les plus importantes lorsque le texte se chevauche automatiquement est qu’il doit y avoir suffisamment de contraste avec l’arrière-plan pour éviter les problèmes de lisibilité. Si la vue ne peut pas facilement reconnaître les personnages, l’expérience sera stressante. Il est également important d’utiliser ce que l’on appelle un « repli » afin que les programmes de lecture puissent facilement lire ce type de conception.

Grille

L’utilisation de la grille est mathématiquement agréable à l’œil. Bien qu’invisibles dans leur conception, les grilles facilitent le placement des éléments, créant une distribution proportionnelle et offrant une grande cohérence à l’interface.

Concevoir avec la bonne distance est un véritable défi, mais il est encore plus difficile de maintenir la cohérence de cette distance tout au long du flux de l’interface utilisateur. La grille est la solution standard pour cela. La façon dont il contient les éléments donnera une proportion exacte, mais nous devons nous rappeler que la mise en page peut varier considérablement, en fonction du style du concepteur et de la façon dont il affichera les informations. La pratique systématique est le meilleur moyen de maîtriser l’utilisation du Web.

En résumé

Bien qu’il existe une grande variété de mises en page et de modes de distribution des informations, la règle la plus importante est de rester simple. La grande majorité des utilisateurs ne sont pas dans une interface à la recherche de design, mais des informations que la conception facilite. Après tout, les structures complexes sont difficiles à comprendre.

Bien que ce ne soit pas une tâche facile de pouvoir combiner les principes esthétiques et la science des processus cognitifs, l’utilisation correcte des deux est essentielle pour la conception professionnelle de l’interface utilisateur. Si nous voulons nous attaquer à un nouveau projet, rappelons-nous de nous donner la liberté de création nécessaire, mais toujours basée sur une structure que l’utilisateur reconnaît et qui a fait ses preuves.