Diseño de estados vacíos: guía el siguiente paso cuando falta contenido
Un marco práctico para diseñar estados de primer uso, sin resultados, con datos eliminados y de error, con textos útiles, acciones claras y recursos visuales adecuados al contexto.
Un panel en blanco es ambiguo. Alguien puede preguntarse si la aplicación se está cargando, si su búsqueda falló o si necesita agregar algo. Un estado vacío útil nombra lo que está sucediendo y les ayuda a decidir qué hacer a continuación.
Comience por identificar la causa del contenido que falta. El primer uso, la falta de resultados de búsqueda, los datos borrados intencionalmente y un error del sistema requieren diferentes mensajes y acciones. Los ejemplos aquí son ejercicios de diseño hipotéticos, no estudios de casos de productos ni afirmaciones sobre el rendimiento.
Conclusiones clave
- Clasifica por qué el contenido está ausente antes de elegir texto, ilustración o acción.
- Mantenga los comentarios de carga y falla distintos de un resultado vacío confirmado.
- Escriba un título específico, una breve explicación cuando sea necesario y un siguiente paso relevante.
- Revise el estado en contexto, incluida la accesibilidad, los diseños estrechos y las rutas de recuperación.
1. Identifica por qué el espacio está vacío
Trate un estado vacío como un informe sobre el producto, no como una oportunidad de decoración. Pregunte qué pasó inmediatamente antes de que apareciera la pantalla, qué sabe el sistema y si la persona puede cambiar la situación. NN/g describe los estados vacíos como oportunidades para comunicar el estado, apoyar el aprendizaje y proporcionar vías hacia tareas clave. Esas oportunidades dependen primero de identificar correctamente el estado.
En particular, no muestre "Sin elementos" mientras una solicitud aún se esté ejecutando. Mantenga un indicador de carga o esqueleto visible hasta que se conozca el resultado. Si la solicitud falla, explique la opción de falla y recuperación. Si tiene éxito con cero elementos, digamos que no existe ningún contenido coincidente. Esta distinción evita que las personas confundan un retraso temporal o un problema del sistema con un resultado real.
| Estado | lo que significa | Respuesta útil |
|---|---|---|
| Estreno | La función está lista, pero la persona aún no ha agregado ni creado nada. | Explique lo que pertenece aquí y ofrezca una forma directa de crear, agregar o explorar. |
| Sin resultados | Una búsqueda, filtro o intervalo de fechas se completó correctamente sin coincidencias. | Confirmar que los criterios no produjeron coincidencias; sugerir un ajuste relevante o borrar un filtro. |
| Datos borrados | La persona completó o eliminó los elementos que suelen aparecer aquí. | Reconocer la finalización o el resultado vacío sin dar a entender que algo anda mal; Ofrezca otra tarea si es útil. |
| Error | El sistema no pudo recuperar ni mostrar el contenido esperado. | Indique qué falló en un lenguaje sencillo y ofrezca una acción de recuperación, como volver a intentarlo. |
| Cargando | El sistema aún no ha determinado si el contenido existe. | Mostrar progreso o un tratamiento de carga; no anuncie un resultado vacío prematuramente. |
2. Escribe un texto acorde con la causa
Utilice un encabezado para nombrar el estado y un texto de respaldo para explicar lo que significa o cómo proceder. Mantenga el encabezado escaneable. Agregue una oración solo cuando responda a una pregunta real. La guía de redacción de Apple recomienda pasos siguientes claros en pantallas en blanco, etiquetas orientadas a acciones y mensajes de error directos que explican cómo solucionar el problema. Evite la astucia que oscurece el significado, títulos vagos como “Aquí no hay nada” o textos que culpen a la persona.
Por ejemplo, una pantalla hipotética de elementos guardados en el primer uso podría decir "Tus guías guardadas aparecen aquí" seguido de "Guarda una guía para volver a ella más tarde", con un botón "Examinar guías". Una lista de verificación completa podría decir "Están todos atrapados" y ofrecer "Ver tareas completadas". Estos ejemplos describen diferentes realidades: uno enseña cómo poblar una característica; el otro confirma un resultado exitoso.
Para una búsqueda exitosa sin coincidencias, un mensaje hipotético podría decir "Ningún proyecto coincide con 'orquídea'" y sugerir "Pruebe con un término más amplio o borre los filtros". Conserve la consulta y haga que los cambios de filtro sean reversibles siempre que sea posible. Si se produce una falla en la red, escriba "Los proyectos no se pudieron cargar" con "Inténtelo de nuevo". Evite decir que no hay proyectos cuando el sistema no ha podido verificar.
- Nombra el objeto o criterio relevante para que el mensaje tenga sentido fuera de contexto.
- Utilice un verbo en el botón, como "Crear proyecto", "Borrar filtros" o "Intentar de nuevo".
- Mantenga las instrucciones junto al contenido afectado y utilice texto, así como colores o imágenes.
- Evite los “Ups”, los reproches y los códigos técnicos a menos que las personas los necesiten para resolver el problema.
3. Haz que el siguiente paso sea útil, no automático
Dar una acción cuando alguien pueda razonablemente cambiar la situación o continuar con su tarea. El primer uso a menudo se beneficia de una acción de crear o agregar; ningún resultado puede beneficiarse al eliminar una restricción; un error puede ofrecer un reintento. Es posible que una bandeja de entrada vacía o un entrenamiento terminado no requieran ninguna acción. No fuerces un botón en cada estado solo para que el panel parezca interactivo.
Mantenga la recuperación proporcionada. Una actualización fallida generalmente requiere una explicación en línea y un nuevo intento, no una alerta de bloqueo. Apple recomienda hacer coincidir los comentarios con la importancia de la información y reservar alertas para situaciones críticas y procesables. Para la búsqueda, conserve el trabajo de la persona y ofrezca ajustes sensatos en lugar de cambiar silenciosamente la consulta. Material Design también sugiere contenido inicial, contenido educativo breve o mejores coincidencias claramente etiquetadas como alternativas cuando realmente ayudan.
Utilice ilustraciones sólo si añade contexto, calidez o reconocimiento. No debe competir con el mensaje ni hacer que la gente piense que una imagen decorativa es interactiva. Un simple icono puede ser suficiente para obtener un resultado de filtro compacto; un espacio de trabajo de primer uso podría beneficiarse de un pequeño ejemplo del tipo de contenido que albergará. Si se incluye contenido inicial, haga que sea fácil de identificar y eliminar.
- Elija una acción principal que aborde directamente la causa.
- Agregue una ruta de ayuda secundaria solo cuando responda a una posible pregunta de seguimiento.
- Utilice un mensaje de finalización silencioso cuando el resultado vacío sea una buena noticia.
- Asegúrese de que una acción siga siendo comprensible para los usuarios de teclados y lectores de pantalla.
4. Revisa todo el estado, no solo la ilustración
Inspeccione el estado en el contenedor real: una vista de primer uso en pantalla completa, una pequeña barra lateral y una tabla filtrada tienen diferentes necesidades de espacio y jerarquía. Mantenga el mensaje cerca del área que describe. Asegúrese de que siga siendo legible cuando el texto se amplíe o se ajuste y haga que la acción principal sea fácil de encontrar sin necesidad de reconocimiento de color. Pruebe también las transiciones: cargar hasta vaciar, cargar hasta error, reintentar con éxito y un cambio de filtro para volver a los resultados.
Una revisión práctica de la biblioteca comienza con un desencadenante y una recuperación esperada. Para cada patrón, registre el estado, rumbo, explicación opcional, acción primaria, ruta secundaria y lo que sucede después de la selección. Compare capturas de pantalla para ver una estructura útil y una jerarquía visual, luego verifique el comportamiento del producto en contexto; una imagen estática no puede indicarle si un error es recuperable o si un resultado está realmente vacío. Explore la biblioteca de interfaz de usuario de ScreenKits para obtener referencias visuales y explore todas las categorías para encontrar patrones adyacentes.
- ¿Puede una persona saber si el contenido está ausente, aún cargándose o no está disponible debido a un error?
- ¿El mensaje refleja la consulta actual, los filtros, la cuenta o la tarea completada?
- ¿La acción preserva aportes útiles y conduce a un resultado visible?
- ¿Trabaja el Estado en tamaños pequeños, con textos localizados más largos y con tecnología de asistencia?
- ¿Alguien puede recuperarse de un error o encontrar una manera de ajustar una búsqueda fallida?
Preguntas comunes
¿Un estado vacío debería incluir siempre un llamado a la acción?
No. Incluya una acción cuando ayude a la persona a agregar contenido, ajustar una búsqueda o recuperarse de un problema. Es posible que una tarea completada o una vista naturalmente vacía solo necesite una breve confirmación.
¿Una pantalla sin resultados es un estado de error?
Generalmente no. Si la búsqueda o el filtrado se completaron correctamente, informe que no hubo coincidencias y ofrezca un ajuste útil. Reserve el idioma de error para una falla del sistema que impidió que se determinara o mostrara el resultado.
¿Qué debería aparecer mientras se cargan los resultados?
Utilice un tratamiento de carga o comentarios sobre el progreso hasta que se complete la solicitud. Muestre un resultado vacío solo después de que el sistema confirme que la respuesta exitosa no contiene elementos coincidentes.
