Las técnicas de diseño web existen en muchas formas en el mundo actual, las tendencias se mueven rápido y cambian todo el tiempo. Lo mismo ocurre con los patrones de diseño web, algunas personas aman ciertas tendencias y otras odian ciertas tendencias. Algunos realmente pueden atraer a los usuarios y otros pueden terminar distrayéndolos y molestándolos, alejándolos.
Una técnica de diseño web son los controles deslizantes.
Permiten que el contenido se muestre de una manera que maximiza el espacio en la pantalla. Se puede mostrar mucha información con el uso de un excelente sitio web deslizante.
Sin embargo, es mejor comprender qué son y cuándo son útiles, ya que fácilmente pueden volverse molestos y mal sincronizados.
¿Qué es un control deslizante de sitio web?
Es un elemento en una página web que se desliza hacia la izquierda o hacia la derecha (¡o incluso en cualquier otra dirección!) Es una forma de mostrar contenido en una página en un área donde el contenido puede volar a su lugar, mostrando grandes cantidades de contenido en un área.
Los controles deslizantes son básicamente una presentación de diapositivas de información que puede ser una combinación de imágenes, texto, íconos y enlaces, etc. Un ejemplo famoso de control deslizante es un carrusel de sitio web que se puede usar para mostrar múltiples imágenes a lo ancho de una pantalla en un área.
Un ejemplo podría ser un carrusel de productos con una descripción de texto o un escaparate de una cartera:
Ejemplos llamativos de sitios web deslizantes
Hemos visto un ejemplo de uno de los tipos más famosos de sitios web de control deslizante, que es un carrusel de imágenes y texto, pero hay muchos más tipos de control deslizante para aprender.
Vamos a repasar algunos ejemplos inspiradores puedes usarte a ti mismo en tu propio diseño y obtener ideas de él.
1. Control deslizante del sitio web de Zara
Su navegador no soporta la etiqueta de vídeo.
Zara es una marca de ropa conocida en todo el mundo que ha decidido hacer que todo su sitio web sea un control deslizante de pantalla completa. Esta puede ser una herramienta poderosa desde la perspectiva de marketing y, al mismo tiempo, brindar una experiencia de usuario moderna que seguramente creará un impacto en sus visitantes y clientes potenciales.
Este tipo de controles deslizantes de sitios web se hizo popular después de que Apple usó el mismo diseño de sitio web para su iPhone 5C y la misma técnica de deslizamiento. (También utilizado por el sitio web de la BBC, El Telégrafo, Dreamworks y muchas otras grandes marcas)
Su navegador no soporta la etiqueta de vídeo.
2. Sitio web deslizante dividido
Su navegador no soporta la etiqueta de vídeo.
Vista previa de demostración
A diferencia de los controles deslizantes tradicionales que tienen un solo elemento deslizante, Split Theme divide la pantalla en dos y desliza cada uno de ellos en direcciones opuestas. Esto termina creando un efecto interesante del que algunos sitios web pueden beneficiarse.
3. Control deslizante del sitio web de Squarespace
Su navegador no soporta la etiqueta de vídeo.
Este hermoso diseño de Squarespace realmente muestra lo bien que se ve cuando combinas excelentes fotos con el diseño del control deslizante. Las impresionantes imágenes grandes son fáciles de navegar y este diseño es una excelente manera de mostrar un portafolio que podría verse tan increíble como estos 9 ejemplos de portafolios en línea imbatibles.
4. Control deslizante del sitio web de Dreamworks
Su navegador no soporta la etiqueta de vídeo.
Un gran ejemplo de cómo se pueden usar muchos controles deslizantes y carruseles para crear un sitio web realmente efectivo que sea extremadamente interactivo.
El uso de controles deslizantes y carruseles puede permitirle incluir muchas imágenes en un solo lugar, los usuarios pueden deslizarse a través del contenido interactivo y decidir en qué quieren hacer clic.
A diferencia del control deslizante anterior, este deslizará 3 elementos a la vez, lo que hará que navegar sea más rápido.
5. Control deslizante del sitio web de Xiaomi
Su navegador no soporta la etiqueta de vídeo.
A diferencia de otros carruseles deslizantes tradicionales, Xiami utiliza un control deslizante de sitio web que se desvanece entre diapositivas. Esto crea un control deslizante simple, rápido y que distrae menos que tiene el mismo propósito.
Este es un control deslizante mucho menos convencional pero hermoso. Este control deslizante diagonal agrega un toque diferente y sin duda creará una impresión en cualquier visitante.
Los controles deslizantes WebGL generalmente significan una cosa: hermosas animaciones. Y este caso no será diferente. El control deslizante WebGL para Webflow proporciona múltiples efectos en cada una de las demostraciones clonables y ¡todas son bastante impresionantes!
8. Diseño de sitio web LookBack Slider
El diseño del sitio web de Slider se trata de tener esa animación perfecta y transiciones impresionantes sin ser molesto. Un área de negocios que lo hace bien es la industria de la moda, han utilizado este diseño LookBack para mostrar sus productos.
Un diseño LookBack es donde las imágenes se reproducen automáticamente verticalmente en direcciones opuestas.
9. Control deslizante interactivo de texto e imagen
Su navegador no soporta la etiqueta de vídeo.
Este ejemplo de sitio web de control deslizante muestra qué tan bien funciona un control deslizante con texto y botones con los que el usuario puede interactuar. La imagen puede involucrar al usuario con el texto y actuar también como una llamada a la acción (CTA). Puede usar estos efectos de desplazamiento del botón CSS para animar sus botones.
10 Diseño de control deslizante desplazable a pantalla completa
Su navegador no soporta la etiqueta de vídeo.
Este sitio web utiliza un diseño deslizante de pantalla completa, tiene varias páginas o pasos y permite al usuario navegar simplemente desplazándose.
11 Diseño de control deslizante de imágenes de comercio electrónico de Amazon
Tanto Amazon como otros minoristas en línea usan un control deslizante de imágenes, son efectivos y una excelente manera de hacer que un sitio web sea interactivo rápidamente. Las ilustraciones combinadas con imágenes grandes permiten al lector comprender de qué se trata el producto con poco texto, que es de lo que se trata el comercio electrónico. Las conversaciones de los usuarios y los controles deslizantes pueden ayudarlo a hacerlo.
12 Diseño de sitio web con control deslizante de ancho completo
Este es un tipo de control deslizante más tradicional. Es un carrusel básico de elementos con un pequeño efecto de zoom/escala combinado con uno de opacidad/desvanecimiento.
Es la combinación de estos dos efectos lo que hace que se vea un poco más moderno que el carrusel promedio.
Desventajas del uso de controles deslizantes de sitios web
Los controles deslizantes de sitios web pueden ser una herramienta útil para atraer a los usuarios y mantenerlos interesados en el contenido que se muestra, pero los controles deslizantes reciben una buena cantidad de odio y hay una buena razón para ello. Deben utilizarse correctamente y con el contenido adecuado.
Algunos argumentos en contra de los controles deslizantes de sitios web son que pueden ser confusospresentan a los usuarios múltiples opciones a la vez y es posible que los usuarios no estén seguros de cómo navegar por la página web. Conduce a una mala experiencia de usuario (UX) y retención de usuarios degradada. Cada opción del control deslizante se ve igual porque el contenido no siempre se puede ver de inmediato, lo que hace que el usuario sienta que no sabe qué camino tomar. A veces puede no estar claro.
Si los controles deslizantes no se utilizan correctamente, algunos usuarios terminan viéndolos como anuncios o ventanas emergentes y terminar tratando de saltarlos y pasar al contenido “real” del sitio web.
Los controles deslizantes del sitio web pueden ralentizar una página web Además, muchas imágenes deslizantes y el texto pueden ser pesados en el navegador y pueden causar problemas de rendimiento. esto a menudo afectará el SEO y las tasas de conversión de los usuarios muy rápidamente. La mayoría de las veces, los usuarios harán clic si no entienden u obtienen lo que quieren segundos después de que se cargue su sitio web.
La mayoría de los usuarios odian los videos de reproducción automática debido a que son molestos y se interponen en el camino, lo mismo puede decirse de los controles deslizantes de sitios web. A veces, las imágenes estáticas y la copia de texto son más fáciles de navegar y desplazarse, el usuario puede comprender la información de inmediato.
Sin embargo, el hecho de que haya algunos aspectos negativos contra los controles deslizantes de sitios web no significa que tengan aspectos positivos o que no se puedan usar de manera efectiva. Se trata de usarlos en el momento adecuado con el mejor contenido que se adapte a ellos.
Cuándo usar los controles deslizantes del sitio web
Hemos aprendido sobre los impactos negativos de los controles deslizantes y hemos aprendido sobre los aspectos positivos de los controles deslizantes, entonces, ¿cuándo debería usarlos? Veamos algunos ejemplos más de buenos casos de uso para controles deslizantes.
Antes de pasar a algunos buenos ejemplos de controles deslizantes de sitios web, entendamos que los conceptos básicos son como usarlos correctamente
Los controles deslizantes del sitio web deben usarse en el momento adecuado, en el lugar correcto. Los controles deslizantes pueden ser buenos cuando se usan para ahorrar espacio, si tiene mucha información para mostrar, un control deslizante es una forma simple y receptiva de mostrar contenido en múltiples dispositivos, de manera eficiente.
Ayuda de los controles deslizantes del sitio web consolidar el contenido web en una sola ubicaciónahorrando tiempo en el desplazamiento o en la altura de las páginas cuando hay mucho contenido para mostrar.
Los efectos de animación y transición ayudan a atraer a los usuarios y mantenerlos interesados.. Las imágenes entre diapositivas mantienen a los usuarios viendo solo el contenido que necesitan mientras lo consumen, una vez que han terminado, pueden pasar fácilmente a centrarse en el nuevo contenido, sin que el contenido anterior se interponga en el camino.
Sitios web deslizantes aprovechar al máximo todo el espacio de la pantalla, esto es bueno para los dispositivos móviles, ya que las pantallas pequeñas se benefician del contenido que utiliza la ventana gráfica completa del navegador. Las imágenes y el texto pueden ser más grandes y más fáciles de ver, especialmente por razones de accesibilidad.
Cómo usar el sitio web correctamente
Cuando se usan correctamente, los controles deslizantes del sitio web evitan que los usuarios se distraigan, el contenido se mantiene a la vista para lo que necesitan en ese momento, por lo que es más fácil digerir temas, videos o imágenes.
Ahora podemos ver algunos grandes ejemplos de cómo y cuándo usar los controles deslizantes del sitio web
1. Use controles deslizantes fáciles de navegar
No son adecuados para todos los diseños o estructuras, piense en los controles deslizantes como una forma de mejorar el contenido o involucrar a los usuarios en un tema en particular, no como una forma de mostrar el contenido para el que no tenía un plan.
Asegúrese de que los controles deslizantes no distraigan ni molesten a los usuarios al restringir la información o reducir la rapidez con la que los usuarios pueden acceder a la información. La ruta de navegación para los controles deslizantes debe ser clara y fácil de navegar, no confusa.
Desea que las animaciones y las transiciones sean rápidas, fluidas y sin demoras, así que no te vuelvas loco con esto, recuerda que cada dispositivo también necesita manejar cada animación. Un simple desvanecimiento y una transición corta serán suficientes para lograr el efecto; de lo contrario, podría parecer de mal gusto.
Tome el ejemplo anterior, podemos ver claramente que se está utilizando un control deslizante. En la parte inferior izquierda podemos ver círculos que indican rápidamente el contenido para deslizar, en la parte inferior derecha tenemos un sistema numerado para ver dónde estamos, es rápido para entender lo que está pasando.
Es importante asegurarse de tener un indicador claro con flechas o números para facilitar la navegación. Los dispositivos móviles deberían poder deslizar y navegar de esa manera. Probablemente sea mejor activar la reproducción automática, esto puede hacer que los usuarios se sientan nerviosos porque el efecto del temporizador se vuelve molesto al leer el contenido y simplemente se mueve sin previo aviso. La reproducción automática solo es útil para contenido más pequeño o cuando se mueve a través de imágenes o logotipos.
2. Use los controles deslizantes del sitio web para contar una historia
Un visitante que ve una gran cantidad de información, listas, imágenes o pasos, etc. Puede ser abrumador para un usuario y es difícil seguirlo, mientras que un diseño de sitio web deslizante puede ayudar a contar una historia.
Por ejemplo, un control deslizante como fullPage.js se puede usar para ayudar a mostrar las funciones de un producto o servicio a un usuario, especialmente algo que ya es atractivo como un videojuego. Un control deslizante puede ofrecer un conjunto de pasos a seguir fáciles de navegarmanteniendo únicamente la información requerida a la vista del usuario.
Un buen uso para contar una historia es incorporar nuevos usuarios o empleados, un control deslizante es interactivo y fácil de navegar sin abrumar al usuario con información.
3. Use controles deslizantes para ayudar a los espectadores a comprender más rápido
Como dije antes, un control deslizante es una excelente manera de consolidar y mostrar grandes cantidades de información en un solo lugar y dividir grandes fragmentos de texto o diagramas. Un control deslizante se puede usar fácilmente como un encabezado de héroe para un sitio web, lo que ayuda al usuario a comprender mucho más rápido lo que el sitio web tiene para ofrecer.
A menudo, un usuario que ingresa a un sitio web quiere saber de inmediato qué hace el sitio web y qué beneficios le brinda. Un control deslizante puede ser una forma más rápida de asegurar a un usuario lo que vino a buscar. Proporciona una breve descripción de contenido o características de manera consumible, permite a los visitantes tomar una decisión más rápida sobre la información que se les ha proporcionado.
Los controles deslizantes son excelentes en sitios web que se actualizan con frecuencia. Los controles deslizantes se pueden usar como puntos de enfoque para nueva información o contenido. Permitir que los usuarios obtengan las últimas actualizaciones sin tener que navegar por un artículo extenso al principio.
Ventajas de un ejemplo de control deslizante bien diseñado
A lo largo de este artículo se menciona un proyecto de control deslizante llamado fullPage.js y contiene múltiples características que lo ayudan a destacarse de muchos proyectos de control deslizante. Con todos los puntos negativos sobre los controles deslizantes, fullPage.js solo es positivo, no rompe ninguna de las reglas de un buen control deslizante.
El siguiente ejemplo muestra cómo fullPage.js lo hace Fácil de navegar, nada nos confunde a simple vista. Tenemos flechas grandes fáciles de usar y podemos entender rápidamente dónde estamos en la navegación deslizante con los puntos en el lado derecho de la página.
Nuevamente, el las animaciones y las transiciones son simples, suave, y no loco. No distraen la atención del contenido y ayudan a crear un punto focal para el usuario.
Y lo mejor de todo es que todo es receptivo y listo para tocar para dispositivos móviles. Funciona tan bien en el escritorio como en los móviles.
Podemos agregar fácilmente contenido a la página del sitio web del control deslizante y tenemos varias formas de expandirlo para que el diseño no se abarrote, ya que podemos continuar hacia arriba, hacia abajo o hacia la izquierda y hacia la derecha.
Conclusión
No todos los sitios web se beneficiarán del uso de un diseño basado en controles deslizantes, necesita el contenido correcto y los casos de uso para no hacer un mal uso del diseño del control deslizante. Puede ser un elemento poderoso y atractivo cuando se usa correctamente, lo cual cubrimos en este artículo.
No confíe en los instintos del usuario: asegúrese de que cualquier control deslizante tenga una navegación y diseños claros, de lo contrario, se confundirán y harán clic. Es importante que los controles deslizantes se ajusten a su marca y diseño, de lo contrario, se verán de mal gusto y como si no supiera qué hacer para una página específica.
Los retrasos son problemáticos y probablemente deberían desactivarse, dejar que el usuario navegue en su propio tiempo, no molestarlos ni apresurarlos con la información.
Use los controles deslizantes del sitio web para contar una historia y ayudar al usuario a navegar a través de grandes cantidades de información e imágenes. Los controles deslizantes son una excelente manera de crear un punto focal que sea dinámico e interactivo.
Artículos relacionados
Más artículos que te pueden resultar interesantes.
Sobre el Autor:
lucas embrey es un desarrollador full-stack, BSc en Ciencias de la Computación y con sede en el Reino Unido.
Puedes saber más sobre él en https://lukeembrey.com/
