16 manières de designer une page de tour

On trouve sur tout service web qui se respecte une ou plusieurs pages qui présentent ses fonctionnalités principales et ses points forts. Elle permet littéralement de faire le tour du propriétaire et de détailler des points qu’il serait impossible d’aborder sur la page d’accueil par manque de place.

La homepage est donc censée retenir l’attention du visiteur et lui expliquer en quelques mots l’objet du site ainsi que sa valeur ajoutée. Les pages de tour ont de leur côté pour objectif de convaincre ce visiteur et de le diriger vers le formulaire d’enregistrement (en d’autres termes, de le convertir).

Cet article présentent différentes approches pour designer ces pages.

Standout Jobs

Ici la disposition de la page rappelle un peu celle d’un blog. Un bloc de texte imposant est suivi d’une capture d’écran avec des numéros. Ces numéros font référence aux explications disponibles juste en dessous :

Quick Backup

La page de tour (unique) présente ici le mode de fonctionnement du service grâce à quatre blocs de texte accompagnés de visuels. Les screenshots sont disponibles sur une page à part :

msites

La page de tour a été fusionnée avec la page d’accueil sur ce site. Cela fonctionne bien, car on accède alors aux différents points de présentation à l’aide d’un carrousel :

Highrise

Sur Highrise, cette page (plutôt longue) est composée d’une vidéo et de plusieurs captures d’écran joliment commentées :

Things

Ici, tout tient sur une seule page. La capture d’écran (comme le reste du site) dispose d’un design très travaillé. Elle précède une liste de fonctionnalités du même acabit :

Traffik

Encore une page très longue avec le même système de commentaires. Je trouve ce dernier très efficace, car il permet de mettre en avant certains points :

Zenbe

Ici, on combine capture d’écran, commentaire coloré et texte de description. Il y a même un témoignage d’utilisateur bien en évidence :

Spotify

L’exemple de Spotify, bien qu’il ne s’agisse pas à proprement parler d’une page de tour, est intéressant pour la faq présente sur le côté qui pourrait très bien s’intégrer à des pages de tour :

Socialcast

Socialcast a résolu le problème des pages trop longues en implémentant un carrousel vertical. Chaque capture d’écran est complétée d’un texte d’explication. Le résultat est plutôt agréable :

Donor Tools

Le design de la page de tour est très réussi. Chaque screenshot est marqué avec des numéros dont les explications se trouvent sur le côté. Je trouve cependant le système des numéros moins efficace que celui à base de liens graphiques (comme dans Highrise et Things), car cela oblige l’utilisateur à faire des correspondances :

Wipee List

Là encore, les numéros sont bien mis en évidence, mais il faut constamment effectuer des vas et vient avec les textes de description pour déchiffrer le fonctionnement de ce service :

TypePad

Le design de l’assistant de configuration de TypePad pourrait très bien être utilisé pour une page de tour. Le chemin de fer en haut de la page est une bonne manière de montrer les différentes pages :

Checkout

Ce concept est d’ailleurs plus ou moins repris dans ce site, puisque l’on retrouve la liste des fonctionnalités sur la gauche avec les explications à droite et en dessous :

Action Method

Voilà encore un design basé sur un système de numéros et de textes de description. Une bonne idée serait de faire clignoter le numéro à chaque fois que l’utilisateur passe la souris sur un commentaire (afin de faciliter la correspondance) :

Edicy

Edicy a adopté un mécanisme de type coverflow pour présenter ses fonctionnalités. Le résultat est probant, même si je reste sceptique sur l’utilisabilité de ce système (est-ce que tous les utilisateurs vont savoir manier cette interface ?) :

Google Analytics

Et pour terminer, une page de tour basée uniquement sur de la vidéo. La navigation est facilitée grâce à des liens dans la colonne de droite :

Pour conclure

Alors ? Quelle est votre préférée ? Comme vous l’avez peut-être deviné, je trouve qu’une présentation à la Highrise, mais sur plusieurs pages (en utilisant un carrousel pour éviter les rechargements intempestifs), semble être le meilleur compromis.

En fait, mon principal problème serait plutôt de traduire tour en français. Peut-être que les termes présentation ou fonctionnalités rempliraient bien ce rôle, même s’il ne s’agit pas de traductions littérales…

Lire l'article au COMPLET