Bumptop : l'autre interface tactile

dimanche 23 septembre 2007
Je vous ai parlé il y a peu de TileUI, une interface plutôt révolutionnaire qui présentait des petits pions en 3D représentant des données (images, fichiers, etc.), manipulables dans un environnement tendant vers le réel. Suite à ce commentaire très juste donnant l'origine du projet (dont TileUI en est très largement inspiré, mais réalisé en Flex), je me suis penché sur BumpTop.

BumpTop

Bien que le résultat soit quasiment identique (BumpTop est quand même plus poussé), il est intéressant de lire la documentation associée, soulignant les nouvelles pistes exploitées en ce qui concerne les interfaces : l'empilage des données, l'utilisation d'un stylo comme pointeur, etc. Il est également expliqué l'origine du projet, ainsi que les présentations effectuées autour de BumpTop. Qu'il est intéressant de pouvoir lire ces réflexions sur ces nouvelles interfaces qui vont se démocratiser petit à petit !

Pages are dead, long lives views

mardi 28 août 2007
Parlez-vous encore de pages web ? Est-ce toujours une terminologie usuelles ? Si vous êtes professionnel du web, calculez-vous encore en nombre de pages ? Consultez-vous les pages du site Google ou les services Google ? Voici quelques une des questions que je me suis posé dernièrement.

J'ai personnellement tendance à oublier le terme pages, penchant plutôt pour utiliser services, vues ou écrans. En effet, le dynamisme donné aux pages web par des technologies (ou ensemble de technologies) comme Ajax ou Flash les transforment en ensembles de vues, de fenêtres associées et reliées les unes aux autres, formant un tout cohérent, que l'on pourrait appeller services. En fait, le mot page fait bien trop statique pour encore être utilisé à l'heure actuelle. Comment pourrait-on par exemple définir Tafiti en utilisant ce terme ? Le dynamisme est bien plus complexe et créé donc des services et applications non plus formées de pages, mais plutôt de vues.

La fen�tre options de Netvibes
la vue Options de Netvibes, sous forme de fenêtre

Bien évidemment, le mot vue parlera aux techno-geek habitués de l'architecture MVC (modèle - vue - contrôleur). Et cela recoupe relativement bien l'utilisation que l'on souhaite en faire pour définir nos RIA. Ainsi, un écran sera découpé en plusieurs vues : par exemple, on peut considérer la fenêtre d'options de Netvibes, ou bien la liste des dossiers de Google Documents comme une vue.

Bien qu'il ne soit pas aisé de découper un site web en pages, il est encore plus difficile de découper une application riche en vues. Impossible de tenir une simple liste à puces : il faut passer par du visuel pour bien recouper les différentes parties de votre applications. Certains préféreront des maquettes réalisées sur Photoshop, d'autres le bon vieux brouillon sur la feuille de papier. Cette dernière méthode est intéressante car elle permet rapidement et facilement d'illustrer certains mécanismes typiques des RIA : les transitions avec effets graphiques. J'entends par là, par exemple :
  • l'affichage d'une fenêtre par dessus l'écran courant, assombrissant le reste
  • la réduction d'une liste d'éléments pour laisser la place à l'affichage d'un détail
  • le rechargement d'une partie précise de la page courante
San Dimas : liste
Réduction d'une liste de résultat sur l'application eBay San Dimas

San Dimas : liste r�duite
Avec un stylo et du papier, quelques flèches et autres crayonnages sont très rapidement parlant et permettent de se faire une première idée visuelle de ce que serait le résultat final. Ce dynamisme que l'on retrouve donc dans les RIA et peut être actuellement plus simple à rendre avec des feuilles et un crayon, plus tactile, que sur des outils pas forcément adapté pour présenter rapidement ces évolutions d'interfaces.

En conclusion, les nouvelles problématiques posées par les nouvelles interfaces au niveau graphique vont apporter peut être de nouvelles méthodes de travail, et pourquoi pas de nouveaux outils de conception plus adaptées à décrire des vues (plus dynamiques) que des pages (plus statiques).
Dans la lignée de l'article sur l'e-commerce et les RIA, voyons à présent ce que peuvent apporter les nouvelles technologies en terme d'usages à une fonctionnalité présente sur la plupart des sites mais également des applications connectées : la recherche. Pour cela, étudions différents types de recherches, avec un exemple associé :
  • La recherche libre
  • La recherche paramétrique
  • La recherche par catégories
  • La recherche par facettes

La recherche libre

La recherche libre, c'est certainement celle que vous utilisez chaque jour : comme par exemple sur Google, pour taper librement un mot ou une expression et obtenir une liste de résultats plus ou moins pertinents. C'est le moyen le plus simple d'effectuer une recherche sur un site : un simple champ, un affichage plutôt rapide, bref difficile de faire plus simple. Les désavantages : une pertinence pas toujours au rendez-vous, ce qui pousse parfois à de nombreuses modifications de la requête et donc à une perte de temps.

On voit dorénavant de plus en plus de nouvelles utilisations qui permettent une recherche encore plus instantanée et souple. Un exemple : cinemasie.com propose de rechercher des acteurs / réalisateurs / films liés au cinéma asiatique. En tapant un mot dans sa barre de recherche, les résultats s'affichent au fur et à mesure de la frappe. Pas besoin de recharger toute la page si le résultat est erroné. Mieux encore : si il ne reste plus qu'un résultat correspondant à votre requête, vous êtes automatiquement redirigé sur la fiche correspondante. Cette recherche libre est très pratique, notamment sur des sites spécialisés.

Cin?masie
Une recherche... et les résultats filtrés à la volée
Cin?masie

La recherche paramétrique

La recherche paramétrique offre plus de possibilités : elle permet de réduire le champ de recherche et des résultats affichés. On peut considérer les paramètres comme des filtres, permettant de limiter une recherche. La recherche est donc plus ciblé, les résultats plus affinés. Mais attention toutefois aux critères que l'on propose à l'utilisateur : trop de paramètre peut rendre la recherche laborieuse.

Un bon exemple d'utilisation des paramètres est présent sur les guides d'achat de darty. Ici, nous cherchons des climatiseurs : trois paramètres sont proposés, concernant la marque, la mise en marche programmée et le prix. Un premier aperçu nous est proposé en bas à droite : il nous donne le nombre de résultats correspondant à nos critères d'achat, et ce en temps réel (si je bouge la règle, le nombre se met à jour automatiquement). Cette première indication nous permet d'affiner nos filtres pour obtenir un échantillon de résultats ni trop important, ni trop faible.

Darty

La recherche par catégories

La recherche par catégories est présente sur de nombreux sites de commerce notamment : tous les articles sont triés en catégories puis en sous catégories, ainsi de suite jusqu'à un affinage correct (ni trop, ni trop peu). Cette méthode se révèle précise mais parfois longue : il faut parfois parcourir quatre ou cinq niveau avant d'obtenir une liste de résultats ! Comment améliorer ce type de recherche ? Ici, pas réellement de surprises, tout dépend du choix des catégories. Elles doivent être pertinentes et adaptées. Et pourquoi ne pas proposer les résultats les plus consultés au fur et à mesure du parcours des catégories ? Un exemple (pas toujours très efficace) serait le site de la Fnac, qui met en avant ses meilleures ventes pour la catégorie courante.

Fnac

La recherche par facettes

Enfin la recherche par facettes : elle se rapproche de la recherche paramétrique mais elle diffère néanmoins dans le sens algorithmique où la sélection des critères et des valeurs possibles pour ces critères se fait de manière très stricte : chaque élément de la liste doit être associé à une seule et unique valeur d'un critère, ni plus ni moins. Pour approfondir le sujet, n'hésitez pas à lire cet excellent article de Willian Denton (en anglais). L'avantage est bien sur la pertinence des résultats affichés : vous choisissez les critères à appliquer, les valeurs que vous souhaitez, etc. C'est par exemple ce que propose le site pixmania. Avez-vous déjà cherché des articles sur pixmania ? Aimez-vous ce type de recherche ? Bien que parfois compliqué, je pense que c'est la méthode la plus pertinente lorsqu'il y a plusieurs éléments à classer selon diverses catégories.

Pixmania

Conclusion

La recherche sur Internet est un enjeu important, notamment pour les sites d'e-commerce : si un utilisateur ne parvient pas à trouver rapidement ce qu'il cherche, il ira certainement voir le concurrent. C'est pourquoi la recherche peut et sera certainement améliorée, grâce à des technologies RIA qui par exemple offrent une meilleure mise en page des résultats, mais aussi des nouveaux usages plus pertinents et plus accrocheurs.

Cette petite présentation n'a pas pour but de présenter les différents moyens de mettre en oeuvre une recherche sur Internet, mais plus de montrer par quelques exemples qu'il existe de très nombreuses et différentes manières d'en effectuer. Le choix d'un type plus qu'un autre ne peut que dépendre du contexte de la recherche à mettre en oeuvre.
Microsoft a dévoilé Surface, une nouvelle interface pour que l'homme interagisse avec un ordinateur. Il s'agit d'une tablette tactile interactive permettant de gérer du contenu très varié et également de détecter des objets. Par exemple, Surface permet de classer et organiser des photos, des vidéos ou des morceaux de musique.

Microsoft Surface

Les vidéos de démonstrations de démonstrations sont évidemment très classes et très propre. Mais ce genre d'écran tactile existe déjà depuis quelques temps, voir pour cela les travaux de Jeff Han de l'université de New York.

Le fait que l'interfacage entre l'utilisateur et l'image soit plus direct est un nouveau pas vers un Internet Riche, en passant par des moyens d'interactions plus efficaces et plus interactifs. A force, on souhaite ne plus avoir d'intermédiaire comme la souris, mais de pouvoir tout controler de manière plus directe, comme par exemple avec le toucher. On peut également faire un parallèle avec Nintendo qui tente de révolutionner les jeux vidéo en misant sur le tactile (DS) ou la détection de mouvement (Wii). Ces nouveaux usages pour une interface homme-machine vont peut-être faire évoluer les ordinateurs. A voir si Surface sera capable de prendre part dans cette évolution...

Microsoft Surface

Je souhaite une démocratisation de ce genre d'appareils. Pourquoi ne pas imaginer la même chose chez soi pour contrôler les appareils ménagers ou tout simplement surfer sur le Web ? Quel utilisation pourra t'on en faire à grande échelle ? C'est avec une grande impatience que j'ai regardé les vidéos de Surface, et je suis très impatient de l'essayer !

Rechercher