13 February 2010

As we may pinch (du zoom visuel au zoom sémantique)

« Pince-mi et Pince-moi sont sur un bateau. Pince-mi tombe à l’eau. Qui reste t‘il ? »
Blague enfantine française


Je vous propose d’aborder aujourd’hui  un sujet plus concret que dans mes précédents billets : le zoom.

Le pinch (gestuelle de pincement) et l’action de zoom/dézoom qui lui est couramment associée, ont été très rapidement adoptés par le grand public. Placez quelqu’un devant un dispositif multitouch, vous pouvez être assuré qu’une de ses premières tentatives sera de voir ce qu’il peut zoomer. Il semble donc raisonnable de se demander quels avantages nous pouvons tirer du zoom…

L’usage aujourd’hui le plus répandu du pinch est donc le zoom d’éléments multimédia comme les photos. A l’heure où nos appareils photos numériques nous proposent des résolutions de plus en plus élevées, il est naturel que nous en voulions pour les millions de pixels promis.

Zoom d’une photo (image Microsoft corp.)

Comme bon nombre, une de mes premières réalisations en multitouch (si ce n’est la première) fut une application permettant de zoomer les photos et je peux vous assurer qu’elle m’a amusé un bon moment. Mais lorsque nous aurons inspecté le moindre pixel de nos albums photos (voire des photos de Flickr pour les plus motivés) que ferons nous du zoom ? Le laisserons nous définitivement tomber en nous disant que ce fut amusant mais qu’il est temps de passer à autre chose ?

Pour essayer de répondre à cette question, il parait judicieux de commencer par définir à quoi correspond l’usage actuel.

Le zoom géométrique
Le zoom présenté ci-avant est un zoom géométrique. L’action de zoomer permet de modifier la principale caractéristique visuelle de l’objet observé : ses dimensions géométriques. Lorsque nous zoomons une photo, nous utilisons le zoom géométrique pour révéler des détails qui étaient présents mais jusque là invisibles à nos yeux.

Ce système est une métaphore du système de zoom utilisé en photographie.

Le zoom géométrique peut trouver d’autres finalités comme adapter la représentation visuelle à l’utilisateur. Nous n’avons pas tous la même acuité visuelle et zoomer/dézoomer peut permettre à l’utilisateur de lire plus confortablement un contenu textuel.

Le Zoom Sémantique
Au-delà du zoom géométrique, il existe d’autres concepts de zoom permettant d’enrichir l’expérience utilisateur. C’est par exemple le cas du zoom sémantique.


Si vous vous demandez à quoi peu bien ressembler concrètement un tel système, il vous suffit de tester l’application GoogleMaps et son layer « Plan ».

 
Visualisation d’un même lieu à différents niveaux de zoom dans Google Maps

Dépassant la simple métaphore du zoom photographique, l’action de zoomer devient une activité de navigation au sein d’une structure multi-niveaux ou multi-échelles.

Bien que l’on puisse le considérer comme une simple application du concept de zoom sémantique, je vous propose également l’idée de ce que j’appelle (faute de mieux) le zoom contextuel. Le zoom contextuel reprend les caractéristiques du zoom sémantique mais avec une intention différente : les données affichées ont pour objectif d’orienter l’utilisateur dans son processus de navigation. Pour reprendre une métaphore cartographique, je dirais que si on considère les données du zoom sémantique comme des lieux géographiques, les données du zoom contextuel deviennent alors les panneaux indicateurs permettant de naviguer entre ces lieux. Les éléments du zoom contextuel apparaissent et disparaissent avant que l’utilisateur soit totalement focalisé sur l’élément de destination. 

Voici  la vidéo d’un prototype réalisé pour illustrer ces concepts. L’application présente un panorama de Paris. Lorsque l’on zoome sur une partie de la ville, des étiquettes apparaissent attirant l’attention sur un lieu, un monument, ...

Pour illustrer la notion de multi-niveaux, observez que lorsque l’on zoome sur le quartier d’affaires de La Défense, une étiquette associée à un premier niveau indique « La Défense ». Si l’on continue à zoomer, cette étiquette disparait pour laisser la place à d’autres étiquettes indiquant le nom de quelques immeubles du quartier.

Si vous disposez d’un écran multitouch et êtes équipés de Win7, vous pouvez tester ce prototype en allant sur cette page. Pour les autres, vous pouvez également tester l'application à l’aide de la souris.
 
Le zoom comme système de navigation dans une représentation multi-niveaux
  Comme nous l’avons vu précédemment, au-delà de la simple métaphore du zoom photographique, le zoom peut être un véritable processus de navigation. Ayant fait ce constat, penchons nous à nouveau sur le zoom géométrique pour voir si nous en avons exploité toutes les possibilités.

Si nous partons du principe que l’action de zoomer est "similaire" à un mouvement de translation selon un axe perpendiculaire au plan d’affichage, pouvons nous exploiter cette "troisième dimension" pour améliorer, par exemple, une activité de visualisation de données ? 

Etudions un cas concret. Voici une représentation visuelle statique de la famille des langues indo-européennes.

Arbre des langues indo-européennes (image wikipedia)

La structure arborescente est présentée dans sa totalité et nous pouvons constater qu’il est difficile :
  • de visualiser simplement la structure globale ou à ses différents niveaux, en raison du volume de données et de la charge visuelle qui en découle,
  • de trouver simplement une entrée au sein de cette structure.
Voici une vidéo présentant un deuxième prototype basé sur une interface multitouch zoomable. Ce prototype s’appuie sur le même jeu de données que l’image précédente et en reprend la même structure.


Vous pouvez tester ce prototype en allant sur cette page.

Les apports de ce type de système sont :
  • qu’il améliore la visualisation de la structure à différents niveaux de zoom.
  • qu’il invite l’utilisateur à explorer le jeu de données en en diminuant la charge visuelle, en faisant apparaître clairement la structure partielle et le contexte de chaque information et en facilitant la navigation au sein de la structure de données.
  • qu’il devient possible d’enrichir la visualisation par des informations additionnelles.

Le pinch résoudra  t’il les problèmes du dérèglement climatique et de la faim dans le monde ?
Le pinch et le zoom sont ils le remède miracle à tous nos maux, enfin au moins pour ce qui concerne la visualisation de données ? Je crains que la réponse soit négative. Comme nous pouvons le constater avec l’exemple précédent, le zoom ne permet pas vraiment de résoudre les difficultés de visualisation de la structure au niveau global. Il ne facilite pas plus l’accès "direct" à une entrée spécifique de la structure. Dans le prototype, cette fonction est assistée par une fonction de filtrage.

Quoi qu’il en soit, ce type de système a beaucoup à nous apporter si nous considérons la recherche d’informations comme un activité ayant deux facettes :
  • un processus discret à 2 temps, de type question/ réponse. C’est sur ce modèle que sont construits nos moteurs de recherche. Dans un environnement informationnel de plus en plus chargé, ce type de solution commence à trouver ses limites.
  • un processus continu, actif, dynamique dans lequel la valeur provient autant du résultat trouvé que de son contexte ou du chemin parcouru pour y accéder. Dans ce schéma, les représentations multi-niveaux accompagnées de dispositifs multitouch ont assurément un grand rôle à jouer.
Le temps du smart pinch est arrivé. Be smart, pinch smart !


----------------------------------------------------------
Summary / Key points
----------------------------------------------------------

  - Pinch gesture and zoom are currently one of the most popular functionality of multitouch systems. The most current use is zooming in multimedia elements like images.
- Beyond this primary use, can we use zooming for more evolved scenario ?
- Zooming in images is a typical example of Geometric Zoom. Geometric Zoom allows to modify main visual characteristic of object : its geometric dimensions. When we zoom in an image we discover visual details which were here but invisible to ours eyes.
- Geometric Zoom is a metaphor of photographic zoom.




 
  
Same place watched with different zoom levels – Google Maps
- Beyond metaphor of photographic zoom, zoom becomes navigation inside a multilevels or multiscales structure.

- Even if we can consider it’s just a special kind of semantic zoom, I propose the idea of Contextual Zoom (can’t find a better word).
- Characteristics of contextual zoom are similar to characteristics of semantic zoom. Goal of contextual zoom is different : data are displayed to help user during navigation process.
- Here’s a video demonstration of a prototype I’ve built to illustrate this concepts.


- When user zooms in panorama, labels appear to show specific locations (historic buildings, …). If user zooms in "La Defense" business area (right side of panorama), label "La Defense" appears. If user zooms in more, this label disappears and is replaced by some others labels indicating buildings located at "La Defense".
- If you own a touchscreen and use Win7, you can try a live demo of this prototype.

- As told before, zoom can be considered as a navigation process. So, let’s see if it can help us to improve our use of geometric zoom.
- Let’s consider zoom as a translation movement, following a third axis, perpendicular to display surface. Can this help us to improve visualization activities ?
- Let’s take a look at this example
 
IndoEuropean languages Tree (image wikipedia)

- We can notice that it’s difficult :
  • to visualize global structure or structure at different levels because of visual load.
  • to find a specific entry in this structure.
- Here’s a video demonstration of a second prototype I’ve built, using same data and structure.


- You can try a live demo of this prototype here.

- Main benefits of this kind of system :
  • It offers a better visualization of structure at different zoom levels.
  • It encourages to explore data structure (lower visual load, better visualization of context and structure at different zoom levels, easy and fast navigation).
  • It’s possible to add further informations without increasing visual load.
- But this kind of system does not help :
  • to get a better view of the whole global structure.
  • to find quickly a specific entry in structure.
- Anyway, this kind of system will help us if we consider search of informations as an activity showing two complementary facets :
  • A two-steps activity (question/answer). Our search engines are built on this model.
  • A continuous, active and dynamic process. Following this model, value comes from answer but also from context of this answer and from path followed to find this answer.
- Era of smart pinch has begun.  Be smart, pinch smart !