Saltar al contenido principal

Estado vacío

Descripción general​

Un estado vacío es un elemento de diseño que aparece cuando un área específica carece de datos o contenido. Sirve para comunicar el estado actual, guiar a los usuarios sobre acciones posteriores y mantener una buena experiencia de usuario, incluso en ausencia de la información prevista. Esta situación se presenta típicamente en los siguientes contextos:

  • Uso inicial
  • Después de una eliminación o finalización
  • Al no haber resultados de búsqueda
  • Errores o problemas

Cuándo se debe utilizar​

Utilice un estado vacío en una de las siguientes situaciones:

  • Uso inicial: Cuando un usuario accede a una función o página por primera vez y aún no existen datos ni contenido generado por el usuario.
    Ejemplo: “Aún no ha creado ninguna tarea. Para comenzar, seleccione Agregar tarea”.

  • Después de una eliminación o finalización: Después de que un usuario haya eliminado todos los elementos de una lista o haya completado todas las tareas.
    Ejemplo: “Su bandeja de entrada está vacía. Buen trabajo. Está al día”.

  • No hay resultados de búsqueda: Cuando una consulta de búsqueda no devuelve resultados.
    Ejemplo: “No se encontraron resultados para el 'entorno PB34'. Pruebe diferentes palabras clave o revise la ortografía”.

  • Errores o problemas: Cuando los datos no se cargan debido a errores, problemas de red o restricciones de acceso.
    Ejemplo: “404 página no encontrada. Lo sentimos, no encontramos esa página. Es posible que el enlace esté roto o que la página haya sido eliminada”.

Cuándo no se debe utilizar​

  • Retrasos temporales en la carga: Durante breves tiempos de carga, cuando se prevé que el contenido aparezca pronto. Un cargador o una barra de progreso es más apropiado.

  • Falta prevista de datos o contenido: Cuando los usuarios son conscientes de que los datos no aparecerán hasta que realicen ciertas acciones (por ejemplo, antes de realizar cualquier búsqueda).

Anatomía​

Anatomía de un estado vacío para una página

Anatomía de un estado vacío para una sección

El patrón de estado vacío consta de los siguientes elementos:

  1. Imagen o indicación visual (obligatoria en la mayoría de los casos): Una representación visual que ayuda al usuario a procesar el mensaje de estado vacío.
  2. Encabezado (obligatorio): Comunica el estado actual o el propósito del espacio vacío, a fin de orientar a los usuarios y establecer expectativas. El estado de página vacía completa incluye un encabezado H2 en color de texto 1 [#28333F], mientras que el estado de sección vacía presenta un encabezado H3 o H4.
  3. Descripción (opcional): Guía a los usuarios para salir del estado vacío, ya que proporciona contexto y los próximos pasos. La descripción utiliza un estilo de párrafo regular (cuerpo 1) en color de texto 1 [#28333F].
  4. Acciones (opcional): Ofrezca a los usuarios una vía directa para salir del estado vacío. Por lo general, hay un solo botón de acción, pero el patrón de estado vacío de Jutro de adapta a acciones adicionales, si fuera necesario.

Estos elementos están alineados al centro con respecto a su contenedor principal.

Pautas generales​

Indicación visual​

  • Como regla general, utilice una ilustración de la biblioteca Spot Illustrations o un ícono de la biblioteca de Jutro.
  • Si no puede encontrar una ilustración adecuada para su caso de uso en la biblioteca Spot Illustrations, considere crear una usted mismo siguiendo las pautas para ilustraciones sin fondos y ofrézcala a la biblioteca para ayudar a que crezca.
  • Elija el tamaño de imagen adecuado para su caso de uso específico. Tenga en cuenta estas pautas:
    • Página completa: Use la variante XLarge de la ilustración sin fondo o un ícono cuyo cuadro delimitador no sea mayor de 80 x 80 px (cuando el ícono es tan grande, quizás convenga incluirlo como imagen en el código).
    • Sección: Utilice la variante mediana o más pequeña de la ilustración sin fondo o un ícono cuyo rectángulo delimitador no supere los 40 x 40 px.

Encabezado​

Hay casos de uso en los que el tamaño del encabezado debe ser diferente. En tales casos, la regla general es usar un nivel de encabezado menor que el utilizado para esa sección.

Ejemplo: Un encabezado de cajón utiliza H2. Podemos establecer sin problemas el encabezado de estado vacío en H3.

Acciones​

Omita las acciones nativas de estado vacío si ya existen acciones en el componente donde reside el estado vacío (por ejemplo, tablas y cajones). En este caso, dirija al usuario al elemento de la interfaz de usuario para que sepa dónde están los elementos y cómo realizará las tareas en el futuro.

Contenido​

Pautas generales de redacción​

  • En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
  • Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
  • Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
  • Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
  • Las palabras y las oraciones deben ser breves.

Encabezado​

  • El encabezado debe ser corto.
  • Use un lenguaje simple y directo para explicar por qué el estado es vacío.
  • No use el encabezado para explicar los detalles del caso específico del estado vacío.

Descripción​

Utilice la descripción para proporcionar más detalles sobre el caso específico del estado vacío y orientar al usuario sobre qué hacer a continuación.

Redacción para diferentes situaciones de estado vacío​

Respete las siguientes prácticas recomendadas al redactar para diferentes situaciones de estado vacío:

Uso inicial​

  • Indique claramente qué estará disponible cuando se agreguen los datos.
  • Explique las próximas acciones que los usuarios pueden realizar para llenar el espacio. También puede informar por qué el espacio está vacío y los beneficios de cumplir este paso.
  • Guíe a los usuarios nuevos de una aplicación o función a través de las acciones iniciales. La pantalla de estado vacío es una oportunidad para educar.

El siguiente ejemplo ilustra un estado vacío para el uso inicial:

Ejemplo de un estado vacío de uso inicial para agregar siniestros

Después de una eliminación o finalización​

Indique que el usuario ha terminado correctamente un proceso o tarea y que no se requieren más acciones en ese momento.

El siguiente ejemplo ilustra un estado vacío después de la eliminación o finalización:

Ejemplo de un estado vacío después de que un usuario haya borrado todas sus notificaciones

No hay resultados de búsqueda​

  • Informe a los usuarios que la búsqueda ha terminado y que no hay resultados coincidentes.
  • Sugiera acciones alternativas que los usuarios pueden realizar para encontrar lo que buscan.
  • Ofrezca orientación sobre cómo proceder a partir del estado vacío para asegurarse de que los usuarios conozcan sus próximos pasos.

El siguiente ejemplo ilustra un estado vacío al no haber resultados de búsqueda:

Ejemplo de un estado vacío al no haber resultados después de que un usuario realiza una búsqueda

Errores o problemas​

  • Use indicaciones visuales coherentes. La biblioteca Spot Illustrations incluye una ilustración de advertencia adecuada para este caso de uso. También puede utilizar el ícono gw-warning de la biblioteca de Jutro. Solo desvíese de este estándar si fuera necesario para su contexto.
  • Utilice un tono empático adecuado a la situación. Reconozca la frustración del usuario potencial sin asignar culpas. Explique con claridad el problema y proporcione pasos específicos para su resolución.
  • Explicar qué impacto podría tener el error en el trabajo de un usuario. Solo incluya la información necesaria para solucionar el problema.
  • Utilice un lenguaje sencillo y evite la jerga innecesaria o los términos complejos. No utilice un código de error, a menos que su audiencia entienda el código y eso ayude con el diagnóstico técnico.

El siguiente ejemplo ilustra un estado vacío para errores o problemas:

Ejemplo de un estado vacío para errores o problemas

Accesibilidad​

Asegúrese de que el texto use un token con suficiente contraste para cumplir con los requisitos de contraste AA al aplicar un tema personalizado. De lo contrario, recomendamos usar el token de color de Jutro de texto 1 [#28333F].

Tematización​

De forma predeterminada, los temas y la marca coinciden con los de la aplicación, a menos que se invaliden.

Los patrones pueden adoptar ciertos temas para cumplir con los requisitos específicos de la marca y las necesidades del cliente. Esto incluye elementos visuales como colores, tipografía, íconos, botones y otros componentes o elementos gráficos.

Más información sobre la tematización con tokens de diseño

Investigación que lo avala​

La investigación para este patrón consistió en un análisis competitivo. El análisis competitivo es una técnica de investigación que se utiliza para comparar y entender en qué están trabajando otros en el mismo campo. Los diseñadores de UX analizaron cómo Jutro y otros sistemas de diseño manejan los estados vacíos. Buscaron fortalezas y debilidades relativas, tendencias y diferencias. Los diseñadores utilizaron esa información, encontraron puntos en común y crearon un patrón basado en esas prácticas frecuentes.

Componentes​

Patrones​

Recursos​

Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.

Biblioteca de patrones de Jutro (19.6 MB)