Christophe Le Bot

  • Navigation rapide
Pratique de la conception numérique

Derniers commentaires

  • Quand Google Maps sait se rendre utile
    • Christophe | Thanks Carly! I have modified the broken link.
    • carly | Hi Christophe There is a broken link on this page, I can send you the replacement link, im unable to find an email address for you. Ive provided mine for you to contact me. Carly
  • Test d’interface : paiement d’amendes en ligne
    • Herbaux Jean-Marie | J’ai été coupé a 15h56. Je ne parviens pas confirmer mon payement par C B via le payement.en ligne par Internet. J’entre bien les quatre groupes de chiffres et les deux...
    • Rovellotti Olivier | Ce site est un véritable cauchemar UX Excellent article http://www.natural-solutions.e u/
  • Agence web ou SSII : que choisir ?
    • Rovellotti Olivier | La limite n’est plus aussi claire qu’avant effectivement et les différence de prix sont du l’ordre du *10. Généralement les équipes dans les agences sont plus...
 

Test d’interface : paiement d’amendes en ligne

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

Accueil amendes.gouv.fr
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.

Certificat SSL amendes.gouv.fr
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
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
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
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).

Paiement de l'amende (1)

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.

Paiement de l'amende (2)

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.

Paiement de l'amende (3)

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.

User Generated Applications : utopie ou réalité ?

Même si le web 2.0 n’a pas inventé les réseaux sociaux, il a permis de généraliser la notion de User Generated Content, c’est-à-dire la création et la gestion du contenu par les utilisateurs. Tous les services « à la sauce web 2.0 » fonctionnent sur ce principe (à commencer par les blogs).

Et après ? Va t-on s’arrêter en si bon chemin ? Que peut-on apporter de plus à l’utilisateur ? Christian Fauré nous en donne la réponse : les User Generated Applications. A priori, son billet peut semer le doute (il date du 1er avril), et pourtant il ne manque ni de pertinence, ni de justesse.

Une réalité, soutenue par la demande des particuliers

« Les User Generated Applications ? Nous n’y sommes pas encore ! » Détrompez-vous : elles sont déjà là !

Un des meilleurs exemples est sans doute Yahoo! Pipes. Ce service permet de créer son propre agrégateur à partir de flux d’informations choisis, filtrés et manipulés. Pour cela, une interface graphique simple mais puissante permet de définir les règles de sélection et de traitements des flux.

Yahoo! Pipes - Accueil
Page d’accueil Yahoo! Pipes.
Yahoo! Pipes - Editor
Yahoo! Pipes Editor.

Ning est un service tout aussi intéressant. Il se définit comme « un service pour créer vos propres réseaux sociaux ». Certains y verront une plate-forme de blogs améliorée, alors qu’il s’agit bien de concevoir sa propre application de diffusion et de partage de contenu. Du User Generated Content servi par une User Generated Application, en quelque sorte.

Ning - Acceuil
Ning, page d’accueil.
Ning - IHM
Ning, interface de création.

Pour achever de vous convaincre, il me reste à citer Coghead. Là, nous touchons à la personnalisation ultime pour un résultat qui sort totalement des services web classiques. Coghead crée des applications complexes, à partir de données structurées par l’utilisateur, via une interface graphique.

Coghead
Interface de Coghead.

La difficulté d’une implémentation en entreprise

S’il est facile de faire du « cousu main » pour les particuliers, l’exercice est tout autre en entreprise. Christian Fauré nous dresse le tableau idyllique :

Personne n’aurait vraiment la même application, la notion même d’application deviendrait floue. Chacun créerait aisément ses propres services, au besoin en utilisant une librairie de composants génériques.

[…]

Le métier change ? Hop, je m’adapte immédiatement en modifiant mes services paramétrés. Pas besoin d’attendre le déploiement de la nouvelle version d’un progiciel.

[…]

Ce que cela change :
– plus de notion de processus métiers, ni de re-engineering : chacun outille son processus
– le management du SI se concentre sur l’architecture de l’information, l’interopérabilité et la sémantique des données.
– plus de MOE et de MOA, on arrête de travailler comme si l’on construisait un bâtiment (ouf!)

Et sa contrepartie :

Cela suppose une plus grande sensibilité et maturité des salariés dans la maîtrise de l’informatique. Cette sensibilité et cette éducation ne peut être assumée par l’entreprise seule. L’école elle-même ne pourra assumer ce rôle, ou en tout cas pas tels que les systèmes éducatifs sont actuellement conçus.

[…]

Le malaise des décideurs : ceux dont la fonction consiste à demander des rapports : bye, bye !

[…]

Il faut une population de salariés compétents pour être autonomes.

Les applications générées par les salariés sont-elles utopiques ou une réalité à court terme ? J’opte pour la seconde réponse, à condition de maîtriser la sémantique et l’interopérabilité des informations de l’entreprise. Tout l’enjeu (et les risques !) sont là. Le but est de qualifier le moindre fragment de contenu pour l’exploiter dans des conditions inconnues lors de sa création. Utopique ? Encore une fois, non. Encore une fois, les exemples existent.

Prenons Freebase. Ce projet a pour ambition d’être une base de données géante et universelle, alimentée par ses visiteurs. A priori, rien ne la démarque d’autres services web, sauf qu’ici, chaque information est qualifiée, « sémantisée ». Là où Google tente de comprendre le sens du contenu par des algorithmes évolués, Freebase découpe chaque information en fragments qui ont du sens. Là où Google vous donne une probabilité qu’une page web réponde à votre question, Freebase apportera la réponse exacte, fusse-t-elle unique !

Freebase
Site web de Freebase.

Avec l’explosion des données qualifiées et l’inévitable indisgestion qui s’en suivra, l’utilisateur en entreprise devra s’appuyer sur des outils de recherche, de sélection et de visualisation des données, avant de construire sa propre application. A ce titre, je citerai l’étonnant projet Many Eyes d’IBM.

Projet Many Eyes - IBM
Projet Many Eyes d’IBM.

Un séisme pour les acteurs informatiques ?

Je n’entrerai pas dans les détails d’un sujet connexe et sensible (cet article est suffisamment long, je pense…), celui de la génération automatique de codes qui touche directement les professionnels de l’informatique. On reste dans la même logique : accélérer la mise à disposition d’outils informatiques. Avec des conséquences importantes sur l’activité de certaines entreprises.

Les agences web sont les premières touchées. Elles sont souvent gérées par des créatifs qui ont une vision artisanale du développement web. Je n’ai rien contre les artisans talentueux, mais face à un serveur qui crée une application web en 2 minutes à partir d’un fichier UML 2, après avoir effectué des tests unitaires pour rendre l’application « 100% bug free », il devient très difficile de lutter, sauf à utiliser les mêmes méthodes de production et à se démarquer par une réelle créativité (là où l’homme aura toujours sa place).

Ensuite, à qui le tour ? Aux SSII qui facturent le déploiement et la maintenance de solutions applicatives ? Aux éditeurs de logiciels qui vendent des licences poste à poste ?

Pour ma part, je vois plusieurs évolutions importantes :

  • Les projets informatiques se focaliseront sur l’interopérabilité des systèmes d’information (l’open source les y aidera sûrement).
  • La sémantique va jouer un rôle fondamental dans la manipulation et la transformation de l’information.
  • Le développement informatique se concentrera sur la capacité de l’outil à s’adapter, à se personnaliser et à s’autogénérer.
  • La conception centrée utilisateur sera la seule conception possible.
  • Les managers devront intégrer les contraintes liées à l’autonomie des utilisateurs et à la plasticité de leur outil de production.
  • Les éditeurs de logiciels se transformeront en fournisseurs de services (la bataille Google / Microsoft est un bon exemple) ou en spécialistes métiers (comme Adobe, par exemple).
  • Les entreprises de services informatiques devront inventer le « support utilisateur individuel ».
  • La création prendra une place prépondérante et sera enfin facturée, puisqu’elle seule ne pourra être automatisée (enfin, pas à court terme…).
  • Nous utiliserons enfin les outils que nous imaginerons.

Du grain à moudre

Deux articles (en anglais) de CNN Money qui montrent que le sujet est d’actualité :

Pour finir, une excellente vidéo de Nigel Parker (48 minutes, tout de même !) qui reprend ce qui fait le web d’aujourd’hui et ce que seront les services applicatifs de demain :

Déclenchez-moi, un jeu en ligne pour apprendre les bases de la photographie

Jeu Déclenchez-moi

Même si les appareils photo numériques font presque tout à notre place, ils restent tributaires des notions de base de la photographie qui existent depuis Nicéphore Niépce : focale, ouverture, exposition, sensibilité, vitesse, etc.

« C’est trop compliqué, tout ça ! Moi, je veux prendre des photos. » Eh bien, dans ce cas, je vous conseille le jeu Déclenchez-moi, réalisé avec Flash par deux étudiants de l’Université technologique de Compiègne (UTC).

L’interface simple et didactique vous apprendra les rudiments de la photographie par l’exemple. Très efficace !

Ce projet m’a aussi permis de découvrir le site passionnant de l’association RendezVousCréation.

Source : 2803

Le Web 2.0 atteint ses limites

Un contenu réapproprié

Sur son blog Ecosphère, Emmanuel Parody nous alerte sur une des limites du Web 2.0 : les services en ligne autogérés. Prenant l’exemple de Digg, il montre que l’appropriation de la gestion du contenu par des petits groupes d’utilisateurs très actifs entraîne un détournement du service. Des dérives qui signeront inévitablement un retour vers le contrôle a priori du contenu :

J’en discutais avec Emmanuel Davidenkoff […]. Son choix, très motivé, consiste à imposer la modération a priori des commentaires et des contributions au nom de la cohérence éditoriale et de la qualité. Du coup on perd sans doute en spontanéité et on doit aussi supporter le coût de l’opération. Pourquoi ne pas faire le pari de laisser ses contributeurs s’autogérer ? Parce que, selon lui, derrière la communauté se crée un noyau dur qui tend à développer sa propre culture, ses codes, s’approprie l’espace au point d’exclure rapidement les nouveaux arrivants. Bref en apparence le site gagne son pari en fidélisant un noyau dur mais passe à côté de sa mission fédératrice. (extrait de l’article Digg : 1$ par vote, c’est cher payé sur Ecosphère)

Un contenu inapproprié

Cet exemple me fait penser aux déboires de USA Today qui a joué à 100% la carte du Web 2.0 pour la dernière version de son site web… sans avoir mesuré préalablement le désintérêt de 92% des lecteurs pour ses services participatifs. Si l’origine du problème vient d’une mauvaise conception du projet (overdose de « buzz » ?), il montre également que les principes du Web 2.0 ne s’appliquent pas à tous les projets web.

Un contenu inexploité

Les réseaux sociaux très permissifs du Web 2.0 ne sont pas les seuls à montrer leurs limites. Nova Spivack, le président de Radar Networks, montre, schémas à l’appui, l’inadéquation des mots-clés (les fameux « tags ») pour qualifier l’information à mesure que le web grossit :

La recherche par mots-clefs ne comprend pas le sens de l’information. La recherche en langage naturel est un peu meilleure pour comprendre le sens de l’information – mais elle ne s’intéresse pas plus à la structure de l’information. Pour vraiment améliorer la productivité de la recherche sur le web, nous aurons besoin de nouvelles approches qui structureront les données – c’est-à-dire qui seront capable de chercher dans et entre des bases de données structurées et pas seulement sur du texte sans structure ou de l’HTML semi-structuré. (extrait de l’article Beyond Keyword (and Natural Language) Search, traduit par InternetActu)

Verra-t-on un retour vers une classification plus classique (arbre, hiérarchie, facettes, graphes…) ? Sans nul doute, à condition de créer des interfaces suffisamment simples et rapides pour éviter de transformer chaque internaute en documentaliste. Le web sémantique dont on parle depuis que le web existe va devenir incontournable.

Un contenu réexploité

Je terminerai par ce qui me semble être la principale limite du Web 2.0 : la propriété intellectuelle. Il ne faut pas oublier que le monde réel est entièrement fondé sur la propriété : biens, marques, modèles, brevets, etc. Sauf à créer un autre monde, il faudra bien que le web se plie à cette règle du jeu séculaire. Les conflits et les enjeux en croissance constante le prouvent : purge de YouTube, signatures d’accords avec les auteurs, presse belge contre Google. Or le Web 2.0 doit notamment son succès au pillage des contenus. Que restera-t-il des réseaux sociaux une fois les procédures judiciaires abouties ? Comment garantir la stabilité du marché de la publicité en ligne sur des contenus instables ? Comment les internautes vivront ce douloureux passage d’un web anarchique et prolifique à un web raisonné et respectueux ? Ou bien, se dirige-t-on vers un web totalement libre, comme le voyait son créateur, Tim Berners-Lee ? Devra-t-on rendre l’économie classique « open source » ? Nous n’en sommes encore qu’à la préhistoire de l’internet…

Quand Google Maps sait se rendre utile

UNEP - Atlas of Our Changing Environment

Avec l’effet de mode « Web 2.0 » qui commence tout juste à toucher le grand public (« Il faut changer de PC pour accéder au Web 2.0 ? »), on voit fleurir les interfaces riches, les vidéos en ligne, les podcasts, les mashups… et j’en passe. Pourtant, cette profusion de nouvelles interfaces n’est que rarement utile pour l’internaute (je parle de l’internaute lambda, pas des 5% qui savent ce qu’est le RSS !).

Heureusement, il y a aussi de très bons exemples de nouveaux usages qui mettent en perpective l’avenir du web. Celui de l’Atlas of Our Changing Environment est particulièrement démonstratif. Diffusé par l’UNEP (United Nations Environment Programme), cette carte interactive, basée sur l’API Google Maps, présente l’impact de l’homme sur l’environnement, grâce à des comparaisons de photos satellites et des explications détaillées sur les causes des changements.

Assèchement de la mer d’Aral
L’assèchement de la Mer d’Aral de 1973 à 2004.

Cet outil a le mérite d’être simple, concis, factuel. L’objectif de vulgarisation est parfaitement rempli. Et les résultats font froid dans le dos…

TypeTester, l’assistant typographique rêvé des webdesigners

Typetester

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…

Faites tester vos sites grâce à UsabilityExchange

Ce n’est pas Cédric, mon ergonome préféré, qui me contredira : mettre en place un test efficace pour mesurer l’ergonomie et l’usage d’un site web coûte cher, parce que chaque service à tester est unique et donc le protocole de test spécifique.

Pourtant, les points communs sont nombreux d’un site à l’autre et l’internet permet de réunir des compétences et des testeurs de tout profil. Pourquoi ne pas profiter de cette nouvelle donne pour réaliser des tests plus facilement pour un coût maîtrisé ? C’est le service que propose le site UsabilityExchange.

La mise en place d’un test se fait par un formulaire en ligne qui définie la portée du test et le profil des testeurs. Tout se fait à distance : protocole de test, déroulement, clôture, résultats… et même paiement des testeurs qui restent sagement chez eux pour réaliser les tests !

Et que donnent les résultats ? A part de jolis graphiques et tableaux, on pourra bien sûr discuter le concept et notamment s’interroger sur le suivi des comportements d’un testeur qui n’est pas physiquement présent. Tracer ce qui se passe sur une interface ne suffit pas : l’attitude, les mouvements, les traits du visage, les hésitations, les grognements, les pertes de concentration, tous ces signes sont décisifs dans les résultats d’un test ergonomique.

Ceci dit, pour une validation basique d’un site, UsabilityExchange a au moins l’avantage d’éliminer les erreurs grossières pour un prix raisonnable.

Avec Retrievr, dessinez ce que vous cherchez !

Retrievr

La société autrichienne System One vous propose de tester Retrievr, un système de recherche d’images original et intuitif : pour trouver des photos, il suffit de les dessiner !

Autour d’un noyau codé en Python, Retrievr utilise Flash et le framework Javascript Helma pour l’interface utilisateur. Il est principalement basé sur les recherches conduites par Chuck Jacobs, Adam Finkelstein et David Salesin, de l’Université de Washington.

L’interface est simple et intuitive, les résultats sont étonnants !