Conception des processus de site web

Modéliser les processus pour clarfier le fonctionnement...

La conception des processus d'un site web englobe les processus d'inscription, le processus de commande, les process transactionnels ainsi que tout type de processus permettant aux utilisateurs finaux d'accomplir une action à travers une série d'étapes. Le design de ces sas passe souvent par un parcours utilisateur rationnel, par étapes, si bien que l'expression tunnel d'achat ou tunnel de souscription est un usage courant pour désigner ces zones fonctionnelles d'un site web.

Quelle est l'utilité des processus dans le design d'interaction ? Pourquoi faut-il passer du temps à concevoir les processus de votre projet digital ?
Dans cet article, nous allons esquisser les méthodes pour modéliser et concevoir les processus de vos projets digitaux. Plusieurs exemples illustrent cette démarche. C'est un travail qui se rattache aux disciplines du design d'interaction et de l'architecture de l'information. Dans la mesure où la conception d'un processus engage des implications internes pour l'entreprise, c'est un sujet transversal qui relève autant de l'ebusiness que de la logistique...

La plupart des sites web et des applications embarquent des processus, particulièrement les dispositifs transactionnels :

• Processus d'inscription.
• Processus de commande.
• Processus de souscription à une assurance.
• Processus de demande de devis.
• Processus d'aide au choix.
• Processus de diagnostic d'un bris de glace.
• Processus d'assistance de SAV.

Les processus impliquent une conception à double sens :
back-office, et front-office.

En effet, la mise en place d'un processus digital a souvent des conséquences internes au sein de l'entreprise. Les process peuvent engager des ressources de différents services, avoir des conséquences logistiques, nécessiter des actions de la part de différents collaborateurs pour que le processus soit limpide (et que la réponse, le produit, ou le service soit délivré au client final). On parle de flux internes [INPUT], qui sont en fait les conséquences des demandes externes formulées par l'utilisateur dans le processus [OUTPUT]. On modélise aussi les processus pour transposer les flux logistiques générés par un processus digital et visualiser les répercussions internes sur les autres services de l'entreprise.
Bref, toutes les actions qui vont permettre d'apporter une réponse à l'utilisateur final mais qui ne sont pas visibles, sur le plan visuel, dans l'interface utilisateur, relèvent des interactions en back-office.
De l'autre côté de l'écran, en front-office, l'utilisateur final doit se mouvoir dans le processus de façon fluide sans ressentir la moindre friction sur le plan de l'expérience. Réussir à concevoir un processus qui puisse être fluide pour l'utilisateur final et bien huilé au niveau de l'entreprise émettrice, tel est le défi et l'enjeu stratégique de la conception de processus...

Il existe une infinie variété de processus.
Au sens stricto-sensu, le processus est une séquence prédéfinie de gabarits qui s'enchaînent dans le but de délivrer un résultat ou de permettre à l'utilisateur d'atteindre un objectif dans un cadre déterminé. La séquence suit une procédure prédéfinie dans le design d'interaction. On parle aussi de scénario. La conception d'un processus est effectivement un travail de scénarisation. C'est une sorte de mécanisme que l'on peut représenter, le plus souvent, sous la forme d'un arbre décisionnel.
Dans le processus, le déroulement de l'interaction suit un parcours en plusieurs étapes.

Le processus guide l'utilisateur...

Sur le plan de l'expérience utilisateur, on utilise souvent le processus pour assister l'usager dans la réalisation d'une action jugée plus complexe. On guide ainsi l'utilisateur dans un parcours rationnel, par étapes, pour lui permettre d'atteindre son objectif. Certains processus sont parfois biaisés et décevant, comme les processus ou les entonnoirs proposés pour filtrer les modalités de contact : on trouve ce genre de procédé dans les sites des opérateurs Télécoms et des Banques, qui essayent au maximum de valoriser les moyens de communication indirect et font tout pour livrer le numéro de téléphone du service client en dernier ressort. Ce qui, soit dit en passant, est assez lamentable sur le plan du design d'interaction et de l'expérience utilisateur pour engager une relation de confiance.
Note : cet exemple relève davantage du processus éditorial (une séquence progressive dans les contenus, comme un filtrage par étape des contenus). Autrement dit, tous les processus ne sont pas forcément fonctionnels.

Bref, la séquence interactionnelle du processus est une sorte de site dans le site. Il est important de bien décrire la procédure pour permettre à tous les acteurs du projet d'en comprendre le fonctionnement et les subtilités. On utilise le plus souvent des diagrammes pour la conception des process d'un projet digital.

Ce n'est pas forcément très compliqué sur le plan de la formalisation pour les processus les plus standardisés (inscription...). En revanche, certains processus relèvent du casse tête. Les tunnels relatifs au SAV ou les scénarios marketing alambiqués peuvent donner du fil à retordre aux meilleurs designer d'interaction...

Pour vous aider à modéliser et à imaginer les processus de vos projets digitaux, IAFACTORY a créé quelques grilles de modèles pour gagner du temps dans la formalisation. Cela permet d'élaborer rapidement un processus, sans trop réfléchir à la mise en forme.
Pour les cas les plus complexes (j'ai en tête un terrible projet de conception de processus pour lequel une affiche 4X3 aurait été insuffisante... Carglass), il faut faire du sur-mesure et parfois réinventer la roue. Même si c'est contre-productif sur le plan de l'ergonomie, certains grands esprits du marketing l'exigeront. Pour le meilleur, et surtout pour le pire. Evitez ce genre de projet, c'est mieux pour votre karma :).

Concevoir les processus pour visualiser le fonctionnement...

Les objectifs prioritaires visés par la modélisation et la conception des processus d'un dispositif digital :

• Mettre à plat les parcours utilisateurs complexes.
• Clarifier une partie spécifique de la conception fonctionnelle du projet.
• Visualiser les impacts du processus en back-office, c'est à dire les flux internes qui sollicitent un ou plusieurs services internes de l'entreprise.
• Communiquer sur les processus avec toutes les équipes projets.
• Documenter le projet et gagner en transparence et lisibilité.
• Expliciter le fonctionnement d’un processus (commande, inscription, demande de devis...).
• Illustrer les implications de chaque action de l’utilisateur.
• Modéliser les rapports d’entrées-sorties front-back office.
• etc.

De nombreux projets sont bloqués ou affaiblis par le manque de clarté des processus. Les fameux flux internes qui se traduisent parfois par des expériences nébuleuses sur le plan de l'expérience utilisateur. En effet, qui n'a pas fait l'expérience obscure des choix de logistiques abracadabranteques proposés dans certains tunnels d'achat. Voici un exemple.

• Au départ tout va bien, vous avez 2 produits en stock dans le panier. Vous commandez... Le magasin Y doit vous livrer, mais il n'a plus le produit en stock. On ne s'en rend compte qu'après avoir validé le panier, car avant, on ne connaissait pas votre zone de chalandise. La disponibilité géographique n'avait pas été calculée... On va alors diviser votre commande en plusieurs paquets. Vous allez devoir récupérer le premier produit dans le relais colis Y, mais seulement dans 3 semaines. Et vous viendrez chercher l'autre produit en magasin Z quand le magasin C aura effectué le transfert. Vous serez alerté dans votre espace client...
• Et ce n'est pa un exemple bien compliqué au niveau ecommerce...

Bref, la conception des processus ne relève pas que du design d'interaction et de l'ergonomie... Un processus peut effectivement être au carrefour de l'activité d'une entreprise. Il peut y avoir des courts-circuits sur le plan de l'expérience utilisateur... C’est le cas par exemple, d’un manque de lisibilité entre une action effectuée par l’utilisateur et son implication en terme de logistique comme dans l'exemple précédent. Au fond, ces problèmes sont souvent le reflet des difficultés de communication entre les unités d’affaires, entre le marketing et la technique, entre la logistique et les équipes de conception-création…

La documentation projet et la conception fonctionnelle

La documentation idéale du projet doit définir et permettre de visualiser les fameux flux et autres processus engagés en front comme en back-office dans la mise œuvre du projet. La représentation des flux et des process s’avère particulièrement décisive dans les projets transactionnels (e-commerce) car ils permettent de balayer d’un coup d’œil les problématiques métier, logistiques, et leurs implications techniques.

Concevoir un support interactif ne peut se résumer à la seule formalisation des storyboard qui ne permettent pas d’accéder à la vision macro et mécanique du fonctionnement du dispositif… La modélisation des processus de commande par exemple, ou de tout type d’imbrication et d’enchaînement entre les gabarits sous forme de flux, passe indubitablement par la réalisation de diagrammes spécifiques.

Les diagrammes sont le meilleur outil pour représenter les processus. Le fonctionnement et les étapes du process sont mis en scène de façon précise. Les enchaînements séquencés de gabarits sont clairs.
Quant aux logiques de flux, elles visent à matérialiser les échanges d'informations à prévoir comme les flots et chaine de validation de contenu, les relations entre les niveaux d'utilisateurs et les administrateurs, les actions et leurs implications en back-office...

Nous vous conseillons de modéliser les flux et processus impliqués par votre support interactif dans les cas suivants :

• nécessité de visualiser le fonctionnement d'un processus,
• conception d’un processus de commande complexe,
• problématique logistique et impacts en terme d’interface,
• problématique métier magasin et interaction avec le support interactif,
• projet complexe, nombreuses imbrications entre les gabarits,
• pour visualiser le fonctionnement du dispositif.

La conception des processus peut aussi servir à modéliser une partie des parcours utilisateurs...

Comment concevoir et optimiser un processus web...

Au-delà de la créativité sans faille du designer :), il faut parfois recourir à des réunions pour valider les étapes d'un processus, d'autant plus si les implications dans le modèle interne de l'entreprise sont importantes. La réunion, c'est donc l'outil de travail de base...

En phase de conception-production, il s'agit de projeter le fonctionnement des processus ainsi que les implications entre les gabarits sous forme de diagramme, pour la partie front (utilisateur). Les logiques de flux font l’objet du même traitement pour la partie back (entreprise) et sont représentés sous forme de schéma (exemple de flux : telle action mobilise tel process logistique).

Sur le plan du design d'interaction, représentez chaque étape par un pictogramme d'écran, comme dans les exemples. Si vous le pouvez, essayez de distinguer les types d'écrans (formulaire avec saisie, ou case à cocher avec action, etc.). Nommez chaque étape. Commentez l'action demandée à l'utilisateur. Liez les séquences entre elles. Faîtes le lien avec les flux internes impliqués en back-office. Ces schémas complètent précieusement la documentation projet, et limitent les risques de blocage et d’incompréhension entre les différents profils métiers tout au long de la chaine projet.

Sur les plans de l'ergonomie et du design de l'information, la conception du processus doit se traduire par une interfce dépouillée de toute action susceptible d'induire l'utilisateur en erreur. Il s'agit de concentrer l'attention de l'utilisateur sur la séquence du processus et de l'aider à réaliser des actions pour obtenir un résultat. Oubliez la règle des 3 clics. Proposez 15 clics s'il le faut. Préférez effectivement une séquence limpide, avec une question claire par écran, plutôt que des séquences impliquant une charge de travail trop importante. L'utilisateur doit avoir le sentiment qu'il contrôle la situation (contrôle des actions, retour en arrière, arrêt du processus).

Démarche pour concevoir les processus d'un site web

Pour concevoir le processus d'un projet digital :

• Listez les étapes côté utilisateur.
• Enumérez les flux impactés en back-office,
• Modéliser l'enchaînement des écrans et de la séquence à l'aide d'arbre décisionnel.
• Nommez chaque étape et commentez les actions demandées aux utilisateurs.
• Comptabilisez le nombre d'actions.
• Fournissez toujours des alternatives aux utilisateurs (éviter les impasses).
• Spécifiez vos processus pour que tous les acteurs du projet puissent les comprendre.

Travaux complémentaires à la conception des processus

La modélisation des flux et la conception des processus s’inscrivent dans le périmètre de la conception fonctionnelle détaillée du projet. Ces travaux visent à expliciter et à rendre plus lisible le fonctionnement mécanique du support digital et des implications front-office et back-office. La conception d'un processus sera naturellement mis en scène, ensuite, via la technique de wireframing pour clarifier l'interface utilisateur...

Une documentation précise de la conception passe par un inventaire fonctionnel qui liste tous les éléments fonctionnels du projet (pièces du puzzle).
L’arborescence fonctionnelle permet de visualiser le fonctionnement et la structure du dispositif digital (puzzle), c'est à dire les interactions entre les différents gabarits. Y figurent les processus. La conception de processus est donc un travail spécifique de cartographie du fonctionnement.

Les spécifications fonctionnelles complètent efficacement ces travaux, à travers une description micro du fonctionnement du dispositif.

Par extension, la conception des processus sous forme de diagramme peut déboucher en conception sur la conception du processus de commande.

Écrit par
Julien Muckensturm - spécialiste en design ux