web-dev-qa-db-fra.com

Quelle est l'expérience des utilisateurs des actions collantes au bas du navigateur et la visibilité est-elle un problème?

J'ai été chargé d'un projet qui est un site de carrière et il y a des spéculations sur la nécessité d'un grand bouton disant `` Appliquer maintenant '' collant en bas du navigateur comme l'image ci-jointe:

enter image description here

Je pensais que ce serait bien de le faire sur un axe vertical et plus petit, donc ce n'est pas en concurrence avec d'autres éléments de la page, par exemple:

enter image description here

Le problème est que mes collègues pensent qu'un gros bouton est plus visible et évident.

Ma question est quelle est l'expérience des gens des actions collantes au bas du navigateur et la visibilité est-elle même le problème? Comme mes collègues le suggèrent.

1
Chris

Google Material Design Framework a popularisé un modèle de conception pour un bouton collant en bas de l'écran connu sous le nom de [ ~ # ~] fab [~ # ~] , ou Bouton d'action flottant .

Google a des directives spécifiques pour l'apparence et le comportement de ce bouton, par exemple:

  • Le bouton d'action flottant doit être placé à 16dp minimum de l'Edge sur mobile et 24dp minimum sur tablette/bureau.

  • Le bouton d'action flottant change de couleur au point et se soulève lors de la sélection.

  • Un bouton d'action flottant représente l'action principale d'une application.

  • Un seul bouton d'action flottant est recommandé par écran pour augmenter sa visibilité. Il ne doit représenter que l'action la plus courante.

  • Faites des boutons d'action flottants des actions positives comme Créer, Favoris, Partager, Naviguer et Explorer

Cependant, étant donné que vous n'utilisez pas spécifiquement le framework Material Design, vous n'êtes pas obligé de suivre exactement toutes ces directives.

Au lieu de cela, concentrez-vous davantage sur les attentes de l'utilisateur et sa familiarité avec le modèle - si les utilisateurs voient un bouton de type FAB, comprendraient-ils comment cela fonctionne? Quels sont les types de comportements auxquels ils s'attendent?

Par exemple, d'autres sites tels que https://www.intercom.com/ n'utilisent pas le framework Material Design, mais utilisent toujours un bouton de type FAB.

FAB button on Intercom's site.

Enfin, un problème que vous pouvez rencontrer est que le bouton FAB n'utilise généralement pas d'étiquettes de texte. Vous pouvez donc avoir du mal à trouver une icône qui suggère "Appliquer". Ou vous devrez peut-être briser légèrement la convention ici et utiliser une étiquette de texte.

enter image description here

1
Michael Heraghty