Imagen VS. texto en la web
30 mayo, 2007
A la hora de diseñar una página web, es importante sacar todo el partido posible a las imágenes que se incluyan. Sigue leyendo
Actualmente está muy en boga, en lo que al diseño web se refiere, el uso de fotografías, iconos o imágenes que transmiten conceptos y mensajes que refuerzan la venta del producto que queremos promocionar. Todos estos elementos constituyen una parte muy importante de la comunicación visual a la hora de afrontar un diseño web. Sin embargo, el uso incorrecto de imágenes es algo que podemos encontrar fácilmente. A diario vemos imágenes que no encajan en el diseño, fotografías que nada tienen que ver con el tema que se aborda en la página web, ideas que no terminan de cerrar o, en caso contrario, un uso excesivo de imágenes y una gran ausencia de textos que confunden al usuario.
“Es importante, pues, que el texto que acompañe a una imagen sirva para aclarar el mensaje y definir la idea que pretendemos dar al usuario.”
Esta claro que a la hora de diseñar una web, una imagen es el gancho perfecto para el ojo que está haciendo un recorrido por una página. Siempre será mucho más fácil llamar la atención del usuario con una imagen que sea impactante, divertida, transgresora… Pero los significados de una imagen pueden ser varios y muy diferentes, con lo que si nos limitamos a incluir simplemente una imagen, el mensaje quedará difuso y perderemos la atención que hemos captado en el usuario en un primer momento.
Es importante, pues, que el texto que acompañe a esta imagen sirva para aclarar el mensaje y definir la idea que pretendemos dar al usuario. El texto hará que adoptemos el significado concreto dentro de los posibles que pueda ofrecernos, en un primer golpe de vista, la imagen correspondiente al mensaje que queremos transmitir. Todo ello hará, además, que el usuario incremente su capacidad para recordar lo que hemos querido comunicarle.
Este recurso se aplica mucho en publicidad. Se usa una imagen que en una primera instancia capta la atención del usuario, despierta su curiosidad, por lo que éste sigue leyendo al menos para despejar la incógnita que se le ha planteado: entender el significado global del anuncio. Sin embargo, estos recursos todavía no son de uso común a la hora de realizar diseño web.
“Otro punto a tener en cuenta al usar imágenes en la Web es que cada día es más importante el hecho de saber desde donde se accederá a esa información. Hoy en día, ya no se navega únicamente frente a un ordenador.”
La mayoría de las veces a la hora de diseñar webs, incluimos imágenes a modo de “decorado”, como simples fondos que hacen la navegación del usuario más agradable y que indican que les precede un texto. Este recurso, para casos aislados es correcto, pero lo mejor es sacar todo el partido que podamos a las imágenes, relacionándolas con el producto que ofrecemos en la página, mostrando los benefi cios que puede conseguir el usuario. En definitiva, haciendo una comunicación un poco más agresiva y marketiniana, lo que aumentará sin duda el impacto de la página sobre el usuario.
Otro punto a tener en cuenta al usar imágenes en la Web es que cada día es más importante el hecho de saber desde donde se accederá a esa información. Hoy en día, ya no se navega únicamente frente a un ordenador. Hay más opciones: móviles, PDAs, etc. Entonces, ¿qué pasa si navegamos desde un dispositivo que no soporta imágenes? Toda aquella información que vaya en imagen será imperceptible para el usuario, con lo que el documento puede dejar de tener sentido o puede tener graves faltas de información.
El uso de imágenes en las páginas web tiene dos vertientes principales: El uso de imágenes estéticas (fondos, sombreados) e imágenes informativas (fotos de producto, logotipos). Siguiendo las recomendaciones de una web semántica y accesible, las imágenes estéticas deberían estar añadidas a la página web mediante CSS, que es el mecanismo que separa contenido de diseño. Mediante CSS no hay que añadir información extra a la imagen, puesto que ésta es meramente estética. (Sería absurdo poner un ALT a un fondo llamándolo “Esto es el fondo de la página”). Estos elementos estéticos, al ser incluidos mediante CSS se ignoran en navegadores que no soporten CSS: móviles, PDAs, etc.
Ahora bien, las imágenes informativas, como fotos de producto, si que deberían incluirse con tags <IMG>, puesto que forman parte del contenido de la página: ofrecen información relevante al usuario. Estas imágenes son las que deben llevar el atributo ALT para ofrecer una descripción de la foto al usuario cuando no se pueda ver. Por ejemplo, en una imagen de producto, un ALT correcto sería: “Imagen de la cafetera Express V800EXP”. Para una imagen de logotipos, por ejemplo: ALT = “Agente registrador ES-NIC”.
Así, a la hora de abordar el diseño de una página web, debemos tener en cuenta que hay que diseñar el documento como una unidad con un fi n claro, defi nido y concreto. Las imágenes deben de tener relación con el tema que trate la página, los pesos deben estar bien compensados, sin haber ni exceso de imagen ni escasez de información, y por supuesto, tendremos que tener en cuenta también los soportes por los que se pueda acceder a nuestra información.