Fases del Diseño UX: De Bocetos a Prototipos

Hasta ahora hemos conocido los conceptos correspondientes a las primeras etapas del diseño de productos, conociendo el significado de términos relacionados con la  reunión de lanzamiento, a la investigación con usuarios y los conceptos básicos de UX, como las dimensiones del diseño UX, la arquitectura de la información y las Leyes UX.

Actualmente nos encontramos en el momento de inicio del diseño de la Experiencia de Usuario del producto que vamos a diseñar. Es el momento de comenzar a crear los primeros bocetos del producto.

Cuando se comienza a diseñar un producto, una vez se han concretado las necesidades de los usuarios que se buscan satisfacer, se deberá pasar por diferentes fases para desarrollar los bocetos y prototipos del producto. A continuación vamos a conocer las fases por las que puede pasar un diseño desde las ideas más básicas creadas en un dibujo sencillo hasta los prototipos finales que poseen todos los detalles del producto.

Los conceptos que vamos a conocer en esta clase corresponden únicamente al diseño de UX, es decir, nos ayudan a determinar cómo debe ser el diseño para que proporcione experiencias positivas, en vez de centrarnos en el aspecto visual. Para comprobar que estos diseños, que creemos, se ajusten a las necesidades de las personas, tendremos que realizar Testing con usuarios, pero estos conceptos los veremos en próximas clases.

Existen diferentes etapas cuando hablamos de la creación del diseño de productos, que corresponden a nivel de detalle incluimos en los diseños.

Los diseños con un nivel de detalle menor son los sketches, que son representaciones creadas a mano para plantear una primera idea de la composición de los elementos que compondrán la interfaz. Tras estos diseños encontramos los wireframes de baja fidelidad, que tienen la cantidad de detalle algo superior, y los wireframes de alta fidelidad que tienen una apariencia más parecida a la que tendrá el producto final. Finalmente encontramos los prototipos, que son diseños que incluyen las interacciones que se producen entre las pantallas.

A continuación vamos a ver con un poco más de detalle cada uno de estos conceptos.

Sketching o bocetos en papel

Técnica que nos permite comenzar a pensar en soluciones para las necesidades de los clientes. Consiste en dibujar sobre papel las pantallas del producto (todas o parte de ellas), los procesos y las relaciones entre las distintas pantallas.

Los bocetos en papel se suelen realizar con rotuladores de un solo color y utilizando folios en blanco. Cuanto más sencillos son los materiales utilizados en esta técnica más atención podremos poner en incluir las funcionalidades necesarias para que los usuarios puedan satisfacer sus necesidades.

Aquí se puede ver un ejemplo de un Sketch de un producto digital. En él podemos ver diferentes tarjetas de contenido compuestas por una parte escrita y una imagen. También podemos ver más abajo un espacio en el que se incluirán vídeos.

Wireframes

Es un conjunto de dibujos en el que se representa cómo estarán organizados los elementos en las diferentes páginas o pantallas de un sitio web o aplicación, implementando aspectos generales referidos a su apariencia estructural, sin entrar en detalle.

La técnica de wireframing consiste en el diseño esquemático de una interfaz, es decir, de los elementos que aparecerán en pantalla. El wireframing debe ser la columna vertebral del producto y, en ningún caso, se trata de estética, sino que debe incluir elementos que faciliten la realización de las tareas de usuario y satisfagan los objetivos del proyecto.

A continuación se puede ver un ejemplo de wireframes de baja fidelidad de una landing page. En él se aprecian los lugares que se han destinado al logotipo, a la barra de búsqueda, e incluso a las imágenes.

Fuente: NNGroup

Dentro del diseño de los wireframes podemos encontrar un formato un poco más avanzado del diseño del producto, en el que se incluyen las relaciones que podremos encontrar entre las pantallas.

Los wireflows son una especificación de diseño en un formato que combina páginas de wireframes, con las características de diseño visual que se hayan especificado, con flowcharts que representan las interacciones.

Su uso nos permite documentar el proceso del usuario utilizando una tarea común del producto (por ejemplo, enviar un mensaje directo a algún contacto) en cada paso en el flujo de trabajo a través de un wireframe simple o un mockup de alta fidelidad.

Se puede ver un ejemplo de que flow de un producto digital.

Fuente: NNGroup

Finalmente, la última técnica que podemos encontrar en el diseño UX es la creación de prototipos.

Prototipado

Es una técnica que sirve para diseñar y ejecutar la interacción entre las pantallas que componen los procesos de un producto.

Estos diseños pueden ser de alta o de baja fidelidad:

• Prototipos de bajo nivel o baja fidelidad (Lo-Fi): cuando se habla sobre prototipado rápido o Lean UX, normalmente se refiere a prototipos de baja fidelidad. Los prototipos de baja fidelidad son buenos para centrarse en refinar la interacción, en lugar de centrarse en detalles técnicos o visuales.
• Prototipos de alto nivel o alta fidelidad (Hi-Fi): los prototipos de alta fidelidad son más adecuados cuando estás en las últimas fases del diseño y estás pensando en cosas como el branding, el aspecto de tu producto y otros detalles. Permiten que te acerques tanto como sea posible al producto final, pero a bajo coste.

Cuando realizamos los procesos de diseño de un producto, no siempre es necesario pasar por todos los pasos que hemos visto. Sin embargo, lo más recomendable es que podamos ir avanzando poco a poco en los detalles del producto a medida que vamos testeando que el diseño sea correcto. Por este motivo, es recomendable pasar por todas estas fases.

CONCLUSIÓN:

En esta clase hemos visto las diferentes etapas que forman parte del diseño de productos, comenzando por los diseños con un nivel de detalle, como los Sketches o los wireframes de baja fidelidad, y terminando la clase conociendo el concepto de prototipo, que es el diseño en el que se incluyen las interacciones entre las diferentes pantallas.

RETO:

Escoge una idea de un producto digital y realiza un Sketch o boceto en papel del diseño. Muestra a la comunidad de Platzi el aspecto que tiene este diseño inicial.