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…
