Illustration de Matt Rae
Lors du lancement d’un projet de conception d’applications mobiles, il est conseillé de commencer par créer un wireframe de l’expérience elle-même, ou de segments de celle-ci, avant de se lancer dans des maquettes de plus haute fidélité. Le processus de wireframing peut aider à identifier les lacunes du flux utilisateur, ou à mettre en évidence les points de friction avant de passer davantage de temps sur les détails plus précis de l’interface.
Dans ce tutoriel, suivez la création de wireframes pour un flux d’abonnement sur application mobile. À l’aide de formes simples et d’une palette de couleurs en niveaux de gris, vous placerez plusieurs écrans dans un flux, ce qui vous permettra de valider et de tester l’expérience avant d’inclure des détails tels que la couleur, les graphiques et la typographie finale.
Création d’éléments de base
Un wireframe est composé d’une série d’éléments simples, généralement avec des couleurs en niveaux de gris ou discrètes, et simplifié aux formes de base telles que des rectangles et des ellipses. Comme la plupart de ces objets sont utilisés à plusieurs reprises, une bibliothèque de base peut être créée en intégrant des éléments réutilisables.
Pour ce faire, dessinez d’abord un rectangle, puis mettez-le en forme selon vos besoins pour qu’il représente un élément particulier, un bouton par exemple. Il peut s’avérer utile d’ajouter un espace réservé de texte à un bouton, en fonction de la fidélité de votre design. Dans la mesure où les boutons sont utilisés dans un flux d’abonnement pour passer à l’étape suivante du processus, ajoutez une zone de texte et centrez-la dans la forme de bouton à l’aide des outils d’alignement.
Ensuite, combinez ces éléments dans un groupe et créez un composant à l’aide des options du menu contextuel. Une fois cette opération terminée, l’élément peut être déplacé et utilisé plusieurs fois, ce qui évite de devoir tout recommencer chaque fois qu’un élément de bouton est requis.
Répétez cette procédure avec d’autres éléments courants tels que les barres de navigation, les espaces réservés d’images et les blocs généraux. Si vous prenez le temps de configurer des éléments communs, vous gagnerez ensuite du temps tout au long du processus. Et ces composants peuvent être utilisés pour offrir une plus haute fidélité à votre design au moment opportun.
Vous pouvez également utiliser des plug-ins et des kits d’interface utilisateur pour créer ces éléments. Les plug-ins tels que Quick Mockup fournissent toute une collection d’éléments de wireframe pouvant être rapidement convertis en composants, ou bien utilisés tels quels.
Étapes importantes du flux d’abonnement
Pour ce flux d’abonnement, la première étape consiste à créer des plans de travail pour chaque écran, ou étape du processus. Un flux d’abonnement type comprend, mais sans s’y limiter, les éléments suivants :
Page d’accueil : cette page comprend souvent un message de bienvenue ou un logo d’application, ainsi que des options de connexion ou d’abonnement au service.
Page d’abonnement : il peut s’agir d’une seule page ou d’une série de pages utilisées pour collecter des informations telles que l’adresse électronique, le nom et d’autres informations requises pour la création d’un compte.
Pages de succès et d’erreur : ces pages sont essentielles pour fournir à l’utilisateur un retour sur le statut de la création de compte, si celle-ci a réussi ou échoué, ainsi que sur la manière dont l’erreur peut être corrigée.
Ce tutoriel portera sur le flux d’abonnement, permettant ainsi à de nouveaux clients de créer un compte. Le même processus que celui présenté ici peut s’appliquer à la création d’un design de page de connexion pour les utilisateurs disposant déjà d’un compte. Cependant, au lieu de saisir les informations nécessaires à la création d’un compte, il leur suffira de saisir leur nom d’utilisateur et leur mot de passe pour terminer le processus de connexion.
Mise en forme de la page d’accueil
La page d’accueil, ou écran de démarrage, contient quelques éléments clés à inclure. Gardez à l’esprit que votre cas d’utilisation particulier peut présenter des exigences ou des objectifs différents. Votre design doit donc refléter ces particularités. En règle générale, les éléments suivants sont inclus :
• Logo de l’application
• Message de bienvenue
• Options d’abonnement, ou lien vers la page d’abonnement
• Options de connexion, ou lien vers la page de connexion
Sur cette page, les options de connexion ou d’abonnement sont généralement mises en évidence. Dans ce cas, pour capturer de nouveaux enregistrements d’utilisateur de manière plus transparente, les options d’abonnement seront mises en évidence dans ce workflow, tout en laissant les options de connexion disponibles, mais réduites au bas de la page.
Commencez par faire glisser un composant de bloc général créé précédemment et agrandissez-le jusqu’en haut de l’écran, créant ainsi un espace réservé pour l’horloge, le signal et d’autres détails du système d’exploitation. Ensuite, dans un espace réservé de rectangle ou d’image de base, dessinez un espace réservé pour un logo, centré sur l’écran.
Ajoutez ensuite un espace réservé pour un message de bienvenue. Ce texte peut être écrit avec l’outil Texte ou simplement représenté à l’aide de rectangles arrondis simples. Au début de la conception, il peut s’avérer plus facile de simplement bloquer ce texte avec des formes plutôt que de se soucier d’en écrire une copie.
La partie inférieure de la page inclura des options permettant de s’abonner (création d’un compte) ou de se connecter si l’utilisateur dispose déjà d’un compte. Votre design peut nécessiter des options pour des services d’authentification tiers tels que S’abonner auprès de Google ou Se connecter avec Facebook. Si tel est le cas, votre design comprendra plusieurs boutons pour l’abonnement qui incluent ces options spécifiques.
Pour ce tutoriel, un seul bouton Créer un compte sera créé. Il s’agit du bouton qui fera passer l’utilisateur à l’écran suivant, lui permettant de saisir ses détails pour créer un compte.
À l’aide de l’élément de bouton, placez-le dans le tiers inférieur de la page, centré horizontalement sous le message de bienvenue. En dessous, tracez une ligne horizontale à travers la page, sur toute la largeur du bouton, puis ajoutez un autre bouton indiquant Se connecter en dessous de la ligne. Ce bouton sera une option secondaire. Le style du bouton peut donc être modifié pour refléter ceci.
Création du formulaire d’abonnement
La page principale étant désormais terminée, la vue suivante du flux peut être créée. Les utilisateurs accèdent à cette page après avoir cliqué sur le bouton Créer un compte, créé dans l’écran précédent. Sur cette page, les utilisateurs saisiront diverses informations comme leur nom, leur adresse électronique et leur mot de passe, pour créer un compte.
Dans cette vue, quelques éléments de texte seront ajoutés pour indiquer ce que représentent les différents champs, tout comme les boutons de l’écran précédent avaient des libellés. Vous pouvez choisir d’ajouter du texte pour le titre de la page ou simplement de dupliquer l’espace réservé de texte et le placer en haut de la page.
En dessous du titre se trouvent différents éléments de formulaire. Pour faire simple, l’élément de bloc de base peut être utilisé ici ou vous pouvez en créer un spécifique aux champs de saisie, y compris une bordure. Placez un élément centré sur la page, puis, à l’aide de l’outil Texte, ajoutez un libellé Nom en haut à gauche. Le libellé de ce champ de saisie est ainsi défini : assurez-vous que le texte est suffisamment petit pour ne pas être confondu avec un titre.
Ensuite, copiez et collez à nouveau les éléments de champ de saisie pour créer des champs supplémentaires pour l’adresse électronique, le mot de passe et tout autre champ représentant les données que vous souhaitez collecter lors de l’abonnement. Le regroupement de vos éléments simplifiera ce processus. Ajoutez un élément de bouton en bas de l’écran, et celui-ci sera utilisé pour envoyer le formulaire et terminer la saisie du formulaire.
Avec les flux d’enregistrement, gardez à l’esprit que les longs formulaires et de trop nombreuses questions peuvent dissuader les utilisateurs de s’abonner, réduisant ainsi le taux de conversion. Il est donc impératif de garder ce formulaire clair et concis. Vous pouvez également souhaiter diviser les formulaires individuels en vues distinctes, en concentrant l’attention de l’utilisateur sur une seule étape à chaque écran. Dans ce cas, la vue serait un champ de saisie unique, avec un bouton indiquant Continuer ou Suivant. Essayez de créer un flux selon chaque méthode et d’effectuer un test pour déterminer les meilleures performances pour votre public.
Connexion avec des liens de prototype
L’un des nombreux avantages de la création de wireframes dans Adobe XD est qu’il vous est possible de créer en temps réel un prototype pour vos flux, sans avoir à exporter vos designs vers une autre application.
Pour configurer un lien de prototype, passez en mode Prototype à l’aide des onglets situés en haut de l’écran. Une fois en mode Prototype, si vous cliquez sur un plan de travail ou un élément, une flèche bleue s’affichera et vous pourrez la faire glisser vers la destination de votre choix.
Essayez avec les écrans qui ont été créés jusqu’à présent. Utilisez un déclencheur de type Tap et testez les différentes actions. Pour la conception d’une étape à structure filaire, restez simple avec un élément de type Fondre ou simplement Glisser. L’utilisation d’animations plus complexes peut dévier votre attention de ce que vous essayez de tester dans cette phase du design.
Achèvement du flux
Une fois le flux d’abonnement presque terminé, un autre ensemble d’écrans doit être ajouté pour faire un retour à l’utilisateur quant à la réussite ou non de son abonnement. Les messages de succès et d’erreur sont essentiels à une bonne expérience et ne doivent pas être ignorés dans les wireframes.
Le message de succès s’adapte bien à une page autonome s’affichant lorsque l’utilisateur clique sur le bouton Envoyer. Un écran de traitement apparaît alors, qui permet d’afficher le message de succès. Le message d’erreur fonctionne de la même manière. Cependant, il est plus utile d’afficher l’erreur dans son contexte lorsque cela est possible. Ce qui signifie que, s’il y a un problème avec l’adresse électronique ou le mot de passe, le champ d’entrée sera mis en surbrillance et un commentaire indiquera ce qui peut être corrigé.
Création de l’écran de succès
L’écran de succès peut être créé simplement en copiant le premier écran et en supprimant le bouton d’abonnement et la ligne horizontale. Ensuite, nous remplacerons l’espace réservé carré par une coche pour indiquer le succès. Si vous le souhaitez, vous pouvez également remplacer les espaces réservés de texte par un message réel tel que « Bravo, l’enregistrement est terminé ».
Création de l’écran d’erreur
Pour créer l’écran d’erreur, dupliquez la page du formulaire. Les erreurs devant être affichées en contexte, cette page peut être manipulée pour afficher l’erreur. Pour cet exemple, le champ d’adresse électronique sera le fautif. Sélectionnez ce bloc et mettez en forme le champ d’entrée pour inclure une bordure gris foncé (cette bordure sera probablement rouge dans le design final). À l’aide de l’outil Texte, ajoutez une zone de texte sous le champ d’entrée qui indique « Erreur : format d’adresse électronique non valide » ou un message approprié reflétant l’erreur que vous testez.
D’autres éléments de la page, comme le bouton d’envoi, peuvent être modifiés pour refléter l’erreur ou empêcher toute progression tant que l’erreur n’est pas résolue.
Pour connecter les écrans d’erreur ou de succès au prototype, vous pouvez choisir de les connecter l’un après l’autre ou de dupliquer les autres écrans à partir du flux et de créer deux flux distincts, l’un en cas d’erreur et l’autre en cas de succès. Cela vous permettra de tester les deux workflows avec les utilisateurs et de les répéter.
Vous pouvez également utiliser des rectangles transparents comme points cibles au-dessus du bouton d’envoi, chacun pointant vers l’écran de succès ou d’erreur, pour ajouter un peu de mystère durant le test.
Il s’agit d’un wireframe très basse fidélité, et l’essentiel est de comprendre comment les différents écrans et vues se connectent pour créer un parcours utilisateur. En commençant par regrouper les éléments de base en composants à réutiliser, vous faciliterez la transition vers une plus haute fidélité. Les composants peuvent être remis en forme pour chaque étape du projet et appliqués à l’ensemble du design, ce qui rend l’itération de votre projet plus efficace.
Partage du wireframe pour recueillir des commentaires
Enfin, à l’aide du mode Partager dans Adobe XD, ce flux peut être partagé pour des tests par des utilisateurs à distance ou des commentaires généraux de conception. Une fois le flux sélectionné, choisissez Révision de la conception ou Test utilisateur dans la liste déroulante du type de lien. Ce lien peut ensuite être diffusé et, une fois les itérations terminées, il est facile de le mettre à jour d’un simple clic.
Félicitations, vous venez de créer un wireframe de flux d’abonnement dans Adobe XD. Mettez ensuite vos apprentissages en pratique avec la partie flux de connexion de ce design d’application.
