Christophe Le Bot

Après le JazzMutant Dexter que j’ai déjà présenté, voici encore un bon exemple d’interface innovante dans le domaine de la musique assistée par ordinateur (MAO) : les AudioCubes de la société belge Percussa.

Vendus par quatre, ces petits cubes permettent de contrôler des applications musicales (via le protocole d’échange MIDI, pour les connaisseurs). Même si la démonstration ne me semble pas à la hauteur du concept, elle est suffisamment limpide pour m’éviter d’écrire 50 lignes sur leur fonctionnement :

Outre leur position respective, les AudioCubes gèrent leur rotation et la distance de la main par rapport à leurs faces. Autre détail ergonomique intéressant, la configuration des AudioCubes passe par une extension de l’application musicale habituellement utilisée. L’apprentissage se limite à la manipulation des AudioCubes !

Configuration des AudioCubes dans le séquenceur Ableton Live.

Ceux qui ont vu la Reactable de l’Université Pompeu Fabra de Barcelone me diront qu’il n’y a rien de nouveau, sauf que (comme pour le Dexter) les AudioCubes sont en vente. A 600€ les quatre, c’est même très tentant…

Ces interfaces montrent la tendance actuelle des objets communicants : des objets qui, isolés, répondent à des fonctions très basiques, mais qui, une fois reliés (virtuellement ou physiquement), révolutionnent les usages et rendent notre univers numérique plus tangible.

La musique n’est bien sûr pas le seul secteur à s’intéresser aux objets communicants et à leurs interactions. Les produits de Violet (créateur du fameux Nabaztag) ou de Ambient en sont de bons exemples actuellement. Les technologies Machine to Machine (M2M) ont de l’avenir !

La semaine dernière, j’ai reçu un joli papier (vert amende, bien sûr) me rappelant que la vitesse maximale autorisée sur autoroute est de 130 km/h. C’est agaçant (surtout pour un dépassement de 5 km/h sur une voie déserte) mais loin de moi l’idée de critiquer cette règle élémentaire de sécurité.

Vient l’heure de payer l’amende. Je ne suis pas un habitué du fait (c’est même une première), je fais donc l’effort de lire toutes les instructions. Ah tiens, on peut payer par internet ! Voilà l’occasion de tester une interface ! Ou comment prendre du plaisir à réaliser une tâche désagréable !

Un site dédié au paiement des amendes

Page d’accueil du Service de télépaiement des amendes.

Le Ministère des Finances a mis en place un site dédié au paiement des amendes par carte bancaire. Pour protéger la transaction, la connexion entre le serveur et le navigateur web est cryptée (via SSL) et l’identité du service garantie par un certificat numérique.

Informations sur le certificat SSL.

Premier bémol : le certificat est émis par Verisign, entreprise privée américaine. Le Référentiel Général de Sécurité n’est donc pas encore en place.

L’accueil du service

La page d’accueil est des plus simples : un résumé pour expliquer le but du service, un lien pour y entrer et un autre pour quelques explications sur la sécurisation du site. Simple, clair (c’est vrai aussi qu’on n’arrive jamais sur ce site par hasard…), malgré un texte plutôt confus pour expliquer la transaction HTTPS.

Le code source est typique du web première génération : des textes en bitmap, des tableaux pour la mise en page, le tout généré par Dreamweaver (ses fonctions Javascript sont détectables entre mille) et FrontPage 6.0 (voir la balise META GENERATOR). Drôle de mélange, mais l’avantage est de rendre l’interface utilisable sous tous les navigateurs, même les plus anciens. On est loin du web 2.0, d’Ajax, du XHTML compliant, des CSS 2… mais aussi d’une interface accessible (au sens ergonomique).

Un petit tour du côté des requêtes m’indique que le service tourne sous Apache et que mes actions et leur traitement seront gérées par des scripts Java (le cookie de session trahit sa présence).

Saisie des informations

Saisie du numéro de l’amende.

Je passe à l’action. On me demande le numéro de l’avis d’amende et sa clé. Euh… il doit être tard, je ne vois rien de semblable sur le papier. J’ai bien un numéro d’avis de contravention mais pas d’avis d’amende. De plus, le formulaire web me propose 5 groupes de chiffres + la clé, la version papier n’a que 4 groupes de chiffres + la clé.

Heureusement, il y a une aide. Je fais abstraction du dictionnaire qui propose toutes les lettres de l’alphabet, alors que seules 8 lettres sont utiles… Les « pro » de la molette seront ravis ! Je clique donc sur « Où trouver mon numéro d’avis – Cliquez sur ce lien » (j’adore) et là, surprise ! Je vois bien les 4 cases de chiffres, comme sur mon papier. Je vois aussi à côté une version à 5 cases… Je sens que ça va être chaud.

Aide pour la saisie du numéro d’amende.

Survient le doute : vais-je pouvoir payer cette amende (pardon, contravention) en ligne ? Je tente le coup. Et j’ai bien fait : le premier groupe de chiffres détermine le type de contravention (forfaitaire, dans mon cas). Un petit Javascript élimine donc la cinquième case. Un autre se charge de déplacer le curseur de case en case. On tient le bon bout !

Informations liées à la contravention

Informations sur la contravention.

Le serveur fait son office et m’informe de mon avis de contravention. Cette page remplit son rôle, avec des textes concis et une fenêtre Questions / Réponses très utile.

Paiement de l’amende

Je passe au paiement. Une page me demande si je veux payer définitivement ou si je veux déposer une consigne (eh oui, si vous contestez la contravention, vous devez la payer avant de vous faire rembourser… éventuellement).

Vient le formulaire tant attendu du paiement par carte bancaire. Là, on retrouve ses habitudes d’achat sur les sites e-commerce (adresse de livraison en moins…). Rien à dire, c’est bien fait.

Je valide et j’obtiens un justificatif que je peux imprimer, sauvegarder, envoyer à une adresse e-mail ou recevoir par courrier. Dommage que ces options ne soient pas regroupées.

La sauvegarde du justificatif sur ordinateur vaut vraiment le détour (un simple fichier texte contenant du code HTML illisible et sans aucun retour chariot). J’opte plutôt pour l’envoi par e-mail que j’obtiens aussitôt.

Conclusion

Ce petit jeu de cache-cache valait bien les 45 € que j’y ai laissés. Mais promis, je ne recommencerai pas.

S’il y a un secteur à la pointe de la conception d’interfaces, c’est bien celui de la musique assistée par ordinateur (MAO). Elle reste pour moi une source d’inspiration inépuisable qui garde, depuis 20 ans, une longueur d’avance sur les autres technologies informatiques.

Les produits de la société bordelaise JazzMutant en sont un exemple particulièrement démonstratif. Il s’agit de surfaces de contrôle qui pilotent des applications musicales, telles que des séquenceurs, des synthétiseurs ou des instruments virtuels.

Je vous propose une petite comparaison :

Tous les ergonomes et concepteurs d’interfaces ont en tête cette démonstration époustouflante de Jeff Han avec son écran tactile multi-touch. Le problème, c’est que nous n’avons pas encore cette merveille sur nos bureaux…

Le Dexter, dernier produit de JazzMutant, fait moins de bruit (sur le web, pas sur scène), mais il est en vente ! Son écran tactile (lui aussi multi-touch) permet de contrôler la musique en temps réel, avec une grande liberté d’expression et d’interprétation.

Le moindre détail de l’interface est travaillé. Chaque élément est à sa place, le tout est optimisé pour une utilisation en milieu sombre (sauf peut-être la réflectivité de l’écran), tout semble si naturel… C’est devant ce genre de produit que je dis : « Wouah ! »

Ce n’est pas vraiment une nouvelle fraîche, mais je voulais garder une trace de cette bonne idée dans mon blog (la version papier que j’ai sur mon mur n’étant pas assurée de passer l’année !).

Bad Usability Calendar 2007 est un excellent concentré des erreurs ergonomiques que l’on trouve dans les interfaces web. Tout le monde en prend pour son grade, aussi bien les développeurs que les webdesigners.

J’espère que les prochaines éditions suivront l’évolution des outils et des interfaces pour voir en un clin d’oeil le chemin parcouru d’année en année.

» Bad Usability Calendar 2007 au format PDF (format A4 – 1,2Mo)

Encore un acronyme de quatre lettres ! Voici donc CRAP !

Rien de révolutionnaire dans celui-là. Tout est déjà connu depuis bien longtemps, si longtemps même que le web n’existait pas… C’est la revanche du graphiste papier sur le web designer !

Allez, je me lance ! Ce soir, j’invente un nouveau concept : le UDOD (User documentation oriented design).

Après tout, chaque jour, les acteurs du web inventent de nouveaux « concepts », toujours révolutionnaires, avec leurs centaines de termes et abréviations à connaître par coeur pour rester « in » ! On recherche, on découvre, on apprend, on applique, on oublie et on recommence. C’est tout le charme d’internet ! En regardant de près (ou plutôt de loin si on veut prendre du recul), il y a peu de concepts réellement nouveaux, mais ça fait monter le « buzz » ! Le « web 2.0″ en est une caricature…

« Et UDOD, ça apporte quoi de neuf ? »

Evidemment, après avoir dit tout ce que je pense des « révolutionnaires du web », je vais avoir un peu de mal à vous convaincre d’utiliser UDOD… Mais comme je l’applique avec de bons résultats, je me dis qu’il y aura bien quelques intéressés !

Le principe de UDOD est simple : après avoir fait un brief rapide et fixer des objectifs assez larges pour votre nouvelle application (méthodologie Paper prototyping), vous commencez par écrire la documentation de l’utilisateur débutant (« User guide for beginners »). L’intérêt est de poser une fois pour toute une description claire, synthétique et compréhensible de votre application. On devrait donc y trouver au moins :

• une définition de l’application ;
• une présentation des notions fondamentales ;
• une description des fonctions principales et de leur utilisation ;
• une description de l’architecture et de son interaction avec d’autres sytèmes ;
• des annexes pour les détails techniques ;
• un glossaire ;
• un index.

Une architecture claire, des notions définies

Certes, cela a un coût. La rédaction est longue et doit être faite par un spécialiste. Cependant, on découvre vite l’intérêt de cette méthode :

• La définion de l’application facilite la compréhension des objectifs pour l’équipe de développement.
• Les notions fondamentales sont exhaustives et définies.
• La description des fonctions donnent l’étendue du travail (orienté tâches) de développement et de conception de l’interface.
• La description de l’architecture pose les bases du noyau de l’application.
• Les annexes précisent les contraintes pour les développeurs.
• Le glossaire définit tous les éléments de l’application.
• L’index permet de valider la cohérence des termes utilisés.

Entendons-nous bien, je n’ai pas dit qu’il fallait finir la documentation avant de faire autre chose, mais bien de commencer par elle. Les autres méthodes de conception viendront compléter UDOD sans accroc :

• Design participatif ;
• Méthodes agiles ;
• User task oriented design pour la conception de l’interfaces ;
• UML pour la modélisation de l’application ;
• Object oriented programming et Aspect oriented programming pour le développement du code ;
• Unit tests pour valider chaque brique fonctionnelle définie par UDOD ;
• et j’en passe…

Des utilisateurs impliqués

L’équipe interne a maintenant de quoi travailler sereinement. Mais il y a mieux encore : UDOD implique très vite les futurs utilisateurs de votre application. Ils peuvent la découvrir avant même qu’elle ne soit codée. Et bien sûr y apporter rapidement des remarques, des contraintes, de nouveaux besoins. Dans le cadre d’une application métier, la qualité des échanges est nettement améliorée. On applique au mieux les méthodes de design participatif !

Une documentation de qualité

Au bout du compte, vous aurez optimisé tous les cycles de développement. Et je garde le meilleur pour la fin : vous avez une documentation utilisateur claire et complète au lancement de l’application ! C’est tellement rare…

Tous les graphistes vous le diront : « si ça marche en gris, ça marchera en couleur ! ». En effet, le gris a l’énorme avantage de mettre en avant les contrastes, la répartition des blancs, la pertinence des choix typographiques, l’équilibre des blocs.

GrayBit a donc appliqué au web ce petit secret d’expert et supprime les couleurs de n’importe quel site web ! Voilà le résultat avec le site très coloré de techcrunch.com :

Même si les annonces publicitaires restent en couleur, c’est assez convaincant, à condition que le site soit construit sur un code HTML propre et ses styles sur des fichiers CSS.

Pour mesurer les progrès accomplis en matière d’ergonomie et d’aspect des interfaces, je vous conseille la Graphical User Interface Gallery. Vous y trouverez de nombreuses interfaces de systèmes d’exploitation.

Autre site sur le même sujet, mais au contenu bien plus riche : le GUIdebook. Outre les interfaces de systèmes d’exploitation, on y trouve aussi des interfaces d’applications, des comparateurs d’icônes et de sons, des « splash screens » (écrans de démarrage), etc.

L’idée est toute simple mais magistralement mise en pratique par Marko Dugonjic : TypeTester permet de comparer sur trois colonnes des blocs de textes en sélectionnant tous leurs attributs de styles : police, taille, couleur, interlignage, alignement, etc.

Quand vous avez trouvé le style adéquat pour votre site, TypeTester vous en donne le code CSS ! Et en plus, l’interface est tellement belle…

DynamicDrive nous propose un outil en ligne très pratique : FavIcon Generator, un générateur d’icônes de favoris (les fameux fichiers favicon.ico). « Et à quoi ça sert ? ». Simplement à ajouter une image dans la barre d’adresse du navigateur et dans la liste des favoris (« Marque-pages » sous Firefox).