UX (user experience): qué es y cómo aplicarla para un diseño web por todo lo alto
Al ser humano, por norma general, le gusta la organización. Un armario o una despensa ordenada, por ejemplo, nos ayuda a encontrar rápidamente lo que buscamos, ahorrar tiempo y ser más rápidos y productivos, algo que también nos genera satisfacción. Extrapolado al diseño web, para que una web esté ordenada, sea intuitiva y ayude al usuario a encontrar lo que necesita existe la UX (user experience) o experiencia de usuario, en español.
¿Qué es UX (user experience)?
Existen múltiples definiciones sobre este concepto. Con todo, de forma genérica y sencilla, podríamos decir que la experiencia de usuario son las sensaciones que percibe una persona mientras navega por una página web o la forma de interactuar con un producto o servicio.
Evidentemente, el objetivo de todas las marcas es lograr que sus webs sean fáciles de usar y útiles para el usuario.
Esta visión la resume muy bien Don Norman, pionero del diseño emocional, con la siguiente frase:
“Para una experiencia de usuario ejemplar se deben satisfacer las necesidades exactas del cliente, sin complicaciones ni molestias”
Por todo ello, podríamos decir que una buena experiencia UX…
- Incrementa y mejora la satisfacción y lealtad del cliente.
- Es empática, tiene como meta resolver problemas y evitar obstáculos para que el proceso de navegación sea placentero para el usuario.
- Crea una experiencia relevante y con significado.
Si una página web no consigue alcanzar estos objetivos y, por ejemplo, es lenta o el usuario no experimenta una navegación fácil e intuitiva, se marchará en menos que canta un gallo, provocando así una alta tasa de abandono o dificultando las ventas.
¿Cómo lograr una buena experiencia de usuario?
Ahora que ya sabemos lo importante que es ofrecer una buena experiencia de usuario para facilitar la navegación e impulsar las ventas y fidelizar al cliente,… llega la hora de hacerse la pregunta del millón: ¿cómo lograr una buena UX?
Ya lo hemos mencionado antes…
Con mucho conocimiento y empatía, por supuesto.
¡No! No nos hemos vuelto mentores o coach, simplemente, aplicamos la lógica. Cuando hablamos de una web empática, hablamos de una página que aplique el Diseño Centrado en el Humano, es decir, diseñar una web conociendo y teniendo en cuenta las necesidades del usuario, lo que le frustra, lo que le motiva…
Eso sí, no todo es ser empático.
También es importante que el diseño web esté alineado con los objetivos del negocio y no se olvide de los aspectos técnicos como, por ejemplo, el posicionamiento SEO. De hecho, el diseño contribuye a mejorar la conversión más allá de una buena estrategia de posicionamiento web.
Por ello, a menudo, lograr una buena experiencia de usuario requiere un equilibrio entre el diseño UX, el diseño UI, la usabilidad, las necesidades del cliente, los objetivos y recursos de la marca, etc.
Diseño web: el equilibro entre UX, UI y usabilidad
Como decíamos, en la creación de la experiencia de usuario y el desarrollo web hay que tener en cuenta tres aspectos fundamentales: el diseño UX, el diseño UI y la usabilidad. Profundicemos un poco más en ellos.
Diseño UX
Se puede definir como todas aquellas acciones enfocadas en la optimización de un producto o web para solucionar las necesidades del cliente de forma amigable y disfrutable. La experiencia de usuario va más allá de solo una experiencia digital; se debe pensar como un todo que trasciende lo digital y empatiza con el usuario, con su entorno y su forma de ver las cosas.
La experiencia de usuario debe darle al usuario organización, satisfacción y disfrute para que luego eso se convierta en lealtad. Veamos al UX como una forma holística de entender al usuario.
Diseño UI (User Interface)
Conocido en español como interfaz del usuario, tiene el objetivo de crear un ambiente para guiar la experiencia del usuario, logrando que interactúe de forma fácil y efectiva con una página web.
¿Cómo? Pues usando todas las herramientas que ofrece el diseño web. El diseñador UI tendrá en cuenta, entre otros muchos aspectos, las imágenes que usar en la web, la tipografía, los colores… Todo con el fin de crear un espacio atractivo y muy visual.
Sin duda, con una buena interfaz de usuario, estaremos más cerca de una buena experiencia de usuario; aunque, insistimos, de nada sirve una página muy bonita si no satisface las necesidades del usuario o no es capaz de entender cómo funciona ni interactuar con ella. Por eso nunca hay que olvidarse del diseño UX ni de la usabilidad.
Usabilidad
Es una clara manifestación de una buena experiencia de usuario. Se puede definir como la facilidad de aprender a usar, la eficiencia de uso hasta el punto de que navegar por una web resulte atractivo y satisfactorio.
Vamos a ver todo lo mencionado con un ejemplo de un negocio local en Marbella. Se trata de Calasanz Peluqueros.
Visualmente, es decir, fijándonos en el diseño UI, sin duda es una web atractiva. Utiliza una gama de colores que combina blanco, aportando sencillez y neutralidad, con tonos verdes y marrones, que los podemos asociar a la naturaleza, la calma, la tranquilidad…
Además, la primera imagen es una mujer con un bonito pelo y sonriendo. Incluso, la web nos da los buenos días (este mensaje cambia según la hora del día, si la visitamos por la noche, aparecerá un mensaje de buenas noches).
Respecto a la usabilidad, el menú superior se ha categorizado en base a dos aspectos clave: tratamientos y soluciones, enfocado en aquellas personas que ya saben lo que quieren y aquellas que buscan poner remedio a un problema. Además, el menú es accesible y fácil de entender, ya que tan solo con el nombre podemos saber qué encontrar.
Por último, la web ofrece conexión directa con WhatsApp para resolver dudas, tiene una velocidad de carga correcta y está optimizada para móviles.
Por todo lo comentado, podemos decir que la web de Calasanz Peluqueros ofrece una buena experiencia de usuario porque es una web atractiva visualmente, es sencillo encontrar información o comprar y es fácil de usar tanto en escritorio como en móvil o tablet.
En resumen, este trío de amigos trabajan juntos en el desarrollo web para lograr un diseño ideal para la marca y el consumidor. Así, mientras UX se encarga de que la página web o app sea útil para el usuario, UI se centra en que sea visual y atractiva y la usabilidad hace que la interacción con la web y la navegación sea fácil y simple.
Pero, ¿cómo combinar UX, UI y usabilidad? Félix, del equipo de Diseño en Nubeseo, recomienda: “La mejor forma para poder lograr la sinergia entre estas tres herramientas es escuchar”.
Primero, volvamos a las bases, al construir una web, y aunque suene obvio, algunas necesitarán centrarse más en la usabilidad, porque son páginas que deben cumplir un objetivo claro de obtención de información o porque van dirigidas a un público que necesita más y mejor guía dentro de la web. En otras ocasiones, debemos centrarnos en el desarrollo de la experiencia porque es un producto o servicio que decide intencionalmente que la web sea un experiencia diferente para el usuario, destacarse por sus efectos, recorrido visual, distribución del contenido, entre otros elementos de diseño e interacción que hace que lo que vive el usuario sea el centro de la navegación.
Ahora bien, recordemos la pregunta, ¿cómo puedo combinar US, UI y usabilidad? Cuando hablamos de escuchar, nos referimos a ser conscientes de que, cuando la web esté en funcionamiento, debemos escuchar al usuario y responder a su forma de interactuar con la web y aunque hayamos seguido todos los pasos previos de investigación, pruebas, etc., Son los usuarios quienes nos van a mostrar el camino para poder hacer que nuestra web se enfoque más en UX o UI, que finalmente se centre más en ellos.
“La mejor forma para poder lograr la sinergia entre estas tres herramientas es escuchar”.
Félix Urnaga
Lo anterior no quiere decir que una web en la que tiende a predominar la experiencia no deba tener UI, todo lo contrario. Ambas funcionan como una sola forma de interpretar la usabilidad que se le da a la web y que una no puede funcionar sin la otra. Una web con un diseño de experiencia excepcional, si no tiene buenos gráficos no funcionará porque no será atractiva o no transmitirá el mensaje que se quiere y así en el sentido contrario, una web con gran ambiente y diseño que sea difícil de utilizar, no funcionará.
Finalmente, citamos otra vez a Dan Norman, Norman Nielsen Group: “Para una experiencia de usuario ejemplar se deben satisfacer las necesidades exactas del cliente, sin complicaciones ni molestias. Luego viene la simplicidad y la elegancia que producen productos que son un placer de poseer, un placer de usar”.
Herramientas para el diseño web
Si has llegado hasta aquí es porque te interesa el diseño web o quieres crear una web con una increíble experiencia de usuario. Los aspectos clave para lograrlo ya los hemos comentado, pero llega el momento de hablar sobre algunas herramientas para el diseño web, especialmente enfocado en el diseño UI.
Para seleccionarlas, hemos consultado con nuestros compañeros de diseño web en Nubeseo y estas son las más recomendadas:
Sketch
Este editor de gráficos vectoriales es una herramienta que forma parte del día a día de los diseñadores que crean experiencias digitales UX/UI. Sketch es profesional, eficiente y fácil de usar para trabajar en tus diseños e interfaces.
Adobe
Con los programas y aplicaciones de Creative Cloud es posible trabajar cualquier aspecto de UI y UX para crear experiencias de usuario inolvidables. Bocetos, interacciones, prototipos, vista previa del resultado, animaciones… con una buena investigación del usuario y la marca, un diseñador y Adobe puedes hacer todo lo que te imagines.
Figma
Figma es un programa para diseñar proyectos e interfaces directamente en el navegador (también existe una versión de escritorio para Mac y Windows).
Se trata de uno de los proyectos colaborativos más bien valorados por los diseñadores gracias a todo el abanico de herramientas vectoriales que ofrece para ilustrar, la creación de prototipos o el hand-off para generar y traspasar código.
Como ves, son herramientas que te servirán para diseñar una interfaz atractiva, pero existen muchísimas otras que te ayudarán con otras fases en el proceso de desarrollo y diseño web.
Para analizar la experiencia de usuario, por ejemplo, existen softwares como Woopra, Keen, Clicky o, incluso, Google Analytics. Se trata de herramientas que te permiten obtener datos sobre segmentos, embudos, comportamiento del usuario, etc para hacer un análisis de la visita e interacción del usuario con la web y ver qué funciona y en qué puedes mejorar.
¿Conoces alguna otra herramienta que crees que debería estar en la lista?
Por cierto, si quieres saber más sobre experiencia de usuario, pásate por el capítulo 7 del Desván del Marketing con Félix Urnaga, quien nos habló sobre este concepto y su importancia, además de enseñarnos algunas webs con mucha autoridad en su diseño.