Consejos sobre diseño de Interfaces de usuario

Algo en lo que quizás todos los programadores tropezamos es en la interfaz de usuario. Nuestro sistema puede ser sólido, bien seguro, que cumpla todas las buenas prácticas y especificaciones y aún así puede no ser una solución efectiva. Los usuarios pueden encontrar dificultades al usar nuestro sistema.

A continuación daré una serie de consejos a la hora de armar nuestras interfaces de usuario.

 Información por pantallas

Pantalla de sistema con Mucha informacionSuele suceder que al aumentar la información que pueda procesar el sistema, en lugar de aumentar las interfaces, aumentemos la información a mostrar quedando de una forma todo junto y casi incomprensible.

A la izquierda vemos un sistema con demasiada información. 

Pantalla de sistema con información organizadaA la derecha vemos otro donde la información está mejor organizada y es más amigable a la vista del usuario.

Separados por marcos, sería mejor incluso si son cuadros desplegables o que remarquen en donde está ubicado la información que estamos editando.

Accesibilidad

No todos los usuarios manejan una computadora de la misma forma. Hay preferencias por teclado, por mouse, algunos que prefieren pantallas táctiles, etc. A la hora de crear un sistema hay que contemplar todo esto. Muchas veces usamos controles o partes de terceros que solo tienen el comportamiento más básico: Que se le pueda hacer clic. Esto puede ralentizar el uso a usuarios avanzados que prácticamente solo usan el teclado, disminuyendo su productividad.

Para evitar esto, es importante tener en cuenta a la hora de diseñar una pantalla:

» Los controles que se puedan editar y/o “clickeables” se puedan acceder por teclado. Ejemplo por la tecla TAB

» Su orden de tabulación (TabIndex) debe seguir un flujo. Ejemplo: Seria medio raro que al completar una factura, ingresamos nuestro nombre, presionamos Tab y el foco se ponga en el botón “Aceptar” ¡Pero si no hemos puesto nada!

» Para navegar entre distintas pantallas principales es recomendable asignarles botones F. Ejemplo, para ver mi lista de clientes presione F3, para ver mis productos presiono F5, etc.

» Al mostrar listas, se prefiere tener una botonera por encima o por debajo de ésta, además de contar con un menú contextual o un botón por cada ítem para manejarlo

Decoración

Ya no estamos en la era de Windows 95/98 para que nuestros usuarios tengan todo cuadrados y fondos grises. Una interfaz con resaltado de información de importancia suma puntos al usuario. Algunos lenguajes de programación y/o frameworks ya vienen preparados para esto tal como GTK, Qt de Nokia y XAML del .Net Framework, entre otros. Una demostración con imágenes, ¿con cuál se quedarían más cómodos?

Pantalla cómoda y efectiva
Pantalla cómoda y efectiva. En Windows XP con estilos de Windows 98
Pantalla elegante con presentacion
Pantalla elegante con juego de colores y bien organizada

Ni hablar de los sistemas web, donde es muy fácil decorar y acomodar todo gracias al CSS3 y jQuery con su complemento jQuery UI.

Espero que les haya servido este artículo. ¡Nos vemos la próxima!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© VB-MUNDO – Visual Basic y mucho más
CyberChimps