Una pantalla vacía suele ser lo primero que ve un usuario nuevo. Debe decir por qué está vacía y qué hacer después. Prueba cada lista, feed o pantalla de datos de tu app con estos estados.
La lista
- Primer uso, cuenta recién creada. - Por qué: es la primera impresión tras el registro. - Cómo comprobarlo: crea una cuenta nueva y abre cada pestaña principal. Cada una muestra una explicación y un siguiente paso, no un área en blanco.
- Una acción clara siguiente. - Por qué: un "No hay nada aquí" sin botón es un callejón sin salida. - Cómo comprobarlo: cada estado vacío tiene una acción obvia (añadir, importar, explorar) y esa acción funciona.
- Sin resultados en la búsqueda. - Por qué: el usuario debe distinguir "no hay coincidencias" de "algo está roto". - Cómo comprobarlo: busca una cadena sin sentido. La pantalla nombra la consulta y sugiere un cambio, como revisar la ortografía o quitar los filtros.
- Resultados ocultos por filtros. - Por qué: los usuarios olvidan que los filtros están activos y creen que los datos han desaparecido. - Cómo comprobarlo: aplica filtros que no coincidan con nada. La pantalla indica que hay filtros activos y ofrece "Quitar filtros".
- Todo borrado. - Por qué: al eliminar el último elemento no debe quedar una lista rota. - Cómo comprobarlo: borra cada elemento uno a uno. Aparece el estado vacío, sin cabecera antigua, contador ni fila sobrante.
- Contadores e insignias a cero. - Por qué: "0 elementos" junto a un diseño que parece lleno confunde. - Cómo comprobarlo: sin datos, revisa las insignias de las pestañas, totales y tarjetas de resumen. Deben mostrar cero u ocultarse, de forma coherente.
- Estado vacío frente a carga frente a error. - Por qué: mostrar "vacío" mientras los datos cargan, o tras una carga fallida, induce a error. - Cómo comprobarlo: ralentiza la red y haz fallar una petición. El estado vacío solo debe aparecer tras una carga correcta con cero elementos. Consulta la lista de estados de error.
- Vacío por permisos. - Por qué: una lista de fotos vacía puede significar que el acceso fue denegado. - Cómo comprobarlo: deniega el permiso. La pantalla debe explicarlo y enlazar a los ajustes, en lugar de decir "no hay fotos".
- El contenido aparece cuando llegan los datos. - Por qué: la pantalla puede quedarse atascada mostrando el estado vacío. - Cómo comprobarlo: desde el estado vacío, añade o sincroniza un elemento. La lista se actualiza sin reiniciar.
- Diseño y elementos visuales.
- Por qué: las ilustraciones demasiado grandes empujan la acción fuera de la pantalla en dispositivos pequeños.
- Cómo comprobarlo: mira los estados vacíos en un teléfono pequeño, en uno grande, en horizontal y con texto grande. La acción debe seguir visible.
- Redacción e idioma.
- Por qué: un texto triste o que culpa resulta molesto, y las cadenas sin traducir son frecuentes aquí.
- Cómo comprobarlo: lee cada estado vacío en cada idioma compatible.
- Accesibilidad.
- Por qué: el arte decorativo no debe ocultar el mensaje.
- Cómo comprobarlo: con un lector de pantalla, el texto y la acción se leen en un orden sensato y la imagen se omite o se describe.
Relacionado
Volver a todas las listas · Lista de estados de carga · Lista de búsqueda y filtros
Los nuevos usuarios ven primero tus pantallas vacías. Empieza aquí para verlas con los ojos de otra persona: feedback privado y estructurado, 1 feedback = 1 crédito.