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 últimamente 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 aún más variables y cosas en las que pensar al implementar galerías completas de imágenes receptivas 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: ocultar el navegador siempre que sea posible
Es posible que no tenga elementos de navegación en una tableta o dispositivo móvil, pero en una computadora de escritorio, es una buena idea ocultar esos elementos hasta que se necesiten. Los elementos como las flechas hacia adelante y hacia atrás y los puntos de navegación deben configurarse para mostrarse solo cuando alguien pase 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) Evita demasiadas imágenes de retratos
Si está implementando una galería que es una cuadrícula de imágenes, querrá elegir imágenes 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 amplio área de visualización de un teléfono orientado a paisaje hace que sea difícil ver imágenes verticales. El paisaje es mejor, pero puedes conformarte 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 verticales en una pantalla de paisaje aparecerán muy pequeñas. Sus imágenes no se verán tan intensamente como imágenes cuadradas o de paisaje, que llenarán más área de la pantalla y aparecerán más grandes. Al seleccionar imágenes, asegúrese de tener a la persona que las visualiza en mente.
3) Usa gestos en tabletas y dispositivos móviles
A la gente le encanta usar gestos en sus pantallas táctiles. Se sienten más motivados cuando sienten que están deslizando una imagen, porque la experiencia es más inmersiva. Intentar tocar flechas diminutas o puntos de navegación en un dispositivo móvil es demasiado tedioso. Es mucho más natural poder tomar su dedo y deslizar una imagen hacia arriba, hacia abajo, hacia la izquierda o hacia la derecha.
4) Evite lightboxes: desactívelos en el móvil
Si tiene imágenes de productos, como maquinaria o elementos que deberían verse con más detalle (tela, joyas, etc.), entonces tiene sentido una caja de luz con imágenes más grandes. Incluso entonces, solo deberían usarse en el escritorio. Cuando se divide en tabletas y pantallas móviles, las cajas de luz deben deshabilitarse. Pueden causar una cantidad de problemas de experiencia del usuario. Si ocurre 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 un número significativo de diapositivas, entonces 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 uses estos elementos, asegúrate de colocarlos en lugares que estén fuera del camino. No tenga puntos de navegación revisando el texto u otros enlaces. Además, evite los controles excesivamente complejos. Estos 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 pasar o saltar a ciertas imágenes, y tener flechas hacia adelante y hacia atrás es suficiente. ¡No exageres!
6) No mezcle imágenes y videos
Mezclar diferentes medios suele ser correcto, pero mezclar videos en lugares donde no se los espera puede causar problemas. No desea que un usuario inicie accidentalmente un video, que reproduce el sonido para que todos lo escuchen. Separa los videos y las imágenes, para que sepan qué esperar. A nadie le gusta 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, ya que 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 llenar el 100% de un dispositivo móvil (para la mayoría de los casos), pero los sitios de tamaño 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 arrastran el ancho del navegador, la imagen se amplía con ella, más allá de su tamaño previsto.
8) Escalado de imagen
Si tiene una escala de imágenes, asegúrese de que se reducen, no hacia arriba. Lo mejor es establecer las 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ático. 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 automático .
9) Evite usar leyendas de las imágenes
Los subtítulos de las imágenes o cualquier otro texto que lo 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 atestada. Otro problema es que está limitado en la cantidad de texto que puede usar. Agregar un título, o cualquier texto adicional, agrega la variable de texto receptivo a la mezcla. Debe considerar los saltos de palabra y cómo varias líneas de texto terminarán apareciendo junto con su imagen. Si el texto se utiliza como una 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 la clave, y cada imagen es diferente.
Conclusión
El resultado final 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. Siguiendo estos simples pasos a seguir y no hacer de las galerías de imágenes receptivas, los usuarios no tendrán problemas comunes cuando visualicen sus imágenes.