Metodologías de creación de prototipos y técnicas de presentación

¿Te has preguntado alguna vez qué define exactamente un prototipo web o móvil? A veces tenemos ideas muy concretas e inflexibles de lo que es algo.

Sin embargo, cuando observamos la variedad de métodos de creación de prototipos que existen, está claro que un prototipo es realmente una representación de lo que será un futuro producto o función. Cómo representes esa idea no importa. Lo que sí importa es lo bien que tu representación comunica la funcionalidad. En este post, exploraremos algunas metodologías de prototipado comunes y menos comunes para diseñadores de UI/UX. También veremos algunas técnicas estupendas para presentar prototipos a un público, ya sean clientes, partes interesadas, colegas de diseño o incluso desarrolladores.

Todo diseñador de UX está familiarizado con los prototipos digitales. Pero, ¿conocías algunas de las metodologías de prototipado menos comunes de esta lista? Compruébalo tú mismo: puede que merezca la pena probar algunos de los métodos más abstractos cuando te resulte especialmente difícil pensar con originalidad o cuando tengas un problema especialmente complejo que estés intentando resolver.

El prototipado en papel es básicamente como suena: prototipado en papel. Este método consiste en sketchear un esquema rápido de tu producto y sus diferentes pantallas, diseños de UI y elementos. Es una forma rápida y barata de plasmar las ideas en papel para poder comunicarlas a tu equipo y a otras partes interesadas. Por esta razón, la metodología del prototipado en papel también es brillante para las sesiones de brainstorming e ideación.

La creación de prototipos en papel no requiere mucho detalle, ya que los diseñadores suelen hacerlo en las primeras fases del proceso de diseño. Los dibujos no tienen por qué ser una obra de arte, pero deben comunicar claramente tus ideas de diseño, hasta el punto de que incluso puedas realizar un poco de prueba de usabilidad temprana. Es una forma estupenda de elaborar la arquitectura de la información del diseño.

Los prototipos de baja fidelidad son los siguientes de nuestra lista. Al igual que el método de creación de prototipos en papel, el diseño de un prototipo de baja fidelidad es un paso opcional, pero en Justinmind recomendamos encarecidamente seguirlo. He aquí por qué: un prototipo de baja fidelidad es la base crucial sobre la que se construirá la mayor parte del diseño del producto. La metodología de prototipado de baja fidelidad consiste en diseñar rápidamente un esbozo digital de la UI de tu pantalla compuesto por varios elementos de la pantalla junto con el contenido básico. Elimina las distracciones centrándose sólo en los detalles fundamentales, como el diseño, el espaciado, la posición de los elementos, el flujo de la pantalla y la arquitectura de la información. Puedes probar prototipos de baja fidelidad con tus usuarios para comprobar que los diseños y flujos de pantalla de tu producto son intuitivos.

Una vez validados estos detalles básicos, puedes seguir adelante con un diseño de UI más avanzado e interacciones complejas.

El prototipo de alta fidelidad es el método que no debes omitir ni escatimar antes de entregar tu diseño al equipo de desarrollo. ¿Por qué? Los prototipos de alta fidelidad no dejan nada a la imaginación ni absolutamente nada abierto a la interpretación. Esto da lugar a un producto cohesivo e intuitivo, ya que el resultado final refleja toda la investigación y el trabajo que el equipo de diseño ha invertido en él. La metodología de prototipado de alta fidelidad significa diseñar un prototipo perfecto en píxeles, con imágenes reales, fuente gráfica e interacciones complejas. Los prototipos de alta fidelidad son brillantes para probarlos con tus usuarios, ya que representan cómo será el producto final. Una vez validado, es lo último que entregarás a tus desarrolladores. Para hacerte una idea de cómo evoluciona un diseño hasta convertirse en un diseño final pulido, echa un vistazo a este rápido tutorial sobre cómo diseñar un prototipo de sitio web responsivo. Sólo te llevará 10 minutos.

Lo bueno de este método es que tus desarrolladores obtendrán todo lo que necesitan desde el principio: activos, imágenes, códigos de color, fuentes y también entenderán cómo programar la funcionalidad y la interactividad del producto.

A veces trabajas con un presupuesto muy ajustado, o con prisas de última hora, a veces ambas cosas. A veces, los tipos de interacciones o funcionalidades pueden ser demasiado complejos para probarlos en un prototipo porque requerirían un desarrollo de backend. Cuando esto ocurre, tienes opciones: una de ellas es el método del Mago de Oz. El prototipado Mago de Oz se refiere a un escenario en el que pruebas un prototipo con un usuario mientras un ordenador humano está sentado al otro lado proporcionando la interacción. La idea es que el usuario no sepa que hay un ordenador humano detrás de la interacción. El método del Mago de Oz recibe su nombre de una escena de la película en la que el perro Toto descorre una cortina para revelar que el «mago» no es más que un hombre que pulsa botones y tira de palancas.

Este tipo de metodología de prototipado es excelente para probar características como la funcionalidad de los bots de chat o cuando realizas un prototipado rápido. Te permite improvisar en cuanto a la interacción con el producto y explorar una gama más diversa de interacciones que de otro modo no tendrías tiempo de poner en práctica. También puede ayudarte a descubrir nuevas soluciones, aportar nuevas ideas o anticiparte a problemas que no habías visto antes.

Entonces, ¿qué pasa aquí? ¿Estamos haciendo que los usuarios diseñen ahora nuestros prototipos mientras nosotros nos sentamos y nos relajamos? No, definitivamente no. La metodología de creación de prototipos guiada por el usuario no es más que un ejercicio en el que te sientas con un usuario y le pides que dibuje el aspecto que espera que tenga una UI o el funcionamiento de una función. Si esta persona representa a tus user persona objetivo, es un gran comienzo en la ideación porque estás aprendiendo sobre sus modelos mentales y si entienden metáforas como botones de radio y paginación.

Con este método de creación de prototipos, no haces que diseñen el producto, sino que analizas sus sketchs para comprender sus procesos de pensamiento.

Ryu Saki es un diseñador que ideó un método para diseñar un prototipo de baja fidelidad con Google Sheets. Y por baja fidelidad, queremos decir realmente baja fidelidad, ¡aunque tiene sus cosas prácticas! En su post, nos explica cómo creó un prototipo en Google Sheets para una cartera web. Primero empezó creando una visión y una historia de usuario, y luego pasó a enumerar todo el contenido, las páginas y los elementos de menú que tendría el sitio. Después creó pestañas para cada página e incluyó el contenido relevante en cada una de ellas, vinculando cada pestaña a una pestaña de Inicio con un menú destacado. ¡Un uso bastante ingenioso de las Hojas de cálculo de Google!

Crear un prototipo como éste es una forma brillante de salvar la distancia entre la concepción y la creación de prototipos, porque te ayuda a idear la arquitectura de la información y a centrarte en las principales pantallas necesarias.

Veamos ahora cómo puedes presentar tus prototipos a tu cliente o a tus desarrolladores para conseguir esa aceptación tan importante y pasar a la siguiente fase. Repasaremos algunas de las técnicas más importantes que puedes utilizar para presentar tus prototipos. No tienes por qué utilizarlas todas porque, al igual que cada prototipo es diferente, también lo es cada público y cada presentación. Por tanto, siéntete libre de probar las que creas que más te ayudarán en la próxima presentación de tu prototipo.

Tener diferentes aplicaciones abiertas durante la presentación de un prototipo puede ser una receta para el caos y los suspiros del cliente. Pasar de una aplicación a otra, como PowerPoint, y luego a tu herramienta de prototipado, puede ralentizar las cosas, confundir al cliente y hacer que la experiencia sea desordenada. Incluso puedes confundirte, traspapelar archivos y derramar el tarro de agua. Ya lo entiendes, nadie quiere pasar por eso. Para evitar toda esta palabrería, te recomendamos que intentes incluir todos tus archivos en el mismo lugar -tu herramienta de creación de prototipos- para que la presentación sea fluida y sin fisuras. Afortunadamente, con herramientas como Justinmind, esto es realmente fácil.

Por ejemplo, en Justinmind, puedes crear fácilmente un pase de diapositivas dentro de tu prototipo utilizando una sola pantalla. Para pasar al prototipo, sólo tienes que cambiar de pantalla. No hay necesidad de ir y venir entre PowerPoint, Google Drive y Dios sabe qué más.

La primera y más obvia, y no nos cansaremos de repetirlo, es conocer de antemano a tu público. Conoce lo que esperan ver, así como los límites de sus conocimientos. Por ejemplo, ¿vas a presentar a un cliente, a desarrolladores o a tu equipo de diseño? Dependiendo de la respuesta a esa pregunta, tendrás que preparar tu guión y tu presentación en consecuencia. Esto te ayudará a tener claro qué tipo de feedback quieres obtener antes de empezar la presentación.

Planificar las preguntas adecuadas a tu audiencia es una técnica de presentación tan importante como planificar lo que quieres decirles. Por ejemplo, el cliente no podrá darte ciertas especificaciones técnicas porque puede que no tenga la respuesta, mientras que los desarrolladores no sabrán si algo está dentro de la marca o no, o si algo es el objetivo real o no. Establece qué tipo de respuesta quieres obtener de tu público.

Esto significa preparar las preguntas de antemano. Si vas a presentar tu prototipo a un cliente, podrías preguntar lo siguiente:

• ¿Es éste el tipo de experiencia que querías para el usuario?
• ¿Es así como esperabas que funcionara esa función?
• ¿Crees que esta interacción resume la personalidad de la marca?

Para un desarrollador, podría ser algo más como «¿crees que es técnicamente factible hacer que esta función funcione en una sola pantalla?».

Este prototipo de técnica de presentación no consiste tanto en gestionar las expectativas como en informar al público de lo que vas a presentar. ¡Créenos cuando decimos que esto es importante para evitar confusiones y malentendidos! Ten una pantalla de descargo de responsabilidad antes de mostrar tu prototipo que explique brevemente qué es un prototipo y que no refleja cómo puede resultar o no el producto final. Esto es especialmente importante con los prototipos de baja fidelidad, para evitar ese momento en que se te cae la cara de vergüenza de «¿por qué es todo negro, blanco y gris y el texto en latín?».

Establecer expectativas también es importante porque tienes que asegurarte de que todo el mundo, incluido tú mismo, se centra en los objetivos reales del prototipo y no se queda en la mera estética. Sí, la estética es importante, pero ¿cuáles son las principales funcionalidades que intentas diseñar para tus usuarios objetivo? ¿Funcionan como se espera de ellas? ¿Tendrán el impacto en el usuario que el cliente desea? Para obtener los mejores resultados, notifica a tu audiencia con la mayor antelación posible, de modo que tengan tiempo de pensar y prepararse para lo que van a ver y dar su opinión.

Llevar tus mapas de flujo de usuario a la presentación de tu prototipo puede ser una técnica muy práctica. Imprimir copias para todos los presentes es aún mejor.

Los mapas de flujo de usuario son una documentación de apoyo estupenda para tu presentación, ya que sirven de guía práctica para el cliente. De un vistazo podrán entender el contexto que hay detrás de cada pantalla y comprender en qué punto del prototipo te encuentras. Se acabó eso de «¿cuáles eran los pasos anteriores a esta pantalla?» o «¿podrías volver atrás, por favor?».

Cuando presentes tu prototipo a tu cliente o a tu desarrollador, puede que quieras que interactúen con él, o puede que quieras que se lo lleven y lo prueben ellos mismos más tarde para revisarlo más a fondo.

Por tanto, intenta incluir botones descriptivos a lo largo de tu prototipo de presentación que permitan a cualquier otra persona que no lo haya creado comprenderlo y navegar por él. Aunque sólo sea para facilitarte la experiencia durante la reunión, merece la pena pensar detenidamente en cómo se puede navegar por las diapositivas y las pantallas. Un ejemplo podría ser un simple botón de «abrir prototipo» o «cerrar prototipo» y tener una pantalla base o de inicio a la que el usuario pueda volver desde cualquier punto de la presentación del prototipo. Esto también evita la percusión incesante de martillear los botones de atrás y adelante.

Por último, para facilitar la consulta, considera la posibilidad de mantener toda la documentación, ya sean especificaciones funcionales, historias de usuario o anotaciones, en el mismo enlace del prototipo.

Ésta, por supuesto, sólo se aplica si creaste un guión gráfico previo a tu diseño. A veces los guiones gráficos son necesarios para los diseños, dependiendo de lo difícil que sea la fase de ideación. Sin embargo, si hiciste un guión gráfico de tu diseño o función antes de empezar, ¿por qué no llevarlo a tu presentación como un simple folleto?

El cliente podrá ver la fórmula de cómic de tu usuario interactuando con el producto en su vida cotidiana. Por tanto, cuando demuestres las distintas pantallas del prototipo y el flujo de usuario, el guión gráfico lo pondrá todo en un contexto aún mayor. También añadirá una cierta cualidad narrativa a la presentación, algo que siempre aumenta el compromiso. Y, al fin y al cabo, es mucho más probable que un cliente comprometido proporcione comentarios útiles y procesables.

Otro consejo práctico -y éste puede parecer una obviedad- es comprobar de antemano que todo el mundo podrá acceder al prototipo en sus móviles, portátiles o incluso tabletas. Si se trata de una aplicación móvil, el cliente debe poder acceder a ella en su dispositivo móvil, para que pueda navegar por el prototipo por sí mismo y tener una experiencia realista. Esto puede ayudarles a comprender aún mejor tu diseño.

Las herramientas de creación de prototipos como Justinmind son perfectas para esto, porque simular tu prototipo es fácil. Todo lo que tienes que hacer es compartirlo a través de un enlace en un navegador, o descargar la aplicación Justinmind para simularlo en un smartphone o tableta.

No hace falta decirlo, pero todo tu trabajo de diseño debe estar respaldado por datos y cifras reales. Si tu producto aún se encuentra en las primeras fases del proceso de diseño, asegúrate de que las decisiones de diseño de tu prototipo de baja fidelidad han sido respaldadas por alguna investigación de usuarios.

Incluso puedes hacerlo simplemente utilizando una plataforma de encuestas como Typeform, Google Forms o SuveyMonkey para hacer preguntas a tus usuarios potenciales. O, en el caso de un diseño más elaborado, puede que ya hayas realizado algunas pruebas de usabilidad que demuestren que el diseño funciona para los usuarios.

Siempre es útil respaldar tus decisiones de diseño para demostrar que no se trata de un arte de diseño subjetivo. También ayuda al cliente a ser objetivo y es más probable que consiga su aceptación. También tienes más probabilidades de que el producto sea un éxito si estás en la misma página que el usuario.

Aunque no siempre es un requisito, añadir transiciones entre las diapositivas de tu prototipo de presentación ayuda a no desorientar a tu público y a que la presentación se desarrolle con mucha más fluidez. Incluso puedes pensar en añadir transiciones dentro de tu prototipo entre las distintas pantallas, sobre todo si se trata de un prototipo de baja fidelidad, aunque sólo sea una página en blanco.

El principio KISS (Keep It Simple, Stupid) es importante a la hora de presentar tu prototipo. Los discursos largos y farragosos dormirán a tu público, al igual que los gráficos aburridos y llenos de contenido para los datos de los usuarios. La disposición del contenido y el diseño son tan importantes como lo que vas a decir en la presentación de tu prototipo. Piensa en utilizar infografías divertidas y atractivas para representar cosas como los datos de las pruebas de usuario o la investigación, e ir directamente al grano sobre las características principales de tu prototipo. Al fin y al cabo, dicen que una imagen vale más que mil palabras. Nosotros decimos que un prototipo vale más que mil. Haz que cuente e involucra a tu audiencia a lo largo de tu presentación.

Hay muchos métodos creativos para crear prototipos y no tienes por qué utilizarlos todos. En el mundo del diseño no hay reglas escritas en piedra, sino directrices. Eres libre de utilizar la que más te guste para hacer fluir la creatividad. Sin embargo, las metodologías de prototipado que elijas dependerán mucho de tu equipo, de los clientes para los que trabajes y de otros factores, como el presupuesto, el plazo y los requisitos técnicos. No obstante, siempre recomendamos crear al menos un prototipo de baja fidelidad y otro de alta fidelidad antes de desarrollar tu producto. Además de la miríada de metodologías de creación de prototipos de que dispone el diseñador moderno de UI/UX, también existen muchas técnicas de probada eficacia para presentarlos. Una vez más, las técnicas que elijas para presentar tu prototipo dependerán de todo, desde la fase del proceso de diseño en que te encuentres hasta el cliente con el que trates. En la vida hay que elegir y hacer concesiones, pero esperamos que este post te haya dado algunas ideas útiles para avanzar en tus proyectos de diseño.