- Conocerás las prácticas estándar de interfaz de usuario
- Crearás un prototipo en papel de tu aplicación
- Obtendrás opiniones de los usuarios utilizando tu prototipo
Estas 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 la programación.
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É UN 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 ni 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 al desarrollo y a programación.
¡Descubre cómo otros equipos de Technovation Girls crearon prototipos en papel y digitales en este video!
Consejo de los mentores
Mejores prácticas prácticas: Cuando introduzca 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 recabar opiniones de posibles usuarios (familiares, otros mentoras y mentores, amigos, miembros de la comunidad, etc.). Estos comentarios pueden formar parte de los que se incluyan en el material de presentación final.
Los siguientes vídeos mostrarán un ejemplo de proyecto de creación de prototipos con el hardware adjunto (a la izquierda) y el proceso de pruebas con un prototipo de papel (a la derecha).
Preguntas orientativas para estudiantes:
¿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
Mantén 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 (UI) 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 (INPUT)
Los componentes de entrada (input) 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.
UTILIZA ELEMENTOS ESTÁNDAR
Es posible que quieras que tu aplicación tenga un aspecto diferente para destacar entre tus 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 E INTENTA
Echa un vistazo a este breve video con Melissa Powel y Mariam Shaikh de Google sobre bocetos y creación de 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
OBTÉN FEEDBACK
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 feedback honesto.
¿Qué quieres aprender de las pruebas con los usuarios?
Un método:
- Dale a los usuarios una serie de tareas que hacer con su aplicación y comprueba si pueden realizarlas sin tu intervención.
- Una miembro del equipo puede actuar como el "ordenador".
- cambia pantallas o partes de pantallas en función de las interacciones del usuario
- Otra miembro del equipo toma notas
- anota lo que hace el usuario y sus comentarios y reacciones.
- Con su permiso, también puedes grabar la sesión de pruebas.
Recuerde que tus testers están ahí para ayudarte. No juzgues ni intervengas en sus interacciones (aparte de que el "ordenador" responda/actualice el prototipo en función de las acciones).
Recibe tus comentarios con agradecimiento.
He aquí un buen ejemplo de prueba de usuarios para una aplicación de reparación de bicicletas.
ACTIVIDAD 2: OBTÉN FEEDBACK
Prueba tu 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.
- Una miembro del equipo puede actuar como el "ordenador" y reaccionar a sus acciones.
- Otra miembro del equipo (o dos) toma notas de lo que hacen los usuarios, sus comentarios y reacciones.
REFLEXIÓN
Te recomendamos que guardes tu prototipo en papel. Necesitarás consultarlo a medida que vayas construyendo tu 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á tu 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
