Buenos controles deslizantes, malos controles deslizantes: cosas a considerar para usarlos
La forma en que se desarrollan y se visitan los sitios web cambió drásticamente en los últimos años. El uso de dispositivos móviles está creciendo y tecnologías como HTML5 y CSS3 hacen posibles cosas que antes eran imposibles o difíciles de lograr. Pero una cosa ha demostrado su valor durante años: buenos controles deslizantes de contenido ole. Tienen dos grandes ventajas. Por un lado, el contenido se puede colocar de manera eficiente para que sean visibles sin desplazarse. En segundo lugar, sobresalen del resto de la página debido a sus transiciones animadas. Pero los controles deslizantes de contenido no siempre son correctos, especialmente desde la perspectiva del visitante.
Creación de controles deslizantes con animaciones CSS3
Incluso antes de CSS3, había controles deslizantes de contenido. Debido a la falta de posibilidades de animación, el contenido se realizó mediante JavaScript y el método „setTimeout()“. El contenido del control deslizante se colocó nuevamente en cada ronda. Este enfoque todavía funciona hoy en día, pero no es óptimo porque las repeticiones a través de „setTimeout()“ son fijas. Pero una animación debería controlarse en función de la velocidad de fotogramas del navegador.
Es por eso que las animaciones siempre deben definirse mediante „requestAnimationFrame()“ o mediante animaciones CSS3 en combinación con JavaScript. Esto mejora el rendimiento, especialmente en dispositivos móviles con energía reducida. Muchos controles deslizantes recientes como Sequence.js utilizan tecnología moderna y también responden.
Biblioteca de JavaScript «sequence.js» para controles deslizantes de contenido
Aquellos que prefieran programar sus propias soluciones deben mantenerse alejados del antiguo enfoque „siteTimeout()“ o „setInterval()“.
Uso de controles deslizantes según el contenido y el uso
El uso de un control deslizante es tan importante como el aspecto tecnológico, especialmente para los visitantes del sitio web. Es comprensible que el anfitrión de un sitio web quiera mostrar la mayor cantidad de contenido y llamar la atención tanto como sea posible. Sin embargo, esto no siempre es del interés del visitante.
Si bien los controles deslizantes que muestran exclusivamente imágenes funcionan sin problemas (la mayoría de las veces), los que contienen texto siempre son un poco problemáticos porque el contenido a menudo desaparece antes de que el usuario termine de leer. Es por eso que debe considerar algunas cosas al usar controles deslizantes con texto.
Fontshop: control deslizante de contenido claro con imágenes generosas y poco texto
El texto en un control deslizante debe ser breve: un adelanto o un título de imagen ingenioso en el mejor de los casos. Idealmente, la duración de la visualización es suficiente para poder leer todo el texto. Cuando el usuario se desplaza sobre el control deslizante de contenido con el mouse, debe asegurarse de que la animación se detenga y el contenido que se muestra actualmente permanezca para que nadie se queje de que el control deslizante es más rápido de lo que el ojo puede leer.
Una vez que el visitante ha tomado el control del control deslizante manualmente al desplazar una página hacia adelante o hacia atrás, debe evitar que la animación continúe, ya que puede suponer que el usuario prefiere manejar el control deslizante él mismo.
Mantener la visión general
Si bien puede almacenar una gran cantidad de contenido en un control deslizante y eso sin duda ahorra mucho espacio, esto sucede a expensas de la claridad para el usuario. Cuando el contenido se coloca encima, debajo o uno al lado del otro, el usuario puede ver todo el contenido. Sin embargo, en un control deslizante, el usuario solo ve un área al mismo tiempo, lo que significa que el otro contenido está oculto.
Revista alemana Stern.de: control deslizante de contenido con tres artículos
Un control deslizante con tres contenidos diferentes es bastante claro. Todo lo anterior puede causar el problema de que es probable que el visitante se pierda contenido interesante en el control deslizante.
No hay suficiente atención para otro contenido
Por mucho que un control deslizante atraiga la atención hacia sí mismo, hace que otro contenido se mueva al fondo de una página. Incluso cuando un visitante echa un vistazo a los enlaces fuera del control deslizante, la animación constante puede distraerlo.
Esta es la razón por la que generalmente debe usar los controles deslizantes con cuidado. No distraen tanto en las páginas de descripción general creadas únicamente para ofrecer vistas previas del contenido. Sin embargo, en las páginas que contienen contenido real, son una molestia y no deben usarse. Si no desea renunciar a los controles deslizantes en estas páginas, al menos debe deshabilitar la animación automática y solo permitir la animación con la interacción del usuario.
Optimización de controles deslizantes para dispositivos móviles
Cada vez se visitan más sitios web desde dispositivos móviles. Para esta audiencia en crecimiento, no solo se debe implementar un diseño receptivo, sino también controles adaptados para dispositivos móviles al usar controles deslizantes de contenido. Mientras que los botones del mouse y las flechas se usan en las PC de escritorio, el teléfono inteligente se maneja exclusivamente con los dedos.
Control deslizante de contenido
Aquí, debe ofrecer la oportunidad de usar el gesto común de deslizar para usar el control deslizante. Preste atención a esta característica cuando elija una de las muchas bibliotecas de controles deslizantes. Tenga en cuenta que justo después de la capacidad de respuesta, los controles de gestos son un aspecto crucial.
Los controles deslizantes de contenido como Swiper, por ejemplo, renuncian por completo a los botones de flecha. A cambio, se emula un control de gestos a través del mouse en las PC de escritorio. Esto significa que haces el simple gesto de deslizar con un botón del mouse presionado para desplazarte por las páginas de un control deslizante.
Control deslizante de contenido FlexSlider
El FlexSlider también responde y es adecuado para dispositivos móviles con controles de gestos.
Conclusión
Los controles deslizantes de contenido siempre deben crearse desde la perspectiva de su uso para el visitante. Esto se aplica al diseño web en general. La claridad y la operatividad son aspectos importantes que debe tener en cuenta. Muchos controles deslizantes de contenido listos para usar se pueden modificar individualmente y tener un diseño y una animación distintos. Echa un vistazo a algunos de ellos:
(dpe)
#Buenos #controles #deslizantes #malos #controles #deslizantes #cosas #considerar #para #usarlos
