Design = Emotions + Facilité d'utilisation
Bien que les beaux-arts soient un domaine subjectif, le design graphique est plus fondamental dans ses principes fondamentaux. Une conception efficace devrait faire en sorte que les gens se sentent d'une certaine manière et entreprennent une certaine action . Dans cet article, je voudrais partager les gravités de Gravity Switch principes de conception web et notre pensée derrière eux.
Ces règles sont les suivantes: définir les objectifs en premier; se concentrer sur les utilisateurs en second lieu; conception pour l'émotion; suivre les règles de conception visuelle; construire une hiérarchie claire et visuelle; être cohérent; enfreindre les règles (si nécessaire); ne pas abuser des gadgets; et enfin tester, mesurer et améliorer.
1. Définir les objectifs en premier
Je parie que vous pensiez que j'allais dire "mettre l'accent sur les utilisateurs d'abord", c'est ce que plusgensdire. Oubliez cela, commençons par vos objectifs. Commencez chaque projet de conception de site Web par une session de brainstorming qui décrit des objectifs clairs et réalistes sur le site Web qui renforcent les objectifs de votre entreprise .
Pour mieux illustrer cela, regardons vers Amazon. Leur objectif est de maximiser les ventes de produits. Grâce à la "vente incitative" et à la "vente croisée", ils peuvent maximiser le pouvoir d'achat de chaque utilisateur, mais pour y parvenir, ils ralentissent le processus d'achat. Contrairement à la plupart de ses concurrents, Amazon n’a pas de bouton «Acheter maintenant» dans ses résultats de recherche. Les utilisateurs doivent visiter une page supplémentaire (avec des problèmes potentiels) avant de faire un achat. Ceci est un exemple parfait de la façon dont une conception de site peut répondre à des objectifs commerciaux clairs.
La plupart des sites de commerce électronique modernes ont supprimé le bouton "Acheter maintenant" de leurs résultats de recherche, bien que certains sites de briques et de mortier l’aient encore.
2. Concentrez-vous sur les utilisateurs en second
Avec vos objectifs clairs en tête, vous devrez ensuite définir et hiérarchiser les utilisateurs . Soyez aussi spécifique que possible. Voici quelques exemples de questions à poser:
- Homme vs rupture féminine?
- Niveau d'éducation?
- Emplacements dans le pays?
- Loisirs associés?
- Tranche de revenu?
- Qui conduit les achats de produits pour enfants? Des gamins? Parents? Les grands-parents?
Le point essentiel est que les concepteurs doivent connaître les utilisateurs afin de s'assurer que leurs conceptions ne bloquent pas les chemins d'utilisation clés.
3. Design pour les émotions
Assurez-vous de comprendre quelles émotions votre marque doit conquérir. Idée de génie. Poser des questions. Obtenir un accord Et surtout, concentrez-vous sur ces émotions lorsque vous présentez à vos clients. Ne demandez jamais si votre client "aime" un design. Lorsque vous livrez des designs, vous devriez plutôt poser des questions telles que «Lequel de ces concepts vous rend le plus professionnel?» Ou «Lorsque vous comparez ces deux modèles, vous verrez que celui-ci est plus moderne, alors que Ces deux émotions étaient importantes pour vous, maintenant que vous les voyez visuellement, quelle est selon vous l’émotion la plus importante à présenter à votre public cible? "
Lesquelles de ces organisations sont amusantes? Relaxant? Innovant? Occupé? Réal? (Designs de @JessicaShiner et Christine Mark)
4. Suivez les règles de conception visuelle
Les utilisateurs de sites Web utilisent consciemment et inconsciemment de nombreux petits éléments pour décider s'ils vont faire confiance à un site Web. Les plus importants sont:
- Recadrage: la sélection des photos ne représente que la moitié du combat, le recadrage des photos est ce qui fait ou défait la mise en page.
- Espace négatif: une attention particulière aux marges, au rembourrage et à la hauteur des lignes est la différence entre l’apparence du New York Times et celle d’un bulletin d’information.
- Polices: tout le monde aime choisir des polices, mais un grand concepteur peut repérer rapidement une police professionnelle et limiter le nombre de polices sur le site Web (sans compter le logo, qui est souvent sa propre police).
- Couleurs: les couleurs sont l'une des choses les plus difficiles à utiliser pour les concepteurs. Il y a tellement de règles pour choisir une bonne palette de couleurs, et bien qu'il soit tentant d'utiliser en ligne générateurs de palette de couleurs , passez du temps à concevoir votre propre palette de couleurs.
- Mise en page: créez un bon "flux" de page visuelle pour que les yeux de l'utilisateur puissent aller sur la page sans que d'autres éléments n'assombrissent visuellement vos objectifs.
5. Construire une hiérarchie visuelle claire
Les visiteurs du site Web Ils ne lisent pas Attirer leur attention et les amener aux informations les plus importantes avec une hiérarchie visuelle clairement définie et bien pensée . Une section de conception - site> page> bien pensée - guide l'utilisateur à travers la page comme vous le souhaitez. Les utilisateurs doivent pouvoir regarder votre page et la comprendre en une fraction de seconde.
Regardez l'exemple suivant d'un article et remarquez comment il est difficile pour votre œil de savoir de quoi parle la page ou où l'article commence!
Voici une maquette que j'ai réalisée en modifiant une douzaine de lignes de code CSS pour créer une hiérarchie visuelle plus claire sur cette page:
- Le titre de l'article devrait être l'élément le plus important de la page. Il est actuellement une taille de police plus petite que le titre plus bas sur la page! J'ai donc augmenté la taille du titre de l'article et diminué la taille des titres.
- Le titre plus bas de la page a également été déconnecté du contenu auquel il se rapportait, donc j'ai également resserré l'espacement sous le titre tout en laissant l'espace au-dessus du titre pour indiquer aux utilisateurs qu'il s'agit d'un en-tête. .
- J'ai également déplacé la petite image à la droite du titre au lieu de la gauche de sorte que lorsqu'un utilisateur scanne le côté gauche de la page pour s'orienter, le titre de l'article se trouve dans sa vision.
- J'ai supprimé les classes de bordure et d'arrière-plan sur le texte bleu, de sorte qu'il ne soit plus en concurrence avec le titre et a supprimé la marge supérieure. Il y avait déjà une classe pour le rendre gris, ce qui fonctionne bien dans ce cas.
- J'ai également supprimé le texte et l’image distrayants qui soulignent qu’il s’agit d’un article réimprimé ainsi que de quelques paragraphes vides et
Mots clés.
J'ai intentionnellement laissé toutes les publicités telles qu'elles ont été initialement codées, en supposant que cela constitue une partie critique de cette page.
6. être cohérent
Ne confondez pas vos utilisateurs. Les liens doivent être cohérents et distincts. Si vous choisissez d'utiliser des icônes, des photos et des illustrations, assurez-vous qu'elles ressemblent à un ensemble cohérent. Des incohérences distraire votre utilisateur et obscurcir votre message. N'utilisez pas plus de 3 polices - c'est mieux si elles appartiennent toutes à la même famille. Limitez-vous à 5-6 couleurs (Note: le logo peut être une police différente, et devrait souvent être).
7. Casser les règles (si nécessaire)
S'il y a quelque chose de particulièrement unique ou important que vous devez mettre en évidence, vous devrez peut-être «enfreindre les règles». Vous pouvez utiliser une ou deux couleurs contrastées pour faire ressortir l'élément. Par exemple, le site Web britannique ci-dessous met l'accent sur le taux d'imposition en en faisant un élément plus grand avec une touche de couleur.
Quand les gens visitent la page d’information sur le Taxe sur la valeur ajoutée, Les concepteurs de GOV.UK ont veillé à ce que les informations dont la plupart des gens ont besoin soient au premier plan.
8. Ne pas abuser des gadgets
Rendez votre design amusant, mais assurez-vous que ces éléments supportent ce que vous essayez d’accomplir sur le site. Par exemple le Inze site est magnifique à regarder et merveilleux sur mobile mais quand je l'ai visité sur mon ordinateur de bureau, j'ai été perdu. Il s'avère que la navigation est masquée jusqu’à ce que vous commenciez à faire défiler les pages, ce qui malheureusement a mis le doigt sur le bas de la page. En conséquence, je n'ai même pas remarqué la navigation subtile apparaissant en haut. J'ai fait défiler la majeure partie du chemin vers le bas avant même de réaliser qu'il y avait (enfin) une navigation en haut. La navigation "cachée" est un effet net, mais le "design" m'a empêché de prendre l'action souhaitée. En fin de compte, il véhicule une image de marque déroutante et confuse.
Comparez Inze à ce qui se passe dans cet article ici Web Designer Depot lorsque vous survolez un lien sur votre ordinateur de bureau. Nous avons un effet net, mais cela ne crée pas une "barrière" pour les utilisateurs au nom d'un gadget. Il se dégrade également avec grâce pour ne pas se briser sur les navigateurs mobiles ou plus anciens.
9. Test Mesure. Améliorer
Les sites Web évoluent. Conception pour la flexibilité et l'adaptabilité. La collecte et l'analyse des données de test en cours entraîneront une amélioration constante. Rappelez-vous, il s'agit de créer un design qui répond à vos objectifs.
En mesurant soigneusement les résultats d'une série de modifications mineures apportées à la conception de la page de destination d'origine (à gauche), nous avons conçu un nouveau design (à droite) qui a augmenté de 60% le nombre d'inscriptions!
Rappelles toi
Une conception graphique efficace doit relier émotionnellement l'utilisateur à la marque tout en les faisant faire ce que vous voulez. Cela peut être fait.
Êtes-vous d'accord avec ces règles de conception? Voulez-vous ajouter plus? Faites-nous savoir votre point de vue dans les commentaires.
Image / vignette en vedette, image d'émotion via Shutterstock.