16 manières de designer une page de tour

Publié le 27 jan 09 à 07:48 | Catégorie : Design Web | 13 commentaires

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 :

Standout Jobs

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 :

Quick Backup

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 :

msites

Highrise

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

Highrise

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 :

Things

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 :

Traffik

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 :

Zenbe

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 :

Spotify

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 :

Socialcast

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 :

Donor Tools

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 :

Wipee List

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 :

TypePad

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 :

Checkout

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) :

Action Method

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 ?) :

Edicy

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 :

Google Analytics

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…

A lire également

Vous pouvez continuer votre lecture sur des sujets similaires en consultant les articles suivants :

Les visiteurs qui ont vu cette page ont consulté ensuite :

A savoir

La rédaction de cet article a nécessité 1 heure et 53 minutes. Si vous le souhaitez, vous pouvez être prévenu de la parution de nouveaux articles en vous abonnant par RSS ou par email.

10 commentaires à propos de “16 manières de designer une page de tour” :

  1. Merci Stéphane… Ton article tombe à pic ! Je comptais justement enrichir notre site d’une belle page de tour.

    J’aime bien le principe et le look de la page SocialCast. Excellente source d’inspiration…

    Olivier le 27 janvier 2009 à 10:42 (#1)

  2. Un autre billet sur un exemple particulier:

    http://www.interfacesriches.fr.....enrichies/

    Pour traduire “tour”, pourquoi ne pas parler d’une visite du service ou d’une visite de présentation?

    Sylvain le 27 janvier 2009 à 12:09 (#2)

  3. Merci pour le lien Sylvain. Ce système de présentation est en effet très intéressant. D’ailleurs, l’auteur parle dans son article de visite guidée pour définir ce type de pages. Ce terme semble être un bon candidat pour la traduction de tour.

    Stéphane le 28 janvier 2009 à 08:21 (#3)

  4. Merci pour cet article !

    Au passage, une forte similarité (et exemple intéressant) avec msites, j’ai nommé Coda : http://www.panic.com/coda/

    A voir…

    AureL le 28 janvier 2009 à 16:51 (#4)

  5. Je viens de tomber sur cette page de tour qui est une succession de captures d’écran accompagnées d’un texte d’explication. Je dois dire que le résultat est plutôt agréable.

    Stéphane le 1 février 2009 à 13:08 (#5)

  6. Hum, un “bon” site, simple et efficace a-t-il besoin de ce type de page ?

    Temporaire le 2 février 2009 à 16:39 (#6)

  7. Ce n’est peut-être pas nécessaire si le concept du site est simple, mais même dans ce cas les utilisateurs aiment avoir un aperçu du service avant même de s’inscrire. Il me semble qu’il s’agit donc d’un bon complément.

    Pour compléter cet article, voici l’exemple de Co-op qui utilise des bulles de texte sur les côtés de l’image (afin de ne pas polluer le visuel). Quant à Onehub, ils ont une page avec des éléments interactifs (mais je trouve le résultat moins probant).

    Stéphane le 7 février 2009 à 12:40 (#7)

  8. Et voici une autre approche intéressante où l’utilisateur va pouvoir agrandir certaines parties de la capture d’écran et obtenir un descriptif de la fonctionnalité associée.

    Stéphane le 14 mars 2009 à 14:36 (#8)

  9. De son côté, Yoono a également opté pour une présentation interactive en Flash dans laquelle le visiteur peut cliquer sur des points chauds sur les captures d’écran pour obtenir plus d’information (très intéressant pour un manuel d’utilisation).

    Stéphane le 3 avril 2009 à 14:25 (#9)

  10. cherchant des exemples de tours, je reviens sur cet article que j’avais bien aimé.
    Qu’il est étonnant de voir que la plupart de ces sites ont changé leur page de tour parfois en mal… ex de socialcast, qui avait “résolu le problème des pages trop longues en implémentant un carrousel vertical” comme le disait stéphane mais qui maintenant est justement revenu sur une page de présentation super longue. Comme quoi… il serait intéressant de savoir pourquoi !

    eRiiic le 5 septembre 2009 à 16:56 (#10)

Ajouter un commentaire

Les informations obligatoires sont indiquées par une étoile rouge *.


3 rétroliens à propos de “16 manières de designer une page de tour” :

  1. Design.social-bookmark.me
    Le 28 janvier 2009 à 14:36
  2. links for 2009-02-16 — Chroniques du web
    Le 16 février 2009 à 12:13
  3. Tanek » Blog Archive » links for 2009-03-10
    Le 10 mars 2009 à 21:00
Votre marque personnelle n’est pas évolutive

Articles Récents

Les derniers articles publiés

A Propos

Je m’appelle Stéphane Thomas et je suis Ingénieur Senior expert dans le développement d'applications web complexes. Etant également un peu Entrepreneur, j'ai tenté l'aventure de la création d'un nouveau service Internet appelé Loomiz. Je suis maintenant le cofondateur d'Hitomi Studio, un studio de développement spécialisé dans la réalisation de sites ecommerce haut de gamme pour de jolies marques.

Lire la suite…