Prototipos, wireframes, mockups y sketchs ¿¿para qué??
¿Para qué vas a hacer prototipos de baja fidelidad? si después igual lo tenés que diseñar en alta… ¿para qué? ¿No ves que así perdés más tiempo? además ¿para qué sirven? No le veo el sentido……
Estas son las preguntas y comentarios con las que me topé más de una vez cuando intentaba impulsar la práctica de UX en varias empresas en las que trabajé, los diseñares estaban muy acostumbrados a trabajar como siempre lo hacían y cambiar de paradigma les costaba bastante, ahora bien respondiendo aquellas preguntas ¿qué valor aporta verdaderamente un prototipo en la metodología de DCU? ¡Todo! Es la base de la metodología iterativa que usamos cuando queremos crear productos centrados en las personas. Dicho esto, empecemos por el principio…
¿Qué es un prototipo?
La palabra prototipo proviene del griego, de hecho es la suma de dos términos de la lengua Griega:
El prefijo “protos-”, que se traduce como “el primero” y el sustantivo “tipos”, que es sinónimo de “modelo” o “tipo”.
Cuando hablamos de un prototipo nos referimos al primer dispositivo que se desarrolla de algo y que sirve como modelo o muestra para su posterior fabricación.
En síntesis, un prototipo es una versión preliminar de un diseño, que puede ser un producto físico o digital.
¿Para qué hacemos prototipos?
Los prototipos nos permiten explorar nuestras ideas antes de invertir tiempo y dinero en el desarrollo.
Lejos de ser una pérdida de tiempo, trabajar con prototipos nos permiten crear múltiples soluciones para poder "fallar rápido y barato".
Mientras que algunos "diseñadores de productos digitales" aún se siguen preguntando ¿para qué hacemos prototipos?, los diseñadores industriales lo tienen totalmente incorporado en su metodología de trabajo, ¿y como no van a tenerlos? o acaso ¿se imaginan a un diseñador industrial diseñando directamente el modelo final de un auto, un televisor o una cafetera? ¿suena ilógico no? ¿entonces por qué pensamos que es distinto cuando diseñamos un producto digital?.
Un poquito de historia: El famoso prototipo de Palm
Antes que nada quiero aclarar para los lectores más jóvenes, que la hoy obsoleta PALM fue la antecesora de nuestros amados smartphones. Cuenta la leyenda que Hawkings (diseñador de la Palm) cortó un pedazo de madera del tamaño del bolsillo de su camisa y andaba de acá para allá usándolo como si fuera una verdadera computadora, cuando tenía que buscar el teléfono de un contacto, pretendía que usaba su Palm para encontrarlo, esto le permitió validar la utilidad de la misma mediante su uso (a pesar de que la gente pensaba que se le había zafado un tornillo).
La pregunta más importante que se hizo fue: si tuviera una realmente, ¿la llevaría conmigo y la usaría?; ¿Se imaginan si Hawkings se hubiera lanzado directamente a desarrollar el producto final? ¿Qué hubiera sido de la Palm si en lugar de hacerla de tamaño del bolsillo de su camisa lo hacia de el doble o de la mitad?
¿Qué podemos aprender de esta historia?
En primer lugar que un prototipo no es una replica del producto final, sino que es la versión más barata posible que nos permita hacer validaciones con usuarios para hacer avanzar nuestro proyecto. Un prototipo no necesita estar completo ni ser bonito, sino ser eficiente, rápido, barato y fácil de construir. Hago mucho énfasis en esto ya que a lo largo de mi carrera profesional he visto prototipos más perfectos y completos que el producto final así como también he visto fracasar muchos proyectos por el simple hecho de haber salteado la etapa de prototipos e ir directo al diseño del producto; en síntesis los prototipos nos permiten fallar rápido y aprender de ellos.
Aprender a soltar
En mi experiencia personal, los prototipos nos permiten a los diseñadores aprender a soltar las ideas, en el poder soltar es donde radica el verdadero valor de un prototipo, ya que de eso se trata el diseño de experiencias, tener muchas muchas ideas y quedarnos con aquella que mejor se ajusta a las necesidades de nuestros usuarios.
Cuando diseñamos el producto final ponemos lo mejor de nosotros para desarrollar esa idea, le dedicamos muchas horas, nos enamoramos y nos casamos con nuestra idea, la idea se convierte en nuestro hija la cuidamos y la defendemos con uñas y dientes y es ahí es donde firmamos nuestro contrato con un inminente fracaso.
Los prototipos, en cambio, nos ayudan a desapegarnos de todos esto ya que nadie se enamora de un prototipo rústico e incompleto, no lo cuidamos como a un hijo y por eso no nos duele (o al menos no tanto) cuando lo critican; nos deshacemos de él rápidamente y pasamos a otra idea o mejor dicho aprendemos que él y creamos un mejor versión.
A modo de conclusión de esta primera parte del artículo les dejo una frase que me gusta mucho de Alberto Savoia
Make sure — as quickly and as cheaply as you can — that you are building the right it before you build it right.
Estadíos de madurez de un prototipo
Como mencioné antes vamos a llamar prototipo a cualquier artefacto previo al producto final, los prototipos pueden tener distintos estadíos de madurez, que generalmente van a coincidir o deberían con el estadío de madurez del proyecto para el cual estamos trabajando.
Aunque es bastante común tener más de un prototipo durante el ciclo de vida del proyecto, es importante que no nos volvamos puristas y tengamos siempre presente el objetivo fundamental de un prototipo, ya que no se trata de tildar casilleros en una lista de tareas sino de llegar lo más pronto posible al mejor producto que podamos. Cuando digo esto se me viene a la cabeza un antiguo jefe, que me pedía hacer wireframes de pantallas que ya tenían mockups, solo por sentirse seguro de que habíamos hecho todo los pasos del proceso de ux. :/
Para no caer en este error es muy muy importante tener siempre presente que el prototipo nos debe servir para aprender de él y avanzar los más rápido y barato posible en nuestro proyecto; sin más preámbulos veamos los distintos estadíos que puede tener un prototipo.
Sketch
El prototipo de tipo sketch es el más rudimentario de todos, de hecho es la primera aproximación a la idea del producto, nos permite comenzar a materializar la idea que tenemos en nuestras cabezas sobre una solución de diseño, son los sketch abundan en las pizarras de las salas de reuniones y que quedan como conclusión de las reuniones donde comenzamos a proponer ideas para el producto que estamos diseñando. !la galería de fotos de mi teléfono suele estar repleta de sketchs!.
Los sketchs se caracterizan por estar creados a mano alzada, generalmente en papel, aunque también los hay en versión digital, poseen muy poco nivel de detalle ya que buscan mostrar únicamente la idea de la solución de diseño.
Wireframe
Los wireframes son una versión más refinada del prototipo, en ellos se plasma principalmente la arquitectura de información y el diseño de interacción de la solución de diseño que estemos proponiendo. Si bien los wireframes están aún muy lejos visualmente del diseño final (y es así como debe ser) ya presentan un nivel mucho mayor de fidelidad en cuanto contenido, estructura y niveles le legibilidad.
Lo importante de los wireframes es que permiten a quienes los van a evaluar, concentrarse en la estructura, el contenido y la usabilidad, es decir en la solución de diseño, por eso cuando creamos wireframes debemos evitar las malas praxis, como el uso de color o de elementos visuales que puedan confundir a los observadores y los lleve a hacer la pregunta más molesta de la historia del diseño de productos digitales ¿Así va a quedar esta pantalla? o ¿no le podemos poner más colores?.
Los wireframes pueden estar también realizados a mano alzada aunque es más común que sean digitales ya que existen muchas herramientas que nos permiten crearlos con mucha facilidad y a gran velocidad, incluso nos permiten hacerlos interactivos.
Mockup
Un mockup es la versión que más se aproxima a producto real, posee alta fidelidad del estilo visual, en aquí dónde volcamos toda la magia del diseño gráfico y el branding que permiten a nuestro producto tener una identidad única. Los mockups se caracterizan por ser pixel perfect y se crean en estadíos avanzados del proyecto, cuando estamos seguros que la arquitectura de la información y el diseño de interacción fueron pensados en función de los modelos mentales de los usuarios de nuestro producto.
Este tipo de prototipo puede ser estático o interactivo, esto dependerá del objetivo para el cual hayamos creado el prototipo.
¿Estáticos o interactivos?
Los prototipos pueden ser estáticos o interactivos, como vimos antes esta no es una característica intrínseca al estadío de madurez del prototipo sino que depende del objetivo para el cual lo estamos creando. Los prototipos estáticos son aquellos que están compuestos por imágenes digitales o físicas donde se muestran las distintas pantallas del flujo del producto; los prototipos interactivos en cambio, también se componen de pantallas físicas o digitales con la diferencia que están interconectadas entre si para simular la navegación del producto real, incluso en el caso de prototipos para aplicaciones móviles, se pueden replicar los gestos que utilizan las personas al usar las aplicaciones.
Existen diversas herramientas que permiten construir prototipos interactivos algunas de ellas tienen funciones avanzadas que permiten que incluso simular funcionalidad que permite al usuario completar los campos de los formularios.
Los prototipos interactivos son un deleite a la hora de mostrar nuestras ideas aunque la contracara es el costo que toma desarrollarlos, por eso debemos evaluar bien cuándo necesitamos un prototipo interactivo y cuándo nos alcanza con uno estático.
¿Entonces siempre tengo que hacer todos estos prototipos? Noooooooooooooooo!!!! solo aquellos que nos permitan llegar lo más rápido posible a nuestro objetivo y con el menor costo posible.
Si estamos diseñado un proyecto de 0, es muy probable que pasemos por todos estos estadíos de madurez del prototipo, conforme nuestro proyecto va avanzando, por lo contrario, si estamos diseñado una nueva característica de nuestro producto posiblemente hagamos directamente el mockup ya que como contamos con mucho material previo, posiblemente de esta forma logremos avenar más rápido.
Fidelidad ¿alta o baja?
Cuando se habla de prototipos es muy común escuchar que se refieren a ellos como prototipo de alta o de baja. Se suele llamar prototipo de baja fidelidad a los sketchs y/o wireframes y prototipo de alta fidelidad a los mockups; bueno permitanme decirles que esto no es del todo correcto, en realidad no existe una asociación directa entre el tipo de prototipo y el nivel de fidelidad, es decir, no siempre los wireframes son de "baja" así como tampoco los mockups son siempre de "alta" ¿Cómo es esto posible?.
Resulta ser que la fidelidad alta o baja de un prototipo depende de tres dimensiones:
- Contenido
- Visual
- Funcionalidad
Visual
La fidelidad visual refiere al estilo gráfico del prototipo es decir a la calidad del pixel perfect, resulta casi obvio decir que un mockup posee alta fidelidad visual mientras que un wireframe posee baja fidelidad en este aspecto. Cuanto más parecido al producto final sea nuestro mockup es más alta es su fidelidad visual.
Contenido
La fidelidad de contenido refiere a la palabra escrita, este es un gran tema, ya que en la mayoría de los casos el contenido representa el 95% de nuestro producto. La fidelidad del contenido será alta cuando el texto que contenga el prototipo sea el real de forma tal que un wireframe puede tener alta fidelidad de contenido así como un mockup puede tener baja fidelidad de contenido. La fidelidad alta de contenido es particularmente importante cuando creamos un prototipo que va a ser usado en pruebas con usuarios.
Funcionalidad
La fidelidad de funcionalidad refiere al nivel de interacción que puede o no tener el prototipo es decir, si es un prototipo estático creado con pantallas que no se vinculan entre sí, o bien si es un prototipo interactivo donde las pantallas que lo componen están vinculados entre sí permitiendo simular la navegación de producto final. Al igual que en el caso de contenido, la fidelidad funcional no esta directamente relacionado al estadío de madurez del prototipo, ya que podemos tener wireframes con alta fidelidad de funcionalidad, así como también tener mockups estáticos, es decir con baja fidelidad de funcionalidad.
¿Entonce… ?Cuál es la mejor forma de crear prototipos? No hay una forma mejor o peor, !siempre depende el objetivo que busquemos alcanzar con nuestro prototipo!
Técnicas y herramientas
Los prototipos pueden ser digitales o analógicos (papel y lápiz) así como también pueden ser estáticos o interactivos; en cualquiera de los casos el mercado nos provee hoy día de una gran cantidad de herramientas especialmente creadas para realizar prototipos de productos digitales, vienen a mi cabeza en este momento algunos nombres tales como: Balsamiq (mi favorita), Axure, Ux Pin, InVision, Marvel y Sketch entre otras.
Muchas de estas herramientas permiten crear prototipos de baja fidelidad visual de forma simple y muy rápida; esto se debe a que poseen gran cantidad de componentes pre diseñados que podemos arrastrar y soltar en nuestros prototipo para crear las pantallas del flujo de nuestro producto.
Ahora bien, no importa qué herramienta uses, todas son buenas, cada una de ellas posee lógicamente sus fortalezas y debilidades y repito, no importa que herramienta elijas usar, lo que importa es cuanto provecho logras sacar con ella, si crear un prototipo del tipo wireframe, lleva el mismo tiempo o más aún que hacer un mockup, entonces no estamos sacando provecho a la técnica ni a la herramienta.
En síntesis….
Crear prototipos es esencial cuando diseñamos productos digitales ya que nos permite explorar múltiples ideas y deshacernos rápido de ellas, nos permite iterar rápido y aprender en base al feedback que obtenemos. Lejos de hacernos perder tiempo, trabajar con prototipos nos permite avanzar mucho mas rápido en nuestro proyecto y llegar al mejor producto posible, siempre y cuando no perdamos el foco de para qué estamos creando el prototipo, por esta razón no importa qué técnica o herramienta usemos para crearlo, lo que importa es invertir el menor tiempo posible y aprender el máximo posible, o bien como dijo Tom Kelley:
Fail early, fail often, in order to succeed sooner.