Cómo hacer un prototipo en papel para una aplicación móvil

1. Introducción: Hola. Bienvenido a mi clase de prototipado en papel. Mi nombre es Maddie Rouna y soy consultora de diseño de UX freelance en Seattle, Washington. Me pareció que el prototipado en papel era un paso realmente importante en el proceso de diseño para mí y estoy muy emocionado de compartir mi proceso a todos ustedes. A veces puede sentirse un poco tonto probar tu idea de aplicación haciendo que la gente toque un trozo de papel. Pero la creación de prototipos en papel es mucho más rápida que burlarse de la ciencia del pescador y el boceto o de Figma. Te puede ayudar a atrapar problemas desde el principio, antes de que hayas invertido demasiado tiempo trabajando en tu diseño. En esta clase vamos a repasar paso cómo hacer un prototipo de papel paso a paso. Asegúrate de publicar tu trabajo en la galería a medida que vamos para que puedas obtener comentarios útiles de tus compañeros. La retroalimentación temprana puede ayudarte a evitar realizar cambios costosos más adelante. Estoy muy emocionado de ver qué vas a hacer. 2. Comienzo: Cuándo se debe hacer un prototipo de papel? No hay un solo proceso de diseño firme que deba seguirse cada vez. Pero me gusta usar prototipos de papel después de que se me ocurrió la idea, descubrí el flujo del usuario, y esbozé mis ideas iniciales en pantalla. prototipo de papel aquí te permite obtener una rápida comprobación de pulso sobre si la idea tiene sentido, y puede ayudarte a atrapar problemas fundamentales antes de sumergirte en wireframing y esbozador Adobe. Echemos un vistazo a los bocetos que hice para nuestro proyecto. Estos son los bocetos en bruto que hice para esta clase. Esta solo una app que realmente me maquillé rápidamente. Nuevamente, esta clase no se trata de lo que hace una buena app y cómo diseñar una app. realidad no estamos pensando en eso. Solo vamos a usar estos para basar nuestros prototipos. Esta app es para básicamente revisar y recomendar espectáculos y películas en diferentes servicios de streaming. Es bastante sencillo. Simplemente tiene tres pestañas. El primero es navegar, por lo que solo muestra diferentes categorías, cosas que están mejor valoradas. Puedes filtrar y buscar lo que sea. Todos estos son mosaicos de imagen para los diferentes shows similares a la aplicación de Netflix. Si tocas uno, te llevaría a la página de detalles donde puedes ver cosas como nombre, calificaciones generales. Podrías escribir tu propia crítica. Si es revisado por alguno de los amigos de tu red, puedes verlo aquí. Puedes desplazarte y leerlos y si te interesa, entonces puedes guardarlo para más adelante. Navegar es solo para navegar. Esto para que tengas. El segundo son cosas que has guardado para ti mismo, cosas que se recomiendan para ti y cosas que has visto o visto recientemente. Después el tabulador social. Eso son sólo cosas que tus amigos han visto recientemente. Puedes ver cosas que son populares entre tu red social, cosas que han sido revisadas por personas en tu red. Entonces también puedes filtrar el abuso por parte de amigos específicos. Diga que su mejor amiga estaba viendo un show en el que le gustaba de verdad, de verdad, pero no recordabas lo que era. Podrías simplemente encontrar su nombre aquí y aprovechar eso y ver diferentes críticas que esa persona está escrita. Sí, es bastante sencillo, solo tres pestañas. Nuevamente, bastante similar a la aplicación de Netflix, lo que sea. Sí, basaremos nuestro prototipo de papel en estos bocetos iniciales en bruto. 3. Configuración: Así es como se ve mi prototipo terminado. El tuyo podría verse así, o podría verse un poco diferente. Esta clase es una guía así que si tienes tus propias ideas en el camino, realmente te animo a ser creativo y probarlas. Podrás encontrar imágenes de mi prototipo terminado en la sección de recursos de clase, junto con los bocetos en bruto que vas a necesitar a medida que empieces a hacer tu prototipo en papel, querrás usarlos como referencia. También vas a necesitar un par de materiales propios para hacer tu prototipo de papel y pasaré por ahí y te mostraré cuáles son esos. Se desea tener papel, papel impresora regular funciona muy bien o se puede utilizar como papel gráfico. Personalmente me gusta usar un gráfico oscuro. Para lápices, me gustan mucho las alas negras porque si bien no rodan, pero también tienen gomas de borrar reemplazables lo cual es bonito porque siento que siempre uso un borrador fino antes de que el lápiz esté realmente fuera. También quieres tener una buena pluma. Mi favorito es el Piloto v-5, sólo porque siento que escribe muy bien no deja una manchada. Ya que estaremos agregando color a los prototipos, también necesitarás marcadores de lápices de colores. Lo que quieras usar es totalmente tu preferencia ya sea lo que tiendo a usar. Es posible que quieras tener un sharpie a la mano porque eso puede ser realmente útil también y luego usar un marcador gris claro para agregar color de fondo puede ser un bonito toque a veces si estás tratando de mostrar profundidad, pero totalmente no necesario. Lo último que querrás tener es definitivamente un par de tijeras y alguna cinta porque definitivamente estarás cortando tus prototipos y si quieres hacer edición, veces terminas grabando cosas encima. Yo quiero asegurarme de tener esos también y luego una vez que hayas reunido todos tus materiales, estarás listo para empezar a hacer un prototipo de papel. 4. Plantillas de dispositivo: Cuando haces un prototipo de papel para una aplicación, no es terriblemente realista, obviamente lo has ahogado. Casi siempre las hago dentro de una plantilla de dispositivo solo para darle un aspecto un poco más realista, lo cual es tonto porque sigue siendo obviamente papel, pero siento que solo ayuda a poner al participante en un poco más que la mentalidad de usar una aplicación en lugar de mirar un dibujo. Puedes encontrar plantillas de dispositivos en línea que puedes imprimir o puedes hacer las tuyas propias. Si no vas a imprimir las plantillas de tus dispositivos, lo cual está totalmente bien, entonces vas a hacer las tuyas, que es como típicamente lo hago. Sucede que tengo una de estas plantillas para iPhone, lo cual es realmente bonito, pero si no tienes una, eso está totalmente bien, solo puedes rastrear tu teléfono, pero estas están disponibles en Amazon, creo que pagué $9 por esto, por lo que son bastante agradables de tenerlo, pero de nuevo, si no lo tienes, puedes seguir adelante y poner tu teléfono en el papel y trazar alrededor de él, que es lo que hice antes de que tuviera esto, y funciona muy bien. Ya sea que estés usando tu teléfono o la plantilla, lo pones justo abajo y trazas alrededor de él. Una de las razones por las que me gusta mucho esta plantilla es que tiene como la muesca pequeña y los botones, por lo que la escala en ella se ve realmente bien, se parece bastante a un iPhone, tiene estos pequeños puntos donde puedes indican los bordes de la pantalla, en realidad puedes rastrearlos a través de la plantilla, pero puedes marcar las esquinas, y luego incluso hay un segundo set aquí para la barra pequeña superior donde tiene tu batería y tu cobertura celular y el tiempo y lo que sea, para que puedas marcar todos esos, y luego solo vamos a conectar los puntos y ponerlos todos alineados. Ahí vas. Ahí hay una plantilla de dispositivo iPhone. Si utilizaras un teléfono real en lugar de una de estas plantillas, entonces solo querrías estimar este tamaño de pantalla por dentro, otra vez , totalmente bien, y como tenemos cuatro pantallas que vamos a estar haciendo, querrás hacer al menos tres más de éstos. Normalmente me gusta hacer sólo un par extra por si me equivoco, lo cual pasa totalmente. Adelante y haz unos cuantos más de estos y luego podremos empezar a dibujar pantallas. 5. Dibujar pantes: Ahora que hemos terminado nuestras plantillas de dispositivos, vamos a seguir adelante y empezar a dibujar las pantallas, prestando especial atención a los bits interactivos como botones, iconos tocables o menús deslizables. Nuestras pantallas van a ser un poco más detalladas que los bocetos realmente rugosos. Los textos reales se escribirán ahora en lugar de colocar carpetas como Lorem Ipsum, y puedes calibrar qué tan específico obtener. Básicamente solo quieres que tu app tenga sentido como independiente sin que necesites explicarle qué son las cosas a la persona con la que estás probando. También estamos, en lugar de usar estas cajas wireframe, estas realmente no dicen nada de la app, así que vamos a escribir en títulos de show o cine en su lugar, para dejar claro que estas son las fichas que verías en una app como Hulu o Netflix. Está bien. Adelante y dibujemos algunas pantallas. Simplemente vamos a empezar con las pestañas de navegación ya que esa es la primera. Simplemente voy a seguir adelante y empezar con la barra de pestañas a lo largo de la parte inferior. Podemos estimar los tamaños a dividir por tres. Eso ya está lo suficientemente cerca. No nos preocupemos por los iconos por ahora. Podemos agregar eso en más adelante, así que solo vamos a escribir en browse, para ti y social. Agrega en la pequeña batería rápida que hay y cobertura celular. Entonces a continuación voy a poner en una barra de búsqueda, pero voy a agregar un pequeño botón al final para realmente hacer la búsqueda. Déjame hacer rápidamente el botón Filtro. Está bien. Entonces podemos pasar a categorías. Tenemos mejor valorados, tenemos nuevos, y tenemos dramas. Entonces podemos entrar y dibujar algunas de nuestras cajas. Esa es otra cosa que probablemente vamos a hacer de manera diferente es, vamos a escribir en títulos reales de series de televisión o películas. No vamos a tener la imagen de portada que realmente tienen Netflix y Hulu, no vamos a ir a ese nivel de detalle, pero sí queremos mostrar que en realidad son series de televisión y películas. De máxima calificación, digamos tal vez cosas extrañas. ¿ Qué tal Star Trek Next Generation? Haremos lo mismo por lo nuevo. Aquí vamos a escribir, ¿qué tal Ojo Queer y Desarrollo Arrestado? Porque acaban de hacer una nueva temporada. Voy a reescribir eso sólo para que quepa un poco más bonito. Está bien. Entonces haremos lo mismo para los dramas. Sólo diremos Madman, ¿ y qué tal Anatomía de Grey? Puedes escribir en los espectáculos que quieras, pero ahí tenemos nuestra primera pantalla de navegación. Todos pueden seguir adelante y hacer lo mismo por las otras pantallas gruesas. Tenemos la pestaña Social, la pestaña For You, y la página Mostrar nuestra película Detalles. Una vez que sigas adelante y dibujes esos hacia fuera, pasaremos al siguiente paso, que es agregar color. 6. Añade color: Ahora vamos a añadir algo de color. Porque hemos dibujado la App, todo se ve plano y bastante parecido. Queremos resaltar las cosas con las que el usuario puede interactuar durante la prueba. Queremos darles una pista sobre qué cosas son tocables. Voy a usar azul y verde para resaltar eso y puedes usar el color que quieras. Aquí cosas que serían tocables, serían esta flecha hacia atrás, este botón para agregar Mad Men a tu lista, y este botón para escribir una reseña, junto con tocar para resúmenes, algo que puedes tocar . Pero no es una de las cosas primarias a las que estamos buscando llamar la atención. Sigamos adelante y llevemos este color azul claro para estos dos primeros artículos procesables. Sólo voy a escribirlo un poquito. Estás como, “Está bien, eso está resaltado azul”. Lo mismo aquí. Sí, eso no es para nada elegante. Pero ahora sobresalen. Aquí abajo para este botón de “Escribir reseña”, este es un llamado bastante grande a la acción aquí en esta página. Esto es con lo que probablemente queremos que la gente realmente interactúe. Voy a usar este color de pantalla y solo voy a sombrear este botón, voy a hacer todo verde. Ahora, eso es realmente claramente un botón. Porque esto es tocable aún mejor, pero no es una cosa mala. No voy a colorear todo el asunto. Yo sólo voy a seguir adelante y subrayarlo porque es secundaria, pero llama la atención sobre el hecho de que es tocable. Creo que eso es todo lo que voy a hacer aquí. Nuevamente, el punto es no hacer de esta una hermosa pieza de arte. El punto es resaltar cosas con las que alguien puede interactuar. Pueden desplazarse por las reseñas, pero no necesitamos colorear eso. Queremos que aprovechen “Escribir crítica”. Queremos que lo guarden en su lista o queremos que salgan de la pantalla. Puedes seguir adelante y hacer lo mismo a tus otras pantallas. Lo único que tal vez recomendaría hacer que no se incluye aquí es en estas páginas que tienen pestañas. También quieres resaltar en qué pestaña está el usuario, para que no se pierdan. Te recomendaría si o quieres subrayar, como lo hicimos para top para resumen, eso podría funcionar. Pero si también tienes uno de estos marcadores grises, tomando un gris realmente claro y simplemente sombreando esa pestaña, solo puedes resaltar que así es como eres. Lo único que quieres evitar es hacer que esto parezca un botón. Para ti, podrías ser como, “Sí, esto es obviamente solo una pestaña”, pero si tuviéramos a colorear este verde como lo hice aquí justo cuando estaba probando algún otro color [inaudible], me di cuenta de que hice que pareciera un botón. No hagas eso. Usa ya sea un color realmente neutro o simplemente toma y subyacente como lo hiciste aquí. Sí, adelante y hazle a todas las demás pantallas y luego podemos seguir adelante. 7. Piezas más pequeñas: A veces durante las pruebas te encuentras con cosas que quieres cambiar. Por ejemplo, si tienes un botón y la etiqueta no tiene sentido para los usuarios, en lugar de volver a dibujar toda la pantalla con un botón diferente, solo puedes dibujar un botón nuevo con diferente idioma, cortarlo y pegarlo en la parte superior. Se puede hacer algo realmente similar para los cambios temporales. Por ejemplo, si tu diseño tiene alternos y en la prueba tu usuario quiere cambiar el toggle de off a on. Si tienes alternos extra con diferentes estados, puedes simplemente poner un toggle activo en la parte superior en lugar de volver a dibujar toda la pantalla con un pequeño toggle diferente. También puedes usar eso para cosas como menús deslizables o mensajes emergentes. Básicamente pequeños cambios a una pantalla existente, solo puedes hacer la pieza pequeña en lugar de redibujar toda la pantalla y eso te ahorrará un poco de tiempo. Está bien. Hagamos algunos componentes. Ya he hecho un poco. Hice un componente para los filtros. Desde la pestaña de navegación, si la pestaña de usuario está en el filtro, tienes un menú que puedes superponer en la parte superior. Porque uso toggles, hice algunos toggles extra y otros estados que puedes sentarte en la parte superior si fueran a tocarlos para cambiarlos. También hice una entrada de texto, parte para escribir una reseña. Si tuvieras que tocar y escribir una reseña, podrían escribirla y golpear retorno y luego cuando terminen, hice un mensaje de éxito que ella dice: “Gracias por tu opinión. Que después de que se sometan, saben que han sido exitosos. Creo que eso es solo de todo pero sí quiero hacer uno más. Al pasar por las páginas de los ajustes interactivos, ir no necesita nada. No vamos a hacer pantallas extra para ninguno de los otros shows. No me voy a preocupar por la página de configuración en este momento porque no estamos usando la configuración para ninguna de las pruebas que vamos a estar haciendo con nuestros usuarios. Ya hemos hecho uno para filtro por lo que lo último sería guardar algo en tu lista. También podríamos hacer uno para resumen. En realidad empecemos por ahí. Hagamos una caja del mismo tamaño y solo vamos a seguir adelante y escribir resumen de los hombres locos. Está bien. Podemos seguir adelante y recortar eso. El usuario iba a tocar para obtener resumen. Podrías superponer rápidamente un pequeño resumen de hombres locos, y si lo tocan de nuevo, simplemente giraría hacia atrás. Podríamos ver si eso tenía sentido en la prueba, no estoy seguro. Entonces lo último, así que queremos simplemente escribir un mensaje de éxito rápido para guardar algo en tu lista. Adelante y pongamos. Simplemente va a decir: “Guardado en tu lista”. Simplemente dibuja una cajita alrededor de ella, podrías dividirla y luego porque en iOS, cuando cierras mensajes como este, suele estar en texto azul. Solo vamos a usar un lápiz de color azul. Pruébalo de cerca y luego podrías cortar eso y tienes tus últimos componentes. Como puedes ver, son bastante simples. Siempre que quieras agregar para que tu prueba vaya más suavemente, adelante y dibuje y córtala hasta que estés satisfecho. Entonces una vez que hayas terminado de hacer todas las piezas para tu prototipo de papel, vamos a pasar a practicar. 8. ¡¡Práctica!: Buen trabajo. Terminaste tu prototipo de papel. Ahora está a punto de estar listo para las pruebas. Quieres hacer que las transiciones de pantalla sean realmente suaves para que el usuario pueda mantenerse enfocado en lo que está tratando de hacer con tu app en lugar de destruirse mientras buscas la pieza correcta. Por lo que quieres practicar la transición del cambio entre pantallas al menos un par de veces antes de hacer tu prueba. También debes estar preparado para que el usuario cometa un error y no siga el flujo exacto que crees que podría. Entonces tal vez piense en cuáles podrían ser algunos de los errores comunes y también prepárese para manejarlos de forma rápida y fluida sin distraer al usuario. Te mostraré muy rápido cómo podría practicar la transición. Adelante y practiquemos. Aquí, mi tarea va a ser que el usuario escriba una opinión de admin. Sea cual sea tu tarea, quieres averiguar cuál sería el flujo de pantallas para que puedas practicar la transición y tener todo ordenado y listo para ir para que no tengas rezago entre tu usuario tocando la pantalla y algo que pasa. Digamos que estás iniciando la prueba y les das el teléfono y les dices que su tarea es escribir una crítica para Mad Men. Tu usuario podría tocar Mad Men y luego quieres estar listo para partir. Con esta transición, cuando tocan “Rater review”, quieres estar totalmente listo con tu página de Revisión, luego escriben su reseña y golpean “Return”, y de nuevo, quieres estar listo con tu notificación de Éxito. Sea cual sea tu tarea, practica tu flujo hasta que sea agradable y suave para ti y se sienta muy natural, y luego estás listo para hacer tu primera prueba con tu prototipo de papel para tu app. 9. Resumen: En esta clase, aprendimos a hacer un prototipo en papel para una aplicación móvil. Aprendimos cuándo usar uno, qué es y qué necesitarás, y cómo usarlo. No hay tiempo específico debes usar un prototipo de papel, pero me gusta usarlos después de decidir qué es la app, cómo va a fluir el usuario por la app para completar tareas, y lo he esbozado. Probar un prototipo de papel aquí le permitirá hacer una ronda rápida de pruebas e iteración antes de incluso empezar a enmarcar cables con una herramienta digital. Debido a que es un prototipo de papel, vas a necesitar materiales artesanales básicos como papel, utensilios de escritura, tijeras y cinta adhesiva. También caminamos por todos los pasos para crear el prototipo. Hicimos plantillas, dibujamos las pantallas, agregamos color, hicimos componentes más pequeños, y practicamos nuestro flujo de pruebas. Recuerda compartir tu trabajo en la galería de proyectos. Los comentarios de otros podrían ayudarte a atrapar cosas que tienen total sentido para ti como diseñador, pero para alguien que está mirando la aplicación por primera vez podría ser un poco confuso. Una vez que hayas terminado esta app, sigue adelante y trata de hacer una de las tuyas. Estoy súper emocionado de ver lo que creáis todos.