CarmaBlog

 English version available

Même exempte de bogue, une application dont l’ergonomie n’a pas été bien pensée sera surement un frein pour l’utilisateur. Il est donc important de prendre un peu de temps pour améliorer le design et l’ergonomie d’une application. Même si un client ne le spécifie pas directement dans le cahier des charges, il sera toujours plus plaisant pour lui d’utiliser une application « user-friendly ». L’identité visuelle n’est pas en reste et ne doit pas être négligée. Elle est même primordiale dans certains secteurs où la concurrence est forte comme la vente en ligne ou la publicité.

Cet article va vous montrer qu’il est possible d’améliorer le design général d’une application à moindre coût. En quelques minutes, vous allez voir comment apporter une petite touche en plus à vos formulaires.

Ainsi, vous passerez de ce style d’écran :

à celui-ci :

Attention, seules les versions récentes des navigateurs prendront en compte efficacement ces améliorations (Firefox 4, Internet Explorer 9 par exemple). Ceci s’explique par l’utilisation de propriétés avancées CSS3 (box-shadow, border-radius, text-shadow notamment). Sur des navigateurs plus anciens, vous obtiendrez un comportement dégradé pour ces propriétés. Les bords arrondis deviennent carrés, les ombres n’apparaissent pas… Néanmoins, le rendu final sera souvent plus joli que l’original. Je vous invite à consulter ce site https://caniuse.com/ pour accéder aux tables de compatibilité CSS3/HTML5 des navigateurs.

Voici le rendu d’origine sous IE6 :

Et le comportement dégradé obtenu :

Quelle est l’astuce pour réaliser ce « lifting » ? Il suffit de vous rendre sur ce site : http://www.cssbuttongenerator.com/ qui vous permettra de créer des boutons personnalisés avec vos propres paramètres : taille, couleur, ombre, texte, effet d’enfoncement, de focus, etc. et de générer le code CSS associé (aucune image n’est nécessaire). Une fois la portion de code intégré à votre feuille de style, il vous suffira d’utiliser vos nouvelles classes sur les éléments classiques d’un formulaire (input de type button, text, textarea, etc.).

Il y a aussi une application plus complète : http://www.cssbuttongenerator.com/. Elle vous permet de voir le rendu sur d’autres types d’éléments que les boutons, d’avoir accès à des modèles prédéfinis, d’en définir de nouveaux… J’ai rencontré des difficultés pour y accéder avec Firefox, mais elle fonctionne parfaitement sous Chrome.