Où placer un bouton de rétroaction flottant pour une utilisation maximale?
Je travaille sur un projet où mes boutons actionnables suivant et précédent ont été placés dans le coin inférieur droit et gauche du navigateur. Ce n'était pas un problème jusqu'à ce que le bouton de rétroaction flottant soit ajouté à notre application. Ce bouton flottant a chevauché le bouton suivant et les messages flash qui apparaissent en bas à droite.
J'ai les options possibles suivantes pour résoudre ce problème 1. Changer la position de rétroaction flottante dans le coin inférieur gauche 2. Bouton suivant et précédent centralisé 3. Changer la position du message flash de bas à droite en bas à gauche.
J'ai déjà centralisé le bouton suivant et précédent, mais je ne suis pas sûr de permuter la position du bouton flottant en bas à gauche car je pense que le bouton sera ignoré et aucun utilisateur ne cliquera sur le bouton. En outre, le déplacement du message flash vers le bas à gauche peut entraîner l'utilisateur à ignorer les messages importants.
Les utilisateurs sont-ils censés faire quelque chose avec les messages flash, ou leur donne-t-il simplement une indication que quelque chose s'est produit? Dans ce dernier cas, essayez de le déplacer vers le haut à droite. Il est suffisamment visible pour que les utilisateurs y jettent un rapide coup d'œil car il se trouve dans leur vision périphérique, mais cela ne devrait pas avoir d'impact ou interrompre leur flux.
En ce qui concerne le bouton de rétroaction, avoir un peu plus d'espace pour respirer au bas de vos pages devrait résoudre toutes les conséquences superposées du fait qu'il soit collant. Je le garderais en bas à droite car c'est l'emplacement le plus souvent utilisé pour les commentaires ou les services d'aide. La centralisation des boutons actionnables fonctionnerait également dans votre cas.
Ajout d'une image de ce que j'essaie de dire:
Avez-vous envisagé d'autres éléments (et placement) de l'interface utilisateur qu'un bouton d'action flottant? Les FAB sont souvent conçus comme l'action principale d'une page. L'achèvement des tâches est l'objectif principal, la rétroaction est au mieux tertiaire ici.
Utilisez-vous un bouton de rétroaction comme seul moyen de comprendre ce qui ne fonctionne pas dans l'interface utilisateur, ou avez-vous également accès aux tests et à l'observation des utilisateurs? Vous pouvez également utiliser des outils pour suivre les interactions comme Google Tag Manager .
Si un utilisateur se concentre sur la rétroaction, cela signifie souvent qu'il ne peut pas terminer une tâche.
Attention à ne pas respecter les conventions sur les modèles (et les attentes des utilisateurs)
Vous utilisez un composant matériel qui est souvent utilisé pour la création (ou l'ajout) de nouvelles entités.
Avec la prééminence de Material dans les applications, vous êtes en concurrence avec des modèles qui sont renforcés par l'utilisation généralisée d'éléments d'interface utilisateur de base fournissant des fonctions (actions principales pour un FAB) différentes de celles pour lesquelles vous l'utilisez dans votre exemple.
Les utilisateurs construisent des attentes sur ce que font ces éléments.
Un seul bouton d'action flottant est recommandé par écran pour représenter l'action la plus courante.
Les boutons d'action flottante sont utilisés pour une action promue.
Votre application actuelle
Dans votre exemple ci-dessus, il semble que vous ayez franchi une étape. L'accent est mis sur leur réalisation de la séquence d'actions, en créant une concentration qui les maintient en tâche.
Comme vous l'avez en ce moment, Feedback a plus de contraste et de visibilité que les autres boutons à l'écran, et semble le plus actif.
Une alternative matérielle: dans la barre de navigation
À partir du directives matérielles: aide et commentaires
Cette aide et commentaires ensemble:
Pour aider les utilisateurs à trouver de l'aide pour les problèmes urgents, tels que les paiements et les remboursements, placez une icône d'aide dans la barre d'application.
Les applications de bureau peuvent également placer une icône d'aide dans la barre d'application, car il y a plus d'espace dans l'interface utilisateur du bureau.
Voici un exemple de l'application Google Cloud; en haut à droite dans la barre de navigation. Il est toujours visible, mais ne distrait d'aucune autre action.
Voici un exemple d'application de chat, avec icône et texte:
Que diriez-vous de le placer à mi-hauteur de la page en tant que retrait? Cela pourrait être positionné à gauche ou à droite, selon le contenu, et coloré pour correspondre à votre site Web.
Floating Action Button est une grande innovation mais elle doit être utilisée très soigneusement. Ils ne servent pas toujours le but prévu et la plupart du temps sont une nuisance car ils se chevauchent avec d'autres éléments de la page et détournent l'attention du reste de la page.
Bien que les FAB présentent une approche fine et raisonnable pour mener à bien une action, ils sont très difficiles à ignorer. En conséquence, ils peuvent être une mauvaise décision pour l'UX globale.
Quelles sont les alternatives?
L'une des meilleures façons d'utiliser FAB est de le placer sur des partitions. Cela donne au bouton une base et le maintient à l'écart des autres actions ou éléments de page (voir capture d'écran ci-dessous)
Utilisez des en-têtes collants. Si l'action est si importante, optez pour l'approche Dashboard et conservez l'en-tête avec l'action fixe.
Une autre alternative consiste à concevoir l'application de manière à ce qu'il n'y ait aucune autre interaction dans la moitié inférieure de la page. Le pied de page ou la barre d'action inférieure peuvent être utilisés ici.
