J’ai eu la chance d’assister cet après-midi à une démonstration de la Reactbale. Il s’agit d’un instrument de musique électro-acoustique créé conjointement par le Music Technology Group et l’université Pompeu Fabra de Barcelone. La particularité de la Reactable est de proposer une interface tangible pour un usage à mi-chemin entre la table Surface de Microsoft et la GrooveBox de Roland.

Le principe est de créer des mélodies (ou des arrangements mélodiques) à l’aide de petites plaquettes en plastique ayant différentes propriétés :

• Les plaquettes carrées produisent des sons ;
• Les plaquettes carrées à coins arrondis servent de filtres ;
• Les plaquettes rondes servent d’ondulateurs ;
• Les plaquettes en forme d’étoile changent les paramètres du tempo général ;
• Les blocs produisent des séquences…

Lorsque vous déposez une plaquette sur la table, elle est reconnue grâce à une caméra optique et commence à interagir avec les autres plaquettes. Là où ça devient intéressant, c’est qu’il est possible de moduler les sons en fonction de l’orientation et de la proximité des plaquettes. Des curseurs projetés autour de chaque plaquette permettent également de modifier le comportement de ces dernières, comportement qui est représenté par une oscillation sur la table (pour certain son cela ressemble à une onde, pour d’autres à des impulsions).

Voici une courte vidéo qui illustre mieux le fonctionnement :

Le promoteurs présentent la Reactable comme un instrument collaboratif (plusieurs personnes peuvent “jouer” dessus en même temps, très intuitif et évolutif (il convient aussi bien aux novices qui bidouillent qu’aux musiciens professionnels qui font des arrangements complexes).

Du point de vue de l’intuitivité, je dois reconnaître l’incroyable facilité de prise en main de la table : il suffit de poser les plaquettes carrées pour produire des sons, de les associer avec des filtres et de faire varier les réglages. Il y a de plus une dimension pédagogique non-négligeable puisque la représentation visuelle des sons permet de mieux appréhender des concepts comme la fréquence ou l’amplitude.

Les universitaires associés au projet y voient également un moyen de faire comprendre les sons aux enfants (et notamment aux bébés) ainsi que les interactions.

Bien évidément il n’est pas question de mettre ça en pratique dans votre site web dès demain (quoi que… Auditorium est fondé sur un principe assez proche), mais je trouve cette innovation particulièrement inspirante (inspirationnelle ?). Il existe un équivalent en Flash chez OrganeLabo mais connaissez-vous d’autres exemples d’interfaces similaires ?

MàJ (06/07/2009) : On me signale l’existence des AudioCubes qui ont un principe de fonctionnement similaire (interactions entre cubes) et qui utilisent des senseurs de proximité : Making loops with single AudioCube.

Les formulaires ont toujours été  au coeur de nombreux débats dans le petit monde de l’ergonomie web. J’ai d’ailleurs déjà eu l’occasion de m’exprimer à ce sujet sur ce blog. L’auteur de référence sur ce thème est pour moi Luke Wroblewski avec son livre Web Form Design: Filling in the Blanks.

Malgré quelques différents, les avis convergent tous grosso-modo vers un ensemble de bonnes pratiques bien résumées ici : Web Form Design Patterns: Sign-Up Forms. Une récente étude vient relancer le débat avec des conclusions tout à fait intéressantes et surtout des données statistiques issues d’un test d’oculométrie pour cautionner le tout : Web form design guidelines: an eyetracking study.

Les enseignements de cette étude sont les suivants :

• La mise en page doit être verticale (pas de formulaires avec des champs sur deux colonnes) ;
• Les intitulés des champs sont lus plus facilement s’ils sont placés au dessus ;
• Certains champs peuvent être groupés sur une même ligne  (exemple : date de naissance en 3 menus déroulants) ;
• La chapitrage des formulaires est mieux distingué si les intitulés de groupe ont un traitement graphique distinct (avec la balise fieldset) ;
• Mieux vaut indiquer les champs optionnels plutôt que les champs obligatoire (cela réduit le “bruit” des caractères parasites) ;
• Un seul champ suffit pour les numéros de téléphone ou les champs numériques complexes (mieux vaut passer par du reformatage : Vive les assistants de saisie pour les champs de formulaire) ;
• L’aide contextuelle doit être la plus proche possible (généralement à droite du champ) ;
• Le nombre d’étapes doit être clairement affiché.

Des enseignements très instructifs qui pourtant ne vont pas forcément dans mon sens (j’ai toujours été un fervent defenseur des intitulés de champs alignés à droite).

Jusqu’à très récemment mon formulaire favori était celui de Remember The Milk (cf. Le formulaire parfait) :

Mais j’ai récemment découvert celui de Ballpark qui est plus sophistiqué :

Bien évidement c’est une affaire de goût puisque ces formulaires sont tous les deux très bons mais j’apprécie énormément le jeux des couleurs ainsi que les têtières des groupes. Et vous ?

Les netbooks sont devenus en moins de deux ans un authentique phénomène : vendus à 11 millions d’exemplaires l’année dernière, il pourrait s’en écouler près de 35 millions d’unités en 2009 (Netbook Sales Expected To Take Off). D’après les estimations, les ventes de netbooks devraient se stabiliser d’ici à 2010 avec 18 % de parts de marché (Netbook Market Forecast & Business Strategy).

Avec un tel volume de vente, les netbooks vont avoir un impact non-négligeable sur les services en ligne. J’ai déjà eu l’occasion de m’exprimer sur les changements à prévoir sur les habitudes d’utilisation de l’internet (Les netbooks vont-ils amorcer la révolution du web 3.0 ?) et sur l’utilisabilité des systèmes d’exploitation (Intel et Jolicloud à la recherche de l’interface parfaite pour les netbooks). Je m’interroge aujourdh’ui sur l’impact que les netbooks peuvent avoir sur notre façon de concevoir un site web.

Ces petites machines ré-introduisent ainsi des contraintes que l’on croyait résolues, à commencer par la résolution de l’écran (sources = W3 Schools) :

Évolution des résolutions d’écran sur les 10 dernières années

En moins de 10 ans, les petites résolutions d’écran (800*600 px) avaient presque complètement disparues. Avec plus de 90% de part de marché, la résolution 1024*768 était devenu la référence incontestée. “Était” puisque l’on commence à voir apparaitre des résolutions exotiques dans les statistiques :

Apparition de résolutions “exotiques” dans les statistiques

Nous retrouvons ainsi en 13ème position la résolution caractéristique des netbooks (1024*600 px) juste au dessus de celle des iPhones (320*396 px). Puisqu’il existe des versions spécifiques aux iPhones, pourquoi pas pour les netbooks ?

Oui je sais, vous pourriez me dire que cela ne serait pas très rentable de développer une version spécifique pour “seulement” 168 pixels de différence, mais cette différence peut être énorme lorsque cela concerne un bouton d’action. Illustration avec le site de Voyages SNCF :

La page d’accueil de Voyages-SNCF avec les deux limites de visibilité

Comme vous pouvez le constater sur cette capture, la page d’accueil fonctionne parfaitement en résolution 1024*768 mais tout se complique avec le 1024*600 car les boutons d’action sont sous la limite de visibilité.

Rassurez-vous, la situation n’est pas très dramatique car nous savons maintenant que la limite de visibilité n’est plus réellement un problème (cf. les articles Unfolding the Fold, et ClickTale Scrolling Research Report V2.0 Blasting the Myth of the Fold), mais ceci concerne surtout les sites de contenu, qu’en est-il des sites marchands ?

Peut-être pourrions-nous envisager des formulaires où le bouton d’action serait doublonné (comme sur Amazon) pour palier à ce déficit de visibilité en hauteur :

OK, mais ce n’est pas tout car les netbooks induisent d’autres contraintes :

• La saisie qui est rendu plus difficile par des claviers plus petits (surtout au niveau de la touche “Shift” qui est indispensable pour saisir des chiffres) ;
• La manipulation qui est également très difficile avec les minuscules pavés tactiles et les boutons qui sont parfois bizarrement positionnés (par exemple sur les côtés pour certains modèles) ;
• La lisibilité avec des écrans brillants (dalle “glossy” qui capte tous les reflets)…

Bref, je suis persuadé que les spécificités des netbooks devraient être prises en compte dans notre façon de concevoir les sites web et plus précisément les fonctions marchandes. Je n’ai pas la prétention de trouver une solution pour toutes ces contraintes dans cet article, mais juste d’attirer votre attention sur le “phénomène”.

Avez-vous également constaté l’apparition des netbooks dans vos statistiques de fréquentation ?

Voilà un petit bout de temps que je cherche à aborder le sujet des visites guidées (“demo tour” ou “product tour” en anglais). Très utiles pour valoriser votre offre voir indispensable quand vous devez faire preuve de pédagogie pour présenter un service complexe. Les visite guidée existent depuis de nombreuses années sous différentes formes : statiques (un seule page), séquentielle (plusieurs pages), animée (format flash), vidéo… Un exercice délicat qui demande de respecter certaines règles qui sont bien résumées ici : 16 manières de designer une page de tour.

Même si j’apprécie l’article précédemment cité, je trouve qu’il y manque un petit quelque chose… une visite guidée ultime qui serve de référence. J’ai longtemps cherché et je pense avoir finalement trouvé un très bon exemple : Get Glue.

Pour faire simple, Glue est une social bar qui vous accompagne dans votre navigation quotidienne. La page d’accueil du site est un bel exemple de minimalisme et de concision : une capture d’écran, une courte explication, des témoignages et trois boutons d’action (installation, visite guidée et démonstration vidéo).

La particularité de cette visite guidée est qu’elle est directement intégrée à la page d’accueil, vous ne changer pas d’écran et l’on vous présente les différentes caractéristiques du service en les illustrant sur la capture d’écran :

Les textes sont courts et le guidage est renforcé par des flèches qui pointent les zones d’intérêt et un ombrage sur le reste de la capture :

La visite guidée se termine par la proposition d’installation de l’application :

Donc au final nous avons une visite guidée d’une redoutable efficacité : peu de texte, des bénéfices et non une liste de fonctionnalités, une cinématique limpide et rapide à dérouler. Cette visite guidée est de plus secondée par une démonstration vidéo pour ceux qui souhaitent s’attarder plus de temps.

Bref, c’est du très bon travail même si je trouve qu’il manque dans ce site une page où seraient résumées les fonctionnalités et les bénéfices. Ce que j’apprécie particulièrement est le choix de la simplicité par rapport à des solutions plus sophistiquées ayant recours à une animation Flas plus longue à charger et lourde à manipuler.

Comme toujours, si vous avez de bons exemples, n’hésitez pas à publier l’URL dans les commentaires.