he escrito sobre diseño web carrusel antes y hay muchos tipos diferentes, desde controles deslizantes de noticias y controles deslizantes de comercio electrónico, pero ¿siguen todos las mejores prácticas?
Eso es algo que este artículo responderá por ti. En esta publicación, el objetivo es revise algunos ejemplos de carrusel web y comprenda lo que hace que una interfaz de usuario de carrusel sea buena y qué diseño funciona bien.
No hay duda de que las redes de carrusel son extremadamente populares entre la comunidad de desarrolladores web. Son una manera tan fácil de mostrar una gran cantidad de información o contenido en una sola área. Y no es difícil crear un carrusel con CSS puro.
Prácticamente todos los navegadores modernos los admiten, pero… ¿merece la pena? ¿Cuáles son los beneficios y funcionan para todo tipo de público?
Entremos y descubramos.
¿Qué es una interfaz de usuario de carrusel?
Una interfaz de usuario de carrusel (interfaz de usuario de carrusel) es un elemento del sitio web que muestra la información en un conjunto de elementos que podemos deslizar, desvanecer o mover de alguna manera a la vista. Puede ser una presentación de diapositivas de imágenes, textos, videos o una combinación de todos ellos.
Por ejemplo, puede tener un sitio web de destino de productos que venda ropa y tener un carrusel de productos que se desliza entre cada conjunto de ropa, a veces un número limitado como 5 o a veces infinito.
Tome el ejemplo a continuación. Este es claramente un carrusel deslizante y muestra cómo no solo tienen que ser imágenes: cada elemento es una tarjeta HTML formada por muchos componentes.
Su navegador no soporta la etiqueta de vídeo.
Podemos ver las viñetas que actúan como una indicación de cuántos elementos hay en el carrusel y las flechas izquierda y derecha indican que podemos cambiar entre más.
Arriba hay un ejemplo clásico, pero los controles deslizantes de carrusel pueden venir en todas las formas y tamaños. Ahora que sabemos cuáles son, debemos entender qué hace que un buen diseño de sitio web carrusel.
¿Los carruseles son buenos para UX?
Los carruseles son generalmente una buena práctica desde el punto de vista de UX (experiencia del usuario), siempre que los use en los lugares correctos, para el propósito correcto y de la manera correcta.
Es ampliamente conocido que los carruseles no son una buena práctica para convertir a los usuarios, ya que es probable que los visitantes se salten partes del carrusel.
Sin embargo, esto no se aplicará a todos los tipos de carruseles y no necesariamente mostraremos información vital en diapositivas secundarias.
Podrá encontrar carruseles en los sitios web más grandes que existen. Desde Youtube a Netflix, Amazon, Apple, Dreamworks… Los carruseles son un elemento de interfaz de usuario que llegó para quedarse y que seguirá siendo muy utilizado porque cumplen un gran propósito cuando se usan correctamente.
Mejores prácticas de interfaz de usuario de carrusel
Después de ver algunos ejemplos de diseño web de carrusel del mundo real, debería poder entender de lo que he estado hablando con un buen diseño: los carruseles deben usarse con cuidado y presentar una navegación fácil.
Aquí hay algunos puntos clave y pautas vitales al considerar implementar un carrusel usted mismo en su sitio web.
Solo incluya al menos 3-4 diapositivas mínimas y no pase de 10 diapositivas. La gente a menudo como “¿Cuántos artículos debe haber en un carrusel?Tener muy pocas parecerá inútil y probablemente sea mejor elegir una diapositiva y usarla sin un carrusel web. Demasiadas diapositivas tampoco tendrán sentido porque el usuario probablemente no verá tantas, por lo general le gusta desplazarse.
Use imágenes, gráficos y videos de alta resolución. La mayoría de las veces, los carruseles web se utilizan en secciones grandes, como en las páginas de destino en la parte superior, donde estará la sección principal. La mala resolución no hará que su diseño se vea bien y será desagradable para los visitantes, usted quiere verse profesional.
Intente incluir botones CTA (Llamada a la acción) útiles sobre la parte superior de cada diapositiva en la interfaz de usuario del carrusel. Si bien es bueno mostrar una imagen, si al usuario le gusta lo que ve, guíelo a otra página para aumentar el tráfico.
Indique siempre cuántas diapositivas hay. Si no lo hace, un usuario puede sentirse perdido y aburrido porque no sabe, que se sienta en control del sitio web. Utilice números o puntos de navegación. Hemos explicado aquí cómo crear una barra lateral de navegación con viñetas.
Apégate siempre a la navegación que simplemente funciona. Con eso me refiero solo a tus flechas izquierda y derecha y no te molestes en intentar hacer algo elegante. Se siente natural ver flechas y son fáciles de entender.
Ofrezca un botón de pausa para que el usuario pueda ver el contenido en su propio tiempo. Si tiene muchas diapositivas y quiere usar la reproducción automática, asegúrese de que no se reproduzca demasiado rápido, esto puede resultar molesto para el usuario. Que se sientan en control.
Asegúrese de que el sonido esté siempre silenciado y ofrezca un botón para reactivar el sonido: a nadie le gusta la reproducción automática de música en un sitio web, un usuario hará clic para salir.
Probablemente sea mejor tener solo un máximo de 2 carruseles por página. Por lo general, una interfaz de usuario de carrusel funciona mejor como evento principal, como en la parte superior o en la sección principal. Más de 2 en una sola página será una tarea para los usuarios hacer clic, solo use carruseles web para la participación.
Ejemplos de interfaz de usuario de carrusel
Ahora que hemos aprendido más sobre qué características hacen que un diseño web de carrusel sea excelente y por qué son importantes, quiero mostrarle algunos ejemplos de controles deslizantes de interfaz de usuario de carrusel que funcionan realmente.
1. Dreamworks – Carrusel de pantalla completa
Su navegador no soporta la etiqueta de vídeo.
Dreamworks utiliza un gran carrusel en su página de destino para anunciar su película. Toda la página se comporta como un carrusel de pantalla completa que se ajusta a la sección siguiente/anterior. De esta manera, crea una experiencia de usuario única que viene con muchos beneficios desde el punto de vista del marketing.
Las imágenes se ajustan perfectamente a la vista y el usuario termina teniendo una gran experiencia inmersiva.
Su navegador no soporta la etiqueta de vídeo.
2. PlazaEspacio
Su navegador no soporta la etiqueta de vídeo.
Squarespace es un sitio web conocido por su servicio de creación web. Su página de inicio obviamente debe ser mínima e impresionante. Y sí, también están usando un carrusel.
Su carrusel muestra un sistema de navegación claro que utiliza números de diapositivas y flechas simples para guiarnos. Todo el carrusel solo usa una animación deslizante simple que es sutil y funciona bien.
Cuando llega al final, el carrusel web se repite desde el principio, por lo que el usuario puede comenzar el carrusel nuevamente. No están obligados a hacer clic rápidamente para volver al inicio, excelente para la usabilidad. Muy interesante la interfaz de usuario de Carrusel, ¿no?
3. Interfaz de usuario del carrusel de Netflix
Su navegador no soporta la etiqueta de vídeo.
Netflix hace uso de múltiples carruseles horizontales para brindarnos una forma rápida de deslizarnos a través de películas dentro de diferentes categorías.
Es un gran ejemplo de cómo el uso de una interfaz de usuario de carrusel puede proporcionar una mejor manera de navegar por el contenido de un sitio web. Ahorramos espacio y seguimos brindando a los visitantes una excelente experiencia de usuario al permitirles acceder a más información en la misma página si así lo desean.
4. Dreamworks – Interfaz de usuario del carrusel del sitio web
Su navegador no soporta la etiqueta de vídeo.
Otro gran ejemplo de cómo el diseño de carrusel de un sitio web muestra de manera efectiva una gran cantidad de contenido en un área. Este usa un diseño de pantalla completa pero solo en la vista horizontal y no usa el espacio vertical en absoluto.
Cada diapositiva utiliza toda la pantalla e imágenes impresionantes para atraer a los usuarios. La navegación es fantástica: solo botones simples que están muy bien incluidos en el diseño.
Tenemos los puntos en la parte inferior central para indicar dónde estamos y una página incluso tiene una subpágina indicada por la línea entre los puntos.
La transición entre diapositivas utiliza una elegante animación de zoom circular, funciona bien y es fluida, sin retrasos ni mal rendimiento. Esta elegante transición anima al usuario a hacer clic para ver otra página/diapositiva.
5. Amazon – interfaz de usuario de carrusel
Su navegador no soporta la etiqueta de vídeo.
Al igual que Netflix, Amazon también utiliza múltiples carruseles horizontales en su sitio web principal, así como en otras subpáginas.
Cuando la gente pregunta: “¿Son buenos los carruseles de UX?”. La respuesta solo puede ser SÍ. Hay grandes usos para carruseles y los sitios web más grandes del mundo los utilizan de la manera correcta.
Su navegador no soporta la etiqueta de vídeo.
6. Usain Bolt
Aquí tenemos un ejemplo de interfaz de usuario de carrusel más tradicional. Inmediatamente, considerando lo que discutimos anteriormente, sabemos que tenemos un carrusel web: está claro por las flechas izquierda y derecha que son fáciles de ver.
El carrusel está en reproducción automática y utiliza un tiempo de espera justo de alrededor de 8 a 10 segundos, por lo que las imágenes no cambian demasiado y se sienten equilibradas. También tenemos control sobre el cambio mediante el uso de la navegación.
Otra gran característica que tenemos es que, en lugar de puntos de indicación, tenemos un indicador en miniatura debajo del carrusel en el que también podemos hacer clic para navegar.
Pensamientos finales
Entonces, hemos repasado lo que define un carrusel web, hemos aprendido qué hace que una buena interfaz de usuario de carrusel sea excelente y hemos visto algunos ejemplos del mundo real.
Después de ver los ejemplos, esto debería ponerlo en el estado de ánimo correcto si está pensando en usar un carrusel, siga las pautas que he establecido y debería estar absolutamente bien.
Los carruseles son increíbles para mostrar contenido mientras maximizan el espacio en la pantalla, ayudan a atraer al usuario y brindan interactividad a su sitio web. Solo ten cuidado y no los uses en exceso. Si bien a la mayoría de las audiencias no les importará un carrusel, deberá considerar las funciones requeridas para cada audiencia y mantener la interfaz de usuario del carrusel útil y no molesta.
Artículos relacionados
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/
