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.


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. Franchement, si c’est que pour faire du buzz, oui c’est bien.

    Ensuite un site doit tout de mĂȘme ĂȘtre constituĂ© de quelques pages avec une hiĂ©rarchie assez claire.

  28. 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.

  29. 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Ă©.

  30. 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

Send this to friend

Lire les articles précédents :
Les smartphones Nokia Lumia 920 et 820 débarquent en France

Nokia a tenu une confĂ©rence de presse aujourd’hui Ă  Paris pour (re)prĂ©senter les nouveaux smartphones sous Windows Phone 8 de...

Fermer