web design

Maquettes et prototypes pour application mobile : méthodologie

Si un projet de création d’une application mobile commence évidemment toujours par une idée… Après l’idée, le wireframe, la maquette et le prototype sont les outils des designers pour vous aider à construire votre application.

Anne-Laure CompainAnne-Laure Compain

Anne-Laure Compain

Graphiste chez Snoweb

Publié le 21 avril 2021 11:13 (Mise à jour le 19 novembre 2021 16:13)

Mais pourquoi passer par ces étapes ? Et quelle est la différence entre une maquette, un wireframe et un prototype ?

Dans cet article, nous allons faire le point sur ces notions capitales pour concevoir des maquettes mobiles. Nous vous donnerons également quelques conseils pour y parvenir.

➡️ Pour enfin transformer votre idée en une application mobile à l'écoute de ses utilisateurs !

Maquette application mobile

À quoi servent les maquettes mobiles ?

Pour être très concis, on pourrait vous dire que la maquette vous permet de mettre en forme une idée ! Et c'est le cas ! Grâce aux maquettes, le designer, en charge de les concevoir, fait parler sa créativité… Et à ce stade, on est encore bien loin de pouvoir tester l’application sur son propre mobile !

En fait, avec la maquette, on commence par se mettre à la place de l’utilisateur final. On va réfléchir comme l'utilisateur pour le créer une application intuitive et simple d'utilisation avec une expérience utilisateur optimum. À l’aide d’un schéma qui n’est pas complètement détaillé (c’est normal, c’est une maquette !), on constate déjà un certain nombre de choses !

  • Le bouton est-il bien placé ici ?
  • Est-ce que ce bloc de texte est réellement nécessaire ?
  • À quel endroit l’utilisateur pourra-t-il facilement trouver de l’aide ?

Les maquettes permettent aussi de travailler sur l'expérience utilisateur de l'application pour ensuite faire l'UI, le joli !

utilisateur qui n achete pas

Une mauvaise expérience sur une application fait partir l'utilisateur

Travailler l'ergonomie et l'expérience utilisateur est primordial pour bien mettre en avant l'information. Un refonte permet de corriger les problèmes qui dérangent l'utilisateur.

Snoweb maîtrise les besoins des utilisateurs pour vous permettre d'améliorer vos ventes.

En savoir plus

Les étapes de réalisation d’une maquette d’application mobile

Étape 1 : Le wireframe

Le « wireframe » ou maquette fonctionnelle en français, est une ébauche. Plus précisément, c’est un croquis qui représente la structure de votre application. À ce stade, pas de couleur, ni détail. On pose simplement les éléments :

  • zones de textes
  • emplacement des liens
  • boutons
  • call-to-action

Et on indique les connexions entre eux.

Maquette application mobile wireframe

Étape 2 : La maquette

Avec la maquette, l’immersion est plus facile ! En effet, ici on commence à entrer plus dans le détail visuel de l’application. La maquette présente la structure, le contenu et les diverses fonctionnalités présentes.

On retrouve alors toutes les vues de l'application. Des images par défaut sont ajoutés et du texte de substitution est ajout afin de visualiser tous les éléments. La maquette peut donc regrouper les éléments suivants :

  • menu
  • boutons d'action
  • boutons de navigation
  • images
  • compte utilisateur
  • panier
  • tunnel d'achat
  • présentation d'un produit
  • plan
  • statistiques
  • ...

Afin d'avoir un rendu le plus réel possible, l'UX designer va travailler sur un petit format d'écran. Si vous vous demandez pourquoi, c'est pour être sur que toutes les informations sont visibles à l'écran ! En effet, les écrans de téléphone sont de plus en plus grands, mais tous les utilisateurs n'ont pas les derniers téléphones sortis, il faut donc penser aux modèles plus ancien et/ou avec des écrans plus petits.

Par exemple, si sur un iPhone 12 on peut afficher à l'écran 6 produits, sur un iPhone SE, on ne peut en afficher que 4, il faut donc penser à un scroll dans la vue.

Maquette application mobile test

Étape 3 : Le prototype de l’application

Enfin, le prototype de l’application, aussi nommée maquette interactive, est la version la plus aboutie avant de passer au développement. Cette fois, ça bouge ! Le prototype montre à la fois le contenu visuel mais aussi les interactions entre les éléments (boutons, pop-up, menus…). C’est en quelque sorte le premier test de l’application.

Pour faire un parallèle avec la maquette, la maquette montre les interactions entre les vues par des flèches, alors que le prototype le fait réellement.

Exemple maquette application mobile

Conseils sur la conception d'une maquette mobile parfaite

Pour réussir ses maquettes mobiles, il est préférable de suivre un ordre bien précis :

  1. Bien suivre un cahier des charges. Snoweb vous explique dans son article comment le concevoir et quoi mettre dedans. Pour être bref, le cachier des charge détaille toutes les fonctionnalités fonctionnelles et technique d'un projet.
  2. Commencez par définir les menus et ensuite passez à l’organisation écran par écran
  3. En deuxième lieu, réfléchissez et délimitez les zones d’interaction de l’app. Quels sont les liens entre les éléments de la maquette ? Quelle action doit faire l’utilisateur pour interagir avec l’élément (cliquer, glisser…) ?
  4. Sachez quelles sont les fonctionnalités importantes à prévoir ? Par exemple : un espace utilisateur. Oublier une telle fonctionnalité pourrait vous coûter cher !
  5. Pensez UX avant UI ! L’expérience utilisateur est tout aussi importante voire plus importante que le design. L’utilisateur ne doit pas rester bloqué devant un écran sans comprendre ce qu’il doit faire…
  6. Définissez les couleurs à utiliser car elles ont une place importante dans l’expérience utilisateur. Trouvez les bonnes couleurs qui font passer le bon message de marque. Par ici, retrouvez quelques idées pour choisir la couleur parfaite dans votre projet.,

Les pièges à éviter au moment de la construction d’une maquette mobile

  • Ne perdez pas de temps à trop détailler votre maquette. Partez sur une maquette simple que vous peaufinerez par la suite, une fois les premiers écrans validés. Avec la maquette, gardez en tête : « Done is better than perfect » !
  • N’oubliez pas une fonctionnalité ! Un oubli peut vite faire perdre du temps au développeur car une fonctionnalité peut changer toute l’arborescence de l’app ! Un exemple simple est celui du paiement. Nul doute que si vous l’oubliez au départ, le développeur ne pourra pas prévoir à temps les normes et contraintes de sécurité à mettre en place.

Maquette pour app’ : comment trouver l’inspiration ?

Il existe de nombreux site qui répertorient des ressources et inspirations pour concevoir des maquettes d’app mobiles. Voici plus précisément nos trois sites ressources préférés :

Avec quels logiciels réaliser une maquette d’application mobile ?

Vous savez presque tout sur les maquettes, wireframe et prototypes… Désormais, il est temps de se retrousser les manches et de passer à l’action avec les meilleurs logiciels de design !

D’abord, dans la suite Adobe, très prisée des designers, le logiciel Adobe XD est l’outil parfait pour créer vos maquettes !

💙 Sketch est notre coup de cœur ! Effectivement, cet éditeur de graphiques vectoriels rend le travail de maquettage très rapide. Une fois que l’outil est maitrisé, c’est un gain de temps assuré ! Par exemple, une fois que vous avez créé le bouton type d’action « connexion » ou « enregistrer », il devient un composant que vous pourrez utiliser à l’infini.

Pour présenter vos maquettes interactives, Invision est une plateforme vraiment très pratique.

J'ai besoin d'aide en web design pour larefonte de mon site internet

Articles en liens avec le web design

Retrouvez tous nos articles sur le web design.

Inscrivez-vous à notre newsletter web design

Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.

Nos derniers articles sur le web design

Inscris-toi à notre newsletter et reçois les dernières nouveautés et astuces en lien avec le web design.

pop-up newsletter web design