Carrusel

Componentes

Carrusel

El carrusel es un componente de presentación de diapositivas para recorrer elementos, a través de imágenes o textos.

Los carruseles suelen sustituir las imágenes estáticas que se ubican en la parte alta del diseño de la interfaz o UI. Utilizar una imagen estática garantiza que el mensaje se va a transmitir y será percibido por los usuarios.

Al utilizar un carrusel, nunca se ha de asumir que los usuarios verán todas las imágenes o contenidos que en éste se incluyan. Es recomendable volver a impactar con los mismos mensajes, ,en otras posiciones dentro de la interfaz de usuario, para que las personas que interactúan tengan la oportunidad de visualizarlos.

Buenas prácticas

  • No incluir más de 5 pases, slides o fotogramas dentro del carrusel
    Incluir muchos pases de diapositivas dentro del carrusel, puede ser abrumador y agotador para el usuario. Aumenta la carga cognitiva y se dispersa la atención entre los mensajes que se quieren comunicar.
    Limitar el número de pases dentro del carrusel, ayuda a que el usuario descubra el contenido y tenga que recordar menos mensajes.
  • Utilizar marcadores de posición para que el usuario tenga el control
    Estos marcadores ayudarán al usuario a conocer cuántos pases existen, en qué cuál se encuentran ubicado y les proporciona la sensación de control sobre el componente o carrusel.
  • Incluir los controles de navegación dentro del carrusel
    Los botones de navegación deben ser lo suficientemente grandes y proporcionados, para que no interrumpan la buena experiencia de uso en cualquier dispositivo.
  • Priorizar los elementos del carrusel y conceder un acceso secuencial
    Es necesario priorizar los pases o diapositivas del carrusel. De esta manera, las diapositivas que contengan información relevante, deben mostrarse dentro de las primeras ubicaciones.
  • Proporcionar la ilusión de continuidad
    Es común que un usuario, con cierta prisa, no perciba la presencia de un carrusel. Esto ocurre frecuentemente en dispositivos móviles.
    Los puntos o líneas como marcadores de posición, las flechas como elementos de navegación y el mostrar parte de la siguiente diapositiva, permitirán que el usuario comprenda que se encuentra ante un componente distinto dentro de la interfaz, indicando que existe más contenido oculto horizontalmente.
  • Incluir el deslizamiento
    Cuando los usuarios quieren interactuar con el componente carrusel en una pantalla táctil, intuitivamente deslizarán utilizando su dedo. No incluir esta acción podría generar una mala experiencia de navegación.

Carrusel principal

uft-carousel


        


<div class="uft-carousel" data-carousel data-navs="true" data-indicators="true">


    <div class="uft-carousel-inner">


        <div class="uft-carousel-item">


            <img src="https://dummyimage.com/1200x16:9/?text=slide 1" alt="Imagen 01">


            <div class="uft-carousel-content">


                <div class="container">


                    <h2 class="text-white">Postgrados - Admisión 2024</h2>


                    <p class="text-white">Buscamos integrar conocimientos para transformar el mundo</p>


                    <div>


                        <a href="#" class="uft-btn uft-btn--primary">


                            Explorar más


                            <i class="uft-icon uft-icon--rounded">add</i>


                        </a>


                    </div>


                </div>


            </div>


        </div>


        <div class="uft-carousel-item">


            <img src="https://dummyimage.com/1200x16:9/?text=slide 2" alt="Imagen 02">


        </div>


        <div class="uft-carousel-item">


            <img src="https://dummyimage.com/1200x16:9/?text=slide 3" alt="Imagen 03">


        </div>


        <div class="uft-carousel-item">


            <img src="https://dummyimage.com/1200x16:9/?text=slide 4" alt="Imagen 04">


        </div>


    </div>


</div>

El objetivo del carrusel principal, es destacar contenido relevante y su ubicación debe estar siempre al inicio del sitio web.

Debe estar compuesto por una imagen representativa, título, subtítulo y un enlac que permita llevar a la página de destino. Es importante que los textos empleados sean claros y concisos para segurar que el mensaje sea asimilado rápidamente por el usuario.

Es recomendable no mostrar más de cinco elementos o slides en este tipo de carrusel.

Carrusel área destacada

uft-carousel--franja


        


<div class="uft-carousel uft-carousel--franja" data-carousel data-navs="true" data-indicators="true">


    <div class="container mb-4">


        <h3 class="text-white">Investigación, Innovación y Creación Artística</h3>


    </div>


    <div class="uft-carousel-inner">


        <div class="uft-carousel-item">


            <img src="https://dummyimage.com/1200x16:9/?text=slide 1" alt="Imagen 01">


            <div class="uft-carousel-content">


                <h4 class="text-white">Postgrados - Admisión 2024</h4>


                <p class="text-white">Buscamos integrar conocimientos para transformar el mundo</p>


                <div>


                    <a href="#" class="uft-btn uft-btn--primary">


                        Explorar más


                        <i class="uft-icon uft-icon--rounded">add</i>


                    </a>


                </div>


            </div>


        </div>


        <div class="uft-carousel-item">


            <img src="https://dummyimage.com/1200x16:9/?text=slide 2" alt="Imagen 02">


            <div class="uft-carousel-content">


                <h4 class="text-white">Postgrados - Admisión 2024</h4>


                <p class="text-white">Buscamos integrar conocimientos para transformar el mundo</p>


                <div>


                    <a href="#" class="uft-btn uft-btn--primary">


                        Explorar más


                        <i class="uft-icon uft-icon--rounded">add</i>


                    </a>


                </div>


            </div>


        </div>


        <div class="uft-carousel-item">


            <img src="https://dummyimage.com/1200x16:9/?text=slide 3" alt="Imagen 03">


            <div class="uft-carousel-content">


                <h4 class="text-white">Postgrados - Admisión 2024</h4>


                <p class="text-white">Buscamos integrar conocimientos para transformar el mundo</p>


                <div>


                    <a href="#" class="uft-btn uft-btn--primary">


                        Explorar más


                        <i class="uft-icon uft-icon--rounded">add</i>


                    </a>


                </div>


            </div>


        </div>


        <div class="uft-carousel-item">


            <img src="https://dummyimage.com/1200x16:9/?text=slide 4" alt="Imagen 04">


            <div class="uft-carousel-content">


                <h4 class="text-white">Postgrados - Admisión 2024</h4>


                <p class="text-white">Buscamos integrar conocimientos para transformar el mundo</p>


                <div>


                    <a href="#" class="uft-btn uft-btn--primary">


                        Explorar más


                        <i class="uft-icon uft-icon--rounded">add</i>


                    </a>


                </div>


            </div>


        </div>


    </div>


</div>