One page design : effet de mode ou réel intérêt ?
Article rédigé par Stéphane Cholet. Directeur technique de l’agence web CLAP40, il accompagne ses clients dans leur stratégie web, mobile, sociales et CRM (acquisition, fidélisation, notoriété… ). Stéphane est également photographe à ses heures, et édite le site bokeh.fr.
Toujours dans un besoin d’étonner, de surprendre et d’enrichir l’expérience utilisateur, le one-page (ou single-page) design (re)fait son apparition. Et ce n’est pas pour déplaire aux internautes, car il faut avouer que certaines pages sont magnifiques. Certaines marques tentent de se distinguer en proposant à leurs visiteurs cette technologie pour proposer un produit, une nouvelle expérience qui leur permettra d’alimenter le buzz.
Les nouvelles technologies au service du one page design
Un site en one-page design est un site construit en une seule page web. A aucun moment le site ne recharge pour afficher un contenu différent. Tous les contenus sont disponibles soit en scrollant verticalement ou horizontalement, ou soit en combinant les 2 dimensions. Il a quelques temps encore, le one page design était surtout réalisé avec la technologie Flash. Aujourd’hui, dans un contexte de plus en plus mobile et donc sans flash, les développeurs tendent à utiliser les nouvelles technologies web comme le javascript combiné au HTML5 et CSS3. Le mix est surprenant. On y découvre avec joie la technologie du parallaxe design associée à différents types de navigation possible : scroll de molette de souris, scroll barre, touches du clavier, bullet point, ou navigation guidée pour découvrir tout le contenu. L’internaute est tenté de découvrir le cheminement du site pour y découvrir le contenu. Pour que la page soit suffisamment intéressante, les marques doivent guider intelligemment les internautes pour leur offrir une navigation, un affichage qui leur offre une nouvelle expérience de navigation.Pour quels usages ?
Dans quel cas les marques auraient elle besoin de construire un site une page ? Selon le type de communication, une marque doit adapter le discours et la présentation à son audience. Dans certains cas, comme le lancement d’un produit, il est nécessaire d’innover, de créer la surprise et d’enrichir l’expérience utilisateur afin de retenir l’attention des internautes.Exemples de one page design
J’ai sélectionné plusieurs pages qui me semblent intéressantes à partager et à comprendre :Valentina Gallo a choisi d’accueillir ses visiteurs avec une photo pleine écran. Il est possible d’accéder aux contenus soit via le menu classique, soit via la molette de la souris (message indiquée en bas de l’écran). La page met en avant la marque, le designer, les produits et d’autres contenus.
http://www.valentinagallo.us
Côté automobile, Cadillac nous propose de découvrir l’ATS à travers différents paysages. Vous pourrez :
- voir évoluer l’auto à Monaco et tester sa « sportivité »,
- partir en Pantagonie pour tester son aérodynamisme,
- vous rendre au Maroc pour son apprécier le comportement du chassis
- ou partir en Chine pour tester ses suspensions.
L’expérience de ces voyages, des images et des vidéos offerts sur cette page donnent envie de voyager et découvrir les capacités de l’auto.
http://ats-vs-world.cadillac.com/#!/monaco
Ballantyne, une marque de vêtement en Cashmire propose de découvrir les produits en photos à travers une navigation déroutante faisant appel au parallaxe design. Tout est mis en œuvre pour emmener l’internaute en bas de page et se retrouver sur la zone de formulaire de contact. Même si elle reste créative, la navigation reste en revanche une des moins intuitive de la série.
http://www.ballantyne.it/
Duluthtrading propose de nous faire découvrir un produit à travers une série d’image animé sur le produit. A l’instar d’une histoire on découvre au fur et à mesure les atouts du pantalon de chantier. Pour chaque slide une pastille rouge apparait sur le côté et propose d’acheter le produit. C’est l’une des plus amusantes et plus pertinentes one-page que j’ai pu visiter. La navigation est claire et invite franchement à utiliser le scroll de la souris. La page donne la possibilité d’utiliser les bullets points sur le côté droit de l’écran. Sans être trop intrusif, le call to action (pastille rouge) répétitif est astucieux. On le voit à chaque slide.
http://www.duluthtrading.com/site/components/last-pants-standing/
Seculus nous invite à découvrir la collection de montres. La navigation proposée est celle de la molette de la souris. Sans faire un seul clic, il est possible de découvrir la gamme entière de façon plutôt surprenante.
http://www.seculuscountry.com.br
Ninali utilise habillement de grandes photos pour mettre en avant le dessin des robes.
http://www.ninali.com.br/
Dans ces exemples on apprécie les photos haute résolution. Elles donnent l’envie d’aller plus loin et de découvrir le contenu. La marque gagne en notoriété. Elle peut même donner l’envie d’acheter, ou de remplir le formulaire de contact toujours bien amené en fin de page. Toujours dans le but de vendre plus, acquérir plus de contact, le one page design pourrait être la nouvelle technique de recrutement via les landing page.
