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
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.
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 :
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 :
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 :
Sur Highrise, cette page (plutôt longue) est composée d’une vidéo et de plusieurs captures d’écran joliment commentées :
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 :
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 :
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 :
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 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 :
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 :
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 :
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 :
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 :
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 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 ?) :
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
