Ces derniers temps, surfer sur le web prend parfois des allures de voyage intergalactique. Les utilisateurs parcourent des distances de souris (et de trackpad) assez impressionnantes pour venir à bout de sites “one page”. Les start-up ou agence de design sont particulièrement friandes du scroll au kilomètre. Pourquoi cette nouvelle logique ergonomique est-elle aussi présente ? Quels sont ses impacts sur l’expérience utilisateur ? Et peut-on y voir plus qu’une simple tendance ?

 

Un site one page se constitue d’une unique page (et unique URL) regroupant l’ensemble du contenu habituellement réparti en plusieurs pages. Bien souvent, plusieurs thématiques aux objectifs précis sont déroulées les unes après les autres et différenciées graphiquement par de larges bandes de couleurs ou des séparations. Il est possible de renforcer cette segmentation – techniquement et ergonomiquement – par l’usage d’un scroll amorti menant naturellement à “l’écran” suivant.

 

Le scroll, un bon allié du marketing

L’avantage principal des one pages se situe avant tout dans la maîtrise marketing de l’expérience utilisateur. Ce principe ergonomique offre des réponses abordables à des problématiques web bien connues.

Il permet notamment de :

  • Induire un point d’entrée précis. La page d’arrivée de l’utilisateur est forcément connue.
  • Contrôler simplement le sens de lecture et l’ordre des informations. Dans le cas d’un scroll amorti (stop automatique au début de chaque section), l’expérience est entièrement contrôlée et se rapproche alors fortement du déroulé d’un diaporama animé (présentation Powerpoint).
  • Mettre en place une narration forte et continue. Le scroll en continue crée un effet tunnel idéal pour mener voire hypnotiser l’utilisateur si le contenu s’avère suffisamment captivant. Il est d’ailleurs très utilisé pour créer des expériences et sites concept voire même des sites jeux.
  • Améliorer le taux de conversion. Une page unique laisse peu de portes de sortie et l’utilisateur est de fait naturellement poussé vers les boutons d’actions. Seuls éléments cliquables, ils se retrouvent extrêmement bien mis en avant ce qui renforce le passage à l’acte (achat, inscription…)


A noter, toutefois, quelques inconvénients :

  • la compatibilité sur petit écran (mobile notamment) reste limitée et l’expérience entachée par trop de scroll
  • le référencement naturel n’est pas optimal car le site n’existe que via une seule URL
  • le temps de chargement peut être long surtout s’il y a des animations ou images/vidéos en plein écran

Une one page permet donc d’induire un parcours utilisateur en restreignant finalement son contenu et ses interactions. Le marketing semble gagnant dans ce contrôle, mais qu’en est-il pour l’utilisateur ?

 

L’impact coté utilisateur

Cette typologie de site web apparaît comme facilement compréhensible par l’utilisateur. Le parcours crée une prise en main simple et guidée. De part sa taille réduite, un site one page s’accompagne bien souvent d’une volonté d’épurer l’ensemble et de simplifier le contenu. Le fameux “Less is more” du designer s’avère une fois de plus efficace dans l’interface homme machine.
De plus, aujourd’hui, le scroll est un mouvement naturel, bien connu des utilisateurs et moins perturbant qu’une armée de bouton et d’onglet.

En revanche, l’effet tunnel au delà de l’aspect guidant peut être perçu différemment par l’utilisateur. Le parcours unique du one page a quelque chose de restrictif, il peut notamment avoir un coté “abrutissant” si les écrans sont trop répétitifs, basiques ou bien trop limités en terme de possibilité. En effet, le web propose habituellement une infinité d’interactions et de choix. Les utilisateurs, surtout les plus expérimentés, ont l’habitude et apprécient à mon sens cette liberté de navigation.

L’autre point noir se trouve dans l’impact visuel. Bien souvent, cette logique de navigation elle tellement forte qu’elle incite à des habillages graphiques semblables et ce type de sites web se ressemblent alors étrangement. Ce manque d’identité risque de perdre ou lasser l’utilisateur et de réduire l’image de marque.

 

Quelques bons exemples de One Page

aquatilis Capture d’écran 2014-07-04 à 14.36.13

 

sortieenmer Capture d’écran 2014-07-04 à 17.16.15

1. Aquatilis – Expérience et exploration sous marine
2. Drinkkoa – Lancement de produit unique
3. Sortie en mer – Un jeux pour la prévention des accidents en mer
4. Fluger design – Sur le même principe mais à l’horizontale

 

Comment réussir sa One Page ?

Cette méthode de conception semble être une réponse intéressante à de nombreuses problématiques marketing et ergonomiques du web moderne. Cependant, il ne faut pas passer à coté de certaines spécificités ergonomiques qui, à défaut, pourraient rapidement ruiner tous les bénéfices en terme d’expérience utilisateur. L’attention doit particulièrement se porter sur la navigation.

Voici quelques conseils et exemples :

  • Si la page est lourde, il est préférable de prévoir un loader pour informer et ne pas décourager l’utilisateur.
  • Il est préférable d’indiquer clairement que la navigation se fait en scrollant via un picto, une flèche…
  • Conserver un menu classique en alternative au scroll permet de se repérer et de retrouver rapidement une information. Celui-ci doit impérativement être persistant
  • Techniquement, le scroll nécessite un bon développement en matière de sensibilité, au risque de ne pas avoir le temps de lire un contenu qui défilerait trop vite.
  • Scroller longtemps sans savoir où et quand se situe l’arrivée s’avère rapidement agaçant. Des repères d’avancement sont indispensables si l’on ne veut pas au contraire perdre l’utilisateur.

 

De bons exemples de navigation :

dioraddict discovershadow

Dior Addict – menu s’affiche au survol des points d’avancementDiscover Shadow (Application mobile) – menu couplé à des points d’avancement, titre de chaque étape survol

 

Et aussi des contres exemples :

Capture d’écran 2014-07-04 à 17.29.17

Custom Software : Aucun menu ni points d’avancement et un scroll infini (en boucle) assez agaçant et complètement perturbant pour l’utilisateur.

Capture d’écran 2014-07-04 à 17.30.54

 
 

L’odyssée de Py : Un site pourtant multi primé mais présentant un contenu très conséquent sans facilité la navigation puisqu’il n’y a ni menu ni repères. Les animations bien gérées sont cependant trop nombreuses et fatigantes à mon sens. Et on peut aussi parler des titres de section qui ressemblent à des boutons. Voici l’exemple d’une expérience trop fermée et un peu étouffante.

 

Une solution simple pour les petits projets

D’une part, il paraît évident que les sites “one page” ne peuvent pas être une solution type. Ne serait-ce parce qu’il est inefficace de vouloir à tout prix regrouper un contenu riche et varié dans une seule page, au risque que l’utilisateur n’arrive jamais au bout.

Cependant, et au delà de la tendance évidente, cette morphologie de site présente de nombreux avantages qui expliquent sans doute leur profusion sur la toile. Elle apporte de réelles réponses à des problématiques marketing et dans le contrôle exercé sur le visiteur sans non plus tomber dans le dark design.
Dans des cas très simples, il s’avère particulièrement efficace de s’affranchir de la lourdeur d’une arborescence complexe mais également du temps de conception qui en découle. Les sites One Page se prêtent donc très bien à des contenus concis et spécifiques : lancements de produits uniques tels que des applications, livres audio, projets de start-up… Certains l’ont bien compris, les CMS (wordpress, squarespace…) font déjà profiter leurs clients des avantages de mise en oeuvre de cette méthode de conception. On observe même le lancement de nouveaux outils encore plus spécifiques : pour exemple le blog d’inspiration Design Modo et son template one page Star Up ou encore le projet Lander.

La tendance va t’elle durer ? A quand une nouvelle ergonomie qui relayera celle-ci dans le placard des vieilleries ? En tout cas cette typologie de site web semble déjà inspirer une nouvelle tendance au concept similaire (à moins que ce ne soit l’inverse ?!) : la longue landing page, elle aussi adepte du scroll au kilomètre. Préparez vous à scroller encore un moment !