9 reglas esenciales para las galerías de imágenes receptivas

El diseño receptivo es una parte esencial y necesaria del desarrollo web. Uno de los mayores problemas con el diseño web receptivo en los últimos tiempos han sido las imágenes. Muchos debaten sobre la mejor manera de mostrar imágenes en un sitio receptivo. Y luego, ¿qué pasa con las galerías de imágenes?

Las galerías de imágenes presentan mucha más complejidad que las imágenes individuales; hay incluso más variables y cosas en las que pensar al implementar galerías de imágenes completas con capacidad de respuesta en su sitio web. Echemos un vistazo a algunos consejos útiles para implementar galerías de imágenes receptivas de la manera correcta.

1) Presentaciones de diapositivas: oculta la navegación siempre que sea posible

Es posible que no tenga elementos de navegación en una tableta o dispositivo móvil, pero en un escritorio, es una buena idea ocultar esos elementos hasta que sean necesarios. Los elementos como las flechas de avance y retroceso y los puntos de navegación deben configurarse para que solo se muestren cuando alguien pasa el mouse sobre la galería de imágenes deslizante. Esto evita distracciones y evita conflictos entre el contenido y los elementos de navegación. Toda la experiencia se siente menos confusa.

2) Evite demasiadas imágenes de retratos

Si está implementando una galería que es una cuadrícula de imágenes, querrá elegir imágenes que estén orientadas al paisaje, o cuadradas si es posible. Esto hace que sea más fácil verlos en una pantalla pequeña. Las imágenes de retrato estarían bien en un teléfono inteligente en modo vertical, pero el área de visualización amplia de un teléfono orientado al paisaje dificulta la visualización de imágenes de retrato. El paisaje es lo mejor, pero puede conformarse con el cuadrado si el paisaje no es una opción. Todas las imágenes se pueden configurar para que quepan dentro de un área de visualización, pero las imágenes de retrato en una pantalla horizontal aparecerán muy pequeñas. Sus imágenes no se verán tan intensamente como imágenes cuadradas o horizontales, que llenarán más área de la pantalla y parecerán más grandes. Al seleccionar imágenes, asegúrese de tener en cuenta a la persona que las ve.

3) Use gestos en tabletas y dispositivos móviles

A la gente le encanta usar gestos en sus pantallas táctiles. Se sienten más empoderados cuando sienten que están deslizando una imagen, porque la experiencia es más inmersiva. Intentar tocar flechas pequeñas o puntos de navegación en un dispositivo móvil es demasiado tedioso. Es mucho más natural poder tomar el dedo y deslizar una imagen hacia arriba, abajo, izquierda o derecha.

4) Evite las cajas de luz: desactívelas en el móvil

Si tiene imágenes de productos, como maquinaria o artículos que deben verse con más detalle (tela, joyas, etc.), entonces una caja de luz con imágenes más grandes tiene sentido. Incluso entonces, solo deberían usarse en el escritorio. Cuando se divide en tamaños de pantalla de tableta y móvil, las cajas de luz deben desactivarse. Pueden causar una serie de problemas en la experiencia del usuario. Si sucede algo y la caja de luz no tiene el tamaño correcto, es posible que no puedan acceder al botón de salida o que las imágenes no se muestren correctamente.

5) Cuando uses elementos de navegación, hazlos discretos

Si tiene una galería de imágenes deslizante con una cantidad significativa de diapositivas, la navegación tiene sentido. No desea que los usuarios esperen para recorrer todo. Pueden hacer clic fácilmente a su propia velocidad, entrar, obtener lo que necesitan y salir. Cuando utilice estos elementos, asegúrese de colocarlos en lugares que no estorben. No tenga puntos de navegación sobre el texto u otros enlaces. Además, evite controles demasiado complejos. Ocupan mucho espacio, distraen a los usuarios del contenido y crean una apariencia desordenada. Tener puntos en los que los usuarios pueden hacer clic para recorrer o saltar a ciertas imágenes, y tener flechas de avance y retroceso es suficiente. ¡No exageres!

6) No mezcle imágenes y videos

Por lo general, mezclar diferentes medios está bien, pero mezclar videos donde no se espera puede causar problemas. No desea que un usuario inicie accidentalmente un video, que reproduce un sonido para que todos lo escuchen. Separe los videos y las imágenes para que sepan qué esperar. A nadie le gustan ese tipo de sorpresas.

7) Asegúrese de que las imágenes no escalen más allá de su ancho máximo

Esto es importante, porque puede evitar el escalado pixelado de imágenes que son demasiado pequeñas para un espacio. Las imágenes deben ser lo suficientemente grandes como para ocupar el 100% de un dispositivo móvil (en la mayoría de los casos), pero los sitios del tamaño de una computadora de escritorio deben establecer solo el ancho máximo al 100%. He visto algunos casos en los que alguien tiene una de esas pantallas grandes de 27 ”, y cuando arrastra el ancho del navegador, la imagen se escala con ella, más allá de su tamaño previsto.

8) Escala de imagen

Si tiene imágenes a escala, asegúrese de que se reduzcan, no que aumenten. Es mejor establecer dimensiones exactas para sus imágenes. Muchas veces, se usa un porcentaje para una dimensión, mientras que la otra dimensión se establece en automática. Por ejemplo, si desea que una imagen abarque el 50% del ancho del navegador, debe establecer el ancho de la imagen en 50% y la altura en auto.

9) Evite el uso de leyendas de imágenes

Las leyendas de imágenes o cualquier otro texto que las acompañe pueden causar todo tipo de problemas para usted y sus usuarios. El primer problema es que es difícil ajustar el texto en un dispositivo móvil. Con los teléfonos inteligentes, tiene un espacio limitado, pero intentar agregar texto puede hacer que toda la experiencia se sienta abarrotada y abarrotada. Otro problema es que está limitado en la cantidad de texto que puede utilizar. Agregar una leyenda, o cualquier texto adicional, agrega la variable de texto receptivo a la mezcla. Debe considerar los saltos de palabras y cómo varias líneas de texto terminarán pareciendo junto con su imagen. Si el texto se utiliza como superposición, también debe preocuparse por dónde cae sobre la imagen. El texto claro sobre el área clara de la imagen hará que el texto sea ilegible. El contraste es clave y cada imagen es diferente.

Conclusión

La conclusión cuando se trata de cualquier aspecto del diseño web es que tiene que funcionar bien y tener al usuario en mente. Si nadie puede usar su sitio web, no volverán. Seguir estos simples pros y contras de las galerías de imágenes receptivas hará que los usuarios no se encuentren con problemas comunes al ver sus imágenes.