Empty state
Los empty states permiten comunicarle a las personas
que no hay información disponible para mostrar.
Funcionales
Explicar a la persona qué puede hacer y facilitarle la acción para llenar el espacio.
Empáticos
Agregar un tono descontracturado para lograr un equilibrio entre la situación y el contenido.
No dejar la pantalla completamente vacía
Si no se proporciona información del sistema, la persona no puede saber si hay detalles para mostrar, si se ha producido un error o si el sistema está procesando la solicitud.
No los dejes para el final
Son una oportunidad para aumentar el aprendizaje en contexto y orientar a las personas en tareas claves.
El objetivo del accionable es llenar el estado vacío
Debe ser una vía directa para comenzar con la tarea que completa ese espacio específico.
Ser claros
Describir qué puede hacer la persona para llenar ese espacio y qué beneficios obtendrá.
Transmitir el espíritu de la marca
Un poco de personalidad puede ayudarnos a generar el estado de ánimo buscado.
1
First time - Sin acción
Necesita de una acción externa para llenarse.
2
Starter - Con acción
La persona puede realizar una acción para comenzar a ver contenido.
3
No results o No disponible
El producto no está disponible todavía o no se encontraron resultados luego de una búsqueda.
1
Navigatón
Nombre de la sesión
2
Icono (según caso de uso)
Representación de la sección o producto en el que la persona se encuentra.
3
Título (según caso de uso)
Información que describe el estado de la pantalla.
4
Bajada
Información porqué está vacío y cómo se llena.
5
Accionable (según caso de uso)
Acción a realizar para comenzar a ver el contenido.
1
Full screen
No hay nada que mostrar en la pantalla
2
Section
Solo una parte de la pantalla no muestra contenido.
Cercanía
Apelamos a la persona para generar confianza y crear vínculos más cercanos. Utilizamos pronombres posesivos (tu, tuyos) y verbos conjugados en segunda persona (prueba, elige).
Informalidad
Damos un paso más del tono cercano para generar un poco de alegría usando la literalidad e ironía. Utilizamos signos de admiración, pregunta y paréntesis y verbos en imperativo (agarrá la llave).
Metafórico
Describimos una situación utilizando recursos literarios para generar emociones positivas en las personas (Nada por aquí, nada por allá).
First time
Starter
No results o No disponible
Starter
Existe la posibilidad de llenar el estado vacío a través de una acción.
Estructura
Ejemplo
1
Bajada
[Oración 1]: Todavía no + Acción {Verbo pretérito} + Sustantivo {Sección/beneficio}.
[Oración 2]: Cuando + Acción {Verbo presente 2da persona + Artículo + Sustantivo} + lo verás reflejado aquí.
2
Acción
Tarea a realizar
First time
No existe la posibilidad de llenar el estado con alguna acción.
Estructura
Ejemplo
1
Título
No tienes/No hay + {Sección/beneficio} + Temporalidad
2
Bajada
Expresión entre signos de admiración + Cuando + {Verbo presente 2da persona} + Sustantivo + Coma + te lo mostraremos aquí.
No results
Aparece luego de una búsqueda fallida.
Estructura
Ejemplo
1
Título
Expresión metafórica
2
Bajada
No encontramos resultados + Acción {Verbo presente 2da persona + Gerundio + Artículo + Sustantivo}.
No disponible
Aparece cuando un producto o funcionalidad todavía no se encuentra disponible.
Estructura
Ejemplo
1
Título
Expresión metafórica + Puntos suspensivos
2
Bajada
Por ahora + Sección + solo está disponible para + Variable {tiempo, lugar, país, producto}
Utilizamos la segunda persona del plural
Cuando la persona no obtiene la información que necesita nos hacemos cargo.
Utilizamos punto en la bajada
Permite finalizar la idea o información que se desea comunicar.
No somos redundantes
Si una información se encuentra en el título no debe repetirse en la bajada.
No utilizamos onomatopeyas
Pueden generar una experiencia negativa y no son de uso común.
Signos gramaticales
Utilizamos recursos como signos de admiración, pregunta y paréntesis para expresar más emociones en e l contenido.
Bajadas con de máximo dos oraciones
Somos directos, buscamos contar qué pasó y por qué.