- Conozcan las prácticas estándar de interfaz de usuario
- Crea un prototipo en papel de tu aplicación
- Obtengan opiniones de los usuarios utilizando su prototipo
Éstas son las actividades para esta lección:
PROTOTIPO
Ahora que ya tienes una idea para tu producto mínimoviable, es hora de pensar en cómo será tu proyecto y esbozar algunas ideas.
Un prototipo es un modelo inicial de algo.
Los desarrolladores de aplicaciones suelen hacer un prototipo en papel de su aplicación antes de empezar a programarla.
Un prototipo en papel es una representación dibujada a mano del aspecto que tendrá la interfaz de usuario de tu aplicación. Suele incluir dibujos de cada una de las pantallas de la aplicación, que representan diferentes estados.
¿POR QUÉ PROTOTIPO?
- Puedes comunicar rápidamente tus ideas de forma visual.
- ¡Es en colaboración!
- Cuando se trabaja en papel, es más informal y las conversaciones surgen de la experimentación.
- No es caro.
- No tienes que gastar mucho tiempo y dinero
- No necesitas acceso a un ordenador ni a Internet.
- No hace falta ser un experto técnico para esta parte del proceso.
- Puedes ver cómo reaccionan los usuarios a tu prototipo para saber rápidamente qué puede funcionar o no en tu diseño.
- Las decisiones de diseño pueden confirmarse antes de dedicar tiempo a desarrollar y codificar la aplicación.
¡Descubra cómo otros equipos de Technovation Girls crearon prototipos en papel y digitales en este video!
Consejo del tutor
Mejores prácticas prácticas: Cuando introduzca a los estudiantes en el mundo de los prototipos de papel y cartón, haga hincapié en la importancia de empezar con modelos sencillos y de bajo coste para poner a prueba las ideas. Por ejemplo: "Los prototipos de papel y cartón son como borradores de tu diseño. Te ayudan a ver el aspecto y el funcionamiento de tu idea antes de hacer la versión definitiva. Estos modelos sencillos te permiten hacer cambios rápidamente y averiguar qué funciona mejor".
El prototipo en papel puede utilizarse para obtener comentarios de usuarios potenciales (por ejemplo, familiares, otros mentores, amigos, miembros de la comunidad, etc.). Estos comentarios pueden formar parte de los que se incluyan en el material de presentación final.
En la siguiente dirección videos se muestra un ejemplo de proyecto de creación de prototipos con el hardware correspondiente (a la izquierda) y el proceso de prueba con un prototipo de papel (a la derecha).
Preguntas orientativas para los alumnos:
¿Por qué es útil crear un prototipo sencillo con papel o cartón antes de fabricar un producto final?
¿Cómo puede ayudarte a mejorar tu diseño hacer un modelo de papel o cartón?
¿Qué cosas podrías aprender probando un prototipo en papel que no sabrías de otro modo?
Los consejos de los mentores se proporcionan gracias al apoyo de AmeriCorps.
ELEMENTOS DEL PROTOTIPO
Mantenga estas cosas en mente cuando empieces tu prototipo en papel. Pasa el ratón por encima de cada tarjeta para obtener más información.
Usuarios
Usuarios
Tipos de dispositivos
Tipos de dispositivos
¿Teléfono o tableta?
Accesibilidad
Accesibilidad
Coherencia
Coherencia
INTERFAZ DE USUARIO
La creación de un prototipo tiene que ver con la forma en que el usuario interactúa con la aplicación. El término para esto es interfaz de usuario o IU. Incluye todos los elementos, como botones, cuadros de texto y controles deslizantes, que permiten al usuario utilizar la aplicación.
Otro término para el diseño de productos digitales es Experiencia de usuarioo UX. Cada uno de ellos se explica a continuación.
Interfaz de usuario
Cómo interactúan los usuarios con tu aplicación. Incluye todos los elementos, como botones, cuadros de texto y controles deslizantes, que permiten al usuario utilizar la aplicación.
El diseño de la interfaz de usuario se centra en hacer que la aplicación sea visualmente atractiva, intuitiva y fácil de usar.
Experiencia del usuario
Cómo experimentan los usuarios tu aplicación. Incluye la interfaz de usuario, pero se centra más en las emociones, actitudes y comportamiento de los usuarios.
El diseño de UX tiene que ver con las necesidades y objetivos del usuario, y con mejorar su experiencia global.
CARACTERÍSTICAS DE LA INTERFAZ DE USUARIO
A continuación se enumeran algunas de las partes fundamentales de la interfaz de usuario de una aplicación móvil
NAVEGACIÓN
La navegación es la forma en que los usuarios encuentran lo que buscan en una aplicación. He aquí algunos ejemplos de opciones de navegación.
CONTENEDOR
Estos componentes permiten agrupar contenidos. Ayudan a distribuir partes de la pantalla y a ocultar y mostrar partes.
ENTRADA
Los componentes de entrada permiten al usuario introducir información en la aplicación. A continuación se muestran algunos ejemplos.
INFORMACIÓN
Estos componentes permiten a la aplicación compartir información con los usuarios.
UTILIZAR ELEMENTOS ESTÁNDAR
Es posible que quieran que su aplicación tenga un aspecto diferente para destacar entre sus competidores. Sin embargo, utilizar los elementos estándar puede ayudar a los usuarios a entender cómo usar la aplicación más rápidamente.
Por ejemplo, la mayoría de los usuarios están familiarizados con un menú desplegable. Podrías diseñar un nuevo tipo de menú, pero podría resultar confuso para los usuarios. Utiliza componentes conocidos para facilitar la tarea a los usuarios.
DETENTE Y PRUEBA
- Descárgate ahora mismo una nueva aplicación de la tienda de aplicaciones.
- Si necesitas inspiración, prueba AllTrails (iOS o Android) o Blinkist (iOS o Android)
- ¿Qué componentes de los mencionados utiliza?
- Prueba a utilizar la aplicación durante unos 5 minutos.
- ¿Cuánto tardaste en aprender a utilizarlo?
Echa un vistazo a este breve video con Melissa Powel y Mariam Shaikh de Google sobre la creación de bocetos y prototipos en papel.
ACTIVIDAD 1: PROTOTIPO EN PAPEL
Esboza las pantallas de tu aplicación
- ¿Cómo navegarán los usuarios de una pantalla a otra?
- ¿Cómo introducirán la información necesaria para la aplicación?
- ¿Cómo se mostrará la información?
- ¿Cómo se distribuirá de forma estéticamente agradable?
- Piense en la combinación de colores, el tipo de letra, el logotipo
OBTENER COMENTARIOS
Ahora que ya tienes algo físico que representa tu solución, es el momento de obtener la opinión de los usuarios.
Los usuarios potenciales tienen que probarlo y dar una retroalimentación honesta.
¿Qué quieres aprender de las pruebas con los usuarios?
Un método:
- Dé a los usuarios una serie de tareas que hacer con su aplicación y compruebe si pueden "Hazlo" sin su intervención.
- Un miembro del equipo puede actuar como "ordenador".
- cambia pantallas o partes de pantallas en función de las interacciones del usuario
- Otro miembro del equipo toma notas
- anota lo que hace el usuario y sus comentarios y reacciones.
- Con su permiso, también puede grabar la sesión de pruebas.
Recuerda que sus usuarios e prueba están ahí para ayudarles. No juzguen ni intervengan en sus interacciones (aparte de que el "ordenador" responda/actualice el prototipo en función de las acciones).
Recibe sus comentarios con agradecimiento.
He aquí un buen ejemplo de prueba de usuarios para una aplicación de reparación de bicicletas.
ACTIVIDAD 2: RECABAR OPINIONES
Prueben su prototipo en papel con 2-3 usuarios
- Muestra el prototipo a los usuarios.
- Pide a los usuarios que realicen una tarea con el prototipo.
- Deja que intenten hacer la tarea sin ayuda.
- Un miembro del equipo puede actuar como el "ordenador" y reaccionar a sus acciones.
- Otro miembro del equipo (o dos) toma notas de lo que hacen los usuarios, sus comentarios y reacciones.
REFLEXIÓN
Le recomendamos que guarde su prototipo en papel. Necesitará consultarlo a medida que vaya construyendo su proyecto. También deberías hacer fotos de tu prototipo.
REVISIÓN DE TÉRMINOS CLAVE
- Prototipo - modelo inicial de un producto
- Prototipo en papel - una representación dibujada a mano del aspecto que tendrá su aplicación
- Interfaz de usuario (UI) - cómo interactúa físicamente el usuario con una aplicación móvil.
- Experiencia de usuario (UX) - cómo se siente el usuario con una aplicación móvil, antes, durante y después de utilizarla.
RECURSOS ADICIONALES
Aunque el papel es el método preferido para crear prototipos, especialmente como primer paso, también puedes utilizar herramientas digitales para crear prototipos de tu aplicación.
Muchas herramientas tienen un precio, pero suele haber una versión gratuita que puedes utilizar con funciones o proyectos limitados. He aquí algunas posibilidades.
- Diapositivas de Google (fácil y gratis)
- InvisionApp
- Figma
- POP por Marvel
