En este artículo indicaremos que elementos ayudan al usuario a navegar y cuales no. Además, intentaremos indicar que elementos ayudan a predecir al usuario su destino al pinchar un enlace.
Resumen:
Ordenados de mas a menos aquellos elementos que claramente indican accion de pinchar y cambiar de pagina.
Con este orden recomendamos que siempre se use enlaces azules y botones del sistema.
Como dice el titulo de esta pagina, el usuario no es tonto, pero tampoco es adivino y sera mas facil para la navegacion si indicamos claramente que elementos tienen enlace y cuales no. Recuerda que cuanto mas facil se lo pintes, mas paginas visitara, mas banners vera, mas productos mirara....
Un dato importante a la hora de hacer botones es el tamaño de los mismos, la relacion de tamaños respecto a la pantalla debe ser proporcional ya que ayudaremos al usuario a acertar a la hora de pinchar.
Otro dato importante es el de evitar los espacios en blanco en la navegacion. Procura que los botones queden claramente contorneados y que este contorno no se rompa. Si pones una imagen y debajo un texto que explica lo que es, procura que el espacio entre el boton y el texto tambien sea clicable.
Ejemplo de botones buenos:
Estos botones ordenados de izquierda a derecha, son un buen ejemplo de como hacer botones que funcionan.
El cuadrado proporciona un area mayor de acierto para el usuario.
El circulo tambien da una area de acierto, pero es menor y el usuario se suele apoyar en los contornos.
Si no pintamos el area de acierto, el usuario tiene que apuntar bien para acertar el boton.
Ejemplo de botonera buena:
Esta claramente indicado el area donde se puede pinchar.
El boton indica claramente que se puede pinchar al estar subrayado.
La separacion entre botones es minima evitando asi zonas no clicables.
No se usan iconos, no son utiles, no ayudan y solo quitan espacio.
Hay casos que botones graficos pesan menos que el codigo html. Esto es un hecho demostrado que entre el codigo y el peso de un gif idexado con 2 colores casi no hay diferencia y ademas proporcionamos un area mayor de acierto. Esta opcion, solo en caso de que el peso sea menor, solo se recomienda para elementos fijos de la navegacion que el usuario pueda almacenar en su cache desde la primera pagina.
Cuando usemos enlaces de texto (azules y subrayados) es importante seguir las siguientes reglas:
(ADVERTENCIA: no pinches en los enlaces, estan vacios)
Procura que la palabra enlazada indique claramente el destino.
Usar el tag de title en los links ayuda a saber que es lo que vamos a ver. Algunos navegadores no lo leen, pero ayuda y no es imcompatible.
Si el enlace nos dirige a otro servidor, es bueno pintar la direccion.
Otro caso importante es cuando hacemos botones en secuencia (el tipico, 1, 2 y 3). Esto es util y ayuda al usuario ya que le puede servir de guia y le ayudan a predecir su camino.
Lo que se recomienda en estos casos, es dejar el link abierto es todos los botones y no obligar al usuario a utilizar o rellenar el paso 1 para ver el paso 2. En muchos formularios se utiliza este sistema de 1, 2 y 3, pero no se deja ver el contenido del 2 o el 3 hasta que se rellena el 1. Es mejor si dejamos todos abiertos para que el usuario explore y no encadenemos los pasos abligando al usuario a utilizar todo el sistema.
- Utiliza enalces azules y botones del sistema. Ayudan al usuario a reconocer lo que es pinchable y lo que no.
- Ofrece al usuario la informacion necesaria sobre donde esta y a donde puede ir de forma clara.
- Ofrece guias al usuario (1, 2 y 3, primero esto, luego aquello, te recomendamos esto).
- Los elementos que recargan la pagina deben indicarlo claramente.
Ordenados de mas a menos aquellos elementos que claramente indican accion de pinchar y cambiar de pagina.
- Los link en azul y los botones del sistema (no se incluyen combos).
- Los links en otro color que no sea azul, pierden parte de la llamada de enlace.
- Los botones que no son del sistema. La pestaña quizas sea el ejemplo mas extendido pero hay otras opciones.
- Links sin subrayar que cambian de color o se subrayan al pasar por encima.
- Fotos. El tamaño de la foto ayuda a que se pase por encima y se evidencie la opcion de pinchar. Otra opcion que ayuda al usuario a pinchar
en las imagenes, es el hecho de que este con borde. Este borde tendra el mismo color que los links, por lo que ayudara al usuario a reconocer el enlace.
- Combos. El combo es una herramienta de seleccion, no de accion. Aun asi no se recomienda ni para hacer selecciones. El combo no
es una herramienta recomendable, por lo general deja al usuario a medias, sin saber muy bien que pasa cuando pincha sobre el. Su uso se
recomienda en formularios u operaciones, pero nunca en navegacion.
- Texto o imagenes sin subrayar que no cambian de color.
Con este orden recomendamos que siempre se use enlaces azules y botones del sistema.
Como dice el titulo de esta pagina, el usuario no es tonto, pero tampoco es adivino y sera mas facil para la navegacion si indicamos claramente que elementos tienen enlace y cuales no. Recuerda que cuanto mas facil se lo pintes, mas paginas visitara, mas banners vera, mas productos mirara....
Un dato importante a la hora de hacer botones es el tamaño de los mismos, la relacion de tamaños respecto a la pantalla debe ser proporcional ya que ayudaremos al usuario a acertar a la hora de pinchar.
Otro dato importante es el de evitar los espacios en blanco en la navegacion. Procura que los botones queden claramente contorneados y que este contorno no se rompa. Si pones una imagen y debajo un texto que explica lo que es, procura que el espacio entre el boton y el texto tambien sea clicable.
Ejemplo de botones buenos:
Estos botones ordenados de izquierda a derecha, son un buen ejemplo de como hacer botones que funcionan.
Ejemplo de botonera buena:
Hay casos que botones graficos pesan menos que el codigo html. Esto es un hecho demostrado que entre el codigo y el peso de un gif idexado con 2 colores casi no hay diferencia y ademas proporcionamos un area mayor de acierto. Esta opcion, solo en caso de que el peso sea menor, solo se recomienda para elementos fijos de la navegacion que el usuario pueda almacenar en su cache desde la primera pagina.
Cuando usemos enlaces de texto (azules y subrayados) es importante seguir las siguientes reglas:
(ADVERTENCIA: no pinches en los enlaces, estan vacios)
- Ver biografia. (Correcto)
- Para ver la biografia pincha aqui. (Incorrecto)
Usar el tag de title en los links ayuda a saber que es lo que vamos a ver. Algunos navegadores no lo leen, pero ayuda y no es imcompatible.
- Ver biografia. (Recomendable)
Si el enlace nos dirige a otro servidor, es bueno pintar la direccion.
- Ver biografia (http://dominio.com/biografia/) . (Recomendable)
Otro caso importante es cuando hacemos botones en secuencia (el tipico, 1, 2 y 3). Esto es util y ayuda al usuario ya que le puede servir de guia y le ayudan a predecir su camino.
Lo que se recomienda en estos casos, es dejar el link abierto es todos los botones y no obligar al usuario a utilizar o rellenar el paso 1 para ver el paso 2. En muchos formularios se utiliza este sistema de 1, 2 y 3, pero no se deja ver el contenido del 2 o el 3 hasta que se rellena el 1. Es mejor si dejamos todos abiertos para que el usuario explore y no encadenemos los pasos abligando al usuario a utilizar todo el sistema.
César Martín
Especializado en usabilidad, hoy César es gerente de marketing y ventas de Docxp...