Mejoras de personalidad de desplazamiento en Microsoft Edge

El desplazamiento es una de las interacciones de usuario más comunes en un navegador, y es fundamental para la forma en que experimentamos la web.

Ya sea que use un panel táctil, una pantalla táctil, una rueda del mouse, un teclado o barras de desplazamiento, desea que su experiencia de desplazamiento sea rápida y receptiva.

En esta publicación, cubriremos cómo hemos mejorado la personalidad de desplazamiento en Microsoft Edge: animación de desplazamiento y cómo reacciona a sus interacciones, apariencia y sensación de desplazamiento.

Además, resumiremos los temas que hemos observado en sus comentarios y describiremos algunos de los próximos pasos en nuestro viaje. En una publicación futura describiremos algunas de las mejoras funcionales y de rendimiento en las que hemos estado trabajando.

En versiones anteriores de Microsoft Edge, permitimos un desplazamiento suave a través de una estrecha integración con el Compositor del sistema operativo (DirectComposition) y API de entrada (Manipulación directa) Esto permitió a nuestros navegadores introducir el desplazamiento suave líder en su clase en el momento y sin esfuerzo coincidir con la personalidad de Windows: movimiento, interacción, apariencia y sensación.

Sin embargo, la estrecha integración del sistema operativo significaba que no podíamos llevar la experiencia a otros sistemas operativos, incluidas las versiones anteriores de Windows. Peor aún, mientras que el procesamiento de entrada y salida independientemente del hilo principal de los navegadores mejoró la capacidad de respuesta y permitió una velocidad de fotogramas estable, no funcionó muy bien para el script que realizó actualizaciones basadas en actualizaciones de fotogramas, lo que provocó jitter, uno de los más comunes piezas de comentarios que recibimos en ese momento.

A medida que pasó el tiempo y se agregaron características a la canalización de representación, algunas características fueron increíblemente difíciles de soportar en este modelo debido a la dependencia del compositor del sistema operativo: contenido de posición fija con antepasados ​​de recorte, contenido con índice z negativo, algún índice z : escenarios automáticos y filtros CSS. En esos casos, nuestros usuarios pueden experimentar contenido perdido o recortado incorrectamente, lo que lleva a experiencias no interoperables entre navegadores: sitios rotos.

Con el nuevo Microsoft Edge, estamos trabajando para aprender de nuestras experiencias pasadas para mejorar el desplazamiento tanto para Microsoft Edge como para todos los navegadores basados ​​en Chromium. Una cosa está clara desde el principio: simplemente replicar las mismas dependencias del sistema operativo Windows (con todos sus pros y contras) no es factible, dada la alta barra de compatibilidad y requisitos multiplataforma para Microsoft Edge y otros navegadores basados ​​en Chromium.

En cambio, junto con la comunidad de Chromium, estamos trabajando para ofrecer una experiencia de usuario significativa y mejoras de rendimiento que serán más sostenibles con el tiempo.

Antes de sumergirnos en las novedades, veamos lo que nos ha contado sobre el desplazamiento hasta ahora.

Desde el lanzamiento de las primeras versiones de Canary del nuevo Microsoft Edge, hemos recibido más de 1000 elementos de comentarios que van desde estímulos positivos hasta comentarios constructivos sobre varios aspectos del desplazamiento.

El análisis de todos los problemas nos permitió notar temas comunes en los comentarios:

• El 41% de los comentarios se relaciona con lo que llamamos "personalidad" del desplazamiento: la forma en que se desplaza siente, y cómo coincide con las convenciones y el carácter del sistema operativo subyacente, etc. Este depósito puede superponerse con el rendimiento, lo que también afecta la "sensación" de desplazamiento.
• El 39% de los comentarios se relaciona con problemas funcionales: sitios específicos donde el desplazamiento no funciona como se esperaba, o problemas generales con el desplazamiento basado en la rueda, el tacto, el panel táctil, el teclado o la barra de desplazamiento
• El 13% de los comentarios se refiere a problemas de rendimiento específicos: fotogramas perdidos durante el desplazamiento, tartamudeo de desplazamiento, problemas de capacidad de respuesta, etc.
• El 5% de los comentarios se relaciona con el desplazamiento de PDF: esto podría desglosarse aún más en problemas de personalidad, funcionalidad y rendimiento en los documentos PDF.
• El 2% de los comentarios no se incluyó en ninguno de los grupos anteriores.

Después de considerar sus comentarios, opciones técnicas y tener en cuenta nuestros principios de código abierto de Chromium, decidimos centrar nuestras contribuciones iniciales más fuertemente en personalidad y actuación.

En el resto de esta publicación, nos gustaría analizar las mejoras de personalidad que hemos realizado en Microsoft Edge para que coincida mejor con lo que espera de otras aplicaciones de Windows, incluidas las versiones anteriores de Microsoft Edge.

Hemos trabajado duro en la base del código de Chromium para llevar los mejores aspectos del desplazamiento de Microsoft Edge a Chromium mientras buscamos oportunidades para mejorarlo. Estos cambios ahora están habilitados de forma predeterminada en todos los canales del nuevo Microsoft Edge: ¡pruébelos y díganos qué piensa!

Impulso mejorado y curvas de animación de toque táctil

Una de las mejoras que estamos trayendo a Chromium es una nueva curva de animación para el desplazamiento. Esta curva le da a cada rueda del mouse, teclado o barra de desplazamiento, así como al toque, la personalidad "suave" vista en la versión anterior de Microsoft Edge.

En general, la animación es más táctil con un poco más de tiempo con cambios de velocidad menos bruscos. Lo alentamos a que lo pruebe hoy en el nuevo Microsoft Edge en un dispositivo con Windows 10 desplazándose con la rueda del mouse, el teclado o la barra de desplazamiento o usando el tacto para hacer un lanzamiento.

Problema conocido: estamos refinando la curva de animación de lanzamiento en algunos paneles táctiles no PTP heredados. ¡Estén atentos para recibir anuncios de mejoras internas en esa área!

Puede ver algunos de los cambios anteriores en Chromium en los enlaces a continuación:

Desplazamiento basado en porcentaje

Los navegadores Chromium utilizan un valor delta de desplazamiento fijo (100 px por marca de rueda del mouse, 40 px por clic del botón de la barra de desplazamiento o pulsación de la flecha del teclado). Estamos cambiando este comportamiento para que coincida con las versiones anteriores de Microsoft Edge, que utilizan la altura del desplazamiento para calcular los deltas de desplazamiento. El desplazamiento basado en porcentajes es una gran adición funcional que hace que sea mucho más fácil navegar por los desplazadores más pequeños.

Puede ver algunos de los cambios anteriores en Chromium en los enlaces a continuación:

Overscroll efectos de rebote en el desplazador de raíz

El rebote de desplazamiento excesivo es una señal para el usuario de que ha llegado al final de una página mientras se desplaza; es posible que haya escuchado efectos similares, a veces denominados "bandas de goma". En estudios de usuarios, el 71% de los participantes expresó una preferencia por el efecto rebote de desplazamiento excesivo.

Hemos habilitado esto tanto para la entrada táctil como para la entrada del panel táctil PTP en Microsoft Edge cuando se desplaza en cualquier dirección. Después del soporte inicial para el desplazador raíz de la página, estamos investigando formas de habilitar este efecto para los subdesplazadores dentro de la página en una actualización futura. ¡Estén atentos!

Cambios a la personalidad anterior de Microsoft Edge en función de los comentarios

Encadenamiento de desplazamiento versus bloqueo de desplazamiento

Si bien hemos traído gran parte de la personalidad más querida al nuevo Microsoft Edge, también estamos aprovechando esta oportunidad para reevaluar algunos comportamientos existentes que nuestros usuarios apreciaban menos.

Considerar cadena de desplazamiento, el efecto que desplaza el desplazamiento principal una vez que el subdesplazador ha alcanzado sus límites. En el pasado, escuchamos una gran cantidad de comentarios en los que muchos usuarios consideraban que esto era un error en varios sitios populares.

El cromo ya tiene un concepto de desplazamiento de bloqueo, cuando toda la manipulación de desplazamiento se dirige al mismo desplazador hasta que transcurre una cierta cantidad de tiempo sin cambios de desplazamiento.

La principal diferencia entre encadenamiento y enclavamiento es que el primero puede ocurrir a mitad del gesto si se alcanzan los límites del subdesplazador, mientras que el segundo solo funciona cuando se inicia el gesto de desplazamiento.

Validamos este cambio con estudios de usuarios y notamos que prácticamente todo el mundo (97% de comentarios favorables) prefería este comportamiento si el rebote de desplazamiento excesivo también estaba disponible, validando aún más nuestros planes para invertir en ese efecto para los sub-scrollers.

Como resultado, no estamos planeando llevar el encadenamiento de desplazamiento a Chromium.

Impulso de lanzamiento

Otra cosa que estamos integrando con nuestra curva de animación que ya estaba en Chromium es el impulso de lanzamiento. Esta es la experiencia en la que múltiples lanzamientos secuenciales continuarán aumentando la velocidad. El impulso de la descarga es excelente cuando intenta avanzar rápidamente por el documento y no le importa el contenido preciso, solo llega a su destino lo más rápido posible.

Estamos trabajando activamente para habilitar el impulso de lanzamiento con la nueva personalidad de desplazamiento y esperamos sus comentarios en el futuro cercano cuando lancemos esta función.

Quick Flick

Finalmente, hemos decidido eliminar la función de desplazamiento rápido. Esta característica produjo grandes deltas de desplazamiento cuando un usuario hizo un gesto de movimiento rápido pero breve en la pantalla.

En nuestros estudios de usuarios, no pudimos encontrar usuarios que pudieran reproducirlo de manera consistente. Además de eso, la mayoría de los comentarios recibidos para esta función se debieron a realizar accidentalmente un movimiento rápido y al usuario no esperaba que la página se desplazara hasta el momento.

Nuestro registro de personalidades de desplazamiento basado en sus comentarios

Estamos buscando hacer que el nuevo Microsoft Edge no sea solo una copia al carbón de EdgeHTML, sino una mejora que combine lo mejor de Chromium con lo mejor de EdgeHTML. Con ese fin, estamos evaluando otras mejoras de personalidad y estamos investigando cómo habilitarlas en las próximas actualizaciones, que incluyen:

1. Efecto de desplazamiento en subdesplazadores
2. Pinch zoom efecto de desplazamiento
3. Más ajustes para los efectos de personalidad e interacciones individuales basados ​​en sus comentarios.

Tenga en cuenta que, a medida que descubramos realidades de ingeniería, ¡nuestros planes pueden cambiar!

¡Esperamos que haya disfrutado leyendo este resumen tanto como nosotros disfrutamos trabajando para mejorar el desplazamiento basado en sus comentarios!

Estén atentos para una publicación de seguimiento en esta serie, donde discutiremos las mejoras de rendimiento y las correcciones funcionales, como el desplazamiento de la barra de desplazamiento con hilos de compositor.

Estamos buscando sus comentarios, ¡pruebe los cambios descritos en esta publicación en Microsoft Edge y díganos qué piensa!