Métodos de coincidencia de UX: una guía de diseño visual

Las visualizaciones de UX (comúnmente conocidas como métodos de visualización de UX) son artefactos que describen varios aspectos de un producto o los procesos asociados con él. Hay muchos tipos diferentes de mapas UX: mapas de empatía, mapas de interacción con el cliente, mapas de servicio y mapas de ruta, solo por nombrar algunos.

Cada tarjeta tiene un propósito único y, por lo tanto, difiere en estructura y contenido. Si bien muchas de estas tarjetas comienzan en un formato aproximado (como un paquete de calcomanías o una hoja de cálculo colaborativa), a menudo pasan a una forma pulida para que puedan compartirse con otros. Este artículo proporciona algunos consejos de diseño visual para mejorar el aspecto de sus tarjetas UX.

Cuando el diseño visual de una tarjeta importa

Hay momentos en los que no tiene sentido dedicar tiempo a pulir un mapa. Por ejemplo, imagine que está trabajando con colegas interdisciplinarios y se da cuenta de que debido a que prioriza el trabajo, todos tienen ideas diferentes sobre lo que están haciendo sus usuarios. La solución podría ser crear un mapa de viaje del cliente para que todos estén en la misma página. En este caso, la colaboración y el debate son más importantes que el mapa y no hay necesidad de perder tiempo en el diseño visual del mapa.

Sin embargo, tiene sentido dedicar tiempo a pulir el mapa si:

• La tarjeta será vista por muchas personas. Cuanto mayor sea la audiencia de su tarjeta, mejor debería ser. Este es a menudo el caso de los mapas que circulan ampliamente como la única fuente de verdad. Vale la pena tomarse el tiempo para asegurarse de que el mapa se pueda entender fácilmente, especialmente porque muchos lo usarán por su cuenta sin que nadie responda preguntas o señale las ideas más importantes.
• El mapa será público, no solo un artefacto interno. Si su tarjeta se distribuirá ampliamente entre clientes, socios externos, inversores o miembros de la junta, es una buena idea mejorar su diseño visual.
• Las apuestas de cartas son altas. Las partes interesadas a menudo equiparan una apariencia refinada con legitimidad. Si mucho depende del éxito de un artefacto y necesita apoyo para seguir adelante, la creación de un artefacto refinado y “oficial” puede aumentar la legitimidad percibida.

Selección de herramientas

La mejor herramienta dependerá de su experiencia, lo que ya esté usando y su objetivo. Al elegir una herramienta, tenga en cuenta los siguientes factores:

• ¿Qué tienes ya y qué usas? Elegir una herramienta familiar será más fácil porque no tiene que aprender una nueva herramienta y desarrollar un mapa UX al mismo tiempo. Algunas herramientas de creación incluyen conjuntos de diapositivas (p. ej., PowerPoint, Keynote), hojas de cálculo (p. ej., Excel, Google Sheets) y herramientas de estructura alámbrica (p. ej., Figma, Sketch, Adobe).
• ¿Cuál es tu objetivo principal? Si tiene varias herramientas para elegir, pregúntese cuál es su objetivo principal con el mapa. ¿Quieres que el mapa sea fácil de compartir con otros? ¿Quieres que otros contribuyan y lo apoyen con el tiempo?

Identifique los principales obstáculos que enfrentará al crear y mantener un mapa UX, y luego elija una herramienta que pueda superar esos obstáculos.

Creando un sistema visual consistente

Comience por desarrollar un sistema visual para el mapa. Puede ser tentador pasar directamente a conectar su contenido, pero el sistema visual reducirá las elecciones que debe hacer más adelante y garantizará que sea consistente al crear su mapa.

Crear estilos para:

• Texto del título: Este será el estilo de texto para el título de su tarjeta. Deberá decidir la fuente y el tamaño del texto. El tamaño del texto del encabezado puede variar de 60 a 80 puntos según el tamaño de su artefacto y la longitud de su encabezado. Suponiendo que su fondo sea blanco, el texto del título debe ser negro para facilitar la lectura.
• Texto principal: Este texto formará su cuerpo de texto. A menos que sea un diseñador visual experimentado, probablemente querrá usar la misma fuente tanto para el título como para el cuerpo del texto. Según la cantidad de contenido que incluya su artefacto, el tamaño del cuerpo del texto puede oscilar entre 12 y 18 puntos. Cuanto más contenido necesite incluir, más pequeño debe ser el texto. Trate de no bajar de 12 puntos, ya que el texto pequeño es difícil de leer. El cuerpo del texto también debe ser negro (suponiendo que el fondo sea blanco).
• texto secundario: Este texto suele estar representado por formas (como rectángulos o cuadrados) o viñetas y se puede colorear para que se distinga fácilmente del cuerpo del texto. Puede tener varios estilos de texto secundarios si su artefacto es confiable. Una vez más, ten en cuenta el contraste con el fondo y el tamaño del texto.
• Flechas y líneas: Las flechas y las líneas muestran las relaciones entre los diferentes elementos del mapa o separan distintos grupos conceptuales. Incluya diferentes variaciones (por ejemplo, líneas continuas o discontinuas, de diferentes grosores, puntas de flecha) para que se utilicen de forma coherente en todo el mapa. Asigne un uso para cada variación.
• Etiquetas: Las etiquetas son identificadores de cuadrantes, carriles o ejes. Las etiquetas difieren del texto principal o del texto adicional porque explican el formato del mapa en lugar del contenido del mapa. Por lo tanto, el texto que sirve como etiqueta debe ser diferente de su cuerpo o texto adicional; por ejemplo, puede estar en negrita, cursiva o subrayado. Los subtítulos a veces pueden ser un poco más grandes (16-22 pt) que el texto principal.

Luego cree un sistema de color seleccionando los siguientes elementos.

• Paleta de color: Las paletas de colores son una gama o conjunto de colores que funcionan bien juntos. Algunas organizaciones combinarán el color de su tarjeta UX con la marca de su empresa, mientras que otras crearán un sistema de codificación por colores para transmitir atributos importantes de la tarjeta. Por ejemplo, para un proyecto de un cliente reciente, establecimos una paleta de colores diferente para cada personaje, y para todas las tarjetas asociadas con ese personaje, usamos la paleta de colores correspondiente. Por lo tanto, cualquiera que leyera el mapa podría saber de inmediato a qué personaje pertenece este artefacto.
• Aplicación de color: A menudo, cuando se exhiben artefactos, el color se aplica deliberadamente en más de una forma. Por ejemplo, puede utilizar diferentes tipos de usuarios y asignar un color diferente a cada uno. O puede tener un mapa de varias etapas en el que cada etapa tenga un color diferente.

Creación de un fondo

Ahora que tiene su sistema visual en su lugar, necesita construir la estructura para su mapa. La base consta de los siguientes dos elementos:

1. Contexto. Incluya el título en el estilo de texto del título. Agregue el propietario (generalmente el creador del mapa) y la fecha en que se creó o actualizó el mapa. Esta información debe estar en una fuente secundaria para mostrar visualmente que es menos importante pero relacionada con el título.
2. líneas estructurales. Considere el esqueleto de su mapa UX. Algunos mapas UX siguen un plan de carril de natación, otros son matrices. Las líneas de corte representan visualmente la estructura del mapa y sirven como base para su contenido. Las líneas de división de su mapa deben ser más gruesas y de color gris o negro.

Agregar contenido

Una vez que tenga un sistema visual y una base, puede agregar contenido al mapa. Si ya tiene un borrador de mapa, deberá copiar su contenido y pegarlo en un formato pulido. Recuerda usar tu sistema visual.

Recomendamos comenzar con su contenido principal, que incluye elementos como etiquetas para sus carriles, columnas o quads. Una vez que los tengas, agrega el resto del contenido del mapa. Este enfoque garantiza que coloque el contenido en los lugares correctos. No intentes hacer todo perfecto todavía, ya que no vale la pena perder el tiempo hasta que todo esté en el mapa y tengas una idea de con qué estás trabajando.

Refina tu imagen

Una vez que todo su contenido se haya agregado al mapa, juegue con el espacio y el tamaño de los diversos elementos. Dependiendo de la cantidad de contenido que tenga en diferentes áreas de su mapa, deberá mover los objetos y ajustarlos según sea necesario. Pensar en:

• Alineación. La mayoría de las herramientas tienen funciones de alineación que facilitan la alineación perfecta de cuadros de texto y otras formas.
• Distribución. Los componentes de un mismo grupo deben estar distribuidos uniformemente a lo largo de la pista o fila (esto significa que debe haber una distancia igual entre los diferentes elementos).
• subsecuencia. Sigue el sistema visual que creas consistentemente. Por ejemplo, si cambia el tamaño de las formas en el mapa, no olvide cambiar las demás. El objetivo es que todos los componentes de su mapa sean consistentes y cohesivos. Estos detalles minuciosos contribuyen a la sensación general de pulido de su artefacto.

A medida que realiza ajustes, puede agregar componentes visuales adicionales, como rellenos (colores de fondo sólidos en ciertos elementos) e íconos. Nos gusta usar el Proyecto Noun para aprovechar un conjunto de iconos visualmente cohesivo. Dependiendo de la herramienta que esté utilizando, puede editar el icono cambiando su color o grosor de línea. El mismo grosor de línea para todos los íconos los hará visualmente consistentes e intencionales.

En algunos casos, es útil crear una clave de mapa u otro documento explicativo para ayudar a su audiencia a comprender el artefacto. Si ciertos íconos significan algo específico en su mapa, agregue una leyenda al mapa que explique qué significa cada ícono. Si está creando varios mapas relacionados, considere crear un gráfico que muestre las relaciones entre ellos.

Conclusión

No hagas una tarjeta bonita por el simple hecho de hacerlo bonito. Invierte en construir un sistema visual para tu mapa. Una vez que haya creado un mapa, es importante probarlo de la misma manera que prueba una interfaz. Obtenga retroalimentación y repita según sea necesario. Y luego reutilizar el mismo sistema visual y aplicarlo a un nuevo mapa.