Diminuer la taille des caractères Augmenter la taille des caractères | BP Eminet, Développement et formation Drupal, formation WordPress, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilité, multilinguisme | http://www.p-interactif.com | Accueil | Imprimer

Accueil « Articles et contributions « Retour à Les effets de terminaison

Les effets de terminaison

Cet article a été publié sur le site www.marketing-internet.com

La plupart des activités ou des processus de notre vie quotidienne peuvent être segmentés en tâches et en sous-tâches élémentaires. Ces décompositions sont d’ailleurs une des activités majeures des ergonomes ou des personnes qui travaillent sur les interfaces homme-machine (IHM). Elles permettent ainsi de formaliser un ensemble d’actions destinées à un objectif donné. Le but est de bien comprendre les processus afin de les simplifier, de les faciliter ou en accompagner le déroulement.

- Prenons un exemple de la vie de tous les jours : un distributeur automatique de banque. Ce sympathique automate, après l’introduction d’une carte de plastique enfoncée dans une fente et une succession d’actions, fait sortir de l’argent du mur... Examinons les différentes tâches à accomplir (à quelques variantes près) pour arriver à cette fin.

La phase 1 est l’initialisation de l’activité.
La phase 2 est l’identification.
La phase 3 est la requête.
La phase 4 est l’option.
La phase 5 est la restitution.
La phase 6 correspond au résultat désiré de l’activité.

Notons que les phases 2 et 3 sont des phases « critiques ». Elles sont accompagnées d’une sous-tâche de confirmation par l’action sur la touche « Valider ». La tâche 4, étant optionnelle, ne nécessite pas de confirmation.

Examinons plus précisément la phase 5. Tant que la carte n’est pas retirée, l’argent désiré ne "sort pas du mur".

Cette partie s’accompagne d’un message affiché sur l’écran et parfois d’un bip sonore pour interpeller l’usager (je prend le terme usager à dessein). J’ai intentionnellement ménagé un peu le « suspense », cette phase s’appelle en réalité la phase de terminaison.

- Il y a plusieurs années, les phases 5 et 6 étaient inversées. On prenait l’argent et ensuite on retirait la carte. On suivait ainsi une logique qu’on pourrait qualifier de cohérente. L’activité débutait par une entrée de la carte et se terminait par une sortie de la même carte. Malheureusement, de temps à autres certaines personnes se saisissaient de la somme demandée et... partaient en oubliant de retirer leur carte.

Pourquoi ? et bien tout simplement parce que l’objectif final de ce processus est d’obtenir de l’argent. Souvent nous considérons inconsciemment que tout est terminé lorsque nous sommes arrivé au but désiré qui a justifié les différentes phases d’actions. L’inattention fait le reste puisque qu’il s’agit d’une action classique de notre vie quotidienne.

Les spécialistes en IHM, en analysant les différentes phases, ont trouvé « l’astuce » d’inverser les phases 5 et 6 pour inciter, orienter l’usager et ainsi l’obliger à récupérer sa carte AVANT d’avoir la somme désirée.

C’est cette action qui « déclenche » la fourniture de la liasse de billets. Cette « astuce » s’appelle un effet de terminaison.

J’ai omis la partie du ticket car elle est optionnelle et n’apporte rien au propos.

Existe-t-il de tels processus sur un site web ?

Bien-sûr, beaucoup et certains bien plus complexes que l’exemple ci-dessus. Prenons un site d’achat en ligne par exemple. Un ensemble de sous-activités vont accompagner notre parcours pour arriver au produit de nos rêves.

Choix du thème de recherche.
Visualisation des articles qui nous intéressent.
Sélection des articles à acheter (caddy).
Saisie des quantités, taille etc.
Saisie de l’adresse de livraison.
Saisie de l’email pour la confirmation.
Éventuellement saisie de l’adresse de facturation.
Choix du mode de paiement.
Saisie du numéro de carte bancaire
Confirmation finale.

J’en oublie sûrement...

On pourrait rajouter la visualisation du caddy, la suppression de produits, le retour à la liste de sélection etc.
Nous pouvons constater que cet ensemble de sous-tâches est bien plus complexe que notre argent qui « sort du mur ». On pourrait rajouter qu’il s’agit d’un processus encore « nouveau » pas complétement passé dans les mœurs avec les interrogations classiques concernant le paiement sécurisé, la livraison, le sérieux du marchand en ligne etc.

Chaque phase va s’accompagner de processus de validation, d’effets de terminaison, de choix, de prise de décision. Tout doit être mis en œuvre par le marchand en ligne pour que l’utilisateur soit en confort, n’ai ni doutes, ni interrogations ou suspicions.

Après tout c’est lui qui a "notre argent dans sa poche..."

- Qui n’a pas vécu l’horripilante et humiliante situation suivante ?

La saisie d’un formulaire complexe, beaucoup d’informations à entrer avant d’arriver à la délivrance : le clic sur le bouton « Valider » ou « Envoyer ». Ceci étant fait, un message apparaît signalant une « erreur » de saisie ou une date mal entrée. Au lieu de 21/12/70, il fallait saisir 21/12/1970.... Tsss ! comme si tu ne pouvais pas t’adapter tout seul !
Au final, un clic sur le bouton « Retour » pour revenir sur le formulaire... vierge.
L’effet de terminaison de cet exemple (cliquer sur le bouton « Valider ») entraîne un effet désastreux. Il est fort probable que la prochaîne tâche accomplie soit un abandon et la fermeture de la fenêtre du site.

- Par quoi se traduit un effet de terminaison ? La validation d’un formulaire, la fermeture d’une fenêtre, un choix avec une validation, un clic sur un bouton, voici quelques exemples d’effets de terminaison.

Après une terminaison, le résultat peut être le retour à la page source, un message de confirmation ou un effet de feedback (pour une inscription à une newsletter, le dépôt d’un CV...).

L’effet peut aussi produire un message d’erreur comme nous l’avons vu ci-dessus.

Quels sont les moyens pour éviter des effets de terminaison néfastes ? Une règle triviale : se mettre à la place de l’utilisateur et se poser la question : suis-je en cet instant en confort ? et si non pourquoi ? Puis-je continuer le parcours sans ambiguïté ni doute et si non pourquoi ?

Ci-dessous trois moyens parmi d’autres.

Bannir l’ambiguïté

Un contre-exemple singulier...
La réservation en ligne d’une voiture chez un loueur réputé permet d’obtenir un numéro de réservation. Le cheminement pour arriver à cette réservation n’est pas le propos de cet article.
Imaginons que nous désirions annuler cette réservation.

Sur le site, choisissons l’option modification/annulation d’une réservation. Saisissons le numéro de réservation correspondant. Un écran nous produit les détails de la réservation. Jusque là, tout va bien.

À la fin de la page , nous trouvons la terminaison : trois boutons : « Retour », « Annuler », « Modifier ». À cet instant, il y a un souci. « Annuler » nous savons ce que cela signifie sur une interface mais là que faut-il faire ? Le problème ici est que la tâche à réaliser est une annulation de commande. Or nous sommes en face d’une page qui propose le même bouton d’annulation qu’un processus de retour classique.

J’avoue que le jour où j’ai été en face de ce souci. J’ai vérifié par téléphone ce que j’avais fait pour avoir une confirmation de mes actions.

Éviter le doute, dans notre cas il aurait fallu préciser la conséquence, changer le bouton « Annuler » par « Annuler la réservation » par exemple (pour faire basique) avec un aspect cosmétique particulier.

Anticiper l’erreur

Site de réservation de nuits d’hôtel : www.broadmoor.com.
Le bouton « Reservation » de la barre de navigation, nous amène sur la page correspondante en Flash.

Cette page est un bon exemple d’une excellente utilisation de Flash. En un même lieu, sur trois zones, il y a tous les éléments concernant la réservation : choix des dates, sélection du type de chambre, identification et paiement.

Il y a quelques mois, il suffisait d’un déplacement du curseur de la souris (roll over) sur le bouton « Finish reservation » pour faire apparaître une mini-fenêtre signalant que le formulaire n’avait pas été renseigné correctement. L’utilisateur n’avait pas le sentiment d’avoir activer la terminaison puisque le bouton n’avait pas été activé.

L’interface a désormais été changée et je trouve cela dommage. Il faut activer la terminaison (clic sur le bouton « Finish reservation ») pour faire apparaître la « fenêtre » d’alerte d’erreur. Cela dit, c’est tout de même fort bien fait.

Accompagner le parcours pour améliorer le confort

Les sites d’achat en ligne proposent souvent un guidage de l’utilisateur dans les différentes phases qui accompagnent la commande d’articles. Ce guidage se traduit par un « cheminement » sur une ligne horizontale qui accompagne l’utilisateur en lui indiquant où il est, d’où il vient et ce qui lui reste à accomplir.

Je prend comme exemple www.amazon.fr qui me semble le plus intéressant. Des articles ayant été ajoutés au panier, nous passons dans la partie commande en cliquant sur le bouton « Passer la commande ». L’aspect du site change alors complétement. L’interface devient beaucoup plus épurée. Il n’y a plus d’éléments risquant de distraire l’utilisateur dans cette partie critique.

Le cheminement se traduit par une icône représentant un chariot qui se déplace le long des différents titres résumant la prise de commande :

BIENVENUE | ADRESSE | ARTICLES | EMBALLER | LIVRER | PAYER | CONFIRMER
L’utilisateur identifie ainsi facilement où il est et où il va.

- Comme nous pouvons le constater, la terminaison d’un processus est souvent une phase critique. Elle n’est malheureusement souvent considérée que comme la simple « fermeture » d’une activité. Or c’est à cet instant que l’utilisateur choisit de valider/confirmer une transaction ou bien, saisi par le doute ou l’inquiétude, décide d’abandonner et/ou quitter le site.

Je ne puis résister...

Vous avez compris cette notion de terminaison.
Je ne peux résister de raconter cette "mésaventure" qui est arrivé à un(e) autre que moi dans le péage d’un parking lyonnais, il y a quelques semaines. Je sortais de l’appartement de ma fille après quelques opérations de bricolage dans le dit appartement.

Devant insérer mon ticket de parking dans l’automate puis insertion de la carte de crédit, saisie du code, récupération de la carte, récupération du ticket etc.
Bref... la bonne séquence qui va bien... avec le bon effet de terminaison...

Sauf que... il y avait un parapluie posé au dessus de l’automate...

La personne qui me précédait avait rajouté une tâche supplémentaire... qui était "encapsulée" dans le processus habituel. Sauf que ce derniers’encadrait dans un autre - inhabituel celui-là - : il pleut aujourd’hui...
« J’ai posé mon parapluie en amont, je devrais donc le récupérer en aval de l’ensemble de sous-tâches classiques que l’on fait en pareil cas ».

Oui sauf que cette "encapsulation" n’était ni habituelle ni naturelle en pareil cas - il y a une couche de plus...
Et donc la personne a oublié son parapluie...

Lire aussi
  • Ecriture web - écrire pour un écran de PC ou pour un smartphone
  • Mais aussi écrire un SMS, un mail ou un commentaire sur un réseau social. 50% à 60% des sites web (...)
  • Usage de la bonne typographie
  • Cet article est paru sur le site www.marketing-internet.com. Il a été complété par la suite. La (...)
  • Quelques clichés concernant internet
  • Clichés sur internet Cet article se fonde sur des études ou des articles publiés sur le web ainsi (...)
  • Faut-il supprimer la barre de navigation ?
  • Barre de navigation Article paru sur le site www.usabilis.com Depuis 2 ou 3 ans un certain (...)
  • L’approche métaphorique sur le web ne marche pas
  • Réaction à un article de Jean Marc Hardy (www.redaction.be) concernant les techniques de (...)
  • Multilinguisme
  • Les quatre dimensions de la localisation Le choix de la localisation d’un site, d’un produit (...)