L’axe Z, l’inconnu omniprésent


User Experience

Vous l’avez déjà vu mais vous ne le connaissez pas.
L’axe Z est invisible, il s’annonce en douceur : c’est le Gatsby de l’ UX. Une petite main du web design qui vous permet d’apprécier vos navigations sur les meilleurs sites du moment. Mais qu’est-ce que l’axe Z, au juste ?

Quelques bases pour commencer.

Qui dit “axe Z” dit axes X et Y.
Grâce à ces axes, on peut ainsi déterminer la position d’un point p dans l’espace. En d’autres termes, c’est grâce à ces trois axes que nous pouvons parler de la notion de 3D.

 L’axe Z, l’inconnu omniprésent

Ces dernières années, nous avons été témoins de l’essor du flat design au détriment du Skeuomorphisme (nous avions déjà traité le sujet ici).

Mais cela ne veut pas dire pour autant que nous nous dirigeons vers l’instauration d’un design plat (flat) en 2D, bien au contraire ! Les interfaces incorporent de plus en plus de profondeur par le biais de l’axe Z. On pourrait donc penser qu’il s’agit d’une des tendances du moment qu’est l’utilisation de l’effet parallaxe, ou du parallax scrolling.

Pour rappel, le parallax est un défilement différentiel qui consiste à donner une impression de profondeur à travers des portions de décors qui défilent à des vitesses variables (nous l’utilisons sur la homepage de DISKO par exemple ).

Mais non ! L’utilisation de l’axe Z va bien au delà du parallax.

 

Alors quel est l’intérêt de l’axe Z ?

Lorsque ces effets sont bien mis en place, ils peuvent offrir de véritables effets 3D à l’utilisateur, et créent un véritable lien entre les interactions et les éléments. Il suffit “juste” de placer certains éléments non utilisés en arrière-plan et de placer les éléments actifs en avant-plan.

Mis à part le fait que visuellement et intuitivement, l’usage du design par l’axe Z améliore l’interface utilisateur, il aide surtout les designers à résoudre des problèmes. En effet placer les éléments sur différents “layers” est une excellente solution pour des interfaces qui requièrent une UX délicate.

 L’axe Z, l’inconnu omniprésent

Quelques exemple

1-  Site web du réalisateur Manuel Rueda

http://www.manuel-rueda.com
Un bel exemple d’animation en 3D sur l’axe Z. Au fur et à mesure que vous scrollez, les vidéos du book de Manuel Rueda se mettent littéralement en avant en sortant des profondeurs.

2- Site de l’agence canadienne Tehan + Lax:

http://www.teehanlax.com
Le menu principal du site est invisible à première vue, mais en le déclenchant grâce au push menu, une couche entière recouvre la totalité du site avec un contenu riche en liens et rubriques. Grâce à une animation efficace, l’utilisateur est séduit par cet outil qui est à priori le plus important, mais qu’ici l’agence canadienne a décidé de cacher pour permettre à l’utilisateur de le déployer à sa guise le long de son voyage. Il s’agit bien d’une couche qui couvre le reste des couches apparentes du site.

3- Janelle Monáe sur le site Pitchfork

http://pitchfork.com/features/cover-story/reader/janelle-monae/
Pitchfork met le parallax dans une nouvelle dimension avec son dossier sur Janelle Monáe, interprète de soul music américaine.
Au fur et à mesure que vous scrollez vous verrez comment différentes couches s’empilent pour donner une véritable impression de profondeur, avec de nouveaux textes, des fleurs, et même parfois des larmes sur le visage de la chanteuse. Un parallax amélioré.

4- Les sidebars d’applications

Un autre exemple de l’utilisation actuelle de l’axe Z se trouve dans les applications comme Gmail, Facebook, Spotify et même Tinder ! Au même titre que le menu pour le site de Tehan + Lax, la sidebar sur Gmail apparaît grâce à un simple glissement de doigt.

 

 L’axe Z, l’inconnu omniprésent

Enfin,  n’oublions pas la mise en place des éléments ! L’élément essentiel pour que le design web en axe Z puisse être applicable repose sur la transition entre les différentes couches. Sans cet élément essentiel, l’utilisateur pourrait ne pas apprécier la navigation ou se sentir perdu.

Nous pouvons désormais imaginer ce qui nous attend dans les années à venir. Les avancées pourraient nous permettre d’avoir des interfaces holographiques ou de gérer les machines avec nos gestes et avec notre voix, comme par exemple dans Minority Report, Oblivion, ou le dernier film de Spike Jonze, Her.

Maintenant que vous connaissez l’existence de l’axe Z, à vous de le repérer dans vos sites préférés !

Laisser un commentaire