• Tiempo de lectura: 10 min.
Bolsillo Facebook Twitter WhatsApp Correo electrónico
Desplazamiento antes y ahora
Todo solía ser más fácil. También había desplazamiento, usamos el mouse para movernos hacia abajo en una página y generalmente hacia arriba nuevamente, hicimos clic en la página siguiente en el menú o mediante un enlace de contenido y repetimos el juego. En el diseño web de aquella época se intentaba evitar por completo el scrolling.
Todo es más complicado en estos días. Las redes sociales en particular han contribuido a que se acomode más contenido en menos páginas y, como resultado, se muestre naturalmente más contenido por página.
El concepto de "above the fold", para el que trabajé en páginas individuales durante días a finales de los noventa, de modo que toda la información importante fuera completamente visible cuando se accediera inicialmente a una página y sin barras de desplazamiento a la derecha y abajo, está en el significado perdido. Hoy en día, el pliegue, es decir, el borde inferior visible de una página después de que se abre por primera vez, es principalmente el indicador de que algo vendrá después.
Además de las redes sociales, los dispositivos móviles están impulsando la tendencia hacia el desplazamiento prolongado, ya que es casi imposible implementar el concepto anterior de "above the fold" para dispositivos móviles. Las pantallas son demasiado pequeñas. Los compromisos necesarios simplemente no serían posibles.
No te pierdas nada: ¡Suscríbete a la newsletter de t3n! 💌
Por favor, introduzca una dirección de correo electrónico válida.
Lo sentimos, hubo un problema al enviar el formulario. Inténtalo de nuevo.
Por favor, introduzca una dirección de correo electrónico válida.
Nota sobre el boletín & protección de Datos
¡Casi listo!
Haga clic en el enlace del correo electrónico de confirmación para completar su registro.
¿Quieres más información sobre el boletín? Descubre más ahora
Los teléfonos inteligentes han vuelto a hacer que el desplazamiento sea socialmente aceptable, por así decirlo. En pantallas pequeñas, es mucho más cómodo desplazarse por una página larga con el dedo que usar la navegación con la punta del dedo para saltar de una página a otra. La naturalidad del gesto de desplazamiento también permite diferentes velocidades de desplazamiento. Lo sabes por hojear un libro. Siempre que el autor haya establecido anclas ópticas para la orientación, un libro se puede escanear muy rápidamente para obtener información relevante.
La tendencia al scrolling ha dado lugar a los llamados one-pagers en los últimos años. Estos son sitios web que solo constan de una sola página y distribuyen toda la información relevante de manera estructurada en esta página. Los de una página pueden dar la impresión de que constan de varias páginas.
Los diferentes tipos de desplazamiento
El scrolling ya no es una actividad baladí que surge del poder normativo de lo fáctico. Más bien, como diseñadores, podemos decidir conscientemente qué tipo de desplazamiento utilizar.
El desplazamiento largo se interpreta de forma diferente. Por lo tanto, primero quiero definir el término en contraste con otros términos.
El desplazamiento largo en su forma original simplemente describe una página larga con contenido que está estructurado de manera homogénea y se desplaza de arriba a abajo. Visto de esta manera, ciertamente podemos entender el desplazamiento largo como un término genérico.
El desplazamiento largo fijo es una variante del desplazamiento largo en la que los elementos estáticos individuales no se desplazan. Combina la ventaja del diseño orientado a la página anterior con la del desplazamiento sin página.
El desplazamiento infinito, por otro lado, se refiere a una forma de desplazamiento prolongado en el que el nuevo contenido se recarga constantemente al final de la ventana gráfica, es decir, la ventana visible del navegador, de modo que la página parece interminable, infinita. Así funcionan todas las redes sociales. Hasta qué punto esta es la elección correcta para sitios web normales requiere una cuidadosa consideración.
Por último, pero no menos importante, me gustaría mencionar el desplazamiento de paralaje, que, sin embargo, no es un subtipo de desplazamiento largo. El desplazamiento de paralaje se trata más del aspecto de la narración a través de una animación de aspecto natural. La ilusión de movimiento se crea mediante secciones de la misma página que se desplazan a diferentes velocidades, lo que hace posibles diseños muy vivos. El desplazamiento tampoco tiene que ser vertical aquí, pero normalmente funciona incluso mejor como una variante horizontal. Este artículo no entrará en detalles sobre el desplazamiento de paralaje.
Ventajas del desplazamiento largo
Ya he descrito una de las principales ventajas del desplazamiento largo arriba. El desplazamiento largo es la forma natural de desplazamiento en dispositivos móviles. Los gestos establecidos, que no requieren ningún entrenamiento especial, permiten utilizar esta función de forma intuitiva y natural. Además, existe un cuasiautomatismo en el diseño web responsive, que se puede resumir en “cuanto más pequeña es la pantalla, más tiempo hay que hacer scroll”.
Otra ventaja resulta directamente del hecho de que las redes sociales también funcionan con desplazamiento largo. Todos estamos acostumbrados ahora y realmente no esperamos nada más. Era completamente diferente hace diez o quince años. Las viejas percepciones sobre "above the fold" datan de esta época.
Sin embargo, el mayor beneficio del desplazamiento largo desde la perspectiva de un diseñador es que aumenta en gran medida el potencial para la narración visual. Está claro que un hilo narrativo más largo, que también puede recorrerse de manera homogénea, también permite historias más largas.
Uno de los ejemplos más inusuales de narración visual que utiliza desplazamientos largos es probablemente The Boat. (Captura de pantalla: t3n)
Desventajas del desplazamiento largo
Donde hay ventajas, también hay desventajas. Más adelante aprenderemos cómo lidiar con las desventajas identificadas. Muchos pueden ser eliminados. Pero prepárate para el trabajo.
La optimización de motores de búsqueda se está volviendo más difícil
Cualquiera que haya estado trabajando en la inmensidad de la web durante mucho tiempo probablemente pensará directamente en el tema del SEO. Y, de hecho, hay problemas típicos que inevitablemente trae un one-pager con su largo desplazamiento y su enfoque de mostrar todo en una página.
La cuestión del SEO en la página se ve claramente afectada aquí. Ahora todos hemos aprendido que tenemos que optimizar nuestras páginas para las palabras clave que deben definirse de antemano para lograr una clasificación óptima. Y ahora, de repente, solo tiene uno en OnePager, donde habría tenido varios en una estructura de página con varias subpáginas. Un título, una descripción y, en realidad, solo un encabezado de primera clase. Sin embargo, dado que normalmente trata varios temas en una sola página, la optimización se vuelve difícil.
Se supone que la relevancia es el enfoque según el cual Google evalúa y clasifica una página. ¿Qué tan relevante puede ser su página para un tema específico si cubre muchos temas diferentes dentro de la misma página?
Normalmente, no puede ofrecer la estructura de enlace interno, también bienvenida por Google and Co., con una sola página. Esto también dificulta la adquisición continua de enlaces externos, es decir, la construcción de enlaces clásica.
El uso de JavaScript, por ejemplo, para la carga diferida u otro tipo de aflojamiento, puede bloquear el rastreador para que no indexe su OnePager por completo. Sin indexación, sin embargo, su contenido tampoco se puede encontrar.
Otra desventaja de SEO puede ser que su página tarde mucho en cargarse. El rendimiento también ha sido un factor de clasificación desde hace algún tiempo.
Desplazamiento largo con todos los trucos: navegar con responsabilidad. (Captura de pantalla: t3n)
La guía del usuario se vuelve más difícil
Por lo general, hoy en día encontramos elementos de navegación en el encabezado o en el pie de página o en ambos elementos. Un diseño basado en el concepto de "above the fold" deja tanto el encabezado como el pie de página siempre visibles o, al menos, solo afecta marginalmente su visibilidad.
Si confiamos en un desplazamiento largo, el encabezado inevitablemente desaparece de la vista muy rápidamente, mientras que el pie de página solo aparece al final del desplazamiento. En el medio, el lector está en las manos de Dios: no tiene medios de navegación aparte de la opción de desplazarse hacia arriba o hacia abajo. Con el desplazamiento infinito, ni siquiera volvemos a ver el pie de página...
Si en realidad se procesan varios temas en una sola página y solo se pueden experimentar desplazándose, a sus lectores les resultará difícil reconocer rápidamente dónde están y dónde termina un tema y comienza uno nuevo. El problema se complica cuando nos damos cuenta de que el lector de hoy escanea en lugar de leer.
No se debe subestimar el aburrimiento causado por el desplazamiento prolongado. Nadie tiende a viajar largas distancias. Apuesto a que solías preguntarles a tus padres de camino a las vacaciones después de los primeros cinco kilómetros "Mamá, ¿llegamos pronto?".
La marca de moda Waven funciona con un desplazador largo segmentado que solo se puede desplazar página por página, utilizando la flecha hacia abajo que se muestra en el centro a continuación. Puedes hacerlo. (Captura de pantalla: t3n)
Cómo usar el desplazamiento largo correctamente
Ahora que las desventajas son obvias, ahora aprenderá a manejarlas. Porque la buena noticia es que casi todas las desventajas se pueden eliminar con un poco de trabajo extra.
SEO en desplazamiento largo
Con respecto al tema de SEO, es importante diferenciar más. El desplazamiento largo no siempre se puede traducir con una sola página. Si utiliza el desplazamiento largo principalmente para la narración visual, es poco probable que surjan las desventajas mencionadas anteriormente.Después de todo, está contando una historia homogénea en un lienzo que es tan largo como se necesita para este propósito. Esto es realmente ideal desde el punto de vista de SEO.
Si, por otro lado, en realidad hay diferentes temas en su ruta de desplazamiento largo o si se trata de una sola página, las cosas se ponen interesantes. La palabra clave es segmentación.
Dividimos nuestro contenido en segmentos. Esto se puede hacer usando DIV ID, el nombre que elija es más congruente con el enlace de anclaje. Se puede saltar a cada segmento desde la parte superior de la página. Utiliza enlaces de anclaje para esto, porque los enlaces de anclaje son señales de SEO y son evaluados por los motores de búsqueda. Otra ventaja de los enlaces de anclaje es que también se puede acceder a ellos directamente desde el exterior, lo que respalda la construcción de enlaces.
Le damos a cada segmento un título de primer orden, es decir, un H1; muchos de ustedes probablemente se resisten a hacer esto, porque la regla es usar la menor cantidad posible de H1, idealmente solo uno por página, podemos hacerlo. pero quédese tranquilo con el ex hombre de Google a cargo de este tema, Matt Cutts, quien dice:
Contenido editorial recomendado
Aquí encontrará contenido externo de videos de YouTube que complementa nuestro contenido editorial en t3n.de. Al hacer clic en "Mostrar contenido", acepta que podemos mostrarle contenido de videos de YouTube en nuestras páginas ahora y en el futuro. Los datos personales pueden transmitirse a plataformas de terceros.
Nota sobre protección de datos
Lo siento, algo salió mal...
Por lo general, aquí es donde encontrarás contenido externo de YouTube Video, pero no pudimos recuperar tu configuración de consentimiento. Vuelva a cargar la página o ajuste manualmente su configuración de consentimiento.
Ahora, cuando se trata de relevancia, en realidad es difícil clasificar correctamente si incluye demasiados temas diferentes en una página. Sin embargo, si se trata de una página con un término genérico, que luego se divide en partes más pequeñas y más digeribles en el curso posterior de la página para tratarlo de manera exhaustiva, al menos es posible una buena clasificación.
En este caso, es importante preparar el contenido de la manera más fácil de leer posible y tratar de empatizar con el grupo objetivo lo mejor posible. ¿Cómo es probable que el lector promedio aborde el tema? Si logras trabajar el tema de la mejor manera posible, hay una alta probabilidad de que esto sea recompensado por los motores de búsqueda.
Guía al usuario en desplazamiento largo
Hay una serie de desventajas en la guía del usuario que ya se han identificado anteriormente. Como lidiar con:
Navegación
La desaparición de encabezados y pies de página no es un hecho divino. Es técnicamente relativamente sencillo hacer que el encabezado sea pegajoso, es decir, hacer que se mueva con el desplazamiento. De esta manera, el encabezado permanecería visible en todo momento, sus usuarios no tendrían que desplazarse hasta la parte superior para obtener opciones de navegación nuevamente.
Recientemente, el encabezado fijo se ha vuelto más común en una forma mixta. El encabezado inicialmente permanece visiblemente pegajoso, pero luego desaparece por completo a medida que se desplaza más, dejando más espacio para consumir el contenido real, especialmente en dispositivos móviles. Si el usuario luego intenta desplazarse hacia arriba, el encabezado aparece inmediatamente en la parte superior de la pantalla como si nunca hubiera desaparecido.
También usamos un encabezado fijo aquí en t3n. (Captura de pantalla: t3n)
El pie de página también se puede crear adhesivo. En la mayoría de los casos, sin embargo, es probable que esto no sea deseable. Al igual que con el encabezado, también se puede hacer que el pie de página desaparezca y aparezca automáticamente. La pregunta es si eso es necesario. Si la arquitectura de la información se diseña en consecuencia, debería ser relativamente sencillo prescindir por completo de un pie de página que aparece antes del final de la página.
En general, visualizar la capacidad de desplazarse hacia arriba también es una buena idea. Un pictograma inconfundible de regreso al principio debe estar presente en cada página de desplazamiento largo.
Llegados a este punto, me gustaría retomar el tema de la segmentación. Podemos reflejar esta segmentación en consecuencia en el diseño. Además de la navegación principal, sería posible conectar una navegación secundaria adjunta al costado, que se vincula directamente a los segmentos individuales y permanece fija sin afectar significativamente el espacio limitado de la pantalla. Apple lo demostró hace años.
En la página del producto para el marco de diseño Diapositivas, encontrará esta navegación lateral, que conduce a los segmentos de página individuales. (Captura de pantalla: t3n)
Es bueno que la cantidad de puntos de navegación refleje la cantidad de segmentos y, si no, se deben visualizar demasiados segmentos de esta manera. En última instancia, el objetivo es la claridad. Así llegamos a una limitación casi natural de la longitud de nuestro lado. También se recomienda que los pictogramas indiquen en qué segmento se encuentra actualmente. Esto le da al lector la oportunidad de clasificarse localmente y tener una idea del alcance general y su respectiva posición.
Será aún más fácil para sus lectores si separa gráficamente los segmentos individuales. Es bueno cuando un segmento siempre es tan largo como el área visible del navegador. Esto crea la impresión de una pantalla orientada a la página, que a su vez sirve para proporcionar una visión general.
Al mismo tiempo, la variación creativa garantiza que se evite el aburrimiento. Además del diseño variado, también se puede evitar el aburrimiento con elementos de paralaje o animaciones funcionales. Las animaciones funcionales respaldan la UX de una página, las animaciones funcionales típicas brindan retroalimentación. Por ejemplo, el contenido podría desplegarse visiblemente al desplazarse o moverse a la ventana gráfica de alguna otra manera, las imágenes podrían organizarse en una galería y mucho más.
Si usamos Lazy Load, es importante visualizar el proceso de carga, ya que la conexión a la red no siempre será lo suficientemente rápida para evitar un retraso notable
Conclusión: el desplazamiento largo es práctico si estamos dispuestos a trabajar más
Una cosa ciertamente ha quedado clara en el transcurso de esta publicación: las páginas con un enfoque de desplazamiento largo tienden a significar más trabajo que los conceptos de diseño clásicos. Esto se aplica al menos cuando el desplazamiento prolongado va acompañado del abandono de diseños de varias páginas.
Pero si el desplazamiento largo es solo una página entre muchas, las ventajas superan las desventajas, especialmente con respecto a la narración visual. Las historias largas se cuentan mejor en páginas largas y no en fragmentos. Aquí es donde los efectos de paralaje y otras animaciones pueden perfeccionar aún más la narración.
Por cierto, hay un marco de Designmodo que puede usar para implementar el desplazamiento largo en el sistema modular. Consulte el sitio web del producto. También construido usando el marco llamado Diapositivas, demuestra algunas de las mejores prácticas mencionadas aquí.
Más recursos sobre el tema
Los pros y los contras del desplazamiento largo en el diseño web | Revista de diseño Speckydoy
Todo lo que necesitas saber sobre la tendencia de desplazamiento largo | Depósito de diseñador web
Prácticas recomendadas de desplazamiento infinito | UX PlaFnet
10 fantásticos diseños de sitios web de una sola página larga | aptodiseño
Desplazamiento en diseño web: ¿cuánto es demasiado? | Revista de diseño Speckyboy
Prácticas recomendadas para el desplazamiento largo | Planeta UX
Animación funcional en el diseño de UX: ¿Qué hace una buena transición? | babech.biz
Trucos de SEO para sitios web de una sola página | Awwwards
Sitios web de una sola página & SEO | País del motor de búsqueda
También te puede interesar esto
Bolsillo Facebook Twitter WhatsApp Correo electrónico
Dieter Petereit
Periodista técnico desde los noventa | dr. Web a.D.
Temas relacionados
SEO diseño web Apple ofimática Facebook
No te pierdas nada más: Nuestro boletín
Por favor, introduzca una dirección de correo electrónico válida.
Elija su boletín t3n
+ Seleccionar más
Seleccione al menos un boletín.
Lo sentimos, hubo un problema al enviar el formulario. Inténtalo de nuevo.
Nota sobre el boletín & protección de Datos
¡Casi listo!
Haga clic en el enlace del correo electrónico de confirmación para completar su registro.
