Google Material Design continue d’être une approche populaire de la conception Web contemporaine. Un style quasiment plat, l'ensemble des principes initialement conçus comme des directives de marque pour Google décrivent une approche basée sur des calques pour la conception d'interface utilisateur.

Outre le schéma de couleurs prescriptif, la typographie soigneusement neutre et l'animation Disney-esque, le concept de bouton flottant de Material Design est peut-être l'aspect le plus reconnaissable du style. Cependant, le bouton d'action flottant semble suivre la même trajectoire que le menu Hamburger; de sauveur à paria dans quelques mois.

Flottant Les boutons d'action sont séparés du reste de l'interface utilisateur, pour apparaître comme s'ils flottaient au-dessus du contenu. Presque exclusivement un cercle, ils sont une forme agréablement minimale, qui se prête à l'animation. Les boutons d'action flottants sont l'évolution naturelle du collant collant qui a été populaire ces dernières années. Le saut de Google pour aller au-delà de l’en-tête était de découpler le bouton d’action flottante du reste de la navigation. Cela a été largement influencé par la montée du Web mobile; Le fait de positionner le bouton d'action flottant en bas à droite de l'écran (comme c'est presque toujours le cas) permet à votre pouce de le toucher facilement.

Google Plus

L'utilisation d'un bouton d'action flottant dans le Refonte de Google+ vous encourage à publier du contenu plutôt que de vous aider à le consommer. De plus, être diamétralement opposé au reste de la navigation est un inconvénient sur les grands écrans.

Alors que le bouton d'action flottant se retrouve dans les conceptions d'écrans plus grands qu'un téléphone, la commodité du placement en bas à droite devient de plus en plus un obstacle. Comme le menu Hamburger avant lui, le bouton d'action flottant découvre que les solutions mobiles ne se traduisent pas toujours sur le bureau.

Leur forme, leur position et leur couleur permettent aux boutons d'action flottants de se démarquer du reste de l'interface utilisateur, principalement parce que les tendances actuelles pour la conception plate, semi-plate et matérielle stylisent tous les autres éléments sous forme de rectangles réguliers. Mais il est important de reconnaître que, tout comme le bouton d'action flottant est visuellement distinct sur une page, il est reconnaissable visuellement à travers différents projets. Material Design est avant tout une marque d’entreprise; Avec l'identité de marque comme un actif commercial essentiel, il est peu probable que l'imitation de Google ajoute de la valeur aux activités de vos clients.

vkplayer

le Application VKPlayer utilise un bouton d'action flottant pour faire basculer les contrôles, ce qui semble cool, mais un bouton de lecture / pause ne serait-il pas l'action principale ici?

Selon le Spécification de la conception du matériau Les boutons d'action flottants sont utilisés comme raccourci vers l'action principale sur une page; ajouter un nouvel élément ou lancer une nouvelle recherche. Dans ce scénario, les icônes de la fonction sont relativement canoniques et l'action associée au bouton est claire. Cependant, une seule icône ne représente souvent pas une fonction.

Ce qui est plus problématique, c’est le lecteur de réduire un site ou une application à un seul usage. Comme souligné dans Teo Yu Siang critique détaillée du bouton d'action flottant l'utilisation de boutons d'action flottants impose les intentions d'un concepteur sur l'utilisateur; ils sont encouragés à composer un courrier électronique quand ils veulent lire dans leur boîte de réception; ils sont encouragés à prendre une nouvelle photo lorsqu'ils souhaitent revoir leurs images passées.

Le bouton d'action flottant est destiné à extraire une action primaire de l'interface utilisateur, mais si l'interface utilisateur nécessite une action principale, pourquoi n'est-elle pas plus ciblée?

deviens

Le sinon excellent Beegit utilise un bouton d'action flottant pour fournir un accès rapide aux messages d'aide et aux mises à jour sur la plateforme. Est-ce vraiment la fonction principale d'une page de composition?

Pour paraphraser un truisme de conception commun, il n'y a pas de modèles de conception incorrects, mais uniquement de mauvais concepteurs. À l'instar du menu Hamburger, le bouton d'action flottant a un bon usage, mais ce cas d'utilisation se produit rarement; Comme le menu Hamburger, le talon d'Achille du Floating Action Button est souvent mal utilisé. le Section MD sur les boutons flottants stipule que les fonctionnalités associées aux boutons d'action flottants sont «suffisamment importantes et omniprésentes», mais ils sont plus couramment utilisés comme style, alors que la meilleure option serait une interface utilisateur plus ciblée.

Comme le menu Hamburger, le bouton d'action flottant résout le problème du concepteur, pas celui des utilisateurs.