Perfeccione su proceso de diseño de UX: una guía para el diseño de prototipos

El proceso de creación de prototipos, desde la creación de wireframes simples hasta la prueba de maquetas completamente funcionales, es uno de los conjuntos de habilidades más potentes y poderosos que cualquier diseñador puede dominar. También está lleno de peligros en los lugares de trabajo donde el proceso se omite en lugar de simplemente "diseñar un prototipo" como un simple entregable para entregar al siguiente departamento para que lo construya. No importa cuán diligente sea su negocio con la creación de prototipos, el proceso real a menudo puede hacer o deshacer su producto final.

Cómo y por qué construir un prototipo es a menudo un misterio. Pregúntele a muchos diseñadores y ladearán la cabeza como cachorros confundidos. "¿Qué quieres decir? Simplemente hazlo”, dirán. Y bastante cierto: todos sabemos cómo crear un prototipo. Simplemente no sabemos cómo lo sabemos.

Esto es especialmente crítico si se tiene en cuenta que los prototipos suelen ser el entregable más valioso. Los clientes y gerentes quieren ver lo que hizo, ya sea un sitio web o un producto físico. Quieren probarlo, inspeccionar los diversos elementos y comprender el flujo de trabajo. Quieren ver “cómo funciona”.

Construir un prototipo no es suficiente; tenemos que entender el proceso involucrado en la construcción de los borradores iniciales de un producto. Este artículo profundizará en todo lo que un diseñador necesita saber y hacer para lograrlo.

Diseño de prototipos: para qué sirven los prototipos

Los seres humanos somos muy visuales. De hecho, el 30 por ciento de nuestra corteza cerebral se dedica exclusivamente a la visión. Entonces, cuando ves un prototipo, ¡lo más importante es que lo ves ! Cuando el cliente puede verlo y comprender todos los procesos involucrados con el producto, especialmente las áreas de disputa para futuras pruebas, ese prototipo cobra vida.

Entonces, ¿qué es un prototipo? Un prototipo es una herramienta para visualizar una mezcla heterogénea de trabajo de diseño interactivo; en efecto, los prototipos (en casi cualquier etapa) son una amalgama de todo el trabajo anterior en una pieza única, visible y funcional. Esta representación visual demuestra qué está haciendo el producto en un momento determinado, cuáles son los elementos interactivos y cómo funcionaría el producto en el mundo real.

Si bien existen muchos mecanismos para los diversos aspectos del diseño de prototipos (como la creación de bocetos), es fácil pasar por alto cosas y cometer errores.

Esto hace que el trabajo sobre cómo se construye un prototipo sea tremendamente valioso, ya que en muchos sentidos describe cómo se actualiza el propósito del producto. No a la perfección, y definitivamente no con precisión la mayor parte del tiempo, pero como su nombre lo indica, los prototipos no son definitivos.

Nos ralentizan para acelerarnos. Al tomarnos el tiempo para crear prototipos de nuestras ideas, evitamos errores costosos, como volvernos demasiado complejos demasiado pronto y apegarnos a una idea débil durante demasiado tiempo.

Tim Brown, director ejecutivo y presidente de IDEO

Una forma sencilla de pensar en los prototipos es como un mecanismo para demostrar la funcionalidad.

Esa explicación práctica de cómo funciona algo tiene una serie de beneficios de gran valor, que incluyen:

• Haciéndolo realidad: antes de construir cualquier prototipo, ¡el producto es completamente conceptual! Eso está bien por un tiempo, pero eventualmente debe convertirse en algo que las partes interesadas y los usuarios finalmente entiendan y aprecien. Un prototipo es el primer paso para pasar de lo conceptual a lo real.
• Trabajar un problema: a veces, tenemos un desafío de diseño sin solución. Como habilidad, la creación de prototipos es una excelente manera de visualizar el problema e introducir soluciones rápidamente. Si no funciona, deseche el prototipo y vuelva a intentarlo.
• Iterar: la creación de prototipos viene en etapas, pero el resultado es el mismo: hacer evolucionar sus ideas. Desde bocetos hasta equipos de alta fidelidad, cada nueva iteración ofrece una gran cantidad de comportamientos y funciones para probar. Y con más datos, podemos iterar de forma más rápida e inteligente.
• Detectar escenarios no deseados: una vez que algo es visible, tenemos las limitaciones de nuestro producto disponibles para el estudio, lo que también proporciona un mejor contexto sobre lo que debería estar allí... ¡y lo que no debería!
• Detectar problemas de usabilidad: aquí es donde viven muchos diseñadores: una vez que un producto tiene un prototipo de cualquier tipo, los desafíos de usabilidad de repente se vuelven fáciles de detectar y solucionar.
• Presentación: los prototipos en cualquier etapa son un estándar para la presentación. Ya sea que esté probando una versión de una página o presentando un producto a un cliente, debería haber un prototipo de alguna forma. Y si no lo es, puedes apostar a que alguien te preguntará dónde está y por qué no se incluyó.

Cómo iniciar el proceso de creación de prototipos

Después de recibir un documento de requisitos de 50 páginas de un cliente, mirar un lienzo en blanco puede ser desalentador. Revisar pensamientos desorganizados de reuniones con clientes, bocetos en servilletas y fotos de pizarra sucias rara vez ayuda.

Debido a que los prototipos se construyen sobre mucha otra información, es importante recopilar los detalles necesarios antes de poner la pluma en el papel. Considere la siguiente lista de verificación y revise los detalles proporcionados por su cliente o gerente:

1. ¿Cuáles son los objetivos del proyecto?

Comience con el panorama general. ¿El producto resuelve una necesidad real? ¿Cómo soluciona esa necesidad? Comprender la utilidad del producto es fundamental para ofrecer cualquier tipo de solución viable.

2. ¿Qué productos competitivos usa la gente actualmente?

Un análisis competitivo sólido proporcionará una imagen clara del estado del mercado para el tipo de producto, además de lo que esperan los usuarios de hoy.

3. ¿Quién es la audiencia? ¿Cuáles son sus objetivos?

Comprender la demografía y las necesidades de los usuarios proporciona el contexto necesario para crear productos orientados a satisfacer esos tipos de usuarios en particular y satisfacer sus necesidades.

4. ¿Qué tipo de producto es y para qué (dispositivo) es?

Con tantas tecnologías y soluciones diferentes, los diseñadores de UX necesitan saber cómo se utilizará el producto (aplicación web, sitio web receptivo, aplicación móvil, etc.), en qué dispositivo(s) y cómo coexistirán las diferentes versiones (si es que coexisten). ).

5. ¿Hay algún precedente visual a seguir?

Si el producto ya existe y el proyecto es para mejoras o un rediseño, es posible que existan algunos requisitos en consideración del comportamiento actual del usuario con el producto.

6. ¿Cuáles son los entregables?

Establecer expectativas sobre los entregables y el proceso es fundamental para su planificación y flujo de trabajo. Cada proyecto es diferente, pero si los entregables están bien definidos, el resto del proceso de diseño de UX tiene más posibilidades de funcionar sin problemas.

Dibuja tus prototipos

Con nuestros datos disponibles y organizados, el siguiente paso es empezar a dibujar. Muchos diseñadores ya tendrán una idea para el diseño, la estructura o incluso dónde pertenecen los elementos específicos del diseño visual antes de dibujarlo. Eso está bien, pero el propósito de los bocetos iniciales es explorar el espacio disponible para resaltar lo que es posible y, lo que es más importante, lo que no lo es.

Reúna los instrumentos de escritura de su elección, ya sea lápiz y papel o pizarra y marcador. El proceso de esbozo es similar a la escritura libre de un escritor o al rasgueo de un músico; dibuja lo que sientes en base a todo el trabajo que has hecho de antemano, y considerando las piezas a continuación:

01 | Flujos de usuario: siga la identificación de flujos de usuario. Vea cómo los usuarios cumplen sus objetivos y cómo interactúan dentro del sistema.

02 | Entidades de información: cada flujo de usuario mostrará algunas entradas y salidas de usuario. Identifique qué son, cómo se relacionan con el comportamiento y las expectativas del usuario, en qué interacciones están involucrados y cómo funcionan.

03 | Primeros bocetos: después de tener una idea de quién usará el sistema, qué van a hacer y con qué, es hora de ver cómo. Dibuje sus flujos de usuario: no es necesario crear el diseño todavía, solo resuelva la funcionalidad.

04 | Esboce una estructura rudimentaria: después de esbozar los flujos de usuario, tendrá una mejor idea del mejor diseño para el producto. Esto incluirá contenido (texto, fotos, video, etc.) que aparecerá como cuadros básicos o garabatos. Cuando se escriben a mano, no se ajustan al tamaño, por lo que toda la estructura y el contenido son solo para visualización, no para uso real.

Un consejo adicional es usar blocs de dibujo, papel especialmente formulado o herramientas para hacer estructuras alámbricas más claras mientras se dibuja. Proporcionan el diseño básico para la ventana en cuestión, son bastante económicos y, con la plantilla adecuada, también hacen que los bocetos se vean más limpios. Estos son tremendamente útiles si usted es un cajón desordenado, ya que proporcionan las relaciones de aspecto y las líneas de cuadrícula correctas para teléfonos inteligentes y navegadores web.

Este proceso puede continuar durante el tiempo que desee, pero es hora de pasar al siguiente paso una vez que se completa un flujo de usuario y el proceso para completar ese flujo es claro. Es una buena idea alternar entre dibujar y construir estructuras digitales, principalmente para mantener el proceso creativo. A medida que avance a través de más flujos, el producto se sentirá más concreto y, naturalmente, dejará de dibujar.

Pasando a lo digital (prototipos de baja a alta fidelidad)

Una vez que haya suficientes bocetos completos para avanzar, es hora de digitalizarlos. Ya sea Adobe XD o Sketch, Framer o Flinto, o algo completamente diferente, crear versiones digitales de bocetos es el primer paso para formalizarlos. Por lo tanto, el enfoque cambia de agregar creativamente los elementos necesarios a organizar los activos y la estructura dentro de los diseños.

A medida que los prototipos se vuelven más prácticos y los elementos más estructurados, el producto toma forma. Al pasar a prototipos digitales, la fidelidad está determinada por el nivel de interactividad , diseño visual y contenido . Un prototipo puede ser de baja o alta fidelidad individualmente en estas áreas, aunque los equipos de alta fidelidad incorporan las tres al más alto nivel.

Considere la jerarquía con respecto a alcanzar las necesidades del usuario. Cada boceto se conecta con un flujo de usuario y una historia, y los bocetos son un primer paso para determinar el diseño y la estructura de un producto. Las herramientas digitales actuales pueden acelerar gran parte de esto, por ejemplo, configurando elementos maestros que se aplican a todas las páginas y plantillas para tipos de página.

Con cada nuevo cable e iteración, plantéese dos preguntas principales: ¿Cuenta esta página con su propósito en el flujo de usuarios más amplio? ¿Y la interacción tiene sentido (lo que significa que el usuario entendió cómo completar la acción)? Nos hacemos estas preguntas mucho. Cuanto más hacemos, más probable es que cada nueva iteración acerque los prototipos a un borrador final.

Los prototipos digitales también son mucho más fáciles de probar, ya que no solo son más legibles, sino también más rápidos de reproducir e iterar en masa. Aquí es donde las herramientas de creación de prototipos de UX como InVision y Proto.io resultan muy útiles para crear prototipos en los que se puede hacer clic. Cuando se puede hacer clic, se vuelve fácil probar la usabilidad de varios aspectos, desde botones individuales hasta flujos completos.

La creación de prototipos en los que se puede hacer clic se ha vuelto especialmente popular en los últimos años gracias a la facilidad de uso de programas como InVision. Es aún más valioso para los dispositivos móviles, donde ahora todas las principales herramientas de creación de prototipos brindan alguna forma de ver o probar los cables móviles directamente en un dispositivo de prueba.

Con algunos conocimientos de ingeniería o herramientas más poderosas como Justinmind o Axure, también es posible construir prototipos funcionales, que son interactivos más allá de simplemente hacer clic. Los usuarios pueden probar cosas como completar formularios, realizar tareas simples o complejas y usar la aplicación como debe ser, todo sin construirla. Los diseñadores con capacitación en diseño de interacción humano-computadora (HCI), incluidos muchos diseñadores de Toptal, construyen y prueban regularmente con prototipos funcionales.

Los prototipos interactivos son excelentes para probar animaciones, operaciones de usuario dentro de la aplicación y funciones de nivel superior que a veces no se pueden probar sin una acción funcional.

Prototipo con Propósito

La belleza, y el desafío, de la creación de prototipos está en el proceso. Podemos decir lo mismo de casi todo, pero los prototipos comienzan y terminan con un propósito. Sin saber por qué una pantalla en particular debe comportarse de cierta manera, cómo debe operar una función o si los usuarios necesitan un embudo o no, el prototipo realizado no se desarrolla; se dibuja y luego se crea ad hoc.

Sin embargo, incluso si cada wireframe creado se hace de manera tan inteligente, se hacen preguntas en el camino, se tienen en cuenta todas las historias de usuario relacionadas y se usa la arquitectura de la información como un mapa, aún es posible perderse cosas. Ese es el desafío del diseño de prototipos: los clientes, los gerentes e incluso los diseñadores olvidan que los prototipos no son definitivos . Son solo un borrador, una iteración hasta la próxima versión. Todo es parte del proceso de diseño de UX.

Entonces, cuando construya su próximo conjunto de prototipos, recuerde hacer al menos una pregunta muy importante: ¿Produce esto el resultado deseado? Si no, entonces es otra oportunidad para redactar una nueva versión.

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas