6 min read

Fundamentos del prototipado

¿Por qué hablar de prototipos y no de sistemas de diseño? ¿Por qué cuando pensamos en diseñar sólo podemos imaginar una interfaz gráfica pixel perfect? ¿Cómo pueden ayudarnos las herramientas?
Fundamentos del prototipado
Un prototipo es un artefacto usado por los equipos de diseño para explorar, experimentar y comunicar ideas en diferentes grados de fidelidad para que éstas puedan ser validadas y refinadas a lo largo del proceso creativo antes de llevarlas a producción.

Los prototipos se usan y se han usado históricamente para:

  1. Reducir costes de desarrollo.
  2. Agilizar la validación de ideas.
  3. Crear un vocabulario común.
  4. Proponer, sugerir, o explorar ideas.
  5. Cuestionar el problema.
  6. Describir una o varias soluciones.
  7. Ser objeto de crítica.
  8. Imaginar la interacción casi tan real como con el producto.

Durante el proceso de diseño, existen diferentes etapas en las que vamos a necesitar transformar el análisis del problema en decisiones y en las que nuestras decisiones cuestionen los propios problemas planteados.

Diseño centrado en el usuario
¿Cuáles son las metodologías de diseño que facilitan crear productos usables y con una buena experiencia? ¿Qué significa ‘centrarse’ en las personas? ¿Cuáles son las fases de un proceso de diseño?

Tras un entendimiento de quiénes son las personas que usarán el producto, de cómo piensan, cómo se comportan y qué expectativas pueden tener, haremos uso de ese conocimiento (modelado a través de otros artefactos conocidos como Personas, Escenarios, Journey Maps, etc.) y comenzaremos a trabajar en una solución de diseño que mejor se ajuste a los requisitos.

Para ello, construir prototipos con el nivel de fidelidad adecuado a cada etapa nos puede ayudar a:

  1. Idear y agilizar el proceso propositivo mediante técnicas de diseño en equipo: co-creación, design studios, etc.
  2. Evaluar la idoneidad de una solución sin el coste de desarrollarla por completo: el equipo de diseño puede valerse por sí mismo para crear una solución parecida al producto final y testarla con usuarios reales.
  3. Integrar propuestas de valor de forma ágil dentro de un producto vivo.

Los prototipos además de ser una excelente herramienta para la construcción de productos digitales ágiles son también un recurso comunicativo y de aprendizaje muy potente entre equipos multidisciplinares, incluso entre un equipo mínimo de diseñador/a-cliente.

Niveles de fidelidad

Los niveles de fidelidad se utilizan para ajustar la cantidad de detalles específicos que representa el prototipo. Cuantos más detalles o más específico sea el prototipo menos lugar para la duda habrá, pero será más costoso deshacerse de una mala idea. Por el contrario, cuantos menos detalles tenga, habrá más flexibilidad para modificarlo y ajustarlo, pero existirá más ambigüedad para su implementación.

Los grados de fidelidad (de bajo a alto a lo largo del proceso) se ajustan a diferentes planos o niveles:

  1. Visual/Conversacional.
  2. Interactivo.
  3. Contenidos.
  4. Funcional.

En el plano visual ajustaremos detalles relacionados con el aspecto gráfico y estética tales como colores, tipografías, rejilla, espaciados, etc. Y cuando tratemos con interfaces conversacionales, buscaremos ajustarnos a los distintos caminos de la conversación, utterances, variables, comportamientos y respuestas.

En el plano interactivo ajustaremos detalles que tienen que ver con la capacidad de ser manipulado tales como botones o enlaces, formularios, scroll, etc.

En cuanto a los contenidos, trataremos de ajustar la información que presentamos para que sea más o menos realista, aquí decidiremos qué detalle deben tener titulares, menús, acciones, etc.

Finalmente, en el aspecto funcional decidiremos qué lógica puede llegar a reproducirse dependiendo de la interacción proporcionada, como por ejemplo, si queremos simular el envío o representación de datos dependiendo de las acciones de los/as usuarios/as.


¿Siguen siendo necesario trabajar a baja fidelidad?

Cada vez existe más la tendencia de trabajar sólo con prototipos de alta fidelidad visual, pero no interactiva. Esto tiene su explicación si analizamos cómo son las herramientas que más se usan en el sector profesional.

Figma, Sketch o Penpot están muy orientadas a la construcción ágil de sistemas de diseño y su rápida implementación. Todas ellas, se centran en los procesos de trabajo de diseño y desarrollo buscando facilitar la capacidad por parte del equipo de desarrollo de interpretar y transformar esos prototipos en el producto final.

Sin embargo, es importante recordar que el prototipo no tiene como único objetivo el de especificar una única solución, sino que es una herramienta más de comunicación del diseño, que debe servir para explorar, es discutible y criticable. Y ninguna herramienta nos impide realmente trabajar en este nivel.

Dedicar demasiado tiempo a detalles de implementación de un diseño que no es viable técnicamente o no es usable puede acarrear un coste considerable en el proyecto al tener que corregirlo en el momento en el que más recursos se han invertido.

Si bien es cierto, en desarrollo necesitamos detalles y poca ambigüedad para poder hacer una planificación de tareas sin bloqueos. Sin embargo, hay muchas decisiones de arquitectura y de modelado de datos que pueden comenzar a analizarse incluso con prototipos menos específicos y más conceptuales que el 'arte final'.

Todos los equipos y roles deben entender en qué nivel de fidelidad se está representado un diseño para ser capaces de evaluar la viabilidad y el coste de su ejecución, al igual que la idoneidad de la propuesta.

Prototipos de baja fidelidad (Low-fi)

Imagen de un boceto en papel con anotaciones

Los prototipos de baja fidelidad también conocidos como wireframes, mockups, o sketches¹, tienen muchas cosas en común en sus distintos niveles. Podemos considerar que un prototipo low-fi es:

  • Rápido.
  • Disponible en el momento preciso y en cualquier momento.
  • Barato.
  • Desechable.
  • Crea un vocabulario claro.
  • Imprecisos y por tanto flexibles y abiertos.
  • Poco detalle y poco refinado.
  • Sirve para sugerir y explorar.
  • Ambiguo.
  • Propositivo.
  • Cuestiona el problema.

Prototipos de alta fidelidad (Hi-fi)

Prototipo interactivo que demuestra los patrones de navegación de una aplicación.

Los prototipos de alta fidelidad tales como sistemas de diseño, prototipos interactivos, o prototipos en HTML o algún otro lenguaje de programación pueden considerarse:

  • Descriptivos.
  • Nivel de detalle medio-alto.
  • Testable.
  • Especifica la solución.
  • Es didáctico.
  • Demostrativo.
  • Comunicativo.
  • Criticable.
  • Interactivo.
  • Cercano al producto final.

Cuando no se hacen prototipos

Parece natural pensar que si no se hacen prototipos lo único que nos queda es desarrollar rápidamente ideas, crear un producto final con las hipótesis de investigación y cruzar los dedos para que el uso que le den las personas sea el esperado sin demasiadas fricciones.

En estos casos podríamos considerar que el producto final es algo así como un protoducto, donde se hacen experimentos con usuarios reales en contextos de uso real. Aunque esta idea pueda resultar interesante y atractiva en algunos casos, debemos tener en cuenta que:

  1. El coste de desarrollo de una idea que no está bien especificada o validada puede ser igual o más alto que el de desarrollarlo cuando sí hemos iterado sobre el diseño.
  2. El coste de poner en producción malas ideas de diseño o diseños mal ejecutados puede acarrear pérdidas de usuarios/as que sean de hecho clientes.
  3. Si la toma de decisiones no se hace pensando en las personas usuarias sino para poder salvar un desarrollo lo más económico posible entonces no existe cultura centrada en las personas.
  4. A veces, tendemos a alargar más los ciclos de publicación de versiones por lo que perdemos la única ventaja que tiene usar el producto como laboratorio de ideas: la agilidad.

En mi opinión, todo es un prototipo hasta que se demuestre lo contrario, es decir, hasta que un proceso de evaluación de la usabilidad nos dé certezas de que puede funcionar como producto final. Hasta que haya gente de verdad que esté desando usar el producto, que incluso quiera pagarnos por ellos y que se queje si se lo quitas.

Por lo tanto, os animo a aprender a prototipar en papel o con herramientas digitales diferentes a las más orientadas a la alta fidelidad, para adquirir el hábito de comunicar el diseño de forma visual, textual, con diagramas, garabatos y otro tipo de representaciones.

Aquí os dejo algunas herramientas útiles que podéis comenzar a explorar si quereis trabajar en diferentes niveles de fidelidad:

  • Justinmind o Proto.io son herramientas online que os permitirán llegar a crear prototipos interactivos con alta fidelidad funcional. Aprenderéis a familiarizaros con el concepto de eventos, transiciones, navegación, estados, etc.
  • UXPin y Marvel al igual que las anteriores, permiten hacer prototipos en muchos niveles de fidelidad y además incluye opciones de inspección de diseño para facilitar el handoff a desarrollo.
  • Moqups está muy centrada en hacer wireframes (prototipos de baja fidelidad) y diagramas que permitan la colaboración entre equipos.
  • Voiceflow y Dialogflow son muy útiles si queréis prototipar interfaces conversacionales como asistentes o chatbots.

¹ - El autor Bill Buxton en su libro Sketching User Experiences, hace una reflexión por la que no considerar los sketches (bocetos) como prototipos. Aún estando de acuerdo con su análisis, considero los sketches como prototipos en este artículo puesto que comparten objetivos y características. En cualquier caso recomiendo esta lectura para quienes quieran aprender mejor las muy diferentes maneras que tenemos de crear representaciones simuladas de productos digitales.