Tutoriel sur les interfaces
Une méthode pratique pour apprendre à concevoir l’interface utilisateur d’une application
Partez d’une tâche utilisateur, puis transformez-la en quelques écrans reliés entre eux. Ce tutoriel de conception d'application vous propose une démarche à suivre dans un navigateur, ainsi que les points à vérifier avant de partager une ébauche.
prérequis
Choisissez un public, un appareil et une tâche précis avant de dessiner les écrans. Notez ce que l’utilisateur doit accomplir, les informations dont il a besoin et les critères qui vous permettront de reconnaître une tentative réussie.
- conception d'application ou conception d’interface utilisateur Distinguez les décisions qui concernent l’interface de celles qui relèvent de l’expérience globale du produit.
- modèles gratuits de conception d'application mobile Utilisez un modèle mobile comme point de départ, tout en vérifiant que sa disposition convient à votre tâche.
- logiciel de conception d'application Comparez les fonctionnalités à rechercher pour choisir un outil dans lequel créer vos ébauches d’écrans.
étapes numérotées
Passez du comportement à la structure, puis aux détails visuels. Vous pouvez répéter ces étapes chaque fois qu’un test révèle un choix déroutant.
-
1
Définir le parcours principal
Choisissez un seul objectif, comme enregistrer une dépense ou retrouver un article sauvegardé. Notez le point de départ de l’utilisateur, l’action qu’il entreprend et la confirmation qu’il attend. Déterminez les informations nécessaires et laissez les fonctionnalités secondaires de côté pour ce premier parcours. La conception d'application reste ainsi ciblée : si un écran n’aide pas l’utilisateur à atteindre son objectif, il n’a peut-être pas sa place dans cette ébauche.
-
2
Cartographier les écrans et les décisions
Esquissez le plus petit ensemble d’écrans permettant d’accomplir le parcours. Tracez des flèches pour représenter la navigation, notamment un chemin de retour et un moyen de corriger une erreur. Repérez les points de décision, comme le choix d’une catégorie ou la validation d’une modification. Avant de peaufiner l’interface, suivez vous-même les flèches : peut-on atteindre l’objectif sans devoir deviner où appuyer ensuite ?
-
3
Créer une mise en page sommaire
Disposez les titres, les commandes, le contenu et la navigation sous forme de blocs approximatifs. Placez l’action principale au même endroit sur chaque écran et donnez-lui un libellé clair ; regroupez les champs associés et placez l’aide près du choix qu’elle explique. Travaillez aux dimensions de l’appareil choisi, mais examinez aussi les écrans chargés. En conception d'application, un écran vide bien ordonné est moins utile qu’une mise en page qui fonctionne avec un contenu réaliste.
-
4
Appliquer un système visuel
Choisissez un petit ensemble de tailles de police, d’espacements et de couleurs, chacun ayant un rôle distinct. Présentez les actions et les états récurrents de la même manière pour que les utilisateurs retrouvent leurs repères d’un écran à l’autre. Vérifiez le contraste, la lisibilité du texte, l’espacement des zones tactiles et la compréhension des informations sans recours à la couleur seule. La cohérence visuelle facilite la lecture de l’interface, mais ne peut pas corriger un parcours peu clair.
-
5
Évaluer à l’aide d’une tâche
Montrez l’ébauche interactive à une personne qui ne connaît pas votre plan. Demandez-lui d’accomplir la tâche initiale sans l’aider, puis notez les moments où elle hésite, se trompe de chemin ou ne remarque pas un retour d’information. Revoyez les libellés ou le parcours à l’origine du problème, puis faites-lui refaire la tâche. Considérez chaque évaluation comme une source d’informations pour la prochaine décision de conception d'application, et non comme un vote sur les couleurs.
erreurs courantes et corrections
Un écran peut sembler terminé alors que des comportements essentiels restent à définir. Ces vérifications révèlent les lacunes avant que vous consacriez davantage de temps aux finitions visuelles.
Ne concevoir que le parcours idéal
Une maquette soignée ne montre pas ce qui se passe lorsqu’un champ est vide, qu’une recherche ne renvoie aucun résultat ou qu’une requête échoue. Sans ces états, le parcours prévu peut s’interrompre au premier imprévu.
Que faire à la place
Ajoutez un état vide, un état d’erreur et un état de réussite pour la tâche principale. Indiquez l’action suivante proposée dans chaque état et prévoyez un chemin permettant de reprendre la tâche.
Supposer que la mise en page fonctionnera partout
Une ébauche dans un navigateur ne permet pas de déterminer comment l’interface s’affichera et se comportera sur chaque appareil, dans chaque orientation, avec chaque clavier ou technologie d’assistance. Le texte peut passer à la ligne différemment, et des commandes qui semblent assez espacées peuvent devenir difficiles à utiliser.
Que faire à la place
Examinez les mises en page étroites et larges avec des textes réalistes. Vérifiez l’ordre de navigation au clavier, les libellés et les interactions sur les plateformes que vous comptez prendre en charge.
Confondre une ébauche avec un produit fonctionnel
Les écrans montrent le comportement prévu ; ils ne mettent pas en œuvre le stockage des données, l’authentification, les notifications ni les interactions propres à chaque plateforme. La conception d'application ne suffit pas à confirmer la faisabilité d’une exigence technique.
Que faire à la place
Notez les hypothèses à côté des écrans concernés et examinez-les avec un ingénieur avant de considérer le parcours comme un plan de mise en œuvre.
Tester les préférences visuelles plutôt que la facilité d’utilisation
Demander aux gens s’ils aiment l’interface révèle rarement pourquoi ils ne parviennent pas à terminer une tâche. La familiarité et les préférences de couleur peuvent détourner l’attention d’un libellé manquant ou d’une étape de navigation inattendue.
Que faire à la place
Donnez un objectif aux personnes qui testent l’interface, observez leurs actions et notez le point de confusion avant de leur demander leur avis. Corrigez un problème à la fois, puis refaites le test.
conseils avancés
Une fois le parcours principal fonctionnel, réexaminez-le en tenant compte des textes plus longs, des tâches interrompues et des personnes qui reviennent utiliser l’application. Vérifiez qu’une même action porte le même nom sur tous les écrans, qu’il est possible d’annuler un choix lourd de conséquences et que les confirmations expliquent ce qui s’est passé. Conservez un bref historique des décisions et des hypothèses non résolues parallèlement à votre travail de conception d'application. App Design mène à un processus dans le navigateur où vous pouvez explorer l’étape suivante ; vérifiez-y les outils disponibles et les conditions d’accès avant de compter sur une fonctionnalité particulière.
Faites évoluer votre ébauche d’écran dans un processus accessible depuis le navigateur
- Choisissez une tâche utilisateur clairement définie pour la prochaine ébauche.
- Vérifiez les autres états avant d’ajouter des écrans.
- Validez le comportement sur l’appareil prévu.
FAQ du tutoriel
Choisissez un public et une tâche, puis définissez les écrans nécessaires pour l’accomplir. Commencez par des mises en page sommaires plutôt que par des couleurs soignées. Vérifiez que le parcours entre ces écrans est logique avant de peaufiner l’identité visuelle.
Définissez d’abord le parcours pour que chaque écran ait une raison d’être. Un schéma simple indiquant le point de départ, les décisions et le résultat vous aidera à repérer les étapes manquantes. Vous pourrez ensuite organiser le contenu et les commandes à chaque étape du parcours.
Un processus dans le navigateur peut servir à planifier, ébaucher et examiner une interface sans imposer d’emblée l’installation d’un logiciel sur ordinateur. Vérifiez les fonctionnalités exactes de tout produit proposé en lien sur son propre site. Vous devrez également tester l’interface obtenue sur les appareils et les plateformes que vous comptez prendre en charge.
Prévoyez assez d’écrans pour montrer la tâche principale du début jusqu’à la confirmation, ainsi que toute étape essentielle de décision ou de résolution d’un problème. Il n’existe pas de nombre d’écrans universel : c’est la tâche qui détermine ce qui est nécessaire. Évitez d’ajouter des écrans uniquement pour donner à la conception d'application une apparence plus aboutie.
Demandez à une personne qui ne connaît pas l’ébauche d’accomplir une tâche précise, sans lui indiquer où appuyer. Observez ses hésitations, ses erreurs de parcours et les retours qu’elle ne remarque pas, puis corrigez la cause de chaque problème. Une ébauche visuelle réussie doit rendre la prochaine action compréhensible, et pas seulement présenter une apparence cohérente.