Diseño de prototipos

Objetivos del taller

• Implementar herramientas que permitan idear soluciones de diseño y prototipos de interfaz.
• Crear bocetos de las experiencias propuestas.

​

Productos: viaje usuario, moodboard y wireframes/storyboard

¿Qué queremos contar?

Nuestro punto de partida es la historia que queremos contar, esta nos permitirá conocer los elementos principales de la propuesta además de darnos una idea de la estructura y las acciones que se desarrollarán.

¿Cuáles son los objetivos

de nuestra propuesta?

Después de tener clara la historia que vamos a contar,  debemos definir los objetivos de nuestra experiencia. Estos nos permitirán trazar un camino para cumplirlos, esquematizando el flujo de los procesos que se desarrollarán y reconociendo los problemas y oportunidades que se presentan en los mismos para establecer funcionalidades específicas.

1. Describir el viaje del usuario

• Con la intención de comprender mejor el "problema" que estamos atendiendo con nuestra experiencia,  partiremos de la sinopsis para redactar el objetivo de nuestra experiencia. Este objetivo debe responder las siguientes preguntas:
  • ¿Quién es nuestro usuario?
  • ¿Qué es lo que quiere lograr?
  • ¿Por qué lo quiere lograr?
  • ¿Cuándo lo quiere lograr?
  • ¿Dónde lo quiere lograr?
• Después de esto debemos preguntarnos ¿qué procesos serán necesarios para que el usuario pueda lograr su objetivo?
• Con estos procesos definidos procedemos a crear un mapa de viaje donde se describe cada una de estos procesos como una de las fases de la experiencia propuesta especificando las acciones, y la experiencia emocional del usuario (puntos de dolor, momentos felices)

1. Describir el viaje del usuario

• Una vez que definidos los puntos de la experiencia emocional del usuario podremos visualizar que procesos están funcionando bien y qué cosas pueden estar saliendo mal en la experiencia propuesta.
• En este punto podemos agrupar los procesos, o específicamente los puntos de dolor, que estén relacionados para crear categorías que podamos definir con una o dos palabras.
• Tener en cuenta estas categorías permitirá proponer funcionalidades y soluciones para mejorar la experiencia del usuario, reformulando los procesos y buscando que sean más interesantes.

¿qué referentes tenemos?

Después de tener una idea más clara del tipo de funcionalidades que necesitamos diseñar en nuestra experiencia,  es importante indagar por referentes que nos permitan una aproximación a lo que será nuestra interfaz.

2. Elaborar un moodboard

2. ELABORAR UN MOODBOARD

• Hacer una búsqueda de referentes usando palabras claves que pueden estar relacionarse con nuestra propuesta según:
  • Categoría [Red social, instalación, videojuego, ...]
  • Funcionalidad [búsqueda, like, favorito, compra, reserva, video...]
  • Tipo de pantalla [inicio, selección, mapa, perfil, galería, detalles, ...]
  • Componente [tarjetas, listas, botones, formularios, imágenes, ...]
• behance.net, dribbble.com, designspiration.com, abduzeedo.com, mobbin.design, pttrns.com
• Recopilar y guardar las imágenes que se consideren referencias relevantes y categorizarlas.
• Crear un moodboard relacionando estás imágenes en un mismo soporte [Jamboard, presentación, pinterest, ...]
• https://www.pinterest.es/carlosfrontera9/mood-board-collage/

¿Cómo se verá nuestra experiencia?

Es hora de  empezar a traducir nuestras propuestas en pantallas. Para esto desarrollaremos los bocetos (wireframes o storyboard) de cada una enfocando la discusión en asegurar los objetivos propuestos para la experiencia.

3.1. Storyboards

• Los storyboards son ilustraciones que representan planos que por último representan una historia. Básicamente, es un arte secuencial, donde se agrupan y ordenan imágenes para visualizar la historia.
• Permite transmitir el "panorama general" de la idea en pocas imágenes.
• La acción de cada escena se presenta en términos visuales.
• Puede ayudar a comprender cómo las personas fluirán a través de la interacción con la historia a lo largo del tiempo, dándonos un claro sentido de cómo crear una narrativa poderosa.
• Al comprender los fundamentos de la historia y deconstruirla en sus bloques  constitutivos, podemos presentarla de una manera más poderosa y convincente.
• El storyboard requiere que nos enfoquemos en lo que es importante para contar nuestra historia. Nos permite articular el problema y los requerimientos para una solución.
• Combina varios elementos de diseño ( personas, requisitos, soluciones, etc) en una historia coherente.

3.1. Storyboards

Al pensar en la creación de storyboards, la mayoría de las personas se enfoca en su habilidad (o inhabilidad) para dibujar. Las buenas noticias es que no es necesario ser bueno en dibujo antes de empezar a dibujar storyboards.

Lo que es mucho más importante es la historia que se quiere contar. La clave es transmitir claramente la información.

"Designer’s main skill is not Photoshop or Sketch, but the ability to formulate and describe a scenario."

3.2. wireframes lo-fi

• También conocido como un esquema de página o plano de pantalla, el wireframe es una guía visual que representa el esqueleto o estructura visual de lo que se verá en cada pantalla.
• En este se define el plano, es decir,  los elementos necesarios en cada pantalla.
• Transmite la dirección general y la descripción de la interfaz de usuario.
• No es necesario que sean perfectos. La intención es poder aumentar progresivamente el nivel de detalle.
• Como la discusión debe estar enfocada a la experiencia se recomienda no usar color.
• Puede ser elaborado a mano o digitalmente.

3.2. WIREFRAMES LO-FI

Para asegurar el cumplimiento de los objetivos en el wireframe debemos preguntarnos constantemente:

• ¿Quién es el usuario?
• ¿Cuáles son los objetivos de usuario previstos al interactuar?
• ¿Cuál debería ser el contenido y cómo debería organizarse para apoyar los objetivos?
• ¿Cómo enviar el mensaje principal al usuario?
• ¿Dónde está el llamado a la acción?
• ¿Qué debería ver primero el usuario?
• ¿Qué esperará ver nuestro usuario en la pantalla?

3.2. WIREFRAMES LO-FI

En cada pantalla se deben disponer los elementos necesarios para que nuestro usuario entienda:

• Qué acaba de suceder
• En qué parte del flujo está [dónde]
• Qué puede hacer
• Qué pasará cuando lo haga

4. wireframes HI-fi  MOckups

• Permite definir con más detalle el formato visual de la propuesta, el tamaño de los elementos, el espacio entre  ellos según el tipo de interacción y priorizar los llamados a la acción
• Es importante tener en cuenta las proporciones o elementos propios de los dispositivos para los que se está diseñando y usar contenido real.
• Es importante que el diseño de nuestras pantallas cumpla los siguientes principios:
  • Claridad
  • Flexibilidad
  • Familiaridad y patrones
  • Feedback
  • Consistencia
• bit.ly/wireframesUX (ejemplos), thenounproject.com (iconos)