Componentes de una interfaz web. Las barras de desplazamiento

  • 21 de noviembre de 2005
  • Valoración:
  • 4 Comentarios
  • Guias de diseño
Un elemento más a tener en cuenta en las interfaces web son las barras de desplazamiento o scroll, situadas en la zona lateral derecha (barra de desplazamiento vertical) y en la zona inferior de una página web (barra de desplazamiento horizontal).
La misión de las barras de desplazamiento es permitir al usuario desplazarse por los contenidos de la página cuando el tamaño de ésta es superior al disponible en la ventana del navegador web. Juegan pues un papel fundamental en la accesibilidad a los contenidos de toda página.


Las barras de desplazamiento presentan un diseño estándar en cada navegador web, aunque de un navegador a otro pueden variar sus propiedades gráficas. Su dimensión máxima presenta un tamaño que depende de la resolución empleada por el usuario, abarcando todo el espacio disponible (alto o ancho de la ventana). En cambio, el tamaño de su dimensión más pequeña depende del navegador web y del sistema operativo: en Windows, 18 píxeles en Internet Explorer y Netscape 4x y 14 píxeles en Netscape 6x.


En cuanto a sus colores, la combinación clásica ha sido un juego de grises, hasta la aparición de Internet Explorer 6x y Netscape Navigator 6x, en los que se utilizan colores azules para los elementos principales y grises azulados para los fondos.

Estos colores pueden ser modificados en Internet Explorer desde su versión 5.5. mediante la aplicación de las Hojas de Estilos en Cascada (CSS), que permiten configurar el color de hasta ocho elementos de las barras (fondos, sombras, flechas, etc.). Por lo tanto, actualmente podemos considerar las barras de desplazamiento como un elemento gráfico más de la interfaz web, con su propio peso visual y sus propias características de estilo.


El código CSS que permite configurar los colores de las barras principales de navegación es el siguiente:

<style type="text/css">

body {
   scrollbar-base-color: color1;
   scrollbar-track-color: color2;
   scrollbar-face-color: color3;
   scrollbar-highlight-color: color4;
   scrollbar-3dlight-color: color5;
   scrollbar-darkshadow-color: color6;
   scrollbar-shadow-color: colo7r;
   scrollbar-arrow-color: color8;
   }

</style>


Siendo:

* base: color base de toda la barra
* track: fondo de la barra
* face: primer plano
* highlight: luz cuadro de flecha
* 3d-light: luz 3d
* dark-shadow: sombra del primer plano
* shadow: sombra del fondo
* arrow: flecha

Las barras de desplazamiento no aparecen sólo en los extremos de la ventana del navegador, sino que existen otros elementos internos de la interfaz en los que pueden existir, como frames, iframes y capas. Estos elementos crean "ventanas" internas en la interfaz, mostrando contenidos propios que pueden exceder su tamaño, situación en la que las barras de desplazamiento se hacen necesarias.

En estos casos, y siempre trabajando en Internet Explorer 5.5 o superior, es posible configurar individualmente el aspecto de las barras de desplazamiento de cada una de las ventanas, con lo que estos elementos pueden ser unas herramientas visuales muy importantes a la hora de definir en la interfaz zonas y agrupaciones.


La única pega es que en el resto de navegadores, entre ellos Netscape Navigator, las barras aparecerán siempre con su juego de color estándar, que puede resultar inconveniente en el diseño general de la interfaz.

Un aspecto importante a tener en cuenta es que las barras de desplazamiento aparecen en bloque, es decir, no se puede indicar en una página web que aparezca sólo una de ellas. Existen en la actualidad tres opciones de aparición para las barras:

  1. Que no aparezcan. Esta opción es sólo válida cuando estamos seguros de que el contenido de la página no va a exceder el espacio disponible en la ventana del navegador o cuando vamos a implementar en la página "ventanas" artificiales que posean barras particulares, como es el caso de capas con scroll. Si se impide la aparición de las barras de desplazamiento habrá que tener en cuenta que los usuarios que utilicen una resolución de pantalla menor que la de diseño no podrán acceder a todos los contenidos.
  2. Que aparezcan automáticamente cuando sea preciso. Es una buena alternativa, pero habrá que tener especial cuidado con evitar en lo posible la aparición de la barra de desplazamiento horizontal, que origina problemas de usabilidad y de incomodidad a los usuarios. Para ello habrá que diseñar los contenidos de la página de tal forma que su ancho no supere nunca el ancho disponible de ventana. Iguales consideraciones respecto a la resolución empleada por el usuario que en el caso anterior.
  3. Que aparezcan siempre, sean necesarias o no. No recomendable, pues aparecerá siempre la barra de desplazamiento horizontal, aunque no sea necesaria, creando una serie de sombras indeseables en la parte inferior de la página y reduciendo el espacio vertical disponible para los contenidos.
Como norma general, conviene siempre diseñar la interfaz teniendo en cuenta la presencia de la barra de desplazamiento vertical, pero evitando la horizontal, que es el aspecto general de una ventana vacía de cualquier navegador.


Combinando adecuadamente los colores de la barra vertical de desplazamiento se puede eliminar el fuerte contraste existente entre la barra estándar de los navegadores (sobre todo en sus últimas versiones, que la presenta en colores azules) y el diseño general de la página, haciendo de la misma un elemento más de la composición.

Autor

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario.

Comentarios

Rumoroso

08/12/2005
Yo le veo pegas a la posibilidad de personalizar las barras de scroll:
- Se utilizan atributos que no son estandar, por lo que no son muy recomendables.
- Su uso se restringe a un solo navegador, con lo que el diseñador, si es un profesional, deberá hacer un diseño que estéticamente sea adecuado con las barras estandar para los demás navegadores. ¿para qué trabajar dos veces?.
- También se debe hacer una referencia obligada a la de usabilidad. El visitante ya sabe cómo funcionan las barras de scroll y está familiarizado con las que el navegador le muestra por defecto. Entonces ¿por qué reinventar la rueda y forzar al usuario a que aprenda de nuevo?.

Lo que supongo que hay que hacer es valorar si realmente compensa el personalizarlas. Se pueden conseguir diseños estupéndos sin esa personalización. Además, yo creo que con respecto a las barras que aparecen por defecto, el usuario las considera como parte del navegador y no como parte de la web.

Un saludo

javier

08/12/2005
Estoy de acuerdo con el comentario anterior. Las barras de scroll son parte del navegador y particularmente, las prefiero estándar. En mi opinion me gustan las páginas web en las que no necesitan el scroll... hay que llegar a eso... es tedioso tener que subir y bajar.... ni hablar de las barras horizontales!!!
saludosss

gustavo

12/1/2007
Hola bueno yo estoy buscando un codigo de barra de desplazamiento.

lo k pasa es k yo tengo un espacio k es el de http//www.HI5.com Y ahi no c puede poner el codigo de desplazamiento me Gustaria k alguien me diga por k o a k se debe eso por que yo no estoy conforme como sta mi hi5 sin una barra de desplazamiento.

pddt: ningun codigo k le puse en mi hi5 de barra de desplazamiento no le hace.

http//lordgztavo.hi5.com <<--<< visita mi hi5


SI SABES ALGO ESCRIBEME A MI E-MAIL GzTaVo_SnK@Hotmail.com

Carla xD

06/8/2009
Olaaa! soy de peru xfavorrr ayudenme estoy desesperada T.T lo q pasa esq yo pongo los codigos d hi5 d desplazamiento y salen los comentarios normal pro las fotos se qedan tiezaz denme un codigoo ayudenmeeee!

Compartir