banner ad

Navigation horizontale : une nouvelle alternative graphique à l’ère du tout-mobile ?

| 23 novembre 2012 | 4 Commentaires

Ces derniers mois ont vu naître de nombreux sites web à navigation horizontale, à la manière de MySpace ou de USA Today.

C’est grâce à l’évolution des portfolios, des sites personnalisés et des désirs d’innovation des webdesigners que la navigation horizontale est née. Les sites utilisant cette variation graphique se multiplient et offrent des nouvelles alternatives au design.

Souvent considérés comme une aberration d’un point de vue ergonomique, ces sites offrent sans conteste une grande liberté artistique et surtout correspondent à une nouvelle habitude de lecture des internautes devenus mobinautes.

Pour mieux comprendre ce phénomène, laissez-nous répondre à trois questions afin d’appréhender la navigation horizontale et comprendre que finalement elle n’est pas si inhabituelle que ça …

1/ Qu’est ce que la navigation horizontale ?

Le design d’un site internet peut permettre à l’internaute de « scroller » – faire défiler – sa page internet, généralement dans le sens vertical. Comme son nom l’indique, pour la navigation horizontale, le principe est inversé et le scroll devient alors de gauche à droite ou de droite à gauche.

2/ Comment le scroll horizontal est-il arrivé sur nos écrans ?

Par pure logique. L’ère du mobinaute et du multi-device connecté à Internet est arrivé à maturité. Or, il faut s’adapter aux nouvelles habitudes des utilisateurs. Avec 19 millions de mobinautes en France dont 75% disposant d’une connexion internet illimitée, selon une étude Dagobert (sans compter le nombre de tablettes tactiles connectés) les sites internet ont dû se plier aux nouvelles contraintes de connexion, format et rapidité inclus.

De plus, les systèmes d’exploitation des smartphones et tablettes sont basés sur un graphisme et une fluidité tant verticales qu’horizontales.
image2

Alors même si la navigation horizontale était déjà effective avant l’essor du responsive design et du tout-mobile, nous pouvons aujourd’hui nous reposer les bonnes questions  en prenant en compte ce nouvel insight.

L’indétrônable domination de la navigation verticale

En se penchant bien sur la problématique, la navigation horizontale répond à notre mécanisme naturel d’écriture et de lecture occidentales. Il serait donc plus logique qu’à l’avenir les webdesigners optent pour un tel mécanisme.

De nombreux débats existent à ce sujet. Ce dont nous sommes certains est de la prédominance des sites à navigation verticales depuis la naissance d’Internet. Preuve en est, la configuration de la plupart des souris a été pensée pour un scroll de haut en bas (ou de bas en haut).

Mais comme tout usage il est possible d’en changer. Rappelez-vous. Durant les cinq premières années d’Internet, il n’était pas du tout possible de scroller sur une page. Les internautes pouvaient simplement choisir de rester ou non sur une page. La vraie question est donc de savoir si vous êtes prêts ou non à bousculer les habitudes de vos visiteurs pour leur faire vivre une expérience nouvelle ? Le meilleur conseil à vous donner est celui de tester cette navigation sur une version bêta pour sonder les réactions de votre communauté.

3/ Quels sites utilisent la navigation horizontale et pourquoi ?

Le scroll horizontal dénote donc de notre façon habituelle de suivre un site et apporte une touche plus interactive puisque plus novatrice dans le monde du digital.
Très en vogue pour les portfolios, de nombreux artistes utilisent cette fonctionnalité pour présenter leurs travaux.

Malgré l’attractivité associée à ce genre de navigation, il ne faut pas négliger certaines “règles”.

Au premier abord, ce type de navigation semble davantage convenir à des sites aux contenus épurés, artistiques, dont l’utilisation est plus graphique et ludique. Ainsi, les sites à nombreuses rubriques peuvent gêner l’internaute et lui fournir beaucoup trop d’informations pour une utilisation inhabituelle d’un tel design.

Un parfait contre-exemple est le site américain d’informations en ligne, USA Today, qui malgré l’importance accordée aux contenus, a choisi une navigation hybride très proche d’une application mobile lors de la refonte de son site Internet.

USA Today ancienne version

usa-today

USA Today nouvelle version

usa-today-new-homepage

Pensez à la lisibilité de votre site

Alors avant de se lancer dans la conception d’un site horizontal, mieux vaut concentrer tous ses efforts et sa créativité sur l’utilisateur et son chemin de navigation pour ne pas rendre l’expérience désagréable. Les sites horizontaux demandent une certaine réflexion en amont quant à l’ergonomie du site et à son zoning pour ne pas perdre en lisibilité. Alors mieux vaut savoir maîtriser la technologie.

A titre d’exemple, le site de Gavin Castleton, un compositeur et producteur américain, est très intéressant d’un point de vue artistique, mais son manque de fluidité gène la lecture de l’information.

gavincastleton

Pour vous inspirer, voici une liste de sites à navigation horizontale réussie.

MaidStoneDrivingLessons
maidstonedriving

Design Influence
designinfluence

Vitamins Kids
vitaminskid

Le point éphémère
pointephemere

Article écrit par Julien Mechin, Fondateur de l’agence Creads.

Creads est une agence d’un nouveau genre, spécialisée dans le domaine du participatif, qui rassemble plus de 40 000 designers du monde entier pour la création de marque et d’identité visuelle sur www.creads.org. En 4 ans, la start-up a déjà attiré de nombreuses grandes marques : SNCF, E.Leclerc, Bouygues Construction …

Tags: ,

Catégorie: E-marketing

Au sujet de l'auteur ()

Ce billet est écrit par un rédacteur invité. Vous pouvez consulter plus d'informations à son sujet à la fin de ce billet. Si vous souhaitez devenir rédacteur invité, merci de visiter la page correspondante : Devenez rédacteur.

Commentaires (4)

URL de rétrolien | Flux RSS des commentaires

  1. Bérengère dit :

    Bonjour,
    Pourquoi un tel engouement pour l’horizontal ? … Pourquoi tout ce bruit pour quelque chose qui n’est que purement commercial ?
    Une grosse boite décide de faire un truc et hop tout le monde se jette dessus en disant que c’est le « truc le plus fabuleux du moment qui va révolutionner le monde web » …
    Pfff … franchement, pensez-vous qu’un simple geste puisse changer le monde ? De gauche à droite, de haut en bas, …. peu importe si personne ne vient sur votre site …. Croire que le design fera la différence est faux… En revanche, amener du trafic qualifié par une bonne construction, de la pertinence, du html5 et vous avez déjà fait plus de bruit et de business qu’en modifiant votre site pour faire de l’horizontal.
    Concernant les sites visibles sur un pc ou mac, pensez vous que votre molette de souris va pouvoir aller de gauche à droite … ce qui implique donc soit un clic (moins pratique et rapide que la molette!) ou bien les fabricants vont nous faire changer de souris avec des molettes qui gèrent l’horizontal !

    Le côté horizontal n’est qu’un bouton gauche droite relié au menu et permettant une navigation différente, tout en gardant des articles plus ou moins longs qui nécessitent donc en plus une navigation verticale.
    Dans d’autres cas, c’est juste des pages qui défilent de gauche à droite. Certains templates ou composants existent déjà…
    Dans un autre cas, le temps que la voiture arrive au bon endroit… plus long que le téléchargement d’une page !… et en plus non pertinent pour être bien référencé!

    Pour designinfluence, il faut me dire ou est le scroll, sauf peut être les flèches… sur lesquelels on clique pas … les articles sont longs et nécessitent un scroll vertical…

    Quant à pointephemere comment peut-on faire du scroll horizontal et proposer un menu au centre qui lui est d’une longueur… vous avez testé sur un smartphone ?

    Bref…..soit y a truc que je comprend pas, soit y a un gars super pistonné qui s’est tapé un délire et qui a cru faire croire que le scroll horizontal est au top !!!!!

  2. Adrien dit :

    J’ai testé le point éphémère sur un ipad. L’expérience est trés mauvaise.
    Mais l’article est lui interressant

  3. smo dit :

    Super article très intéressant, mais vous avez oublié les sites suivants qui à l’instar de « design influence » ou du « point éphémère » utilisent tout l’espace disponible sur l’écran du designer :

    http://www.arngren.net/
    http://www.bernhardmalinkewitz.org/
    http://www.rogerart.com/

  4. Harold dit :

    Salut Isabelle,
    C’est effectivement une approche du design intéressante ! Autant le scrolling horizontal est adapté sur tablettes ou mobiles, autant sur interface « clavier souris », il existe quand même un frein important. La molette d’une souris est faite pour scroller en vertical… Et même en ce qui concerne la souris mac par exemple (qui potentiellement permet de scroller dans tous les sens) le scrolling horizontal est réservé aux fonctions « pages suivantes » et « pages précédentes » dans l’historique de navigation. Bref… je pense que ce sont des freins aujourd’hui. Ceux-ci évolueront sans doutes dans les années à venir. A voir ! ^^

Laissez un commentaire

NOUVEAUTE : FORMATION FACEBOOK

NOS SERVICES

CE QU’ILS DISENT D’EMARKETINGLICIOUS

NOS PARTENAIRES

Wikio - Top des blogs - Marketing

Inscrivez-Vous A Ma Nouvelle Formation Facebook !

Apprenez comment acquérir des fans pour votre page Facebook et créer de l’engagement au sein de votre communauté ! Cliquez ici -> Programme et inscription

  • Date : lundi 26 mai 2014.
  • Lieu : Paris.
  • Prix : 899€ HT / Tarifs préférentiels.
  • Eligible OPCA et DIF.
  • Places limitées.
Lire les articles précédents :
conseils-optimiser-journal-facebook
Conférence : 11 Conseils pour Optimiser votre Journal Facebook

Depuis sa sortie en mars 2012, le Journal Facebook a été synonyme de défis inédits à appréhender et d'opportunités à...

Fermer