Mejorar UX en Estados Vacíos

Los estados vacíos no tienen por qué estar vacíos. Las “pantallas vacías” forman parte de los productos digitales, todas esas situaciones en las que el usuario no dispone de información que consultar se deben de plantear y diseñar buscando ofrecer alternativas de valor a los usuarios.

¿Qué son los estados vacíos?

Los estados vacíos son aquellas pantallas de la interfaz de usuario que aparecen cuando no se puede o no hay contenido que mostrar en la pantalla.

En UX contemplamos los estados vacíos como una oportunidad para ofrecer una experiencia de usuario cuidada y memorable.

Ante una pantalla vacía hay un lienzo completo con el que sorprender al usuario.

¿Cuándo puede aparecer un estado vacío?

Podemos encontrarnos pantallas vacías en multitud de ocasiones. Por suerte, no es una constante habitual que nos encontremos pantallas con estados vacíos en cada paso de la navegación, pero eso es por que seguramente el diseñador/a de turno se ha planteado que mostrar ante un estado vacío para ofrecer una mejor experiencia de usuario.

Los estados vacíos que más abundan se encuentran en:

  • Resultados de búsqueda en una página web que no puede encontrar lo que busca
  • Carros y cestas de pago vacías.
  • Carpetas vacías en aplicaciones de almacenamiento de archivos.
  • Errores 404.
  • No hay mensajes nuevos en una aplicación de mensajería.
  • Bandejas de entrada de correo electrónico vacías.
  • En el acceso inicial de un usuario a una aplicación(Onborading).

En un sistema de diseño completo se debe contemplar un apartado en el que se indique cuando puede darse un estado vacío y como se debe abordar. Buenos ejemplos los encontramos en Carbon el sistema de diseño de IBM y en Material design.

¿Cómo mejorar los empty states?

Los estados vacíos deben indicar que sucede, pero hay maneras de ofrecer más información y plantear alternativas al usuario.

Para mejorar un empty state en un producto digital o aplicación podemos realizar las siguientes acciones que beneficiarán a su experiencia final.

Empatiza con tus usuarios

Para los usuarios encontrase ante un estado vacío puede ser muy frustrante.

Comprender que pueden encontrarse en esa situación e indicarles con texto e imágenes descriptivas lo que debería haber en esa pantalla o que sucede hará que se sientan menos perdidos.

Dile a tus usuarios que hagan algo

Ofrecer al usuario una acción a realizar facilitará la interacción con el sistema, además reducirá la carga cognitiva ante tal situación de vacío.

Una llamada a la acción (CTA) puede ser una solución ideal para que el usuario tome acción, empiece a usar el producto y salga de ese estado vacío en el que se encontraba.

Añade personalidad a tu estado vacío

Si el producto tiene una estética bien definida estas pantallas pueden ser una oportunidad de destacar esa estética. Utilizar un tono de voz concreto y utilizar imágenes cuidadas transmitirá personalidad y trabajo al producto.

Educa al usuario

Un estado vacío puede ser una oportunidad de mostrar y enseñar como funcionan algunas partes de la aplicación o del producto.

Además de educar este tipo de soluciones ayudan al usuario a comprender mejor el funcionamiento generando que tengan una mejor experiencia de navegación y uso la próxima vez que accedan.

Muestra contenido de inicio

En ocasiones en las que es la primera vez que accede un usuario a un sistema, mostrarle contenido de inicio con el que pueda interactuar le ayudará a interactuar y probar las funciones que se le ofrecen.

Este tipo de soluciones según Material Design son muy útiles cuando existe contenido como notas, libros, música… con el que los usuarios puedan interactuar de manera inmediata.

Mejorar UX diseñando estados vacíos

La esencia de los pequeños detalles es la que marca ese ¡Wow! de los usuarios al usar un producto bien pensado y cuidado.

Para conseguir que los usuarios y visitantes de tus productos sientan que han pensado en ellos, diseña posibles estados vacíos en los que les indiques por que se encuentran ahí, y que alternativas les ofreces.

Piensa que un estado vacío es una oportunidad de generar interacción por parte del usuario, ya que no hay nada más con lo que interactuar salvo con lo que le pongas frente a ellos, y esa es la oportunidad perfecta para generar una experiencia de usuario memorable.

Recibe todas las semanas contenido de calidad sobre Diseño UX y UI en tu mail👇🏼👇🏼

Sigue leyendo...

  • Atajos de teclado en Figma

    Si eres diseñador digital y trabajas en el mundo de producto digital…. fijo que conoces y utilizas Figma. Como en…
  • Regla 60 30 10

    En el momento de diseñar, ya sea para interfaces de usuario o publicaciones en redes sociales, existe un momento crucial:…
  • Qué es el No Code

    El No Code, también conocido como desarrollo Sin Código, se refiere a un movimiento y un conjunto de herramientas y…