Exemples de wizards - Projet Web Transactionnel

Un wizard (assistant pas à pas) découpe un formulaire exigeant en étapes courtes et rassurantes : le visiteur voit où il est rendu, ce qui s'en vient, et peut reculer sans rien perdre. Les captures ci-dessous montrent comment les vrais sites s'y prennent : fils d'ariane en chevrons, cercles numérotés, barres de progression, onglets fléchés. Observez-les avant de dessiner le storyboard de votre inscription.

Le diaporama Storyboard Wizard Le diaporama Authentification La galerie des onboardings (patron cousin) Retour aux principes

Cacoo - l'onboarding gamifié

Cinq étapes empilées comme un gâteau, un coffre au trésor en récompense : l'outil de schémas Cacoo transforme la prise en main en jeu.

Cacoo étape 1 : créer un nouveau schéma — **Étape 1** - créer un nouveau schéma

Cacoo étape 2 : créer un répertoire — **Étape 2** - créer un répertoire

Cacoo étape 3 : créer un répertoire partagé — **Étape 3** - créer un répertoire partagé

Cacoo étape 4 : inviter des amis — **Étape 4** - inviter des amis

Étape 5 - choisir son avatar

Dunod - les cercles numérotés

L'ebookstore de Dunod affiche quatre grands cercles : Mon panier, Commande, Paiement, Confirmation. L'étape courante est verte, impossible de se perdre.

Dunod étape 1 : le panier — **1. Mon panier** - le contenu et le prix

Dunod : le panier avec code promotionnel — **1. Mon panier** - avec le champs du code avantage

Dunod étape 2 : la commande et les conditions — **2. Commande** - le récapitulatif et les conditions à accepter

Decitre - le fil d'ariane en chevrons

La librairie Decitre enchaîne Mon panier, Identification, Paiement et Confirmation dans un bandeau en chevrons. L'identification arrive après le panier : on ne demande rien avant que le client soit décidé.

Decitre : le panier — **Mon panier** - l'article, le total, le code avantage

Decitre : l'identification — **Identification** - le formulaire arrive au bon moment

Desjardins - le quiz à progression

Un concours d'assurance transformé en quiz de trois questions, avec barre de progression et rétroaction immédiate (« Bien vu! »). Le wizard peut aussi servir à apprendre.

Desjardins : question 1 de 3, barre à 0 pour cent — **Question 1 de 3** - la barre part à 0 %

Desjardins : question 2 de 3, barre à 33 pour cent — **Question 2 de 3** - la barre suit, 33 %

Desjardins : fin du quiz, rétroaction Bien vu — **100 %** - rétroaction positive et appel à l'inscription

Facebook - la création de page en trois onglets

Créer une page se fait en trois onglets fléchés : À propos, Photo de profil, Audience préférée. Chaque étape est courte et peut être sautée (« Passer à l'étape suivante »).

Facebook étape 1 : à propos — **1. À propos** - description et adresse de la page

Facebook étape 2 : photo de profil — **2. Photo de profil** - téléverser ou importer

Facebook étape 3 : audience de page préférée, champs vides — **3. Audience préférée** - lieux, âge, intérêts

Facebook étape 3 remplie : audience ciblée — **3. Audience préférée** - la même étape, remplie

Piktab - l'onboarding en deux questions

Deux écrans, deux questions, des pastilles 1-2 reliées par un trait : le minimum vital d'un onboarding.

Piktab étape 1 : choisir ses catégories — **Étape 1** - choisir ses catégories

Piktab étape 2 : choisir le moteur de recherche — **Étape 2** - choisir le moteur de recherche

Les écrans à retenir

Des captures uniques, chacune pour un patron précis.

Dîner en Blanc : six étapes affichées en permanence — **Dîner en Blanc de Montréal** - six étapes numérotées, affichées en haut ET en bas de page

Gouvernement du Canada : trois étapes en chevrons — **Gouvernement du Canada (LNNTE)** - les trois étapes annoncées en liste PUIS en chevrons

MBNA : formulaire long en une page avec wizard en trois points — **MBNA - le contre-poids** - un formulaire interminable en une page : exactement ce que le wizard évite

MBNA : configuration de la vérification en deux étapes en trois points — **MBNA - Comment ça marche** - trois pictogrammes numérotés avant de commencer

Librairie Gallimard : fil d'ariane du panier en pictogrammes — **Librairie Gallimard** - fil d'ariane en pictogrammes : panier, adresses, livraison, paiement, résumé

Wayfair : étape révision de commande — **Wayfair** - la 4e étape « Review Your Order » : tout vérifier avant de payer

Amazon WebStore : wizard de configuration de boutique — **Amazon WebStore (vintage)** - monter sa boutique en cinq étapes : thème, logo, produits, vérification, réglages

Patron minimal : register, select, confirm — **Le patron minimal** - Register, Select, Confirm : trois mots suffisent

Argumentaire marketing en trois étapes numérotées — **L'argumentaire 1-2-3** - le patron des étapes numérotées récupéré par le marketing

Le contre-exemple - à reconnaître

Le patron du wizard inspire confiance... et certains sites douteux l'exploitent : de fausses étapes qui mènent tout droit à la création d'un compte payant. Sachez le reconnaître, et n'en faites jamais un.

Faux assistant de téléchargement en quatre pictogrammes — **Le faux assistant** - quatre jolis pictogrammes verts pour habiller un piège à abonnement

Pour aller plus loin

Un guide complet qui traverse un vrai wizard de A à Z, capture par capture : The Wonders of Book Production on Lulu (PDF, 27 pages, OWASP) - la publication d'un livre sur Lulu, un assistant de plusieurs écrans documenté pas à pas.

Captures d'écran tirées du matériel du cours, reproduites à des fins pédagogiques d'analyse d'interfaces.