Feedback en el lugar
El feedback de una acción ocurre donde sucedió: el contenedor muestra que está funcionando y cómo terminó, y las palabras vienen justo encima.
En esta página
La regla
Cada acción que toma tiempo o cambia un estado responde en el mismo contenedor donde ocurrió: mientras corre, el contenedor se oscurece y un trazo a mano gira en el centro; al final, un check en musgo o una X en vino, y la Notice viene justo encima, con las palabras. No un toast en una esquina de la pantalla.
Test result:
Los tres estados
Saving…
Saved
Not saved
La secuencia
- Cargando: la oscuridad se hace presente (320ms) y el trazo gira hasta que llega la respuesta. El contenedor no recibe toques, y una segunda envío es ignorada.
- Funcionó: el check se dibuja en musgo, permanece un momento y la oscuridad se retira. La Notificación de éxito aparece justo encima.
- Falló: la X se dibuja en vino, permanece un momento y la oscuridad se retira. La Notificación de error aparece arriba y toma el foco; lo que la persona escribió sigue ahí.
- Moción reducida: nada gira o se dibuja; el dibujo parece terminado y la palabra dice el resto.
Hacer y no hacer
Do
El formulario oscurece y muestra el check; la notificación "Recordatorio guardado" aparece justo encima.
La retroalimentación muestra dónde está mirando la persona, en cualquier tamaño de pantalla.
Don’t
Un "¡Guardado!" toast en la esquina inferior de la ventana que desaparece en 3 segundos.
En una pantalla 4K, la esquina está a medio metro del formulario: la persona guarda y no ve si funcionó o no.
Escribiendo
- Carga: el verbo en -ing ("Guardando…", "Borrando…").
- Fin: una o dos palabras ("Guardado", "No guardado"). La Notificación lleva la frase completa y qué hacer.
Componentes
- StatusOverlay: la oscuridad, el dibujo y la palabra.
- Notificación: las palabras del resultado, arriba del contenedor.
- Pantallas grandes: por qué la retroalimentación no va a la esquina.