Interfaz de usuario "Metro UAM"
19 DE JULIO DEL 2013
El reto de una de las actividades era realizar un dispositivo autónomo, bien diseñado y con sistemas electromecánicos; así que en nuestro equipo decidimos hacer un vagón del metro controlado por computadora. Trabajamos con un Arduino Bluetooth (al igual que muchos de nuestros compañeros).
Tomando el tema de la interfaz, buscábamos que fuera una muy sencilla de usar y atractiva visualmente, así que yo, como el encargado del diseño de interacción, me puse a bocetar en papel algunas ideas de cómo tendría que lucir y qué funciones tendría. Después las pusimos a consideración y quedó una de las propuestas.
La primer propuesta era de color naranja en referencia al del Metro de la Ciudad de México, con el logotipo, colores muy claros para el fondo y una señalización con nada de texto.
Sin embargo, el color naranja, más que aportar la sensación de identidad con el Metro del DF, lo que hacía era agregar mucho ruido a la pantalla con la información. La iconografía era interesante y bastante descriptiva, aunque la señalización de las estaciones aún dejaba dudas.
Así que hice las mejoras pertinentes, quedando el siguiente diseño, ya más parecido al final.
Al evaluarlo, notamos que la información se perdía debido al poco contraste; también había perdido toda la identidad con el metro de la ciudad (el color naranja) y finalmente, la leyenda de encender, junto con el ícono, daban a entender un concepto diferente al que realmente hacía (hacer que el tren avanzara).
Para corregir estos detalles, agregué un contorno interior color naranja que no llamara tanto la atención pero de alguna forma recobrara el color del metro; subí el contraste y cambié las leyendas, quedando por fin la interfaz que queríamos.
Además de agregar una splash screen con el círculo de la M, la cual se animaba para dar paso a la interfaz en sí.
