Lecture augmentée

Concrètement, comme vous pouvez le voir sur la vidéo de démonstration ci-dessous, la lecture de certains mots, phrases ou noms peut déclencher l’apparition d’informations complémentaires, de traduction automatique, de notes biographiques, de définitions, d’images et d’effets animés. Vous pouvez, par votre simple regard, savoir comment se prononce un terme. Si le système détecte que vous faites une lecture en diagonale du texte, il atténue la visibilité des mots secondaires pour faire ressortir les mots importants. Lorsque votre regard quitte la page puis revient, une flèche rouge le guide pour retourner là où vous aviez interrompu votre lecture.

La technologie est évidemment prometteuse: quel potentiel en terme de lecture augmentée! Mais il y a évidemment la crainte que cette pseudo-intelligence se retourne contre l’utilisateur pour au final lui donner moins de contrôle (publicités intempestives?).
Or, l’un des attraits qui permet à l’objet « livre » de survivre est justement ce sentiment de contrôle. Le texte imprimé ne se modifie pas, les pages ne se tournent que lorsque j’en ai envie (ou lors d’une bourrasque de vent si je lis dehors ). Ses contraintes sont ses richesses: le livre impose le retrait, l’immersion. Le texte en ligne beaucoup moins mais tout de même… Cela m’énerverait vite d’avoir mon attention attirée par des animations, aussi pertinentes soient-elles. Il y a donc un grand effort de calibrage pour qu’une telle technologie apporte une réelle amélioration à l’expérience de lecture.

A suivre…

Je vous invite à participer à ce buzz qui élève le débat et utilise l’interactivité à bon escient: http://1milliondeclicscontrelamisere.org/

Cela étant, petit clin d’oeil qui m’a amusé. L’intitulé du bouton d’envoi du formulaire de contact aurait pu être mieux choisi…

L’idée est simple : une main = 5 doigts. I doigt = 1 souris. Efficience = efficience x 10. Ce qui les amène à parler d’ « interaction bandwidth » que l’on pourrait définir par l’ampleur du vocabulaire interactif.

Et justement, les propositions de vocabulaire interactif du système proposé sont bigrement bien imaginées.

Par contre, j’ai une suggestion à faire à google : si vous me lisez, môssieur Google, pourriez-vous rapidement améliorer cette affreuse pagination qui demande que l’on regarde là où l’on clique, sous peine de faire des aller-retour sur des pages de résultat de recherche déjà visitées? Personnellement, cela m’arrive quasi à chaque fois. Pourquoi? Parce que mes yeux sont occupés à scruter les résultats, et que je clique machinalement pour aller à la page suivante, ne me doutant pas que la flèche se déplace en fonction du nombre de liens directs aux pages de résultat.
J’en viendrais à croire que vous ne voulez pas que l’on aille voir au delà de la première page de résultat…

Le problème

la zone rouge indique la position de la souris après avoir cliqué une première fois sur «suivant». Après ce premier clic, la souris se trouve hors zone active. Elle doit donc se déplacer, ce qui force l’utilisateur à détourner son attention de ce qui l’intéresse vraiment – consulter les résultats.

Cela détruit également la fonction première d’un tel bouton « précédent – suivant »: passer d’une page à l’autre tel un slideshow manuel.

Proposition de solution

Autoload

C’est une fonction de plus en plus à la mode: lorsqu’on arrive en fin de page, une requête ajax est envoyée qui charge le contenu à la suite du contenu existant. Plus besoin de cliquer, on continue à scroller tout simplement! Exemple chez dzone.com

redesign

Redesigner cette pagination pour qu’elle utilise des dimensions fixes, tout simplement. Imagine-t-on un livre dont le numéro de page en bas serait à chaque page à un endroit différent, goddamit ?
Alors môssieur google, smashingmagazine a dédié un article au sujet de la pagination que je vous recommande. D’ailleurs, je l’ai trouvé via votre excellentissime moteur de recherche en tapant: pagination done right.

La morale de cette métaphore est que tout est dans la nuance et sur cette Terre, les nuances, cela compte.

En développement web, la nuance se traduit par une analyse « coût/bénéfices »: on met à plat et l’on compare les avantages et désavantages d’une option sur l’autre, en fonction de la situation, du contexte et surtout du public-cible. C’est cela l’ergonomie: la prise en compte du public-cible, et dans ce cas-ci, de sa maîtrise de l’outil informatique.

De l’usage du target= »_blank »

Le dernier commandement en date: « il ne faut pas utiliser l’attribut target: »_blank ».

situation

espace: monde
époque: juillet 2009
public-cible: dépend du projet

coût

- ne permet pas à l’utilisateur de choisir la fenêtre dans laquelle va s’afficher la page, en forçant l’ouverture du lien sur une nouvelle fenêtre

bénéfices

- ouverture de fichiers de type autre que « html »
- dans une application ajax mal développée, ne perturbe pas l’historique du navigateur pour l’application en question (et il y en a beaucoup)
- de nombreux utilisateurs ne connaissent pas l’usage du bouton central, ou n’ont pas une souris à trois bouton, ou ne connaissent pas la fonction CTRL (POMME sur mac) + Click.

A la lumière de ces éléments, vous pouvez juger si par exemple vous héritez de la maintenance d’un vieux magasin e-commerce de produits d’entretien développé par un amateur d’ajax… amateur, et que votre public cible, ce sont des ménagères de 65 ans avec un équippement informatique digne de mathusalem, alors vous devrez sans doute choisir l’utilisation de l’attribut target.

Si par contre votre public cible est composé essentiellement de développeurs web, vous savez ce qu’il vous reste à faire ….

La seule chose qui lui manquait était de pouvoir créer des liens depuis un mockup vers un autre, à la manière d’un wireframe.

Comme annoncé sur leur site, c’est maintenant chose possible, et de manière très simple. N’importe quel objet relatif à une action (par exemple un lien ou bouton) a une option complémentaire « link to « , suivi d’un dropdown menu qui liste les mockups associables (concrètement, les autres mockups se trouvant dans le dossier du mockup actif).

Well done !

Pour en savoir plus, lisez l’explication complète sur le blog de balsamiq.

Il y a de nombreuses découvertes en terme de mauvais design d’interfaces, parfois franchement amusantes, à faire sur l’Interface Hall of Shame découvert sur le wiki de jquery UI. Décidémment, il y a tant à apprendre des erreurs… des autres bien entendu ! °-¨

Cela ressemble de plus en plus à une tendance lourde: le clavier , mesdames et messieurs, qu’il soit qwerty ou azerty, est de retour dans le rang des interfaces de commande. Il s’était éteint avec le DOS et ne survivait depuis lors que parmi les tribus des hardcore de la ligne de commandes, reclus pour la plupart dans les réserves linux, tels les derniers des mohicans. Et bien là, il est de retour. Cela a commencé avec les lanceurs d’applications, et particulièrement Quicksilver sur Mac OS X, Launchy ou (ma préférence personnelle) Find & Run Robot sur PC.

Grâce à ces programmes, plus besoin de farfouiller avec sa souris dans son menu Programmes pour lancer cette application dont on connaît très souvent mieux le nom que l’emplacement dans le menu. Alt+ SPACE et hop, vous commencez à taper le nom de l’application et un menu tente de deviner ce que vous cherchez. En moins de cinq lettres en général vous avez le programme que vous cherchiez à la portée de la touche ENTER, qui l’exécute. Probablement plusieurs secondes de gagnées sur une journée, mais surtout, l’esprit n’est plus interrompu par la recherche du programme ce qui résulte en une meilleure fluidité dans la relation homme-machine: cela devient un réflexe, et il m’arrive régulièrement de ne me rendre compte qu’à postériori que je viens de déclencher l’ouverture du programme dont j’ai besoin.

Il n’aura pas fallu attendre longtemps pour voir ce type d’interaction porté sur le web: google Suggest notamment, et l’excellent keyboardr qui reproduit exactement le type de fonctionnalité que Launchy et les autres proposent sur dekstop, mais appliqué à un moteur de recherche généraliste à la Google.

Popularité retrouvée

Pourquoi cette popularité retrouvée du clavier? Xerox, le premier fabricant à proposer un PC incluant la souris moderne, et qui détrôna les OS à ligne de commande type DOS doit se retourner dans sa photocopieuse !

Personnellement, je décèle deux raisons possibles:

• situation de confusion:
  je crois que l’explosion de programmes disponibles plus ou moins gratuitement sur internet a rendu la gestion des logiciels installés sur un ordinateur trop fastidieuse pour l’utilisateur. Résultat: la majorité d’entre nous sifflotons gaiement un « J’installe et puis j’oublie, c’est la vie, c’est la vie ». Les programmes s’accumulent, et l’on n’a pas envie de maintenir constamment à jour son menu programmes, qui devient à plus ou moins long terme un véritable souk.
• généralisation de l’usage du clavier:
  parallèlement, de plus en plus de personnes intègrent l’usage du clavier quotidiennement et deviennent chaque jour plus habiles à tapoter qu’à écrire avec un stylo-bille.

Quant à son arrivée sur le web, je crois que la raison est à la fois conjoncturelle et technique:

• conjoncturelle, avec la montée en puissance des applications web, cherchant elles-même à reproduire la sensation des applications desktop
• technique : le formidable avènement des librairies javascript (prototype, motools, jquery…) a rendu l’implémentation des événements claviers aussi simples que l’implémentation d’un événement « onclick ». Du coup, le coût en temps de l’implémentation étant quasi nul, les développeurs web ont beaucoup moins de réticence à faire en sorte que l’utilisateur final puisse avoir accès aux raccourcis claviers comme sur une application desktop.

Il ne reste plus qu’à implémenter correctement le tag TABINDEX sur les zillions de formulaires en ligne qui n’en tiennent pas compte, mais là, je me dis que je rêve trop fort. < ENTER >

PS: voir également ce plugin jquery HotBox : tentative de menu additionnel à la 3D studio Max, porté sur le web.

L’image ci-dessus représente 12 schémas d’écrans standards, utiles pour le développement de RIA, par Theresa Neil. Comprenez-les comme des templates de solutions.

Vous pouvez en lire plus sur chaque schémas sur le site du livre « Designing Web Interfaces » qui constitue une lecture très intéressante. L’article propose en outre un pdf beaucoup plus complet à télécharger.

Tel est le problème que l’interface « SpinTheWheel » cherche à résoudre. SpinTheWheel est un plugin jquery qui expérimente un mode de sélection intuitif, utile lorsqu’il y a trop de valeurs à proposer pour utiliser un simple « slider ».

L’expérience me semble intéressante, mais les exemples proposés ne sont pas forcément plus convainquant que d’autres solutions à ce problème, telles que le plugin listnav ou, s’il y a vraiment beaucoup d’entrées, l’option de suggérer des options au fur et à mesure de la frappe (cfr google suggest).

JQuery.spinTheWheel.js is a plugin for jQuery. It's designed to create an intuitive way of selecting a value in a defined span. Use where you want total control of the value the user can pick but where a standard slider won't do the trick due to a too big span. Or just because it looks good.

via binofo.com.