ocho segundos. Este es el tiempo que tiene para atraer al usuario promedio de Internet a su sitio web. Puede personalizar el contenido y el diseño de la página tanto como sea posible, pero no hay forma de evitarlo: atraer a los visitantes del sitio, especialmente a aquellos que conducen por primera vez, es un verdadero desafío para las empresas en línea.
Sin embargo, este desafío tiene una gran solución gracias a las numerosas tecnologías de diseño web que tenemos a nuestra disposición. Entre todos los métodos para llamar la atención y la acción rápidamente, probablemente lo hayas visto presentación de diapositivas web técnica. Y hay una buena posibilidad de que también funcione para su sitio.
Ahora, cuando escuchas el término la presentación de diapositivasTu mente puede saltar inmediatamente Presentación de Powerpointy de ahí sala de conferencias y aburrimiento.
Si es así, intente olvidarse de PowerPoint por un tiempo. Resulta que las presentaciones de diapositivas web se encuentran entre los métodos más populares y efectivos para comunicar contenido visual a los visitantes.
En esta guía, aprenderemos sobre los usos comunes de las presentaciones de diapositivas web, las mejores prácticas para implementarlas y cómo comenzar a incorporarlas en su sitio web.
¿Qué es una presentación de diapositivas en el sitio?
Una presentación de diapositivas de una página web, también conocida como «control deslizante», es una función de página web que se utiliza para presentar varias imágenes en forma de galería. El control deslizante muestra una imagen a la vez y cambia automáticamente entre imágenes después de un tiempo de espera y/o cuando el usuario ingresa, como deslizar o hacer clic en un botón.
Las empresas en línea en particular suelen usar controles deslizantes en su página de inicio para comunicar sus misiones o mostrar CTA para nuevos productos. Tome este ejemplo simple de sitio web de microsoft:
Este estilo de presentación facilita la visualización de dos formas básicas. Primero, atrae al espectador al colocar contenido importante sobre la pestaña sin tener que desplazarse. Este contenido puede incluir nuevos productos u ofertas, anuncios o publicaciones en blogs, o cualquier otra cosa que los visitantes necesiten saber.
En segundo lugar, las presentaciones de diapositivas en línea pueden agregar un toque visual a sus páginas. Por ejemplo, recorrer imágenes grandes y vívidas crea una experiencia inolvidable e incluso puede evocar algunas emociones positivas en sus lectores que luego asociarán con su marca. Esto es especialmente efectivo para portafolios de artistas, empresas de medios y otras organizaciones con un fuerte énfasis en la estética.
Cuándo usar una presentación de diapositivas en línea
Puede encontrar controles deslizantes en la web, pero en algunos casos funcionan especialmente bien. Hagamos una breve descripción de sus mejores usos:
Nuevos productos / ofertas
Coloque un control deslizante en su página de inicio y llénelo con CTA que muestren la última oferta de su empresa, como en el ejemplo de Microsoft anterior. ¿Nuevo en CTA? Echa un vistazo a nuestros ejemplos favoritos.
Información general
Muchas organizaciones usan controles deslizantes para comunicar su misión, estrategia o historia. Esto a menudo se puede ver en los sitios web de agencias de consultoría, organizaciones educativas y sin fines de lucro, y proyectos especiales donde no hay un producto físico para exhibir.
Presentacion de producto
En lugar de pasar por varios productos, puede concentrarse en un producto o línea de productos. Con este enfoque, cada diapositiva puede explicar un aspecto, beneficio o iteración diferente de su producto.
En lugar de presentar todo a la vez, el control deslizante divide la información en piezas de contenido fáciles de digerir. Por ejemplo, mira este elegante diseño de Nike que muestra los 15 años de la línea de zapatillas Dunk.
Carteras
Las empresas de medios, las organizaciones creativas y los creadores independientes a menudo usan controles deslizantes para resaltar su último o mejor trabajo. Puede exhibir múltiples imágenes de un proyecto, o múltiples proyectos vinculados a sus páginas dedicadas en su sitio.
Artículos relacionados
Los sitios de noticias y los blogs con actualizaciones frecuentes pueden agregar un llamado a la acción para el contenido más nuevo o más popular en forma de presentación de diapositivas. Evite los CTA de texto sin formato aquí; en su lugar, use imágenes destacadas para cada publicación para dirigir los ojos de los usuarios al contenido nuevo.
Ahora que hemos visto Qué los controles deslizantes pueden hacer, hablemos más Cómo para su implementación. Y sí, hay una forma incorrecta de hacer un control deslizante.
Mejores prácticas de presentación de diapositivas web
- Habilite las transiciones automáticas y manuales.
- Indique visualmente el número de diapositivas.
- Optimizar para el rendimiento del sitio web.
- Tenga en cuenta los efectos de transición.
- Hazlo compatible con dispositivos móviles.
- Ponlo a disposición.
Desde el punto de vista de la utilidad, los controles deslizantes son un arma de doble filo. Debido a su popularidad, las presentaciones de diapositivas son familiares para la mayoría de las personas que visitan su página y no deberían tener problemas para comprender el propósito de la función.
Sin embargo, también significa que los controles deslizantes mal diseñados desconectarán a los usuarios muy rápidamente, especialmente si es literalmente lo primero que ven. Por este motivo, es importante planificar cuidadosamente el elemento de la presentación de diapositivas y seguir estas seis prácticas recomendadas:
1. Habilite las transiciones automáticas y manuales.
Como mencioné, las presentaciones de diapositivas web pueden rotar automáticamente según el tiempo o manualmente cuando el usuario hace clic en un botón de flecha o mueve la pantalla.
Recomendamos que el control deslizante permita ambos métodos. A medida que se carga la página, el control deslizante se mueve automáticamente, dando al usuario tiempo suficiente para capturar cada imagen. Si el usuario quiere cambiar las diapositivas él mismo, también puede hacerlo, lo que puede desactivar las transiciones con el tiempo. Este enfoque brinda a los usuarios un mejor control sobre el contenido que desean ver. Así es como se implementan la mayoría de los controles deslizantes web, lo que lo hace intuitivo para los visitantes.
Para ayudar a los usuarios, coloque los botones de flecha a ambos lados del elemento (izquierda y derecha o arriba y abajo). Estos botones pueden estar visibles en el elemento de forma predeterminada o aparecer cuando el usuario pasa el cursor sobre la presentación de diapositivas. El estilo que elijas depende de ti.
2. Indicar visualmente el número de portaobjetos.
Es una buena idea señalar el número total de diapositivas en el control deslizante para que los usuarios sepan cuánto contenido queda por ver. Puede hacer esto con miniaturas flotantes, números (por ejemplo, 1/5, 2/5…) o alguna otra señal visual sutil como en el ejemplo anterior de Microsoft.
3. Optimice el rendimiento del sitio web.
Si su sitio web tarda más de unos segundos en cargarse, los visitantes comenzarán a perder interés. Muchos ni siquiera verán el control deslizante completo en el que has trabajado tan duro.
Primero, piense en la cantidad de imágenes en su presentación de diapositivas. Cuantas más diapositivas, más tiempo se tarda en cargar, así que solo incluya las diapositivas que necesita. Guarde el resto del contenido para más adelante en la página. Luego, optimice las imágenes del control deslizante reduciendo el tamaño del archivo para cada imagen tanto como sea posible.
Finalmente, muchos creadores de presentaciones de diapositivas implementarán la carga diferida. Solo la diapositiva actual se cargará primero y las diapositivas ocultas no se cargarán hasta que se le solicite. Esta característica desglosa sus necesidades de carga tanto como sea posible, así que búsquela en su búsqueda del asistente deslizante.
4. Preste atención a los efectos de transición.
Las transiciones son un detalle aparentemente pequeño de los controles deslizantes a los que las personas están muy acostumbradas, y cualquier cosa más allá de la norma puede ser desalentadora.
Es posible que sienta la tentación de mejorar las transiciones de diapositivas con un efecto de disolución o borrado de estrellas. Admiro tu gusto, pero trata de resistir esta tentación y mantén tus transiciones correctas. Lo mejor es usar un efecto de panoramización horizontal/vertical o un fundido de entrada simple. Esta llamada es suya, pero cuanto menos distraiga e irrite la transición, mejor.
5. Hágalo compatible con dispositivos móviles.
Los sliders son elementos muy dinámicos con mucha imagen. Si su módulo no está diseñado para ejecutarse en pantallas más pequeñas, puede parecer un desastre muy dinámico con las imágenes.
como se forman casi la mitad del tráfico, haga un favor a los usuarios de dispositivos móviles y aplique principios de diseño web receptivo a sus controles deslizantes (los asistentes de control deslizante y complementos de buena reputación pueden hacer esto). O bien, puede eliminar por completo el control deslizante de su sitio móvil para reducir el desorden.
6. Hazlo accesible.
Finalmente, todos los controles deslizantes deben ser tan fácilmente accesibles como sea posible. Esto significa capacidad de respuesta móvil, un texto alternativo de imagen para cada diapositiva (y una alternativa de texto a la presentación de diapositivas, si es posible), lo que permite transiciones manuales de diapositivas y activa esas transiciones con teclas de flecha además de hacer clic en los botones.
Cómo hacer una presentación de diapositivas para un sitio web
¿Quieres probar los controles deslizantes? Tienes varias opciones. Echemos un vistazo a lo que está disponible, desde la implementación menos técnica hasta la más técnica.
Utilice el generador de presentaciones de diapositivas.
Para una solución liviana, use un software de creación de presentaciones de diapositivas web especializado. Con estas herramientas, simplemente seleccione el contenido del control deslizante, ajuste la configuración e incruste el elemento del control deslizante en su página. Comience con una herramienta gratuita como Bannersnack o Cincopa y vea cómo le gusta, luego considere cambiar a la opción paga.
Los creadores de sitios web populares también le permiten aprovechar la función de control deslizante, tanto de forma nativa como a través de un complemento de terceros. Asegúrese de que estas herramientas puedan hacer que sus presentaciones de diapositivas respondan y sean accesibles para los usuarios.
Use un tema / complemento de control deslizante de WordPress.
Si su sitio está construido en WordPress CMS, muchos temas tienen módulos deslizantes integrados. También hay muchos complementos deslizantes gratuitos y premium que agregarán la funcionalidad de presentación de diapositivas a su sitio web, en cualquier publicación o página. Para una tienda de WooCommerce, considere un complemento deslizante de WooCommerce para mostrar productos.
Le recomendamos que agregue controles deslizantes con un complemento encima del tema, ya que cambiar el tema no eliminará la presentación de diapositivas. Dicho esto, los temas deslizantes premium son bastante convenientes en este caso.
Programe manualmente el control deslizante.
Si te sientes valiente, intenta codificar el control deslizante de la imagen tú mismo. Para funcionar correctamente, un control deslizante necesita HTML, CSS y JavaScript, los tres grandes lenguajes de programación frontend.
Ambas cosas Escuelas W3 y libreCodeCamp ofrecen tutoriales sobre cómo crear un control deslizante de imágenes. O sigue nuestra guía para crear un carrusel de imágenes en Bootstrap CSS. Programe el control deslizante y luego ajuste el CSS para que coincida con el nuevo módulo con el resto de su sitio.
Bonificación: crea una presentación de diapositivas de video
Como alternativa al control deslizante de imágenes interactivo programable manualmente, puede elegir una presentación de diapositivas de video que muestre la misma información.
Si tiene poco tiempo o recursos, lo recomendamos encarecidamente. creador de presentaciones de diapositivas gratuito de Canva. Esta herramienta ha sido diseñada para ser rápida, intuitiva y fácil de usar para cualquier persona, incluso para aquellos que no tienen elementos de construcción.
En Canva, puedes crear fácilmente presentaciones de diapositivas a partir de plantillas temáticas para diferentes nichos como explicación, comida y moda. Llena tu presentación de diapositivas con imágenes y videos de tu propia biblioteca y la biblioteca multimedia de Canva. Luego, personalice su presentación de diapositivas con íconos, ilustraciones, animaciones y música. Finalmente, descargue su presentación de diapositivas de forma gratuita (y no, sin marca de agua).
No solo PowerPoint
Las presentaciones de diapositivas de Internet no son adecuadas para todos. Sin embargo, si desea enfatizar las imágenes mientras reduce su tasa de rebote, le recomendamos que las pruebe.
Al agregar un control deslizante, tenga en cuenta nuestras mejores prácticas y asegúrese de que cumpla con la misión general de su sitio web y no lo distraiga. Finalmente, asegúrese de que sean visualmente atractivos y atractivos para todos. Esta no es una sala de conferencias bien iluminada, ¡eso es lo tuyo!
