Wirefrimes, mockups y prototipos
Desde hace tiempo vengo notando cierta confusión entre los distintos tipos de documentos de trabajo que usamos los diseñadores UX/UI y cuál es su finalidad.
Está claro que con todas las herramientas de trabajo con que contamos hoy en día, y que cada vez hacen más fácil y rápida la creación de prototipos de alta fidelidad, que incluso inluyen interacciones, hay veces que tendemos a dejar de lado pasos previos y lanzarnos al diseño final directamente.
Sin embargo realizar distintos tipos de bocetos con distintos niveles de fidelidad nos ayuda a empezar a detectar errores de diseño desde las fases más iniciales y de forma muy rápida, lo cuál nos ahorra mucho tiempo a largo plazo.
Wireframes
Los wireframes son esos bocetos de baja o media fidelidad que normalmente representan los distintos elementos que van a conformar la página de una manera muy esquemática, y que además suelen incluir anotaciones sobre las distintas funcionalidades que tendrá nuestro producto.
En muchos casos los diseñadores añadimos ya desde este primer paso ciertas interacciones. Esto nos puede proporcionar una herramienta muy interesante para hacer tests con usuarios en una fase temprana, y así ir detectando problemas de usabilidad y UX que podremos solucionar mucho más fácilmente que si esperásemos a tener un prototipo más complejo. Con este tipo de documentos podemos hacer cambios muy rápidos y mejorar de forma fácil la base de nuestro diseño.
Mockups
Los mockups son prototipos de alta fidelidad que representan el diseño final del producto incluyendo colores, tipografías, imágenes, etc. Un boceto muy similar a lo que será el producto final que nos ayuda a hacernos una idea de cuál va a ser el resultado.
Este tipo de documentos no sólo son muy útiles para usar como base para la maquetación final de nuestro producto, además son una parte imprescindible de la documetación que mostramos al cliente.
Normalmente el cliente necesita y quiere ver un producto lo más parecido al resultado final para poder dar su visto bueno al diseño o pedir los cambios pertinentes en el mismo.
Prototipos interactivos
Estos son prototipos de alta fidelidad que incluyen ya las interacciones, sobre todo las más importantes o complejas.
Este tipo de prototipos tienen un gran valor como paso previo a la fase de desarrollo, por una parte es una buena herramienta de comunicación con el cliente, para hacerle ver una imagen del producto final muy similar a lo que será la realidad. Por otro lado nos proporcionan la oportunidad de crear tests de usuario previos a la fase de desarrollo, que nos ayudarán a encontrar posibilidades de mejora en el funcionamiento de nuestro producto digital. Y finalmente son documentos muy interesantes para usar como forma de comunicación con los desarrolladores. Pasar un prototipo interactivo de cómo queremos que quede el producto final puede evitar problemas de comunicación y siempre será más fácil mostrar cómo tiene que funcionar algo que pasar una hoja compleja de funcionalidades y requisitos que puede no entenderse bien.
Por supuesto no en todos los proyectos tenemos que usar todos estos documentos, lo proyectos más sencillos no tienen por qué pasar por tantas fases y pueden simplificarse bastante. Pero en proyectos complejos y largos empezar por documentos más básicos e ir creciendo poco a poco puede evitar errores y tener que retocar los prototipos más complejos o incluso detectar el problema cuando nuestro proyecto ya está en desarrollo.
