FredCavazza.net

C’est en me baladant sur la nouvelle section News de Yahoo! (très belle métamorphose au demeurant) que j’ai remarqué de biens curieux liens. Alors que l’ensemble des liens sur le portail dispose d’un même traitement graphique, certains sont représentés en gras avec un petit icône à droite. Etant de nature curieuse je clique dessus et là, surprise :

Un panneau contextuel qui propose un ensemble d’actualités relatives au sujet du lien ainsi que de la recherche ciblé. Une sorte de mini-dossier, le tout dans une petite fenêtre avec un très bel effet de transparence. C’est très bien réalisé et d’une efficacité redoutable, mais ça me fait quand même fortement penser aux co-links. De là à dire qu’il y a eu espionnage industriel, il n’y a qu’un pas que je n’oserais pas franchir. Plus d’infos sur la page de FAQ : Y!Q Search.

Non content d’être le poids lourd du commerce électronique en France, Voyages-SNCF innove et nous propose une fonctionnalité assez remarquable dans sa mise en œuvre : Alertes Vacances. Le principe retenu est celui de l’assistant (wizard en anglais) avec une progression par étapes. Sauf que dans ce le cas de ce service, tout est graphique (pas de champs de saisie classiques) et que l’on est accompagné tout du long par une assistante.

Au bout du compte, nous avons ici un très bel exemple de fonctionnalité complexe (un processus découpé en plusieurs étapes) présentée de manière simple (avec un guidage très limpide) et efficace (un minimum de choix à chacune des étapes). Je ne saurais dire si avec ce service les trains auront moins de retard, mais en tout cas quand c’est beau et bien fait, moi j’applaudi à deux mains : Clap-clap-clap ! (merci à Stéphane pour le lien)

Le site communautaire Interactio-Design.org vient de mettre en ligne une encyclopédie sur les termes employés dans des disciplines comme la conception d’interfaces, l’architecture de l’information, l’expérience utilisateurs et bien sûr le design des interactions : Encyclopedia. Plutôt intéressant comme initiative, à comparer avec l’ IAWiki ou L’ Encyclopédie e-Business du JDNet. A côté, mon glossaire à l’air tout minable… mais bon, il a le mérite d’exister et ce depuis plusieurs années !

Hé oui, c’est nouveau ça vient de sortir : une technologie qui permet d’associer plusieurs URL à un seul lien : What are co-links?. Là où c’est intéressant, c’est que l’insertion d’une nouvelle URL se fait au travers d’une interface Wiki. Plutôt que de partir dans de longues explications, je vous propose de vous exercer sur la page de démonstration. (via Post2K)

En mettant un coup de Stabilo dessus pardi ! En fait, nous parlons ici d’attirer l’attention des utilisateurs de façon élégante. Le but de la manoeuvre est de faire ressortir une phrase, un paragraphe ou un lien en lui appliquant un fond de couleur voyante (un peu comme quand vous surlignez avec un Stabilo). L’astuce est de faire en sorte que cette mise en forme ne soit pas intrusive, pour cela il existe une astuce en javascript pour que ce surlignage s’estompe en quelques secondes.

Cette astuce visuelle, baptisée Yellow Fade Technique, a pour la première fois été implémentée sur le blog de 37Signals (voir le billet à ce sujet : Web Interface Design Tip: The Yellow Fade Technique).

Cette technique est maintenant détaillée et proposée en téléchargement gratuit sur le site Axentric : The Fade Anything Technique. Je vous recommande de jeter un oeil à leur page de démonstration pour vous convaincre de l’intérêt de cette astuce visuelle.

Suite à précédent article ( What’s the Problem?), le magazine A List Apart vient de publier un autre article traitant des cas d’utilisation : Use-Cases Part II: Taming Scope.

Au programme de ce nouvel article : les cas d’extension (extend en anglais) et les cas d’inclusion (include toujours en anglais). Espérons que s’il doit y avoir un troisième article sur le sujet l’auteur ne nous entraîne pas trop loin dans la complexité du langage UML (dont ce principe de modélisation est issue).

Le site A List Apart nous propose cette semaine un article de vulgarisation sur les cas d’utilisation : What’s the Problem?. Surprenant pour un site à la ligne éditoriale plutôt tournée vers les aspects techniques. En tout cas, les explications sont simples et les diagrammes très sympa :

Puisqu’on est dans le sujet, laissez moi vous donner mon point de vue :

• Les cas d’utilisations (ou scénarios d’utilisations) servent à modéliser les interactions possibles entre un utilisateur et une application ;
• Ils sont particulièrement utiles pour mettre à plat un processus et anticiper toutes les configurations possibles ;
• Les cas d’utilisations sont regroupés au sein de packages qui couvrent l’ensemble des fonctionnalités d’un site ou d’une application en ligne ;
• Les acteurs doivent être clairement définis (rôle, responsabilités…) en amont de la rédaction de cas d’utilisation ;
• La notion de cas d’utilisation a été introduite dans le cadre d’UML et de la méthodologie RUP. Il servent à documenter les spécifications fonctionnelles d’un projet.

Dans mon travail, j’utilise mon propre système de représentation graphique des cas d’utilisation qui va un peu plus loin que celui de l’article d’A List Appart :

Ce système de représentation a été baptisé Canardo (en hommage à son concepteur) et vous pouvez le trouver sur le fichier suivant : Gabarit de cas d’utilisation (format PPT). Pour info, vous pourrez trouver d’autres ressources de ce type dans la page ‘ Publications‘ de ce site.

MAJ (25/01/05) : C’est au tour de Macromedia de nous pondre un article sur la modélisation des processus : Modeling User Workflows for RIAs. L’article est très didactique et les exemples de très bonne qualité :

Ils en profitent pour faire un peu de promotion pour leurs outils mais bon, il faut bien vivre, non ?

Après un précédent billet posté pour m’aider à me décider sur la meilleure façon de mettre en forme les boutons d’un formulaire contenant plusieurs étapes, je vous livre les résultats de ce mini-sondage : une large majorité ont voté pour la solution B (avec deux flèche “< Précédent” et “Suivant >“). Effectivement, c’est celle qui présente la solution la plus claire et qui laisse le plus de contrôle aux utilisateurs.

Et pourtant, ce n’est pas la solution que je vais retenir. Mon choix va plus s’orienter sur une nouvelle version de la solution A :

Plusieurs explications à cela :

• Nous sommes dans le cas d’un formulaire guidé et non d’un assistant (pour plus d’explications entre ces 2 notions, voir le très bon article à ce sujet de Bob Baxley : Wizards and Guides, Principles of Task Flow for Web Applications) ;
• L’objectif premier est de faire progresser les utilisateurs dans les étapes tout en minimisant le nombre d’aller / retour avec le serveur ;
• Les étapes seront clairement affichées en haut du formulaire ;
• A chacune des étapes, un contrôle de surface est effectué et les données sont enregistrées ;
• Une dernière étape de récapitulation demandera aux utilisateurs de vérifier et valider leurs données, sinon de revenir en arrière et de corriger certaines étapes ;
• Le bouton “Annuler” a été remplacé par 2 liens exprimés sous forme de questions qui permettent d’abandonner le formulaire ou de sauvegarder les données ;

Pour toutes ces raisons, je pense que cette nouvelle solution A est la plus appropriée car elle sera moins source d’erreurs et de fausses manipulations. Attention, cela ne veut absolument pas dire que la solution B n’est pas pertinente, au contraire ! C’est juste qu’elle n’est pas la plus adaptée à ce contexte précis.

Merci encore à tout ceux qui ont pris le temps de donner leur avis, cela m’a permis de pouvoir trancher et d’opter pour une solution qui présente le meilleur compromis incitation / utilisabilité (au passage, je m’étais plus orienté vers la solution D). Au vue de la qualité des commentaires, je pense que je vais vous solliciter plus souvent !

MAJ (18/01/05) : Visiblement je ne suis pas le seul à me poser des questions : Web Application Form Layout.

Je travaille en ce moment sur un projet de guide ergonomique dans lequel des recommandations doivent êtres faites quand à la présentation et mise en page des formulaires en ligne. Etant dans l’incapacité de me décider pour une solution ou une autre, je me permet de vous solliciter sur un problème bien précis :

Nous sommes dans le cas de figure où les utilisateurs doivent remplir un formulaire en ligne découpé en plusieurs étapes, une sorte d’assistant (wizard comme disent les anglo-saxons). A votre avis, laquelle de ces 4 propositions vous semble la plus claire, intuitive et posant le moins de problèmes d’interprétations :

Solution A :

Solution B :

Solution C :

Solution D :

Alors ? Votre avis ?

Ce soir, grâce à Gou, je vous propose de faire connaissance avec les 5 lois de la conception d’interface :

1. L’utilisateur n’utilise pas votre application: il accomplit une tâche ;
2. Plus un objet est grand et près du curseur, plus il est facile à cliquer ;
3. Eviter de détourner l’attention de l’utilisateur de sa tâche primaire ;
4. Utiliser la puissance de l’ordinateur pour éviter des efforts mentaux à l’utilisateur quand l’ordinateur peut (ou devrait) faire une part de travail ;
5. Faire les choses faciles à distinguer et à mémoriser.

Comme le fait très justement remarquer l’auteur, on est pas loin des trois lois de la robotique d’Asimov. Tiens d’ailleurs, j’ai bien envie de faire un test de Turing pour vérifier qu’il n’y a pas que des automates type Googlebot ou Gigablast qui lisent ce blog : êtes-vous humains ?