Je lisais dernièrement une interview à propos d’une solution de passage de site html en 3D, et l’un des arguments – hormis le côté ludique – était d’avoir un espace plus ‘ergonomique’… ergonomique, la 3D ? Lorsqu’un ergonome met à l’épreuve certaines navigations, le résultat n’est parfois pas bien brillant. Cela m’a donné envie de lister les différentes manières de naviguer (attention, pas de représenter) dans un espace en 3D dans un navigateur.

J’ai trié selon 4 critères les systèmes de navigation :

1/ La vue à la première personne = une caméra virtuelle qui se déplace
2/ La scène qui se déplace avec une caméra virtuelle fixe ou aimantée sur un objet
3/ La vue à la 3ème personne où l’on guide un avatar (l’utilisateur), avec une caméra qui suit celui-ci
4/ Les systèmes d’interactions : clic maintenu, utilisation de la roulette, de l’interaction dans un décor en 3D ou avec un menu traditionnel en 2D.

Dans quel espace en 3D j’évolue et pourquoi ?
Et finalement, cela peut se résumer en une question simple : suis-je moi-même la caméra qui évolue dans un contenu ou bien suis-je un acteur fixe qui manipule un objet dans l’espace ? Cette approche dépend aussi du type de contenu que l’on met en avant : s’il s’agit d’un décor complet, je vais guider ma vue comme une caméra, et s’il s’agit d’un ‘petit’ objet (un globe terrestre) je vais le manipuler, ma vue ne change pas. Je vais donc me déplacer dans un grand espace, mais je vais déplacer un petit objet. Il y a toujours des variations… puisque lorsque je regarde un objet dans la réalité, j’ai tendance à pencher la tête… donc déplacement léger de la caméra

Les navigations vont d’un statut passif pour l’utilisateur « je clique et je regarde l’animation » jusqu’à un statut pro-actif : « je clique, je déplace ma souris pour regarder, je cherche l’interaction avec l’objet ». C’est aussi un effort pour l’utilisateur, et l’on pourra se demander jusqu’où cet effort est envisageable.

Les 9 donc :

1 – Navigation grâce au clic sur des flèches dans l’espace
Sans doute la navigation la plus vieille et la plus évidente : l’utilisateur dispose de grandes flèches apparentes directement dans la scène. Il n’a qu’à cliquer dessus pour aller de droite ou de gauche, et changer la vue.
exemple : shopping life et certains panoramiques à 360°

2 – Navigation grâce au clic maintenu dans l’espace pour bouger la caméra
Description : Clic gauche maintenu : rotation autour d’un objet central. Clic droit maintenu : zoom sur l’objet. Deux clics en même temps maintenus : translation de la caméra en haut bas et gauche droite.

Elle correspond à la navigation classique d’une scène 3D… habituellement hors d’un navigateur. Les solutions 3D avec plugins l’utilisent beaucoup, héritage parfois des logiciels de création 3D, mais n’est-elle pas trop ardue à manipuler ?
Exemples : de manière générale, tous les systèmes de 3D par plugin dédié.

3 – Caméra virtuelle aimantée autour d’un objet cliquable (rotation)
Description : c’est sans doute l’une des mises dans l’espace la plus classique dans les sites en flash, qui a du s’inspirer de la navigation précédente en la simplifiant grâce à la prise en compte de la position de la souris dans l’espace. La mise en place technique est facile à réaliser et l’effet saisissant quoique limité.
exemple : L’exemple de la vache ou plus complexe Screenvader, Tiltviewer… etc…

4 – Vue à la 3ème personne et en 3D isométrique
Description : Navigation grâce au clic pointé pour aller là où l’on veut ou avec les flèches du clavier.
La caméra suit l’avatar. La vue rappelle les jeux vidéos, où elle a émergé dans Sim City, ou Populous il y a bien longtemps, la navigation suit ainsi les codes de jeux vidéos.
exemple : yoowalk ou smallworlds

5a – Un menu en 2D évident qui déclenche une animatique 3D
Un type de navigation très utilisé sur les sites en flash et qui permet de ne pas perdre trop l’utilisateur : un menu très clair, qui déclenche une animation ou une transition en 3D sans avoir de menu trop complexe avec des éléments à cliquer dans une perspective impossible.
exemple : Cristof Echard ou Galaxy ou MCBD

5b – L’interaction devient complexe et déclenche une animatique 3D : déplacement caméra + objets dans la scène
L’extension de la navigation précédente, on rajoute à cette navigation un déplacement des éléments en fonction de la position de la souris tout en intégrant dans l’espace des éléments de navigation cliquables. Cela donne un effet de mise en place d’éléments dans l’espace saisissant mais qui peut très vite perdre l’utilisateur dans les interactions possibles.
Exemple : UFC ou EMlab

6 – Parcours imposé de la caméra
Un peu plus difficile à saisir, la caméra qui suit un parcours imposé qui défile en fonction de la souris de la souris ou des éléments sur lesquels on clique. Reste à cliquer sur les éléments du décor.
Exemple : http://www.brinkdieckmann.de ou la campagne absolut Iaaw ou christian lacroix pour la redoute

7 – Changement de position de la caméra
Description : Dès que la caméra bouge en fonction des éléments sur lesquels on clique, le scénario devient plus complexe. Le clic sur le fond devient un moyen de revenir à la position de départ, c’est nouveau.
Exemple : tiltviewer ou Canon

8 – Le glissement pour faire bouger un objet – (caméra fixe + clic maintenu)
Description : à l’ère de la navigation tactile, le clic maintenu semble être une navigation intéressante et très pratique dans certains cas d’utilisation, même si elle ne fait pas parti des codes classiques de navigation. C’est l’inverse de la navigation en 2./ puisque la caméra ne bouge pas. Toutefois, le clic et le survol sont parfois nécessaires.
Exemples :ecodazoo ou twittearth , ou Taggalaxy

9 – Navigation au clavier qui déplace un objet ou la scène
Description : Utilisation des flèches du clavier pour évoluer dans un espace en 3D ou pour faire bouger un objet. Dans le cadre de la visite virtuelle, c’est le challenge le plus difficile à résoudre : comment naviguer autrement qu’au clavier, sans perdre complètement en lisibilité ? La souris reste nécessaire.
Exemples : Ecws.pl ou Playsmart

Finalement…
Là où les interfaces cherchent à standardiser leur comportement, la 3D dans flash provoque des bouleversements de navigation : compréhension du site, retours en arrières, objets réactifs…

Beaucoup utilisent une caméra fixe et déplacent des éléments dans l’espace. Le déplacement de la caméra reste peu utilisé au final, (certains exemples vont jusqu’à être incompréhensibles dans la navigation). Les types d’interaction se multiplient : on peut cliquer sur le fond d’une scène pour revenir au début de sa course (ce qui n’existait pas auparavant), utilisation de la molette, du rollover/clic maintenu et glissé (en html, cela était attribué à un drag & drop, du bouble clic, de la position de la souris… bref, autant de raisons d’avoir une navigation originale que brouillon !

1 commentaire