Este es el primer post, de una serie, con consejos para lograr una mejor interfaz grafica de usuario (GUI). No están referidos al diseño gráfico en sí, sino, se trata simplemente de cómo organizar los elementos en el software o en alguna aplicación web.
Están basados en mi experiencia de trabajar con personas de diferentes perfiles. Por un lado, el usuario casual, con poco manejo de software (Rojas y Asociados). Y por otro lado, personas con un manejo intensivo de sistemas informáticos (Tarjeta Nevada).
Para la mayoría de los ejemplos, voy a usar webs. Dado que es conocido y fácilmente comprobable.
Consejo #1: No forzar la vista del usuario
La distribución de los elementos en la pantalla es muy importante. Hoy en día las pantallas tienen, en promedio , una resolución de 1024 x 768
pixeles. Sin embargo, de a poco, empiezan a emerger las pantallas anchas (widescreen).
He clasificado la pantalla en 2 zonas con diferentes niveles de uso: la zona importante y la zona secundaria.
La zona importante
La zona importante es el área donde van los elementos principales con las cuales interactuará el usuario. Es lo que se le quiere destacar al usuario. Por ejemplo, si alguien ingresa a una pantalla para ver un listado, esta es la zona donde debería mostrarse dicho listado.
Es recomendable, que la zona importante esté en el centro de la pantalla. Dado que allí hay un mayor impacto visual, útil para para usuarios no entrenados.
Sin embargo, la zona importante debe estar apenas deslizada del eje vertical. Esto por razones ergonómicas: teniendo en cuenta que se aconseja que el monitor esté a la altura de los ojos y,
que los humanos tendemos a mirar más hacia abajo (nada) que hacia arriba (párpados); entonces, nuestro movimiento natural es mirar el centro y continuar hacia abajo. Ver la figura 1.
La zona secundaria
La zona secundaria de la pantalla es donde va información contextual a la importante. Si es un cuadro de confirmación, aquí nunca iría el botón de "Aceptar" o "Cancelar".
Esta zona le permite al usuario, seguir con otras actividades a la principal. Por ejemplo, si llegó aquí por error, puede continuar con alguna pantalla de un menú o barra de herramienta.
A veces, sirve para manipular la actividad en la zona importante. Por ejemplo, si usamos el Microsoft Paint, el lápiz (botón del costado) permite dibujar sobre el lienzo (zona importante).
En general, en la zona secundaria, se muestran las "otras tareas" que puede realizar el usuario sobre el software.
Ejemplos
Como ejemplo, van 2 casos. El primero es de
cnn.com. Aquí, la zona importante realza bien y tiene un 50% del área total usada para la interacción con el usuario.
El segundo caso es de Diario Uno de Mendoza. Aquí quise resaltar, la poca relevancia que tiene la zona importante (20%) ; y, lo mal distribuido que está respecto del centro (tomado en un monitor widescreen).
En resumen, la interfaz no debería forzar la vista del usuario. La zona importante debería estar en el centro y tener la relevancia necesaria para
llamar la atención del usuario.
Hasta la próxima!
View Pablo Pizarro's profile
Entradas
