La experiencia de usuario, o UX, es un elemento clave para el éxito de un producto. Con el actual consumo aplicaciones web y móviles a través de todo tipo de dispositivos, el proceso de experiencia de usuario ya no es una fase optativa dentro del desarrollo, sino que resulta fundamental para que tu proyecto sea competitivo.
Pero ¿qué es exactamente la experiencia de usuario? ¿qué procesos son necesarios para obtener un buen resultado? En este post os explicaremos qué es la UX, las fases a tener en cuenta y los beneficios que tiene sobre un proyecto.
¿Qué es la experiencia de usuario?
La UX es importante en un producto digital pero ¿qué es exactamente?. Si bien el diseño de interfaz puede llegar a entenderse por sí mismo, la experiencia de usuario es un poco más compleja o, más que compleja, abstracta.
Pues bien, la experiencia de usuario o UX es, en esencia, la percepción positiva o negativa que un usuario tiene de un servicio, producto, dispositivo o de un sistema.
En el anterior ejemplo podemos imaginar qué sensación nos daría elegir una ciudad en ese selector. El componente en sí es funcional, podemos elegir una ciudad dentro del listado, pero la experiencia al hacerlo es incómoda e ineficiente. Pues esa sensación, esa percepción, es parte de la experiencia de usuario.
Esta experiencia que siente el usuario no solo depende de los elementos del diseño, o UI, elementos como pueden ser los colores, los iconos, las ilustraciones o la tipografía, sino que dependen de muchos otros aspectos. La UI es solo el pico del iceberg, la parte visual de todos los procesos que giran entorno al diseño basado en la experiencia de usuario.
¿Cuáles son las etapas del proceso de diseño de UX?
Todas estas variables vienen recogidas en el siguiente esquema de Jesse James Garret sobre «Los elementos de la Experiencia de Usuario (UX)».
Este esquema ha servido de base para muchas metodologías que trabajan con la UX en entornos digitales y engloba numerosas disciplinas que se merecerían por sí mismas su propio post, pero intentaremos resumirlas.
En la imagen podemos ver el desglose de cinco planos por los que todo proyecto debería de pasar. Pese a esto, cada producto tiene sus necesidades y en base a eso deberán adaptarse las metodologías a cada caso: no todos los productos requieren del mismo patrón y en función de esto podremos acortar unas fases, o alargar otras.
En líneas generales nos centraremos en los conceptos de las capas de la imagen, que podemos ver en el siguiente esquema mucho más resumido:
El esquema se leería de abajo a arriba y va de conceptos más abstractos a conceptos más “concretos o tangibles”. Así que, allá vamos:
1. Estrategia
¿Qué necesita el usuario? ¿Cuál es el objetivo del sitio?
Sin duda estas serían las preguntas claves para abordar la estrategia. Nunca deberemos perder estas dos cuestiones a lo largo del desarrollo del proyecto ya que estas son, en esencia, lo más importante: los usuarios y el objetivo de nuestro negocio.
Habiendo contestado estas dos preguntas la clave de este asunto a partir de ahora será cubrir las necesidades del usuario al mismo tiempo que se cubren los objetivos del sitio (vender, dar información, crear comunidades, etc).
2. Alcance
Una vez definido el target y el porqué de nuestro sitio sería necesario especificar más sobre el contenido o las funcionalidades que tendrá nuestro producto.
El alcance se determina conociendo las especificaciones funcionales del sistema a través de un registro detallado de las características y operaciones que necesitará nuestro producto para cubrir las necesidades del usuario.
Además de las funcionalidades del sistema también necesitamos determinar los requerimientos del lado de la información detallando el contenido que queremos que tenga nuestro producto.
En ambos casos el alcance depende enteramente del plano de estrategia. A la hora de crear estas funcionalidades y requerimientos tendremos que crear un balance entre los objetivos del sitio y las necesidades del usuario: potenciando nuestro modelo de negocio pero siempre teniendo en cuenta que debemos aportar valor al usuario.
3. Estructura
Los dos procesos claves una vez tenemos todos los contenidos y las funcionalidades del producto serían: el diseño de la interacción y la arquitectura de la información. Si estos dos conceptos te han sonado a chino, tranquilo, vamos por partes.
Ahora que ya tenemos las funcionalidades del producto y el listado con el contenido lo que necesitamos es desarrollar el flujo de la interacción (entre las pantallas o entre el contenido, por ejemplo) definiendo como el usuario interactuará con las funcionalidades y el contenido.
Por último, en esta fase también tendremos que crear un diseño estructural del espacio de información para mejorar la usabilidad y el acceso al contenido. Es decir, necesitamos pensar en la arquitectura de la información, en cómo será la presentación de los componentes dentro del espacio, teniendo en cuenta: la estructura, el contenido y la nomenclatura utilizada que llevará al usuario a un acceso cómodo e intuitivo de la información.
En este plano utilizaremos recursos para organizar el listado de posibles pantallas y contenido integrándolo con la interacción del usuario. Para ello podremos recurrir a diferentes esquemas como: flujos de navegación, BluePrints, mapas de arquitectura, diagramas de contenido, diagramas de flujo o mapas de navegación.
4. Esqueleto
Definidos ya los contenidos e interacción general de nuestro producto, ahora es el momento de comenzar con el diseño: de información, de interfaz y de navegación.
A la hora de comenzar con los diseños tendremos que poner el foco en la forma de presentar la información, de manera que se facilite la compresión para el usuario (diseño de información). También en la forma de presentar los elementos de la interfaz (diseño de interfaz) para que la interacción del usuario con la funcionalidad sea cómoda y, por último, la forma en la que estos elementos de la interfaz se utilizan en la navegación a través de las pantallas (diseño de navegación).
Para llevar a cabo esta organización visual del contenido gráfico e información trabajamos con bocetos con o sin contenido, wireframes o mockups de baja y alta fidelidad. Con este tipo de herramientas lo que buscamos es crear el ‘dibujo’ que luego pintaremos.
5. Superficie
Llegamos al último plano del esquema: ahora es el momento de aportar un diseño visual al producto.
En esta fase se establece lo que conocemos como el «look & feel» de un producto creando los elementos visuales que nos dan la sensación de que el producto está terminado.
Aquí trabajaremos creando el estilo visual a través de las tipografías, colores, imágenes, ilustraciones, gráficos o componentes de navegación, todo en base a los estándares y los principios de diseño.
En este punto cabe destacar el uso de sistemas de diseño como Material Design (Google) o Apple Design System.
Proceso iterativo y efecto dominó
El proceso de diseño es un proceso iterativo y, en este caso, no va a ser menos. Para responder a las evoluciones en las necesidades de los usuarios es necesario realizar este proceso de forma cíclica para conceptualizar, probar, analizar y corregir, en caso de que sea necesario. Un cambio en uno de los planos de los que hemos estado hablando provoca un efecto dominó en el resto.
Para poner un ejemplo, imaginaos que hemos pensado en ampliar nuestro modelo de negocio a un mayor número de usuarios (ampliando el target). Esto produce un cambio en la estrategia del proyecto, parte en la que definimos el target del producto. Este cambio nos obligará a revisar todos los planos superiores del proceso UX.
Imaginémonos en el ejemplo: tenemos un producto orientado a usuarios de entre 30 y 50 años, pero queremos ampliar el target a usuarios más adultos, de entre 50 y 65. Este cambio de la estrategia (paso 1, donde definimos las necesidades del usuario y el objetivo del producto) podría provocar un efecto dominó en el alcance (paso 2, donde definimos las funcionalidades) ya que las funcionalidades que pueden aportar valor al target de 30-50 puede que no lo hagan para el target 50-65.
A su vez también podría implicar cambios en la estructura (paso 3, donde definimos la organización del contenido) ya que el tipo de consumo que tienen los usuarios más adultos no es el mismo que los de 30-50 años, quizás tendríamos que reorganizar alguna sección para facilitar el acceso a las funcionalidades al target de 50-65.
El cambio de estructura, para facilitar la navegación, implicaría a su vez cambio en el esqueleto (paso 4), quizás sería necesario reestructurar algunas secciones para hacerlas más sencillas y que fueran accesibles para todos los usuarios. Por último, la superficie (paso 5), quizás nuestro estilo es demasiado juvenil y los nuevos usuarios no confiarán en nuestro producto, deberemos entonces revisar el diseño visual para hacerlo más neutro, por ejemplo.
Para que sirve la experiencia de usuario
Prestar atención a la experiencia de usuario resulta fundamental para no perder el foco de porqué y para quién hacemos las cosas.
Una experiencia de usuario satisfactoria aportará resultados de fidelización al producto (el usuario volverá a comprar nuestro producto o volverá a utilizar nuestra app) aportando también algo de valor al usuario ya que en definitiva, es por ellos por lo que muchos de nuestros productos tienen sentido.
