Réaliser un prototype papier pour une application mobile

1. Introduction: Bonjour. Bienvenue dans ma classe de prototypage papier. Je m'appelle Maddie Rouna et je suis consultant indépendant UX Design à Seattle, Washington. J' ai trouvé que le prototypage papier était une étape vraiment importante dans le processus de conception pour moi et je suis vraiment excité de partager mon processus avec vous tous. Parfois, il peut se sentir un peu stupide de tester votre idée d'application en demandant aux gens de taper sur un morceau de papier. Mais le prototypage papier est beaucoup plus rapide que de se moquer de la science des pêcheurs et de l'esquisse ou Figma. Il peut vous aider à détecter les problèmes dès le début, avant que vous n'ayez investi trop de temps à travailler sur votre conception. Dans ce cours, nous allons voir comment faire un prototype de papier pas à pas. Assurez-vous de poster votre travail dans la galerie au fur et à mesure que nous allons afin que vous puissiez obtenir des commentaires utiles de la part de vos pairs. Une rétroaction anticipée peut vous aider à éviter d'apporter des modifications coûteuses plus tard. Je suis vraiment excité de voir ce que tu vas faire. 2. Pour commencer: Quand devriez-vous faire un prototype en papier ? n'y a pas de processus de conception ferme qui doit être suivi à chaque fois. Mais j'aime utiliser des prototypes papier après avoir trouvé l'idée, compris le flux utilisateur et esquissé mes premières idées d'écran. Le prototypage papier ici vous permet de vérifier rapidement si l'idée est logique, et il peut vous aider à détecter les problèmes fondamentaux avant de plonger dans le filage et l'esquisse Adobe. Jetons un coup d'oeil aux croquis que j'ai faits pour notre projet. Ce sont les croquis que j'ai faits pour cette classe. C' est juste une application que j'ai vraiment vite inventé. Encore une fois, cette classe n'est pas sur ce qui fait une bonne application et comment concevoir une application. On ne pense pas vraiment à ça. Nous allons juste les utiliser pour baser nos prototypes sur. Cette application est essentiellement pour examiner et recommander des émissions et des films sur différents services de streaming. C'est assez simple. Il a juste trois onglets. Le premier est la navigation, donc il montre juste différentes catégories, les choses qui sont les mieux notées. Vous pouvez filtrer et rechercher n'importe quoi. Il s'agit de vignettes d'image pour les différents spectacles similaires à l'application Netflix. Si vous appuyez sur un, cela vous amènerait à la page de détails où vous pouvez voir des choses comme le nom, les notes générales. Vous pourriez écrire votre propre commentaire. Si elle est examinée par l'un des amis de votre réseau, vous pouvez le voir ici. Vous pouvez faire défiler et les lire et si vous êtes intéressé, alors vous pouvez l'enregistrer pour plus tard. La navigation est juste pour la navigation. C' est pour toi de l'avoir. Le second est des choses que vous avez sauvées pour vous-même, des choses qui vous sont recommandées et des choses que vous avez récemment regardées ou vues. Ensuite, l'onglet social. Ce sont juste des choses que vos amis ont regardées récemment. Vous pouvez voir les choses qui sont populaires parmi votre réseau social, choses qui ont été examinées par les personnes de votre réseau. Ensuite, vous pouvez également filtrer les abus commis par des amis spécifiques. Dis que ta meilleure amie regardait un spectacle dans lequel elle était vraiment, vraiment, mais tu ne te souviens pas de ce que c'était. Vous pouvez simplement trouver leur nom ici et taper dessus et voir les différents commentaires que cette personne est écrite. Oui, c'est assez simple, juste trois onglets. Encore une fois, assez similaire à l'application Netflix, peu importe. Oui, nous baserons notre prototype papier sur ces croquis bruts initiaux. 3. Configurer: C' est à ça que ressemble mon prototype fini. Le tien pourrait ressembler à ça, ou ça pourrait sembler un peu différent. Ce cours est un guide, donc si vous avez vos propres idées en cours de route, je vous encourage vraiment à être créatif et à les essayer. Vous pouvez trouver des images de mon prototype fini dans la section des ressources de classe, ainsi que les esquisses approximatives dont vous aurez besoin lorsque vous commencez à faire votre prototype papier, vous voudrez les utiliser comme référence. Vous allez aussi avoir besoin de quelques matériaux pour faire votre prototype de papier et je vais vous montrer ce que c'est. Vous voulez avoir du papier, papier d'imprimante ordinaire fonctionne très bien ou vous pouvez l'utiliser comme du papier graphique. Personnellement, j'aime utiliser un graphique sombre. Pour les crayons, j'aime vraiment les ailes noires parce qu'elles ne roulent pas, mais elles ont aussi des gommes remplaçables, ce qui est agréable parce que j'ai toujours l'impression d'utiliser une gomme fine avant que le crayon ne soit réellement sorti. Vous voulez aussi avoir un bon stylo. Mon préféré est le pilote v-5, juste parce que j'ai l'impression qu'il écrit vraiment bien, il ne laisse pas de traces. Puisque nous allons ajouter de la couleur aux prototypes, vous aurez également besoin de marqueurs de crayons de couleur. Tout ce que vous voulez utiliser est totalement votre préférence soit ce que j'ai tendance à utiliser. Vous voudrez peut-être avoir un sharpie à portée de main parce que cela peut être très pratique aussi et ensuite utiliser un marqueur gris clair pour ajouter couleur de fond peut être une belle touche parfois si vous essayez de montrer la profondeur, mais totalement pas nécessaire. La dernière chose que vous voudrez est certainement une paire de ciseaux et peu de ruban car vous allez certainement couper vos prototypes et si vous voulez faire des modifications, vous finissez parfois par taper des choses sur le dessus. Je veux m'assurer de les avoir aussi et une fois que vous aurez rassemblé tous vos documents, vous serez prêt à commencer à faire un prototype en papier. 4. Modèles de périphérique: Lorsque vous faites un prototype papier pour une application, ce n'est pas terriblement réaliste, évidemment vous l'avez noyé. Je les fais presque toujours dans un modèle d'appareil juste pour lui donner un look un peu plus réaliste, ce qui est stupide parce que c'est toujours évidemment papier, mais je me sens comme ça aide juste à mettre le participant dans un peu plus que l'état d'esprit d'utiliser une application plutôt que de regarder un dessin. Vous pouvez trouver des modèles d'appareils en ligne que vous pouvez imprimer ou créer les vôtres. Si vous n'allez pas imprimer vos modèles d'appareil, ce qui est tout à fait bien, alors vous allez faire le vôtre, ce qui est la façon dont je le fais généralement. se trouve que j'ai un de ces pochoirs iPhone, ce qui est vraiment sympa, mais si vous n'en avez pas, c'est tout à fait bien, vous pouvez juste tracer votre téléphone, mais ceux-ci sont disponibles sur Amazon, je pense que j'ai payé 9$ pour cela, donc ils sont plutôt gentils d'avoir, mais encore une fois, si vous ne l'avez pas, vous pouvez aller de l'avant et mettre votre téléphone sur le papier et tracer autour d'elle, ce que j'ai fait avant que je l'ai, et ça marche très bien. Que vous utilisiez votre téléphone ou le pochoir, il vous suffit de le poser et de tracer autour d'elle. Une des raisons pour lesquelles j'aime vraiment ce pochoir est qu'il a comme la petite encoche et les boutons, donc l'échelle sur elle semble vraiment bien, il ressemble à un iPhone, il a ces petits points où vous pouvez indiquent les bords de l'écran, vous pouvez en fait les tracer à travers le pochoir, mais vous pouvez marquer les coins, et puis il y a même un deuxième ensemble ici pour la petite barre supérieure où il a votre batterie et votre couverture cellulaire et le temps et quoi que ce soit d'autre, vous puissiez marquer tous ces points, et ensuite nous allons juste relier les points et les aligner tous. Voilà, tu y vas. Il y a un modèle d'appareil iPhone. Si vous avez utilisé un téléphone réel au lieu d'un de ces pochoirs, alors vous voudriez juste estimer cette taille d'écran à l'intérieur, encore une fois , totalement bien, et puisque nous avons quatre écrans que nous allons faire, vous aurez envie de faire au moins trois autres d'entre elles. D' habitude, j'aime faire quelques extra juste au cas où je me trompe, ce qui arrive totalement. Allez-y et faites un peu plus de ceux-ci et ensuite nous pouvons commencer sur les écrans de dessin. 5. Dessiner des écrans: Maintenant que nous avons terminé nos modèles d'appareils, nous allons aller de l'avant et commencer à dessiner les écrans, accordant une attention particulière aux bits interactifs tels que les boutons, icônes tapissables ou les menus coulissants. Nos écrans vont être un peu plus détaillés que les croquis vraiment rugueux. Les textes réels seront écrits maintenant plutôt que de placer des dossiers comme Lorem Ipsum, et vous pouvez évaluer comment spécifique obtenir. Vous voulez simplement que votre application ait du sens en tant que autonome sans que vous ayez besoin d'expliquer ce que sont les choses à la personne avec laquelle vous testez. Nous sommes aussi, au lieu d'utiliser ces boîtes filaires, celles-ci ne disent rien sur l'application, donc nous allons écrire dans les titres de spectacle ou de film à la place, pour indiquer clairement que ce sont les tuiles que vous verrez sur une application comme Hulu ou Netflix. D' accord. Allons de l'avant et dessinons quelques écrans. Nous allons juste commencer avec les onglets de navigation puisque c'est le premier. Je vais juste aller de l'avant et commencer avec la barre d'onglets le long du bas. Nous pouvons estimer les tailles à diviser pour trois. C' est assez proche. Ne nous inquiétons pas des icônes pour l'instant. Nous pouvons ajouter cela plus tard, donc nous allons juste écrire dans le navigateur, pour vous et social. Ajoutez la petite batterie rapide là et la couverture cellulaire. Ensuite, je vais mettre dans une barre de recherche, mais je vais ajouter un petit bouton à la fin pour réellement faire la recherche. Laissez-moi simplement faire rapidement le bouton Filtre. D' accord. Ensuite, nous pouvons passer à des catégories. Nous avons les meilleures notées, nous avons de nouveaux, et nous avons des drames. Ensuite, on peut y aller et dessiner certaines de nos boîtes. C' est une autre chose que nous allons probablement faire différemment, c'est que nous allons écrire dans des titres réels d'émissions de télévision ou de films. Nous n'aurons pas l'image de couverture que Netflix et Hulu ont réellement, nous n'irons pas à ce niveau de détail, mais nous voulons montrer que ce sont en fait des émissions de télévision et des films. Les mieux notées, disons peut-être Stranger Things. Que diriez-vous de Star Trek Next Generation ? Nous ferons la même chose pour les nouveaux. Ici, nous allons écrire, diriez-vous de Queer Eye et Strested Development ? Parce qu'ils viennent de faire une nouvelle saison. Je vais réécrire ça juste pour qu'il s'intègre un peu plus bien. D' accord. Ensuite, nous ferons la même chose pour les drames. On va juste dire Madman, et que diriez-vous de Grey's Anatomy ? Vous pouvez écrire dans les spectacles que vous voulez, mais là nous avons notre premier écran de navigation. Vous pouvez tous aller de l'avant et faire la même chose pour les autres écrans grossiers. Nous avons l'onglet Social, l'onglet Pour vous et la page Afficher les détails de notre film. Une fois que vous allez de l'avant et que vous les esquissez, nous passerons à l'étape suivante, qui consiste à ajouter de la couleur. 6. Ajouter de la couleur: Maintenant, nous allons ajouter un peu de couleur. Parce que nous avons dessiné l'application, tout semble plat et assez similaire. Nous voulons mettre en évidence les choses avec lesquelles l'utilisateur peut interagir pendant le test. Nous voulons leur donner un indice sur les choses qui sont exploitables. Je vais utiliser le bleu et le vert pour le mettre en évidence et vous pouvez utiliser la couleur que vous voulez. Ici les choses qui seraient tapissables, serait cette flèche arrière, ce bouton pour ajouter Mad Men à votre liste, et ce bouton pour écrire un commentaire, ainsi que taper pour les résumés, quelque chose que vous pouvez taper sur . Mais ce n'est pas l'une des principales choses sur lesquelles nous cherchons à attirer l'attention. Allons de l'avant et prenons cette couleur bleu clair pour ces deux meilleurs objets exploitables. Je vais juste écrire un peu dessus. Tu es genre, « Très bien, c'est bleu surligné. » La même chose ici. Ouais, ce n'est pas de fantaisie du tout. Mais maintenant, ils s'en sortent. Ici pour ce bouton « Écrire un avis », c'est un très grand appel à l'action ici sur cette page. C' est avec cela que nous voulons probablement que les gens interagissent vraiment. Je vais utiliser cette couleur d'écran et je vais juste ombrage ce bouton, je vais rendre le tout vert. Maintenant, c'est vraiment un bouton. Parce que c'est encore mieux utilisable, mais ce n'est pas une chose méchante. Je ne vais pas tout colorer. Je vais juste aller de l'avant et le souligner parce que c'est secondaire, mais ça attire l'attention sur le fait que c'est utilisable. Je pense que c'est tout ce que je vais faire ici. Encore une fois, le but n'est pas de faire de cette belle œuvre d'art. Le but est de mettre en évidence les choses avec lesquelles quelqu'un peut interagir. Ils peuvent faire défiler les avis, mais nous n'avons pas besoin de colorer cela. Nous voulons qu'ils tapent sur « Écrire un avis ». Nous voulons qu'ils l'enregistrent dans leur liste ou nous voulons qu'ils quittent l'écran. Vous pouvez aller de l'avant et faire la même chose à vos autres écrans. La seule chose que je recommanderais peut-être de faire qui n'est pas incluse ici est sur ces pages qui ont des onglets. Vous voulez également mettre en évidence l'onglet sur lequel l'utilisateur se trouve, afin qu'il ne se perde pas. Je recommanderais si vous voulez souligner, comme nous l'avons fait pour le résumé, cela pourrait fonctionner. Mais si vous avez aussi un de ces marqueurs gris, prendre un gris très clair et simplement ombrager cet onglet, peut simplement mettre en évidence que c'est comme ça que vous êtes. La seule chose que vous voulez éviter est de faire en sorte que cela ressemble à un bouton. Pour vous, vous pourriez être comme, « Ouais, c' est évidemment juste un onglet », mais si nous devions colorer ce vert comme je l'ai fait ici tout comme je testais une autre couleur [inaudible], j'ai réalisé que je l'ai fait ressembler à un bouton. Ne fais pas ça. Utilisez soit une couleur vraiment neutre ou juste prendre et sous-jacent comme vous l'avez fait ici. Oui, vas-y et fais tous les autres écrans et on pourra passer à autre chose. 7. Petiles pièces: Parfois, pendant le test, vous rencontrez des choses que vous voulez changer. Par exemple, si vous avez un bouton et que l'étiquette n'a pas de sens pour les utilisateurs, plutôt que de redessiner l'écran entier avec un bouton différent, vous pouvez simplement dessiner un nouveau bouton avec une langue différente, découper et le coller sur le dessus. Vous pouvez faire une chose vraiment similaire pour les changements temporaires. Par exemple, si votre conception a des bascules et que, dans le test, votre utilisateur souhaite changer le bascule de désactivé à activé. Si vous avez des bascules supplémentaires avec différents états, vous pouvez simplement poser un bascule actif sur le dessus plutôt que de redessiner l'écran entier avec un petit bascule différent. Vous pouvez également l'utiliser pour des éléments tels que des menus déroulants ou des messages contextuels. Fondamentalement de petits changements à un écran existant, vous pouvez simplement faire le petit morceau plutôt que de redessiner l'écran entier et cela vous fera gagner un peu de temps. D' accord. Faisons quelques composants. J' en ai déjà fait. J' ai fait un composant pour les filtres. l'onglet Parcourir, si l'onglet utilisateur est sur le filtre, vous disposez d'un menu que vous pouvez superposer en haut. Parce que j'utilise des bascules, j'ai fait quelques bascules supplémentaires et d'autres états que vous pouvez vous asseoir sur le dessus s'ils devaient taper dessus pour les changer. J' ai également fait une entrée de texte, partie pour écrire un commentaire. Si vous deviez taper et écrire un avis, ils pourraient l'écrire et appuyer sur retour, puis quand ils ont terminé, j'ai fait un message de réussite qu'elle dit : « Merci pour votre avis. Qu'après leur soumission, ils savent qu'ils ont réussi. Je pense que c'est à peu près tout, mais je veux en faire un de plus. Passer à travers les pages des adaptations interactives, aller n'a besoin de rien. Nous ne ferons pas d'écrans supplémentaires pour les autres spectacles. Je ne vais pas m'inquiéter de la page des paramètres en ce moment parce que nous n' utilisons pas les paramètres pour aucun des tests que nous allons faire avec nos utilisateurs. Nous en avons déjà fait un pour le filtre, donc la dernière chose serait d'enregistrer quelque chose dans votre liste. Nous pourrions aussi en faire un pour un résumé. Commençons par là. Faisons une boîte de la même taille et nous allons juste aller de l'avant et écrire un résumé des hommes fous. D' accord. On peut aller de l'avant et couper ça. L' utilisateur devait taper pour le résumé. Vous pourriez rapidement superposer un peu de résumé des hommes fous, et s'ils tapent à nouveau, il serait juste tourner en arrière. On pourrait voir si ça avait du sens dans le test, je ne suis pas sûr. Ensuite, la dernière chose, donc nous voulons juste écrire un message de réussite rapide pour enregistrer quelque chose dans votre liste. Allons de l'avant et mettons. Ça va juste dire, « Sauvegardé sur ta liste. » suffit de dessiner une petite boîte autour d'elle, vous pouvez la diviser et puis parce que sur iOS, lorsque vous fermez des messages comme celui-ci, c'est généralement en bleu. On va utiliser un crayon de couleur bleue. Essayez-le de fermer et vous pouvez le découper et vous avez vos derniers composants. Comme vous pouvez le voir, ils sont assez simples. Chaque fois que vous voulez ajouter pour rendre votre test plus lisse, allez-y et dessinez et découpez-le jusqu'à ce que vous soyez satisfait. Ensuite, une fois que vous aurez fini de fabriquer toutes les pièces de votre prototype en papier, nous allons passer à la pratique. 8. Entraînez-vous !: Bon travail. Tu as fini ton prototype papier. Maintenant, il est à peu près prêt pour les tests. Vous voulez rendre les transitions d'écran vraiment fluides afin que l'utilisateur puisse rester concentré sur ce qu'il essaie de faire avec votre application plutôt que d'être détruit pendant que vous cherchez la bonne pièce. Donc, vous voulez pratiquer la transition de basculement entre les écrans au moins quelques fois avant de faire votre test. Vous devriez également être prêt pour que l'utilisateur fasse une erreur et ne pas suivre le flux exact que vous pensez qu'il pourrait. Alors peut-être penser à ce que certaines des erreurs courantes pourraient être et aussi préparer à les gérer rapidement et en douceur sans distraire l'utilisateur. Je vais vous montrer très rapidement comment je pourrais pratiquer la transition. Allons de l'avant et pratiquons. Ici, ma tâche va être pour l'utilisateur d'écrire un avis de l'administrateur. Quelle que soit votre tâche, vous voulez savoir quel serait le flux d'écrans afin que vous puissiez pratiquer la transition et tout soit ordonné et prêt à être exécuté afin que vous n'ayez pas de décalage entre votre utilisateur en appuyant sur l'écran et quelque chose se passe. Disons que vous commencez le test et que vous leur donnez le téléphone et que leur tâche est d'écrire un avis pour Mad Men. Votre utilisateur peut appuyer sur Mad Men, puis vous voulez être prêt à partir. Avec cette transition, quand ils tapent sur « Évaluation de l'évaluateur », vous voulez être totalement prêt avec votre page d'évaluation, puis ils écrivent leur avis et appuyez sur « Retour », et encore une fois, vous voulez être prêt avec votre notification de réussite. Quelle que soit votre tâche, pratiquez votre flux jusqu'à ce qu'il soit agréable et lisse pour vous et qu'il soit très naturel, puis vous êtes prêt à faire votre premier test avec votre prototype papier pour votre application. 9. Synthèse: Dans ce cours, nous avons appris à fabriquer un prototype papier pour une application mobile. Nous avons appris quand l'utiliser, ce qu'il est et ce dont vous aurez besoin, et comment l'utiliser. n'y a pas de temps précis que vous devez utiliser un prototype papier, mais j'aime les utiliser après avoir décidé ce qu'est l'application, comment l'utilisateur va traverser l'application pour terminer les tâches, et je l'ai esquissé. Tester un prototype papier ici vous permettra de faire un tour rapide de tests et d'itération avant même de commencer le fil-framing avec un outil numérique. Parce que c'est un prototype en papier, vous aurez besoin de matériaux de base comme du papier, ustensiles d' écriture, des ciseaux et du ruban adhésif. Nous avons également parcouru toutes les étapes de la création du prototype. Nous avons fait des modèles, dessiné les écrans, ajouté de la couleur, fabriqué des composants plus petits, et nous avons pratiqué notre flux de test. N' oubliez pas de partager votre travail dans la galerie de projets. Les commentaires des autres peuvent vous aider à attraper des choses qui ont un sens total pour vous en tant que concepteur, mais pour quelqu'un qui regarde l'application pour la première fois peut être un peu déroutant. Une fois que vous avez terminé cette application, allez-y et essayez de faire l'un des vôtres. Je suis super excité de voir ce que vous créez tous.