Aplica la ley de Fitts para mejorar la paginación.
La paginación surge de la necesidad de dividir información y proporcionar a los usuarios un sistema de navegación para desplazarse entre esos tramos.
Algunos aspectos derivados de la ley de Fitts ayudan a hacer la paginación más fácil de usar, es muy fácil implementar una mejora en la misma modificando un poco las CSS.
La ley de Fitts
Hay un principio del diseño de interacción directamente relacionado con la capacidad de hacer este sistema de navegación más fácil de usar y es la ley de Fits.
La ley de Fitts es un modelo que explica el tiempo que es necesario para señalar algo en base al tamaño y la distancia del blanco. Proviene del campo de la ergonomía y fue publicada por Paul Fitts en 1954.
En esencia cuando un usuario desplaza el ratón existen ciertas características de los objetivos tamaño y distancia que hará más fácil para el usuario hacer click en el blanco.
Estos dos ejemplos explican la ley de Fitts de forma práctica:
http://www.tele-actor.net/fitts/
http://ei.cs.vt.edu/~cs5724/g1/tap.html
La aplicación
La aplicación de la misma a la paginación tiene un aspecto evidente aumentar el tamaño de los enlaces.
En muchas ocasiones los usuarios emplean fuentes diminutas reduciendo considerablemente el tamaño del objetivo.
Un ejemplo opuesto es la páginación de Google.
Hay otros dos aspectos que no pueden ser pasados por alto. El área para hacer clic y la separación entre los mismos.
No basta con aumentar el tamaño de los enlaces sinó también la zona en la que se hace clic en los mismos.
Complementariamente añadir cierta separación entre estos facilitara la tarea. No sólo los enlaces distantes requieren más tiempo por parte del usuario sino también lo que resultan molestamente próximos.
Un mal ejemplo
Un buen ejemplo
Un poco de estilo
Mediante un uso adecuado de las propiedades de CSS resulta muy fácil ajustar adecuadamente estos parámetros.
Tenemos un (X)HTML como el siguiente
<div> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div>
Con estas CSS mejoraremos el tamaño de la fuente, el area de clic y la separación entre elementos.
<style type="text/css">
.paginacion a{
background:none repeat scroll 0 0 #AB2828;
display:block;
float:left;
font-weight:bold;
margin:0 5px 0 0;
padding:5px 10px;
text-decoration:none;
color:white;
}
</style>
El resultado segá algo como lo que aparece en la imagen. Es tosco pero se explica bien
Referencias
- http://www.usabilityfirst.com/glossary/fitts-law
- http://es.wikipedia.org/wiki/Ley_de_Fitts
- http://www.avidos.net/blogold/ley-de-fitts/
- http://www.blue-dreamer.co.uk/blog/entry/making-pagination-usable/
- http://www.scottberkun.com/essays/9-fittss-law-applied-to-the-web/
- http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
- Imagen principal de James Cridland via Flickr