Carruseles de imágenes en diseño web - Beneficios y mejores prácticas

No hay escasez de diapositivas de la característica del carrusel En la red. De hecho, esta tendencia no ha hecho más que crecer en los últimos 5-10 años con más soporte de navegador ahora que nunca. ¿Pero los carruseles de imágenes realmente valen el esfuerzo? ¿Qué tipo de beneficios producen y cómo deben usarse de manera productiva en un diseño??

Me gustaria compartir algunos Tendencias comunes, ejemplos en vivo e ideas. Para diseñadores web interesados ​​en carruseles de imagen. Estos controles deslizantes dinámicos son muy debatidos, pero creo que agregan valor cuando se crean en el contexto correcto.

Carruseles de productos para comercio electrónico.

El mundo del comercio electrónico está lleno de carruseles giratorios en las páginas de inicio y las páginas de productos. La meta es Mantener una densidad de información clara. con fotos y texto que contar una historia única pero valiosa para ayudar a vender productos.

Existen dos colocaciones primarias para un control deslizante de productos de comercio electrónico:

1. En la página de inicio de una tienda.
2. En una pagina de producto

Ambos trabajan de manera diferente pero servir el mismo objetivo - vender productos de manera visual.

Ejemplo 1: Au Lit Fine Linens - Página de inicio

Eche un vistazo a la página de inicio de Au Lit Fine Linens, que utiliza un carrusel de rotación automática de pantalla completa para mostrar diferentes productos, como edredones, almohadas y cubrecamas.

Las imagenes ocupar todo el ancho de la página de inicio, y ellos aparece muy por encima del pliegue. De hecho, este control deslizante debe ser lo primero que llame su atención cuando llegue por primera vez a la página. Cada diapositiva conduce a una página diferente en el sitio para guiar a los clientes a través de la experiencia de compra.

Este control deslizante puede ser un poco intimidante al llegar a la página por primera vez, pero con el enlace de botón y texto superpuesto También puede ser muy alentador para los visitantes que solo quieren bucear y comprar..

Ejemplo 2: caja del teléfono Eden - página del producto

Puede ver un ejemplo más específico en la página del producto de la caja del teléfono Eden. Utiliza un deslizador de rotación automática para mostrar imágenes del producto.

Encuentro esto para ser un poco “demasiado” En el mundo del comercio electrónico. Al mirar un producto quiero ser en control de cambio entre imagenes.

La mejor opción es hacer una galería de imágenes. Con control dado al visitante.. Por ejemplo, la página Diseño por Humanos utiliza miniaturas para cada foto Lo cual es mucho más alentador, y otorga más control al usuario..

Carruseles de portafolio web

Los portafolios de los sitios web en línea son un poco diferentes porque estas diapositivas No siempre hagas clic en otra página.. Es cierto que algunos llevarán a un estudio de caso o escribirán sobre un proyecto, pero muchos carruseles en sitios web de portafolio están destinados a mostrar el trabajo visual.

Ejemplo 1: Biboun - página de inicio

El artista francés que trabaja bajo el nombre de Biboun tiene un deslizador de carrusel en la página de inicio con fragmentos de obras de arte. Las diapositivas individuales conducen a páginas internas en la cartera que cubrir un proyecto completo con multiples fotos.

Esto es probable la mejor manera de hacer un control deslizante en un sitio web de cartera. Solo mostrar una lista aleatoria de trabajos no tiene sentido a menos que esos trabajos específicos tengan una razón para ser exhibidos.

Todas las piezas son Exquisito en el control deslizante de Biboun, y no ocupa mucho espacio ya sea. Aunque sé que algunas personas odian las presentaciones de giros automáticos por una buena razón, en un diseño tan minimalista me cuesta mucho quejarme de esta característica de diseño..

Ejemplo 2: sitio web de Aaron Blaise - página de inicio

Me gusta mucho el ejemplo que se encuentra en el sitio web de Aaron Blaise porque él muestra su trabajo como portafolio., pero en su mayoría utiliza este sitio web para vender sus videos de arte. Aaron Blaise trabajó en Disney durante un par de décadas y tiene la capacidad para demostrarlo..

Si bien el control deslizante de la página de inicio en su sitio gira automáticamente, no me parece increíblemente molesto o fuera de lugar. Cada diapositiva Tiene un poco de contenido relevante para la imagen., y ayuda a Aaron Llamar la atención sobre sus últimas lecciones en video. Que enseñan a jóvenes artistas a dominar habilidades específicas..

Un gran carrusel de cartera. se enfoca en visuales, y lleva a los visitantes más lejos en el sitio web. Si pudiera obtener estas dos cosas, entonces no estaría en contra de una característica como esta en un sitio web de cartera personal..

Tendencias de diseño comunes

Si observa algunos de mis ejemplos anteriores, notará que generalmente hay dos tipos diferentes de controles deslizantes: pantalla completa y ancho fijo.

Estas elecciones estilísticas a menudo relacionarse con el diseño y a cuánto contenido puede contener. Si un diseño abarca todo el ancho de la página, también tiene sentido ampliar el control deslizante. Pero esto también te obliga a encontrar imágenes de alta calidad que todavía se ven bien en pantalla completa en monitores de gran resolución.

Personalmente prefiero el estilo de ancho fijo como verá en los ejemplos de dos carteras de arte. Estos son mucho más fácil de controlar, y son a menudo no tan alto - facilitando a los visitantes simplemente ignóralos si lo desean.

También considere el valor de las diapositivas de avance automático, y que dificil puede ser para que los usuarios capten este contenido. Hay un gran estudio de caso del Grupo Nielsen Norman que muestra que es mejor No tener deslizadores de avance automático.

Estoy de acuerdo con este enfoque en el sentido de que es menos intensivo en memoria con menos animaciones y movimiento en el navegador, y a la mayoría de las personas tampoco les gustan los carruseles de rotación automática, y siempre debe atender a su audiencia.

Sin embargo, no puedo decir que nunca vale la pena agregar un control deslizante de avance automático, especialmente porque con controles deslizantes estáticos no hay tantas vistas, y también necesitas Haz tu primera diapositiva lo más importante ya que muchos usuarios no pasarán a la siguiente diapositiva. Decidir si hacer que un deslizador gire automáticamente o no es desafortunadamente un área de prueba y error.

Qué evitar a toda costa

Aquí hay una cosa importante que personalmente pienso cae bajo “evitar a toda costa”. Eche un vistazo o haga clic en la captura de pantalla a continuación, e intente adivinar qué puede ser.

El sitio web de la cafetería Yozenn utiliza un control deslizante de encabezado de pantalla completa. No gira automáticamente, lo que es genial, sin embargo, las diapositivas también no tiene otro propósito que la decoración.

Las imagenes no vincules a ningún lado, y muestran un pequeño puñado de productos. Todos podrían ser simplemente añadido al fondo de la página de inicio sin el control deslizante para guardar la confusión y kilobytes adicionales de JavaScript.

Yo diría que esta función de deslizamiento en segundo plano no agrega mucho valor a un sitio web ya abarrotado. Si las imágenes tuvieran enlaces o texto adjunto, al menos serían más relevantes..

Siéntase libre de usar imágenes en su sección de encabezado que ocupan la página completa, sin embargo, si No vincules a ningún lado ni ofrezcas información genuina. entonces no los conviertas en un carrusel.

Funciones interactivas

La forma en que los usuarios navegan un carrusel afecta el diseño en sí. Hay un variedad de estilos de navegación, Pero estos son los más populares:

• Navegación basada en puntos
• Flecha de navegación
• Navegación en miniatura
• Lista de enlaces o artículos de titulares

El más común es el punto de navegación que encontrarás en cientos de sitios web modernos.

Ejemplo 1: Chic en casa - página de inicio

Chic at Home es un gran ejemplo usando tres puntos diminutos debajo del deslizador para denotar la navegación. Cada imagen gira automáticamente, y el punto relacionado en la serie se llena de negro. Los otros dos puntos vacíos. denotar posibles diapositivas para que los usuarios naveguen.

Esto es un patrón de diseño popular que muchos usuarios ya reconocen. Cae en la misma categoría que el menú de hamburguesas que a muchos diseñadores no les gusta, pero los usuarios ya lo reconocen, e instintivamente saber cómo usarlo.

Ejemplo 2: Pure Cycles - página de inicio

La página de inicio de Pure Cycles utiliza un Combinación de navegación de puntos y flechas.. De esta manera los usuarios tienen la navegación hacia adelante y hacia atrás, pero también ver el “en general” navegación a través de enlaces de puntos en la parte inferior.

De hecho, encuentro los enlaces de puntos en este ejemplo difíciles de ver. La dificultad con las diapositivas visuales es que muchos elementos no son fáciles de distinguir, por lo que las flechas y los puntos pueden mezclar fácilmente en el fondo.

Ejemplo 3: IGN - Página de inicio

En la página de inicio de IGN encontrarás otra. carrusel auto-giratorio que usa enlaces de título para la navegación. Esto es muy común para los editores que quieren vender titulares en lugar de productos. Cada enlace va a la diapositiva individual que eventualmente conduce a la página del artículo.

Estos enlaces podría ser reemplazado con miniaturas, o incluso incluir miniaturas de cada historia, sin embargo, la El aspecto visual se muestra en el carrusel., por lo que omitir la miniatura en realidad ahorra espacio.

Diferentes sitios web utilizan diferentes estilos de navegación por diferentes razones. Considera las metas de tus visitantes., y diseño para la mejor experiencia de usuario..

Puntos clave

Debe apuntar a producir valor genuino, o información adicional con un carrusel. Esta puede ser información que el visitante no tenía antes o puede llevar a páginas que el visitante no haya encontrado de otra manera..

Trate de evitar los carruseles de rotación automática, y Úsalos solo en las principales páginas de destino. (La página de inicio es un ejemplo). Mientras el carrusel tiene un propósito, y no parece un anuncio, tu diseño debería ir bien.

Si busca más información sobre los carruseles web, consulte algunas de las siguientes publicaciones:

• Carruseles de Brad Frost
• 8 Requisitos de UX para diseñar un carrusel de página de inicio fácil de usar
• Usabilidad de carrusel: diseño de una interfaz de usuario efectiva para sitios web con sobrecarga de contenido