Vous avez
une question ?
Un projet ?

Contactez nous !
 

Contactez-nous

Vous avez une question ? un projet ? 
Vous souhaitez plus d'informations sur un produit ? sur notre offre ? 
Contactez-nous, on vous répond sous 4H.

One Page Websites : L’immersion par le scrolling et la parallaxe

L’acte de création commence dès le choix du support. Un peintre décide de travailler sur une feuille de papier ou sur une toile. Un sculpteur choisit de modeler un bloc d’argile. Quelle que soit sa nature, le support donne un cadre, un périmètre, une ou plusieurs dimensions, définissant les frontières du projet auquel on souhaite donner forme.

Sur le Web, on emprunte régulièrement le concept de « toile » pour décrire la manière dont nous autres designers Web procédons pour concevoir des sites Internet. On commence par définir un « canvas », doté d’une dimension et d’une forme.

Sauf que, contrairement au peintre ou au graphiste papier, nous ne sommes pas limités par la hauteur du document sur lequel nous avons choisi de travailler. Une page peut s’étendre sur plus de 10 fois la hauteur de l’écran, donnant ainsi naissance à ce qu’on appelle « site web à une page » (en anglais, one page layout ou one page scrolling).

Cependant, cette tendance, qui favorise le scroll de l’utilisateur, n’est pas adaptée à tous les types de contenus. En effet, le scroll peut très vite devenir fastidieux. Or, rappelons-nous qu’un utilisateur doit savoir en 5 à 7 secondes si l’information qui l’intéresse se trouve sur la page sur laquelle il se trouve. Et gardons à l’esprit qu’une fonctionnalité qui ne fait pas sens vis-à-vis des besoins utilisateurs est une fonctionnalité de trop. Ce n’est pas parce que nous disposons d’une longueur de page quasi illimitée sur le Web, que nous pouvons nous permettre de remplir nos pages Internet avec un tas de trucs sans intérêt.

Voyons alors comment concevoir des sites monopages de manière compréhensible et agréable pour l’utilisateur.

 

One Page Layout

Le one page layout connait déjà depuis 2009 un véritable succès, notamment pour les cartes de visite en ligne ou les portfolios, qui utilisent le scroll de l’utilisateur pour permettre à celui-ci de naviguer à travers un site Internet comme s’il déroulait le fil d’une histoire. Ce type de page est donc particulièrement adapté à des sites retraçant, par exemple, l’histoire d’une marque ou d’un groupe, le parcours professionnel d’une personne…

Notons, cependant, quelques ombres au « tableau » :

 

  • La compatibilité avec les écrans mobiles de petites tailles est assez limitée et l’expérience utilisateur peut vite pâtir d’un excès de scroll.
  • L’unique URL par laquelle on accède au site entrave l’optimisation du référencement naturel.
  • Le temps de chargement peut s’avérer particulièrement long, notamment en présence d’animations et/ou de vidéos occupant toute la largeur de l’écran.
  • Le caractère unique du parcours sur un site en one page peut paraître frustrant et restrictif – pour ne pas dire « abrutissant » – aux yeux des utilisateurs, en particulier chez ceux qui apprécient la liberté de navigation qu’offre le Web.
    • « Trop de scroll tue le scroll » : l’objectif du tunnel de scroll n’est pas de donner des ampoules à l’index de l’utilisateur, de même qu’il ne s’agit pas de susciter en lui un sentiment d’impatience ou de lassitude. Pour éviter cela, il est fortement recommandé d’offrir la possibilité de revenir à tout moment en haut de page à l’aide, par exemple, d’un indicateur de scroll ou encore d’un « sticky menu », qui aura également l’avantage d’optimiser le référencement naturel

                 
      

article blog

          
     

Sticky Menu  

A cette explosion des sites web construits sur une page coïncide l’utilisation accrue du « sticky menu » (en français, menu « collé » à l’écran du navigateur). Ce système de navigation, qui trouve sûrement son origine dans le design de la timeline de Facebook, permet de guider efficacement l’utilisateur lorsque celui-ci est invité à parcourir le contenu d’un site Internet à grands coups de scrolling et, plus récemment, de parallax.

Dans le CSS, la position sticky se traduit par unposition:fixedou encore unposition:absolute, ce qui, avouons-le, ne date pas d’hier. En revanche, ce qui est plus récent, c’est la prise en compte des contraintes liées à la croissance de l’Internet mobile, stimulée par l’apparition d’appareils de plus en plus performants, mais dont l’environnement mobile reste très contraignant (petits écrans, connexions lentes, attention de l’utilisateur partielle).

Capture1
Capture2
Capture3

Parallax Scrolling

Le petit frère du one page scrolling, le parallax scrolling, a fait son apparition avec l’arrivée du site Nike Better World en 2011. Là encore, le scroll de l’utilisateur est utilisé pour lui permettre de vivre l’expérience la plus immersive possible. Mais il s’agit cette fois-ci majoritairement d’un défilement horizontal, hérité du déplacement de calques de décors dans les jeux vidéos en deux dimensions.

Bien que parfois très amusante, cette tendance peut cependant entraver la navigation de l’utilisateur si celui-ci doit effectuer une dizaine de scrolls pour accéder au contenu qu’il recherche.

Capture4

   

Capture5

En conclusion, souvenons nous que le Web échappe à toute conception figée. Tout ce qui se fait un jour sur le Web, peut être défait le lendemain. Car, comme le dit John Allsopp dans « A Dao of Web Design » (Allsopp, 2000), paru il y a maintenant plus d’une dizaine d’années :

Le contrôle que les designers connaissent avec le support imprimé, et aimeraient parfois avoir sur le Web, n’est qu’une fonction des limitations de la page imprimée. Nous devrions accepter le fait que le Web n’impose pas les mêmes contraintes, et concevoir en fonction de cette flexibilité. Mais nous devons d’abord « accepter l’impermanence des choses. »

Un site monopage doit avant tout être un site facilement compréhensible pour les utilisateurs. En tant qu’ergonomes Web, nous conseillons d’employer cette fonctionnalité de manière « intelligente », c’est-à-dire lorsqu’elle correspond à des besoins émanant d’une véritable stratégie de fond, détachée de toutes considérations purement esthétiques. En somme, le one page doit être considéré comme un moyen d’arriver à une fin et non une fin en soi. 

Victoire DOUWES
Auteur de l’article

Victoire DOUWES

Ergonome - Smile Digital

Avis des internautes

comments powered by Disqus