Diseño de interacción (UI)
Una pantalla parece completa cuando todo sale bien. El criterio se pone a prueba cuando todavía no hay contenido, una acción tarda o algo falla.
Los estados de interfaz describen esas situaciones. No son mensajes para añadir al final. Forman parte de lo que una persona necesita entender para continuar.
Imagina un archivo ficticio de cerámica con un buscador de piezas. La misma zona puede mostrar resultados, estar cargando, no encontrar coincidencias o no conseguir conectarse. Diseñar solo la cuadrícula de imágenes deja sin resolver el resto del recorrido.
Vacío no significa siempre lo mismo
Hay una diferencia entre «Todavía no has guardado piezas» y «No hay resultados para estos filtros». El primer mensaje puede invitar a explorar el catálogo. El segundo debería permitir modificar la búsqueda.
Antes de redactar, identifica qué ha provocado el vacío. Una frase simpática puede acompañar, pero no sustituir esa información.
En nuestro archivo, «No encontramos piezas con estos filtros. Prueba a quitar el filtro de material» ofrece una salida concreta. No promete que existan resultados fuera de los filtros; propone una acción que se puede comprobar.
Cuatro estados de un buscador ficticio. Cada mensaje explica qué ocurre y qué se puede hacer. Toca para ampliar.
Comparar dos mensajes para la misma búsqueda
Partimos de un catálogo ficticio de cerámica. Una persona busca un cuenco azul. La primera versión muestra «No hay piezas» tanto cuando no existen coincidencias como cuando la conexión ha fallado. La pantalla parece limpia, pero no permite decidir cómo continuar.
La misma búsqueda ficticia necesita respuestas distintas si no hay coincidencias o falla la conexión. Toca para ampliar.
En la segunda versión se separan las causas. Si la consulta se ha completado sin coincidencias, aparece «No hay piezas para estos filtros» con la opción de quitarlos. Si la consulta no se ha podido completar, el mensaje indica el fallo y ofrece volver a intentarlo. Se conserva la búsqueda para evitar repetirla.
- Escribe primero la búsqueda y conserva el mismo contenido en ambas variantes.
- Simula por separado una respuesta vacía y un fallo de conexión; indica que son simulaciones.
- Comprueba que cambiar los filtros corresponda al caso vacío y reintentar al fallo temporal.
La comprobación es sencilla: alguien que no conozca el ejemplo debería poder explicar qué ha ocurrido y qué acción propone cada mensaje. Después cambia «cuenco azul» por una búsqueda de artículos. La lógica debería seguir teniendo sentido. Si ambos casos siguen mostrando lo mismo, todavía falta una decisión.
La espera también necesita una explicación
Mientras se buscan piezas, un indicador de actividad puede acompañarse de «Buscando piezas». El texto conecta el movimiento con la acción iniciada.
Evita inventar porcentajes. Si el sistema no conoce el progreso, mostrar un 82 % solo añade una precisión aparente. Una animación de carga tampoco demuestra que haya una operación real en marcha.
Decide qué ocurre con los controles durante la espera. Si una acción no debe repetirse, su comportamiento debe impedir duplicaciones y explicar el estado. No desactives el resto de la página sin necesidad.
Un error debe ayudar a recuperarse
«Algo ha ido mal» no explica si conviene corregir un dato o volver más tarde. «No hemos podido cargar las piezas. Inténtalo de nuevo» encaja con un fallo temporal del ejemplo.
Si el error corresponde a un dato, sitúa la indicación cerca de ese campo y explica qué corregir. W3C recomienda notificaciones comprensibles que ayuden a resolver el problema en su guía de mensajes y resultados de formularios.
No dependas solo del color. La palabra, el icono y su posición pueden reforzarse entre sí. La implementación también debe comunicar los cambios a quienes utilizan tecnologías de apoyo; un aviso visual por sí solo no basta.
Confirmar lo que realmente ha ocurrido
«Solicitud recibida» y «Reserva confirmada» no significan lo mismo. El mensaje de éxito debe corresponder al estado real de la operación.
Si una web solo recoge una petición, no puede anunciar que ha reservado una fecha. Tampoco una animación de éxito demuestra que un mensaje haya llegado a su destino.
Esta distinción conecta con cómo comprobar una respuesta de IA sobre diseño web: una interfaz convincente necesita pruebas de funcionamiento.
Mini tutorial: completar una pantalla en cuatro situaciones
Dibuja la zona de resultados del archivo y conserva su ancho en cuatro variantes. Escribe para cada una: qué ha ocurrido, qué puede hacer la persona y qué información permanece visible.
Después revisa estas situaciones por separado:
- Primera visita, sin elementos guardados.
- Búsqueda que todavía no ha terminado.
- Búsqueda correcta que no devuelve coincidencias.
- Fallo de conexión al consultar los resultados.
El fallo y la ausencia de coincidencias necesitan mensajes diferentes. En una copia de prueba puedes simularlos; identifica la simulación para no confundirla con una integración terminada.
Si utilizas IA, pídele las variantes y sus condiciones de aparición. Revisa tú esas condiciones. Para mantener una misma lógica visual, apóyate en los sistemas de diseño.
Una interfaz bien resuelta mantiene la conversación cuando el camino deja de ser perfecto.
