Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Affordances dans le design de formulaire

by
Length:ShortLanguages:

French (Français) translation by Henri Lotin (you can also view the original English article)

Nous allons jeter un oeil aux affordances dans l’univers digital, plus précisément, comment nous pouvons prendre ces principes et les appliquer aux éléments d’interface utilisateur que nous créons tous les jours comme les boutons, les champs de formulaire, les icones, les métaphores et autres éléments visuels.

Affor-quoi ?

Les affordances sont des actions possibles entre un objet et un individu. Par exemple, un bouton de porte offre un mouvement de torsion. Si l’individu reconnaît que la possibilité de cette action n’est pas pertinente--l’affordance est toujours là

Une « affordance perçue » communique en revanche comment l’utilisateur devrait s’engager avec elle. L’utilisateur saura s’il faut pousser, tirer, tordre et ainsi de suite. L'affordance perçue doit être une combinaison d’actions qui sont réellement possibles et de celles qui sont simplement perçues comme étant possibles.

Les signifiants suggèrent à un individu quelles actions sont possibles. De diverses manières, les caractéristiques d’un objet suggèrent à l’individu quelles actions sont possibles. Par exemple, la rondeur signifie qu’il permet des torsions.

Pourquoi l’affordance est-elle Importante ?

Il peut sembler de bon sens de discuter de quelque chose comme les poignées de porte, parce qu’elles sont tellement omniprésentes dans notre vie quotidienne. Mais pensez aux nouvelles technologies et innovations, telles que les voitures à télé-déverrouillage. c'est un nouveau territoire pour beaucoup de gens, donc les signifiants sont vitaux. Un petit bouton protubérant peut offrir des indices sur sa fonction.

  1. Une simple pression sur ouvrir porte/portes de voiture.
  2. Maintenir le bouton pour verrouiller la voiture.

Plutôt que de lire un manuel, en tant qu’utilisateurs nous chercherions des indices du passé, des produits analogues, pour naviguer dans notre monde en évolution constante.

Design de formulaire

Les affordances sont également pertinentes dans le design de l’Interface utilisateur. Dans cet article court, je vais examiner son application dans le design de formulaire (champs de formulaires, boutons, éléments de navigation etc.) avec quelques exemples pertinents, proposant des améliorations au fur et à mesure. Comme ils n’ont aucune propriétés physiques réelles, comme dans le design industriel, ce à quoi je vais faire référence c'est « affordances perçues ».

Designs de « bouton plat »

Les designs de bouton plat sont problématiques. Ils se perdent souvent dans le design, au lieu de cela, ils sont interprétés comme les visuels de bannière.

La formulaire d’inscription suivant (basé sur une application qui restera anonyme) montre un certain nombre d’éléments...

  1. Titre
  2. Champs de saisie
  3. Bouton CTA principal
  4. Bouton secondaire

Il y a beaucoup d’éléments différents ici, mais peu disponible pour faire la différence entre, alors ils se mélangent tous. C’est un formulaire qui, en soi, suggère qu’il y a des boutons et des champs de saisie disponibles, mais un utilisateur peut avoir du mal à percevoir l'un d’entre eux comme « offrant » une action spécifique.

Améliorations du CTA principal

Comment pourrions-nous améliorer le design afin que les utilisateurs perçoivent plus facilement la directive de « créer un compte » ? Ça peut aider d'effectuer les opérations suivantes :

  • Ajouter une ombre subtile pour exprimer la profondeur, faisant allusion à un mouvement « en appuyant sur ». Je ne suis pas un grand fan des ombres et des dégradés, mais faits dans le bon contexte, ils peuvent améliorer l’affordance perçue.
  • Peut-être arrondir les bords et faire le bouton plus petit, afin qu’il ne soit pas confondu à la bannière ou au sous-titre.
  • Sans aucun doute améliorer le contraste. Actuellement, les nuances de gris et blancs lumineuses sont difficiles à distinguer les unes des autres. Un gris plus sombre va vraiment faire ressortir le bouton et motiver l’action de l’utilisateur.


Bouton secondaire

Ce bouton secondaire super minimal se perd, et les signifiants qui pourraient autrement différencier des champs de formulaire (ombres intérieures sur les intrants, par exemple). Quelques suggestions d’amélioration sont les suivantes :

  • Les bords arrondis pour signifier que c’est un bouton qui nécessite la pression.
  • Proximité : Positionner le bouton plus près de l’option « créer un compte » devrait communiquer plus clairement que c’est lié d’une certaine façon.
  • Étiquette : au lieu de « j'ai déjà un compte », envisager quelque chose de plus simple comme « se connecter » pour signifier l’action que fera le bouton.

Commandes de champ d’entrée de formulaire

Un autre exemple de formulaire, cette fois pour saisir les détails d’expédition. Les affordances de champs de formulaire semblent moins évidentes, cependant, elles peuvent avoir un impact considérable.

Quelques suggestions d'améliorations incluent :

  • Tenir compte du fait que le champ de code postal a la même taille que tous les autres champs. En Australie, le code postal est de quatre chiffres, aux Pays-Bas, de six. Dans tous les cas, les codes postaux sont invariablement plus courts que la première ligne de l’adresse, donc une taille plus convenable peut mettre les utilisateurs plus à l’aise.
  • Le flat design ici peut être efficace, mais il pourrait être plus exactement interprétée comme une série de champs d’entrée si on ajoute de la profondeur. Certaines personnes pourraient percevoir ces champs comme étant des bannières ou boutons basé sur le design de pages précédentes.
  • Un contraste améliorerait la lisibilité du formulaire en général, même si cela n’est pas directement connecté avec les affordances.

Conclusion

Dans cet article nous avons examiné certains formulaires d’exemple et comment leur UI se rapportent à des affordances perçues dans le design d’interface utilisateur. Comprendre la perception de l’utilisateur vous donne des indications sur la manière de concevoir de manière claire et intuitive. Vos desgins seront moins susceptibles d'embrouiller les utilisateurs, plutôt que de les aider à compléter le parcours de l’utilisateur dans une série d’étapes logiques.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.