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

Clase ejemplo modulo diseño bootcamp

By Pablo Arqueros

Clase ejemplo modulo diseño bootcamp

  • 121