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

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

Démos et téléchargement

Vous pouvez télécharger la démo de l'article dans un seul fichier ZIP.

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.

  • http://www.baverty.com Benoit

    Et les transitions css3 sont une nouvelle étape vers la disparition de flash et assimilés sur le web… J’aime :)

  • http://www.arnaud-olivier.fr Tutorial webmaster

    Merci, je savais pas que c’était possible, ça va être un gain de temps et visuellement je trouve ça plutôt bien (après faut pas que ça soit utilisé sur tous les sites non plus…)

  • Uriel Myeline

    Perso j’ai jamais aimer les boutons avec des images (à la limite pour la compatibilité IE)… c’est charger une page pour rien.

    • http://www.cv-developpeur-web2.com Yohann Poiron

      Malheureusement c’est ce qui a souvent été fait par le passé…

    • Quentin Lamamy

      Après tout dépend ce que tu souhaite privilégié, le temps de chargement ou l’ergonomie de ton interface. Pour ma part, dans la plupart des interfaces que je développe j’utilise des boutons avec icône pour les actions « majeures » (quitter,modifier,enregistrer).Le bouton imagé doit rester là pour mettre en avant des fonctionnalités majeures

    • Benoit

      Se passer d’images dans un design (y compris dans les boutons) juste parce que ça fait un chargement en plus c’est un peu pousser trop loin l’optimisation. Chaque fichier CSS chargé est également «Charger une page pour rien». Le but de la technique présentée dans cet article est justement de minimiser le nombre de requètes au serveur, mais à l’ère de l’ADSL et de la fibre optique, il ne faut pas exagérer la minimisation non plus.

      Les boutons avec des images, c’est plus joli, plus moderne et dans certains cas plus accessibles. S’en passer est une erreur.

      Par contre on est d’accord que les images pour faire des dégradés, c’est dépassé. Et d’ailleurs je ne trouve pas qu’utiliser des images pour les navigateurs plus anciens soit intéressant : je préfère dans ce cas laisser l’utilisateur avec une version un peu moins jolie… Mais bon sur ce dernier point, c’est vraiment mon avis et mon habitude, elle n’est pas forcément adaptée partout.

    • Raphael

      Un rappel qui me semble utile : les images (balises img) demeurent et demeureront toujours plus accessibles (dans le vrai sens de l’accessibilité) que toute surcouche à HTML, que ce soit CSS, JavaScript, Flash, etc.

      Autant je suis fervent défenseur de CSS (enfin je crois ;)), autant il faut savoir raison garder : le HTML est parfois le seul contenu disponible.

      • Quentin Lamamy

        J’avoue que tout ce qui touche à l’accessibilité (dans le sens accès via navigateur non conventionnel, par exemple pour les non voyants) c’est loin d’être mon point fort. Je n’ai pas encore finis de lire tout les documents de la W3C ^^

        D’ailleurs si quelqu’un à un peu d’expérience dans ce domaine je suis preneur pour un petit recapitulatif des recommandation W3C

        • Benoit

          Je suis loin d’être un expert, mais j’essaie de me poser les questions suivantes :
          -Qu’est-ce qui se passe si Javascript et/ou css sont désactivés ?
          -Qu’est-ce qui se passe si l’utilisateur cherche à grossir la taille du texte ? Est-ce qu’il peut et est-ce que le design reste utilisable ?

          Et après je respecte quelques principes genre ne pas utiliser de captchas, fixer la couleur de fond de toutes les zones contenant du texte, remplir les attributs « alt » ou « title », respecter au maximum la sémantique des éléments html etc…

          Je crois qu’il y a beaucoup de règles plus poussées, mais je n’ai pas encore eu l’occasion de développer des interfaces ciblant un public très large, donc je ne m’y suis pas intéressé en détail.

          • Quentin Lamamy

            En fait les bases que tu expose dans la première partie de ton commentaire ça va je connais étant donné que ces attribut existait déjà lorsque j’ai commencé le développement web.
            Par contre j’ai lu qu’il était possible de gérer les débits de voix pour les non voyants mais je n’ai jamais creusé la question…

  • http://gregoire-penverne.fr Grégoire Penverne

    Le résultat est vraiment joli, en tous les cas. Mais… tant qu’IE sera là, on sera tout de même obligé de prévoir des images de substitution (hélas!). Mais je note ton article dans un « ptit coin » (il me servira sûrement :) )

    • http://www.cv-developpeur-web2.com Yohann Poiron

      Merci ! Effectivement c’est exactement ce que disait Raphaël dans son commentaire ;)

  • Pierre

    Les icônes sont bien représentatifs et les boutons sont bien larges, le max est fait en css, parfait. Mais je ne vois aucune précision sur la licence des icônes… Sont ils libres de droit ? En bas de l’article sur pixify.com il est précisé licence : cc-by , mais je ne sais pas si c’est pour l’article, les icones, ou les boutons (css+icons).

    • http://www.cv-developpeur-web2.com Yohann Poiron

      Tous les icônes ont été récupérés depuis le site IconFinder avec la licence suivante : Creative Commons Attribution-No Derivative Works 3.0 Unported |

  • Pingback: Utiliser les boutons de Google pour améliorer votre interface utilisateur ! | Le blog des nouvelles technologies : Web, Technologies, Développement, Interopérabilité | Cedric DEBACQ microblogging | Scoop.it()