|
|
Los
usuarios no son tontos, pero tampoco adivinos.
En este articulo indicaremos que elementos ayudan al usuario
a navegar y cuales no.
Por otro lado intentaremos indicar que elementos ayudan a predecir
al usuario su destino cuando pincha en un enlace.
Resumen:
- 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.
- 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 alamcenar 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
|
