Passage obligé de toute création UX sérieuse, le mockup est devenu l’outil de création central que tout designer doit savoir maîtriser. Ce prototypage précoce permet de se focaliser sur les bonnes directions à prendre et donc, réduit les risques de refontes en cours de projet. Voici 7 exemples de mockups qui vous serviront lors de vos créations.
Sommaire
Définition du mockup
Les mockups sont des maquettes graphiques fixes ou animées, qui font généralement suite aux wireframing pour amener le prototypage du graphisme aux prémices de l’interaction. Ces maquettes permettent de valider les flux de navigation et d’identifier dès la création du produit d’éventuelles anomalies dans l’UX. Il est possible de créer facilement des mockups avec Canva par exemple.
Les 4 étapes obligatoires avant tout mockup
Le processus de création de ce mockup regroupe les étapes essentielles qu’on retrouve dans toutes démarches de maquettage et de prototypage. Il s’étend de la définition des besoins à la livraison finale. Ce sont les principales étapes qui vont faire la qualité et la viabilité du mockup.
Définissez les objectifs de la page
Les besoins des utilisateurs couplés aux insights issus de la recherche utilisateur et caractérisés dans les personas permettent de hiérarchiser les contenus et fonctionnalités.
Exemple de plateforme de création de mockup — source capture d’écran de Device shots
Fixez l’architecture de l’information
Cette étape doit être complétée avant de passer au mockup puisqu’elle consiste à structurer l’ensemble des éléments de la page. Un wireframe permettra de visualiser la disposition globale de la page et de définir les relations hiérarchiques entre ses éléments. On utilisera des grilles modulaires pour fixer cette étape.
Sélectionnez les éléments visuels
Quels seront les éléments d’interface (boutons, champs de formulaire, etc.) ? Sont-ils à concevoir, sortent-ils d’un design system ? Ils doivent tous être définis à ce stade en adéquation avec les conventions de l’interface et de leur impact sur l’UX.
Sélectionnez les micro-interactions
Indicateurs de progression, animations de boutons, notifications, ces petits détails prévus pour animer l’interface et qui sont peut-être des spécificités à intégrer sont à prendre en compte avant le mockup.
Le mockup d’une page d’accueil de e-commerce
Mockup de page de e-commerce— source Dribbble
Pour la création des mockups, on emploiera des outils de design graphique comme Figma, Sketch ou encore Adobe XD. Le travail consiste à développer le wireframe avec les éléments visuels précédemment définis, en respectant la charte graphique et ses guidelines, pour obtenir la page telle qu’elle sera dans la réalité.
UX writing : rédiger les textes d’accroche et de micro-copy
Pour chacune des sections, définissez les titres et en-têtes, les textes d’accroche, les CTA, labels et boutons ; ainsi que les éléments de micro-copy comme « Achetez maintenant », « Voir l’offre », « promotions ».
Il est important que ce travail soit fait en premier pour connaître le volume des textes à intégrer afin d’assurer une cohérence de ton et de lisibilité.
Ajoutez à cette étape de rédaction, les messages d’état, de confirmation, d’erreur, alertes et notifications en fonction du parcours utilisateur.
UI design et charte graphique
Structurez la page en appliquant les couleurs, typographies et styles de la charte graphique pour vérifier dès le départ, la cohérence de la structure du mockup avec les pages existantes.
Pour la mise en avant des produits, utilisez des images de qualité équivalentes aux images finales et présentant des produits équivalents dans le style qui sera utilisé par les photographes. Ceci est primordial pour équilibrer la lecture de la page et ne pas détourner l’attention de l’utilisateur des promotions et CTA sur la version finale.
La section promotions doit être visuellement différenciée par des badges, des contrastes renforcés, si elle n’est pas directement l’objet de la section héros. Ne pas oublier les avis clients qui doivent être intégrés de façon à être lisible et accessible.
Mettez en place des micro-interactions et transitions
Ajoutez des micro-interactions dans les CTA (hover, focus) et des transitions pour les carrousels de produits et promotions, afin de rendre la navigation fluide et engageante. La mise en place de ces interactions dès ce stade permettra l’estimation du temps de chargement par les développeurs.
Mockups d’application mobile
Outil de construction de mockup pour mobile — source Freepik
Le mockup pour mobile demande la prise en compte des spécificités d’usage des écrans de smartphones et de tablettes. Les étapes précédentes sont les mêmes que pour tout autre mockup. Nous ne présentons ici que les spécificités.
Intégrer les guidelines des plateformes iOS et Android
Chaque plateforme a ses propres standards de design, de la disposition des éléments aux animations et transitions. Les Human Interface Guidelines d’iOS et le Material Design d’Android sont donc naturellement à prendre en compte puisqu’elles vont déterminer beaucoup de choix.
Les spécificités du mockup pour mobile
Le maquettage d’une application mobile fait apparaître toutes les spécificités d’une apps pour mobile, voici les principales :
- des polices sans-serif pour une clarté de lisibilité, même à faible taille ;
- les couleurs doivent proposer des contrastes élevés pour améliorer la visibilité en extérieur et dans des conditions de faible luminosité ;
- travailler avec un système d’icônes standards comme ceux proposés par Material Design ou Human Interface Guidelines, l’utilisateur sera en terrain connu, ou créer un système original sur les bases requises pour une interface mobile ;
- adaptez les espaces (padding, marges) pour maximiser l’espace utilisable, et assurer des zones de clic suffisantes pour des interactions tactiles.
Mockup pour une application de gestion de tâches
Prenons comme exemple la création d’une application de gestion de tâches. Les écrans du mockup seront : les tâches à faire, le détail des tâches, le calendrier et les paramètres de l’utilisateur.
Prioriser et hiérarchiser les informations de la page tâches à faire
L’utilisateur doit pouvoir trouver ses urgences et priorités à l’ouverture. On mettra alors en place :
- un code couleur, des badges et des tags ;
- une option de filtrage simple.
L’objectif du mockup est de mettre en évidence le volume d’information et son ordonnancement selon les regroupements sur la surface disponible sans surcharge et en rendant l’écran facilement scannable.
Organiser la facilité d’édition de la page détails des tâches
Les champs : description de la tâche, date d’échéance, sous-tâche et pièces jointes doivent apparaître sur un même écran avec des choix de menus déroulant, de champ à remplir, des boutons de marquage d’état (terminé, en cours) et une navigation intuitive pour retourner sur la liste des tâches à faire.
Simplifier la personnalisation de l’écran des paramètres utilisateur
Le choix de la mise en page hiérarchise les préférences de notification, les thèmes (mode sombre ou clair) et la gestion des comptes.
Le mockup sert à faire le choix d’une navigation simple dans ces menus. Les actions de l’utilisateur doivent apparaître directement lorsqu’elles sont effectuées, ce qui implique la mise en place de l’interaction et des micros-interactions de confirmation sur les boutons et menus.
Les impératifs d’un mockup de mobile
Le mockup doit répondre aux gestes tactiles usuels (swipe, tap, long press) de façon intuitive pour une meilleure prise en main de l’app. Il doit faire apparaître les feedbacks visuels de confirmation, d’erreurs, d’alarmes par des animations et des couleurs et les micros-interactions qui vont rendre l’application séduisante, dynamique et donc, agréable à utiliser.
Mockup de tableau de bord (Dashboard)
Exemple d’un mockup de dashboard faisant apparaître l’information prioritaire — source Dribbble
Pour qu’un dashboard soit utilisé, il faut qu’il soit clair, simple, attractif et qu’il recoupe toutes les informations dont l’utilisateur a besoin. Le mockup est donc une étape primordiale pour la vie future du tableau de bord. Changer ou itérer un tableau de bord crée des frictions chez les utilisateurs qui ne retrouvent plus ce qu’ils cherchent. Voici quelques conseils pratiques pour un mockup de dashboard bien construit du premier coup.
Hiérarchisation de l’information
Les informations les plus importantes doivent être mises en évidence pour une perception visuelle immédiate. La hiérarchie de l’information mise en place lors du mockup doit permettre de comprendre et de tester si l’utilisateur trouve les informations qu’il cherche dans le bon ordre et sans surcharge cognitive.
Cohérence visuelle et branding
Le tableau de bord doit s’intégrer à l’identité visuelle de l’application ou du produit tout en utilisant une palette de couleurs réduite, une typographie et des icônes déjà connus. Attention à ce stade, à l’utilisation du tableau de bord à différents écrans.
Interactivité et dynamisme, le moment d’innover
Un tableau de bord doit permettre à l’utilisateur d’interagir avec les données de manière intuitive. Les filtres, les tris, les zooms et les drill-downs sont les fonctionnalités essentielles à mettre en place pour tester l’exploration des données en profondeur et les rendre ludique. Le mockup permet de créer des micro-interactions pour rendre l’UX plus immersive. Produire plusieurs versions à tester peut gagner du temps de développement sur cette étape.
Attention aux dashboards internationaux
Le mockup sert également à simuler les déclinaisons traduites dans différentes langues, différents alphabets et différentes cultures. Si le tableau de bord doit être accessible à des russes, des coréens, des chinois et des européens, chacun dans sa langue, le mockup interactif sera le seul moyen de création possible du tableau de bord.
Mockup de formulaire
Exemple de mockup de formulaires — source Dribbble
Utiliser un mockup pour un formulaire est essentiel pour tester l’interaction et la fluidité de la saisie. Il s’agit donc ici, encore plus qu’ailleurs, d’utiliser le mockup pour faire des tests utilisateur et itérer la maquette.
Les 4 points essentiels du mockup de formulaire
Pour être utile, un mockup de formulaire doit proposer :
- une disposition des champs pour guider intuitivement le regard de l’utilisateur, en hiérarchisant les informations dans un ordre attendu par l’utilisateur ;
- des aides à la saisie, telles que des suggestions automatiques ou des limitations de format ;
- des transitions naturelles entre les champs et prévoir les feedbacks pour chaque étape (états de validation, messages d’erreur) ;
- des points de rupture adaptés pour le responsive design, en veillant à ce que les éléments restent suffisamment grands et espacés sur les écrans de smartphones.
Tests et itérations du mockup de formulaire
Comme le formulaire ne sera pas parfait du premier coup, il vaut mieux organiser son itération.
Évaluation du formulaire
Tester la performance du formulaire en s’appuyant sur des métriques comme le taux de complétion, le temps de remplissage, les erreurs fréquentes et le nombre d’erreurs.
Identification des problèmes
Identifiez les points de friction, les incohérences visuelles et les éléments qui nuisent à la compréhension en interview ou en shadowing.
Multiplier les mockup pour tester différentes versions
La création de nouvelles versions du formulaire permet d’étudier plus rapidement les problèmes mis en évidence lors de la première session de tests utilisateur.
L’incorporation des retours permet de mettre en développement la meilleure version.
Mockups de pop-ups et modales
Proposition de pop-ups et modales pour la création de mockups — Capture d’écran de Figma community
L’efficacité des pop-ups et modales repose sur leur pertinence, leur timing et sur la hiérarchie de l’information qu’ils donnent. Trois points pour lesquels il est pertinent d’utiliser un mockup.
Pertinence et bon timing
L’apparition d’un pop-up ou d’une modale doit être justifiée par le contexte et le moment afin de ne pas interrompre le parcours utilisateur, qu’il s’agisse d’une recherche ou d’une tâche en cours. Le déclenchement de ces éléments doit donc trouver sa pertinence par rapport au comportement de l’utilisateur (action spécifique, intention de sortie, retour).
Dans le cas des pop-ups et des modales, le rôle d’un mockup est de déterminer le moment et l’espace dans lequel le message apparaît. Sans oublier la fréquence pour éviter la lassitude et l’agacement.
Minimiser le contenu, maximisez l’impact visuel
La compréhension doit être rapide, le mockup servira donc ici à affiner le texte contextualisé par rapport au moment de l’apparition des messages. Dans le cas de call-to-action, ils doivent être clairement identifiables comme tels et mis en valeur pour guider l’utilisateur sur l’action souhaitée.
Le mockup des modales et pop-ups est une étape importante dans la mise en œuvre de ces éléments sur une interface. Cependant, des tests A/B en situation réelle permettent d’affiner le procédé par rapport au taux de conversion, par exemple.
Mockup de composants UI
Exemples de composants UI à utiliser dans un mockup — source Dribbble
Ce type de mockup est directement lié à la création du graphisme d’un produit numérique, application ou interface. Il permet de décider du graphisme et de son rôle dans le développement du produit.
Il est donc utile lors de la création d’un nouveau produit ou d’un design system ou lors d’une refonte, lorsque celle-ci doit faire entrer de nouveaux éléments (boutons, menus, champs de saisie, icônes).
À quoi servent les mockups de composants UI ?
Créer des mockups de composants peut servir à :
- vérifier l’atomicité des composants et donc leur réutilisabilité dans différentes configurations ;
- dégager une cohérence visuelle globale, une identité de marque ;
- créer une hiérarchie visuelle ;
- tester la compatibilité des composants avec les normes d’accessibilité WCAG ;
- tester la réactivité et le responsive sur différents écrans (taille et résolution) ;
- rendre les composants flexibles et extensibles pour qu’ils soient suffisamment personnalisables et adaptables sans refonte complète.
On l’aura compris, les mockups de composants sont les outils essentiels à la bonne évolution d’une création puisqu’ils vont servir d’une part à montrer et tester le produit final, mais ce seront également des outils incomparables pour travailler entre équipes de création, de développement et parties prenantes.
Mockup de cartes
Exemple d’un mockup de carte animée — source Dribbble
Lors de la conception d’un mockup de cartes, la hiérarchie visuelle de l’information est essentielle puisqu’une carte est utilisée pour un objectif précis. Le regard de l’utilisateur de l’utilisateur doit donc être guidé vers les éléments essentiels qu’il cherche. Une carte des stations de recharge pour voiture électrique ne sera pas conçue comme une carte des plus beaux parcours touristiques puisque le nombre de points à renseigner et le volume d’information seront différents.
Structure de la carte
La première étape du mockup dans la hiérarchisation de l’information consiste à structurer la carte suivant l’objectif recherché. La structure de la carte doit permettre de distinguer immédiatement les informations principales des détails secondaires. Sur l’exemple en image, les logos de marque suffisent pour indiquer les magasins à un utilisateur qui cherche des articles de sport.
Le mockup utilisera des variations de taille d’icône en survol, des couleurs typographiques pour faciliter la scannabilité rapide du contenu.
Surcharge visuelle
Zooms, menus déroulants, pop-ups… Le mockup sert à trouver l’espacement et le rythme visuel justes pour rendre la carte lisible et donc, à éviter une surcharge visuelle. Suivant la hiérarchisation de l’information, son volume et la profondeur qu’il faut lui donner.
Le mockup reste le seul moyen pour tester s’il faut un système de filtre sur l’ensemble ou un menu déroulant par point d’intérêt.
Interactivité des feedbacks
Les états de la carte, comme les effets au survol ou au clic, indiquent aux utilisateurs les endroits où elle est interactive et signifie qu’une action est possible sans être intrusive. Le mockup d’une carte sert à ordonner l’utilisation des micro-interactions en leur donnant un sens et définir ce qui guidera intuitivement l’utilisateur.
Par exemple, si en survolant Chartres, l’utilisateur s’aperçoit qu’il peut ouvrir l’ensemble des points de recharge pour sa voiture électrique, il ira directement à Nice, pour effectuer la même manipulation. Il pourra par la suite cliquer sur la station de recharge qu’il recherche pour trouver son emplacement exact, les temps de recharges, les prix, le nom du fournisseur, etc.
L’utilité d’un mockup interactif de carte est donc une garantie de bon fonctionnement et une assurance pour les parties prenantes du respect de l’identité de marque et des possibilités marketing qu’elle offre. Comme pour d’autres mockups, celui des cartes est essentiel pour tester le responsive sur les écrans mobiles.
L’utilité du mockup entre les parties prenantes
Exemple de présentation de mockup avec composants sous forme de carnet de tendances — source Dribbble
Quelle que soit sa spécificité, un mockup est un outil de travail en équipe. Il permet de parler sur une base concrète d’une création en cours. Il est donc naturel qu’il soit soumis à des phases d’affinage par itérations. Les retours des parties prenantes et ceux des utilisateurs obtenus par la recherche UX permettent de s’assurer que le produit répond aux attentes et au cahier des charges du projet.
Deux choses à ne pas oublier
Ne pas oublier l’accessibilité lors de la création des mockups. Il faut garantir que tous les éléments d’un mockup respectent les normes d’accessibilité, avec des contrastes suffisants et une navigation fluide par clavier ou lecteur d’écran. Des indices de focus et une gestion cohérente des labels sont également indispensables pour rendre le formulaire accessible et inclusif.
La vie du mockup ne s’arrête pas au moment où il est approuvé, une fois finalisé, il doit être livré aux développeurs, accompagné d’une documentation précise. Cette documentation doit détailler les interactions, les comportements attendus de chaque élément et les contraintes techniques à respecter.