Estados vacíos: el aspecto más pasado por alto de UX

Aunque son importantes para la experiencia del usuario, los estados vacíos a menudo se pasan por alto. Saber qué son y cómo usarlos, y aplicar las mejores prácticas de UX, puede generar beneficios sustanciales.

¿Qué es un estado vacío?

Los diseñadores de UX tienen muchas oportunidades para crear experiencias placenteras y significativas. Una de esas oportunidades que a menudo se pasa por alto es el "estado vacío" o la pantalla vacía. Los estados vacíos son momentos en la experiencia de un usuario con un producto en los que no hay nada que mostrar.

Aquí hay algunos ejemplos de situaciones comunes de estado vacío:

• Una nueva pantalla de Dropbox donde no se han creado archivos ni carpetas.
• La pantalla resultante después de completar todas las tareas en un administrador de listas de tareas pendientes.
• Aparece una pantalla de error en Slack cuando no se admite un comando.
• Comenzando una nueva cuenta de red social y no hay conexiones.
• Buscando algo en Gmail y sin obtener resultados.

Estos momentos intermedios brindan oportunidades para mejorar la experiencia del usuario y, en consecuencia, amplificar las oportunidades comerciales. Para los diseñadores de UX, aprovechar cada oportunidad para mejorar la experiencia del usuario y agregar más valor al negocio es algo bueno.

Un estado vacío útil le permitirá al usuario saber qué sucede, por qué sucede y qué hacer al respecto. Aquí hay dos ejemplos de buenos diseños de UX de estado vacío:

Aquí hay algunos ejemplos de diseños de estado vacío con oportunidades perdidas:

Tipos de estados vacíos

Aquí hay cuatro tipos de estados vacíos que se encuentran con frecuencia:

• Primer uso : ocurre con un nuevo producto o servicio cuando todavía no hay nada que mostrar, como una nueva cuenta de Evernote o Dropbox.
• Borrado por el usuario : ocurre cuando los usuarios completan acciones, como borrar su bandeja de entrada o su lista de tareas, y el resultado es una pantalla vacía.
• Errores : ocurren cuando algo sale mal o cuando hay problemas, como que un teléfono móvil se desconecte debido a problemas de red.
• Sin resultados/Sin datos : ocurre cuando no hay nada que mostrar. Esto puede suceder si alguien realiza una búsqueda y la consulta está vacía o no hay datos disponibles para mostrar (al filtrar por un rango de fechas que no tiene datos, por ejemplo).

A medida que el diseño de estado vacío recibe más atención, los diseñadores de UX descubren que utilizarlos tiene resultados beneficiosos, tanto desde la perspectiva empresarial como desde la experiencia del usuario.

Los usuarios prueban muchas aplicaciones, pero deciden cuáles quieren 'dejar de usar' en los primeros 3 a 7 días. Para las aplicaciones "decentes", la mayoría de los usuarios retenidos durante 7 días permanecen mucho más tiempo. La clave del éxito es lograr que los usuarios se enganchen durante ese primer período crítico de 3 a 7 días. – Ankit Jain

Los beneficios de usar estados vacíos bien diseñados

El diseño de pantallas de estado vacío bien pensadas y útiles puede ayudar a impulsar la participación del producto, deleitar a los usuarios y reducir la rotación. Esto disminuye las posibilidades de perder usuarios por los productos de la competencia, dejándolos así frustrados o perdidos.

En su libro, What Customers Really Want , Scott McKain establece seis principios rectores de una gran experiencia del cliente.

Él escribe que los clientes quieren:

1. Una experiencia convincente
2. Un enfoque personal
3. Lealtad recíproca
4. Diferenciación
5. Coordinación
6. Innovación

Cuando se aplican al diseño de estado vacío, estos principios pueden ser de gran beneficio para una empresa, por ejemplo, un aumento en la satisfacción del producto y la reducción de las tasas de abandono.

Aquí hay tres áreas adicionales que también pueden beneficiarse de un buen diseño de estado vacío:

• Incorporación de usuarios : brinda la oportunidad de generar confianza y un uso continuo del producto, además de una experiencia de usuario mejorada.
• Creación de marca : genera conciencia y promueve la empresa para generar un mayor valor de marca.
• Personalización : puede ser juguetón, divertido, serio o dinámico en varios estados de uso; crea una sensación de un toque personal.

Los beneficios de estados vacíos bien diseñados no pueden subestimarse. No solo contribuyen a una experiencia convincente para el cliente, sino que, a medida que las ventanas de oportunidad para mantener a los clientes felices y comprometidos se acortan cada vez más, son simplemente un buen negocio.

Shunned: Las pantallas olvidadas del diseño UX

Dado que hay resultados positivos aparentes en los estados vacíos bien diseñados, ¿por qué se ignoran en primer lugar?

Primero, hay muy pocas situaciones de estado vacío que ocurren en comparación con la cantidad total de pantallas en una aplicación, producto o sitio web, por lo que a menudo se descuidan porque no se consideran una prioridad y los diseñadores tienden a centrar sus esfuerzos en las partes más visibles de un diseño.

En segundo lugar, con solo un 2-5% estimado de usuarios viendo un estado vacío, no siempre es un uso económico o práctico del tiempo de un diseñador.

Por último, los estados vacíos no siempre se entendieron bien en términos de dónde ocurren y qué hacen con ellos, por lo que pasaron a un segundo plano a favor de las pantallas y páginas más populares.

¿Qué sucede cuando se ignoran los estados vacíos?

Las pantallas en blanco sin orientación pueden generar confusión, incertidumbre y decepción. Esto puede resultar en mayores tasas de abandono y una menor satisfacción general con el producto.

Afortunadamente, las cosas están comenzando a cambiar a medida que los beneficios y las oportunidades de diseñar buenas pantallas de estado vacío se convierten en una parte más importante y de alta prioridad del proceso de diseño de UX.

Cómo llenar una pantalla vacía con un propósito

Estas son algunas de las mejores prácticas de UX para asegurarse de que las pantallas vacías estén diseñadas para ser útiles, útiles e informativas.

Empatía. Agregar sorpresa y deleite , emoción y personalidad son todas las formas en que los diseñadores de UX han creado mejores experiencias incluso en los rincones más oscuros de un producto. Para pantallas vacías, los mensajes empáticos agregan variedad y crean una experiencia personalizada más atractiva.

Imágenes. Hay un principio de diseño llamado efecto biofilia. Este es un estado de estrés reducido y concentración mejorada que resulta de las vistas de la naturaleza. Agregar algunas imágenes escénicas (el fondo de una pantalla de error de estado vacía, por ejemplo) puede resultar en una experiencia de usuario más placentera.

Orientación útil. Según el tipo de producto, se pueden utilizar estados vacíos para guiar al usuario. Un buen ejemplo de esto es una aplicación de gestión de proyectos. Con una nueva cuenta, aún no hay proyectos en juego, lo que ofrece una gran oportunidad potencial para ayudar al usuario a comenzar rápidamente, reduciendo así la posibilidad de abandono. Aquí hay un ejemplo:

Contenido de inicio. Hay muchas pantallas que permanecen en blanco el tiempo suficiente para que el usuario se sienta frustrado y se vaya. Para ciertos productos, proporcionar un buen contenido inicial les ayuda a visualizar lo que está sucediendo y lo que pueden hacer a continuación.

Aquí hay un ejemplo de una pantalla de estado vacía con contenido inicial:

Proporcionar un paso de acción. Con algunos productos, no necesitamos brindar orientación o llenar la pantalla con ningún contenido porque no tendría ningún sentido. En estos casos, los diseñadores podrían simplemente proporcionar un paso de acción.

Sin embargo, es mejor mantener las acciones al mínimo. La Ley de Hick establece que “el tiempo que lleva tomar una decisión aumenta con el número y la complejidad de las opciones”. Por lo tanto, es probable que los usuarios actúen más rápido cuando las llamadas a la acción se limitan a una o dos como máximo. Aquí hay un gran ejemplo:

Otro buen ejemplo es Instagram. Cuando las personas son nuevas en la plataforma, todavía no siguen a nadie (y nadie los sigue). Sería fácil concentrarse en todas las excelentes funciones de Instagram, pero una buena pantalla de estado vacía, por ejemplo, podría darles la opción de "agregar personas para seguir".

Prácticas recomendadas de UX de estado vacío: desde el campo

Toptal tiene talento independiente global de primer nivel en todas las áreas del diseño. Esto es lo que un par de diseñadores de UX de Toptal dijeron sobre sus experiencias en el diseño de pantallas de estado vacías.

Diseñadora Toptal: Tamara Olson

Disciplina de diseño: Diseño UX

¿Cuáles son algunos buenos diseños de estado vacío en los que ha trabajado o ha visto?

Los buenos diseños modernos de estado vacío que he observado son típicamente dos partes de instrucción, una parte de placer. Si una interfaz de usuario está vacía, es trabajo del diseñador de UX ayudar a los usuarios a comprender qué irá en el espacio cuando se llene. Si es trabajo del usuario completarlo, el mensaje debe incluir instrucciones sobre cómo hacerlo. (Por ejemplo, una tabla vacía de "Clases" en un producto de edtech podría incluir una copia que informe a los maestros cómo crear su primera clase).

También estoy viendo que muchas aplicaciones utilizan los generosos bienes raíces de los estados vacíos como una oportunidad para inyectar algo de placer y personalidad de marca lúdica. Se podría decir que es la versión de la aplicación web de la página 404 de un sitio web.

¿Alguna vez ha pasado por alto los estados vacíos y, de ser así, por qué?

Por supuesto, es una trampa fácil. Cuando somos visionarios, imaginamos aplicaciones y productos cuando están en pleno vuelo, repletos de contenido y usuarios. Cuando trabajé en Google, un vicepresidente de producto comentó que los productos son como vuelos de avión; la mayoría de los problemas ocurren durante los despegues y aterrizajes.

Cuando un usuario ingresa por primera vez a su producto, los estados vacíos son inevitables, y no queremos que lleguen a callejones sin salida incluso antes de comenzar. Animo a los diseñadores junior a diseñar un conjunto separado de diseños lineales que muestren el flujo de incorporación del usuario.

¿Ha visto el éxito de los clientes con el uso de estados vacíos? Si es así, ¿de qué manera?

Recientemente trabajé con el Mes Nacional de la Escritura de Novelas en el rediseño de su plataforma, que permite a los usuarios establecer y realizar un seguimiento de los objetivos en torno a su progreso en la escritura. Nuestro equipo de productos se divirtió mucho con los estados vacíos; fue una manera maravillosa de presentar y probar la funcionalidad y personalidad de la plataforma, e inspirar a los usuarios a comenzar a registrar su progreso.

¿Cuál es el uso más exitoso de un estado vacío que has experimentado?

Como un "inboxer cero", estoy constantemente encantado con la ilustración de la bandeja de entrada vacía de la aplicación Gmail: una persona debajo de un paraguas, leyendo un libro bajo el sol, con el título "¡Ya terminaste!" Técnicamente rompe la regla que mencioné sobre los estados vacíos que necesitan un llamado a la acción y, sin embargo, no es así, porque el CTA subliminal es "Sal de tu correo electrónico y disfruta de tu vida". me encanta eso

Diseñador Toptal: Michael Clingerman

Disciplina de diseño: Diseño de productos SaaS

Si ha diseñado para estados vacíos, ¿qué tipos ve con más frecuencia?

Los estados vacíos con los que estoy más familiarizado son los estados 404/error y los estados borrados por el usuario.

¿Ha visto el éxito de los clientes con el uso de estados vacíos? Si es así, ¿de qué manera?

Si. He visto casos en los que las pantallas de estado vacías se convirtieron en parte de una estrategia de comunicación y contenido atractiva y agradable. Hay otros casos en los que los clientes los han utilizado para construir la personalidad de su marca.

¿Cuál es el uso más exitoso de un estado vacío que has experimentado?

Siempre me ha encantado el uso que hace Dropbox de estilos ilustrativos simples y monocromáticos para establecer la personalidad, el tono y el carácter de la marca corporativa.

Conclusión

Es fácil pasar por alto estados vacíos (o pantallas vacías) en el diseño de UX porque ocurren con poca frecuencia y no siempre se entienden bien. Sin embargo, los beneficios de su inclusión se subestiman porque mejoran la experiencia del usuario y ayudan a crear un producto más cohesivo.

• • •

Más lecturas en el blog de diseño de Toptal

• Mejores prácticas de diseño de interfaz de usuario y errores comunes
• Diseño de UX móvil: mejores prácticas, restricciones y trabajo con desarrolladores
• Principios heurísticos para interfaces móviles
• Influencia con el diseño: una guía sobre el color y las emociones
• Los principios del diseño y su importancia