Pestañas

En términos de usabilidad, las pestañas son seguramente mi componente favorito. Aunque a Jacob Nielsen no le guste el (supuesto) abuso que se hace de ellas, son un modo fantástico de organizar la información. Por ejemplo, ahora mismo mi pantalla tiene dos grupos de pestañas: las de Firefox, que organizan las páginas de consulta para escribir este artículo, y las que Blogger utiliza para organizar la edición del blog. A Jakob Nielsen posiblemente estas segundas no le gustarían, ya que son de navegación, no para mostrar diferentes vistas de una misma cosa...

En el libro Don't Make Me Think les dedican unas siete páginas, que os paso a resumir:

  • Es una de las pocas metáforas que funcionan plagiadas directamente de El Mundo Real™: de un plumazo muestran la estructura de un elemento, organizan su información y permiten acceder de forma rápida a apartados específicos.

  • Son obvias, fáciles de usar y fáciles de comprender (en el fondo esto es repetir tres veces lo mismo).

  • Amazon fue uno de los primeros sitios en usarlas. En mi opinión, la parte del libro en el que hace un estudio sobre la evolución de las pestañas de Amazon es de obligada lectura para todo diseñador Web. No vayáis ahora a Amazon a ver cómo son, porque prácticamente las han suprimido, ya que se toparon con su principal problema, que es que...

  • ... escalan mal: más de siete pestañas casi siempre son demasiadas. Tanto por espacio físico como por el modelo mental que el usuario hace de ellas al usarlas.
En términos (web) prácticos, mi implementación favorita es la que tiene el portal hispano de Ubuntu, basada en listas de elementos, enlaces y CSS. La técnica queda descrita en este ejemplo de pestañas. Permiten tener varias líneas de texto, si desaparece el estilo queda html comprensible (buena accesibilidad, por tanto), vistosas (al usar imágenes de fondo, en vez de tablas), etc.

Sin embargo, al pensar en nuestra ¿querida? generación de páginas en Java y ahora que estoy metido hasta el cuello en JSF y Ajax, me abordaba una duda: ¿navegación tradicional (cliente-servidor puro), navegación cliente (sólo Javascript), o Ajax? La primera es lenta para el usuario, pero de fácil implementación. La segunda es la más rápida una vez cargada, pero la más lenta de carga, al generar todas. La tercera, un buen término medio, pero de compleja implementación... hasta que conocí las pestañas de RichFaces. Una vez superas ciertos problemas técnicos, se convierten en un perfecto 3 en 1. Con cambiar un parámetro cambias entre los tres modelos anteriores. La única pega, que son tablas :\ En cuanto tenga tiempo espero hacer un componente semejante, basado en Ajax4JSF como RichFaces, que implemente las pestañas elegantes de Ubuntu.

PD: me gustan tanto que las he metido en el blog (en formato cliente puro). Están arriba, sobre la imagen de cabecera, e iré recopilando en ellas las referencias, estándares y blogs que hacen del mundo del desarrollo de software un mundo un poco más llevadero.

Posted by Juan Ignacio Sánchez Lara 16:01  

0 Comments:

Post a Comment