La profondeur de champ de l’écran
Le vétéran du web que je suis a connu la lointaine époque du navigateur Netscape et de sa balise <layer>, qui permettait de créer des calques superposés et imbriqués. Le travail par calque est indispensable aux graphistes dans leur logiciels de création, et il pouvait sembler évident alors de porter cette habitude dans le HTML.
La guerre des navigateurs a eu raison de cette balise et c’est tant mieux : son usage aurait détruit tout effort d’accessibilité et de référencement sémantique !
Pourtant les calques ont leurs avantages, cependant il ne faut pas les penser comme un superposition de couches, mais comme des versions de blocs pouvant être remplacés. C’est ce que permet l’ajax ((asynchronous JavaScript and XML, voir une définition)), une méthode permettant de modifier le contenu d’une zone de la page sans avoir à la rafraichir complètement ou amener le visiteur sur une nouvelle page.
Pour l’utilisateur, la page n’a toujours que deux dimensions, mais le designer doit la penser en 3 dimensions. Pas de la « vraie 3D », mais une superposition d’états différents d’une page.
Tout naturellement un designer est habitué à travailler avec les calques. Voici comment exploiter cette organisation à la conception d’interfaces :
Exemple : interaction riche et transitions
Imaginons un petit moteur de recherche de vins :
Affichons les résultats sur la même page, sans rafraichissement :
Et affichons un article sélectionné à la place des résultats :
3 états, 3 calques ! La profondeur de la page est la suivante :
Attention, cette démonstration sert uniquement d’exemple, j’ignore si c’est utilisable.
Utiliser la profondeur à son avantage
Sur une surface plane statique comme une page web, l’œil est attiré par le mouvement. Un changement d’état crée une animation sur la page, qui va concentrer l’attention de l’utilisateur sur cette zone.
La vision fovéale est limitée à quelques centimètres sur un écran d’ordinateur positionné en moyenne à 50 cm des yeux. La périphérie de cette zone est floue. C’est comme un appareil photo qui fait le point sur le premier plan, avec une faible profondeur de champ :
C’est la même chose sur une interface web. Ici, sur le site motoccasion.biz, la vision est concentrée sur le bouton « ajouter au panier »
La sélection va s’ajouter automatiquement au panier en haut à droite sans rafraichissement de la page. Une petite animation étend le bloc en longueur quand la liste s’allonge. Cette petite animation focalise la vision sur cette zone de la page.
Éviter le banner-blindness
Le « banner blindness » est un réflexe d’économie cognitive bien connu des publicitaires sur le web : certains formats d’images réservés aux publicité sont ignorés par les utilisateurs parce que ce sont des informations inutiles à sa tâche. Nous devenons tous aveugles aux publicités sur le web, au grand dam des régies!
Les animations que vous déclenchez doivent être liées aux actions de l’utilisateur et lui apporter un information utile, sinon il apprendra à les ignorer. C’est d’ailleurs une piste à creuser pour les publicitaires, qui doivent adapter leur stratégie aux contraintes du media web.
