La guía definitiva para crear prototipos

Sin embargo, para cosechar estos beneficios, tienes que hacerlo bien. En esta guía, aprenderás qué es un prototipo, sus ventajas, los distintos tipos, cómo hacer uno y qué debes buscar en una herramienta de creación de prototipos.

Los prototipos son una réplica exacta del aspecto que tendrá el resultado final de un producto, normalmente sin código. Incorporan la mayor parte del diseño final de la UI y la interacción que tendrá el producto acabado. La creación de prototipos es una de las herramientas más potentes del inventario de un diseñador de UX.

Son una forma poderosa de diseñar cualquier producto digital, porque nos ayudan a experimentar y poner a prueba las suposiciones sin que se conviertan en costosos errores más adelante. Los prototipos son también una forma ideal de comunicar la funcionalidad, la interacción y el diseño de UI a todos los implicados. Este tipo de comunicación conduce a lo que se denomina «ciclo iterativo».

• Diseños de pantalla
• Esquemas de elementos simples
• Dimensionado, espaciado y colocación de los elementos
• Clickabilidad básica y navegación entre pantallas

La razón de la simplicidad en esta fase es mantener la atención únicamente en los diseños de pantalla fundamentales, la arquitectura de la información (AI) y la navegación. Esto ayuda a conceptualizar la funcionalidad básica del producto sin distracciones extrañas. También es útil para realizar las primeras pruebas con los usuarios y obtener la aceptación de las partes interesadas, antes de añadir cualquier diseño avanzado de interacción y UI. Consulta este post y descubre las diferencias entre un prototipo y un MVP.

Con un prototipo de alta fidelidad, deberías estar cerca de haber diseñado todo menos el producto final. Los prototipos de alta fidelidad contendrán todos los diseños, espaciado, colocación de elementos y navegación del prototipo lo-fi, pero con muchos detalles adicionales.

Normalmente puedes identificar los prototipos de alta fidelidad por los siguientes aspectos:

• Interacción
• Diseño avanzado de UI
• Contenido real
• Visualización de datos

Como una progresión natural, la navegación básica en el prototipo de alta fidelidad recibe nuevas iteraciones para crear interacciones más avanzadas. Algunos ejemplos podrían ser el desplazamiento por la página, las microinteracciones del ratón sobre un prototipo de sitio web, o un icono que cambie de color al tocarlo en un prototipo de móvil. Otras interacciones podrían incluir la navegación en pantalla entre pestañas dinámicas y en menús de acordeón; incluso el desplazamiento de paralaje. Además de esto, los prototipos de alta fidelidad contendrán un diseño de elementos más avanzado, colores, fuentes únicas, imágenes de alta definición y contenido real. También es más probable que demuestren la funcionalidad de la visualización de datos, de la que hablaremos con más detalle a continuación.

Probar tus prototipos es de suma importancia antes de que llegue el momento de entregarlos a los desarrolladores. Al fin y al cabo, el prototipo no es sólo para mostrárselo a las partes interesadas y a los desarrolladores, sino también a tus usuarios. Si los usuarios son capaces de navegar bien por el producto y realizar las tareas que les has encomendado, y si les gusta el diseño, estás listo para pasárselo a los desarrolladores.

Si estás diseñando un sitio web, echa un vistazo a este impresionante tutorial sobre cómo crear un prototipo de sitio web responsivo en menos de 10 minutos. También puedes elegir una de estas maravillosas plantillas de diseño de sitios web para empezar con buen pie.

Crear prototipos de tus diseños y poner a prueba tus suposiciones e ideas desde el principio es una forma estupenda de evitar contratiempos en el futuro. Si pasas directamente al código sin probar tus ideas y cometes un error, la revisión será mucho más costosa, por no hablar del tiempo que llevará arreglarlo.

A estas alturas, no es ningún secreto que el diseño de prototipos de alta fidelidad y con píxeles perfectos para probarlos con tus usuarios conduce a un producto más fácil de usar. También significa que es mucho menos probable que cometas errores de diseño que sólo se detectan cuando ya ha comenzado el costoso trabajo de desarrollo.

Tampoco es ningún secreto que un producto más fácil de usar conduce a tasas de adopción y activación mucho más elevadas, al tiempo que aumenta el compromiso de los usuarios.

Las microinteracciones son un aspecto crucial a la hora de refinar el diseño en la fase de creación de prototipos de alta fidelidad. Una microinteracción suele consistir en un desencadenante iniciado por el usuario o el sistema, seguido de algún tipo de respuesta. Un ejemplo de esto podría ser añadir efectos al pasar el ratón por encima para cambiar los estados de varios elementos como botones, enlaces e imágenes para mostrar que se puede hacer clic en ellos. Un menú que se desliza al pulsar la hamburguesa también es una microinteracción. Estas interacciones pequeñas pero significativas ayudan a mejorar la experiencia del usuario y hacen que tu producto sea más intuitivo y utilizable.

Piensa en añadir transiciones cuando se trate de cargar nuevas pantallas o de aparecer/desaparecer elementos. Estamos hablando de transiciones de fundido de entrada y salida y de elementos que explotan. Este tipo de interacciones no sólo añaden dinamismo a la UI, sino que el retardo fraccionario que provocan ayuda a los ojos del usuario a reajustarse.

Cuando llegues a la fase de alta fidelidad, la mayoría de los prototipos tendrán un nivel avanzado de diseño de UI. En esta fase debes implementar la paleta de colores que hayas elegido basándote en las directrices de la marca, así como estilos avanzados para los elementos, como tonos, degradados y sombras. Asegúrate de que las combinaciones de colores que utilizas proporcionan una buena accesibilidad y usabilidad, al tiempo que acentúan tu marca. Es decir, un contraste adecuado para los usuarios con deficiencias visuales, al tiempo que reservas sistemáticamente colores como el rojo y el verde para los mensajes de error y éxito.

Elegir el tipo de letra y la fuente adecuados para utilizar en tu prototipo es importante, ya que será el reflejo más fiel del resultado final, por lo que es un elemento importante a tener en cuenta durante las pruebas. ¿Por qué? Porque es crucial para la UX y la usabilidad básica. Si los usuarios no pueden escanear y leer fácilmente tu fuente, tendrás menos probabilidades de activarlos y retenerlos.

Por último, en la fase de alta fidelidad querremos trabajar para conseguir una representación de píxel perfecto de nuestro producto final. Eso significa refinar el espaciado y la posición de todos los elementos de UI al píxel exacto. Definir este tipo de información en la fase de prototipado facilitará las cosas cuando llegue el momento de desarrollar el producto.

En la fase de prototipo de baja fidelidad, lo más probable es que utilices marcadores de posición para las imágenes, ya que la atención se centrará simplemente en el diseño, la navegación y el tipo de contenido que se muestra en la pantalla.

Sin embargo, todos los prototipos de alta fidelidad utilizarán imágenes de calidad con una gran definición. Utilizar este tipo de contenido en esta fase es importante por varias razones:

• Ayuda a obtener la validación del cliente
• Acerca tu prototipo al producto real
• Aumenta la intuitividad durante las pruebas de usuario
• Puedes entregar activos de imagen a los desarrolladores con tu prototipo

Añadir imágenes de alta calidad, además de interacción, es una forma de ascender en la cadena de fidelidad y acercarse al producto final.

El texto de marcador de posición como Lorem Ipsum, como hemos mencionado antes, está bien para los wireframes, siempre que no afecte a la navegación y la orientación dentro de la simulación. Sin embargo, en tu prototipo de alta fidelidad, debes intentar incluir todo el texto real en tu diseño siempre que sea posible, incluidos los párrafos de texto que no estén relacionados con la orientación en el prototipo. He aquí por qué:

• Ayuda a añadir más significado al prototipo
• Te ayuda a descubrir si determinados contenidos funcionan en determinadas páginas
• Cuando tu prototipo esté desarrollado, tu producto necesitará un nivel mínimo de contenido real

Por estas razones, siempre debemos intentar incluir contenido real en nuestros prototipos.

Por último, es más que probable que un prototipo de alta fidelidad contenga una visualización de datos reales para simular la funcionalidad del producto final. Imagina que estás creando un prototipo de una aplicación web que gestiona los turnos de los empleados. Quizá quieras crear una lista de nombres de empleados, funciones y datos de contacto.

Un diseñador de UX cualificado te ayudará a organizar tu investigación de usuarios y tus entrevistas para definir las user personas y los requisitos del producto. Estarán especializados en construir e idear un sistema de diseño, y luego implementar ese sistema en prototipos. A continuación, podrán proporcionar pruebas de usuario expertas en prototipos para obtener comentarios de los usuarios para iteraciones posteriores mediante el uso de sesiones moderadas y/o no moderadas.

El papel de un gestor de producto es el pegamento que mantiene unidas todas las demás funciones importantes. Son los que diseñan y desarrollan una hoja de ruta para todo el producto, desde la ideación, pasando por el MVP, hasta el producto final. Programarán cada lanzamiento del producto y se asegurarán de que se desarrolle lo mejor posible. Lo ideal es que tengan formación técnica, como informática, desarrollo, diseño UX o incluso formación empresarial.