2 trucos de interfaz de usuario de desplazamiento que debe evitar

El desplazamiento es una funcionalidad básica de la web tal como la conocemos. Sin embargo, a algunos sitios web les gusta alterar la forma en que funciona el desplazamiento, lo que no solo puede tomarlo por sorpresa, sino que puede afectar su experiencia general de manera negativa.

En pocas palabras, la funcionalidad como el desplazamiento debe mantenerse simple. En este artículo, vamos a hablar sobre cómo el desplazamiento puede afectar la experiencia de su usuario. Luego, analizaremos dos trucos populares de IU de desplazamiento que debe evitar y hablaremos sobre mejores alternativas.

¡Desplázate hacia abajo para seguir leyendo!

Por qué el desplazamiento tiene un impacto en la funcionalidad de su sitio web

Los sitios web en estos días pueden ser increíblemente complejos, tanto desde el punto de vista de la funcionalidad como del estilo. Sin embargo, la forma en que interactuamos con ellos suele ser muy sencilla. En la mayoría de los casos, las interacciones con un sitio web se reducen a hacer clic, escribir o desplazarse. Todos sabemos cómo funcionan esas tres funciones y, lo que es más importante, esperamos que sean universales.

Por ejemplo, imagine visitar un sitio web que se desplaza hacia abajo cada vez que hace clic en cualquier lugar dentro de él. Haría que la navegación fuera confusa y, en algunos casos, incluso podría hacerte creer que hay algún problema con tu navegador o computadora, especialmente si no eres un experto en tecnología.

Sin embargo, hay formas  de cambiar el funcionamiento del desplazamiento sin que afecte la usabilidad de su sitio web. Tomemos el paralaje, por ejemplo. Funciona creando una falsa sensación de profundidad, que se consigue desplazando secciones a diferentes velocidades:

Sin embargo, el paralaje funciona porque la funcionalidad de desplazamiento sigue siendo la misma para el usuario. Es simplemente un truco visual y, si se implementa bien, se ve impresionante. Con esto en mente, hablemos de algunos tipos de trucos de interfaz de usuario de desplazamiento que no necesariamente mejoran la experiencia del usuario, pero son comunes.

2 trucos de interfaz de usuario de desplazamiento que debe evitar (y por qué)

Siempre que implemente una nueva funcionalidad en su sitio web, debe preguntarse dos cosas: ¿cumple un propósito y hace que su sitio sea más complicado de usar? Las respuestas, idealmente, deberían ser “Sí” y “No” respectivamente. De lo contrario, tienes un problema en tus manos.

Aquí hay dos tácticas de desplazamiento comunes que ofrecen diferentes respuestas a las preguntas anteriores.

1. Desplazamiento infinito

Un sitio de desplazamiento infinito es elegante, pero no demasiado práctico.

El desplazamiento infinito es un nombre pegadizo para los sitios web que nunca parecen terminar, casi literalmente. Implementarlo significa que los usuarios cargarán más contenido dinámicamente a medida que se desplazan, hasta que se quede sin contenido.

A menudo, el desplazamiento infinito se usa en galerías o índices de blogs. El objetivo suele ser mejorar las métricas de tiempo en el sitio , sin tener que saltar varias páginas. Si bien el efecto puede verse genial y tiene un propósito lógico, existen tres desventajas clave para implementar la táctica:

  1. No funciona bien con la mayoría de los pies de página.  Si su sitio no tiene fin, no podrá usar un pie de página a menos que lo haga pegajoso , lo que ocupa espacio en la pantalla.
  2. Demasiado contenido en una sola página puede afectar el rendimiento.  Aumentar el contenido de una página consumirá recursos para sus visitantes. Esto significa que su sitio web puede potencialmente  comenzar a sentirse lento a medida que los usuarios se desplazan.
  3. Necesitas implementar animaciones de carga.  A menudo, deberá agregar algún tipo de señal visual  para indicar que se está cargando más contenido cuando se desplaza hacia abajo hasta la parte inferior de una página. De lo contrario, es posible que los visitantes no entiendan lo que está pasando.

La alternativa simple al desplazamiento infinito es la ‘paginación’ . Si su sitio web tiene mucho contenido, tiene sentido dividirlo usando páginas. No solo su diseño se verá menos abarrotado, sino que saltar de una página a la siguiente es tan simple como la navegación.

Los usuarios de Divi pueden elegir cuántas publicaciones mostrar en un índice , y el tema agregará automáticamente páginas relacionadas con el contenido. Lo mismo ocurre con el  módulo Galería  , que admite la paginación para aquellas ocasiones en las que tiene demasiadas imágenes para caber cómodamente en una sola página.

Puede  evitar  agregar más páginas a su sitio web si solo tiene una cantidad modesta de contenido. Sin embargo, a medida que crece, debe tomar decisiones de diseño que no afecten la navegación del usuario. Agregar páginas es una solución elegante a un problema complejo y apostamos a que ninguno de sus usuarios se quejará.

2. Secuestro de desplazamiento

El secuestro de desplazamiento puede generar una experiencia narrativa interesante, pero poco amigable para el usuario.

Normalmente, el desplazamiento se realiza a una velocidad establecida dependiendo de si usa el teclado o el mouse. Sin embargo, algunos sitios web ‘secuestran’ esas funciones, haciéndote saltar entre secciones con poca transición. Suena menor, pero puede ser discordante cuando lo encuentras en la naturaleza.

Por lo general, los sitios con mucho diseño y estilo implementan el secuestro de desplazamiento. Tienen muchas animaciones, fondos de video y otras campanas y silbatos. Si bien pueden verse impresionantes, también son abrumadores. He aquí por qué estamos específicamente en contra del secuestro de desplazamiento:

  • Hace que la navegación parezca lenta.  En la mayoría de los casos, las transiciones se ralentizarán artificialmente para que no parezcan instantáneas. El resultado, sin embargo, es que su sitio web termina sintiéndose lento.
  • Le quita libertad a sus usuarios.  Los usuarios deben poder navegar libremente por su sitio, y el secuestro de desplazamiento puede hacerlos sentir como si estuvieran limitados por lo que usted quiere que vean.
  • Algunos visitantes pueden confundirse con el cambio.  Si un usuario necesita ser experto en tecnología para navegar por su sitio web, probablemente obtenga una puntuación muy baja con respecto a la usabilidad.

El objetivo detrás del secuestro de desplazamiento es aumentar la interactividad. Está perfectamente bien tener esto como objetivo y, afortunadamente, hay varias formas de hacerlo sin afectar la usabilidad de su sitio web. Agregar microinteracciones , por ejemplo, es una excelente manera de hacer que los visitantes sientan que su sitio web está más «vivo».

Sin embargo, no necesita llenar su sitio web con animaciones para crear una experiencia de usuario convincente. Si quieres que tu sitio rompa moldes, la mejor manera de hacerlo es diseñar un esquema de navegación único , algo que Divi puede ayudarte a lograr gracias a su sistema modular.

Conclusión

El desplazamiento no es algo a lo que muchos de nosotros prestamos atención cuando se trata de diseño web. Después de todo, la funcionalidad funciona igual en la mayoría de las plataformas y aplicaciones. Con esto en mente, alterarlo suele ser una mala idea porque la usabilidad de su sitio web se ve afectada inherentemente para todos los visitantes.

En términos generales, estamos en contra de realizar cambios en su sitio web que afecten negativamente su usabilidad, y alterar la forma en que funciona el desplazamiento es uno de ellos. Hay dos trucos de IU de desplazamiento que recomendamos evitar en particular, y son:

  1. Desplazamiento infinito:  este truco de diseño puede verse muy bien, pero puede afectar el rendimiento de su sitio web.
  2. Secuestro de desplazamiento:  la funcionalidad básica, como desplazarse y hacer clic, debe seguir siendo la misma en cualquier sitio web que visite.

¿Qué opinas sobre alterar la forma en que funciona el desplazamiento en tu sitio web? ¡Comparta sus pensamientos con nosotros en la sección de comentarios a continuación!

Imagen en miniatura del artículo por mamanamsai / shutterstock.com.