UX ANIMATIONS #26 – FOCUS FLOATING BUTTON

Fév 13, 2017
Stephane chilton
Avec 45% des votes sur twitter,
notre thème du mois se porte sur les floating button.

Les origines du floating button viennent du material design proposé par Google courant 2014. Si ce type d’interaction ne s’est pas immédiatement démocratisé, depuis quelques mois, le floating button est incontestablement en plein développement. Bien qu’issu du design Google, ce nouveau type de bouton commence aussi à envahir les applications Apple.
Pour en savoir plus sur les guidelines liées au floating button je vous invite à visiter directement le site Google.

Au menu du mois, nous allons donc vous proposer plusieurs exemples de floating button, par catégories, en finissant par notre coup de coeur.

 

1- LES ACTIONS

En théorie, un floating button est là pour proposer très rapidement et de manière accessible un choix restreint d’actions. De plus, il ne s’agit pas de proposer n’importe quelles actions, mais celles que l’utilisateur est le plus à même de devoir faire sur la page en question.
Voici donc quelques exemples de floating button qui proposent des actions :

Khalid Hasan Zibon

crédit : Khalid Hasan Zibon

Eric Azares

crédit : Eric Azares

Rachee Jacobs

crédit : Rachee Jacobs

Mateusz Czajka

crédit : Mateusz Czajka

Srikant Shetty

crédit : Srikant Shetty

Conseil expert : ne pas surcharger les possibilités derrière un floating button. Cela pourrait créer l’effet inverse et devenir complexe :

Marina Sheremet

crédit : Marina Sheremet

Conseil expert : ne pas remplacer une expérience complète avec plusieurs choix par un floating button :

Junjie Li

crédit : Junjie Li

 

2- LES FILTRES

Souvent le floating button est utilisé comme moyen de filtrer des éléments sur une page.
Voici quelques exemples :

Mikolaj Dobrucki

crédit : Mikolaj Dobrucki

Parallel Labs

crédit : Parallel Labs

Matt Legaspi

crédit : Matt Legaspi

Gokhun Guneyhan

crédit : Gokhun Guneyhan

 

3- LES MENUS

Parfois le floating button est la solution pour rendre un menu plus accessible. Cela peut même aller jusqu’à déployer un menu burger, usage que l’on ne trouve pas forcément pertinent et qui s’éloigne des guidelines (voir dernier exemple de la rubrique).
Voici quelques exemples :

Arnaud Le Roux

crédit : Arnaud Le Roux

crédit : Armas B

crédit : Armas B

crédit : Rhys Merritt

crédit : Rhys Merritt

crédit Yaroslav Zubko

crédit : Yaroslav Zubko

 

4- LE PARTAGE

Le floating button est un excellent moyen de proposer des solutions de partage pour des applications ayant du contenu. Ces applications ont l’avantage d’avoir peu de navigation à placer sur ces pages. Cela permet de regrouper l’ensemble des moyens en un bouton. Le partage se fait alors ultra rapidement et simplement.
Voici quelques exemples :

 

crédit : Adrian Chiran

crédit : Adrian Chiran

crédit : Alex Riabushko

crédit : Alex Riabushko

crédit : Paul van Oijen

crédit : Paul van Oijen

 

5- LES CAS PARTICULIERS

Le floating button peut aussi être utilisé pour des usages très précis dans certaines applications. Lancer un lecteur audio, jouer sur un paramètre…
Voici quelques exemples :

crédit : Chris Davis

crédit : Chris Davis

crédit : Arnaud Le Roux

crédit : Arnaud Le Roux

crédit : Olga Mikhailenko

crédit : Olga Mikhailenko

 NOTRE COUP DE COEUR

Simple et particulièrement fluide, cet exemple illustre parfaitement le comportement demandé par les guidelines Google. Uniquement trois propositions ce qui n’étouffe pas l’utilisateur, une légère animation du « + » qui devient une croix pour fermer, et un fondu tout à fait doux avec le reste de la page.

crédit : heileng

crédit : heileng

 

POUR ALLER PLUS LOIN

Finissons par un exemple qui peut paraître inutile, mais qui a le mérite d’améliorer l’accessibilité du bouton par le pouce de l’utilisateur. Cela rend l’usage tout aussi valable pour les droitiers comme pour les gauchers, et ce sans se tordre le pouce ou risquer de lâcher son smartphone.

crédit : Alexander Bickov

crédit : Alexander Bickov

C’est tout pour ce mois de février !

Rendez-vous le mois prochain pour un nouveau numéro d’UX ANIMATIONS !
(n’oubliez pas de voter en cliquant ici pour le thème du mois prochain. Vous avez le choix entre login, 404 et tabbar.)

Stéphane Chilton, UX-Evangelist @UX-Republic

UX-REPUBLIC est une agence spécialisée en conception centrée utilisateur. Nous sommes également centre de formation agréé. Retrouvez toutes nos formations en UX-DESIGN sur notre site training.ux-republic.com

1 Comment. Leave new

Bonjour,
Merci pour l’article. Très bonne sélection :)

Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *