Empty State

Los Empty State son instancia dentro de la aplicación en los que no hay datos para mostrar al usuario y describen lo que el usuario puede hacer a continuación. Se ven más comúnmente la primera vez que un usuario interactúa con una sección del producto, pero se pueden usar cuando los datos se han eliminado o no están disponibles.

Playground

Titulo Empty State

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.

Ruby
Html

app/widgets/widget/empty_state.erb

<%= empty_state_widget 'Titulo Empty State', 
                                           empty_state_img: 'media/images/emptystate/postulant-empty-state.svg', 
                                           empty_state_text: 'There are many variations of passages...',    do |btn| %>
  <%= btn.empty_state_btn_primary 'Boton Accion',
             ic: {
               'indicator': "#buk-loader",
               'get-from': modal_interview_interviews_path(application_id: application.id, in_modal: true),
               'target': ".interviews-#{application.id}",
               'on-beforeSend': "$('#content_interview_alert').html('');"
             } %>
<% end %>
                

<div class="empty-state_background p-4 " >
  <div class="text-center d-flex flex-column align-items-center">
    <img class="mt-4" src="/images/postulant-empty-state.svg">
    <h2 class="my-4">
      Aún no has creado una entrevista
    </h2>
    <p class="col-md-8">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p> 
    <div class="d-flex">
      <div class="mx-2">
        <button name="button" type="button" class="btn btn-primary btn-md text-capitalize ">
          <span class="btn-label">Nueva entrevista</span>
        </button>
      </div>
    </div>
  </div>
</div>
                

lista de parámetros

Parámetro

Tipo

Detalle

empty_state_title	String	Título del empty state
empty_state_img	String	Imagen del empty state (debe ser venir de assets/images)
empty_state_id	String	Id que envuelve todo el componente
empty_state_text	String	Texto de la descripción del empty state
empty_state_none	Boolean	Validación para ocultar o mostrar el empty state
empty_state_background	Boolean	Color de fondo del componente

Anatomía

1. Ilustración [Opcional]

Una ilustración consistente con el tono de Buk que se relaciona con la situación y mensaje.

2. Título

Una breve y concisa explicación en un tono positivo.

3. Cuerpo

Explica claramente la siguiente acción en el cuerpo de texto. Puedes explicar por qué el espacio está vacío e incluir el beneficio de dar este paso.

4. Acción Principal

Representado con un botón primario, es la llamada a la acción principal a la que se hace referencia en el cuerpo de texto.

4. Background [Opcional]

Adicional, se puede incorporar un background de color de fondo como delimitación de area, este caso puntualmente se usará anidado dentro de otro componente como Datatable.

Donde usar

Puede aparecer como un mensaje a pantalla completa (Dentro de un outer box) o dentro de otros componentes como Modales, tablas, Aside, Box, Tabs u otros contenedores. Los Empty State son una oportunidad para educar e informar a las personas sobre lo que pueden hacer a continuación. El enfoque y su diseño dependerán de la situación y cuál es el más apropiado según el diseño y el contexto de la página.

Ejemplo de empty state dentro de Tabs en un modal.

Ejemplo de Empty state dentro de Data Table

Directrices visuales

Los elementos/componentes que conforman el Empty State deben alinearse al centro en mobile y desktop y tienen un comportamiento responsivo.

Ejemplo de Empty State en Mobile y Desktop.

Consideraciones para elegir la ilustración correcta

La elección del placeholder / ilustración debe tener relación con el contexto de la información.

El tamaño del espacio para el empty state también debe guiar el tamaño de la imagen. Si el espacio es limitado, es mejor usar solo texto.
Elige una imagen que tenga un tono neutro o humorístico (nunca un contexto negativo).
Las ilustraciones son opcionales. Considera omitir la ilustración si hay otras imágenes que podrían estar compitiendo visualmente en una vista y de esta forma no sobrecargar o si el espacio es demasiado pequeño para una ilustración.
Asegúrate de que la imagen sea relevante para la tarea y el contexto actuales. Algunas imágenes puntuales están diseñadas específicamente para el contexto del Empty State.

Ejemplo de ilustraciones de Empty State.

Pautas de contenido

Trata de limitar la cantidad de palabras en el mensaje tanto como sea posible. Recuerda que la mayoría de las personas escanean el texto en lugar de leerlo todo.
Mantén cortos los botones de llamadas d acción y describe brevemente la acción a tomar.
Ten en cuenta cuántos botones primarios pueden aparecer en una misma página.
Los Empty State suelen ser una oportunidad para enseñar o dar más información, especialmente si es la primera vez que un usuario ve una pantalla. Evita enviar personas a otra ubicación para obtener más información, en el caso de que no se pudiera evitar, usa un vínculo dentro del cuerpo de texto de “mayor información” o “haz clic aquí”.
Considera el estado emocional y el contexto del usuario. Un empty State puede ser una oportunidad para educar, agregar algún "guiño" o transmitir una sensación de logro. Cuando elabores tu mensaje, consulta los principios de tono y voz que existen hoy en Buk.

Mejores Prácticas

Incluye una acción o enlace para guiar al usuario a saber qué debe hacer a continuación.
Considera todos los escenarios que podrían causar que ocurra un Empty State.
Un estado general sin resultados (como sin resultados de búsqueda) podría ser más neutral, pero aun así motivar a mostrar los próximos pasos. La primera vez que alguien ve una vista, tabla, pestaña vacía puede requerir un tono inspirador, motivador o educativo.
Los Empty State deberían reemplazar el elemento que normalmente mostraría . Por ejemplo, un Empty State para una tabla reemplazaría los datos que se muestran en la tabla. Esto evita que el usuario lea toda la tabla antes de llegar al mensaje de que no hay contenido en la tabla. Del mismo modo, si busca algo y no hay resultados, cualquier contenido subyacente debe ser reemplazado por el mensaje de estado vacío.

Múltiples empty State

En situaciones en las que podrían mostrarse varios a la vez, recomendamos usar un botón ghost para la llamada a la acción. Esto evita escenarios con múltiples botones de acción primaria aumentando innecesariamente la carga cognitiva en la interpretación de la interfaz.

A la izquierda un ejemplo correcto y a la derecha el uso incorrecto con sobre carga de elementos.

Que No hacer

No cubras múltiples opciones en un solo Empty State. Si hay varias cosas que un usuario puede hacer, elige la más importante y concéntrate en esa acción.
No utilices términos específicos del producto que el usuario aún no entienda.
Como regla, no lleves al usuario a un callejón sin salida. Si hay próximos pasos útiles, inclúyelos dentro del mensaje para guiar y ayudar a los usuarios.

Debe limitarse el uso del Empty State a solo uno por vista. A no ser que se trate de contenedores distintos.

Gestión de Errores en Empty States

Los Empty State, también pueden ocurrir cuando existen datos, pero no se pueden mostrar por alguna razón. Un mayor nivel de especificidad es útil aquí, con el objetivo de que el usuario pueda abordar el problema cómodamente por sí mismo.

Proporciona orientación sobre por qué no hay datos en el mensaje y qué puede hacer el usuario para abordar la falta de datos o las circunstancias en las que aparecerían los datos usando siempre un lenguaje claro y sencillo. Seguir esto cumple con la heurística nº 9 de usabilidad de Jakob Nielsen: “Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores”.

¿Donde usar?

Como se mencionaba anteriormente, los Empty State se utilizarán cuando no existan datos por mostrar, por lo que su uso principalmente se verá en vistas completas en el contenedor principal (Outer-Box) Algunos ejemplos: un formulario sin datatos, en encuestas cuando no exista ninguna, en participantes y evaluaciones, dentro de tablas, tabs, modales, aside o incluso en moléculas como el data box.

Ejemplos Varios?

Vista actual de participantes y evaluaciones.

Cómo debería ser

El Empty State debería estar al centro de la vista y en este caso el botón de llamado a la acción “ Seleccionar Participantes” debería estar bajo el mensaje para un mayor énfasis en la toma de decisiones.

Vista actual de configuración de malla formativa

Empty State

Playground

Titulo Empty State

lista de parámetros