Cómo diseñar páginas de estado vacío para sitios web y aplicaciones móviles

Las páginas de estado vacías son elementos de diseño menos conocidos con un papel importante en la experiencia del usuario. En su forma más simple, los estados vacíos son diseños de página vistos cuando un usuario visita por primera vez una página donde no hay contenido disponible.

Esto puede incluir aplicaciones móviles, redes sociales o incluso categorías de blogs vacíos. El propósito es entregar una página vacía que parece una página no vacía. Los visitantes deben Reconocer la falta de contenido como un medio de contenido inminente..

Me gustaría cubrir cómo funcionan las páginas de estado vacías y por qué son tan importantes. Los diseñadores de interfaces deben considerar estos puntos e intentar aplicarlos a estados vacíos cuando sea apropiado. Pero para empezar, examinemos cómo funciona un estado vacío y cómo proporciona valor a la interfaz..

El valor de los estados vacíos

La belleza de un gran diseño de estado vacío está en la simplicidad. Las páginas vacías explican lo que debería estar en la página una vez hay algo de contenido. Puede ser pasivo como una bandeja de entrada vacía, o puede estar esperando activamente al usuario como un feed de Twitter vacío..

Las páginas en blanco son aburridas, aburridas, e incluso confusas. Estados vacios proporcionar orientación para ayudar a los usuarios a entender lo que están viendo. Aunque es una página en blanco, el contexto adicional ayuda..

Los estados vacíos también dan un sentido de “frescura” Con nuevas cuentas que no tienen datos existentes..

Esta prueba realizada por Redditor Bambo_Ocha verificó 20 aplicaciones diferentes en busca de diseños en estado vacío. Se produjeron varios estilos de diseño con los botones de CTA, datos de muestra e incluso breves tutoriales tutoriales.

Las aplicaciones que prosperan en una base de usuarios deben diseñar estados vacíos que fomentar la actividad del usuario. Esta actividad podría ser publicar contenido, agregar amigos, cargar fotos o cualquier otra aplicación para la que se haya creado. La siguiente pantalla de Tookapic es un gran ejemplo..

Pero las páginas de estado vacío todavía tienen valor incluso cuando no se necesita ninguna acción. Estos diseños están hechos principalmente para proporcionar información.

La información estática es igual de valiosa y no es inherentemente mala tener un estado vacío. Por ejemplo, el diseño de esta página no muestra métricas actuales de un panel de control de la aplicación. El usuario puede querer agregar algunas métricas, pero no está mal dejar el guión vacío.

Los diseños estáticos similares pueden funcionar muy bien para archivos de blog vacíos o carpetas de mensajes vacías. Es perfectamente aceptable no tener mensajes para mostrar. Pero la página tampoco debería estar completamente vacía sin contexto..

Elementos vitales de la página

El elemento más importante en una página de estado vacío es contexto. Esto puede venir en forma de gráficos, texto, o ambos. Desea informar a los usuarios por qué la página está vacía y qué tipo de datos podrían estar allí (correos electrónicos, tweets, perfiles de amigos, etc.).

Y mientras que el texto es el principal medio de comunicación en la web, no puede pasar por alto el valor de los gráficos e íconos..

DigitalOcean tiene un panel brillante con gráficos de estado vacío que ilustran su punto claramente. Su empresa utiliza marcas creativas y tipografía limpia, por lo que no es de extrañar que sus páginas en estado vacío sean tan ilustrativas..

Otro aspecto crucial del diseño de estado vacío es el botón de llamada a la acción. Esto normalmente se diseña como un botón, aunque los hipervínculos también funcionan bien.

El objetivo es ayudar a los usuarios a tomar medidas y aclarar su estado vacío. Ya sea que esto requiera agregar datos o tomar medidas en el sitio, las CTA guían a los usuarios hacia el siguiente paso necesario para aclarar el estado vacío.

Dropbox tiene un gran diseño con dos botones de CTA. Cada vez que un usuario de Dropbox no tiene carpetas, puede crear una nueva carpeta o agregar una carpeta de muestra a la página.

Fomentar la actividad del usuario

Los botones de llamada a la acción son los elementos activos, pero recuerde que la copia de la página explica que esta haciendo el usuario. Nadie hace clic en los botones sin saber por qué..

La mejor manera de fomentar la actividad es escribir una gran copia en su página de estado vacío. Guíe a los usuarios a través de un flujo de contenido que fomente la actividad del usuario en toda la aplicación.

Este estado vacío de ModSpot es un ejemplo brillante de diseño de calidad y contenido alentador..

Los iconos se utilizan para demostrar lo que el usuario debe agregar al sitio. Una flecha apunta al botón que los usuarios deben hacer clic junto con algún texto que fomente el comportamiento. Este es un brillante diseño de estado vacío con todos los elementos que esperas.

De manera similar, el estado vacío de Gumroad ofrece dos opciones dirigidas a diferentes acciones potenciales. Los usuarios pueden agregar un producto digital o un producto físico para comenzar a vender.

Otros enlaces en la página llevan a guías de ayuda y detalles de contacto. Todo está increíblemente simplificado y se une muy bien.

Aplicaciones web vs. aplicaciones móviles

Las páginas de estado vacías para todos los medios deben seguir tendencias de diseño similares. Pero hay algunas diferencias menores con la experiencia del usuario en una computadora de escritorio en comparación con un teléfono inteligente.

Sitios web en pantallas más grandes tener más espacio para botones extra. Las páginas web también pueden tener elementos de navegación más grandes lo que puede atraer a otras personas al sitio.

Esto se puede resolver de forma similar a como lo hace Nusii en su página de propuestas. Donde no hay propuestas el usuario es guiado a la “añadir propuestas” botón en la barra de navegación superior.

Las aplicaciones móviles pueden tener problemas similares, pero las pantallas son mucho más pequeñas. Esto lo hace Es mucho más fácil atraer a los usuarios directamente a la acción..

Me parece que es mejor mantener las aplicaciones móviles más simples con menos opciones. Use elementos visuales como golosinas para animar la acción y apunte hacia un flujo de usuario muy específico.

Ejemplos de diseño de estado vacío

Quizás la mejor manera de aprender sobre el diseño de estado vacío es estudiar algunos ejemplos. La brillante galería web emptystat.es cura las páginas de estado vacío de varios sitios web a aplicaciones móviles.

He seleccionado algunos ejemplos que merecen la atención que mejor ilustra el diseño de estado vacío. Si tiene alguna otra sugerencia, no dude en hacérnoslo saber..

IP flotantes de DigitalOcean