fermer
DéveloppementDéveloppement WebGoogle

Utiliser les boutons de Google pour améliorer votre interface utilisateur !

utiliser les boutons de google pour ameliorer votre interface utilisateur 1

Comme je l’ai décris dans de nombreux articles sur ce même blog, Google a déployé un nouveau design sur un grand nombre de ses services suite au lancement de Google+. Le nouveau look présente une interface beaucoup plus lisse et simplifiée. Google met ainsi davantage l’accent sur vos données, ceci grâce à une interface revisitée…

Une partie du succès de ce nouveau design sont les nouveaux boutons. La tendance actuelle des UI est d’avoir de simples boutons qui seront cohérents dans toute l’interface de l’application.

La nouvelle interface de Google

Le nouveau look de Google propose en ce sens de nouveaux boutons, beaucoup plus « lisses ». Là où vous pouvez voir la plus grande concentration de ces nouveaux boutons, c’est sans aucun doute dans GMail. Pour cela, il suffit d’aller dans les Paramètres de l’application, puis dans le volet « Thèmes » et choisir « Aperçu » ou « Aperçu (dense) ».

Utiliser les boutons de Google pour améliorer votre interface utilisateur ! - Paramètres GMail - Thème Aperçu

Les « Google boutons » n’abusent pas d’effets dégradés, d’ombres ou tout autre effet de lueur qui rend de nombreuses applications Web « hideuses ». Au contraire, Google utilise certains de ces effets assez habilement que discrètement, comme un dégradé linéaire (#F1F1F1 vers #F5F5F5) pour le fond des boutons. De plus, un effet d’encadrement et de renforcement de la couleur sur le hover, c’est-à-dire lorsque l’élément est survolé par le curseur de la souris.

Utiliser les boutons de Google pour améliorer votre interface utilisateur ! - Boutons GMail

Les boutons sont entièrement construits en CSS, avec une image sprite pour mettre en évidence les boutons « + » et « -«  par exemple. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Il s’agit d’une astuce bien pratique pour créer des boutons : le sprite vous permet d’inclure des images dans vos boutons. Si vous souhaitez en savoir plus sur les sprites je vous propose de lire cet article sur l’incontournable site d’alsacreations.

Créer les « boutons Google »

La création des boutons a été réalisée par Pixify et je vais vous présenter ici la manière dont l’auteur a réalisé ces boutons. Ainsi, il a créé des boutons stylés Google pour les actions communes que l’on peut retrouver dans les applications Web : ajout, suppression, enregistrement, flag et classement. Si vous voulez d’autres icônes pour vos applications, vous pouvez aller sur IconFinder qui offre un large choix d’icônes, que vous pouvez utiliser pour construire vos boutons.

Pour ma part j’ai repris quelques idées d’icônes proposées par Pixify mais j’en ai également sélectionné pour diverses actions.

Utiliser les boutons de Google pour améliorer votre interface utilisateur ! - Boutons des actions

Afin que vous soyez en mesure d’ajouter facilement un de ces boutons dans votre application, la seule chose que vous ayez à faire c’est d’ajouter une classe CSS sur vos liens : bouton. Pour indiquer un groupement de boutons, une deuxième classe est définie : left, middle et right. Pour utiliser des icônes pour des actions communes, on ajoute une troisième classe : add, delete, save, flag, up, down, refresh, send et print. Enfin, la dernière classe (big) servira pour afficher les boutons en plus gros, en mode tactile par exemple !

Voici les différents résultats que l’on peut obtenir :

Utiliser les boutons de Google pour améliorer votre interface utilisateur ! - Boutons BNT

[samples id= »5529″]

Conclusion

Comme vous pouvez le voir ci-dessus il est très facile de mettre en œuvre des boutons 100% réalisés en CSS. De plus, vous pourrez vous même dans vos applications insérer ces boutons grâce à l’archive disponible.

Note : Vous pourrez remarquer que les images des boutons de téléchargement du fichier et de la visualisation de la démo ont laissés place à une version entièrement en … CSS !

Alors allez-vous abandonner les images sur vos boutons ? Que pensez-vous de ces boutons ? Des avis, retours, n’hésitez pas à les faire en commentaires de cet article.

Tags : boutons googlecss3interface utilisateursamples
Yohann Poiron

The author Yohann Poiron

J’ai fondé le BlogNT en 2010. Autodidacte en matière de développement de sites en PHP, j’ai toujours poussé ma curiosité sur les sujets et les actualités du Web. Je suis actuellement engagé en tant qu’architecte interopérabilité.