fcbk
Conéctate con TwitterConéctate con Facebook
8

Lo que aprendí de hacer un prototipo en diseño de producto

1780Puntos

hace 6 días

En un post anterior había escrito todo aquello que aprendí sobre User Research cuando empecé a hacer diseño de producto. Tranquilo, puedes ir y leer ese artículo y volver a este.

Ahora, que ya hemos definido todos los features de nuestro producto gracias al user research, llega el turno de crear un prototipo y de esas lecciones que aprendí es de lo que quiero hablar ahora.

prototipo.png

El prototipo es más importante de lo que crees

Un prototipo nos ayudará a entender si a nuestros usuarios les parece intuitivo lo que hemos diseñado antes de llevarlo a producción. Además, ayuda a detectar fallas fundamentales y hacer ajustes muy rápidamente, lo cual sería muy costoso en recursos y tiempo si se hiciera en el producto final. Entre lo que aprendí en esta parte quiero compartir:

1. Arquitectura de información

La arquitectura de la información es una rama dentro de UX, que se ocupa de analizar y estructurar la información y el contenido que va a tener tu sitio o aplicación. Algo así como el esqueleto, la estructura que va a tener. El objetivo es organizar la información que contendrá tu propuesta y resumirla de manera tal que puedas priorizarla. Teniendo en cuenta no ocultar las cosas importantes al usuario y que igualmente no exista exceso de información. Hazlo en papel, ya que tendrás bastantes iteraciones.

Puedes ir jugando un poco con el copy que es parte importante de la experiencia de usuario. En esta etapa el mejor consejo que te puedo dar es: es cierto que el contenido es el rey, pero no olvides que el contexto es Dios. Piensa en que el viaje del usuario debe fluir de manera natural y no está mal tomar ciertas decisiones por él, toma atajos evitando callejones sin salida.

2. Patrones de UI

Después debemos averiguar qué tipo de elementos vamos a incluir. ¿Esto será un formulario? ¿Un botón? ¿Va a tener validación de campos y cómo lo va a mostrar? ¿En móvil vamos a tener un menú de hamburguesa? ¿Usare modales?

Existen muchos patrones de UI ya pensados para ciertos caso y es importante tomarlos como referencia. Aquí tienes algunas referencias: http://ui-patterns.com/patterns

Por cierto, si diseño web aún te parece algo ajeno, también puedes consultar la documentación de algún framework de CSS por ejemplo: http://getbootstrap.com/components/.

Esto no es para que tus diseños sean iguales, sino más bien para conocer qué tipos de elementos existen en web. Por cierto, aún no te preocupes tanto por color, forma, tipografía, pero aún no llegamos a esa parte.

3. Wireframes

Los wireframes es lo más cercano a cómo se verá nuestro producto y aquí es donde nos apoyamos de herramientas como Sketch o Adobe XD para hacerlos. Si bien podrías ir directo al diseño final, es recomendado tener dos etapas para terminar de probar nuestra idea:

  • La primera es un low-fi wireframe, que es compartir de manera rápida todo lo que hemos hecho en papel y llevarlo a digital mediante el uso de figuras simples. Esto para tener feedback con el equipo respecto a composición, tamaños de textos y las intenciones de acomodar ciertos elementos.

  • Y la siguiente es el hi-fi wireframe, que es algo muy cercano a lo que será el diseño final y es lo que vamos a probar con usuarios usando herramientas de prototipos como Invision.

Recuerda que sigue siendo un wireframe, por lo que será la versión más minimalista en diseño visual.

4. Prototipo y pruebas con usuarios

Hasta este punto hemos llegado al wireframe y es importante realizar pruebas sobre este. Podemos elegir entre herramientas como Invision, Marvelapp, etc. Prepara una pequeña entrevista y haz todo tipo de anotaciones sobre su comportamiento. La idea aquí es que no interrumpas ni te expliques, tu diseño debe hablar por sí mismo.

Esa es una de las razones por las cuales hacemos las pruebas en esta etapa y no en la parte visual, ya que muy pocas veces un feedback irá en torno al color o tipografías o iconos.

Déjanos en los comentarios que herramientas son tus favoritas para el diseño de wireframes y que tipo de pruebas haces con ellos.

Uriel
Uriel
@ThespianArtist

1780Puntos

hace 6 días