Clase ejemplo Modulo Diseño Mobile Bootcamp
Definiendo la propuesta
Hora de empezar a diseñar...al menos los wireframes...
- Estudiar a los usuarios
- Entender a los usuarios
- Qué necesitan?
- Diseño responde a sus necesidades?
...y nos preguntamos...
Investigación del usuario
- Conocer a los usuarios
- Motivaciones, necesidades y problemas
- Estudios para determinar perfil.
- «Personas» y «Viaje del usuario», entre otras, son algunas de las metodologías utilizadas para conseguirlo.
Conocer a los usuarios
- «Personas» definen modelos o arquetipos de usuarios para los cuales vamos a diseñar.
- Análisis real comportamiento y pensamiento común
- Resultado final:
- Representación visual donde se modela al usuario a partir de los datos obtenidos
Las Personas
- ...pero tenemos que ver como se comporta ante un objetivo en un contexto determinado
El Viaje del usuario
-
Personas individualmente permiten conocer modelo de un usuario...
- Aparece el user journey o «Viaje del usuario»,
- Una forma de contar visualmente y de principio a fin, el proceso que lleva a cabo una Persona desde que tiene una necesidad hasta que la satisface usando la aplicación.
Definición funcional
Defininiendo funcionalidades
Acciones e interacciones del usuario
Funciones que tendrá la aplicación
Usando el Viaje del usuario detectamos las necesidades en cada etapa y herramientas para avanzar a la siguiente
Ejemplo: Encontrar el camino a casa (distintos tipos transporte)
Funcionalidades: Guardar ubicación, guiar sobre un mapa, tiempo de llegada, tráfico,...
Proponer una visión
Balance entre las opiniones de los usuarios y la propuesta
Arquitectura de la información
Construyendo y organizando
- Forma de organizar el contenido y las funciones
- Relación entre las pantallas y contenido
- Pantallas necesarias en nuestra app
- Complejidad de la aplicación en un solo vistazo
NAVEGACIÓN
Wireframes
- Representación simplificada de una pantalla individual
- Tener una idea de la organización de los elementos
- Separamos los objetos informativos de los interactivos
Wireframe es como un plano arquitectónico de una casa
Prototipos
- Representación de la aplicación para probar internamente o mediante test de usuarios.
- Basados en los wireframes o diseños visuales
Qué prototipamos?
Prototipo como vivienda vacía. Se muestran y experimentan espacios, configuraciones, sistemas constructivos y espaciales, formas volumétricas o funcionalidades arquitectónicas.
Pantallas necesarias para completar una tarea de principio a fin
