Obtén el Informe de la encuesta de desplazamiento de 2021 y las palabras del equipo de Chrome sobre cómo esto afecta las prioridades y los planes para Chromium y la Web.
En abril, el equipo de Chrome lanzó una encuesta sobre el desplazamiento y la acción táctil basada en los principales problemas informados en el Informe de ADN de la Web de MDN de 2019. El Informe de la encuesta de desplazamiento de 2021 ya está listo, y el equipo de Chrome quiere compartir algunas ideas y acciones que surgieron de los resultados de la encuesta. Esperamos que estos resultados ayuden a los proveedores de navegadores y a los grupos de estándares a comprender cómo mejorar el desplazamiento web.
Consulta el Informe de la encuesta de desplazamiento de 2021.
Resultados destacados
La encuesta recopiló de forma anónima 880 envíos, y 366 personas respondieron todas las preguntas.
Si bien comenzar a usar el desplazamiento requiere una sola línea de CSS, como overflow-x:
scroll;, la superficie de las APIs y opciones de desplazamiento es grande y abarca desde JavaScript hasta CSS. Los siguientes resultados ayudan a destacar los problemas que encuentran los desarrolladores web.
Satisfacción general con el desplazamiento web
Pregunta 27
45%
están algo o extremadamente insatisfechos en general
con el desplazamiento web.
Esta pregunta se colocó cerca del final de la encuesta de forma intencional, después de las preguntas sobre 26 casos de uso y funciones de desplazamiento. Según la respuesta, queda claro que la comunidad web tiene problemas con el desplazamiento. Casi la mitad de los encuestados informa un nivel de insatisfacción general.
Creemos que el sentimiento general sobre el trabajo con el desplazamiento no debería ser tan bajo. Esta métrica debe cambiarse, ya que es un indicador claro de que hay trabajo por hacer.
Dificultad para trabajar con el desplazamiento
Pregunta 2
43%
informó que es algo o
extremadamente difícil
trabajar con el desplazamiento.
Según nuestra investigación, estas dificultades se deben a la gran cantidad de casos de uso para el desplazamiento. Cuando hablamos de desplazamiento, podemos incluir lo siguiente: - Posicionamiento de elementos dentro de áreas desplazables - Desplazamiento infinito - Animación vinculada al desplazamiento - Carruseles - Padding de ScrollView - Desplazamiento cíclico - Desplazamiento virtualizado
La falta de funciones del navegador, el JavaScript complejo y la necesidad de admitir modos de entrada, como pantallas táctiles, teclados y gamepads, dificultan todas estas tareas.
Importancia de las interacciones táctiles
Pregunta 3
51%
informan que las interacciones táctiles son muy o extremadamente importantes
para su trabajo.
Dado que los usuarios de la Web en dispositivos móviles siguen aumentando en las estadísticas de visitas, no fue sorprendente ver que la mitad de los encuestados informaron que el tacto es muy importante para su trabajo en la Web. Esto indicó que las funciones web, como el ajuste de desplazamiento CSS y touch-action, necesitan atención adicional para que la Web pueda ofrecer una interacción táctil de alta calidad.
Dificultad para navegar con la tecla Tab o el gamepad
Pregunta 5a
44%
Informar que es algo o extremadamente difícil realizar la navegación con el control de juegos y la navegación con tabulación.
El desplazamiento incluye métodos de navegación, como las flechas del teclado, las teclas Tab, las pulsaciones de la barra espaciadora y los gamepads, y puede ser difícil incluirlos cuando se realiza un trabajo de desplazamiento personalizado. Casi la mitad de los encuestados informa que es algo o extremadamente difícil incluir estas entradas.
Aprendizaje touch-action
Pregunta 9
50%
informar sobre el aprendizaje sobre `touch-action: manipulation`
de la encuesta
Algunas de las preguntas de la encuesta se referían al uso de ciertas APIs con una posible respuesta de Sí, No o "Hoy aprendí". Un comentario notable fue la cantidad de personas que informaron haber aprendido sobre touch-action en la encuesta, ya que es una propiedad fundamental cuando se compilan gestos táctiles personalizados que deben interactuar dentro del desplazamiento.
Desplazamiento cíclico
Pregunta 27
58%
Informar a veces, a menudo o en cada proyecto
con desplazamiento cíclico.
Después de 60 segundos, vuelve a comenzar en 0.
Estos números son altos para una función de desplazamiento con poco o ningún soporte proporcionado por la plataforma web. Por este motivo, la función suele generar una gran deuda técnica, con duplicación o JavaScript insertado para forzar el efecto. Es popular para los carruseles de productos y cuando se selecciona el tiempo en segundos o minutos para ofrecer un desplazamiento cíclico.
¿Son importantes las áreas desplazables?
Pregunta 2
55%
muy o
extremadamente importante
16%
informe nada
o algo importante
Los encuestados expresaron su opinión sobre la importancia de las áreas desplazables, lo que proporciona otro indicador sobre las dificultades que implica ofrecer un desplazamiento de alta calidad.
Carrusel
Pregunta 20
87%
Usaron carruseles.
24%
informan que son
fáciles de administrar.
Casi todos los encuestados utilizan carruseles en su trabajo web, mientras que solo el 25% los considera fáciles de administrar. Los carruseles listos para usar fueron populares durante nuestra investigación, pero esta estadística nos sorprendió, ya que no parece que el problema esté resuelto.
Desplazamiento infinito
Pregunta 22
65%
usarlo a veces
para todos los proyectos
60%
algo o
extremadamente difícil
Dos tercios de los encuestados implementan el desplazamiento infinito en su trabajo web, y una cantidad igual informa que es difícil hacerlo. Este es otro ejemplo de uso frecuente combinado con una gran dificultad, lo que nos indica que es un área que necesita atención.
Si bien content-visibility y contain-intrinsic-size se pueden combinar para reducir los costos de renderización en áreas largas desplazables, no parece que ayuden con la UX de desplazamiento infinito de "Cargar más".
Animaciones vinculadas o activadas por el desplazamiento
Pregunta 24
47%
usarlo a veces
en todos los proyectos
56%
informar que es algo o
extremadamente difícil
Casi la mitad de los encuestados usan animaciones coordinadas con el desplazamiento, y la mitad de los encuestados las consideran difíciles, lo que vuelve a vincular el uso frecuente con la dificultad.
Compiten con el desplazamiento integrado
Pregunta 26
32%
Siempre o
La mayoría de las veces
50%
a veces
Las interacciones táctiles y de desplazamiento integradas de las aplicaciones para teléfonos y tablets suelen considerarse un punto claro en el que la Web puede ponerse al día. Las funciones incluyen animaciones vinculadas al desplazamiento, interfaces programáticas, integración de voz, sugerencias de desplazamiento y APIs de pull-to-refresh.
Solo la mitad de los encuestados sintió que, a veces, era posible igualar la experiencia de desplazamiento integrada.
Satisfacción general con la creación de interacciones de desplazamiento en la Web
Pregunta 27
Conclusiones de la encuesta
Los resultados de la encuesta se segmentan en cuatro categorías: compatibilidad, educación, APIs y funciones.
Compatibilidad
El equipo de Chrome declaró un objetivo para disminuir la cantidad de problemas de compatibilidad web, incluida la compatibilidad con el desplazamiento.
Los primeros tres problemas de compatibilidad en los que debes enfocarte son los siguientes:
1. Compatibilidad con el desplazamiento horizontal
1. overscroll-behavior en todos los navegadores
1. Se quitaron los prefijos de -webkit-scrollbar y se siguió el estándar.
Educación
Los resultados de la encuesta mostraron que se necesita más educación sobre las propiedades touch-action y lógicas. El navegador está a la vanguardia del diseño internacional, y es evidente que se subutiliza o se malinterpreta.
Áreas en las que debes enfocarte:
1. touch-action
1. Propiedades lógicas
API
El uso del ajuste de desplazamiento está creciendo, y los desarrolladores respondieron que quieren usar las funciones de forma interoperable con bibliotecas y complementos populares. Reducir esta brecha entre las bibliotecas de CSS y de complementos ayudará a mejorar la satisfacción de los desarrolladores y la experiencia del usuario con el ajuste de desplazamiento.
Enfocaremos el trabajo de la API en scroll-snap:
1. Disponibilidad y compatibilidad de la API en todos los navegadores
1. Comienza a trabajar en nuevas APIs de CSS, como scroll-start.
1. Comienza a trabajar en nuevos eventos de JS, como snapChanged().
Funciones
Los resultados de la encuesta mostraron que los usuarios tienen dificultades con algunos tipos específicos de componentes relacionados con el desplazamiento en la Web, ya que la plataforma no proporciona los elementos básicos que necesitan para crearlos sin complementos o un alto nivel de esfuerzo. Esta es un área que esperamos explorar con mayor profundidad.
Entre las funciones que los desarrolladores tienen dificultades para crear, se incluyen las siguientes: 1. Carruseles 1. Desplazamiento virtual 1. Desplazamiento infinito
Recursos
- Informe de la encuesta de desplazamiento
- Anuncio de la encuesta
- Informes de ADN de Mozilla
- Compat2021: Eliminamos cinco de los principales problemas de compatibilidad en la Web
Imagen en miniatura: Foto de Taylor Wilcox en Unsplash.