Iconografía y navegación

Siempre que diseñemos una sede web, lo haremos teniendo en cuenta la simplicidad en el diseño visual y la eficacia de las herramientas de navegación por encima de cualquier otro aspecto. Evidentemente, si después complementamos esto con contenidos equilibrados, el conjunto adquiere una solidez estable que sólo será cuestión de mantener al día, o mejorar en la medida de lo posible.

La imagen corporativa es muy importante en empresas, organismos orficiales, entidades como universidades, etc., pero en las páginas personales también se valora un estilo unificado que permita identificar cada una de las partes como integrantes de un todo global. La iconografía es fundamental en este aspecto, aunque podemos jugar con otros valores físicos como por ejemplo la tipografía, los colores, las estructuraciones de información, etc.

El uso de la iconografía en web parece un requisito imprescindible hoy día, y cada cual debe sopesar su grado de conveniencia, buscando siempre un equilibrio (no nos cansaremos de repetirlo). Con las imágenes y otros elementos multimedia podemos pasar del simple hipertexto al hipermedia; sin embargo, está claro que todo dependerá de los recursos técnicos de quien elabore la sede web, de qué capacidades de diseño tenga, y de cuál sea la finalidad de la web.

Hay que prestar especial atención a algunos aspectos relacionados con las imágenes para no caer en errores comunes:

• No carguemos las páginas con imágenes de gran tamaño (algo que implica peso elevado y tiempo de espera), con el fin de no cansar al usuario ni hacerlo esperar para ver el contenido. Si se trata de la página principal, esta sentencia se hace más evidente, ya que se trata del punto de entrada a nuestra sede web y conviene que se muestre de forma rápida.
  
  
• Hay que pensar en aquellos usuarios que navegan con clientes no gráficos (Lynx) o con la opción de carga de imágenes desactivada. Los contenidos no tienen que estar supeditados de ninguna manera al diseño. Por este motivo, es básico poner en todas las imágenes una línea alternativa donde especifiquemos qué es la imagen que tiene que cargarse o que se ha cargado. Esto lo haremos en la etiqueta "<IMG" SRC="..">", que llevará, entre otros atributos, uno "ALT="Texto alternativo que aparecerá si no carga la imagen". De esta manera, si se prescinde de la imagen, por lo menos podrá leerse la descripción.
  
  
• Las imágenes de gran formato y definición que queramos incorporar se deberán sustituir por un icono de menor tamaño que haga referencia a la imagen en su tamaño original, siempre y cuando el usuario active el vínculo hacia esta imagen. De este modo, la página cargará rápido y ofreceremos la posibilidad de agrandar la imagen sólo para aquellos usuarios que estén interesados en hacerlo. Otra opción consiste en incorporar otro atributo a la etiqueta de imagen (LOWSRC="imagen.gif"), que primero cargará la imagen en baja resolución para dar paso posteriormente a la imagen con definición, una vez que se haya cargado todo el texto de la página.
  
  
• Es conveniente no poner imágenes mayores de 640 x 480 píxeles. Así no nos ocurrirá que una imagen se salga de la pantalla del navegador cliente, con lo que puede perderse el significado o el sentido icónico que comporte.
  
  
• Los formatos básicos admitidos por los navegadores son GIF, JPEG y PNG. Las imágenes JPEG son para fotografías de gran calidad (hasta 16,7 millones de colores) con una buena compresión, pero no admiten la transparencia. El formato GIF es lo más indicado para las imágenes transparentes (GIF 89a) y los iconos de pequeño formato. Este formato admite un máximo de 256 colores, y tiene una ratio de compresión muy elevada, y aporta, además, una variante importante como el entrelazado, que permite que los píxeles se carguen poco a poco, con lo que la imagen se hace más nítida a medida que avanza la descarga de la página.
  
  
• Hay que especificar siempre el tamaño que ocupa una imagen, como atributos de la etiqueta de inserción de imágenes. Éstos son WIDTH=" " (anchura) y HEIGTH=" " (longitud), que especifican cuánto espacio ocupa la imagen (en píxeles) dentro de la página. De esta forma, cuando se carga la página, el navegador ya reserva automáticamente el espacio determinado para incluir las imágenes, y se dedica a descargar primero el contenido textual.
  
  
• Las imágenes animadas únicamente tienen formato GIF, y se deben utilizar con una finalidad concreta, ya que son potencialmente atractivas y dirigen automáticamente la visión del usuario hacia ellas. Si rellenamos las páginas con este tipo de imágenes, despistaremos al usuario y lo cansaremos, porque afectan mucho a la retina, al ser referentes visuales en constante cambio.

El sistema hipertexto posibilita la navegación entre diferentes puntos y páginas. Esto supone una ventaja, siempre y cuando se sepa utilizar. Ya que puede resultar especialmente complicado representar el entramado que comporta una sede web, los sistemas hipertextuales permiten incorporar una serie de marcas que nos ayuden a orientar al usuario. Todos los navegadores incluyen unos botones para volver atrás o adelante a medida que se navega por un hipertexto, pero se puede caer en el error de considerarlos como únicamente válidos y suficientes.

Si accedemos a una página de la sede web por una vía que escapa a su secuencia estructural (como resultado de una búsqueda, por ejemplo) y no disponemos de ningún elemento que remita al conjunto de la sede web, crearemos automáticamente un "documento muerto", que procede de alguna sede web de la que no podemos tener ninguna "noticia" más.

Conviene que la sede web tenga unas herramientas que ayuden a la navegación, como por ejemplo unas barras de botones o menú, que remitan como mínimo a la página principal de la web. Si además proporcionamos diferentes puntos físicos de navegación, la facilidad de consulta se multiplica ostensiblemente. Estos botones de ayuda en la navegación pueden situarse al principio y al final de las páginas para agilizar su uso. Si una página es muy larga, será conveniente incluir un botón o anclaje interno que vuelva a la cabecera del documento.