fbpx Skip to content

5 Secretos de sitios web ricos en imágenes

¿Cuándo fue la última vez que visitó un sitio web sin imágenes?

Como diseñadores web, nos encanta añadir imágenes a nuestros diseños porque las imágenes son memorables y nos dan un canal directo de comunicación con el cerebro de la audiencia. Además, las imágenes son universales y procesadas por nuestro cerebro más rápido que el texto. Por eso, en parte, el medio “historia” (vídeos cortos con efectos y superposiciones) y los emojis atraen el compromiso.

Pero algo más ha estado sucediendo desde que llegó la “web 2.0”. El alto uso de imágenes en toda la web, algunas de ellas alimentadas por contenido generado por el usuario, está creando un problema para los diseñadores web que ahora deben ofrecer experiencias ricas frente a un número cada vez mayor de imágenes.

En las siguientes secciones, discutiremos en detalle cinco cosas a tener en cuenta al diseñar sitios web inteligentes y ricos en imágenes en la era moderna.

1. Mejorar el rendimiento

Siempre que alguien piensa en imágenes en la web, su contenido, resolución y estilo vienen a la mente inmediatamente. Pero el factor más importante para ofrecer un UX superior de imágenes es el rendimiento real, que es incluso más importante que la imagen misma. Esto se debe a que la mayoría de los visitantes de su sitio no se molestarán en esperar a que sus imágenes se carguen.

un sitio web de comercio electrónico de carga lenta que registra $1,000 en ingresos por día pierde $250,000 en ventas cada año

En resumen, los sitios web ricos en imágenes no pueden permitirse el lujo de ser lentos. Por cada segundo de aumento en el tiempo de carga, hay una reducción del 7 por ciento en las conversiones. Eso significa que un sitio web de comercio electrónico de carga lenta que registra $1,000 en ingresos por día pierde $250,000 en ventas cada año.

Grandes compañías como Ryanair y Marks & Spencer tuvieron rediseños masivos de sitios web que fracasaron abominablemente debido a problemas críticos de rendimiento. Así que asegúrese de tener en cuenta que un sitio web centrado en el usuario se basa, en primer lugar y sobre todo, en el rendimiento. Usted puede mejorar el rendimiento de muchas maneras, este es un buen punto de partida.

Utilice imágenes optimizadas y con capacidad de respuesta. Muestre a los usuarios la imagen sólo cuando y exactamente como la necesiten. A continuación se presentan tres consejos esenciales.

Consejo 1: Usa Hojas de Sprite

Uno de los trucos más antiguos para acelerar los tiempos de carga en la web. La carga de múltiples imágenes requiere tiempo y recursos. Sin embargo, cargar una sola imagen y mostrar sus componentes es mucho más rápido porque al hacerlo se reduce el número de peticiones del servidor y se optimiza el ancho de banda.

Con los sprites Cascading Image Style Sheet (CSS), el navegador carga sólo una imagen, por ejemplo, una fila de iconos de medios sociales, mostrando sólo partes de ella en los lugares relevantes.

Un buen ejemplo reciente de tal técnica es The Guardian$0027s World Cup 2018 infographic. Al principio, la página tuvo un problema con la gran cantidad de imágenes a mostrar: 32 equipos competidores, cada uno con más de 20 jugadores. Como solución, el sitio web aprovecha los sprites CSS para mostrar a los jugadores de cada uno de los equipos. Ver la página de abajo que muestra los 23 jugadores de la selección española, siendo la fuente de la página una sola imagen, que se carga de forma superrápida.

Consejo 2: Imágenes de Carga Perezosa

Otro problema crítico, especialmente en el caso de una multitud de imágenes, es la carga perezosa. El principio es simple: Cargar una imagen sólo cuando es visible en la vista del navegador en lugar de hacer que el visitante espere cargando toda la colección de imágenes.

Para un ejemplo clásico, desplácese hacia abajo en la página principal de Unsplash.

Consejo 3: Cargar primero un esqueleto del sitio

Las imágenes nunca aparecen de antemano, por lo que hay que tener en cuenta el rendimiento percibido.

Cargar una versión esqueleto básica de un sitio web antes de sus imágenes crea una mejor experiencia para los visitantes. Entonces, son conscientes de lo que pueden esperar y, en algunos casos, incluso pueden empezar a interactuar con el sitio (antes de que se carguen las imágenes).

Considere la secuencia de carga de Klook:

Aquí, para cada imagen, el navegador carga primero una versión ligera del sitio (con un fondo blanco) y luego la imagen de fondo real. Este enfoque puede parecer rápido o trivial para algunos, pero tenga en cuenta que el rendimiento varía según las conexiones y los dispositivos.

(Si está trabajando con React o Vue, puede utilizar esta herramienta genial para crear componentes esqueléticos.)

2. Tratar las imágenes como parte del diseño

Esta regla puede parecer obvia, pero a menudo se pasa por alto. Las imágenes son parte integrante del diseño y, como tales, deben tenerse en cuenta. Debido a que los diseños sirven a un objetivo, las imágenes relacionadas y la composición de la página deben apoyar ese objetivo.

Diseñar imágenes para complementar

Recuerde identificar y priorizar los objetivos de la página. Ya sea que su objetivo sea solicitar suscripciones a boletines u ofrecer un catálogo para navegar, sus imágenes deben complementar el propósito deseado.

Por ejemplo, la página de destino de Essential Phone muestra una única y llamativa imagen del producto. El botón amarillo Comprar ahora destaca de forma destacada y dirige la atención del visitante hacia la acción deseada. Debido a que la imagen muestra el producto en sí mismo, nunca se corta, ni sirve de fondo al texto.

Haga que las imágenes ocupen el asiento trasero

Aunque los diseños enfocados en imágenes a menudo ofrecen mejores resultados, asegúrese de seguir los principios básicos de usabilidad, ya que estos diseños no garantizan el éxito. Por ejemplo, puede pasar por alto la jerarquía visual asignando el mismo peso a los elementos primarios y secundarios.

MetaLab es una agencia de diseño especializada en el diseño de interfaces. Cuando se muestra por primera vez, su página de destino de un solo pliegue muestra sólo un fondo de color sólido con un texto mínimo, principalmente los nombres de su clientela. Sin embargo, tan pronto como pase el ratón sobre el nombre de una empresa, el fondo cambia sutilmente, mostrando una imagen contextual. Esto significa no más sufrimiento a través del cambio de contexto cada vez. Este diseño de la página de inicio transmite el mensaje de que la clientela de MetaLab es impresionantemente amplia.

3. Dejar que el texto y las imágenes sean amigos

Mostrar tanto texto como imágenes en la misma página puede ser un asunto delicado. El desafío es encontrar el equilibrio perfecto entre texto e imágenes para su sitio web.

Colocar el texto sobre un fondo blando

Colocar el texto sobre un fondo suave es una de las técnicas más sencillas para presentar imágenes y textos contrastantes. La página de destino de Indiegogo es un ejemplo clásico, en el que el título y la descripción se muestran encima de una sobreimpresión suave y oscura de una imagen de cada uno de los productos ofrecidos en el sitio. El texto es fácil de leer sin sacrificar su atractivo visual.

Mezclar texto e imágenes

Airbnb adopta una fantástica mezcla visual de texto e imágenes para su página de inicio.

Las imágenes para las categorías de hogar contienen el texto dentro de las propias imágenes, lo que permite al diseñador jugar con la ocultación del texto entre los objetos superpuestos en las fotografías. (Ver “Familia”) Este enfoque funciona a la perfección, demostrando que el texto y la imagen no necesitan ser entidades separadas.

(Una nota al margen sobre la accesibilidad: Tenga en cuenta que el uso de texto en las imágenes también significa que no hay palabras clave para los motores de búsqueda excepto las especificadas en las etiquetas alt de las imágenes, lo que causa problemas de accesibilidad a menos que utilice las etiquetas aria-label. Su elección final depende del contexto del diseño y del objetivo de su página.)

Combinar texto e imágenes como una sola unidad interactiva

La página de destino de la película 2018 Sorry to Bother You muestra la imagen de cada miembro del reparto sólo al pasar el ratón por encima del nombre del miembro, simultáneamente cargando la imagen de forma perezosa. Aunque el texto se compone de texto en vivo (elemento de la lista), utiliza una fuente y un color estilizados junto con la sombra de las imágenes para hacer que la presentación parezca una pieza de arte (o película). La línea entre la imagen y el texto es borrosa.

Mostrar la imagen correcta en el momento adecuado encarna una experiencia de usuario juguetona y atractiva.

4. Aplicar el diseño correcto

Como sabemos, la experiencia del usuario depende en gran medida del diseño del sitio web. Para sitios web ricos en medios, la opción común de diseño suele ser la cuadrícula. Esto se debe a que el patrón de la cuadrícula muestra inmaculadamente una lista de imágenes, también cada una de ellas una al lado de la otra.

Las siguientes secciones describen los tres tipos de cuadrícula principales con un ejemplo para cada uno de ellos.

Aplicar una cuadrícula clásica

Una cuadrícula clásica es aquella que contiene imágenes cuadradas de igual tamaño. Produce un sentido de equilibrio y armonía y es adecuado para páginas en las que las imágenes no son los elementos principales para el escaneado. Una lista de cartas es una opción para una cuadrícula clásica. Piensa en casos de uso común como YouTube y Dribbble.

Aplicar una cuadrícula de Brutalist

A continuación se muestra un ejemplo de un sitio de portafolio que no se adhiere al diseño de cuadrícula demasiado familiar mientras se centra en el contenido. Marcus Eriksson es un fotógrafo muy solicitado cuya clientela incluye marcas de primera línea como Nike y ESPN. Su sitio web presenta un diseño en cuadrícula poco convencional que llama la atención del espectador sobre el contenido sin sacrificar la usabilidad. El sitio también se llena de pereza bastante bien.

Utilice este patrón si desea que sus visitantes se centren en varias imágenes individuales. La disposición caótica es muy atractiva y tiene un elemento de sorpresa. Tenga cuidado, sin embargo, de que algunas imágenes puedan “perderse en el camino” de todo el jaleo.

Aplicar un Ritual de Mampostería

El experimento Art Palette de Google Art & Culture descompone las obras de arte populares en sus paletas de colores fundamentales. A la inversa, también puede mostrar formas de arte basadas en una paleta de colores de su elección.

Para nuestro propósito, el sitio de Art Palette es inspirador. Es un buen ejemplo de una rejilla de mampostería, que muestra imágenes de diferentes tamaños y las mantiene “en orden”. Esta es una forma óptima de mostrar numerosas imágenes sin perder su relación de aspecto original.

(Puede construir su propia rejilla de albañilería con este plugin.)

Una nota al margen sobre el rendimiento: ¿Recuerdas la técnica del esqueleto mencionada anteriormente? El sitio de Art Palette toma una muesca al cargar inicialmente un bloque de color dominante cargado perezosamente y luego cargando progresivamente marcadores de posición de imagen de baja calidad (LQIP). Una mudanza muy recomendable!

5. Añadir una moción con un propósito

El elemento de movimiento se añade al estilo visual de un sitio web. Sin embargo, al igual que con el texto, al abordar una gran cantidad de imágenes, asegúrese de que tanto el movimiento como las imágenes trabajen juntos.

Algunas de las mejores prácticas de los principios de diseño de movimiento se mencionan en el documento de Google Material Design y a continuación se incluyen algunos ejemplos de cómo utilizar la animación como soporte de UX en los sitios web.

Anunciar cambios de diseño

En muchos casos, los cambios de diseño son perturbadores para los visitantes, como si el terreno se moviera a medida que todo en la página cambia de ubicación. La animación puede ayudar a suavizar los cambios para sus visitantes.

Considere este ejemplo, que muestra las imágenes en una cuadrícula clásica. Al pasar el ratón por encima de una imagen, un movimiento sutil empuja suavemente la atención del visitante hacia ese elemento. En otras palabras, la animación dirige hábilmente al visitante desde el diseño de la cuadrícula a uno de una sola imagen. Simple, pero brillantemente efectivo.

Cargar con facilidad

Otro ejemplo interesante es el sitio web de diseño de Uber. Debido a que la acción principal del usuario es simplemente desplazarse hacia abajo por la página, lo que desencadena la carga de imágenes, el sitio web enriquece la experiencia de navegación con transiciones suaves y animaciones sutiles, presentando al mismo tiempo la información relacionada de una manera clara y fácilmente accesible.

Cambiar imágenes

Fubiz suaviza los cambios entre imágenes en una galería de imágenes con técnicas de animación, mostrando un vistazo dentro de cada una de las imágenes del post.

Incorporar animación para contar una historia

Un último ejemplo: El informe de diseño 2017 de Avocode, en el que cada página tiene una historia para compartir junto con ilustraciones creadas por algunos de los mejores talentos del diseño del mundo. El informe actúa como una tira cómica, con cada ilustración construida y animada para reforzar los hallazgos clave del informe.

No olvide las ventajas del vídeo

He aquí una buena regla empírica: si puedes publicar vídeos en lugar de imágenes, hazlo. Vea este ejemplo de una galería de productos de Nike, en la que uno de los artículos, disfrazado de imagen, es, de hecho, un vídeo. Se muestra una imagen hasta que se carga el vídeo para que la experiencia del comprador no sea abstraída.

Conclusión

Tener que enfrentarse a la visualización de una cantidad masiva de imágenes o medios visuales no significa que se deban ignorar los principios de diseño. El diseño de un sitio web de moda sin tener en cuenta la experiencia del usuario siempre falla. La planificación de imágenes como parte del objetivo de su sitio web, la imposición del rendimiento y la incorporación de animación pueden marcar la diferencia entre una experiencia espectacular y una aburrida.

[Agradecimientos especiales a Sourav Kundu y Mickey Aharony por ayudar con este artículo.]