App cliquable

Qu’est-ce que c’est ?

Dans le monde du développement logiciel, la maquette d’app est la “coquille interactive” de votre projet. C’est un prototype qui simule l’interface utilisateur (UI) et l’expérience de navigation (UX) sans qu’aucune ligne de code ne soit écrite à cette étape.

On parle de maquette cliquable car elle permet de simuler le comportement réel de l’application : on clique sur un bouton, un menu s’ouvre ; on swipe, l’écran change. C’est un “fantôme” de l’application finale : visuellement identique, mais dépourvu de base de données ou de moteur technique.

Les enjeux

L’épreuve de l’écran. Sur un smartphone, l’espace est limité. Maquetter permet de vérifier que vos boutons sont vraiment cliquables et que l’interface ne devient pas un labyrinthe illisible. Si ça ne tient pas sur la maquette, ça ne tiendra pas dans la poche de l’utilisateur.
Le mode d’emploi pour les devs. Un dessin interactif est plus clair qu’un cahier des charges de 50 pages. Ça permet de montrer exactement au développeur comment l’app doit réagir, évitant de découvrir après trois semaines de code que « ce n’est pas du tout ce qu’on s’était dit ».
Le parcours utilisateur. Maquetter permet de voir si l’enchaînement est fluide ou s’il faut dix clics pour une action simple. On répare les erreurs de navigation maintenant, quand modifier un écran ne coûte encore que quelques minutes de dessin.

Trois niveaux de réalisme (Choisissez votre combat)

Selon le temps (et les compétences) dont vous disposez, vous pouvez réaliser votre maquette de trois manières :

Le Low-Fi (papier & découpage) :
- Dessinez vos écrans sur le template fourni (ou sur papier libre).
- L’astuce : Utilisez une application comme Marvel App (POP) pour prendre vos dessins en photo et définir des zones cliquables. C’est ultra-rapide et très efficace pour tester une structure.
Le Mid-Fi (hybride / PowerPoint / Canva) :
- Utilisez des composants graphiques simples (rectangles, icônes) sur un outil que vous maîtrisez.
- L’astuce : Créez des liens hypertextes entre vos diapositives ou vos pages pour simuler les boutons.
Le High-Fi (Figma) :
- Le standard professionnel. Vous dessinez une interface qui ressemble à 100% au produit final.
- L’astuce : Utilisez le mode “Prototype” de Figma pour gérer des animations complexes (scroll, transitions, overlays).

Les grands principes UI (User Interface) à respecter

Même pour une maquette simple, gardez ces règles d’or en tête pour ne pas perdre votre utilisateur :

La hiérarchie visuelle : Tout n’a pas la même importance. Utilisez la taille, la graisse (gras) et la couleur pour guider l’œil vers l’action principale (ex: le bouton “Valider” doit être plus visible que le bouton “Annuler”).
L’habitude : Un bouton doit ressembler à un bouton. Un lien doit ressembler à un lien. Ne réinventez pas la roue : si l’utilisateur doit chercher où cliquer, l’interface est ratée.
La constance : Si vos boutons de validation sont bleus sur l’écran 1, ils ne doivent pas devenir verts sur l’écran 2. Gardez les mêmes polices, les mêmes espacements et le même style d’icônes partout.
Le feedback : L’utilisateur doit savoir qu’il a agi. Dans une maquette cliquable, cela signifie qu’une action (clic) doit toujours déclencher une réaction (changement d’écran, apparition d’un menu).

La méthode “Hands-on” : Passer à l’action

Listez vos écrans clés : (Utilisez votre parcours utilisateur). Ne maquettez pas tout (pas besoin des écrans des sign up par exemple), concentrez-vous sur le “chemin critique” (ex : Inscription → Recherche → Paiement).
Préparez vos composants : Boutons, barres de navigation, champs de saisie.
Reliez les points : Définissez quelle zone de l’écran A renvoie vers l’écran B.
Testez (Le crash-test) : Donnez votre téléphone ou votre souris à quelqu’un qui ne connaît pas le projet. Donnez-lui une mission (ex: “Achète ce produit”) et regardez-le galérer sans l’aider. Notez où il hésite.

Questions à se poser (Pour itérer)

Le tunnel : Combien de clics faut-il pour atteindre l’objectif ? (Moins il y en a, mieux c’est).
La charge cognitive : Y a-t-il trop d’informations sur un seul écran ? Peut-on en supprimer 20% sans perdre le sens ?
L’accessibilité : Les textes sont-ils lisibles ? Les boutons sont-ils assez gros pour être cliqués avec un pouce sur un smartphone ?

Bonus ✨

Une fois vos pages réalisées, vous pouvez faire un mockup photo (voir page dédiée) qui permet d’intégrer votre app dans une photo pour l’intégrer dans un contexte d’utilisation.

Photo mock-up

Voir l’activité

Exemples d'images dans lesquelles intégrer son application

Outils

Nous recommandons l’utilisation de Figma, qui permet simplement de produire des maquettes d’applications ou de sites. La plateforme s’utilise directement en ligne et on permet de collaborer à plusieurs :

http://figma.com

L’application permet aussi de partager un lien pour ‘tester’ l’application. Pour les utilisateurs experts, Figma accepte aussi un grand nombre de plugins qui permettent d’en augmenter les capabilités (cartes géographiques, data, etc.).

Plutôt que de partir de zéro, il existe de nombreuses ressources (templates, outils, etc.) disponibles gratuitement en ligne :

https://www.figma.com/resources/

https://www.figmaresources.com/

https://www.figmafinder.com/

Il existe d’autres outils du même genre comme :

http://proto.io

http://framer.com

D’un point de vue technique, ces outils ne peuvent (en général) pas être convertis directement en un site fonctionnel par un développeur. Il faut ensuite repartir de ‘zéro’. Mais ils peuvent quand-même servir de ‘cahier des charges visuel’ et bien sûr, à valider des idées.

Conseils

Si vous montrez des profils d’utilisateurs, assurez-vous que le visiteur potentiel peut s’y reconnaître. Il existe de nombreux sites qui proposent des images de profils imaginaires (ou là), dessinées ou juste diversifiées.
Concentrez vous sur les pages qui apportent le plus de valeur pour les clients.
Pas besoin de faire 10 types différents d’un même type de page. Par exemple si vous faîtes une appli type ‘bon coin’, pas besoin de faire 10 annonces différentes. Même si vous affichez plusieurs exemples d’annonces, le clic peut envoyer vers la même page.
Comme expliqué plus haut, il existe de nombreuses ressources gratuites. Profitez-en !

Vidéos tutoriel

https://fr.tuto.com/ux/gratuit-maitrisez-les-bases-de-figma-ux,104881.html