• Recomendación: La estrategia correcta de utilización es utilizar una pequeña imagen o icono del producto, acompañada de una breve reseña de presentación, o embebida en el diseño general de los productos o campañas del site, con un link a una página de detalle, donde, si es necesario, se puede ampliar la imagen utilizada. Un estándar orientativo de tamaños es:

  • En Home Page:

    • Tamaño pequeño: 35 X 35 pixels, Peso: 1 KByte

    • Tamaño grande: 120 X 70 pixels, Peso: 2 KByte

  • En página de detalle:

    • Tamaño pequeño: 200 X 150 pixels, Peso: 12 KByte

    • Tamaño grande: 300 X 250 pixels, Peso: 20 KByte

• Recomendación: La estrategia recomendada de uso de este tipo de imagenes es utilizar una pequeña foto de la persona, edificio, etc., acompañada de una breve reseña de presentación, o con un título relativo a su presencia. Pueden llevar asociado un link a una página de detalle, si es preciso ampiar o describir la información relativa a la imágen. Un estándar orientativo de tamaños es:

  • En Home Page:

    • Tamaño pequeño: 60 X 50 pixels, Peso: 1 KByte

    • Tamaño grande: 100 X 80 pixels, Peso: 2 KByte

  • En página de detalle:

    • Tamaño pequeño: 160 X 130 pixels, Peso: 7 KByte

    • Tamaño grande: 220 X 170 pixels, Peso: 9 KByte

• Recomendaciones de uso de gráficos propios del diseño del site son:

  • Evitarlos en la medida de lo posible: tratar siempre de recurrir a codificar los aspectos visuales de presentación mediante HTML, Hojas de Estilo, etc.

  • Si es imprescindible, utilizar las imagenes de fondo:

    • A muy baja resolución.

    • Para areas específicas, de manera que su tamaño pueda ser lo menor porsible.

    • Utilizando tablas bien estructuradas y dimensionadas, y siempre indicando el ancho y alto de la imágen, de manera que la página pueda proseguir su "renderización" sin esperar al término de la carga de la imágen.

  • No utilizar fondos de escritorio, tapices, etc.

  • Recurrir a bordes de página lo menos posible, y sólo si delimitan un área funcionalmente concreta (áreas de navegación, fotos de productos, etc.)

  • No abusar de la alternancia de imagenes "onMouseOver": acaban cansando y, con frecuencia, no aportan nada.

• Recomendación: Características que deben acompañar al uso de banners son:

  • Deben tener un tamaño estándar, de manera que un mismo diseño publicitario pueda ser usado sin limitación de dimensiones en sites externos (tanto de la misma organización como de terceros).

  • Deben hacer referencia directa al tema que promocionan de manera que el usuario tenga ya una idea de que va a ver antes de hacer "click".

  • Deben tener asociado un link a una página de detalle donde se se informe a fondo al usuario sobre lo anunciado.

• Recomendación: Los tamaños estándar de los banners en Internet son:

  Grande	468 X 60 pixels	(16,5 X 2,1 cms.)	Peso < 25 KBytes
  Mediano	230 X 35 pixels	(8,4 X 1,2 cms.)	Peso < 12 KBytes
  Botón	90 X 30 pixels	(3,2 X 1,1 cms.)	Peso < 3 KBytes

• Recomendación: Las características de utilización de banners dinámicos son:

• Debe limitarse su uso al máximo, no siendo recomendable utilizar más de uno por página:

  • Cargan en exceo el peso de la página.

  • Distraen la atención del usuario.

  • Terminan por producir estress por movimiento.

  • Comunican una cierta idea de "comercial" y "juvenil" en lugar de profesional.

• Sólo excepcionalmente está aceptado su uso en Intranets, ya que en estas el tiempo de carga de página es vital y no se requieren acciones de atracción de cliente.

• Mediante Gifs animados. Formato ".GIF". Sólo se puede definir un único link para todo el conjunto de fases.

• Mediante Bitmaps estáticos alternados mediante una función JavaScript. Formatos ".GIF" y ".JPG". Se pueden definir tantos links como fases tenga el banner. Asímismo, se puede definir el retardo de cambio de fase. (Al final del capítulo, en el Anexo-1, se muestra un ejemplo de codificación de alternancia de banners).

• Mediante animación Flash. Formatos ".SWF", ".FLA". Se pueden definir tantos links como fases tenga el banner, el retardo de cambio de fase, la forma de la transición, etc

En cuanto a los pesos, se admiten cifras mayores que en los banners estáticos, pero se debe ser muy cuidadoso en su diseño, a fín de no hacerlos excesivamente pesados. Una técnica para ello es utilizar un número limitado de colores en cada fase, y siempre los mismos colores en cada fase.

• Recomendación: Utilizar ideografías estándar para representar las acciones de navegación. No ser innovador a este respecto, al menos no en el concepto básico representado: generará cierto grado de confusión con seguridad.

• Recomendación: Sólo son recomendables los iconos que representan acciones comunes a la navegación en cualquier site:

  • Home Page ("Home")

  • Página anterior ("Back")

  • Página siguiente ("Forward")

  • Inicio de página ("Up")

  • Inicio de sección ("Top page")

  • ültima página de sección ("End page")

  • Imprimir ("Printer")

  • Ayuda ("Help")

  • Etc.

  Para acciones de navegación específicas de nuestro site: es preferible no utilizar iconos, o, de usarlos, acompañarlos de una etiqueta.

  En la mayoría de casos aumenta la usabilidad un simple hipertexto, o un botón generado sólo con texto y las clases de estilo adecuadas para conferirle apariencia de botón.

• Recomendación: Los tamaños pueden ser variables, aunque se ha demostrado la misma eficacio para los microiconos y tienen un peso apreciablemente menor:

  Grande	40 X 40 pixels	Peso < 1 KBytes
  Mediano	20 X 20 pixels	Peso < 300 Bytes
  Pequeño	12 X 12 pixels	Peso < 100 Bytes

• Recomendación: Si la Barra de Herramientas sólo está compuesta de hipertextos, no utilizar elementos gráficos en forma de botones para la implementación de las opciones de navegación, ya que tienen un cierto peso que penaliza la carga de la página. Se pueden realizar con clases de hojas de estilo que conllevan un tiempo de carga despreciable.

• Recomendación: Si se utilizan iconos, no está recomendado utilizarlos de forma aislada, aunque incluyan un "tooltip". Deberán llevar asociada una etiqueta, que siempre será preferible sea hipertexto, con el mismo link que el icono.

• Recomendación: En los hipertextos de las Barras de Herramientas siempre será recomndable asociar un parámetro "title" describiendo a qué enlaza realmente el botón en cuestión: Asímismo, en caso de ir acompañado de un icono, en la definición de este deberá asociarse el parámetro "alt" (tooltip) con el mismo objeto:

  <a href="anterior.htm" title="Ir a la página antrior"><img src="images/anterior.jpg" alt="Ir a la página antrior"></a>

• Recomendación: Procurar no utilizar mapas de navegación. El único motivo de implementar opciones de navegación no los justifica.

  En caso de que sean importantes por su contrribución al diseño gráfico del site:

  • Utilizar una imágen lo menor posible, tratando de enriquecer el diseño con codificación HTML y Hojas de Estilo.

  • Utilizar la imágen del mapa a la menor resolución posible, de manera que el peso de la misma penalice mínimamente la carga de la página. Un forma de conseguir esto es reduciendo el número de colores de la imágen y, para que esto no resulte empobrecedor, utilizar efectos de atenuación de presencia tales como disminuir la saturación y la luminosidad de la misma.

• Recomendación: Para la correcta identificación de las areas de navegación:

  • Incluir un "tooltip" en cada área que se active "onMouseOver" indicando el destino del enlace.

  • Incluir una leyenda relativa al objeto del link.