Mejore su experiencia de usuario con una jerarquía visual clara

El concepto de jerarquía visual se ha aplicado en el diseño desde que Internet era una fantasía lejana, y es tan importante en el diseño de productos modernos como lo fue en el cenit del anuncio impreso.

La jerarquía visual determina el orden en que las personas toman y procesan la información en una página, independientemente de si es digital o impresa. Es una parte vital para crear una experiencia de usuario óptima.

En pocas palabras, un sentido claro de jerarquía visual guía a las personas hacia el contenido o las acciones de importancia. En un anuncio impreso, este sería el eslogan, mientras que en un producto digital, podría ser un mensaje de marca o un llamado a la acción principal.

Es una forma increíblemente útil de crear una experiencia de cliente ordenada y útil al tiempo que mejora las posibilidades de lograr un resultado estratégico.

Aquí hay algunos pasos que los diseñadores de UX pueden seguir para lograr un sentido claro de jerarquía visual en los productos digitales y llevar las experiencias de los clientes al siguiente nivel.

Definir UX y objetivos de marca

Utilizando una variedad de métodos, muchos equipos de productos ya están definiendo los objetivos de UX para cada sección de su producto.

Dar forma a la definición de los objetivos de UX al cumplir con los criterios de la metodología SMART (Específico, M edible , Accionable , Relevante , Rastreable) es una forma popular de hacerlo. Hay un buen artículo sobre esto aquí.

Igualmente importantes son los objetivos de la marca. Estos reflejan los objetivos generales del negocio, tanto desde la perspectiva comercial como de la marca. Un ejemplo de objetivos de marca para una página de aterrizaje de servicios automotrices sería: a) establecer la marca como un servicio premium, yb) incentivar la búsqueda de autos.

La forma más fácil y efectiva de documentar los objetivos de marca y UX de las diversas fases del viaje del cliente es realizar un taller colaborativo de jerarquía visual.

Usando una herramienta de colaboración de lienzo amplio como Milanote, o incluso Sketch, diseñe las pantallas prototipo en un orden cronológico amplio. Invite a los profesionales clave a una reunión en línea o física, asegurándose de que haya representación tanto desde la perspectiva de UX como de la marca.

Luego, comparte la pantalla (o conéctate a un monitor) y ¡comienza a anotar!

Esto inicia el proceso de identificación de los objetivos de marca y UX para cada sección de la experiencia del cliente y pone en marcha un flujo de trabajo estratégico que se puede aprovechar durante el resto del proceso de diseño.

Clasifique las acciones y el contenido para una jerarquía visual clara

Ahora que los objetivos de UX y de la marca están en su lugar, es hora de definir la jerarquía visual adecuada de cada acción o contenido y documentarlo como referencia durante el trabajo de diseño posterior.

En primer lugar, se necesita una taxonomía. Lo mejor es usar una escala de 1 a 3, siendo 1 lo más importante y 3 lo menos.

Usando el formato de lienzo amplio perfilado anteriormente, comience a anotar en colaboración el diseño del prototipo.

En este ejemplo, hay un objetivo de UX de " Quiero aprender más sobre el servicio de esta marca para determinar si se ajusta a mi presupuesto, necesidades y preferencias ". Los objetivos de la marca son a) establecer la marca como un servicio premium yb) fomentar la búsqueda de automóviles.

En vista de esto, al mensaje de la marca Encuentra tu auto ideal entre más de 500 autos se le ha asignado una jerarquía de 1, al igual que el formulario adjunto y la CTA.

A pesar de su importancia para la experiencia general del cliente, al logotipo real (y a la navegación) se le ha asignado un 2, ya que no juega un papel tan importante en el cumplimiento de los objetivos de marca y UX.

El contenido de apoyo está marcado con un 3, lo que puede parecer contradictorio. Sin embargo, se adhiere al flujo narrativo que está comenzando a tomar forma, con el mensaje de la marca y la funcionalidad de "comenzar" como enfoque principal, luego el logotipo y la navegación para establecer la identidad y la estructura premium del servicio, luego el contenido de apoyo para tranquilizar, proporcionar contexto e inspirar al cliente.

A medida que los diseñadores se acostumbran a tener en cuenta la jerarquía visual, es fácil comenzar a apreciar las posibilidades narrativas que revela, agregando profundidad real a las interfaces de usuario y las historias que cuentan.

Incorpore una jerarquía visual en el sistema de diseño

Ahora que los objetivos y las clasificaciones de la jerarquía visual están establecidos, se puede crear el lenguaje visual que les dará vida. Supongamos que ya existe un sistema de diseño (si no es así, ¡esto debe hacerse primero!) y que ya se ha diseñado una variedad de elementos de la interfaz de usuario.

El primer lugar para comenzar es la composición: el diseño de las plantillas necesarias. Considere dónde deben aparecer los elementos mejor clasificados (como se describió anteriormente, no siempre es lo más esperado). Es posible que se necesiten múltiples variaciones para atender una variedad de escenarios. Para asegurarse de que nada se pase por alto más adelante en el proyecto, los diseñadores deben tomarse el tiempo para crearlos ahora.

Más adelante en el proceso de diseño, se pueden incluir varias maquetas de ejemplo en el documento del sistema de diseño, con símbolos en vivo de patrones de interfaz de usuario (para que los diseñadores que trabajan en el proyecto tengan las últimas versiones).

Una vez que se ha establecido una idea general de la composición, se pueden comenzar a crear variantes de elementos de la interfaz de usuario.

Tome el humilde encabezado de la página. En este ejemplo de un proyecto reciente para una consultoría de recursos humanos, hay tres variantes en el sistema de diseño para atender los diferentes rangos de jerarquía visual.

Los diseñadores pueden ampliar esto con los componentes básicos de su interfaz de usuario. Por ejemplo, en un proyecto reciente para una popular aplicación de contratación, se utilizó la profundidad para diferenciar los paneles de contenido: cuanto mayor sea la profundidad, mayor será la jerarquía visual.

La jerarquía visual se puede diseñar en casi todos los elementos del lenguaje visual de una marca: composición, tipografía, profundidad, imágenes, iconografía y tono de voz. Cuanto más profundo sea el diseño, más cohesiva y enfocada será la experiencia del cliente.

Envolver

La incorporación de un flujo de trabajo de jerarquía visual en el proceso de diseño da como resultado experiencias de usuario considerablemente mejores. Lo hace al brindarles a los diseñadores un medio para asignar un rango a diferentes tipos de contenido, lo que da como resultado interfaces de usuario que no solo se sienten ordenadas e intuitivas, sino que también permiten cumplir los objetivos principales de la marca.

La jerarquía visual clara no solo mejora su UX, sino que también establece un flujo de trabajo sostenible que le da al proceso de diseño un enfoque estratégico, esencial en un entorno de diseño de productos moderno.

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

• Principios de diseño: Introducción a la jerarquía
• Mejores prácticas de diseño de interfaz de usuario y errores comunes
• Explorando los Principios Gestalt del Diseño
• La guía completa de arquitectura de la información
• Impulse su UX con estos principios de diseño de interacción exitosos