5 façons de rendre vos conceptions Web plus intuitives

En tant que créateurs, concepteurs, penseurs et résolveurs de problèmes de communication numérique, nous faisons des choix basés sur notre compréhension de notre public cible.

Ces choix sont les connaissances que nous avons de notre culture, telles que la lecture de gauche à droite, de droite à gauche ou de haut en bas, ainsi que d'autres facteurs, tels que le placement d'images importantes, de texte, d'interactivité choix d'interface et de couleur.

Au-delà de la culture, il y a l'œil humain et la façon dont le cerveau enregistre l'importance de ce que l'œil voit. Avec un peu de compréhension des principes de conception visuelle décrits dans le livre électronique gratuit Conception d'interface utilisateur Web pour l'œil humain , nous pouvons concevoir des sites Web incroyablement efficaces.



01. Concevoir d'abord le cerveau

Pour apprendre la conception appropriée, l'histoire de la conception doit être étudiée. Les grands artistes et designers de l'histoire ont tous suivi des règles de conception simples, et qu'ils aient suivi, plié ou enfreint ces règles, ce sont les bases qui leur ont permis de devenir si respectés.

Le cerveau, dans plusieurs études, suit un modèle d'enregistrement d'informations par une hiérarchie formée de ce qui est présenté. Les couleurs vives, les caractères gras, les contrastes et le placement sont toujours ce qui ressort des tests de suivi oculaire thermique, principalement parce que c'est ainsi que nous sommes formés.

Image fournie par Nielsen Norman Group: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Image fournie par Nielsen Norman Group: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

* Note intéressante: voyez comment l'attention s'éloigne de la lecture du dernier tiers du texte dans les images à gauche et à droite? Les utilisateurs lisent de moins en moins. Divisez les longues colonnes de texte comme dans l'image du milieu.

Gardez également à l'esprit que les utilisateurs liront rarement chaque mot de votre texte, les deux premiers paragraphes sont les plus importants et doivent contenir votre point. Commencez les paragraphes, les sous-titres et les puces avec des mots-clés attrayants pour attirer l'attention.

photoshop comment changer la taille de la toile

Lorsque le patron ou le client affirme, «faites-le éclater! ou 'ajouter plus' UMPH! ' à lui! il ou elle réclame la forme la plus simple de reconnaissance oculaire - la rendre plus grande et plus audacieuse. De la même manière, l'utilisation de l'espace négatif oblige l'œil à se concentrer sur une zone spécifique qui n'est peut-être pas plus grande et plus audacieuse.

Les principes de conception des modèles Z et F (aka mise en page) suivent la nature de la façon dont l'œil humain est formé pour numériser un site Web. Les grandes créations reposent souvent sur le flux de la nature pour un design agréable.

Le modèle F, basé sur la lecture de gauche à droite, utilisant le modèle Grid, est simple, facile et présente les informations dans une hiérarchie simple pour l'œil. Titre en haut de l'image avec descripteur, suivi d'un lien. Descendez et démarrez le contenu suivant. Pas beaucoup de réflexion requise mais pas vraiment excitant non plus.

Comme décrit dans Conception d'interface utilisateur Web pour l'œil humain , le modèle F est très utile pour les sites qui intègrent de la publicité ou des appels à l'action, mais ne veulent pas évincer complètement le contenu. Dans ce cas, la barre latérale existe pour impliquer les utilisateurs à un niveau plus profond. Comme pour tous les motifs, le motif F est une ligne directrice - plutôt qu'un modèle - car le motif F peut sembler ennuyeux après les premières rangées du F.

Image courtoisie de Jerry Cao via http://speckyboy.com/

Image courtoisie de Jerry Cao via http://speckyboy.com/

Une utilisation similaire du mouvement des yeux dans les lecteurs de gauche à droite est le motif en Z. Tout comme le motif F, le Z suit la lecture de gauche à droite comme un balayage oculaire de la page, plaçant des éléments importants sur le trajet du balayage Z de l'œil.

Les sites Web qui utilisent le modèle Z ne contiennent généralement pas beaucoup de texte et ont un appel à l'action définitif sur la page. Ce modèle de balayage des yeux amènera l'utilisateur au point plus rapidement, et plus vite est mieux sur le Web.

Image gracieuseté de Jerry Cao via http://mailchimp.com/

Image gracieuseté de Jerry Cao via http://mailchimp.com/

02. Apprenez les règles et quand les enfreindre

Il existe plusieurs «règles» populaires de la pensée du design. Tous ont des points valides et, naturellement, tous peuvent être «cassés» avec succès!

Afin de montrer comment ces règles de conception fonctionnent, vous trouverez ci-dessous quelques images groupées. L'une est simple, des photos. L'autre est une œuvre de chacun des quatre designers très respectés, Piet Zwart , Josef Müller-Brockmann , Paul Rand et Saul Bass . Avec quelques sites Web spécifiques ajoutés, voyons comment ces images résistent aux différentes règles de conception.

Images gracieuseté de GL Stock Images, http://graphicleftovers.com/

Images gracieuseté de GL Stock Images, http://graphicleftovers.com/

Piet Zwart (en haut à gauche), Josef Müller-Brockmann (en haut à droite), Paul Rand (en bas à gauche), Saul Bass (en bas à droite)

Piet Zwart (en haut à gauche), Josef Müller-Brockmann (en haut à droite), Paul Rand (en bas à gauche), Saul Bass (en bas à droite)

03. Utilisation du rectangle doré

Aussi connu sous le nom de Nombre d'or , ce cauchemar mathématique en forme de coquille de mer a été utilisé au cours des siècles comme source de découverte du sweet spot, de la zone d'attention maximale sur une page et des zones qui y mèneront l'œil.

Le rectangle d

Le rectangle d'or, alias le nombre d'or

En géométrie, un rectangle d'or est un rectangle dont les longueurs de côté sont dans le nombre d'or:

1: tfrac {1 + sqrt {5}} {2}, qui vaut 1: varphi (la lettre grecque phi), où varphi vaut environ 1,618.

Oui, c'est un jeu d'enfant si les maths sont votre fort. Sinon, essayez ce site pour une explication approfondie et un graphique interactif. Une explication simple est que si vous regardez la forme de base et le point focal (en gardant à l'esprit que la forme peut être retournée, retournée ou tournée, en fonction de l'image et des éléments de la conception), il est facile de superposer la conception dans votre esprit .

En utilisant le groupe de photos d'archives, voyez comment le rectangle d'or s'adapte au design et montre la zone d'attention maximale?

Images gracieuseté de GL Stock Images, http://graphicleftovers.com/

Images gracieuseté de GL Stock Images, http://graphicleftovers.com/

Le simple fait d'utiliser cette règle sur l'image d'arrière-plan vous permettra de placer n'importe quel élément (c'est-à-dire, bloc de texte, appel à l'action, interface utilisateur, etc.) où il attirera définitivement l'utilisateur.

En utilisant le Rectangle d'Or sur le travail de Zwart, Müller-Brockmann (qui est connu comme le père du Grid Layout), Rand and Bass (également adeptes de la grille), vous remarquerez que même s'il montre des points importants à l'œil suivra la conception, est-ce vraiment une étape nécessaire, compte tenu des autres modèles de disposition qui montrent les mêmes zones «chaudes»?

Au cours des deux dernières années, la mise en page Pinterest a été très populaire pour les sites avec beaucoup de contenu. Le flux de conception de base utilise le modèle F. Efficace mais pas excitant pour le cerveau lorsqu'il est scanné par l'œil.

Image gracieuseté de http://zergnet.com/

Image gracieuseté de http://zergnet.com/

Un site Web d'actualités riche en contenu comme le New York Times conçoit sa page avec le rectangle d'or pour conduire l'œil de l'histoire la plus importante à la moins au-dessus du rouleau. C'est un excellent moyen de placer plusieurs blocs de texte sur un site Web et de laisser chacun d'eux prendre place dans la hiérarchie de la page.

Image gracieuseté de http://www.nytimes.com/

Image gracieuseté de http://www.nytimes.com/

Voici une petite astuce pour ceux qui ne veulent pas faire le calcul: copiez simplement un rectangle d'or et placez-le sur un calque au-dessus de votre conception. Il montre également les zones d'attention maximale sur une page et est facile à imaginer dans votre esprit lors de la conception de la page.

comment créer une couverture de livre en indesign
  1. Commencez par dessiner une ligne diagonale du coin supérieur gauche (si vous concevez pour un public qui lit de gauche à droite, inversez cette étape) vers le coin inférieur droit.
  2. Dans le coin inférieur gauche, tracez une ligne vers la diagonale coupant le rectangle en deux et faites-la rencontrer cette ligne diagonale à un angle de 90 degrés.
  3. Répétez la même chose dans le coin supérieur droit.

Les points des angles droits sont les deux zones d'attention maximale pour les yeux de l'utilisateur. Un moyen simple et rapide de planifier la conception d'une page de site Web.

  • Vous pouvez également essayer ces outils utiles pour raccourcir la courbe d'apprentissage:
  • PSD gratuit avec des ratios personnalisés pour plusieurs formes
  • PSD gratuit avec des rectangles de rapport redimensionnables
  • Explication du débordement de pile pour définir des ratios d'or dans CSS

04. Application de la règle des tiers

Aussi connue sous le nom de «conception pour les neuf», la règle des tiers (Ro3) est le modèle de mise en page le plus couramment utilisé par les sites Web. Le découpage de la zone de conception donne au concepteur des domaines précis d'importance. Les zones peuvent être divisées en sections supérieure, centrale et inférieure, gauche, centrale et droite ou seulement un tiers en tant que zone distincte, comme une barre latérale.

Image gracieuseté de McDonalds.com

Image gracieuseté de McDonalds.com

Dans ce courant Page d'accueil de McDonald's (leur site changements sur une base régulière ), le Ro3 crée de l'espace pour que vos yeux puissent se promener dans les zones suivantes:

  1. Le CTA au premier plan tire parti du contenu pour inciter l'utilisateur à explorer davantage. Parce qu'il ne se concentre pas sur le produit, ce CTA subit probablement moins de friction.
  2. WOW! Seulement 2,50 $ pour tout ce repas? Je suis accro avant même de passer à l'employé souriant, qui rendra mon expérience utilisateur réelle plus agréable, contrairement à l'homme ricanant dans le coin supérieur droit, mais n'est pas aussi perceptible, grâce à l'impact que cette zone a sur mon balayage oculaire .
  3. Ah-HA! Je peux voir d'autres délicieuses combinaisons de repas avec ce bouton d'appel à l'action. Voyons si je peux être vendu plus en cliquant sur ce bouton au centre de mon univers actuel - cette page Web.
  4. Mais d'abord, je suis séduit par ces boîtes colorées. Oui, le poulet grillé est bon, et je me demande si ces choses dans ma bouche sont de vraies pommes de terre, mais surtout, je suis étrangement intrigué par la promesse de pouvoir «entrer dans l'action amoureuse».
  5. Pour rappel constant, le logo et la nourriture sont visibles en haut à gauche. Je vois ce que je veux et où je peux l'obtenir!

En regardant comment cela fonctionne avec les images d'exemple de cet article, notez que les lignes qui se croisent de la grille Ro3 mettent en évidence les zones les plus importantes à l'œil. Remarquez, par exemple, comment les lignes se croisent autour du visage de l'homme et de l'ampoule sur la première photo. Regardez également comment les lignes se croisent au visage de l’écrivain et au point d’action (sa plume et sa main).

Images gracieuseté de GL Stock Images, http://graphicleftovers.com/

Images gracieuseté de GL Stock Images, http://graphicleftovers.com/

Image gracieuseté de www.awwwards.com

Image gracieuseté de www.awwwards.com

Maintenant, regardez la règle des tiers appliquée aux sites Web mis en lumière sur le page tendances et exemples de awwwards (au dessus). Encore une fois, voyez en quoi les zones qui se croisent sont des points de grand intérêt? Gardez cela à l'esprit la prochaine fois que vous planifiez la composition de votre interface.

05. Maîtriser le réseau

Dans la conception, une grille est une structure composée d'une série de lignes de guidage droites ou courbes qui se croisent utilisées pour structurer le contenu. La grille sert de guide sur lequel un concepteur peut organiser des éléments graphiques d'une manière rationnelle et facile à assimiler pour l'œil et le cerveau.

Comme indiqué ci-dessous à partir de l'outil de prototypage utile UXPin, une grille permet d'organiser les éléments graphiques en conséquence:

  • Par rapport à une page
  • Par rapport aux autres éléments graphiques de la page
  • Par rapport à d'autres parties du même élément graphique par rapport à une page, à d'autres éléments graphiques de la page ou à d'autres parties du même élément graphique.

Pourtant, la grille peut être un système déroutant pour beaucoup à comprendre. C'est parce qu'il n'est généralement pas enseigné correctement par les professeurs de design.

Image gracieuseté de UXPin

Image gracieuseté de UXPin

Comme mentionné précédemment, Josef Müller-Brockmann est considéré comme l'un des pères du système de disposition en grille moderne. Alors pourquoi son travail est-il si frais et innovant plus de 70 ans plus tard?

Peut-être que la création de la grille l'a aidé à comprendre les limites et la liberté. La plupart des gens pensent que la grille limite la liberté de conception. En réalité, la grille n'est pas une limitation des choix de conception, mais une aide au processus de conception, aidant à montrer la relation entre les éléments dans la hiérarchie très importante de la page - tout comme les autres règles de mise en page de conception décrites dans cet article.

Une recherche sur Google de «la disposition de la grille» génère des dizaines de millions de retours. En scannant les images fournies par la recherche Google, votre œil enregistrera des blocs, des lignes horizontales et verticales, souvent équidistantes sur toute la mise en page.

La célèbre carte du métro de New York de 1972, conçue par Massimo Vignelli, était une conception innovante pour un grand système de transport en commun. Il a inspiré et inspire toujours les cartes de transport en commun dans le monde entier. De toute évidence, il est conçu pour la grille. Il fait un usage intensif de la grille elle-même, traitant le système de transport en commun et quatre des arrondissements de New York plus comme une conception que comme une représentation précise des kilomètres et de la distance (ce qui était la principale plainte concernant la conception).

Image reproduite avec l

Image reproduite avec l'aimable autorisation de la New York City Transit Authority, http://www.mta.info/nyct

Ces deux sites Web semblent utiliser le Ro3 si vous regardez au-dessus du rouleau. mais comme les pages entières sont visualisées, il est évident que les pages ont été conçues pour la grille.

Image gracieuseté de GeneralAssembly.com et TreeHouse.com

Image gracieuseté de GeneralAssembly.com et TreeHouse.com

Voici quelques points clés à retenir avec la grille comme base de la conception de votre interface utilisateur:

  • La grille est un guide et non une prison de lignes et de cubes.
  • Cela vous aidera à organiser votre conception et votre placement de la même manière que le modèle F, le modèle Z, la règle des 3 et le rectangle d'or.
  • Ce n'est qu'une couche de départ qui vous aide à placer des segments d'éléments dessus.
  • Ils peuvent être parfaitement empilés ou tourbillonner autour de la page, mais dans un ordre logique pour que l'œil scanne et que le cerveau réagisse.

Pourquoi c'est important

Puisque la vision est le sens humain le plus fort, une page Web doit raconter une histoire à première vue.

comment peindre les vagues de l'océan à l'huile

Votre utilisateur sait dans les 10-20 secondes s'ils partent, vous devez les convaincre le plus rapidement possible. La conception générale raconte une histoire et l'utilisateur doit être conduit du premier chapitre de cette histoire au dernier. Ces modèles de conception sont la solution à ce défi.

Tous les créatifs ont ce doute quand il s'agit de choix de conception. «Est-ce le bon placement? «J'ai terminé mais pas content» «Que puis-je faire pour m'assurer de faire les bons choix?» Les modèles de mise en page, lorsqu'ils sont utilisés correctement, aideront à concevoir l'interface utilisateur (ou tout problème de conception lié au Web) pour une efficacité maximale et à créer une harmonie visuelle. Et depuis les belles choses fonctionnent mieux , toutes ces tactiques aident à créer la meilleure expérience utilisateur possible.

Pour plus de conseils de conception d'interface utilisateur visuelle, jetez un œil au livre électronique gratuit Meilleures pratiques de conception de l'interface utilisateur Web . Il s'agit d'un guide complet mais à lecture rapide qui enseigne en analysant 33 exemples d'excellents designs d'entreprises comme Houzz, Fitbit, Google et AIrbnb.

Mots: Tailleur scout

Speider Schneider est un concepteur de produits qui a travaillé sur des projets pour Disney / Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC et Marvel Comics, Cartoon Network et Nickelodeon parmi d'autres entreprises notables. Il est également l'auteur de centaines d'articles sur la conception Web et l'interface utilisateur / UX

Aimait ça? Essayez ces ...

  • 11 superbes designs d'interface utilisateur
  • 10 étapes pour une expérience utilisateur engageante
  • Téléchargez le meilleur polices gratuites