On donne souvent GIMP en exemple quand on veut parler de la différence de points de vue qu’il peut y avoir entre un utilisateur final et un développeur, et donc de ce qu’il ne faut pas faire en ergonomie des IHM. GIMP est un outil de manipulation d’images libre multi plates-formes bien connu de la communauté open source, plus connu pour son inutilisabilité et sa librairie graphique GTK que pour sa puissance pourtant réelle.

Les mauvaises langues qui diront que j’ai parcouru tous les didacticiels Photoshop estampillés “web 2.0” afin de réaliser ce thème ne seront pas très loin de la vérité. Cette remise à neuf part d’une constatation évidente : difficile de parler d’ergonomie et de webdesign quand on a un design peu soigné, et surtout peu utilisable. Certes, les cordonniers sont toujours les plus mal chaussés, mais il y avait des limites.

C’est la seconde fois que je commence par coucher le résultat final sous Photoshop, avant de me lancer dans le développement, et les résultats sont visibles : c’est nettement plus propre. Ma démarche habituelle consiste à ouvrir Textmate avec une vague idée de ce que je veux faire, et à coder. La démarche inverse, même si elle est beaucoup plus fastidieuse en rajoutant un très grand nombre d’étapes nécessitant un outil que je ne maîtrise pas du tout, est aussi très intéressante, puisqu’elle m’oblige à aborder les problèmes à venir en amont.

J’imagine qu’il y a un certain nombre de bugs sous Internet Explorer, principalement dans sa version 6 à cause du manque de support de l’alpha des images au format PNG, mais je n’ai pas de machines sous Windows pour tester. Ils attendront donc lundi soir que je sois au bureau pour un recensement exhaustif.

Et pour finir, la liste de mes sources d’inspiration :

• Iris Design pour les gros boutons Aqua de la barre latérale.
• Shadowness pour les onglets de navigation.
• Simple entrepreneur pour la mise en valeur des zones de souscription.

Si comme moi vous êtes aussi doué en graphisme qu’un enfant de deux ans, et que vous ne pouvez pas vous permettre de passer des heures sur Photoshop à tenter d’obtenir un résultat décent, Buttonator est fait pour vous.

Buttonator est un site entièrement en AJAX qui vous permet de créer très facilement et gratuitement des boutons de validation pour le web. Vous choisissez un template parmi les 14 proposés, le texte, une icône pour l’agrémenter, la font et la couleur de fond et les options, vous rafraîchissez, et c’est bon, vous pouvez télécharger votre oeuvre. Une version payante à 10 dollars par mois vous permet de choisir parmi une soixantaine de templates, et d’avoir accès à de la génération de masse ainsi qu’à tout un tas d’options bien pratiques. Le paiement se fait par Paypal, et on prendra l’abonnement pour un mois, le temps de générer à moindre coût tous les boutons d’une application web particulièrement riche en formulaires.

On choisit le style.

Les fonts

Les couleurs

Et on regarde la preview

Quelques regrets cependant :

On aurait aimé pouvoir créer ses propres templates, par exemple en choisissant les couleurs de départ et d’arrivée d’un dégradé. Pareillement, tous les boutons ont une taille fixe, ce qui pose des problèmes avec des textes un peu longs, ou l’utilisation d’icônes pour rendre nos créations plus expressives.

De même, on aurait aimé pouvoir choisir de quel côté du bouton placer les icônes, et pouvoir uploader ses propres jeux d’icônes pour créer des boutons véritablement personnalisés.

L’interface est très simple d’utilisation, mais curieusement, on se serait attendu à trouver l’interface de choix des templates à gauche, et la prévisualisation à droite, et non le contraire. Cette petite faute d’ergonomie empêche l’outil d’être intuitif à 100%, tout comme l’absence de numérotation des étapes menant à la création d’un bouton.

On aurait pu s’en douter, mais le site ne propose ni progressive enhancement, ni graceful degradation. Au temps pour l’accessibilité.

Malgré ses défauts, Buttonator est bien pratique pour ceux qui, comme moi, perdent énormément de temps à créer des boutons pas toujours réussis, et préfèrent confier le travail à un tiers.

Histoire de me changer un peu les idées et de consacrer un peu de temps à mon autre grande passion – la photographie numérique – je me suis offert Photoshop pour les photographes, de Cyril Bruneau et Bernard Richebé aux éditions Eyrolles. Pour la modique somme de 19 euros 90, cet ouvrage présenté sous la forme d’un cahier d’exercices remplacera allègrement des dizaines de didacticiels trouvés ici et là sur la toile en concentrant tout ce dont l’amateur aura besoin pour assurer une post production décente à ses oeuvres.