Points de départ pour le mobile
Vous cherchez des modèles gratuits de conception d'application mobile ? Un modèle peut donner une structure aux écrans de votre conception d'application, mais il ne peut pas déterminer quelles tâches, quels contenus et quels états comptent pour vos utilisateurs. Utilisez-le comme une ébauche à tester, pas comme un produit fini.
L’intérêt d’un modèle réside dans la structure qu’il vous permet d’examiner. Passez l’écran en revue avant de consacrer du temps aux finitions visuelles.
Définissez l’action que l’écran doit permettre, comme prendre rendez-vous. Choisissez un modèle dont le parcours d’information est comparable, plutôt qu’un modèle aux couleurs simplement attrayantes.
Rédigez des libellés, des textes de boutons et des exemples d’entrées réalistes. Vous repérerez ainsi les zones trop étroites et les choix peu clairs que le texte provisoire peut masquer dans une ébauche de conception d'application.
Esquissez ce qui apparaît avant le chargement des données, lorsque la liste est vide, après une erreur et après une action réussie. L’écran principal soigné d’un modèle couvre rarement tous les états.
Différents points de départ répondent à différents besoins : trouver une mise en page, élaborer un écran ou déterminer les fonctionnalités de conception dont vous avez besoin.
Utilisez cette comparaison étape par étape pour déterminer si un modèle convient à la tâche avant d'en retravailler les détails.
| Approche basée sur un modèle | Approche à partir d'un écran vierge | |
|---|---|---|
| Première étape | Trouvez une mise en page organisée autour d'une tâche utilisateur similaire. | Énumérez la tâche, les informations nécessaires et l'action principale. |
| Structure de l'écran | Examinez la hiérarchie prédéfinie et supprimez les blocs superflus. | Organisez le contenu par ordre d'importance avant d'ajouter des éléments décoratifs. |
| Contenu | Remplacez chaque libellé et chaque image d'exemple par un contenu plausible. | Rédigez des libellés réels tout en définissant la mise en page. |
| États d'interaction | Ajoutez les vues manquantes pour les états vide, d'erreur, de chargement et de réussite. | Prévoyez ces états en même temps que la vue par défaut. |
| Cohérence visuelle | Vérifiez que la typographie, les espacements et les contrôles hérités conviennent toujours. | Définissez au fil du travail un petit ensemble de règles réutilisables. |
| Cas d'utilisation idéal | Utile lorsque la tâche correspond étroitement à un modèle existant. | Utile lorsque le parcours ou le contenu est particulièrement spécifique. |
Un modèle mobile peut accélérer une première ébauche, mais ses lacunes dépendent des personnes qui utiliseront l'écran et de ce qui se passe après l'action principale.
Vous devez présenter un concept de réservation avant que les règles du service soient définies.
Conservez la structure générale du modèle, puis signalez les hypothèses concernant la disponibilité et l’annulation pour qu’elles soient examinées.
Un écran de compte mobile doit respecter un système de composants existant.
Utilisez le modèle comme une liste de contrôle du contenu, et non comme une référence définitive pour la typographie ou les éléments d’interface.
Vous voulez comprendre pourquoi un exemple de navigation fonctionne.
Recréez un parcours avec du contenu réaliste et comparez la manière dont chaque itinéraire modifie l’écran.
Plusieurs personnes examinent la même orientation initiale de conception d'application.
Mettez-vous d’accord sur la tâche principale et les états manquants avant de discuter des couleurs ou des images.
Il s’agit de références illustratives, et non d’une transformation documentée ou d’un résultat généré. Comparez la hiérarchie et demandez-vous si l’orientation mobile laisse assez de place aux libellés réels, aux petits écrans et aux états autres que ceux par défaut.
Référence structurelleOrientation du modèle mobileAvant de poursuivre votre conception d'application, notez l’objectif de l’utilisateur, l’action principale de l’écran et un état que le modèle ne montre pas. Utilisez ce cahier des charges au point d’entrée du navigateur et vérifiez les options qui y sont disponibles.
Commencez par la tâche de l’utilisateur, puis cherchez une mise en page dont le parcours est similaire. Remplacez immédiatement le contenu d’exemple pour voir si la structure convient toujours à votre écran.
Généralement, non. Un modèle peut illustrer un écran principal, mais votre application nécessite aussi des choix concernant la navigation, l’accessibilité, le contenu et les états vides ou d’erreur.
Modifiez les libellés, les données d’exemple et l’action principale avant d’ajuster les couleurs. Un contenu réaliste permet de repérer plus facilement les problèmes d’espace et de hiérarchie.
Vous pouvez utiliser un modèle comme référence pour planifier et examiner un écran dans un navigateur. La possibilité d’importer ou de modifier un fichier de modèle dépend de l’outil et du format du fichier ; vérifiez ces détails avant de vous engager.
Comparez l’action principale, l’ordre du contenu et la navigation du modèle avec la tâche que votre utilisateur doit accomplir. Si vous devez remplacer la majeure partie du parcours, partir d’un écran vierge peut être plus simple.