OnePager


Les sites OnePage sont des sites web constitués d’un seul document HTML. Ils visent à représenter les contenus sur une seule page. La navigation fonctionne avec des liens ancrés et ce qu’on appelle le Parallax Scrolling ou défilement parallaxe : les utilisateurs peuvent "scroller" c’est-à-dire faire défiler le contenu ou accéder aux sections en question en cliquant sur des liens ancrés pour pouvoir consulter les contenus n’étant pas affichés au-dessus du pli. Le sites OnePage sont souvent appelés Single-Page-Application ou applications web monopage, en particulier lorsque sont utilisés des éléments interactifs, des animations et des effets CSS ainsi que le déploiement dynamique des contenus. Les sites OnePage peuvent créer une expérience utilisateur cohérente et interactive du fait que le design web complète du point de vue technique le Storytelling et qu’ils profitent des possibilités qu’offrent les technologies web comme le HTML5, le CSS et les différents langages script.

Informations générales sur le sujet

Les sites web composés uniquement d’un document HTML se différencient beaucoup des pages d'accueil classiques, notamment par leur infrastructure avec des sous-pages – concept également connu sous le nom de Multi-Page-Application. Tandis que les pages web Multi-Page structurent les contenus en utilisant des sous-pages, pour les OnePage, cela se fait avec des sections et des évènements. Les sections peuvent être comparées à des chapitres de livre. Les utilisateurs découvrent les sections en faisant défiler la page. Il est également possible d’utiliser des ancres fonctionnant comme des hyperlinks classiques et qui dirigent les utilisateurs directement vers les contenus qui les intéressent.

Les web designers peuvent de plus anticiper des évènements qui influenceront le comportement face à l’application web. Des éléments, animations et effets graphiques peuvent ainsi être intégrés pour pouvoir contribuer à l’expérience utilisateur. Un clic sur une flèche dirige par exemple l’utilisateur vers le paragraphe suivant, là où des éléments graphiques accompagnent la structure narrative.

Les OnePage permettent non seulement une architecture du côté des clients mais également la réduction de la communication client-serveur : à l’aide de Frameworks JavaScript comme Angular, Ember ou Backbone, du transfert asynchrone de données avec AJAX, de protocoles comme Websockets ou de plugins de navigateurs tels que Silverlight, Flash ou Java Applets, il est possible de développer des applications web interactives. Ces applications ou Rich Internet Applications ne nécessitent pas toujours un échange de données entre client et serveur, si bien que pour certains évènements ou des états définis du site web, il sera possible de diriger le comportement de l’utilisation du web et d’afficher les contenus de manière dynamique. Cela conduit, à condition d’une mise en place appropriée, à une utilisabilité améliorée et cela peut également influencer la performance de sites web.

Fonctionnalité

Les sites web OnePage sont censés proposer une expérience utilisateur cohérente, et ceci en suivant des principes directeurs présentés ci-dessous :

  • Parallax Scrolling ou défilement parallaxe : lorsqu’un utilisateur fait défiler un site web, certains niveaux du site web sont alors en mouvement à des vitesses différentes. C’est ainsi que se crée une impression de profondeur. En faisant défiler la page, l’image en arrière-plan bouge par exemple plus lentement que les contenus mis au centre de la perception via l’interaction des utilisateurs.
  • Flat Design : Flat Design ou design plat est un principe de conception minimaliste mettant la fonctionnalité de l’application en avant et renonçant aux décorations visuelles, aux textures ou aux éléments, comme par exemple les ombres. Les avantages sont plus de visibilité, une concentration accrue sur le contenu des sites web ou encore une amélioration des caractéristiques de performance (par exemple du temps de chargement). Les utilisateurs peuvent de plus être amenés plus facilement à agir si un call-to-action est associé afin d’améliorer le nombre de conversions. Les conditions préalables à cela sont cependant la présence d’éléments de Call-to-Action visibles ainsi qu’une implémentation technique correcte.
  • Interactivité : les sites web OnePage et les applications web Monopage peuvent promouvoir l’engagement des clients via l’intégration de scripts, d’animations et d’autres effets. Les utilisateurs peuvent naviguer dans le document HTML et se servir du site web à l’aide de différentes actions. En faisant défiler le site, des éléments graphiques peuvent encourager le "Storytelling" et diriger l’utilisateur vers le bouton Call-to-action. Un clic sur des éléments sélectionnés permet la présentation de certaines informations, si bien que l’interaction entre l’utilisateur et le site web mène à ce que l’on appelle le Joy of Use. La logique de présentation des sites web OnePage est généralement conçue de manière à faire accroître l’interaction.
  • Storytelling : les possibilités techniques des sites web OnePage facilitent d’une certaine façon le storytelling. L’ensemble des contenus étant représenté sur une page HTML, l’utilisateur a alors l’impression qu’il s’agit d’informations portant sur le même contenu.

Des informations peuvent alors être présentées de telle sorte que l’on puisse reconnaître un fil conducteur et que le message arrive aux utilisateurs sans détour. Les utilisateurs se baladent littéralement à travers l’histoire du site web à l’aide des éléments interactifs et du défilement parallaxe. Le site dirige l’utilisateur et attire son attention sur les informations centrales. L’utilisateur est souvent incité à faire une action comme remplir un formulaire de contact ou commander un produit.

Dans la pratique

Les sites web One-Page ne conviennent pas à tout type de site web. On conseille par exemple aux boutiques en ligne de proposer plusieurs niveaux de contenus afin de pouvoir présenter des produits de différentes catégories. Les sites web thématisant de nombreux sujets différents ont plus intérêt à utiliser les concepts Multi-Page afin de couvrir différents contenus et sujets. Les OnePage conviennent uniquement à des thèmes clairement différenciables ainsi qu’à une quantité limitée d’informations. Par exemple :

  • Des campagnes de publicité
  • Des lancements de produits
  • Des évènements et projets
  • Des cartes de visite en ligne pour les freelances, professions libérales et les petites entreprises
  • Des landing pages pour des produits et services

Selon le scénario d’utilisation, les idées concernant le design, l’interactivité et le storytelling peuvent être différentes. Les réflexions fondamentales de stratégie et de conception devraient par conséquent s’inspirer des contenus à présenter : comment représenter les contenus de manière efficace afin que les utilisateurs effectuent une action souhaitée ? Dans ce contexte, implémentation de contenu et implémentation technique peuvent être complémentaires. Il est de plus recommandé de faire appel au responsive design ou design adaptatif afin de rendre les contenus accessibles à différents terminaux mobiles.

Signification pour le marketing en ligne

A l’instar des sites web classiques, les OnePage nécessitent également un respect d’un grand nombre de directives SEO et de conseils différents. Les OnePage se distinguent par un sujet clairement défini. Cette délimitation a pour conséquence que certains aspects sémantiques doivent être mis de côté dès le départ. Les OnePage sont ainsi en général optimisés pour seulement quelques mots clés : les mots-clés moyenne et longue traîne ne peuvent souvent pas être couverts. Tous les contenus doivent cependant être accessibles pour le déroulement. Navigation et accessibilité doivent également être présentes, comme pour tous les autres projets web.

La longueur des contenus est également importante : le storytelling fonctionne seulement si l’utilisateur n’est pas surchargé de contenus. Les contenus doivent être eux-mêmes correctement structurés en utilisant le HTML5 et les sélecteurs CSS. Les contenus peuvent par exemple être structurés via des en-têtes et des sections et être nommés avec des sélecteurs CSS et des tags. On discute encore dans le domaine du SEO de l’utilisation de plusieurs en-têtes H1. Certains développeurs conseillent de les utiliser pour les OnePager. Il en va de même pour les ancres : elles doivent être définies de manière claire afin que les robots d’exploration aussi bien que les utilisateurs sachent où mènent les liens ancrés.

Lorsque que les applications web monopage sont bien mises en place, elles peuvent même éventuellement faire augmenter quelques KPI : durée de visite, interaction avec l’utilisateur ou le comportement de défilement par exemple. La condition pour cela est toutefois selon Google une mise en place adéquate : le succès des applications web monopage dépend du sujet, du design et de l’implémentation générale. Avec JavaScript et les effets CSS, les crawlers de Google ne devraient à présent plus rencontrer de problèmes, déclare Matt Cutts. Il conseille toutefois de procéder à des tests approfondis avant de publier en ligne un site web OnePage et quand un site web multipage est promu.

Liens web

Récupérée de « https://fr.ryte.com/wiki/index.php?title=OnePager&oldid=3610 »

Category