Raport z 2021 r. z ankiety na temat przewijania

Zapoznaj się z raportem z badania dotyczącego przewijania z 2021 r. oraz z informacjami od zespołu Chrome o tym, jak wpływa to na priorytety i plany dotyczące Chromium i internetu.

Adam Argyle

Sam Dutton

W kwietniu zespół Chrome opublikował ankietę dotyczącą przewijania i działań dotykowych, która powstała na podstawie najczęściej zgłaszanych problemów z raportu MDN Web DNA z 2019 r.. Raport z ankiety dotyczącej przewijania w 2021 roku jest gotowy, a zespół Chrome chce podzielić się kilkoma przemyśleniami i działaniami, które wynikają z wyników ankiety. Mamy nadzieję, że te wyniki pomogą dostawcom przeglądarek i organizacjom normalizacyjnym w ulepszaniu przewijania stron internetowych.

Wyświetl raport z badania dotyczącego przewijania w 2021 r.

Wyniki godne uwagi

W ramach ankiety anonimowo zebrano 880 odpowiedzi, z czego 366 osób odpowiedziało na wszystkie pytania.

Rozpoczęcie pracy ze skrolowaniem wymaga tylko 1 wiersza kodu CSS, np. overflow-x: scroll;, ale obszar interfejsów API i opcji skrolowania jest duży i obejmuje JavaScript oraz CSS. Poniższe wyniki pomagają wyróżnić problemy, z którymi spotykają się programiści.

Ogólne zadowolenie z przewijania stron internetowych

Pytanie 27

To pytanie zostało umieszczone pod koniec ankiety celowo, po pytaniach dotyczących 26 przypadków użycia i funkcji przewijania. Z odpowiedzi wynika, że społeczność internetowa ma problem z przewijaniem. Prawie połowa respondentów zgłasza ogólne niezadowolenie.

Uważamy, że ogólne nastawienie do pracy z przewijaniem nie powinno być tak negatywne. Ten wskaźnik wymaga zmiany, ponieważ wyraźnie wskazuje, że trzeba coś poprawić.

Trudności z przewijaniem

Pytanie 2

Z naszych badań wynika, że trudności te wynikają z wielu przypadków użycia przewijania. Przewijanie może obejmować:- pozycjonowanie elementów w obszarach z możliwością przewijania, - nieskończone przewijanie, - animację powiązaną z przewijaniem, - karuzele, - wypełnienie widoku przewijania, - cykliczne przewijanie, - wirtualne przewijanie.

Brakujące funkcje przeglądarki, złożony JavaScript i konieczność obsługi trybów wprowadzania danych, w tym dotyku, klawiatury i gamepadów, utrudniają to wszystko.

Znaczenie interakcji dotykowych

Pytanie 3

Liczba użytkowników internetu mobilnego wciąż rośnie, więc nie dziwi fakt, że połowa respondentów uznała dotyk za bardzo ważny w pracy w internecie. Sygnalizowało to, że funkcje internetowe, takie jak przyciąganie przewijania CSS i touch-action, wymagają dodatkowej uwagi, aby internet mógł zapewniać wysokiej jakości interakcje dotykowe.

Trudności z nawigacją za pomocą klawisza Tab lub gamepada

Pytanie 5a

Przewijanie obejmuje metody nawigacji, takie jak klawisze strzałek, klawisze Tab, spacje i gamepady, i może być trudne do uwzględnienia podczas niestandardowego przewijania. Prawie połowa respondentów uważa, że uwzględnienie tych danych jest w pewnym stopniu lub bardzo trudne.

Nauka touch-action

Pytanie 9

Niektóre pytania w ankiecie dotyczyły korzystania z określonych interfejsów API. Możliwe odpowiedzi to „Tak”, „Nie” lub „Dziś się tego nauczyłem(-am)”. Jedną z najważniejszych opinii była liczba osób, które w ankiecie przyznały, że dowiedziały się o właściwości touch-action. Jest ona kluczowa przy tworzeniu niestandardowych gestów dotykowych, które muszą działać w ramach przewijania.

Cykliczne przewijanie

Pytanie 27

To wysokie wartości jak na funkcję przewijania, która jest w niewielkim stopniu lub wcale nie obsługiwana przez platformę internetową. Z tego powodu funkcja często generuje duże zadłużenie techniczne, ponieważ dochodzi do duplikacji lub wstrzykiwania kodu JavaScript w celu wymuszenia efektu. Jest często używany w karuzelach produktów i przy wyborze czasu w sekundach lub minutach, aby zapewnić cykliczne przewijanie.

Czy obszary przewijania są ważne?

Pytanie 2

Respondenci podkreślali znaczenie obszarów przewijanych, co jest kolejnym sygnałem, że zapewnienie wysokiej jakości przewijania jest trudne.

Karuzele

Pytanie 20

Niemal wszyscy respondenci używają w swoich projektach internetowych karuzel, ale tylko 25% z nich uważa, że łatwo nimi zarządzać. Gotowe karuzele były popularne podczas naszych badań, ale ta statystyka nas zaskoczyła, ponieważ nie brzmi to jak rozwiązanie problemu.

Nieskończone przewijanie

Pytanie 22

Dwie trzecie respondentów stosuje w swoich projektach internetowych nieskończone przewijanie, a tyle samo osób uważa, że jest to trudne. To kolejny przykład częstego użycia połączonego z dużymi trudnościami, co wskazuje na obszar wymagający uwagi.

Chociaż content-visibility i contain-intrinsic-size można łączyć, aby zmniejszyć koszty renderowania w przypadku długich obszarów z możliwością przewijania, nie wydaje się to pomagać w przypadku nieskończonego przewijania „załaduj więcej”.

Animacje powiązane ze scrollowaniem lub wywoływane przez scrollowanie

Pytanie 24

Prawie połowa respondentów korzysta z animacji wywoływanych przewijaniem, a połowa z nich uważa to za trudne. Po raz kolejny widać tu związek między częstym używaniem a trudnością.

Rywalizacja z wbudowanym przewijaniem

Pytanie 26

Wbudowane interakcje przewijania i dotyku w aplikacjach na telefony i tablety są często uważane za obszar, w którym internet może nadrobić zaległości. Obejmują one animacje powiązane z przewijaniem, interfejsy programowe, integrację z głosowym interfejsem użytkownika, wskazówki dotyczące przewijania i interfejsy API „przeciągnij, aby odświeżyć”.

Tylko połowa respondentów uważała, że czasami można dopasować działanie do wbudowanego przewijania.

Ogólne zadowolenie z tworzenia interakcji przewijania w internecie

Pytanie 27

Podsumowanie ankiety

Wyniki ankiety są podzielone na 4 kategorie: zgodność, edukacja, interfejsy API i funkcje.

Zgodność

Zespół Chrome wyznaczył sobie cel, jakim jest zmniejszenie liczby problemów ze zgodnością stron internetowych, w tym ze zgodnością przewijania.

Pierwsze 3 problemy ze zgodnością, na których należy się skupić: 1. Zgodność z przewijaniem poziomym. 1. overscroll-behavior działa w różnych przeglądarkach. 1. Usuwanie prefiksów z -webkit-scrollbar i przestrzeganie standardu.

Edukacja

Wyniki ankiety wykazały, że potrzebna jest większa wiedza na temat touch-action i właściwości logicznych. Przeglądarka jest na pierwszym planie w przypadku układu międzynarodowego, ale widać, że jest niedostatecznie wykorzystywana lub źle rozumiana.

Obszary, na których należy się skupić: 1. touch-action 1. Właściwości logiczne

Interfejsy API

Funkcja przewijania z przyciąganiem jest coraz częściej używana, a deweloperzy zgłaszają, że chcą korzystać z niej w sposób interoperacyjny z popularnymi bibliotekami i wtyczkami. Zmniejszenie tej różnicy między bibliotekami CSS i wtyczek przyczyni się do zwiększenia zadowolenia deweloperów i użytkowników z funkcji przyciągania przewijania.

Prace nad interfejsem API skupimy na tych kwestiach:scroll-snap1. Dostępność i zgodność interfejsu API w różnych przeglądarkach. 1. Rozpoczęcie prac nad nowymi interfejsami API usług porównywania cen, takimi jak scroll-start. 1. Rozpocznij pracę nad nowymi zdarzeniami JS, takimi jak snapChanged().

Funkcje

Wyniki ankiety wykazały, że użytkownicy mają problemy z niektórymi typami komponentów związanych z przewijaniem w internecie, ponieważ platforma nie udostępnia podstawowych elementów potrzebnych do ich tworzenia bez wtyczek lub dużego nakładu pracy. Chcemy dokładniej zbadać ten obszar.

Funkcje, które sprawiają deweloperom najwięcej trudności, to: Karuzele 1. Przewijanie wirtualne 1. Nieskończone przewijanie

Zasoby

• Raport przewijania ankiety
• Ogłoszenie dotyczące ankiety
• Raporty Mozilla DNA
• Compat2021: Eliminating five top compatibility pain points on the web

Miniatura: zdjęcie Taylora Wilcoxa z Unsplash.