Saltar al contenido principal

Carrusel

Descripción general​

El patrón de carrusel muestra una colección de imágenes o contenido de manera rotativa. Por lo general, consiste en un conjunto de diapositivas por las que se puede navegar mediante botones de flecha o indicadores. El carrusel proporciona una forma visualmente atractiva e interactiva de mostrar información, y permite a los usuarios navegar fácilmente por el contenido. A menudo, se utiliza en sitios web y aplicaciones para resaltar características, productos o noticias clave. Los patrones de carrusel generalmente incluyen opciones personalizables, como efectos de transición de deslizamiento, reproducción automática y la capacidad de controlar la velocidad de rotación.

Cuándo se debe utilizar​

  • Para mostrar una colección de imágenes o contenido. Los carruseles son ideales para mostrar una serie de imágenes, listados de productos, testimonios o cualquier otro tipo de contenido por el que haya que desplazarse.
  • Para destacar características o ascensos clave. Los carruseles se pueden usar para llamar la atención y mostrar información importante u ofertas especiales.
  • Para narrativa publicitaria o visual. Los carruseles se pueden utilizar para contar una historia visual mostrando una secuencia de imágenes o contenido que siga una narración.

Cuándo no se debe utilizar​

  • Para el contenido que es fundamental para la finalización de la tarea. Si el contenido es crucial y debe ser visto por la mayoría de los usuarios, es mejor no usar un carrusel, ya que algunos usuarios quizás no lo vean.
  • Cuando hay inquietudes ante la accesibilidad. A veces, los carruseles pueden crear problemas de accesibilidad, especialmente para los usuarios con dificultades para navegar o comprender el contenido.
  • Para dispositivos móviles con espacio de pantalla reducido. Es posible que los carruseles no funcionen bien en pantallas más pequeñas o dispositivos móviles donde el espacio sea reducido, ya que el contenido puede resultar demasiado pequeño o abarrotado.
  • Para contenido de carga lenta. Si las imágenes o el contenido del carrusel tardan una cantidad significativa de tiempo en cargarse, puede frustrar a los usuarios y perjudicar la experiencia del usuario.

Anatomía​

Anatomía del patrón de carrusel

  1. Contenedor: Elemento más externo que contiene todo el componente carrusel. Actúa como un cuadro delimitador para el carrusel y establece sus dimensiones.
  2. Diapositivas: Paneles individuales donde se encuentra el contenido o las imágenes que se mostrarán dentro del carrusel. Las diapositivas se apilan horizontal o verticalmente, según el diseño, y se puede navegar por ellas mediante flechas o indicadores.
  3. Flechas de navegación: Permiten a los usuarios desplazarse manualmente a la diapositiva anterior o siguiente. Las flechas de navegación suelen aparecer como flechas hacia la izquierda y la derecha a ambos lados del contenedor del carrusel.
  4. Leyenda: Proporciona contexto o información adicional sobre el contenido que se muestra. Las leyendas se pueden mostrar arriba, abajo o superpuestas en las diapositivas.
  5. Indicadores: Pequeños puntos o íconos en los que se puede hacer clic que representan la cantidad de diapositivas del carrusel. Los indicadores proporcionan señales visuales que indican la diapositiva actual o permiten a los usuarios ir directamente a una diapositiva específica.

Contenido​

Pautas generales de redacción​

  • En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
  • Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
  • Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
  • Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
  • Las palabras y las oraciones deben ser breves.

Accesibilidad​

Para asegurarse de que el carrusel sea accesible para los usuarios con discapacidades, siga estas prácticas recomendadas:

Navegación por teclado: Permita a los usuarios navegar por el carrusel utilizando entradas de teclado, como las teclas de flecha o Tab. Asegúrese de mantener el foco en la diapositiva activa y de que los usuarios puedan activar los botones o indicadores de navegación con el teclado.

Roles y rótulos de ARIA: Utilice los roles y los rótulos de Aplicaciones de Internet Enriquecidas Accesibles (Accessible Rich Internet Applications, ARIA) adecuadas para mejorar la accesibilidad. Asigne el rol de “carrusel” al elemento contenedor y utilice los atributos ARIA para describir la funcionalidad, como “aria-live” para las actualizaciones en directo.

Gestión del foco: Asegúrese de que el foco se administre correctamente a medida que los usuarios navegan por el carrusel. Cuando se active una nueva diapositiva, establezca el foco en el contenido relevante de la diapositiva y actualice los atributos tabindex según corresponda.

Compatibilidad con lectores de pantalla: Asegúrese de que el carrusel y sus controles asociados sean compatibles con lectores de pantalla. Utilice elementos HTML semánticos, proporcione texto alternativo descriptivo para las imágenes y asegúrese de que los elementos interactivos estén rotulados correctamente con texto accesible.

Pausa en la interacción: Si el carrusel tiene una función de reproducción automática, proporcione un mecanismo para pausar o detener la rotación automática cuando los usuarios interactúen con el carrusel. Esto permite a los usuarios que necesitan más tiempo revisar o interactuar con el contenido sin que cambie continuamente.

Pruebas con tecnologías de asistencia: Pruebe el componente carrusel con lectores de pantalla, navegación por teclado y otras tecnologías de asistencia para asegurarse de que sea totalmente accesible. Resuelva cualquier problema o inconsistencia identificada durante las pruebas.

Interacciones​

Navegación manual por diapositivas:

  • Utilice las flechas de navegación para ir a la diapositiva anterior o siguiente.
  • Pulse o haga clic en la flecha izquierda para ir a la diapositiva anterior. Pulse o haga clic en la flecha derecha para ir a la siguiente diapositiva.

Selección de indicadores:

  • Pulse o haga clic en los indicadores para ir directamente a una diapositiva específica.
  • Seleccione la diapositiva deseada haciendo clic o tocando el punto indicador correspondiente.

Gestos de deslizamiento:

  • Deslice el dedo hacia la izquierda o hacia la derecha por el carrusel para navegar por las diapositivas en dispositivos táctiles.

Navegación por teclado:

  • Utilice las teclas de flecha para desplazarse de una diapositiva a otra. Presione la tecla de flecha izquierda para ir a la diapositiva anterior y la de flecha derecha para la siguiente diapositiva.
  • Desplácese con el tabulador por los controles del carrusel y pulse Intro o la barra espaciadora para activarlos cuando navegue con el teclado.

Capacidad de ser responsive​

El patrón de carrusel está diseñado para adaptarse y funcionar bien en diferentes dispositivos y tamaños de pantalla. Aparece dentro del cajón lateral. Cuando incorpore el carrusel en su propio trabajo de diseño, asegúrese de que el contenido sea fácilmente legible y accesible, incluso en pantallas más pequeñas, y de que los gestos táctiles sean compatibles para los usuarios móviles.

Tematización​

De forma predeterminada, los temas y la marca coinciden con los de la aplicación, a menos que se invaliden.

Los patrones pueden adoptar ciertos temas para cumplir con los requisitos específicos de la marca y las necesidades del cliente. Esto incluye elementos visuales como colores, tipografía, íconos, botones y otros componentes o elementos gráficos.

Más información sobre la tematización con tokens de diseño

Investigación que lo avala​

Material Design de Google: Los diseñadores de UX estudiaron el sistema de diseño de materiales de Google y revisaron la documentación oficial, incluidos los principios, las pautas y los componentes disponibles. Además, analizaron estudios de casos y ejemplos de diseño para observar cómo Material Design se implementó de manera efectiva en diversos contextos.

Bootstrap: Los diseñadores de UX investigaron el marco de Bootstrap y la documentación correspondiente, incluido el sistema de cuadrícula, las clases CSS y los componentes prediseñados proporcionados por Bootstrap. También examinaron las opciones de personalización, las características de diseño responsive y la capacidad de aplicación del marco.

React: Los diseñadores de UX investigaron React, una biblioteca de JavaScript para crear interfaces de usuario, incluida la arquitectura basada en componentes de React, su funcionalidad y las bibliotecas de componentes de interfaz de usuario disponibles que se integran con React. También examinaron la documentación oficial de React, así como varios recursos y tutoriales de la comunidad.

Salesforce Lightning: Los diseñadores de UX investigaron Salesforce Lightning Design System, incluida la documentación oficial, los principios básicos de diseño, los componentes y las pautas. También investigaron los patrones de implementación y los marcos conectados a Salesforce Lightning Design System.

Apple: Los diseñadores de UX investigaron el sistema de diseño de Apple, incluida la documentación oficial. Esto permitió a los diseñadores de UX comprender mejor los controles de página y la diferente perspectiva que Apple aporta a las acciones de carrusel. Tomamos nota de las prácticas recomendadas, lo que se debe y lo que no se debe hacer, así como las consideraciones sobre la personalización y la plataforma.

Componentes​

Patrones​

Recursos​

Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.

Biblioteca de patrones de Jutro (19.6 MB)