Estoy creando un nuevo sitio personal y estoy considerando usar el módulo de ajuste de desplazamiento de CSS como mi navegación principal. Esencialmente, esto permite que la página web se "ajuste" a ciertas ubicaciones en función de las posiciones de los elementos cuando el usuario se desplaza por una página. Parece que podría ser útil para los usuarios, pero también podría dificultar su experiencia si se hace mal.
Como tal, ¿hay alguna guía de diseño que deba tener en cuenta al usar puntos de ajuste? ¿Qué tiene que lo haga más efectivo que una página web de desplazamiento regular?
PD: ya conozco el lado de la programación, no estoy preguntando sobre eso.
El equilibrio principal con el que debe tener especial cuidado al usar una técnica como los puntos de desplazamiento es el equilibrio de control . No desea quitar o restringir innecesariamente el control de un usuario si puede evitarlo porque está acostumbrado a navegar de una manera particular.
(Las diapositivas vinculadas a lo largo de esta publicación son de mi charla sobre animaciones significativas )
Cuando escuché por primera vez sobre la idea de la especificación de ajuste de desplazamiento de CSS cuando la lista de correo electrónico de estilo www comenzó a hablar de ella a fines del año pasado, pensé que agregarlo al estándar CSS solo conduciría a más experiencias rotas , ya que he visto muchos pobres usos del secuestro de desplazamiento de JavaScript, y la técnica en sí misma a menudo se opone a mis reglas de cosas para evitar durante la animación . Sin embargo, después de pensarlo un poco, me di cuenta de que el problema tiende a ser una implementación deficiente, no la técnica en sí.
Muchos de los métodos actuales que utilizan los desarrolladores para limitar y estructurar los movimientos de nuestros usuarios en una página suelen ser innecesarios, torpes, antipáticos y frustrantes. Los puntos de ajuste de desplazamiento de CSS buscan solucionar esto en parte al proporcionar una buena implementación nativa para ayudar a los recorridos de desplazamiento de nuestros usuarios.
Recientemente, varios proveedores principales implementaron soporte para CSS Snap Points y, como un estándar implementado en el navegador, brinda una alternativa más accesible y mínimamente intrusiva para ayudar a los usuarios a navegar de manera efectiva por ciertos tipos de páginas. Ya se han escrito artículos informativos sobre cómo implementar el desplazamiento de ajuste de CSS , pero dado que puede ser inmensamente útil o abusar de manera espectacular, es al menos igual de importante saber cuándo y dónde usar el desplazamiento de ajuste de manera adecuada.
Ajustar a ubicaciones en una página es, por naturaleza, un comportamiento restrictivo . Restrinja las capacidades de los usuarios solo cuando sea claramente beneficioso para ellos.
Esto es especialmente cierto para las vistas que no son móviles. En pantallas grandes hay muy pocos casos de uso para este tipo de comportamiento. Nunca por defecto para diseñar con él. Recuerda: debes ofrecer un valor significativo al usuario a cambio de tomar su control.
Las mejores presentaciones de diapositivas usan muy poco texto para transmitir sus puntos; el contenido visual excepcional es el enfoque y el principio. Cuando use puntos de ajuste, limite el texto a algo breve pero poderoso.
Algunos ejemplos particularmente buenos de esto son la página de "visión" de Wrk, la página llena de animación "acerca de nosotros" de Code & Theory y la navegación del estudio de caso de Vito Salvatore .
Es de esperar que haya notado que ninguno de los sitios vinculados en la sección anterior utiliza exclusivamente un comportamiento de ajuste de desplazamiento: cambian según el tipo de contenido que muestran. Ambos pasan al comportamiento de desplazamiento predeterminado normal cuando muestran más contenido, como artículos, o brindan una descripción más detallada del trabajo que crean.
La web es más dinámica y capaz que un solo comportamiento de navegación. Snapping tiene sus casos de uso, pero no es bueno para todo tipo de contenido.
Aquí hay algunos casos de uso particularmente buenos que cumplen con las pautas anteriores:
¡El desarrollo del estándar CSS Snap Points es emocionante! Con buenas implementaciones de los proveedores, podemos esperar ver más sitios que utilicen la técnica para ayudar a mejorar su experiencia de usuario al ayudar a que la navegación precisa sea un poco más fácil. Es cierto que es solo una pequeña mejora de nuestro arsenal, pero que merece su lugar en las circunstancias adecuadas. Como diseñadores, debemos tener cuidado de no caer en la suposición de que todos los demás experimentan la web exactamente como nosotros.