Antes de comenzar

Un prototipo es un modelo del producto o servicio que incluye aspectos funcionales, estructurales y gráficos del diseño. Se realiza en la fase de generación, después de haber realizado la investigación y de haber definido los objetivos y principales aspectos del diseño.

En el ámbito teórico de la UX no existe un consenso claro en torno a las diferencias y alcance de conceptos como wireframe, mockup, prototipo de baja fidelidad y prototipo de alta fidelidad. No obstante, en el contexto profesional sí está extendida la importancia del prototipado como proceso clave para materializar la propuesta de valor e iterar el diseño y la interacción hasta llegar a una versión final optimizada.

El proceso de prototipado es iterativo y evoluciona desde las primeras propuestas de baja fidelidad, todavía lejanas del diseño final, hasta las de alta fidelidad, que definen las características que deberá tener el producto o servicio cuando sea utilizado por los usuarios. El prototipado se alterna, por tanto, con la evaluación en un proceso de iteración continua que permite optimizar progresivamente el diseño hasta lograr la propuesta que se pondrá en desarrollo.

Preparación

Por un lado, antes de comenzar a prototipar es necesario tener claros los objetivos del proyecto y cuáles son las principales interacciones que vamos a representar. En este sentido, es conveniente haber realizado el árbol de contenidos del producto o servicios, así como tener bien definidos los principales flujos de interacción.

Por otro lado, el prototipado es un proceso iterativo que consta de diferentes fases en las que el diseñador puede trabajar solo o de manera colaborativa. Por eso, antes de empezar a prototipar es necesario planificar las diferentes fases teniendo en cuenta los objetivos del proyecto, su grado de complejidad, así como el tiempo y los recursos disponibles.

Además, si se prevé la intervención de usuarios reales en algún momento del proceso de prototipado, hay que definir diferentes aspectos de las dinámicas de cocreación que se llevarán a cabo:

  • ¿Cuántas dinámicas se realizarán?
  • ¿En qué punto o puntos del proceso de prototipado?
  • ¿Cuáles son los objetivos y metodología de cada dinámica?
  • ¿Cuántas personas participarán y de qué perfil (usuarios, clientes, diseñadores, otros stakeholders)?
  • ¿Qué duración tendrán?
  • La logística que implican.

Desarrollo / ejecución

El prototipado se ejecuta en varias fases y el resultado obtenido en cada una de ellas supone un grado creciente de «fidelidad» (o aproximación al diseño final):

  • Sketching: el proceso se inicia generalmente con un sketching que favorece la generación e iteración rápida de ideas (considerar el problema desde diferentes ángulos y plantear diferentes soluciones) con un coste de tiempo y recursos muy bajo.
    El sketching se realiza con materiales muy básicos, como lápiz y papel, rotuladores, etc. El objetivo es que el material no se interponga en la ideación, sino que favorezca que sea fluida y rápida, lo que invita a la experimentación.
    Se puede realizar de manera individual o colaborativa, siempre teniendo en cuenta los condicionantes y objetivos del proyecto definidos durante las fases de investigación y definición. En caso de que se lleve a cabo de manera colaborativa, se puede trabajar con la técnica de design studio, que permite realizar iteraciones rápidas, eficientes y a menudo disruptivas.
    Una vez realizado, se pueden enriquecer los sketches añadiendo ciertos detalles, como un título o descripción, flechas para representar la interacción, los gestos implicados en ciertas pantallas (si estamos diseñando para dispositivos táctiles), etc.
  • Prototipado de baja fidelidad (wireframe): en base a las ideas extraídas del sketching, se construye un prototipo de baja fidelidad (o wireframe) que representa la estructura e interacción del producto o servicio sin incluir todavía elementos gráficos del diseño, lo que favorece que la iteración sea rápida.
    El wireframe representa un primer modelo del diseño, pero todavía es un prototipo de desarrollo rápido que incluye poco nivel de detalle. Su objetivo es evaluar e iterar la propuesta para avanzar hacia modelos más evolucionados.
  • Prototipado de alta fidelidad: una vez validadas la estructura e interacción propuestas en el wireframe, se incorporan al prototipo elementos gráficos (logotipo, colores, iconos, imágenes, etc.) que permiten empezar a visualizar (y a evaluar) el aspecto que tendrá el diseño final.
    A medida que evolucionan, los prototipos son cada vez más refinados y cercanos a la apariencia, las funcionalidades y las características del producto o servicio finales.

Finalmente, después de varias iteraciones con prototipos de fidelidad creciente (recordemos que estas iteraciones pueden suponer la aplicación de técnicas de evaluación de diferentes tipos), se obtiene un prototipo o maqueta final, que incluye todos los aspectos y funcionalidades del producto o servicio que se llevarán a cabo en la fase de desarrollo.

En el caso de productos o espacios, la maqueta física se puede complementar con un prototipo digital. Este permite representar claramente funcionalidades o llevar a cabo simulaciones que serían muy caras o complejas de incluir en la maqueta física.

Análisis / Resultados

A lo largo de las diferentes fases de prototipado, hay que realizar evaluaciones para poner a prueba la propuesta de diseño, observar cómo la utilizan los usuarios e incorporar las mejoras pertinentes.

Finalmente, cuando el producto o servicio se hayan ejecutado o lanzado al mercado, es necesario continuar evaluando su funcionamiento. Esto implica retomar el prototipo para realizar las iteraciones necesarias (modificaciones, nuevas funcionalidades, etc.) de manera que el diseño responda en todo momento a las necesidades cambiantes de los usuarios.

Ejemplos

Sketching. Fuente: Toptal

Wireframe. Fuente: UX Planet.

Prototipo de alta fidelidad. Fuente: UX Design UX Design.

 

Referencias

Banerjee, A. (2014). «What a Prototype Is (and Is Not)» [artículo en línea]. UX Magazine. [Fecha de consulta: 16 de junio de 2017]. http://uxmag.com/articles/what-a-prototype-is-and-is-not

Cao, J. (2017). «What Is a Prototype: A Guide to Functional UX» [artículo en línea]. Studio by UXPin. [Fecha de consulta: 16 de junio de 2017]. https://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-functional-ux/

Grothaus, M. (2015). «How To Go From Idea To Prototype In One Day» [artículo en línea]. Fast Company. [Fecha de consulta: 16 de junio de 2017]. https://www.fastcompany.com/3045934/how-to-go-from-idea-to-prototype-in-one-day

Hanington, B. (2012). «Sketchs, mockups, wireframes y prototipos». Universal Methods of Design: 100 ways to research complex problems, develop innovative ideas & Design effective solutions. Rockport.

http://mosaic.uoc.edu/2015/09/15/proceso-de-desarrollo-de-un-proyecto-digital/

Smith, Q. (2019). «Protyping User Experience». [artículo en línea]. [Fecha de consulta: 15 de junio de 2019]. https://www.uxmatters.com/mt/archives/2019/01/prototyping-user-experience.php

Vyhouski, N. «Everything you need to know about sketching». [artículo en línea]. https://www.toptal.com/designers/ux/guide-to-ux-sketching