El prototipo: probar antes de construir
Un prototipo es una versión de un diseño que se puede usar: responde a la interacción aunque por dentro no funcione, y existe para probar decisiones antes de construir nada.
Término
El prototipo
Categoría
Instrumento de prueba
No confundir con
El mockup, que representa el aspecto pero está quieto
Dónde se decide
En la iteración, cuando hay una pregunta que sólo se responde probando
Cuatro objetos y cuatro preguntas distintas
El prototipo se entiende mejor puesto en fila con los otros tres objetos que lo rodean, porque los cuatro se confunden en la conversación diaria y cada uno responde a una pregunta que los demás no responden.
| Objeto | Qué es | Qué pregunta responde |
|---|---|---|
| Boceto | Trazo rápido, hecho para pensar y para descartar | ¿Cuántas soluciones distintas hay? |
| Wireframe | Esquema de baja fidelidad, sin color ni tipografía final | ¿Qué hay en la pantalla y dónde está? |
| Mockup | Representación de alta fidelidad del aspecto, todavía estática | ¿Cómo se ve esto terminado? |
| Prototipo | Versión que responde a la interacción | ¿Qué pasa cuando alguien lo usa? |
La confusión más costosa es entregar un mockup diciendo que es un prototipo. El mockup no responde al toque y no puede fallar delante de nadie, que es justamente para lo que sirve un prototipo. Un mockup aprobado en reunión sólo prueba que la pieza gusta quieta.
El wireframe: qué hay y dónde, sin nada más
El wireframe fija qué elementos hay en una pantalla y en qué posición, y deja fuera el color, la tipografía definitiva y la imagen final. Esa renuncia es deliberada y es la única manera de conseguir que una revisión hable de contenido y no de estética. Cuando un wireframe lleva color, la conversación se va al color y la decisión que se buscaba queda sin tomar.
Lo que sí debe estar resuelto en un wireframe es la jerarquía: qué se lee primero, segundo y tercero, expresado con escala y posición ya que no hay color. Si no se distingue en gris, tampoco se distinguirá después, porque el color habrá sido un parche sobre un orden que no existía.
El mockup: cómo se ve, todavía quieto
El mockup resuelve el aspecto y se queda ahí. Es donde se deciden la tipografía, la paleta, la fotografía o la ilustración, y donde se comprueban cosas que el wireframe no puede comprobar, empezando por el contraste. Las Web Content Accessibility Guidelines del W3C piden en nivel AA una relación mínima de 4.5:1 para texto normal y 3:1 para texto grande, entendido como 18 pt, es decir 24 px, en peso normal, o 14 pt, 18.66 px, en negrita, y esa medición se hace sobre el mockup y no más tarde.
Corresponde también a esta etapa una comprobación que rara vez se hace: verificar que la información siga disponible sin el color. La deficiencia en la visión del color más común es la del rojo y el verde, que afecta a alrededor del 8 % de los hombres y al 0.5 % de las mujeres de ascendencia europea. El color no puede ser el único portador de una información, y el mockup en escala de grises es la prueba más barata.
El prototipo: qué pasa cuando se toca
Un prototipo se distingue porque tiene estados, y un componente de interfaz no es un dibujo sino el conjunto de sus estados: reposo, hover, que es el estado al pasar el cursor por encima, foco, activo, inhabilitado, carga y error. Siete estados por componente, y el prototipo existe para que alguien los recorra. Los dos que más se olvidan son carga y error, precisamente los que el usuario encuentra el día que algo va mal.
Lo que un prototipo prueba no es si la pieza gusta sino si se puede usar. Jakob Nielsen publica en 1994 sus diez heurísticas de usabilidad, que sirven como lista de comprobación sobre un prototipo antes de llevarlo a alguien externo. Donald Norman publica en 1988 The Psychology of Everyday Things, reeditado como The Design of Everyday Things, y de ahí vienen affordance, en español invitación de uso, y significante: un prototipo permite comprobar si el elemento invita al gesto que se espera, o si necesita una etiqueta para explicarlo.
Cuánta fidelidad hace falta
La fidelidad de un prototipo se elige por la pregunta que hay que responder, no por lo que impresione mejor. Un prototipo de papel responde si el orden de los pasos es correcto. Uno clicable responde si la navegación se entiende. Uno con datos reales responde si el contenido cabe, la pregunta que más veces se descubre tarde. Subir la fidelidad por encima de lo que exige la pregunta cuesta tiempo y hace creer al interlocutor que la decisión ya está tomada.
En pantalla hay una pregunta específica que sólo el prototipo contesta: qué ocurre al cambiar el ancho. Ethan Marcotte publica el artículo Responsive Web Design en A List Apart en 2010, y desde entonces la maquetación de una página web no es una disposición sino un conjunto de estados. Probar un prototipo en un celular y en una computadora, con contenido real, revela reordenamientos que en el mockup nadie había decidido.
El prototipo fuera de la pantalla
En producto y en diseño industrial el prototipo cambia de naturaleza porque cambia lo que está en juego. Lo que distingue al diseño industrial es la serie: la pieza se fabrica muchas veces y de forma idéntica, con un molde o una herramienta que hay que pagar antes. Todo lo que no se probó en prototipo se paga en molde, y por eso las etapas previas se estiran hasta agotar las dudas de encaje, resistencia y manipulación.
La ergonomía, que ajusta el objeto y el puesto de trabajo al cuerpo humano, se consolida como campo después de la Segunda Guerra Mundial. Sus preguntas no se responden en pantalla: se responden con un objeto en la mano, aunque el material no sea el definitivo. Ese es el argumento a favor del prototipo tosco: contesta la pregunta correcta con el material equivocado, y no al revés.