El reto.
Representar las acciones y estados de un electrodoméstico de forma comprensible, desde la selección del programa hasta los mensajes de error y la finalización.
Mi aportación.
Desarrollé la interfaz con HTML, CSS y JavaScript a partir del diseño de Alicia Aurecchia. El proyecto incluye selección de peso y programas, configuración, progreso y mensajes de estado.
- Programación de la interfaz web.
- Implementación de pantallas y estados de interacción.
Lo que construimos.
Un prototipo web que permite explorar las pantallas y el flujo de uso. El código está disponible en GitHub. No se presenta como una certificación de accesibilidad.
Los estados intermedios y los mensajes de error también forman parte de la experiencia.
Decisiones de desarrollo.
Traducir el aparato a una secuencia comprensible
La interfaz organiza selección de carga, programa, configuración, progreso y finalización. Cada pantalla necesita dar contexto a la siguiente: qué se ha elegido, qué acción está disponible y qué está ocurriendo. Mi trabajo consistió en convertir el diseño visual en estados e interacciones con HTML, CSS y JavaScript.
Responder al estado de una simulación
El repositorio incluye un emulador del electrodoméstico con sensores y actuadores: puerta, agua, temperatura, detergente o tambor. La interfaz escucha cambios y coordina operaciones como llenar, vaciar o calentar. El prototipo permite explorar cómo se relacionan los controles visibles con un estado que cambia en el tiempo.
Dar espacio al progreso y a los errores
La galería documenta tanto la selección del programa como el proceso, los avisos y la pantalla final. Estos estados ayudan a explicar si el aparato está preparado, trabajando o requiere atención. El valor del ejercicio está en desarrollar el flujo completo a partir del diseño de Alicia Aurecchia.
El proyecto en uso.
- Seleccionar la carga y el programa, revisando las opciones que ofrece cada pantalla antes de iniciar el proceso.
- Seguir el progreso del lavado o secado y observar cómo cambia la información durante el ciclo simulado.
- Comparar los avisos y la finalización con las pantallas iniciales: cada estado debe indicar una situación y una acción comprensibles.
Qué explorar.
Una forma de acercarte al proyecto a través de sus pantallas, su material y, cuando está disponible, su código.
- La continuidad entre selección de programa, confirmación y proceso.
- La actualización de la interfaz cuando cambian los sensores del emulador.
- Los mensajes de estado y la jerarquía visual de las acciones disponibles.