Los 10 entregables de UX que usan los mejores diseñadores

Escucha la versión en audio de este artículo

El trabajo de un diseñador de UX ocurre en muchos entornos diferentes, desde startups lean y entornos ágiles donde los equipos trabajan con poca documentación, hasta compromisos de consultoría para terceros o grandes empresas y entidades gubernamentales con estrictos requisitos de documentación. Independientemente de la naturaleza del compromiso o el entorno (y lo único que lo une todo), los profesionales de UX necesitan comunicar de manera efectiva sus ideas de diseño, los hallazgos de la investigación y el contexto de los proyectos a una variedad de audiencias.

Durante el proceso de diseño de UX, los diseñadores producirán una amplia variedad de "artefactos" y entregables del proyecto como parte de su metodología de diseño de UX. Estos pueden tomar muchas formas: los entregables ayudan a los diseñadores de UX a comunicarse con varias partes interesadas y equipos, documentar el trabajo y proporcionar artefactos para reuniones y sesiones de ideación. También ayudan a crear la "fuente única de la verdad": guías y especificaciones para la implementación y la referencia.

Estos son los 10 entregables de UX que un diseñador de UX produce típicamente durante un compromiso. (Esta lista no es exhaustiva y puede ser potencialmente más larga según la naturaleza del compromiso).

1. Objetivos comerciales y especificaciones técnicas

Este es un paso fundamental. Para un profesional de UX, todo comienza con la comprensión de la visión del producto, es decir, la razón de la existencia del producto desde una perspectiva comercial. Escrita en términos simples, la declaración debe incluir el problema que se aborda, la solución propuesta y una descripción general del mercado objetivo. También debe describir las plataformas de entrega y mencionar ligeramente los medios técnicos por los cuales se entregará el producto.

No es necesario que tenga más de una página, pero debe describir el núcleo del qué, por qué y cómo. Aquí hay un ejemplo: “The Fantastic App Co. ha identificado una brecha en las aplicaciones de entrega de regalos en plataformas móviles para el mercado Millennial (iOS y Android). Una gran cantidad de Millennials tienen problemas para recordar fechas especiales, identificar el mejor regalo y luego encontrar y comprar esos regalos. Nuestra solución está diseñada para aliviar ese estrés. Con un diseño anticipatorio y las últimas tecnologías de inteligencia artificial, la aplicación ofrece una experiencia de usuario útil y casi mágica”.

2. Informe de análisis competitivo

Para cualquiera que comience a diseñar un nuevo producto, es vital asegurarse de que se ajuste bien al mercado. Fundamentalmente, como parte de una estrategia de UX, el producto también debe tener una ventaja competitiva convincente y una UX que sea superior a otros en el mercado.

El análisis competitivo significa: “Identificar a sus competidores y evaluar sus estrategias para determinar sus fortalezas y debilidades en relación con las de su propio producto o servicio ”.

Una de las tareas iniciales de un diseñador de UX es investigar qué productos o servicios están utilizando actualmente los clientes objetivo para resolver el problema. ¿Existe un producto o servicio equivalente por ahí? ¿Hay alguna solución alternativa que la gente esté usando que sea lo suficientemente buena pero no perfecta? Una tirita: ¿una vitamina pero no un analgésico? ¿Cómo puede una mejor UX marcar la diferencia?

Un componente de la investigación de la experiencia del usuario, un informe de análisis competitivo identifica a los cinco principales competidores y examina qué es lo que están haciendo bien, así como también lo que están haciendo mal. Este paso ayudará a establecer una dirección de diseño en la que se definan objetivos claros y se expliquen los elementos en los que se centrará.

3. Informes de investigación de Personas y UX

Los diseñadores de UX deben asegurarse de que las partes interesadas entiendan las necesidades de los clientes del producto. La creación de personas para encapsular y comunicar los patrones de comportamiento de los usuarios y la realización de investigaciones de usuarios son formas comprobadas de hacerlo. Las personas son representativas de los usuarios típicos de un producto: al incorporar sus objetivos, necesidades e intereses, ayudan al equipo que trabaja en el proyecto a desarrollar empatía hacia el usuario.

La investigación de usuarios también es un componente integral en el proceso de diseño de UX. Implica una variedad de técnicas utilizadas para extraer patrones de comportamiento, agregar contexto y dar una idea del proceso de diseño. Hay muchos tipos de herramientas y técnicas de investigación de usuarios disponibles: se trata de elegir el "lente" correcto para la situación correcta.

Antes de embarcarse en la investigación de usuarios, es importante tomarse el tiempo para desarrollar un plan de investigación . Este es un documento que ayudará a comunicar los objetivos y métodos de investigación, así como a obtener la aceptación de las partes interesadas. También es una gran herramienta que se puede utilizar para ayudar a mantener a todos al día durante el proyecto de investigación.

Al final de la fase de investigación del usuario, se genera un informe que traduce los hallazgos de la investigación en elementos procesables. Luego, el equipo de UX está configurado para diseñar el producto en torno a esos elementos.

4. Sitemap y Arquitectura de la Información

Un mapa del sitio es un modelo organizado visualmente de todos los componentes y la información contenida en un producto digital. Representa la organización del contenido de una aplicación o sitio. Junto con los wireframes, son uno de los entregables de UX más fundamentales y rara vez se omiten en un proceso de diseño de UX.

Los sitemaps ayudan a diseñar la arquitectura de la información, el arte y la ciencia de organizar y etiquetar los componentes de un producto, para respaldar la navegación, la capacidad de búsqueda y la usabilidad; también lo ayudan a definir la taxonomía y la interfaz de usuario.

Los sitemaps son referencias útiles para tener como recurso y ajustarse a medida que el producto evoluciona en función de la creación iterativa de prototipos y las pruebas de los usuarios. Durante el flujo de trabajo de diseño, a menudo se emplea un sistema de numeración para mantener a todos en la misma página cuando se habla del contenido del producto.

5. Mapas de experiencias, viajes de usuarios y flujos de usuarios

Un mapa de experiencia es una representación visual que ilustra el flujo de un usuario dentro de un producto o servicio: sus objetivos, necesidades, tiempo dedicado, pensamientos, sentimientos, reacciones, ansiedades, expectativas, es decir, la experiencia general a lo largo de su interacción con un producto. Por lo general, se presenta en una línea de tiempo lineal que muestra los puntos de contacto entre el usuario y el producto.

Los recorridos y flujos de usuarios son más una serie de pasos que realiza un usuario y demuestran la forma en que los usuarios interactúan actualmente, o podrían interactuar potencialmente con un producto. Demuestran el comportamiento, la funcionalidad y las tareas clave que un usuario puede realizar. Al examinar y comprender el "flujo" de varias tareas que un usuario puede realizar, puede comenzar a pensar en qué tipo de contenido y funcionalidades incluir en la interfaz de usuario y qué tipo de interfaz de usuario necesitará el usuario para lograrlos.

Gran parte de UX se trata de resolver problemas para los usuarios. Al diseñar un viaje de usuario, el diseñador debe comprender la persona, los objetivos del usuario, las motivaciones, los puntos débiles actuales y las tareas principales que desea lograr.

¿Cuál es la diferencia entre un viaje de usuario y un flujo de usuario? Piense en un flujo de usuarios como el usuario que trabaja en una tarea u objetivo a través de su producto o servicio, por ejemplo, reservar un automóvil en Lyft; un viaje de usuario ilustra el panorama general. Un viaje de usuario se expande más allá de las tareas y analiza cómo una interacción particular con el cliente encaja en un contexto más amplio.

6. Estructuras alámbricas de UX

Un elemento básico de la metodología de diseño de UX, los wireframes son ilustraciones de "planos" bidimensionales de un marco de diseño y elementos de interfaz, y muestran qué va a dónde. Principalmente una herramienta de diseño, ayudan a definir la arquitectura de la información, el espaciado del contenido, las funcionalidades, el diseño de interacción y los comportamientos previstos del usuario.

Los wireframes son el pan de cada día para los diseñadores de UX y uno de los entregables más comunes en un proyecto. “Muéstrame tus wireframes” probablemente se escuche con más frecuencia que cualquier otra cosa durante la entrevista de un diseñador de UX.

Una fase importante en el proceso de diseño de UX, el wireframing es una forma rentable de explorar ideas y generar conceptos innovadores que aborden los objetivos del cliente. Son excelentes herramientas para idear rápidamente más allá de los bocetos, y vienen en muchos sabores diferentes, desde baja fidelidad (sin estilo, cuadros en blanco y negro, texto griego) hasta alta fidelidad (estilo completo, color, muy detallado).

A veces denominados "cables" en la forma abreviada del lugar de trabajo, los wireframes pueden ahorrar una tonelada de tiempo y dinero en el futuro porque son muy flexibles y rápidos de producir. Sirven como una pieza central en torno a la cual tener conversaciones con las partes interesadas y los miembros del equipo mientras se determina la dirección del diseño.

Los wireframes son fundamentales y, como tales, son fundamentales para ayudar a definir un diseño estructuralmente y cómo funciona un flujo de usuario a través de una aplicación o sitio en diferentes escenarios de casos de uso. Hay algunos giros interesantes en los wireframes, como los "mapas de wireframes" discutidos en un artículo anterior aquí en el blog de diseño de Toptal y "wireflows": un entregable de UX para flujos de trabajo y aplicaciones de NNGroup.

7. Prototipos interactivos

Otro entregable dominante durante un proceso de diseño centrado en el usuario, los prototipos interactivos dan vida a un producto. Los prototipos rudimentarios ahorran una tonelada de tiempo y dinero: demuestran cómo funcionarán las cosas en un escenario de caso de uso real y permiten una iteración de diseño rápida y pruebas de usuario. También ayudan a un diseñador a comunicar su diseño de manera efectiva en diferentes etapas del proceso de diseño de UX.

La creación de prototipos puede ocurrir en cualquier punto del viaje de descubrimiento a través de la iteración. Desde prototipos en papel hasta diseños muy pulidos, una revisión interna de un prototipo de producto permite que todos los miembros del equipo vean cómo funcionarán las cosas cuando un usuario real interactúe con él.

Los bocetos estáticos y las estructuras alámbricas no dan vida a un producto de la forma en que lo hace un prototipo interactivo. Casi mágicamente, se ve y se siente cómo se comportará el producto, cómo se conecta todo. Se pueden explorar diferentes diseños y características; pueden surgir nuevas ideas. Los puntos problemáticos se pueden detectar y las interacciones incómodas se pueden descubrir.

Los prototipos interactivos ayudan enormemente a las pruebas de los usuarios. En lugar de guiar a las personas a través de páginas estáticas, los usuarios potenciales pueden probar un producto que se siente 100% real, brindar ideas y brindar comentarios valiosos.

En estos días, las herramientas de creación de prototipos para diseñadores vienen en todas las formas y tamaños. Aquí hay 21 herramientas de creación de prototipos interactivos para el diseño de UX.

8. Diseño Visual

El diseño visual es la "capa final de pintura" del producto. Sin embargo, no es solo eso: el diseño visual puede afectar en gran medida la UX de un producto y, por lo tanto, debe abordarse con mucho cuidado. Con suerte, se trabajaron muchas heurísticas de diseño de interacción y usabilidad durante los pasos anteriores del proceso de diseño de UX para que los diseñadores puedan concentrarse en las imágenes. Es una última oportunidad para llevar el producto al siguiente nivel.

El diseño visual es el último paso antes de entregarlo a los desarrolladores y la fase en la que se elaboran una guía de estilo y las especificaciones finales. No se trata solo de "hacer las cosas bonitas", sino de una oportunidad para definir o implementar un esquema de color de marca y afectar la usabilidad con el diseño, el contraste y la jerarquía visual.

9. Guía de estilo y especificaciones para desarrolladores

El paso final en el flujo de trabajo de diseño de UX es reunir especificaciones y una guía de estilo para desarrolladores. Las guías de estilo son imprescindibles si se quiere que el diseño de un producto tenga éxito a largo plazo.

Una guía de estilo es para asegurarse de que los diseños se implementen de manera consistente en la marca, los estilos visuales, los colores, las fuentes y la tipografía. También se usa para patrones de diseño, idioma, reglas (como métodos abreviados de teclado y reglas de visualización de datos) y para especificar comportamientos de la interfaz de usuario (como el manejo de errores).

Algunas guías de estilo y especificaciones se elaboran manualmente y otras se generan automáticamente. Reunir una guía de estilo manualmente es un proceso tedioso y, a menudo, puede llevar seis meses, por lo que cualquier herramienta de automatización es un ahorro de tiempo bienvenido.

Las formas automatizadas varían según la herramienta utilizada. Son una forma más ágil e incremental de entregar diseños en comparación con las guías de estilo elaboradas durante mucho tiempo. Se pueden considerar más como "biblias de estilo" en el estante a las que todos los miembros del equipo pueden referirse.

Si trabajas en Sketch, hay bendiciones como Zeplin. Zeplin es una herramienta de colaboración para diseñadores de UI y desarrolladores front-end. Va más allá del flujo de trabajo de diseño y ayuda a los equipos con la entrega del diseño.

Además, se puede generar una guía de estilo de diseño en unos segundos desde Sketch con el complemento Craft, o se pueden tomar medidas y CSS del diseño generando un archivo HTML con el complemento Marketch como se describe en este artículo.

Aquí hay 50 excelentes ejemplos de guías de estilo. También uno de la BBC y otro de IBM, los cuales alojan sus guías en línea, lo que facilita que todos puedan verlas.

10. Informes de análisis de uso y pruebas de usabilidad

El trabajo de un diseñador de UX nunca termina. Incluso después del lanzamiento de un producto, hay oportunidades para recopilar comentarios, recopilar datos sobre el uso, perfeccionar, lanzar y comenzar el ciclo nuevamente.

Una prueba de usabilidad le dirá si sus usuarios objetivo pueden usar su producto. Ayuda a identificar los problemas que tienen las personas con una interfaz de usuario específica y revela tareas difíciles de completar y lenguaje confuso.

Los informes de prueba de usabilidad generalmente se entregan durante la fase de creación de prototipos, pero no es inusual probar los productos existentes con los usuarios para ver dónde se puede mejorar.

Comprender los datos recopilados durante las pruebas de usabilidad (recopilación, clasificación y generación de informes) se está convirtiendo en una tarea cada vez más común entre los profesionales de UX; de hecho, se está convirtiendo en una habilidad crítica de UX. Aquí hay una plantilla de informe de prueba de usabilidad.

Después de que el producto se lanza a la naturaleza, otro conjunto de recopilación de datos, un método cuantitativo , le dirá al equipo de diseño cómo funciona el producto con los usuarios a gran escala.

Existen innumerables herramientas y formas de capturar el comportamiento del usuario y analizarlo. Desde seguimiento ocular hasta seguimiento de clics y mapas de calor (que muestran los clics, los toques y el comportamiento de desplazamiento) hasta el etiquetado de elementos de la interfaz de usuario que rastrea la huella digital de cada usuario en dispositivos móviles y web.

Los informes analíticos muestran qué funciones usan los clientes, cuánto tiempo pasan en su sitio o aplicación móvil, las tendencias a lo largo del tiempo y agregan resultados a través de geografías, cuentas, usuarios y segmentos personalizados. Proporcionan una visibilidad completa de cómo se utilizan las funciones y quién las utiliza.

Las empresas de análisis suelen generar automáticamente informes personalizados bajo demanda. Estos informes son muy útiles y pueden proporcionar información sorprendente sobre el uso de su producto. Esa característica increíble que pensó que ganaría a todos sus clientes puede resultar que casi nunca se use. Por otro lado, una función pequeña e insignificante en la interfaz de usuario puede resultar muy útil y puede decidir que es hora de concentrarse en expandir esa funcionalidad en particular.

La misión de un diseñador de UX es capacitar a las empresas para que creen productos y servicios basados ​​en una comprensión profunda de los comportamientos, objetivos y motivaciones humanos. Los 10 entregables de UX anteriores son algunos de los más comunes producidos por los diseñadores de UX, ya que crean excelentes experiencias para los usuarios como parte del "pensamiento de diseño" y un proceso de diseño centrado en el usuario.

• • •

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