Qué son los empty states y cómo diseñarlos

PedroP Moreno
Aug 23, 2017 · 7 min read

Llamamos empty states a las páginas de una web o app que todavía no tienen contenido. También son conocidos como zero pages o blank slates.

Lo normal -tristemente normal- es no empezar diseñando una app por aquí. Habitualmente diseñamos páginas llenas de contenido, con imágenes, textos y todo tipo de interacciones y elementos gráficos. Pero todo eso no es lo que va a encontrar un usuario la primera vez que acceda a la app.

Cuándo usar un empty state

Los principales momentos en los que el usuario va a encontrarse con pantallas vacías son:

  1. El primer uso de la app.
  2. Cuando el usuario borre el contenido.
  3. Cuando se produzca algún error.
  4. En buscadores: cuando no se encuentran resultados.

Primer uso de la app

Las primeras impresiones son muy importantes. Al conocer a una persona, por ejemplo, el primer contacto nos da muchas pistas para entender qué podemos esperar de esa persona en el futuro. Lo mismo sucede con las apps. Compararemos esa primera impresión con nuestros modelos mentales y nos formaremos una opinión temprana. Opinión que luego no resultará fácil cambiar.

Un estudio reciente que recopilaba y analizaba las tasas de retención de aplicaciones en más de 125 millones de teléfonos móviles reveló que:

  1. El 77% de los usuarios activos de una app se pierde dentro de los tres primeros días de la instalación.
  2. En el plazo de 30 días ese porcentaje sube hasta el 80%.

Y es que cuando uno descarga una app probablemente sepa qué tipo de aplicación está descargando. Lo que seguramente no sepa es cómo funciona. Ese primer momento en el que la app está desierta, sin contenido ni datos, puede ocasionar la pérdida del usuario; o puede, por el contrario, generar una experiencia que atraiga, retenga y ofrezca una muy buena primera imagen de la app.

Una pantalla vacía bien diseñada es una oportunidad perfecta para acompañar al recién llegado y además mostrarle los primeros rasgos de la personalidad de la app.

Cuando el usuario borra contenido de la app

Pensemos en un usuario que consigue el tan ansiado reto Inbox Zero y un día vacía por completo la bandeja de entrada de su correo electrónico. ¿Sería conveniente dejar sin más la pantalla vacía?

: Antigua bandeja de entrada en iOS… Afortunadamente, ha ido cambiando :-)

¿O sería mejor, por ejemplo, algo así?

Bandeja de entrada de Gmail

Este segundo ejemplo no está ayudando al usuario a entender qué tiene que hacer ahora, pero al menos habla de Google. Demuestra la personalidad de la app. Empieza a transformar la app en algo que despierta emociones. Y eso, sin duda, transforma la relación entre el usuario y la app.

El ejemplo de WhatsApp es bastante menos emocional, pero resuelve muy bien la parte funcional. Si dejas vacía tu pantalla de chats, un mensaje te ayudará a entender cómo puedes crear una nueva conversación.

WhatsApp para Android

Iremos viendo más adelante que el mejor resultado lo obtendremos cuando seamos capaces de mezclar un poco de todo:

  1. Indicar al usuario dónde está y por qué está ante una pantalla vacía.
  2. Mostrar al usuario qué puede hacer para generar contenido.
  3. Mostrar rasgos de la personalidad de la app que generen emociones en el usuario.

Cuando se produzca algún error

Muchas veces los usuarios tendrán que lidiar con un empty state como resultado de algún error. El ejemplo que primero me viene a la cabeza es el mensaje de error que se produce cuando no hay conexión a Internet.

Puedes resolverlo con un mensaje de error 404, vocabulario tecnológico y mucha palabrería que pocos leerán (y casi ninguno comprenderá)…

Mensaje de error que usaba Chrome hace un tiempo…

…o puedes decir al usuario que no pasa nada. Y decírselo, además, de una forma que entienda…

Mensaje de error de Safari en versiones antiguas de iOS

En ambos casos se podría haber dirigido al usuario al área de Ajustes o Configuración. Allí se podría comprobar si los datos están activados, si hay alguna red wi-fi disponible. De esto se dieron cuenta los diseñadores de Apple y Google y es precisamente lo que hacen ahora.

Spotify, por ejemplo, ha dado un pasito más allá, y propone al usuario que utilice alguna de las funcionalidades offline de la aplicación.

Spotify propone el uso de funcionalidades offline

En buscadores: cuando no se encuentran resultados

Cuando diseñemos experiencias de búsqueda, tenemos que tener en cuenta algunas cosas:

  1. Prevención: intentemos evitar que el usuario cometa un error.
  2. Recuperación: cuando el error se haya producido, ayudemos al usuario a corregir el error.
  3. Alternativas: tratemos de convertir el error en una oportunidad.

Como estamos hablando de empty states, vamos a centrarnos en la recuperación y en las alternativas.

Si el error ya se ha producido:

  • Comprueba si el texto está bien escrito o sugiérele al usuario que lo haga.
  • Sugiere al usuario que busque otras palabras o frases más cortas.
  • Propón al usuario que busque algo menos específico.
  • Enséñale otras áreas de tu web en las que quizá pueda encontrar lo que busca.

Es muy importante usar lenguaje claro y amigable. Por encima de todo, es fundamental que no achaquemos el error al usuario. Es siempre error de la app no poder encontrar resultados que ayuden a nuestro visitante. Así que lo mejor es pedir disculpas e intentar remediarlo de alguna forma.

Si con todo esto aún no podemos ofrecer al usuario el resultado que anda buscando, ofrezcamos algo similar. Para prevenir que abandone la app tras una búsqueda fallida, es siempre muy útil ofrecer resultados de algo parecido.

Ejemplo de página vacía en el buscador de johnlewis.com

Al menos estaremos creando la oportunidad de captar la atención del usuario. Puede que incluso le ayudemos a encontrar algo que no hubiese buscado de otro modo.

Netflix, por ejemplo, te sugiere títulos parecidos cuando buscas algo que no forma parte de su catálogo.

Sugerencias del buscador de Netflix

Hay quien también aprovecha este tipo de situaciones para añadir un botón de Contacto.

Wayfair propone ayuda a través de un botón de Contacto.

Cómo diseñar los empty states

Una pantalla vacía bien diseñada conseguirá tres grandes objetivos:

  1. Educar y ayudar al usuario.
  2. Enamorar al usuario.
  3. Empujar al usuario a llevar a cabo una acción.

Educar y ayudar al usuario

El primer objetivo de un empty state es decir al usuario cómo se usa la app. Es importante explicar al usuario en qué parte de la aplicación se encuentra y cuál es el contenido que normalmente encontraría en ese apartado o sección de la app.

Enamorar al usuario

Como hablábamos más arriba, una buena primera impresión es fundamental. Y no tiene que ver únicamente con la usabilidad, sino también con la personalidad de la app.

Si un empty state es diferente a los demás, el usuario entenderá que toda tu experiencia de servicio / producto es diferente.

Una de las metas de las pantallas vacías debe ser tornar todo ese vacío en una sorpresa agradable. Una app debe ser funcional y usable. Sus usuarios deben tener la certeza de que pueden confiar en ella. Pero también tienen que disfrutar usándola.

  • Introduce los elementos de tu marca, diferenciándote de los demás de forma inteligente.
  • Demuestra sentido del humor. Entretén a tus usuarios. Genera sensaciones positivas y sorprende.
  • Enseña el lado más humano de tu producto.

Empujar al usuario a llevar a cabo una acción

Es una buena práctica pensar en las páginas empty state como si fueran una landing page en miniatura: diseño minimalista, explicar los aspectos básicos de la funcionalidad e invitar al usuario a hacer algo.

  • Motiva al usuario: utiliza un lenguaje y un diseño movilizador.
  • Persuade al usuario: recuérdale los beneficios de usar tu producto.
  • Dirige a tu usuario: recomiéndale y enséñale el mejor camino para empezar a usar la app. Pon a la vista un botón de llamada a la acción (o una flecha que apunte hacia un botón) para guiar al usuario.

En resumen…

Los empty state son tan importantes como cualquier otro elemento de diseño. Invierte tiempo y dedicación en el diseño de todos los edge cases de tu app, siempre con la motivación de ayudar al usuario.

Haz que tu app sea una delicia de usar también en estos momentos críticos y consigue que conecte con las emociones de las personas que interactúan con ella. Que todos entiendan y sientan los beneficios de quedarse desde el principio.

Mantén la sencillez visual. Usa textos concisos e iconos o ilustraciones claras. Añadiendo llamadas a la acción motivadoras y que aporten valor, habrás llenado de sentido una gran página empty state.

En esta página encontrarás muchos ejemplos: http://emptystat.es

)

PedroP Moreno

Written by

Apenas duermo. Escucho música, leo y trasteo por Internet.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade