Tendencias UX para cuidar de verdad la experiencia de usuario
Tendencias UX para cuidar de verdad la experiencia de usuario

Las tendencias UX de 2019 están muy relacionadas con la movilidad, la necesidad de capturar la atención de forma efectiva y de lograr una comunicación lo más humana posible con nuestros interlocutores al otro lado de la pantalla.

Vivimos en una sociedad regida por la economía de la atención. Hace ya años que parece haberse impuesto un nuevo modelo de negocio que es consciente de que más que atacar la cartera de las personas, es más lucrativo conseguir su atención permanente.

La atención de las personas es un bien preciado, por escaso y por lo que supone conseguir cuota de atención en un contexto en el que compiten muchas marcas en todos los sectores y en el que cuesta mucho diferenciarse.

Es frecuente, para conseguir la atención del usuario, aplicar en UX aprendizajes extraídos de sectores que viven de capturar esa atención y no soltarla, como es el caso del gaming, y especialmente en los dispositivos móviles.

Sin embargo, las tendencias UX más efectivas son aquellas que, además de centrarse en captar la atención del usuario, tienen un sentido, un propósito y están concebidas con el objetivo de satisfacer de verdad sus necesidades y proporcionar la mejor experiencia posible, no solo para mantener perpetuamente su atención.

En este artículo repasamos las más significativas, agrupadas en función de estas características: reducir fricciones, apostar por el movimiento, incrementar la personalización y aprovechar las capacidades móviles.

Reducir fricciones

  • La claridad ante todo. Los usuarios buscamos experiencias de transiciones suaves o sin ellas; sin cargas perceptibles y sin grandes rupturas: este tipo de diseño es el que permite centrarse en el contenido y en los servicios que queremos dar a los clientes y que ellos están buscando. En ese sentido, los one-page site son una tendencia clara, como por ejemplo en este sitio web sobre sostenibilidad.
  • Priorización del contenido. La eliminación del ruido en las pantallas es clave cuando el 70% de las sesiones de navegación que realizamos son en móvil. La limpieza de los diseños y el minimalismo se imponen como tendencia para conseguirlo. Y en esa priorización del contenido tienen gran importancia los textos y la tipografía. Las palabras nunca han tenido más importancia que ahora, cuando son tan escasas: debemos poder ser precisos al máximo y ser eficaces en la comunicación con palabras que representen bien la voz de la marca. Y la misma importancia tiene la tipografía, con un impacto tremendo en cómo se percibe el contenido.
  • Interfaces de voz: hablando de palabras, el protagonista ahora es el cliente. Hay vida más allá de Siri y los asistentes de Google o Amazon. Como cada vez los clientes vamos a estar más familiarizados con interactuar mediante la voz, los sitios web pueden aprovecharlo para empezar a crear experiencias sin pantalla basadas en la voz.
  • Progressive disclosure. Desplegar el contenido progresivamente, solo a medida que el usuario lo va necesitando, es otra tendencia UX. El mejor ejemplo es el menú de ajustes de nuestros móviles, pero este concepto es aplicable a muchas otras experiencias.

Movimiento

Las animaciones, el movimiento, han llegado para quedarse. Los contenidos estáticos y en los que "no ocurre nada" son garantía de una experiencia pobre y alejada de lo que los consumidores esperamos.

Eso sí, en el conocimiento de las personas que diseñan estas experiencias está la parte más difícil. Las animaciones "porque sí" son también una receta para el fracaso: estas animaciones deben tener un propósito y sentido que las haga útiles además de atractivas.

Las ilustraciones, también animadas, son otra tendencia clara en UX. Cada vez son más frecuentes y utilizadas por ejemplo en páginas de confirmación y error.

Por último, en este apartado no podemos olvidarnos de las experiencias a toda pantalla y del vídeo. Ambos son recursos muy utilizados para maximizar el alcance comunicativo de cualquier mensaje en cualquier tipo de pantalla, pero, una vez más, especialmente en pantallas móviles.

Personalización avanzada

El marketing tiende a la personalización, y las tendencias UX también se ajustan a este patrón. Los avances que permiten la Inteligencia Artificial y el Machine Learning pueden ser aprovechados en el diseño de experiencias de usuario más relevantes.

La Inteligencia Artificial y el Machine Learning ya tienen un efecto creciente en ecommerce, pero lo van a tener en todas las experiencias de usuario, con gran uso por ejemplo del diseño anticipatorio en función del comportamiento previo del usuario.

El diseño emocional, que ayuda a conectar con las emociones de las personas con las que nos estamos comunicando, también forma parte este tendencia a la personalización entendida no solo como customización de contenidos y experiencia en función de intereses, sino de hacer que la comunicación a través de dispositivos sea más humana.

La realidad aumentada es una tendencia que ya ha llegado y cuyo uso se incrementará con el tiempo, ya que contribuye a la personalización al hacer al usuario protagonista.

Capacidades móviles

Como ya hemos mencionado antes en el artículo, los móviles son el dispositivo por excelencia con el que nos relacionamos con otras personas, marcas, etc. Por ello, hacer uso de las capacidades que se están estandarizando en el entorno mobile nos ayudará a crear mejores experiencias.

Es el caso de la funcionalidad Face id, adaptada cada vez más por la banca y otros sectores como forma segura de identificación o de las diversas funcionalidades que existen para pago con el móvil. Estas experiencias, pensadas para móvil, permiten solventar con éxito "momentos de la verdad" importantes y convertirlos en un acto rutinario.

El uso de gestos específicos de los dispositivos móviles o pantallas interactivas también ofrece grandes posibilidades para generar experiencias de usuario potentes. En este caso es importante que el usuario tenga claro en cada punto del proceso los gestos que puede hacer.

Hemos querido condensar en este artículo las principales tendencias UX de 2019, teniendo en cuenta la prevalencia del uso de móviles y la necesidad de ofrecer las mejores experiencias de usuario en un entorno siempre cambiante y exigido.



Cómo combinamos CRO y UX en Smartbrand
Cómo combinamos CRO y UX en Smartbrand

En muchas organizaciones y sectores se habla de poner al cliente en el centro. Pero, ¿qué significa realmente eso? ¿Qué implica? ¿Cómo se pasa del deseo a los hechos? En sb ponemos al cliente en el centro haciendo que las áreas implicadas trabajen juntas, como en el caso de la optimización de conversiones (CRO) y la experiencia de usuario (UX).

Con la UX (experiencia de usuario) nos aseguramos de que el proceso del usuario con una web o app sea fluido, consistente, sin puntos débiles y centrado en los objetivos. La optimización de conversiones (CRO), por su parte, incluye todos los procesos y herramientas que nos ayudan a incrementar el porcentaje de usuarios que lleva a cabo las acciones que queremos que ocurran en ese entorno concreto, web o app: puede ser una compra, dejarnos su email, una descarga, una solicitud de información...

Así, dado que el usuario está en el centro de ambas disciplinas, tiene todo el sentido que trabajen de manera conjunta. Cuando diseñas bien una experiencia, no lo haces únicamente pensando en que esa experiencia sea estéticamente atractiva y sin fricciones, sino también intentando que las acciones que se derivan de esa experiencia sean sencillas para los usuarios; es decir, ya estás intentando maximizar las conversiones, en beneficio tanto de la empresa como del usuario. Por ese motivo, CRO y UX se complementan.

La especialización de los puestos de trabajo actuales hace que la cooperación entre equipos sea determinante para alcanzar buenos resultados. No es suficiente con colaborar, hay que cooperar. Los integrantes de un grupo de música no colaboran, cooperan; no tocan a la vez, tocan juntos. Y eso es lo que deben hacer los equipos de SEM y de SEO, por ejemplo, ya que el cliente vive los resultados de pago y orgánicos en una única experiencia. Lo mismo ocurre con la UX y la CRO: la cooperación entre ambos consigue mejores resultados.

En sb fomentamos esa cooperación, basada en el feedback que ambas disciplinas permiten obtener de los usuarios, como explica Enric Viladoms, UX lead: "Creemos que estos dos perfiles/servicios deben de estar estrechamente vinculados para así poder medir y optimizar la experiencia, teniendo como soporte los datos cuantitativos recogidos en métricas analíticas".

Al plantear la hipótesis de un test A/B, no es lo mismo hacerlo desde el expertise del equipo de CRO (muy valioso, sin duda, pero expuesto inevitablemente a la subjetividad de los integrantes del equipo), que plantear esa hipótesis a partir de feedback obtenido de los usuarios con metodologías de UX. Ese test A/B tiene más opciones de conseguir su objetivo. Jenn González, traffic acquisition specialist, nos da un ejemplo inverso: "En el caso del ecommerce es muy importante la sinergia de los departamentos a la hora de analizar y corregir el funnel de conversión. Detectando dónde se producen más drop off y cómo nos puede ayudar el UX." Efectivamente, sin ese análisis del funnel y los resultados de las pruebas de CRO para mejorar las conversiones en el paso crucial, es difícil plantear mejoras de UX en ese punto tan sensible.

Al final, lo que es significativo es que al centrarnos en el usuario hemos cambiado para siempre la forma en que trabajamos: no vivimos las especializaciones como silos, sino como lo que cada uno de nosotros aporta a la visión de conjunto necesaria para conseguir la mejor experiencia posible para el cliente. Y como tanto UX como CRO son procesos cíclicos, esta es una forma de trabajo que se convierte en continuada, como explica Jenn: "CRO y UX son procesos iterativos, es decir, se repiten y se mantienen en el tiempo. Se tiene que ir continuamente actualizando y midiendo el costumer journey, detectando sus pain points."

Heatmaps: mejor experiencia de usuario y conversiones
Heatmaps: mejor experiencia de usuario y conversiones

Antes de ejecutar tareas propias de la optimización de conversiones, es muy recomendable analizar detenidamente el comportamiento del usuario. En este sentido, es necesario conocer las herramientas que permiten hacer seguimiento de los usuarios en webs o apps, con funcionalidades como los mapas de calor (heatmaps) o la grabación de sesiones. Hotjar es una de esas herramientas, especialmente útil para mejorar experiencias de usuario y optimizar conversiones.

Existen muchas formas de mejorar un diseño o experiencia de usuario; una de ellas, no por obvia menos importante, es preguntarles directamente a los usuarios. Pero esta no debe ser la única, pues es aun mejor completar esas respuestas con otras herramientas, como por ejemplo los heatmaps.

En ocasiones, los usuarios no sabemos qué queremos, o no sabemos explicarlo, o mentimos. Los heatmaps no mienten y tienen un valor muy grande para mejorar experiencias de usuario y conversiones, partiendo de pruebas irrefutables: no se basan en lo que los usuarios dicen, sino en lo que los usuarios hacen.

Un heatmap o mapa de calor es una representación de datos, mostrada como mapa o diagrama de los valores de esos datos en forma de colores. Si te gusta el fútbol, habrás visto en numerosas ocasiones cómo utilizan los heatmaps en televisión para mostrar la zona del campo por la que se mueve un futbolista determinado.

El uso de los heatmaps en sitios web o aplicaciones responde al mismo concepto: se trata de un software que tiene como funcionalidad la de grabar sesiones de usuario, y mostrar luego su comportamiento en forma de colores: ¿dónde ha hecho clic? ¿Ha hecho scroll? ¿Ha hecho clic en el CTA que nos interesa? ¿Tal vez el CTA no se ve en mobile above the fold y no ha llegado a verlo? ¿Estamos perdiendo conversiones? Los especialistas en optimización de conversiones pueden extraer mediante los heatmaps conclusiones muy valiosas para su trabajo.

Un software que dispone de heatmaps que ayudan a mejorar las experiencias de usuario es Hotjar. Pero además de heatmaps, dispone de muchas otras funcionalidades que completan la visión sobre lo que los usuarios quieren y lo que les importa durante su navegación.

Funcionalidades de Hotjar para comprender mejor a los usuarios

  • Heatmaps y grabación de sesiones: los mapas de calor, como hemos explicado previamente, nos ayudan a saber qué interesa a los usuarios. Pero es muy relevante completar esta información con las grabaciones de sesiones, porque ahí no solo vemos dónde han hecho clic, sino que se pone a prueba la usabilidad del sitio al ver todo el proceso del usuario: sus clics y scroll en orden cronológico, así como su navegación por distintas páginas.
  • Funnel de conversión y análisis de formularios: Con esta funcionalidad, propia de herramientas de analítica web, es posible comprobar de un vistazo en qué parte del funnel abandonan los usuarios o en qué punto del formulario desisten de rellenarlo, permitiendo identificar puntos de mejora.
  • Preguntar, preguntar, preguntar: a pesar de que hemos comenzado el artículo reconociendo que preguntar a los usuarios puede no ser la mejor pista para la optimización de conversiones, insistimos en que eso es solo si únicamente se lleva a cabo esa acción, sin complementarla con las otras acciones explicadas. Pero preguntar a los usuarios es siempre interesante, relevante y también un síntoma de buena salud de un negocio. Hotjar dispone de diversos tipos de encuestas configurables para lograr el feedback necesario.

Solo queda combinar este feedback con el resto de funcionalidades para disponer del mejor punto de partida para mejorar la experiencia y optimizar las conversiones.

Formularios para web y app: Auditoría UX (y III)
Formularios para web y app: Auditoría UX (y III)

Los formularios son páginas clave en un sitio web o app. Has conseguido captar tráfico y has logrado que el usuarios se interese por tus productos o servicios, y al llegar a la página del formulario donde se va a producir la suscripción, descarga o compra, no quieres perder la posibilidad de conseguirla.

Mediante los formularios obtenemos la conversión, por ello les dedicamos este tercer y último post de nuestra serie sobre auditoría UX. A pesar de que es obvio que los formularios deberían ser las estrellas del desarrollo de aplicaciones y sitios web, es muy frecuente que este tipo de páginas se hagan engorrosas para el usuario y no apetezca seguir el proceso. Uno de los motivos es que a la hora de crear formularios nos olvidamos de que no son una página más. En realidad, un formulario es como una conversación y tenemos que conseguir que sea fluida para nuestro interlocutor.

Consideraciones generales de los formularios

Para analizar la usabilidad de un formulario se deben tener en cuenta sus componentes principales: estructura, campos a rellenar (y sus etiquetas), botones de acción y feedback.

  • Estructura: básicamente con ella se define la apariencia de la página, así como la ordenación de los distintos campos que el usuario debe rellenar y las conexiones lógicas entre ellos.
  • Campos a rellenar y sus etiquetas: son los propios campos en los que el usuario introduce el dato; las etiquetas de los campos son el nombre que le damos a cada campo.
  • Botones de acción: desencadenan una acción, la principal (si es que hay más de una) es la acción objetivo del formulario.
  • Feedback: Tanto cuando el usuario va rellenando el formulario como cuando pulsa el botón de acción, debemos darle feedback para que entienda en qué momento del proceso se halla y si todo va bien o ha habido algún error.

Características específicas para crear un buen formulario web

  • Ordena los campos de forma lógica (no pidas la dirección antes del nombre, por ejemplo).
  • Solicita únicamente los campos que necesites, pues un exceso de campos echa para atrás al usuario, especialmente cuando se incluyen campos sensibles como el DNI.
  • Busca la consistencia en las etiquetas de los campos a rellenar, importante especialmente si tienes más de un formulario en tu sitio web: evita, por ejemplo, usar "Apellido 1" y "Apellido 2" por un lado y "Primer apellido y "Segundo Apellido" por otro.
  • Utiliza siempre la misma jerarquía tipográfica, para facilitar la comprensión de los campos y no inducir a error. Cuando un campo deba rellenarse con minúsculas, asegúrate de que no acaba apareciendo en mayúsculas, lo que puede llevar al usuario a creer que lo ha introducido mal.
  • Los campos en los que únicamente se introducen números no debería aceptar otro tipo de caracteres. Es importante que el texto del interior de los campos sea útil para el usuario, no debe limitarse a repetir el nombre del campo, sino que es mucho mejor que constituya un ejemplo de cómo debe rellenarse.
  • Los mensajes de error deben mostrarse siempre del mismo modo, y en una ubicación en la que se lean de forma correcta. De hecho, debe quedar muy claro cuándo hay un error y cuándo no: por ejemplo, no añadas avisos o feedback con fondo amarillo si no se trata de un error.
  • El asterisco de obligatoriedad de los campos es un estándar, pero no tenemos que dar por supuesto que el usuario lo sabe: siempre deberá aparecer la explicación. En los casos de formularios en los que solo haya un campo o dos, por ejemplo en los formulario de acceso o cambio de login, podemos omitir el asterisco de obligatoriedad de los campos, ya que el usuario entiende que debe introducir los datos que se le solicitan para ejecutar la acción.

Especificidades de los formularios para móviles

Si los campos de formulario son excesivamente pequeños, el usuario tendrá problemas con su interacción y con la introducción de datos. De la misma forma, es problemático que haya poca distancia entre los campos y las llamadas a la acción, con lo que el usuario se puede equivocar.  

Al ser las pantallas de móvil más pequeñas, hay que tener cuidado con los textos introductorios o explicativos, porque no debe ocurrir que en el primer pantallazo, sin hacer scroll, no se detecte que hay un formulario para seguir el proceso.

Si te ha interesado este post sobre la usabilidad de los formularios para web y apps, no te pierdas los anteriores de la serie de auditoría UX, sobre la navegación y la arquitectura de la información y sobre la orientación a tareas y objetivos.

Orientación a tareas y objetivos: Auditoría UX (II)
Orientación a tareas y objetivos: Auditoría UX (II)

Cualquier negocio que tiene un sitio web lo ha creado para que los usuarios (clientes o no) lleven a cabo tareas y consigan sus objetivos utilizándolo. Puede ser encontrar información, comprar, entretenerse... ¿Cómo nos aseguramos de que nuestro sitio web actúa como facilitador para que los usuarios puedan hacer esas tareas? A veces, por muchos aspectos (diseño, estructura, etc.) puede ser que, en lugar de estar facilitándolo, lo esté dificultando. Una auditoría UX nos ayudará a comprobar si nuestro sitio web sale bien parado en este sentido.

En este segundo post sobre el concepto de auditoría UX vamos a tratar sobre cómo analizar la orientación a tareas y objetivos. Este es un aspecto fundamental de una auditoría de experiencia de usuario.

El sitio web de tu negocio es una herramienta para permitir que el usuario haga determinadas acciones que le reporten un beneficio. Y entre esas acciones está por supuesto la conversión, ya sea compra o registro, pero si te paras a pensar, te darás cuenta de que hay muchas más acciones que es interesante que los usuarios de la web lleven a cabo: descargas de documentos, consulta de información sobre productos o servicios, búsqueda de ayuda, uso del buscador interno…

Entre los aspectos que debes tener en cuenta para analizar la correcta orientación a tareas y objetivos del sitio web destacamos el tratamiento visual, el lenguaje y el tono y la jerarquía y estructura de la página.

Tratamiento visual

Fíjate en los distintos componentes que forman el conjunto de la experiencia de usuario en tu web. ¿Facilitan al usuario entender qué es lo que se espera de él en esa página? Por ejemplo, si todos los componentes tienen un peso jerárquico similar, es difícil entender qué elementos tienen más importancia que otros. Es lo que se llama ruido visual.

¿Es difícil reconocer la información relevante que persuadiría al usuario a la conversión? Eso puede ocurrir cuando un Call to Action (CTA) queda demasiado escondido, pero también cuando hay sobreabundancia de CTA. En ese caso el usuario puede confundirse, o no llevar a a cabo la acción más importante, o en el orden que se espera.

En el apartado de los iconos, es relevante localizar y corregir inconsistencias: es frecuente que existan, y que el usuario se confunda tanto sobre el significado del icono como de su uso, por ejemplo cuando algunos son clicables y otros no.

Un sitio web debe hacer explícitas las acciones que se pueden realizar en él. La ausencia de “reasons why” que induzcan al usuario a realizar la conversión perjudica la consecución de objetivos. Y esto afecta tanto a la parte visual como al lenguaje textual, lo que nos lleva al siguiente punto.

Lenguaje y tono

Como el resto de elementos de la página, el lenguaje y el tono que se utiliza deben ser consistentes. No ayuda ser informal en un apartado y demasiado formal en otros.

Y cuando queremos que el usuario realice una acción o tarea concreta, es conveniente incluirlo en forma de texto también, no solo visualmente.

La predictibilidad es un buen aliado: hay que acostumbrar al usuario a un mismo contexto precisamente para que se pueda centrar sin despistarse en las tareas que quiere llevar a cabo.

Jerarquía y estructura de página

Es recomendable analizar inconsistencias en el uso de títulos y subtítulos, en todo lo relacionado con tamaños, estilos y pesos. Una correcta jerarquía es buena para la imagen del sitio, pero también para ayudar a que el usuario encuentre mejor la información que desea.

Independientemente de las formas que tengas de organizar tu contenido en el sitio web (buscador interno, filtros de atributos, filtros temáticos…), deberías asegurarte de mantener también una estructura de contenidos que se adapte a la imagen mental que tiene el cliente de tus productos o servicios.

La estructura de categorías principal debe responder a esa estructura que facilite la navegación intuitiva, la localización precisa y rápida del tema que se esté buscando.

En definitiva, al hacer una auditoría UX uno de los apartados esenciales es sin duda la orientación a objetivos y tareas. Debemos poder averiguar si los usuarios pueden alcanzar fácilmente los objetivos para los que el sitio está creado.

No te pierdas nuestro post anterior sobre auditoría UX, sobre navegación y arquitectura de la información.

Y contacta con nosotros para hacer una auditoría UX a fondo de tu sitio web que te ayude a mejorar la experiencia de cliente y con ello los resultados de tu negocio.

Mapa de experiencia de usuario: retén a tus clientes
Mapa de experiencia de usuario: retén a tus clientes

Una de las consecuencias del aumento del uso del móvil para estar siempre online es que los puntos de contacto con las empresas aumentan: web, app, teléfono, chat, facebook, instagram... ¿Cómo podemos hacer para mejorar la calidad de esa experiencia, más compleja y fragmentada que hace años? Con un mapa de la experiencia de usuario.

Llevar a cabo un mapa de la experiencia de usuario en relación con tu negocio es una excelente oportunidad para ponerte en la piel de tus clientes: al cliente le da igual si se está relacionando con tu empresa vía web, app, teléfono, chat, experiencia offline, y también es indistinto si llega a uno de estos touchpoints en móvil u ordenador de sobremesa, o si llega vía buscador, un email o tecleando la URL porque ya es cliente. Lo que es importante es que, sea cual sea el touchpoint, le proporcionemos la mejor experiencia. Y efectivamente, no es fácil.

Para conseguir mejorar esa experiencia, una herramienta muy útil, como avanzábamos al principio, es un mapa de experiencia de usuario. Te ayudará a entender y objetivar la experiencia de usuario de una forma global, lo que te permitirá ser coherente en los mensajes y consistente en los distintos touchpoints.

¿En qué consiste un mapa de experiencia de usuario?

Un mapa de experiencia de usuario debe contener al menos los siguientes puntos:

  • El contexto: consiste en un racional que nos sitúe en el punto de vista del cliente. Puede estar hecho en forma de pregunta, para ayudar a comprender en qué posición está el cliente.
  • Inventario de touchpoints: esto es esencial para poder hacer pasar a nuestro usuario por todos los posibles puntos de contacto con nuestro negocio: web, app, atención al cliente, chat, email, Facebook, Instagram...
  • Insights cualitativos: es el objetivo principal del mapa de experiencia de usuario. ¿Resolvemos el problema o necesidad del usuario?
  • Conclusiones: ¿Qué oportunidades de mejora detectamos basadas en el análisis realizado?

A continuación vemos un ejemplo de mapa de experiencia de usuario, de la web uxmastery.com, relacionado con la compra de billetes de tren en la web raileurope.com. En la imagen se muestra parte del inventario de touchpoints y contexto.

Puntos clave del mapa de experiencia de usuario

Es esencial realizar el ejercicio desde el punto de vista del cliente, no de la forma en que nosotros creemos que actuarán, sino como realmente lo harían ellos. Si es preciso, conviene pelotear el ejercicio con usuarios reales, para comprobar si está bien encaminado. Es relevante identificar al usuario o personas clave. Por último, es importante que el ejercicio se haga desde la simplicidad. No se trata de llegar a analizar hasta el más mínimo detalle, sino de identificar puntos críticos y oportunidades de mejora.

Con un mapa de experiencia de usuario  minimizarás las experiencias negativas al identificar pasos críticos y puntos de decisión, te asegurarás de que tienes disponible la información que necesitan los distintos tipos de usuario.

Al entender cómo pasan por cada etapa en su ciclo de vida, mejorarás la retención de clientes, al ofrecerles una comunicación adecuada que les dirija a un punto de decisión positivo.

En Smartbrand ayudamos a las empresas a crear buenas experiencias online y, para ello, nada mejor que analizarte desde la perspectiva de tus clientes. Contacta con nosotros y te ayudamos a crear un mapa de experiencia de usuario para que tu negocio esté más centrado en tus clientes.

Navegación y arquitectura de la información: Auditoría UX (I)
Navegación y arquitectura de la información: Auditoría UX (I)

La navegación y la arquitectura de la información son aspectos esenciales de una auditoría UX. Es fundamental asegurarse de que para estos aspectos cuentas con una web que dé buena experiencia de usuario, tanto para versión escritorio como versión móvil.

Empezamos una serie de posts profundizando en un campo en el que en Smartbrand somos expertos y que es uno de los que más satisfacciones nos da: las auditorías UX. El motivo es que esta disciplina tiene su razón de ser en conseguir la mejor experiencia de usuario, y poner al cliente o usuario en el centro de sus actividades y objetivos es algo que, una vez se consigue, resulta muy beneficioso.

Si necesitas entender qué es una auditoría UX, te recomendamos que leas primero nuestro post sobre este tema. En este y en los siguientes que formarán parte de esta serie nos centraremos en aspectos específicos de la auditoría UX, profundizando más en cada uno de ellos. En este primero trataremos de la navegación y la arquitectura de la información.

Al analizar la navegación y la arquitectura de la información de un sitio web, queremos responder preguntas como estas:

  • ¿Se atiene el diseño y flujo de la navegación a estándares y convenciones?
  • ¿Existe una relación fácilmente identificable entre la página en la que está el usuario y la navegación del sitio?
  • ¿Es la categorización de los productos y servicios la mejor posible para el usuario?

Y para responder estas preguntas, nos podemos fijar en elementos como la cabecera, el pie de la página y el menú. El motivo es que es resulta esencial que estos elementos se distingan muy claramente del resto de contenido de las páginas, porque es a partir de ellos como el usuario entiende el sitio web: tanto en qué punto de la web se encuentra como la comprensión de los distintos temas que puede encontrar en la web y cómo acceder a ellos.

Cabecera de la página

¿Se diferencia la cabecera de la página del resto del contenido? Confundir la cabecera con el contenido central de la página resultará especialmente confuso para los usuarios, ya que al hacer clic no encontrarán lo que están esperando.

Es conveniente una separación gráfica muy clara entre cabecera y contenido principal, que no dé lugar a equívocos y clics intentos de navegación frustrantes.

Menú

Un buen menú es fundamental para una experiencia de usuario perfecta. Y no resulta sencillo encontrar la opción adecuada a cada negocio. Es preciso tener en cuenta muchos aspectos:

- El menú suele estar en la cabecera, y en ella comparten espacio los accesos a las opciones del menú principal (productos y servicios) con elementos transversales como el acceso a la cuenta personal, la cesta de compra o la ayuda. Diferenciar ambos tipos de accesos es importante, para evitar confusiones. Demasiado a menudo ambos conceptos (productos y funcionalidades) conviven en un mismo menú sin diferenciación que ayude a entender de un simple vistazo su diferencia.

- El menú de productos y servicios debe responder al modelo mental que tiene el usuario de los productos y servicios de la web. Tampoco es obvio: ya sea por jerga interna de las organizaciones o por la forma en que se estructuran de forma interna es frecuente hablarle al cliente de los productos según los clasifica la empresa, a veces de forma poco entendible, en lugar de clasificar los productos de la forma como lo hacen los clientes.

- En el caso de un menú jerárquico, como son la mayoría, es preciso definir si la opción principal tiene contenido y es clicable o únicamente existe para contener las opciones secundarias. Y el comportamiento debe ser el mismo en todos los ítems del menú.

- Una vez ha seleccionado el usuario una opción de navegación, esta debe mostrar el estado seleccionado. Esto ayuda a entender en todo momento en qué punto de la web nos encontramos.

Pie de página

En el pie de página los usuarios estamos acostumbrados a encontrar opciones que facilitan entender que se trata del pie de página, como por ejemplo los sellos de compra y confianza online o los enlaces a la política de cookies o política de privacidad. No es buen lugar para incluir información relevante no accesible desde otro punto.

La importancia de la versión móvil

Lo repetimos en muchos posts, sea cual sea el tema que tratemos, porque dado que la mitad de la navegación se produce desde dispositivos móviles resulta imposible dejarlo de lado. Al realizar una auditoría UX es necesario tener en cuenta ambas versiones de un sitio, ya que deben ser versiones distintas porque navegamos distinto con diferentes dispositivos. Y no es solo por el tamaño de la pantalla o porque con el móvil estemos en movimiento, que también; en el caso por ejemplo del menú, no existe la posibilidad de resaltar alguna parte del menú al pasar por encima el dedo, como sí en webs para escritorio con el ratón. Y muchos menús en móvil están por defecto colapsados: ¿sabemos si se hace el mismo uso del menú en uno y otro dispositivo? ¿Debemos incluir las mismas opciones o una versión del menú más ligera en móvil?

Contacta con nosotros si necesitas una auditoría UX de tu sitio web: somos expertos y te haremos las mejores recomendaciones para una mejor navegación en tu sitio web tanto para escritorio como para móvil.

Auditoría UX: el usuario en el centro de la experiencia
Auditoría UX: el usuario en el centro de la experiencia

La experiencia de usuario (User Experience, UX) es afortunadamente una disciplina cada vez más relevante para evaluar un sitio web o aplicación desde el punto de vista que realmente tiene más importancia: el de sus usuarios finales. ¿Cuáles son los aspectos que se deben tener en cuenta para evaluar un sitio web o aplicación desde esa perspectiva? ¿Cómo hacer una auditoría UX completa?

Todavía se hacen demasiados proyectos digitales (sitios web, apps) sin tener la UX en cuenta, pero en un entorno competitivo cualquier ventaja que se pueda conseguir es valorable, y tener una buena definición de la experiencia de usuario es un gran valor añadido, que notarás en muchos conceptos, conversiones incluidas.

Para empezar, una aclaración: cuando hablamos de experiencia de usuario, no queremos decir únicamente usabilidad. La usabilidad analiza la facilidad de uso, mientras que en la experiencia de usuario, además de ese concepto, entran en juego también la propuesta de valor (contenidos), su rendimiento y la satisfacción que el usuario pueda conseguir. La experiencia de usuario tiene un punto de subjetividad, algo que es mejor tomarse como una oportunidad que como un obstáculo.

Auditoría UX: el usuario, en el centro

Al llevar a cabo una auditoría UX, estarás consiguiendo dos objetivos importantes: encontrar funcionalidades o páginas que no son bien valoradas por los usuarios de tu sitio o aplicación e identificar mejoras que ayudarán a que más usuarios cumplan los objetivos de las páginas.

Estos son los puntos más importantes que debes incluir en tu auditoría UX:

- Home Page:
¿Explica el sitio con claridad qué hace la empresa o el producto destacado?
¿Incitan el diseño y la arquitectura del sitio a explorar más contenidos?
¿Hay equilibrio entre la densidad de contenido y el espacio en blanco?

- Orientación a tareas
Cada página de tu sitio web debe tener un objetivo identificable. Las páginas que no lo tengan sobran. Pero que tengas ese objetivo identificado no quiere decir que se esté incitando bien al usuario hacia él. En una página de listado de productos, ese objetivo será conseguir el clic hacia algún producto. En una página de producto, el objetivo será añadir al carro.

- Navegación y arquitectura de la información
¿Se atiene el diseño y flujo de la navegación a estándares y convenciones?
¿Existe una relación fácilmente identificable entre la página en la que está el usuario y la navegación del sitio?

- Formularios
¿Los campos están claramente identificados? ¿Se entienden? ¿Dan pistas al usuario sobre lo que se espera de él que escriba? Especial atención a este punto deben prestar los especialistas en optimización de conversiones, ya que la mejora de los formularios aumentará la tasa de conversión, seguro.

- Confianza y autoridad
¿Está el contenido del sitio bien redactado y sin errores?
¿Los anuncios del sitio se identifican con claridad y tienen aspecto profesional?
¿El contenido está bien escrito o parece redactado con palabras clave para los buscadores?

Realizar una auditoría UX supone poder llegar a conclusiones muy valiosas sobre el funcionamiento de nuestro sitio web o aplicación y su eficacia a la hora de conseguir el objetivo: que los usuarios puedan realizar de forma satisfactoria las tareas que se pueden llevar a cabo.

Los puntos que hemos incluido en esta propuesta de auditoría UX son suficientes para encontrar buenas oportunidades de mejora, pero puedes incluir otros. Si lo haces, hazlo desde la perspectiva de las áreas que no puedes descuidar, de las preguntas que quieres responder:

  • ¿Es tu sitio web o aplicación atractivo?
  • ¿Es fácil familiarizarse con él?
  • ¿Es sencillo resolver las tareas que se pueden llevar a cabo?
  • ¿Los usuarios saben en todo momento dónde están y sienten que tienen el control?

Si necesitas contratar una empresa que destaque en la gestión de proyectos de User Experience, contacta con nosotros; te ayudamos a mejorar la experiencia de usuario en tu web o aplicación.

La gestión de un proyecto de User Experience ideal
La gestión de un proyecto de User Experience ideal

¿Cómo debe ser la gestión de un proyecto UX para que dé resultados? ¿Existe una forma de sistematizarlo en una serie de pasos que garanticen la obtención de resultados? Sí, sigue estos consejos que te damos y conseguirás establecer un proceso para gestionar proyectos de UX de forma eficaz.

Hoy en día ya no se concibe un proyecto web que no tenga en consideración la User Experience. Diseñamos y hacemos desarrollos web para que sean usados por personas, y tener en cuenta las percepciones y efectos de ese uso en las personas desde la fase inicial es parte esencial de un proyecto exitoso. Afortunadamente, la siguiente tira de Dilbert se produce con menor frecuencia ahora que hace unos años.

UX design

Sin embargo, tener en cuenta la experiencia de usuario desde el principio del proceso no garantiza, lamentablemente, un buen resultado final. Son muchas las piedras en el camino, y además es fácil tropezar con ellas en más de una ocasión. Para evitarlo, te contamos en 5 puntos cómo gestionar un proyecto de UX para que dé los resultados que esperas.

1. Gestiona tu proyecto en función del presupuesto que tengas y el alcance del proyecto.

Cada proyecto es un mundo, y darle su importancia no quiere decir que haya que matar moscas a cañonazos. No es lo mismo trabajar la UX de un microsite promocional que la revisión completa de una tienda online. El presupuesto será probablemente distinto y las herramientas utilizadas y procesos a seguir, también.

2. Si haces un proyecto de UX, hazlo bien: ¡no te saltes fases!

Por ejemplo, no te saltes los tests de usuario. Es curioso como, siendo uno de los pasos más importantes, por tiempo o presupuesto en demasiadas ocasiones se omiten. No tiene ningún sentido, sobre todo porque luego pagarás un coste mucho más alto cuando tengas que modificar diseños porque la experiencia de usuario no es todo lo buena que debería y se nota en los resultados.

Otro punto importante es realizar obligatoriamente una conceptualización de alto nivel. Este diseño de la experiencia debe servir de guía, marco y establecer los principios básicos que regirán todo el proyecto, que le darán coherencia. Sin este diseño, es fácil que se produzcan rápidamente desviaciones sobre temas y conceptos teóricamente bien fijados y acordados.

3. Ten un proceso, pero hazlo flexible

Tener un proceso bien marcado no significa que no debas alterarlo cuando todo te indique que así debes hacerlo. Necesitarás flexibilidad en muchas fases del proyecto, por ejemplo para aceptar y accionar resultados de tests de usuario diferentes a los que esperabas. Y además de eso también es importante que, concediendo a los casos de uso la importancia que tienen, no bases todo el proyecto en ellos. Son útiles, pero con frecuencia reflejan más lógicas de negocio que experiencias reales de usuario. Aprovecha su utilidad, pero no seas fundamentalista con ellos.

4. Utiliza las herramientas apropiadas para la gestión del proyecto

Aparte de las propias herramientas de wireframing, prototyping, organización de la información, user testing e investigación necesarias para la ejecución de cualquier proyecto UX, es imprescindible el uso de plataformas de gestión de proyectos como Basecamp y de gestión de feedback visual como TrackDuck. Ambas, usadas apropiadamente convierten el potencial y costoso caos en un real y productivo orden.

5. Haz la vida más fácil a los diseñadores UX, para que se centren en lo que toca

Facilita y promueve que los diseñadores UX se comuniquen entre sí. La falta de comunicación es la madre de muchos "monstruos" del UX mal gestionado. También es importante que no permitas que todo el mundo opine y decida; identifica claramente a los responsables de cada área del proyecto y trata únicamente con ellos los temas que hay que decidir, aunque luego como es lógico la comunicación llegue a todos los integrantes del equipo. Involucrar a todo el mundo en la toma de decisiones es otra forma de ralentizar, cuando no directamente perjudicar, un proyecto de UX.

Por otra parte, no permitas que el gran conocimiento que sin duda tienen los consultores UX más experimentados se convierta en un freno para el proyecto, ya sea en forma de desmoralización de otros integrantes del equipo o por la no adecuación de su trabajo a los inputs que se van produciendo durante el proyecto.

¿Quieres que te ayudemos a poner en marcha un proyecto de UX bien concebido? En Smartbrand somos expertos en UX, compruébalo con nuestros casos de éxito.

¿Web móvil o app móvil?
¿Web móvil o app móvil?

No solo el uso de Internet en el móvil ha aumentado hasta el punto de superar al acceso a internet desde ordenadores de escritorio, sino que además ese uso de internet móvil tiene diversos momentos y posibilidades para los negocios en función de si hablamos de web móvil o app móvil. ¿Es uno mejor que el otro? Y si es así, ¿por qué?

Es la gran pregunta, que cada vez resuena más en departamentos de marketing de multitud de empresas. Una pregunta que tiene años, aunque el auge en el uso de Internet en el móvil para todo: búsqueda, usos sociales, compra... ha hecho que ahora sea urgente tratar de contestarla. El caso es que no es una pregunta de respuesta única, depende del tipo de negocio y del objetivo que tengamos para nuestros usuarios.

Diferencias entre web móvil y app móvil

A continuación analizamos algunas de las diferencias más significativas entre web móvil y app móvil:

- Inmediatez y compatibilidad: la web móvil está accesible de forma instantánea desde multitud de dispositivos, la app hay que descargarla desde un marketplace (una tienda de apps), una barrera significativa. Y requiere versiones distintas para dispositivos diferentes (Android, iOS, Windows).

- Dinamismo en las actualizaciones: como propietario de la web móvil tú decides cuándo aplicas mejoras; en el caso de la app móvil que las mejoras lleguen a los usuarios depende de que se instalen la actualización.

- Visibilidad: la web móvil se encuentra con facilidad en buscadores; las app, de momento, no, a pesar de los avances de Google en la indexación de contenidos de apps de Android.

- Viralidad: piensa en lo fácil que es compartir una web móvil (vía Facebook, email, twitter, etc). Una app simplemente no se puede compartir así.

- Persistencia: un sitio web no puede ser borrado ;) Una app sí puede ser borrada del dispositivo.

- Coste: en principio, es más económico desarrollar un sitio web móvil que una app.

Si repasas el listado anterior, te darás cuenta de que en todos los puntos la web móvil sale vencedora. ¿Quiere esto decir que debes optar por ello y no apostar por una app móvil? Ni mucho menos, tal y como explicamos a continuación.

Cuándo usar web móvil y cuándo usar app móvil

Un factor importante es el tiempo de uso en el móvil: ¿estamos más tiempo utilizando apps para móvil o web móvil? Pues a pesar de que hay discrepancias entre diversos estudios (Comscore apunta a un predominio de las app mientras por ejemplo la IAB dice que el uso de la web móvil está infravalorado en esos datos), lo que parece claro es que las app se usan bastante, y tres son los motivos principales que dan los usuarios:

1. Comodidad y facilidad de uso: le das, y ahí están los contenidos; sin tener que ir a un navegador ni escribir ninguna dirección.

2. Las apps ofrecen una mejor experiencia de usuario. Porque están pensadas para su uso en móvil y a menudo están mejor resueltas que las versiones adaptadas a dispositivos móviles de versiones web de escritorio, y porque pueden incluir funcionalidades que no se pueden replicar en el sitio web móvil (como las ligadas al uso de la cámara de un smartphone, por ejemplo).

3. Es más rápida. A menudo las apps son más rápidas en cargar contenidos que los sitios web móviles.

Es decir, que las apps se usan, y los usuarios explican que ven algunas ventajas sobre las webs móviles. Entonces, ¿qué debe hacer tu negocio? En primer lugar, ten web móvil sí o sí. Si el reciente cambio en el algoritmo de Google premiando los sitios web optimizados para móvil no es suficiente, ten en cuenta además que un sitio web móvil es excelente para conseguir nuevos consumidores, tiene más eficacia en este objetivo que una app; y ¿qué negocio no necesita captación? Una web móvil te permite hacer que potenciales clientes descubran tu marca y también puedes llevar tráfico desde emails. Por tanto un sitio web móvil te va a ser muy útil para conseguir alcance. Y si tu marca no es muy reconocida, la captación es algo que no puedes desdeñar.

Ahora bien, si tu marca es fuerte y puedes ofrecer una experiencia superior con una app, no lo dudes, hazlo. Ofrece una app móvil además de un sitio web móvil. Sí, hay que superar esa barrera del descubrimiento y la descarga, pero la recompensa lo vale: usuarios con más engagement, y además con el valor añadido para tu negocio de las notificaciones. Además, todavía queda mucho por estudiar sobre el uso de web móvil y app móvil por parte de los usuarios, pero parece que hay diferencias según los objetivos que analiza de forma completa las características de web móvil y app móvil. Haz clic en la imagen para leer bien el contenido de la infografía.

mobile-app-website

Fuente: mdgadvertising.com

Si necesitas ayuda para tener un sitio web móvil o una app móvil para dar la mejor experiencia de usuario posible a tus clientes, contacta con nosotros. Somos expertos en hacer que tu negocio aproveche todas las oportunidades que el marketing online ofrece.

Wireframing o prototyping
Wireframing o prototyping

¿Cómo conseguir maximizar las opciones de que nuestro futuro sitio web responda realmente a las necesidades de nuestro negocio y además sea funcional, efectivo y usable? Muchos son los factores que intervienen en lograr el resultado óptimo, pero dos conceptos que ayudan mucho son el wireframing y el prototyping. Frecuentemente confundidos, son distintos y tienen objetivos diferentes, y contar con ambos durante la fase de conceptualización y desarrollo de tu sitio web será beneficioso para conseguir hacer los ajustes, cambios y modificaciones que ayudarán a que cuando tu sitio se publique lo haga en las mejores condiciones posibles para cumplir tus objetivos. Y al hacerlo cuando el sitio está en desarrollo ayuda a minimizar los costes de realizar grandes modificaciones a posteriori.

¿Necesitas un nuevo sitio web? Curioso cómo el paso de los años afecta a los sitios web de la misma forma que a la ropa, a los peinados, a las películas y mil cosas más, ¿verdad? No queremos que nuestra tienda online se vea antigua, poco usable o que pierda efectividad o capacidad de seducción con el paso del tiempo, y para eso debemos repensarla cada cierto tiempo.

En ese proceso de repensar la web hay dos conceptos que es conveniente tener presente porque nos van a evitar muchos quebraderos de cabeza. Hablamos del wireframing y del prototyping, dos conceptos similares pero distintos que contribuyen a que tu nuevo sitio web sea útil y usable. Ambos te serán útiles en el proceso.

Lo primero es lo primero: definamos estos conceptos, ya que (no eres el único) a veces se confunden. Pero no queremos teorizar mucho, así que lo haremos sencillo con una descripción breve: con los wireframes muestras la disposición y organización de los contenidos de una página, con lo que es una herramienta imprescindible a la hora de plasmar una primera idea de estructura y una jerarquización de contenidos. El objetivo de un wireframe es la validación de la arquitectura de la información y poder plantear cambios en un estado prematuro cuando aún tienen bajo coste.

Así, un buen wireframe mostrará, entre otros, y sin necesidad de incluir diseño ni tipografías:

  • Posición del logo
  • Campos de búsqueda
  • Breadcrumbs
  • Headers
  • Menús de navegación
  • Cajas de organización de contenido por tipos
  • Botones sociales y de contacto
  • Footer

Como ves, un  montón de información en forma de cajas que facilita enormemente a quien los tenga en sus manos comprender de manera muy visual cuál es la propuesta de organización del sitio web.

El prototyping, clave para valorar la experiencia de uso

Los wireframes te dan una idea muy clara de cuán útil y valiosa puede ser tu web. ¿En qué se diferencia el prototyping? Con el prototyping consigues un prototipo funcional, lo cual indica que puede ser probado, por lo tanto ya entra en juego la experiencia de usuario.

Es esa diferencia sustancial entre wireframing y prototyping la que hace que este último sea especialmente aconsejado para tiendas online en general, y para las partes más transaccionales en concreto. Cuanta más interacción con el usuario tenga un sitio web (incluyendo cajas de diálogo, pero no solamente), más necesario se hace el prototyping sin perjuicio del wireframing.

¿En qué otros aspectos (además del diálogo con el sistema durante una transacción o registro) es valioso el prototyping? Por ejemplo, en menús que utilicen la función "on mouse over" para mostrarse o contraerse, menús desplegables, sliders...

Por tanto, ambos conceptos, wireframing y prototyping te aportan perspectivas distintas pero valiosas cuando necesitas replantear un sitio web.

Usa ambos en función de lo que necesites; y aunque siempre se puede llegar a darle al wireframing un toque de experiencia de uso (con el paper prototyping, el que con diferentes papeles simulas las diversas funcionalidades), pero disponer de un prototipo realmente funcional de tu sitio web te será posiblemente más valioso, para hacer tests de usabilidad, por ejemplo.

Si quieres más información sobre cómo concebimos en Smartbrand el diseño y desarrollo web, la innovación en Internet y cómo tenemos un enfoque 360º para que tu negocio maximice el ROI en su apuesta online, no te pierdas lo que dicen nuestros clientes, o contacta y te contamos.

+30
expertos digitales
+15
años de experiencia
+200
clientes satisfechos

Todo el WOW de Social Media,en 5 minutos.

Únete a miles de profesionales que ya reciben nuestra newsletter cada mes.
No te quedes fuera.

¡Listo para despegar! 🚀 Gracias por unirte al universo Smartbrand. Prepárate para recibir ideas brillantes, estrategias estelares y las últimas novedades directamente en tu bandeja de entrada.
¡Uy! Algo ha fallado al enviar el formulario.

Qué recibirás

El contenido del mes, 100% Smartbrand.
TOP 3 de tendencias Social Media.
Un recurso gratuito para que sigas creciendo.
Nuestra selección de digital trends.
¡Listo para despegar! 🚀 Gracias por unirte al universo Smartbrand. Prepárate para recibir ideas brillantes, estrategias estelares y las últimas novedades directamente en tu bandeja de entrada.
¡Uy! Algo ha fallado al enviar el formulario.