Maquettes et prototypes pour application mobile : méthodologie

1. À 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é dans le but de mettre en avant l'idée de l'application mobile… 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 lui 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 !

2. 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, souvent sous forme de rectangles :

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

On indique aussi toutes les connexions entre les éléments par des flèches.

É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
  • les diverses fonctionnalités

On retrouve alors toutes les vues de l'application. Des images d'intention et du texte de substitution sont ajoutées afin de visualiser tous les éléments.

La maquette peut donc regrouper les éléments suivants :

É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
• 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.

3. 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. Pour être bref, le cahier des charge détaille toutes les fonctionnalités design, 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.,

4. 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.

5. 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 :

• Le site uplabs
• Lapa Ninja : des idées pour les designers
• La référence UX Planet

6. 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. C'est d'ailleurs notre coup de coeur 💙 et notre outil de prédilection !

Sketch est aussi beaucoup utilisé ! 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éé un bouton type d’action « connexion » ou « enregistrer », il devient un composant que vous pourrez utiliser à l’infini. Pas besoin de refaire son design (couleur et taille de police).

Pour présenter vos maquettes interactives, Invision est une plateforme vraiment très pratique. Sinon vous pouvez partager votre fichier interactif Adobe XD.