One page design : effet de mode ou réel intérêt pour les marques ?

Il existe de plus en plus de nouveaux sites web construits sur une page unique, complètement navigable et offrant une nouvelle expérience utilisateur. Quels sont les atouts de ces nouveaux types de pages pour les marques ?

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

valentina gallo

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.


Nos dernières vidéos

35 commentaires

  1. Comité de la Survie des Mollettes de Souris on

    Pitié, laissez nos yeux & molettes tranquilles. Arrêtez le long scroll et la parallaxe !

  2. Je suis d’accord sur le fait que le one page design gagne en visibilité/rapidité d’accès aux informations. mais c’est déjà la « mode » depuis 2011.
    En tous cas, même si on y met moins d’informations c’est une très bonne méthode de sortir des sites « classiques » et ça, cela plait aux clients/visiteurs.

  3. C’est beau, c’est moderne, ça a tout ce qu’il faut, etc.
    Sauf que ça dépend malheureusement trop des performances de la machine :/
    Sur mon portable pas si vieux, ce n’est pas des sites que je peux visiter avec plaisir.

    Tout est saccadé, les éléments apparaissent d’un coup, etc. Ca casse l’effet Wahoo (souvent recherché) 🙁

    Tout ça pour dire…rien en fait 😛 (excepté le fait qu’il est peut être encore trop tôt pour trop se focaliser sur les nouvelles technologies, même si y penser est une bonne chose, selon moi! Apres, ce sont des choix à faire bien entendu)
    En tant que dev, c’est le genre de site qu’on prend plaisir a faire par contre =)

  4. Florian-Puisais
    Florian-Puisais on

    Dur de se positionner en Long tail avec une seule page… C’est donc surtout pour les marques qui ne misent pas sur du SEO, ou du moins uniquement sur leur marque.

  5. Pingback: One page design : effet de mode ou réel intérêt pour les marques ? | [Chiffres clés] Ecommerce | Scoop.it

  6. Li’nteret ne peut etre que possitif, un site qui a son contenue sur une seul page seras favorisé et les liens présent sur le site bénéficie automatique du pagerank de l’index. 😉

  7. Pingback: One page design : effet de mode ou réel intérêt pour les marques ? | Les TPE et Ieur présence sur le Web | Scoop.it

  8. Pingback: One page design : effet de mode ou réel intérêt pour les marques ? | Tendances & Actualités | Scoop.it

  9. Stephane-Cholet

    En terme de SEO, il y a des choses à faire pour que Google crawl plusieurs pages. On peut utiliser la technique un hash dans les urls. Chaque # correspond à chaque partie de la navigation de la page.

  10. Bonjour,

    Personnellement, je ne suis pas amateur pour les raisons suivantes:
    – le temps de chargement est allongé et devient même hallucinant pour certains
    – il n’est pas toujours évident de s’y retrouver
    – au niveau référencement ça ne facilite pas les choses

  11. Pingback: One page design : effet de mode ou réel intérêt pour les marques ? | Communication web professionnelle | Scoop.it

  12. Pingback: One page design : effet de mode ou réel intérêt pour les marques ? | People & Business Management | Scoop.it

  13. C’est bien pour les sites où il n’y a rien à lire, et où on ne fait que regarder les images. La navigation est limitée puisqu’on ne peut revenir en arrière, et il est impossible de donner l’URL d’une partie précise du contenu. Alors pour promouvoir un produit unique, ça va, mais je ne pourrais pas adopter mon site à cette architecture.

    Mais c’est pas nouveau, j’avais déjà fait des sites sur une seule page il y a 12 ans, avec des petits javascripts pour donner du mouvement. Toutes les images étaient en gif pour être légères…

  14. As-ton des retours d’expérience concernant l’ergonomie, les statistiques de navigation etc ?
    Personnellement, je trouve que cela bride la liberté de navigation de l’internaute (particulièrement si le site ne propose pas alternativement un menu classique). La navigation via menu permet au visiteur de choisir exactement où s’orienter, en fonction de ce qu’il recherche.
    Finalement, ces design sont utilisés pour certains types de sites (les designers aiment bien ça d’ailleurs… mais aussi le luxe, la mode…) mais en dehors de ces créneaux en particulier, je n’y crois pas trop.

  15. Pingback: One page design : effet de mode ou réel intérêt pour les marques ? | Veille systo | Scoop.it

  16. Pingback: One page design : effet de mode ou réel intérêt pour les marques ? | Web & Media | Scoop.it

  17. Stephane-Cholet

    Le bouton back du navigateur ne doit jamais être utilisé si le site est correctement construit. Et comme je le mentionnais plus haut, il est tout à fait possible de donner une url sur une partie de la page avec le hash.

  18. C’est beau mais inutilisable j’ai visité le premier site, que j’ai trouvé fun, par contre je suis incapable de vous dire le sujet du site. La seule chose dont je me souviens est une paire de chaussure rouge… Le deuxième site m’a infligé un mal de crâne qui m’a fait quitter le site au bout de 3 images de fond différentes, je ne me rappel plus du thème non plus tellement je subissait la parallaxe.
    @Stephane-Cholet : En terme SEO cela ne vaut absolument rien, il ne suffit pas de faire croire qu’il y a plusieurs page pour obtenir un positionnement… De plus Google est capable de reconnaitre une ancre de page… Je rajouterais que le bouton « back » du navigateur est une habitude de navigation et pas seulement la démonstration d’une mauvaise navigation, personnellement je l’utilise même s’il y a un fil d’Ariane ou un bouton de retour sur le site… Donc pour résumer c’est beau et c’est tout…

  19. Je pense que ça a aussi un réel intérêt utilisateur, et pas seulement de communication. En effet le scroll permet de captiver le client sur une certaine durée ( ou plutôt longueur) un clic multiplie les risques de faire sortir le client du processus d’achat. Du coup de mon point de vue ce n’est pas simplement une tendance  » à la mode » que l’on peut limiter à de « jolies » marques ou à des fins de communication, mais ça peut apporter un réel intérêt pour le client final quelque soit l’industrie. Je rejoins en revanche l’idée que c’est plutôt à utiliser pour présenter quelque chose d’innovant: le client/utilisateur peut comprendre le contenu de l’offre en une seule vue avec 0 clics. Un bel exemple de réalisation de mon point de vue: http://www.simple.com (A regarder sur PC, pas sur tablette).

  20. Franchement le temps de chargement est insoutenable alors imaginez adapter ça pour mobile avec du responsive design… C’est du grand n’importe quoi ce one page design.

  21. J’ai l’habitude d’utiliser le bouton droit du navigateur pour « ouvrir dans une nouvelle fenetre ». Je consulte presse-citron comme cela, je déroule toute la home, et j’ouvre les multiples articles qui m’intéressent. J’ai l’habitude surfer comme cela, et je n’apprécie pas un site qui me demande de changer mes habitudes, mais ce ne serait pas le cas ici puisque ces différents ne donnent pas envie d’y revenir. Ce n’est marrant qu’une fois.

  22. Le concept est sympa si il reste pour des occasions, site éphémère.
    Le manque de hiérarchisation de l’information est problématique et effectivement pour la partie SEO, un des critères poussé actuellement est la rapidité de chargement, pour le coup c’est plutôt la loose 😉 Toutefois pour le Sitemap, ça sera à la porté de tous !

  23. Pingback: One page design : effet de mode ou réel intérêt pour les marques ? | Le Responsive web design | Scoop.it

  24. Pingback: One page design : effet de mode ou réel intérêt pour les marques ? | Quand la communication passe au web | Scoop.it

  25. Stephane-Cholet

    @Faerieweb. Je pense que ces site ont une réelle vocation pour présenter un produit luxueux ou pas. La navigation, si elle est bien pensée, peut se faire via la molette de souris, le clavier, les bullets points sur la droite, la navigation classique. C’est en cela que l’expérience utilisateur est enrichie. Je ne pense pas que cela bride l’internaute. Bien au contraire.

    De manière générale, je ne pense pas qu’il faut voir ce type de page comme une alternative au site classique mais plutôt une façon de présenter une marque, un produit.

  26. Pas grave ce e pense Google ici sa n’a aucune importance s i celui qui devellope ce type de page pour une parque un site perso particulier un espcae precis . car ici ce qui est réellement mis en avant c’est l’experience utilisateur . Comment avec du css html5 une pincée de script on arrive avoir une nouvelle experience utilisateur sans alourdir le contenu le design en terme de chargement sans que l’utilisateur lui meme ai l’eefet retour de la lourdeur ( temp de chargement d’une page aune autre, rechargment de page) sous reserve biensur que le code soit optimisé par le devellopeur . Je ense que ici ce sont soit des site Covers donc amener a a changer de design pour mettre autre chose en avant d’une autre facon.. ou des site ayant pour réel envoe d’offrir une nouvelle perormance dans l’itilisation un nouveau plaisir a l’utilisateur lui donnat de nouveau acces beauté easy use fun et legereté. Le souci est que effectivement le modele peut vite devenir repetitif … si ceux qui se lance sur ce chemin ne sont pas doué d’imagination .. je trouve que c’est une autre facon d’apprehender le Web asurveiller qui deviendra un standard pour les expo temporaire de produit ou vitrine, et Si on arrive a trouver la bonne formule il pourra s’integrer dans les autres type de site avec parcimonie …

    souvenez vous il ya quelques années tout site digne de se nom s’ouvrait avec une animation flash bien lourde avec des effets aujourdhui on veut les effets intenet et les machine ppouvant supporter ces lourdeur mais on abandonne cette formule parceque internet va vite, le web est bourré de site de tout et de rien ( plein d’information) la societé nous invite a surfer pour tout on vie periode « zap before borring » et ne peux accepter davoir Free un pc neuf et ramer sur internet .. donc il aut toujours faire alecchant accrochant et leger pour l’itilisateur .. d’autre part si sa peut alleger le Web lui meme alors tant mieux .. Bref a utiliser pas par effet de mode mais avec parcimonie et surtout sens de la creativité.

  27. Merci pour cet article. Je trouve que ces nouvelles approches de webdesign sont intéressantes pour mettre en valeur une marque ou un produit. C’est clair que l’ergonomie ne sera pas adaptée pour diffuser un contenu, et par conséquent la problématique du SEO/Long Tail se pose moins. L’idée est davantage de créer un effet de surprise, installer une identité de marque et une posture d’innovation. Par conséquent, cette approche a plus un objectif marketing que purement web et ne s’adaptera pas à tous les projets (événementiels ou non), tous les produits.

  28. La navigation est très agréable sur ce genre de sites. Par contre au niveau du référencement on n’a plus qu’une page à positionner. Difficile donc d’être performant sur plusieurs requêtes…
    Ce serait donc plus adapté à un site événementiel ou pour le lancement d’un produit, d’une promo que pour représenter une société.

  29. moi je reste partagé sur ces choix …

    par exemple sur le site en lien (cf pseudo), le client a retenu un design single page mais pour palier les conséquences liées au référencement nous avons du mettre en place des sites complémentaires …

    d’une part pour épurer les informations, d’autre part pour le référencement …

    GG dit qu’ils ont pris en compte ce facteur, mais ce n’est pas l’expérience que nous avons vecu !
    Heureusement que nous avons anticipé !

    Bref, très beau, ergonomique mais trop complexe pour le SEO

    Les grandes marques peuvent se le permettre, les petits ne pourront pas à cause des moyens à developper en parallèle !

    Seb

Répondre