Revamping an application UI

El día Lunes 17 de Febrero empiezo a impartir un curso para la empresa Yoli (estos refrescos son la neta) de Acapulco; obviamente en Acapulco, Guerrero. El curso durará dos semanas y esta enfocado principalmente al desarrollo de Clientes Inteligentes con Visual Studio .NET 2005 ¿alguien quiere venir conmigo?

Pero ese no es el tema de este post. El tema es que me dieron la tarea de mejorar la UI del proyecto que actualmente estamos desarrollando. Como era de esperarse dado el tiempo y los compromisos, tenemos muchas áreas de oportunidad y dentro de este post voy a poner algunas cosas que considero importantes y algunos tips de diseño de UI.

A los que se pregunten por que me meto yo en estos rollos es que tengo un diseñador gráfico escondido MUY dentro de mí. Siempre me han apasionado las artes plásticas y fui muy buen dibujante durante la preparatoria (claro, era lo único que hacía durante las clases). Pero en fin, empecemos:

¿Qué le encuentramos de mal a esta pantalla?


Haz clic en la imagen para ver la pantalla completa

Digamos que la interfase es la común de Windows. Esto no está mal en absoluto, son herramientas que hemos venido usando alrededor de 20 años … no podemos culpar al excelente desarrollador que hizo esto por que finalmente son las herramientas con las que él cuenta.

Sin embargo, con Visual Studio NET 2005 tenemos grandes mejoras que nos ayudan a mejorar las interfases de usuario junto con las ya existentes desde hace un buen rato:

Los controles deben estar alineados correctamente. Visual Studio NET 2005 nos da las guías de alineación permitiéndonos así tener todos los controles del mismo tamaño, etiquetas correctamente alineadas con las demás, espaciado mínimo requerido entre cajas de texto, tamaños de las cajas, etc. En la imagen que vemos abajo nos damos cuenta que las etiquetas no se encuentran bien alineadas gracias a las guías:

Actualiza tu tipo de letra. Esta bien, este es rollo de Visual Studio NET 2005. Por default al crear una nueva forma, te pone el tipo de letra Microsoft Sans Serif, 8.25; que la verdad a mi punto de vista está horrible. Windows Vista introduce un nuevo tipo de letra que se llama Segoe UI, si ya la tenemos pues mejor vamos a usarla. Recomendable actualizarle el tamaño a 9 o 10 pixeles.

Todos leemos de izquierda a derecha, de arriba hacia abajo. Entonces mantengamos el mismo paradigma dentro de nuestras formas, organizando correctamente los controles en el flujo natural de la vista manteniendo el índice del tabulador (TabIndex) de cada una de las cajas de texto en ese orden.

Los usuarios oprimen Enter para Salvar y Esc para cancelar. Si los usuarios usan estas teclas cotidianamente ¿por qué no les mantenemos una interfase de usuario consistente con lo que estamos trabajando? En esta ventana, si el usuario oprime Esc la ventana se cierra junto con una pregunta de confirmación que es importante para evitar que el usuario pierda sus cambios y si el usuario oprime Enter, es como si aceptara los cambios y estos serán guardados en la base de datos. Lo recomendable es ponerle a la forma las propiedades de AcceptButton al botón de Aceptar y CancelButton al de Cancelar.

Validaciones. Son muy importantes. En el escenario mostrado pude dar de alta muchos clubes sin que me respondiera la UI que el usuario introduce datos inválidos.

Centra todas las formas o ninguna. Sé consistente en la manera que las formas de diálogo son mostradas al usuario. No es conveniente mostrar unas centradas y otras con el posicionamiento por default de Windows o en su defecto manual. En mi experiencia, creo que las formas centradas son mejores para una interfase de usuario consistente.

Si no se puede cambiar el tamaño, no lo permitas. Esto es interesante, si estas mostrando una ventana de diálogo la cual tiene controles fijos que no se escalan al tamaño de la forma, pues entonces pon la forma con el borde adecuado (FixedDialog) y modifica la propiedad del ControlBox para evitar que puedan minimizar o maximizar la ventana. Por otro lado, si vas a permitir que la ventana pueda ser ajustable por el usuario, asegúrate de darle un MaximumSize y un MinimumSize adecuado para evitar que hagan tu ventana demasiado grande o demasiado pequeña. He aquí un ejemplo de dos ventanas, una no ajustable y la otra si:

Tamaño máximo
 
Tamaño mínimo
Haz clic en la imagen para ver el tamaño completo

¡Voilá!

Ya tenemos una forma ordenada con validaciones pero sigue siendo la misma interfase gráfica, funcional pero no amigable a la vista. Windows Presentation Foundation nos permite mejorar ampliamente las interfases gráficas de manera que para el usuario sea una manera transparente y agradable de trabajar … además recuerden que los usuarios siempre van a preferir una interfase agradable a la vista, aunque el programa no haga bien su trabajo.

Además de haber realizado los cambios previamente mostrados, dando una interfase consistente, inteligente y sencilla de usar me dediqué a hacer algunas pequeñas modificaciones al front-end usando Windows Expression Interactive Designer, terminando con esto:


Haz clic en la imagen para ver la pantalla completa

Como pueden observar la ventana sigue teniendo la misma funcionalidad que la anterior. Pero si comparamos ambas vamos a encontrar más agradable usar la nueva versión dada la claridad que nos presenta la nueva interfase. Poner íconos que representen la metáfora de la pantalla, un espaciado adecuado entre controles, alineado correcto, una explicación más detallada de lo que se requiere dentro de la forma y validaciones van a convertir una buena aplicación en una excelente aplicación.

Les dejo algunas pantallas extra para que vean la diferencia entre el antes y después para que vean las diferencias y me digan que opinan. Simples detalles que hacen de nuestra experiencia de usuario (UX) más agradable y útil.

Cheers!  Drinks [D]

Antes Después


Comentarios

Deja una respuesta