App cliquable
Prototyper un site ou une application pour la tester
La réalisation de maquettes ne fait pas perdre de temps. Au contraire, elle en fait gagner, même si vous n’êtes pas designer.
Les maquettes vous permettent d’établir un cahier des charges visuel de votre applications. Même s’il agit de représentations purement visuelles, elles permettent aussi de définir en amont la logique de l’application à implémenter.
Lorsque vous développez sans maquettes, vous n’avez qu’une idée grossière du résultat attendu, vous passez généralement beaucoup de temps à revenir sur vos pas pour ajuster telle ou telle fonctionnalité. Ces petites ajustements vont généralement plus loin que la modification d’une couleur ou taille d’un élément et vous demandent parfois de revoir la logique de votre application.
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.
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 peut collaborer :
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/
Il existe d’autres outils du même genre comme :
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