Cuando no hay contenido que mostrar en un producto digital, entonces nos encontraremos con una pantalla de estado vacío. Ante esta situación hay que explicar por qué se ha llegado a esta pantalla y ofrecer alternativas de navegación. Un estado vacío debería mostrar lo que el usuario debe hacer para seguir explorando el producto e invitarle a la acción.
¿Cuándo se muestra un estado vacío?
Cuando no hay datos o información que mostrar se ofrece una pantalla de estado vacío. Aunque no es habitual que esto suceda, es fundamental cuidar este punto de la experiencia de usuario para proporcionar al usuario guía y alternativas para resolver esta situación. En Carbon, el sistema de diseño de IBM, definen tres casos en los que puede aparecer una pantalla de estado vacío:
Estados vacíos para nuevos usuarios
En este caso, el estado vacío puede ser usado como parte del proceso de onboarding o iniciación para nuevos usuarios. En la pantalla de estado vacío podemos mostrar una guía o un tour de usuario, una llamada a la acción para comenzar a usar el producto o contenido de ejemplo, que muestre al usuario cómo puede usarlo y sus beneficios.
Cuidar cómo le ayudamos para comenzar a usar el producto y descubrir sus beneficios nos facilitará retener al usuario y convertirlo en un usuario recurrente.
Estados vacíos en casos de error
También puede ocurrir que un error en la aplicación o en la conexión lleve a la persona a una pantalla sin contenido. En este caso, el estado vacío se puede aprovechar para mostrar al usuario un mensaje de error, en el que deberemos comunicarle:
- Qué es lo que ha fallado, sin entrar en detalles técnicos.
- Posibles soluciones al error.
- Una acción alternativa.
Estados vacíos en respuesta a una acción
En este caso, la pantalla de estado vacío tiene lugar como consecuencia de una acción del usuario. Por ejemplo, cuando una búsqueda no devuelve ningún resultado o cuando se completa un proceso o tarea.
Igual que en el caso de los mensajes de error, el objetivo del mensaje en una pantalla de estado vacío es orientar al usuario y guiarlo para poder evitar que caiga en un callejón sin salida. Por ejemplo, en el caso de una búsqueda sin resultados, podemos sugerir eliminar algún filtro o incluir sugerencias de contenido.
Otra situación puede ser que el usuario configure una serie de alertas o notificaciones, y que se encuentre al final del proceso con que no hay nada que mostrar. De ser así, además de informarle de que no hay alertas, podríamos mostrar opciones como ver todas las alertas, ver notificaciones ya leídas o volver al proceso de configuración de alertas o notificaciones.
Mejores prácticas para una página de estados vacíos
Adapta el tono al contexto
Lo primero que tenemos que tener en cuenta a la hora de diseñar el contenido de un estado vacío es cuándo lo va a encontrar el usuario. Empatizar con él y valorar el contexto nos permitirá adaptar el tono del contenido de la pantalla de estado vacío para guiarlo de manera más efectiva.
En el caso de un usuario nuevo, que se encuentra sin contenido propio al abrir por primera vez una aplicación, podemos guiarlo a realizar su primera acción con un tono positivo e inspirador. En cambio, una persona que se encuentre con un mensaje de error, o con una búsqueda sin resultados, se sentirá seguramente frustrada o incómoda. Por lo que el tono del mensaje es esta página debería ser discreto para aliviar esa frustración con explicaciones claras y sugerencias útiles.
En cualquier caso, siempre buscaremos dos objetivos:
- Ser informativo, con lenguaje claro y preciso que ayude al usuario a entender por qué está viendo esta pantalla.
- Mostrar acciones alternativas que permitan al usuario dar un paso para superar este estado vacío.
Añade personalidad a tu estado vacío
Además del tono del texto y del mensaje, también se puede añadir personalidad a través de una imagen o ilustración. En este caso hemos de asegurarnos de que:
- La imagen respeta los parámetros de marca.
- Está en concordancia con el tono del mensaje.
Evita estados completamente vacíos
Material Design, el sistema de diseño de Google, recomienda evitar pantallas con estados completamente vacíos, en las que no se muestra nada más que el mensaje que hemos diseñado.
Para ello podemos incluir contenido inicial, educacional o aproximado.
Contenido inicial es aquel que permite explorar y descubrir las posibilidades de una aplicación desde el primer minuto. Lo mejor es personalizar este contenido, por ejemplo, partiendo de opciones seleccionadas durante el proceso de onboarding. Si no es posible, se ha de usar contenido que demuestre la funcionalidad de la aplicación y que pueda atraer a una mayoría de usuarios. En todo caso, este contenido inicial se debe de poder eliminar.
Otra opción es ofrecer contenido educacional que enseñe al usuario cómo usar esta funcionalidad, como guías o tutoriales. Lo mejor es que sea lo más breve posible, y que los usuarios que quieran puedan saltárselo fácilmente.
El contenido aproximado se puede ofrecer, por ejemplo, como respuesta a una búsqueda que no devuelve resultados, como segunda mejor opción. Puede que el usuario haya escrito mal su búsqueda o esté incompleta. Pero se ha de señalizar o resaltar de alguna manera que se trata de contenido aproximado, para que el usuario sea consciente de que no es un resultado exacto a su búsqueda.
Una oportunidad de generar interacción
Cada pantalla de estado vacío es una oportunidad para informar y guiar al usuario para que interactúe y saque beneficio de un producto digital. El objetivo de una página de estado vacío es explicar al usuario por qué ha llegado a esta situación y qué puede hacer para remediarlo. Lo ideal es que los usuarios vean un estado vacío de manera poco frecuente y el mínimo tiempo posible. Y es por eso que es importante diseñar estas pantallas con mimo, atendiendo al contexto y a las necesidades del usuario en ese momento.
