Los usuarios no son adivinos

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:

1. Utiliza enalces azules y botones del sistema. Ayudan al usuario a reconocer lo que es pinchable y lo que no.
   
2. Ofrece al usuario la informacion necesaria sobre donde esta y a donde puede ir de forma clara.
   
3. Ofrece guias al usuario (1, 2 y 3, primero esto, luego aquello, te recomendamos esto).
   
4. 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.

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.

• 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.

 Seguir navegando a partir aquí:

+ 1 manual relacionado
+ 1 categoria relacionada
+ 1 comentario (Añadir)
+ 1 comentario no revisado

Autoría, licencia y acciones sobre este artículo

Informe de César Martín* URL: http://www.unosaficionados.com Este artículo tiene licencia Copyleft. Puedes reproducirlo citando al autor y enlazando su página web. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Manuales relacionados con este artículo

Dentro de Usabilidad en la web

Siguiente: Colores y hojas de estilo que ayudan

Anterior: Cabeceras de portal = espacio perdido

< Indice de Usabilidad en la web

Categorias relacionadas

A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:

+ Entrar en Usabilidad

 Comentarios de los visitantes

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestra un comentario revisado

 Comentario de Andrés

12/12/03 

A veces, los menús nos ayudan (a los diseñadores) a ahorrar espacio. No olvides eso! Por ejemplo: en unos foros, las skins siempre tienen la navegación de foro por foro (siempre y cuando no estés en la portada) con un menú.

Añadir un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba