Comment penser comme un designer

Utilisez le placement et le contraste pour la forme du flux et gagnez en clarté. Une refonte de connexion révèle comment les concepteurs pensent.

Le design ne concerne pas la décoration. Il s’agit de créer l’ordre.

Il y a assez de chaos là-bas. L’ajout de fonctionnalités ou de nouvelles technologies ne mène pas à la clarté à elle seule.

L’ordre prend la discipline. Décisions difficiles. La conception est la prise de décision. Il s’agit de définir des contraintes.

Il y a deux types d’ordre dont nous nous soucions:

• Ordre d’importance – Qu’est-ce qui compte le plus?
• Ordre d’exécution – Qu’est-ce qui vient en premier? Qu’est-ce qui vient ensuite?

Pour façonner les deux, vous n’avez besoin que de deux outils: placement et contraste.

Comprenez ces principes et vous devenez un meilleur designer – ou mieux concevoir. Pas besoin de mémoriser toutes les lois UX ou de suivre toutes les directives. Apprenez ces fondations et vous commencerez à reconnaître un bon design.

Passons un exemple simple: un formulaire de connexion.

Faire couler

La conception aide les gens à se déplacer, avant après.

La connexion est un flux de base:

• Vous n’êtes pas connecté.
• Vous entrez vos informations d’identification.
• Vous accédez.

Ce flux a quelques étapes clés: fournir un nom d’utilisateur, fournir un mot de passe, soumettre avec un bouton.

Dans le code, cela pourrait ressembler à ceci:

<form>
  <label for="username">Username</label>
  <input id="username" name="username" type="text" />

  <label for="password">Password</label>
  <input id="password" name="password" type="password" />

  <button type="submit">Login</button>
  <button type="signup">Sign up</button>
</form>

Comme vous pouvez le voir, cela fonctionne!

Mais il manque de structure.

Remoscons le flux.

Placement

Il y a six éléments dans la forme:

• Étiquette: nom d’utilisateur
• Entrée: nom d’utilisateur
• Étiquette: mot de passe
• Entrée: mot de passe
• Bouton: connexion
• Bouton: inscrivez-vous

Seuls trois d’entre eux sont essentiels:

• Les deux entrées
• Le bouton de connexion

Ceux-ci effectuent l’action principale: connexion.

Nous pouvons améliorer le flux d’interface utilisateur en ajustant le placement des éléments:

1. Empiler les éléments verticalement – plus facile à scanner à gauche
2. Centre-Align dans la toile – crée une concentration et ajoute un espace blanc
3. Placer les étiquettes au-dessus des entrées – attire l’attention à l’essentiel
4. Ajouter l’espacement entre les éléments – améliore la lisibilité

Le résultat: un chemin clair et de haut en bas.

Mais quelque chose manque encore. Nous avons besoin de hiérarchie. Nous avons besoin de contraste.

Contraste

Maintenant que tout est au bon endroit, demandez:

Que devrait se démarquer?

Nous voulons que les utilisateurs se concentrent sur les champs d’entrée et l’action principale: connexion. C’est là que le contraste entre en jeu.

Pour guider l’attention, nous:

5. Rendre les étiquettes plus légères – les entrées attirent donc l’œil
6. Utiliser une typographie cohérente – Évitez le contraste interne inutile
7. Style le bouton de connexion – Donnez-lui du poids, de la couleur et de l’audace
   Dé-mettre en œuvre le bouton d’inscription – Rendez-le plus calme, secondaire
8. Ajouter un contraste de couleur aux éléments clés – Soulignez ce qui compte le plus

Le contraste aide à établir la hiérarchie. C’est ainsi que nous guidons l’œil.

Parce que si tout se ressemble, rien ne se fait remarquer.

Avant → After

Alors qu’est-ce qui a réellement changé?

• Structure – Nous avons regroupé et positionné des éléments avec intention
• Se concentrer – Nous avons utilisé le contraste pour attirer l’œil sur ce qui compte le plus
• Couler – Nous avons créé un chemin clair de haut en bas

Nous n’avons pas changé de fonctionnalité. Nous avons changé de clarté.

Un bon design ne fonctionne pas seulement. Cela fonctionne mieux.

Le point à emporter

La conception est une question de flux. Il s’agit de guider quelqu’un du début à la fin.

Lorsque vous façonnez à la fois l’ordre d’exécution et l’ordre d’importance, vous créez une clarté.

Pour ce faire, utilisez:

• Placement pour la structure
• Contraste pour concentrer

Vous n’avez pas à faire cela manuellement. Vous pouvez simplement inviter: «Correction de l’expérience utilisateur».

Mais lorsque vous comprenez ces principes, vous savez pourquoi le résultat est meilleur. Cela vous aide à écrire de meilleures invites. Donnez de meilleurs commentaires. Concevoir mieux.

Vous n’avez pas besoin d’être un designer pour en penser comme un.