13 ago. 2010

Diseño de interfaces: Enlaces, botones y menús



En una interfaz, ya sea destinada a la web como a cualquier programa para cualquier sistema, existe la posibilidad de que el usuario interactúe con ella, vaya de un lado para otro, mueva elementos, encadene acciones, reciba resultados, etc. Para que todo esto pueda desarrollarse sin problemas ni líos, hay que diferenciar cada acción de manera gráfica, para que el usuario sepa para que sirve cada elemento, qué puede hacer con él y qué resultado obtendrá cuando genere interacción. En esta entrada explicaré cuales son las normas básicas para representar las principales acciones.


El error más común a la hora de generar interfaces o diseños de una web, es no tener clara la categoría y función de cada elemento, llevando a que dichos elementos se mezclen entre sí adquiriendo funciones que no les toca. Voy a enumerar algunos de los principales elementos de interacción de una web o interfaz y explicar su correcto uso:




Enlaces básicos
Los enlaces son textos que incluyen una dirección, y que al clicar sobre ellos nos trasladarán a otra página o zona de la web, ampliando información que ya tenemos.
Deben diferenciarse claramente del texto que no es enlace, ya sea subrayándolo o cambiando su color. Así  de una mirada el usuario sabrá que puede interactuar con ese texto.











Facebook distingue sus textos planos de textos con enlace poniendo estos últimos en azul. Al tener una paleta de colores bastante limitada, no da lugar a dudas que lo que sea azul seguramente será un enlace.










Como podemos ver en este ejemplo más evidente, los enlaces estan claramente diferenciados del texto plano normal. Tanto en color como subrayado, y no dejan ninguna duda.

Cuando en una web o interfaz veamos un texto que sea enlace, deberemos saber que este texto nos llevará a otra página, a diferencia de los botones (que más abajo comentamos) los textos con enlace no deben generar resultados inmediatos, si no, llevarnos a otro lugar.




Botones
Los botones se utilizan para generar acciones que te llevarán a un resultado inmediato. Un botón es, para entendernos, la evolución del texto enlazado, y su aspecto debe ayudar a que de la sensación de que es un objeto "presionable", ya sea mediante volumen, sombras o rollovers atractivos.


Megaupload utiliza un mega botón para decirte que cuando cliques en él se descargará el archivo. Si nos llevara a otra página en vez de generar esta acción tan directa, se hubiera representado como un enlace normal.






De vueltas con facebook, una vez rellenemos el campo de texto y le demos al botón "Compartir", se publicará el mensaje. Tampoco nos llevará a ningún otro sitio, si no, que generará la acción directa.



Pestañas
Las pestañas nos sirven para mostrar bajo ellas la información que anuncian. Normalmente debería usarse un sistema de pestañas para interfaces en las que se cargue el contenido automáticamente sin refrescar la pantalla, ya que para cambiar de pantalla ya están los menús normales.
Los sistemas de pestañas son más complejos de lo que parecen. Ya que tenemos que mostrar distintos estados. Destacamos la pestaña en la que nos encontramos y ponemos en segundo plano las que están inactivas. Es importante diferenciar bien estos estados.






Aquí podemos ver claramente la pestaña seleccionada, ya que se une a la página abierta por su parte inferior. Las que no están seleccionadas, muestran un pequeño degradado oscuro en su parte inferior para simular que están detrás del marco de la página. Es una técnica muy común y muy efectiva para conseguir el efecto de estar detrás.






En este caso, muy similar al anterior, no se usan degradados pero como podemos ver, las pestañas inactivas usan colores suaves y el mismo tono en diferentes intensidades para el texto y la pestaña, simulando el estar "apagadas", mientras que la pestaña seleccionada (a parte de tener un pájaro encima) usa un mayor contraste.



Menú horizontal
El menú horizontal es un sistema muy parecido al de pestañas, en muchas webs se usa el sistema de pestañas como menú principal, y pueden compartir funcionalidades. Aunque generalmente un menú normal, debería llevarnos a distintas páginas sin necesidad de estar conectado gráficamente con el contenido como lo pueden estar las pestañas. También debemos mostrar claramente qué opción está seleccionada y cual inactiva.







Sobre este párrafo podemos ver un ejemplo bastante claro de la diferencia entre lo que está activo y lo que no. Aunque parezca exagerado, esto ayuda a que, cuando estemos mirando una web, de un simple vistazo veamos donde estamos. Hay que cuidar el grado de importancia de cada elemento, pero en un menú debe quedar siempre bastante claro en que punto del mismo nos encontramos.






Este es un ejemplo más sutil. No es tan claro como el anterior, pero la flechita sobre la opción seleccionada genera un punto de atención importante. Sin esa flechita costaría un poco más distinguirlo, ya que únicamente cambia la intensidad de blanco del texto, algo insuficiente por sí solo.

Existen miles de estilos para este tipo de menú, pero como hemos visto en los dos ejemplos anteriores, es importante crear un punto de atención en la opción seleccionada para que el usuario tenga una referencia rápida de donde se encuentra.



Menú Vertical
El menú vertical se utiliza normalmente en combinación con los anteriores tipos de menú. Su uso es más común en páginas interiores donde disponemos de puntos complementarios al menú principal. Al igual que el menú horizontal, debemos destacar claramente el punto en el que nos encontramos y diferenciarlo de los inactivos.











Un ejemplo claro de los diferentes estados. El activo claramente destacado en verde, mientras que los inactivos comparten tonalidad gris en distintas intensidades.











El ejemplo más sencillo pero no menos correcto. Aquí juegan, además de con el color, con el grueso del tipo de letra, poniendo el destacado en negrita. Como podemos ver, se vuelve a repetir en los puntos inactivos, el que comparten color con el fondo pero en distinta intensidad.

Resumiendo
En todos los casos se cumplen una serie de normas comunes. Llamar la atención del usuario y la clara diferenciación de los estados y elementos. Cada estado debe tener un estilo y cada elemento una apariencia acorde a lo que es. Si cumplimos estos requisitos, el usuario tendrá de un vistazo, las referencias necesarias para saber en un instante lo que puede hacer con cada elemento.

No hay comentarios:

Publicar un comentario

Comenta aquí lo que quieras