Uso adecuado de un slider: destacar contenido
¿Qué es un slider? Palabra inglesa que en nuestro idioma designa a un deslizador, normalmente, sólo de imágenes.
También llamado pase de diapositivas o carruseles. Hay con imágenes fijas + textos e imágenes animadas + textos, como iremos viendo.
Si bien, también puede ser un deslizador con vídeos o música, menos habitual.
Un slider te lleva a un contenido destacado. No necesariamente promoción de productos. Sino contenido de calidad que tiene que ver con tu trabajo o ámbitos donde te mueves.
Es un complemento perfecto para tu home o página de inicio, siempre que este bien optimizada y permita interactuar con él, bien controlando el pase de diapositivas o permitiéndote cierta interactividad.
Un slider bien utilizado, da vida, a una página web. Si bien, no todo el mundo lo necesita.
A continuación, en el punto 2, voy a rebatir una serie de afirmaciones sobre su uso (muchas de las cuales no fueron contrastadas por sus autores).
Índice
- Hay 5 tipos principales de sliders, según temática a mostrar
- ‘Caza de brujas’ contra los sliders, ¿por qué?
– Mala utilización
– Nadie los utiliza
– El contenido importante se empuja hacia abajo
– Tarda en cargar demasiado
– Los carruseles son malos para el SEO
– Malos para la versión móvil
– Seguridad
– Algunos datos: funcionalidad y conversiones
– Distrae al usuario
– Utilizar un carrusel o slider ya no mola
– Alternativa al slider - Conclusión: depende del uso que quieras para tu web
– Si te decides por un slider
– Si prefieres un banner estático
– Mostrar tus 3 principales servicios
– No dejes tu sitio web empobrecido - Podcast: vídeo y audio
- Opinión
Hay 5 tipos principales de sliders, según temática a mostrar
- Los que te llevan a tu último contenido publicado, a nivel de artículos, para tu blog. Vienen por defecto con el tema de WordPress y se muestran en la home/inicio (si bien, esto se puede deshabilitar).
- Los que enlazan a secciones específicas de tu página web, bien sea: equipo, servicios, donde estamos.
- Los promocionales, donde normalmente se fija un precio y sirven para vender cualquier producto de nuestra Empresa, llevándonos al servicio ofertado.
- Los anuncios que sólo informan, sin posibilidad de acceder a ningún sitio de la web.
- Los que sirven como galería de imágenes, vídeos, sonidos, con o sin texto.
En todos ellos hay que controlar una serie de factores que en muchos casos no se ha hecho, provocando una ‘caza de brujas’ contra este elemento de la web. ¿Qué factores? Los vamos a ver desglosados, gracias a algunos ‘gurús’ de nuestro gremio.
‘Caza de brujas’ contra los sliders, ¿por qué?
Desde hace un tiempo, no sabría precisar cuanto, algunos ‘gurús’ de nuestro gremio (Álex, Elena, María, Brooklyn, Ángel, Bruno) parece importante que quieren descartar su uso, debido principalmente a una serie de características “altamente” negativas. Veremos que tanto hay de cierto.
Todo depende del uso que le demos. No hay malos sliders (bueno algunos, sí). Sólo hay personas que no saben darle buen uso.
Mala utilización
Alex: Los sliders se implementan principalmente para destacar contenido, sin embargo, logran el efecto contrario. Solo consiguen que los veamos como contenido invasivo y como usuarios prácticamente ni los vemos, desperdiciando este primer impacto con el usuario… En definitiva, distraen de lo que deberían ser unos objetivos claros en tu web.
Joan Morci: Y que opinas de las personas que utilizan su columna derecha para poner publicidad o ventanas emergentes (pop-up) que aparecen de repente, según bajamos scroll para leer artículo, y lanzan mensaje para suscribirnos a un boletín de noticias. ¿Eso no es intrusivo? Yo por acto reflejo, no miro la columna derecha y elimino inmediatamente la ventana emergente (suscríbete).
Vamos a ver webs de diferente temática donde el slider, sí, ha sido bien utilizado
– Restaurante Alaia: galería de imágenes que destaca la zona privilegiada donde se encuentra el restaurante, en pleno Monte Igueldo (San Sebastian) y dos platos característicos. No hay textos, todo es visual para atrapar a un futuro cliente y lo consigue.
– 360 Innovanity: destaca en todo momento su servicio de visitas virtuales de ‘Google Business View’, donde la cabecera del slider, mantiene siempre ese título y, la parte inferior conlleva un subtítulo con diferentes mensajes para apreciar la importancia de estas visitas virtuales.
Podríamos decir que quizás tiene un handicap y, es la inexistencia de botón que regule velocidad transición imágenes pero si el mensaje de las mismas no supera las 6 palabras, es aceptable.
– Bold: este sitio tiene un slider de fondo donde se muestran los principales trabajos de esta Empresa, a nivel de diseño gráfico, web, editorial, packaging, ilustración. De hecho es un landing page, ya que bajando scroll o haciendo click en mini menú, encontramos los apartados, Nosotros y Contacto.
¿Desacertado? No lo creo, porque ahora se está imponiendo el uso de video en streaming justo de fondo en la página de inicio y como sustituto de un slider. Lo que no se dan cuenta que estos vídeos de fondo no se ven en algunos dispositivos móviles, cómo el mío. Sin embargo, sí, el slider de fondo de Bold, si bien, tarda un poquito en cargar.
– Tilo Motion: en cambio aquí tenemos un slider que sirve para dar a conocer nuevos clientes que tiene esta Empresa, así cómo la cantidad de seguidores en Facebook o eventos que hayan hecho. Es un slider informativo, no se invita a entrar a ningún sitio, pero muestra lo más destacado que ha realizado esta Empresa en los últimos meses.
Esta web tiene un slider con un pase de diapositivas, que resulta fresco y jovial, como el ambiente que se respira en la web. Y hace que con su frescura, la web parezca estar viva.
– Trabajar por el Mundo: el principal fallo de esta web, no está en el slider. Este se visualiza perfectamente y no se confunde con publicidad. Son precisamente los banners de publicidad, junto con el propio boletín de suscripción que aparece de repente en una ventana emergente, los que provocan mal uso de la web.
– Manuel5cc: lo primero que acapara nuestra atención en esta web, hay un slider en la cabecera. No es de los más bonitos que he visto, pero retiene nuestra mirada dado que el titular no contiene demasiadas palabras.
– Proyecto Rubare: es una web que hice hace bastante tiempo en HTML y CSS. Incluí un slider para destacar las secciones más importantes de la web, ya que de este modo era más fácil y cómodo, no perder el tiempo accediendo a las mismas, para saber su contenido.
Si utilizas sabiamente el slider, destacas el contenido principal de tu web.
Nadie los utiliza
Elena: Nos empeñamos en creer que estamos ofreciendo una información muy valiosa a los visitantes de nuestra web y lo cierto es que nadie les hace ni caso.
Estamos muy acostumbrados a ver gran cantidad de Banners de anuncios cuando navegamos por internet, por eso cuando vemos algo que se mueve, como un Slider, nuestro cerebro lo ignora de manera inconsciente buscando otro foco de atención estático al que dirigirnos.
Joan Morci: debemos ser un porcentaje muy pequeño que, sí, les hacemos caso. Quizás, porque no son ventanas emergentes que llenan toda la pantalla de un anuncio que no te esperas, por ejemplo, los boletines de suscripción. Pero fíjate Elena que a mí me pasa, con la columna derecha que normalmente se utiliza para publicidad, no la hago ni caso.
La web de Elena, es una de las más limpias que he encontrado en cuanto a distracciones se refiere.
No confundir banners de anuncios de cualquier temática, con contenido de la materia que buscamos.
El contenido importante se empuja hacia abajo
Elena: Nada me molesta más que llegar a una web y no encontrar el contenido que estaba buscando a primera vista. La mayoría de las webs que utilizan sliders, fuerzan a los usuarios a tener que descender para buscar el contenido interesante.
Recuerda que el contenido vende, las imágenes no. ¿No será mejor entonces dárselo al usuario lo antes posible?
Joan Morci: Partiendo que yo estoy en una etapa de transición, pues deje mi web abandonada (por clientes) durante mucho tiempo, hasta que no tenga actualizada la misma (y otras), me serviré de contenido mediante artículos que harán posible actualice tanto mi sitio cómo mis conocimientos.
En resumidas cuentas, mi web es ahora más un blog que una web donde venda mis servicios (que es lo que quiero que muestre a futuro).
Una imagen que no guarde parentesco con tu contenido, efectivamente, no vende.
Una imagen, vende más que mil palabras. ¿Cuántas veces hemos escuchado esta afirmación? Millones. Si la imagen representa el contenido que quieres destacar, lo has vendido incluso sin necesidad de titular. No siempre hay tanta imaginación y, debemos recurrir al uso de un título.
Si la imagen de tu slider representa el contenido que quieres destacar, lo has vendido incluso sin necesidad de titular.
Tarda en cargar demasiado
Alex: Dada la utilización de imágenes de gran peso y efectos de transición.
Elena: Cuantos más elementos/imágenes añadamos a una web más tardará en cargar. Tus visitantes tendrán que esperar…
Joan Morci: Esto es fácil de solucionar. Optimizamos la imagen, cómo ya vimos en cierto artículo en mi blog y acto seguido incorporamos un CDN que nos permite alojar las imágenes en otro servidor, reduciendo el tiempo de carga. Yo tengo el que incorpora el plugin Jetpack (Photon). Os adjunto el tiempo de carga a mi web. Antes de optimizar imágenes slider, tardaba 7sg, ahora no llega a 3sg.
Una vez hecho estos pasos, si tarda en cargar, puede ser culpa de la cantidad de banners publicitarios que tenemos en el home/inicio que hacen llamadas a servicios externos.
Si tu slider tarda en cargar, es porque algo no se ha hecho debidamente: bien optimización imágenes o uso de un CDN.
Los carruseles son malos para el SEO
Brooklyn: La falta de contenido significa que es difícil conseguir la información de esa página para Google. Esto es debido a que Google ya no rastrea las meta keywords. La mayoría de los sliders contienen etiquetas H1, que cambian cuando se pone en movimiento, lo que hace que se devalúen las palabras clave que hay en ellos.
Joan Morci: En mi caso concreto, utilizo 2 sliders con contenido escrito bajo la etiqueta H2. Pero, sí, es cierto que las imágenes del slider no se indexan en google tan bien cómo me gustaría. Por contra, retienen la atención para entrar al contenido que quiero que la gente lea. Y el hecho de contar con el banner superior de carácter estático, ayuda a posicionar este y por lo tanto la web.
Un slider es malo para el SEO directamente pero no indirectamente porque atrae la atención para nuestro usuario, hacia el contenido web que es lo que nos interesa. Si ya dispones de un banner fijo en la cabecera con información sobre ti, ganas SEO.
Malos para la versión móvil
Alex: Desde un móvil, un slider no se lee bien (suelen estar diseñados para pantallas grandes) y hace que la página tarde más en cargar. Si a pesar de todo quieres tener un slider en tu web, mínimo, quítalo de la versión móvil.
Joan Morci: si os fijáis en las siguientes imágenes, os daréis cuenta que todas son capturas de pantalla de la versión móvil. Es decir, todas tomadas desde mi dispositivo que es una pantalla de 3.5 pulgadas (la más pequeña). Haced clic sobre cada captura y, decidme cuan legible es el mensaje del slider.
Si un slider se ve mal en un móvil, realmente es culpa de la imagen que ya integra texto. Es recomendable incorporar el texto aparte, con la herramienta que nos proporcione el slider.
Seguridad
Alex: Más de 10.000 webs que utilizaron ‘WordPress Slider Revolution‘, un plugin para colocar carrouseles en las homes de las webs, vieron su seguridad comprometida por culpa del mismo.
Joan Morci: Lo que no dices es que al ser un plugin de pago, están más interesados en las ventas que en emitir una vulnerabilidad que haga decaer éstas.
Cosa que no pasa si el plugin es gratuito y está en el repositorio de WordPress.org donde se subsana cuanto antes, gracias a la ayuda de la comunidad, quienes alertan sobre ésta, sino es el propio autor quien antes la advierte y la comunica.
Por otro lado… ¿Metemos en el mismo saco a todos los plugins relacionados con sliders?
También hubo problemas a finales de 2015, con el plugin ‘Yoast SEO‘ y, no por ello decimos que todos los plugins utilizados para SEO son malos y dan problemas. De hecho, recomiendo ‘All In One SEO Pack’.
Un slider resultado de un plugin de pago, da problemas y el autor no lo notifica. Eso no convierte a todos los plugins de este tipo en malos.
Algunos datos: funcionalidad y conversiones
Alex: Los amantes de la funcionalidad y de las conversiones ya se olían la tostada de que los sliders no eran buena cosa. Estudios han demostrado que solo el 1% de los usuarios hacen click al slider principal de una página. ¡Un 1%! Es difícil tener un porcentaje más claro para afirmar que los sliders sobran más que Eduard Punset en Gandía Shore.
Pulpo Marketing
: Tiene 3 posiciones diferentes, de las cuales voy a destacar 2. Ya que lo que dice uno de los ‘gurús’ es cierto a medias, teniendo en cuenta el uso que se le dé.
– No se recomienda slider: para llamar a la acción, es decir, vender productos destacados, packs, ofertas, contactar. Porque no llama la atención: 2% de clics.
– Sí se recomienda slider: para distribuir contenido fresco, contenidos actualizados que el usuario quiera encontrar en la página. Practico para webs con mucho contenido. Sirve para espaciar el diseño de la página y no saturar la lectura con demasiados elementos.
También es verdad que Pulpo Marketing, destaca el hecho de que el slider tenga la opción de ser pausado.
Joan Morci: Si no tiene esa opción de pausa, cómo mínimo, debería permitir volver a la imagen que queremos ver con más detenimiento. O hacer las transiciones más lentas con un titular de menos de 6 palabras por imagen.
Los sliders no son buenos si nos queremos vender como un servicio de teletienda. Sí lo son para contenido relevante de nuestra Empresa y más si disponemos de blog y actualizamos con frecuencia.
Distrae al usuario
Elena: A esto se le llama “efecto megáfono” o lo que es lo mismo, un montón de imágenes, animaciones y textos, moviéndose delante de tus ojos sin que seas capaz de enterarte de lo que quieren contarte. Cuando algo llama tu atención en un Slider y quieres leerlo o interactuar, normalmente no te da tiempo a terminar la acción porque el contenido ha cambiado, lo cual es bastante frustrante.
Joan Morci: Volvemos a matizar. Eso ocurre a un tipo determinado de webs, principalmente de tiendas online. Que han abusado de la cantidad de imágenes, textos, peso y velocidad de transición sin incluir botón de pausa. Considero que distrae más la ventana emergente de suscripción al boletín o la columna derecha que suele estar plagada de anuncios. No obstante, tus criticas se pueden corregir, como veremos al final.
Tenemos un ejemplo en esta web de videojuegos, 3DJuegos. El elemento que realmente distrae nuestra atención, es el banner de publicidad de coche que no tiene nada que ver con la temática de la web (videojuegos). Y de hecho es una imagen que a pesar de no tener animación, distrae.
Si tu slider distrae al usuario, es porque no has sabido transmitir desde el mismo que ofreces.
Utilizar un carrusel o slider ya no mola
Bruno: Es cierto que un carrusel permite poner en una posición destacada un montón de información, alternándola en el tiempo, mostrar elementos muy visuales… pero Apple nos enseñó que el minimalismo mola, y todos sabemos que Apple es lo más. Hay muchas formas de atraer la curiosidad, y el movimiento y la sobredosis de información no siempre son la mejor herramienta.
Joan Morci: Hay más sobredosis de información cuando la presentas de golpe en 6 o 9 cuadriculas (artículos), en lugar de ver una imagen durante 9sg que pasa a la siguiente que durará otros 9 sg de media. Como muestra, la web 360 Innovanity.
Bien utilizado (cantidad de imágenes, texto, peso, velocidad transición) es más relajante que el hecho de disponer toda la información de golpe. Y más cuando no existen espacios en blanco, entre un tipo de información y otra. Además de no saber cuál es el elemento más destacado.
Sobre Apple, hizo cosas buenas como iPhone o iPad, lo que fue toda una revolución al igual que imponer el desuso de la tecnología Flash pero considero que pego patinazo con imponer la utilización de la nube para según que cosas, en lugar de seguir coexistiendo con formatos físicos, DVD o Blu-Ray.
Apple se centra en un mercado o cliente, de clase elitista. Creo que la mayoría que nos dedicamos a esto, no tenemos esa clase de clientes aunque aspiremos a ellos. Entonces, lo que sí me parece digno de elogiar es el uso que hace de sus titulares. Eso, es lo minimalista.
No necesita una larga descripción como Microsoft para detallar su producto. Una frase de no más de 6 palabras, ya despierta el interés e induce a informarse más detalladamente sobre ese producto.
El concepto que Apple persigue con el minimalismo, es condensar toda la información, en una frase que llame la atención. Apple se dirige a una clase de clientes elitista. Sus imágenes deben ser de gran calidad y eso requiere cierto peso. Un slider no es algo cómodo para ellos.
Alternativa al slider
Alex: La mejor alternativa al slider es el banner. ¡Sí! Tan sencillo como eso. Selecciona muy bien los contenidos que más te interese destacar y colocalos en tu página principal para que con un simple vistazo se vean todas las opciones disponibles.
Imagina que vas a un restaurante y te tienes que esperar a ver todos los primeros en una presentación de Power Point para luego pasar a los segundos platos… ¡Un palo! Los quieres ver todos a la vez, rápido y en poco tiempo.
Joan Morci: Estoy de acuerdo con el uso del banner en la cabecera, lo cual ya tengo. Defino imagotipo (logo + nombre), profesión y, slogan propio, además de 4 iconos que representan: redactor (escritura) que maneja imágenes, vídeos y sonido (audio-artículos o podcast). Pero es que además incluyo el slider, porque actualizo contenido cómo mínimo una vez a la semana.
En lo referente al restaurante, como ves he puesto un ejemplo de uno que utiliza slider para llamar la atención sobre lo más destacado. El sitio donde se encuentra y los platos característicos.
Si queremos entrar en detalle a los platos, ya hay una sección apropiada para ello (carta), en formato fichas. Pero igualmente se podría hacer por slider, como muestra este plugin: ‘Master Slider – Responsive Touch Slider‘. Algo mucho más vistoso, sin duda. Yo como por los ojos, ¿tú?
Alex: A continuación pongo un ejemplo de la web de Joan Boluda, uno de los capos del momento en marketing online. No es el rey del diseño, pero seguro que es el rey de la conversión. Los primeros 700 pixeles verticales de tu web son claves para decirle al usuario todo lo que puede encontrar, aquí Joan muestra sus tres principales servicios. ¡Claro y directo!
Joan Morci: En esto estoy de acuerdo también contigo y, próximamente mi sitio cambiará cuando mejor defina que quiero mostrar. Pero mientras tanto el slider que tengo y el uso que le doy son adecuados, dado el contenido que publico periódicamente y, lo poco que tarda en cargar el home/inicio.
Yo conozco el caso de otra persona, Hayda Ramos, quién utiliza el mismo diseño que comentas pero en mi opinión lo ha sabido mostrar de una forma mucho más elegante.
Elena: Imagen de marca + Slogan. Reemplazar el slider por una imagen grande con un texto que defina tu marca puede ser una buena alternativa. Piensa que esta área de tu web tiene un gran poder sobre los usuarios ya que es lo primero que verán cuando lleguen. Si tienes un mensaje importante que transmitirles este es el lugar.
Joan Morci: Hace tiempo leí tu artículo y, creo que esto es lo más destacable del mismo. De hecho lo aplique en mi sitio web, cómo puedes comprobar.
También te invito a que hagas la prueba de acceso a mi web desde móvil, dado que no renuncio al slider y, sin embargo he mejorado el tiempo de carga del home/inicio (3sg). Si puedes tener ambas cosas… ¿Por qué prescindir de la que destaca tu contenido y da vida a tu sitio? De este modo, ven que estoy activo. De hecho, es el apartado que recibe más visitas.
María: Combinación de destacados. La combinación de destacados funciona muy bien para las ecommerces ya que permite presentar, a la vez, varios artículos de forma diferenciada. En estos casos, la combinación de destacados se ubica ocupando el lugar del slider y a un tamaño similar al que ocupan los típicos carruseles.
Joan Morci: De todas las alternativas, ésta es la que más me gusta, si bien aumentaría los espacios entre cuadriculas para no saturar de información al cliente y que respiré un poco mejor.
Por otro lado, fijaos en el título de cada cuadricula, cómo no supera las 6 palabras.
Claro, ya estamos hablando de tiendas online, que son las que han perjudicado tanto la fama de los sliders, por un uso indebido. En un blog podría quedar bien pero a mí me da la sensación de saturación, al ver todo de golpe.
No tratemos de obligar al resto a abandonar el uso del slider. Se trata de ofrecer alternativa (no imposición) para quien no necesita esta opción de visualización.
Conclusión: depende del uso que quieras para tu web
Si te decides por un slider
Siguiendo las indicaciones que hago en cada apartado (‘caza de brujas’), tenemos que tener en cuenta un par de detalles.
Aspectos a visualizar, cualesquiera de éstos:
1. Una muestra de nuestro trabajo (galería imágenes o vídeos).
2. Un servicio de asesoramiento (información a tener en cuenta).
3. Cursos (tutoriales varios)
4. Información de tus artículos (si eres bloguero).
Factores a controlar:
– Cantidad de imágenes, de 3 a 6 cómo máximo.
– Texto, un titular de no más de 6 palabras que incite a leer el contenido.
– Optimizar las imágenes.
– Velocidad de transición, aumentando tiempo (9sg) o intentando encontrar un slider que permita pausarlo.
De todos modos, te pongo un artículo que seguro será de tu interés:
16/02/2016. Consejos para un adecuado uso del slider de contenido.
Si prefieres un banner estático
Busca una imagen que resulte visualmente atractiva, define cuál es tu trabajo y una frase a modo de slogan.
Algunos ejemplos:
– GlopDesign (glopdesign.com).
– El Blog de Ernesto G Bustamante (ernestogbustamante.com).
– Laura Ribas (lauraribas.com).
– Laura López (lauralofer.com).
– Rebeldes Marketing Online (rebeldesmarketingonline.com).
Mostrar tus 3 principales servicios
No he encontrado muchas webs de este tipo, pero citaré dos de ellas que ya aparecen en este artículo.
– Hayda Ramos (haydaramos.com).
– Joan Boluda (boluda.com).
No dejes tu sitio web empobrecido
Vamos a ver el caso de tres webs, que no tienen ninguna de estas tres opciones anteriores: slider, banner* o destacar servicios principales. Haciendo que visualmente aparezcan muy pobres.
– Carla Hernandez Cuellar (carlahernandezcuellar.com).
– Álex Martínez Vidal (alexmartinezvidal.com).
– 40defiebre (40defiebre.com).
(*): Sí disponen de un banner pero bajo mi consideración es muy pobre, al menos a mí no me transmite nada.
Videopodcast
– Slider: objetivo principal, mostrar contenido destacado
También llamado deslizador de imágenes y/o textos. Vamos a ver que tipos hay según temática y cuando es recomendable su uso. Dado que hay muchos detractores de esta herramienta a los cuales rebato sus argumentos, si bien, no todo el mundo necesita un slider también ofrezco otras alternativas.
Podcast
Opinión
Sobre este debate inmenso donde se hacia necesario aclarar una serie matices, para no meter en el mismo saco a todos los sliders, pues depende de la temática de cada web, se debe hacer un uso inteligente de cada uno de ellos.
¿Qué opinas sobre el tema? ¿Slider o banner o destacar servicios principales? ¿Por cual te decantarías tu para tu proyecto?
No me gusta la gente que ve un artículo y enseguida generaliza, sin darse cuenta que esos picos de 1% o 2% de visitas, iban más encaminados hacia tiendas online que no supieron hacer buen uso de sliders.
¡Saludos chicos y chicas, hasta otra!
Fuente imágenes
Ver apartado relacionado en mi Pinterest.
Soy diseñador web con WordPress. También hago uso del diseño gráfico (edición imágenes) e implementación de vídeos (puedo editar pero no grabar). Te ayudo a descubrir/potenciar la identidad de tu marca, otorgando distinción a tu sitio web. Hago buen uso del diseño visual y emocional. Estoy disponible para darte: servicio, formación, consultoría.