El uso de sliders en webs comerciales o corporativas está muy extendido. La mayoría de temas y plantillas que puedes encontrar en marketplaces como Themeforest y otros usan sliders en sus páginas. Pero recordemos que los temas de los marketplaces que son tan bonitos y espectaculares están pensados para ser vendidos y no estudian la usabilidad ni conversión de estos elementos.

Efectos negativos de los sliders

Reducen la velocidad de carga de tu web

Como con cualquier web, cuanto más lo complicas y añades cosas, más lenta se vuelve la carga de la web que afecta negativamente a tu SEO y a la paciencia de muchos usuarios, sobre todo móviles. He visto páginas webs de empresas con sliders a tamaño completo con cuatro o cinco imágenes de alta resolución. ¿Crees que es una buena idea?

Distraen al usuario

Seguro conocéis Revolution slider y otros similares. Sliders con los que puedes mostrar los textos y las imágenes con multitud de animaciones y efectos, transiciones entre ‘slides’, etc. ¿Qué consigues con esto? Distraer al usuario….

Apartan el contenido de la pantalla

Hace que lo que ofreces y  lo que buscan tus usuarios no sea accesible en un primer vistazo, ocasionando que el usuario tenga que desplazarse para poder verlo.

¿Quién hace click en los sliders?

Nadie, o un porcentaje inferior al 1% de tus visitantes. Ahora te pregunto: ¿merece la pena dedicar tanto espacio de tu página de inicio a algo tan poco efectivo? Los usuarios están tan acostumbrados a los sliders, que parecen publicidad y simplemente los ignoran.

Alternativas al uso de sliders

#1 Ningún slider

Hoy en día, una web corporativa puede funcionar bastante bien sin un slider. Reemplazar un slider por una imagen grande con un texto puede ser una buena alternativa. También llamado ‘Hero Area’ porque en esta parte de la web tenemos un poder grande, tenemos que dejar bien claro el mensaje, qué contenido va a encontrar el usuario en la web o simplemente explicar en pocas palabras a qué se dedica la empresa. Come me gusta a mí, conciso, sencillo y sin artificios.

Ejemplos:

Mindvalley.com usa una imagen de fondo en el ‘Hero Area’ con una tipografía grande para introducirnos en la organización. Fijate que nada se mueve de un lado a otro, no tienes que leer con prisas el mensaje, si te interesa entonces puedes pulsar el botón ‘Learn More’ o hacer scroll para ver el resto.

mindvalley-no-slider

Unbounce.com usa ilustraciones grandes y un titular claro para explicar su punto de venta más importante: que su producto es fácil de usar. Esto resulta mucho más efectivo que cualquier slider actualmente, y también resulta bastante llamativo.

Este mensaje se ve reforzado a continuación en el resto de contenidos de la página inicial, testimonios y logos de clientes de renombre. Ni un solo slider para vendernos su producto.

unbounce-no-slider

Moz.com ha optado por mostrar en su página de inicio un solo producto. El diseño demuestra que esta página de inicio sin slider puede funcionar y ser menos confusa para el usuario. Solo está centrando la atención del usuario en una cosa. Más abajo, y si quieres, te muestran un video.

moz-no-slider

#2 Usa una llamada a la acción

Un buen botón de llamada a la acción puede hacer maravillas en tu tasa de conversión. Combinándolo con una buena imagen y un buen mensaje puedes tener ‘algo’ mucho más efectivo que un slider.

Ejemplos:

23andme.com usa muchas llamadas a la acción en su sitio, pero el más importante está situado justo al principio. Rápidamente te dan una razón para comprar y su precio, sin conjeturas. No eliminan los gráficos en este área, pero mantienen una imagen estática de su producto que es todo lo que el comprador necesita para tomar su decisión de compra. Más imágenes solo conseguirían distraer al usuario y apartar su mirada del botón ‘Order Now’.

23andme

Squareup.com muestra algo que podría ser un slider pero que afortunadamente no lo es. En su lugar se usa una fotografía grande donde se muestra el producto en uso. Después le dice al usuario qué hacer en el botón de llamada: ‘Vende con Square’.

¿Quieres saber más antes de comprar? No pasa nada, haces scroll en la misma página para obtener más información, pero el mensaje ha quedado claro al principio de la página sin necesidad de un slider.

square-call-to-action

#3 Usa un formulario

Los formularios de registro son la mejor alternativa para negocios que requieren del registro de usuarios para su funcionamiento, aunque sea en una modalidad gratuita.

O tal vez el negocio no pueda funcionar sin obtener información de los usuarios, tales como servicios de búsquedas o membresías online. En tales casos, lo mejor es ‘ir al grano’ manteniendo el formulario al principio de la página, eliminando la necesidad del slider.

Algunos ejemplos:

CaboTransfers.com está en la industria de los servicios turísticos, así que tiene sentido usar un formulario al principio de la página. En este caso se trata de obtener rápidamente el precio de un servicio y hacer la reserva del mismo. Fíjate como el formulario comparte ese espacio principal con una imagen estática no intrusiva. Recuerda que la idea es llamar la atención del usuario hacia el formulario.

cabotransfers-form-no-slider

WideWorldEd.org es una startup sin ánimo de lucro que utiliza un formulario para conseguir suscriptores. La organización se está preparando para ofertar cursos. Por lo tanto, informar de las noticias a los visitantes es crítico. Lo importante es mantener un contacto con visitantes y posibles interesados en los cursos, por lo que el boletín de suscripción es esencial.

Una vez más, las imágenes del diseño no comprometen al formulario, que flota encima de la imagen de fondo.

WideWorldEd-nonprofit-website

 

#4 Usa un vídeo

Podrás estar pensando que cuál es la diferencia con usar un slider, pues aparentemente hay mucha diferencia puesto que los vídeos parece que convierten bastante bien donde los sliders no lo hacen. Quizás porque los vídeos los puedes iniciar, pausar y parar bajo tu control. La mayoría de sliders no te permiten estas opciones. Además con el vídeo el usuario solo se enfoca en una cosa: el vídeo. La premisa es que los sliders normalmente distraen con demasiadas imágenes en movimiento, no como un elemento narrativo.

Algunos ejemplos:

LewisHowes.com usa una técnica creativa haciendo creer que el ‘Hero Area’ de fondo es un vídeo que puede ser reproducido. Pero no lo es, solo es un botón que al pulsarlo nos muestra un vídeo normal dentro de un ‘lightbox’. La idea es que el botón está en el centro de la diana y hace que quieras pulsarlo. Entonces se nos vende el producto con un vídeo.

lewis-howes-video-no-slider

HireTheWorld.com es una página que organiza concursos de diseño. En este caso un vídeo es muy apropiado, ya que el proceso de su servicio es relativamente nuevo en la industria y requiere de una explicación. Un slider podría mostrarnos algunos casos de ejemplos, pero no revelar de una manera clara y comprensible lo que la empresa hace.  A veces no hay nada como la palabra hablada junto a unos diagramas.

hiretheworld-video-no-slider

 

#5 Haz un slider más pequeño

Esto es casi hacer trampas, pero si te obligan a hacerlo o tienes que satisfacer las necesidades de un cliente caprichoso puedes usar un slider más pequeño. Esto significa que aunque lo incluyas no es intrusivo ni el elemento principal en la que tus ojos se van a fijar. Con esta alternativa tendrás que destacar otras partes de tu página de inicio, como la navegación, la llamada a la acción, el mensaje de la empresa, etc.

Un par de ejemplos:

TheLeanStartup.com usa un poderoso encabezado seguido de una llamada a la acción y un formulario de registro. Si te fijas justo a un lado del botón “Learn More” hay un slider para mostrar testimonios. No es el foco principal de la atención de un visitante nuevo, pero aún está ahí.

slider bien disimulado

KayakBritishColumbia.com usa una aproximación a un slider a medio tamaño. Han mantenido el slider a la izquierda mientras se usa la navegación principal como botones circulares a la derecha, direccionando al usuario a un destino de la web. Por un lado, el slider es dificil que distraiga la atención del usuario mientras que puede tener el control de la web sin tener que hacer scroll.

Slider tamaño medio

 

#6 Cambia el slider de posición

Mover el slider a una posición inferior puede dejar espacio en la parte superior para la información más esencial de tu web y la que tiene que convertir. Si los usuarios siguen navegando por tu página de inicio es que están buscando más información y el slider puede ser ese “algo” que están buscando.

Ejemplo:

PaoneCreatives.com usa un slider cerca del pie de página para mostrar algunos testimonios. No es intrusivo, no distrae la atención y si hace algo es ayudar a aumentar la credibilidad del sitio. Si el slider estuviera al principio de la página, la historia sería diferente, no sabríamos de qué va la página o porqué nos debería interesar. Como esta información ha sido cuidadosamente colocada en la parte superior, el slider de testimonios está bien.

Slider en la parte inferior de la web

Conclusiones

¿Todas las webs deberían dejar de usar sliders? No, todas no. Pero sí se deben estudiar su posicionamiento, su optimización, realizar test a/b con el que detectar qué tiene más conversión, etc. Lo importante de tu web es la conversión y no el causar un efecto de impacto. No sientas que no estás a la última si no usas un slider, porque realmente ya está pasando su época. Tienes más opciones, experimenta y obtendrás algo mejor que un slider.

Entrada inspirada en: Alternatives to using a slider for better home page conversions.

8 thoughts on “Deja de usar Sliders en tu página de inicio

  1. Una buena recopilación de concejos muy útiles para mejorar el diseño web. Un saludo Sr Intelligenius

  2. Totalmente de acuerdo Javier, Gracias por el artículo.

  3. En desacuerdo. ¿Distraer a los usuarios? Los atraes a tu página. Una página simple es elegante, pero es difícil llegar a la elegancia así; se tiende a caer en lo aburrido, horrible y sin gusto.
    El problema no son los sliders, el problema es su fin. Si los usas para publicidad … pff, pues ok, concuerdo con que la publicidad cansa y uno la ignora. Pero puede tener muchos mas usos, que aunque sea el adornar nomás, es muy justificable. Ninguna de las páginas que mostraste son atractivas. Si tuviera que escoger un diseño de esos… pues no querría ninguno. No son vistosos. Sé que es importante la velocidad de la página, pero cuando un diseño no atrae, pues, no dejas huella en la mente de las personas, tanto para volver a entrar o simplemente admirarse al hacerlo. Somos seres visuales. Los efectos, colores, formas nos atraen. Los sliders tienen todas esas características.

    Claro.. hay que saber usarlos.
    ´p.d. …. ¿de donde sacas esas estadísticas?

    1. Hola y gracias por comentar.

      Respeto tu opinión y en primer lugar aclarar que no estoy en contra de los sliders, pero sí de utilizarlos porque sí. No son una moda, ni algo ‘cool’ que va a hacer que tu web triunfe. Ni mucho menos atraer usuarios a tu web.

      Sí que hay mejores formas de usar sliders, en la entrada se pueden encontrar algunas propuestas.

      ¿Hay sliders que funcionan y están bien construidos? Claro que los hay. Con el artículo no pretendo desmontar el uso de sliders, pero sí que el diseñador sea consciente que debe hacer un uso adecuado.

      Respecto a las páginas que muestro, lo de atractivo no es más que un gusto personal de cada uno, pero en cuanto a diseño tengo una opinión diferente: el diseño no se trata de hacer atractivo o bonito una cosa, hay muchos más aspectos a tener en cuenta. En los ejemplos están explicados cómo han sido construidos y la finalidad de cada uno, eso es diseño.

      Las estadísticas son propias, extraídas de varias webs donde sigo las métricas. Yo utilizo Crazy Egg y después de varios meses usándolo y ver que nadie hace click en los sliders es lo que me ha llevado a publicar este artículo.

      Un saludo y gracias por participar.

  4. Gracias, gracias, gracias!!!! Pedazo de post!!!

    Por fin me topo con alguien que piensa y argumenta como yo este tema. Que como ya sucedió en su momento con la tipica animación flash que todas las webs corporativas querían a principios de siglo, teníamos que pelear duro con el cliente para decirle… pero ¿para qué quieres una animación con un botón de saltar animación? rápido el botón se convirtió en el elemento más pulsado en la web. Y eso era lamentable. Ahora pasa lo mismo con los sliders, he llegado a ver algunos con hasta 25 animaciones.

    Estoy totalmente de acuerdo contigo en que funciona mucho mejor de cara a la conversión cualquiera de las opciones alternativas que planteas, y yo siempre peleo co los clientes con ello, porque no entienden que un slider no es efectivo. Además cuanto segundos está el usuario mirando la pantalla sin hacer scroll? 1-2 segundos? por tanto se pierden la mitad del slider…

    En fin, que no me enrollo más. que me ha encantado el post.

    Saludos,

  5. Hola,
    Esto ya me lo decía mi mujer cuando abrí mi blog: “No uses slider; lo hace todo el mundo”. No tiene formación en diseño web, pero sí mucha intuición y buen gusto.
    La verdad es que, aunque me rompes un poco los esquemas, argumentas muy bien tus consejos. El problema no está, como siempre, en la herramienta en sí, sino en cómo se usa.
    Creo que unos pocos slides pequeños y que no “carguen” tu web pueden dar al lector un botón de muestra de tu temática. De todas formas, tendré en cuenta tu alternativa #1: una imagen con un texto explicando de qué va tu web.

    Un saludo,
    Jesús

  6. Muy buenas recomenzaciones e ideas, totalmente cierto todo lo que espones en el post, de todas formas creo que se seguiran usando para negocios especificos como las tiendas online, ya que está la necesidad de destacar las ofertas y promociones de varios productos, sea como sea lo que es irrefutable es que hay que tener muy en cuenta la velocidad de carga, la optimización de las imagenes, que sea adaptable a mobiles y tablets, entre otras cosas.
    Buen aporte y gracias por la información.
    Saludos

    1. Gracias Roberto por tu comentario.
      Respecto a una tienda online puedes destacar los productos en ofertas colocándolos en la parte superior, y con algo que destaque el precio. Si te paras a pensar un poco puedes hacer cosas diferentes y creativas sin usar un “slider”.
      Y me reitero, el slider también puede servir en algunos casos.
      🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *