- Apprendre les pratiques standard en matière d'interface utilisateur
- Créer un prototype papier de votre application
- Obtenir l'avis des utilisateurs à l'aide de votre prototype
Voici les activités de cette leçon :
PROTOTYPING
Maintenant que vous avez une idée de votre produit minimum viable, il est temps de réfléchir à la forme que prendra votre projet et d'en esquisser quelques idées.
A prototype est un premier modèle de quelque chose.
Les développeurs d'applications réalisent généralement un prototype papier de leur application avant de commencer à coder.
Un prototype papier est une représentation dessinée à la main de l'interface utilisateur de votre application. Il comprend généralement des dessins de chaque écran de votre application, décrivant différents états.
POURQUOI PROTOTYPE ?
- Vous pouvez rapidement communiquer vos idées de manière visuelle.
- Il s'agit d'une collaboration !
- Lorsque vous travaillez sur papier, c'est plus décontracté et les conversations naissent de l'expérimentation.
- Ce n'est pas cher !
- Vous n'avez pas besoin de dépenser beaucoup de temps et d'argent
- Vous n'avez pas besoin d'avoir accès à un ordinateur ou à l'Internet.
- Il n'est pas nécessaire d'être un expert technique pour cette partie du processus.
- Vous pouvez voir comment vos utilisateurs réagissent à votre prototype et apprendre rapidement ce qui peut ou ne peut pas fonctionner dans votre conception.
- Les décisions de conception peuvent être confirmées avant que vous ne passiez du temps à développer et à coder votre application.
Découvrez comment d'autres équipes de Technovation Girls ont créé des prototypes papier et numériques dans cette vidéo !
Conseil du mentor
Meilleures pratiques : Lorsque vous initiez les élèves aux prototypes en papier et en carton, insistez sur l'importance de commencer par des modèles simples et peu coûteux pour tester les idées. Par exemple, "Les prototypes en papier et en carton sont comme des ébauches de votre conception. Ils vous aident à voir comment votre idée se présente et fonctionne avant d'en faire une version finale. Ces modèles simples vous permettent d'apporter rapidement des modifications et de déterminer ce qui fonctionne le mieux.
Le prototype papier peut être utilisé pour recueillir les réactions des utilisateurs potentiels (membres de la famille, autres mentors, amis, membres de la communauté, etc.) Ce retour d'information peut faire partie du retour d'information inclus dans les documents de soumission finaux.
Les vidéos suivantes montrent un exemple de projet de prototypage avec le matériel correspondant (à gauche) et le processus de test avec un prototype en papier (à droite).
Questions directrices à poser aux élèves :
Pourquoi est-il utile de créer un prototype simple avec du papier ou du carton avant de fabriquer un produit final ?
Comment la réalisation d'une maquette en papier ou en carton peut-elle vous aider à améliorer votre conception ?
Quelles sont les choses que vous pourriez apprendre en testant un prototype papier et que vous ne sauriez pas autrement ?
Les conseils des mentors sont fournis grâce au soutien de l'AmeriCorps.
ÉLÉMENTS DU PROTOTYPE
Garder ces éléments à l'esprit lors de la création de votre prototype papier. Survolez chaque carte pour en savoir plus.
Utilisateurs
Utilisateurs
Types d'appareils
Types d'appareils
Téléphone ou tablette ?
Accessibilité
Accessibilité
Cohérence
Cohérence
INTERFACE UTILISATEUR
La réalisation de votre prototype consiste à déterminer comment l'utilisateur interagit avec votre application. Le terme pour cela est interface utilisateur ou IU. Elle comprend tous les éléments tels que les boutons, les zones de texte et les curseurs qui permettent à l'utilisateur d'utiliser votre application.
Un autre terme pour la conception de produits numériques est L'expérience de l'utilisateure ou UX. Chacun de ces termes est expliqué ci-dessous.
Interface utilisateur
La façon dont les utilisateurs interagissent avec votre application. Il s'agit de tous les éléments tels que les boutons, les zones de texte et les curseurs qui permettent à l'utilisateur d'utiliser votre application.
La conception de l'interface utilisateur vise à rendre votre application visuellement attrayante, intuitive et facile à utiliser.
Expérience de l'utilisateur
La façon dont les utilisateurs expérimentent votre application. Elle inclut l'interface utilisateur, mais concerne davantage les émotions, les attitudes et le comportement des utilisateurs.
La conception UX est axée sur les besoins et les objectifs de l'utilisateur et sur l'amélioration de son expérience globale.
CARACTÉRISTIQUES DE L'INTERFACE UTILISATEUR
Voici quelques éléments clés de l'interface utilisateur d'une application mobile
NAVIGATION
La navigation permet aux utilisateurs de trouver ce qu'ils cherchent dans une application. Voici quelques exemples d'options de navigation.
CONTENEUR
Ces composants permettent de regrouper le contenu. Ils facilitent la disposition des parties de l'écran, ainsi que le masquage et l'affichage de certaines parties.
ENTRÉE
Les composants de saisie permettent à l'utilisateur de saisir des informations dans l'application. Voici quelques exemples.
INFORMATION
Ces composants permettent à l'application de partager des informations avec les utilisateurs.
UTILISER DES ÉLÉMENTS STANDARD
Vous voudrez peut-être que votre application soit différente pour vous démarquer de vos concurrents. Cependant, l'utilisation d'éléments standard peut aider vos utilisateurs à comprendre plus rapidement comment utiliser votre application.
Par exemple, la plupart des utilisateurs connaissent le menu déroulant. Vous pourriez concevoir un nouveau type de menu, mais il risquerait d'être déroutant pour les utilisateurs. Pour faciliter la tâche de vos utilisateurs, contentez-vous d'utiliser des éléments qui leur sont familiers.
STOP & TRY
- Téléchargez une nouvelle application sur l'app store dès maintenant.
- Si vous avez besoin d'inspiration, essayez AllTrails (iOS ou Android) ou Blinkist (iOS ou Android)
- Quels sont les composants mentionnés ci-dessus qu'il utilise ?
- Essayez d'utiliser l'application pendant environ 5 minutes.
- Combien de temps vous a-t-il fallu pour comprendre comment l'utiliser ?
Regardez cette courte vidéo avec Melissa Powel et Mariam Shaikh de Google sur l'esquisse et le prototypage papier.
ACTIVITÉ 1 : PROTOTYPE SUR PAPIER
Esquissez les écrans de votre application
- Comment les utilisateurs navigueront-ils d'un écran à l'autre ?
- Comment entreront-ils les informations nécessaires à l'application ?
- Comment les informations seront-elles affichées ?
- Comment sera-t-il présenté de manière esthétique ?
- Pensez à la palette de couleurs, à la police de caractères, au logo
OBTENIR UN RETOUR D'INFORMATION
Maintenant que vous avez un objet physique pour représenter votre solution, il est temps de recueillir les commentaires des utilisateurs !
Les utilisateurs potentiels doivent l'essayer et vous donner leur avis en toute honnêteté .
Que voulez-vous apprendre en testant avec les utilisateurs ?
Une méthode :
- Donnez aux utilisateurs une série de tâches à accomplir avec votre application et voyez s'ils peuvent le faire sans votre intervention.
- Un membre de l'équipe peut jouer le rôle d'"ordinateur"
- modifie les écrans ou certaines parties des écrans en fonction des interactions avec l'utilisateur
- Un autre membre de l'équipe est chargé de prendre des notes
- écrit ce que l'utilisateur fait et ses commentaires et réactions.
- Si vous en avez l'autorisation, vous pouvez également enregistrer la session de test.
N'oubliez pas que vos testeurs sont là pour vous aider ! Ne jugez pas et n'intervenez pas dans leurs interactions (à l'exception de l'"ordinateur" qui répond/modifie le prototype en fonction des actions).
Accueillez leurs commentaires avec reconnaissance.
Voici un excellent exemple de test utilisateur pour une application destinée à un atelier de réparation de vélos.
ACTIVITÉ 2 : OBTENIR UN RETOUR D'INFORMATION
Testez votre prototype papier avec 2 ou 3 utilisateurs
- Montrer le prototype aux utilisateurs.
- Demandez aux utilisateurs d'effectuer une tâche avec le prototype.
- Laissez-les essayer d'accomplir la tâche sans aide.
- Un membre de l'équipe peut jouer le rôle de "l'ordinateur" et réagir à ses actions.
- Un autre membre de l'équipe (ou deux) prend note de ce que font les utilisateurs, de leurs commentaires et de leurs réactions.
RÉFLEXION
Nous vous recommandons de conserver votre prototype sur papier. Vous devrez vous y référer tout au long de l'élaboration de votre projet. Vous devriez également prendre des photos de votre prototype.
RÉVISION DES TERMES CLÉS
- Prototype - premier modèle d'un produit
- Prototype papier - une représentation dessinée à la main de ce à quoi ressemblera votre application
- Interface utilisateur (UI) - la manière dont l'utilisateur interagit physiquement avec une application mobile
- Expérience utilisateur (UX) - ce que l'utilisateur ressent à propos d'une application mobile, avant, pendant et après son utilisation.
RESSOURCES SUPPLÉMENTAIRES
Bien que le papier soit la méthode préférée pour le prototypage, surtout dans un premier temps, vous pouvez également utiliser des outils numériques pour prototyper votre application.
De nombreux outils ont un prix, mais il existe généralement une version gratuite que vous pouvez utiliser avec des fonctionnalités ou des projets limités. Voici quelques possibilités.
- Diapositives Google (facile et gratuit !)
- InvisionApp
- Figma
- POP par Marvel
