slider-web

Ya es oficial. Los famosos sliders que reciben¬†a¬†los¬†usuarios¬†al entrar en la mayor√≠a de¬†las¬†home pages, tienen los d√≠as contados. Y no solo lo decimos nosotros, sino los numerosos expertos del panorama UX y CRO que apuestan, cada vez m√°s, por la sencillez y rapidez de los sites. ¬ŅQuieres saber qu√© ha pasado?¬†Pues sigue leyendo. Hoy te contamos porqu√© hay que eliminar los sliders de nuestras p√°ginas de inicio.

La de los sliders era una muerte anunciada. Con el Sr. G (Google) peleando por mejorar  la usabilidad y experiencia de usuario en las páginas web, era de esperar que este tipo de carruseles vieran pronto su fin.

Ante esto, seguro que te estar√°s preguntando… ¬ŅPero si fuisteis vosotros los que, en su d√≠a, afirmabais¬†que implementar un slider en¬†mi¬†home page me ayudar√≠a a potenciar las conversiones? ¬ŅQu√© ha pasado? ¬ŅPorqu√©, de repente, tengo que volver a modificar la home de mi web?

Lo que ha pasado es que se ha producido un cambio de objetivo. Anteriormente la tendencia predominante de las tiendas online era la de centrarse en la marca, en el producto, en la promoci√≥n. Sin embargo, en la actualidad, todo se centra en el usuario. De ah√≠ que los “capos” del sector¬†aboguen, cada vez, por un dise√Īo web m√°s limpio, sencillo¬†y r√°pido que satisfaga las¬†necesidades y facilite la interacci√≥n de nuestros visitantes.

Pero vamos a ver todo esto m√°s detenidamente para que te convenzas de que seguir manteniendo un slider en la p√°gina de inicio de tu web es una mala idea.

Siguiendo las conclusiones del experimento que Roger Llorens (@rogerllj) publicó el pasado mes de febrero en wwwhatsnew.com podemos ver las:

 

Principales Razones por las que los Sliders son Historia

  • Alejan el foco de atenci√≥n sobre¬† CTAs Importantes

¬°As√ļmelo ya! Cuando un usuario entra a tu p√°gina web o a cualquier otra, no se detiene frente a tu slider a mirar qu√© ofertas has decidido incluir en cada una de las diapositivas. ¬°Al contrario! Es posible que el usuario no se fije ni en el mensaje de tu slide inicial. Esto significa¬†que las llamadas a la acci√≥n o mensajes relevantes que sit√ļes en los sides inferiores, tendr√°n muy pocas probabilidades de ser vistos por los usuarios.

  • Aumentan el tiempo de carga de la p√°gina

Creo que es la 5¬™ o 6¬™ semana consecutiva que te lo recuerdo, pero no me importa hacerlo una vez m√°s. ¬°GOOGLE QUIERE P√ĀGINAS R√ĀPIDAS! ¬†Y nuestros sliders van en contra de estas exigencias puesto que, suponen un aumento en la velocidad de carga de nuestros sites.

¬°Pi√©nsalo! En ocasiones una sola imagen de grandes dimensiones tarda “la vida” en descargarse… pues imag√≠nate lo que empeora la cosa cuando tienes 5 o 6 im√°genes en tu slider.

Si no quieres fastidiar tu SEO m√°s vale que empieces plantearte muy seriamente esto que te decimos.

  • Dificultan la experiencia de usuario en mobile

¬ŅTe le√≠ste bien nuestro post sobre “Optimizaci√≥n mobile de p√°ginas web“? Si es as√≠, comprender√°s la gran importancia de tener una web adaptada a dispositivos m√≥viles.

Para ello es indispensable que nos olvidemos de los sliders ya que, en versi√≥n responsive, estos elementos dificultan la experiencia de navegaci√≥n para nuestros “users”. Su tama√Īo es muy peque√Īo, ¬†en ocasiones no se pueden controlar y adem√°s,ocupan un espacio que podr√≠a aprovecharse para incluir elementos mucho m√°s esenciales para el visitante.

Buenas alternativas para sustituir un Slider #tendenciasweb

Que elimines el slider no significa que no puedas ocupar su lugar con alg√ļn otro elemento que no presente los mismos problemas que el anterior. De hecho, es muy adecuado optar por una alternativa eficaz a¬†este slider ya que, el lugar que ocupa es un lugar privilegiado dentro de una p√°gina web.

Entre las alternativas que puedes elegir, tenemos:

  • Imagen est√°tica

No es m√°s que una imagen de gran formato que hace las veces de banner promocional. Como vemos, el secreto radica en escoger una imagen lo suficientemente llamativa como para que “embelese” a los visitantes nada m√°s entrar en nuestra web.

ejemplo7

 

TRUCO DEL ALMENDRUCO (FREE) !!! 

A la hora de seleccionar las im√°genes para tu cabecera web, debes tener en cuenta que dichas fotos deben estar ULTRA-OPTIMIZADAS para que no supongan un problema a la hora de descargar la p√°gina por parte de tus usuarios.

Ante esto surge nos un problema manifiesto y es que, con el tama√Īo que presentan dichas im√°genes, es complicado encontrar una que sea lo suficientemente ligera como para que no suponga un problema para el page speed.

¬ŅC√≥mo logramos, entonces, tener una foto de buena calidad que no pese?¬†Muy f√°cil.

Con esta herramienta compressor.io podrás disminuir el peso de tus imágenes de una forma sorprendentemente rápida y fácil.

compressor

 

 

  • Formulario

Otras de las alternativas que tenemos para sustituir nuestros sliders es incluir una imagen est√°tica acompa√Īada de un formulario de registro como el que vemos aqu√≠.

De esta forma, aprovechando la atención que el usuario dirige hacia la zona principal de nuestra home, podemos incluir nuestra llamada a la acción para captarles.

ejemplo3

 

 

  • 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. F√≠jate:

 

ejemplo5

ejemplo6

No tan buenas alternativas para sustituir un Slider

  • V√≠deo en bucle

Este recurso se está poniendo muy de moda actualmente. Se trata de incluir un fragmento de vídeo de gran formato que va repitiéndose una y otra vez. Estéticamente es muy efectivo y consigue atraer la atención de nuestros usuarios de forma fácil y rápida. Además, si se gestiona bien, otorga un toque de personalización excelente a nuestra página.

ejemplo2

ejemplo4

Seguro que ahora¬†te est√°s preguntando¬†“Pero vamos a ver… ¬°Un v√≠deo pesa m√°s que una imagen! ¬ŅEl objetivo no es que mi p√°gina sea m√°s liviana?”

Efectivamente. Por eso te hemos dicho que ésta es una alternativa no tan buena para sustituir a un slider. Al menos, no a nivel Page speed.

Sin embargo, si hablamos de persuasión, el vídeo arrasa sobre la imagen estática.

Está claro que un vídeo pesa mucho más que una imagen, pero si tu negocio exige la inclusión de este elemento en la cabecera de tu página,  la clave está en optimizarlo al máximo.

Como par√°metros de media, tienes que tener en cuenta que este tipo de recursos se basan en un film de m√°ximo 10 segundos y un peso aproximado de 11mb que se va reproduciendo “in steaming” y en bucle.

Os aseguro¬†que he visto sliders mucho m√°s pesados que un v√≠deo de estas caracter√≠sticas… as√≠ que, en el fondo, no est√° tan mal la cosa.

 

¬ŅCu√°l es la mejor opci√≥n?

Como siempre te decimos la mejor opción para tu ecommerce es la opción que más se adapte a tus objetivos de negocio. Ni más, ni menos.

 

No te olvides de la llamada a la acción (CTA)

Optes por la alternativa que optes, NO TE OLVIDES DE LAS LLAMADAS A LA ACCI√ďN (Call to Action) ¬°Imprescindibles!

Sobretodo si quieres que tu elemento principal (ya sea slider, imagen fija, vídeo, etc.) tenga una tasa de conversión adecuada y te aporte  buenos resultados.

Fíjate que, en todos los ejemplos anteriores se incluye una frase contundente y un enlace (en forma de botón, o no) hacia la sección o secciones destacadas que interesa que el usuario visite.

 

Y dicho esto, damos por finalizado nuestro post sobre porqué debemos eliminar los sliders de nuestra home page. Esperamos que hayas descubierto una nueva forma de optimizar tu página y hacerla más usable y rápida.

Como siempre, esperamos tus comentarios, dudas, críticas (constructivas), etc. ¡No te vamos a cobrar! ¡Lo prometemos!