Laporan Survei Gulir 2021

Dapatkan Laporan Survei Gulir 2021 plus penjelasan dari tim Chrome tentang bagaimana hal ini memengaruhi prioritas dan rencana untuk Chromium dan web.

2 Agustus 2021

Pada bulan April, tim Chrome merilis survei gulir dan aksi sentuh berdasarkan masalah teratas yang dilaporkan dari Laporan DNA Web MDN 2019. NS Laporan Survei Gulir 2021 sudah siap, dan tim Chrome ingin berbagi beberapa pemikiran dan item tindakan yang kami peroleh dari hasil survei. Kami berharap hasil ini akan membantu vendor browser dan grup standar memahami cara meningkatkan pengguliran web.

Lihat Laporan Survei Gulir 2021.

Hasil yang patut diperhatikan #

Survei secara anonim mengumpulkan 880 kiriman, dengan 366 menjawab setiap pertanyaan.

Saat memulai menggulir adalah satu baris CSS, seperti overflow-x: gulir;, area permukaan scroll API dan opsi besar, mencakup JavaScript hingga CSS. Hasil berikut membantu menyoroti masalah yang dihadapi pengembang web.

Kepuasan keseluruhan dengan pengguliran web #

Soal 27

Pertanyaan ini ditempatkan di dekat akhir survei dengan sengaja, setelah pertanyaan pada 26 kasus penggunaan gulir dan fitur. Dari tanggapannya, jelas bahwa komunitas web berjuang dengan scroll. Hampir setengah dari responden melaporkan tingkat ketidakpuasan secara keseluruhan.

Kami percaya sentimen keseluruhan tentang bekerja dengan scroll tidak boleh serendah ini. Metrik ini perlu diubah; itu adalah sinyal yang jelas bahwa ada pekerjaan yang harus diselesaikan.

Kesulitan bekerja dengan gulir #

Pertanyaan 2

Dari penelitian kami, kesulitan ini berasal dari banyaknya kasus penggunaan untuk scroll. Ketika kita berbicara tentang menggulir, itu mungkin termasuk:

Fitur browser yang hilang, JavaScript yang kompleks, dan kebutuhan untuk mendukung mode input termasuk sentuhan, keyboard, dan gamepad, membuat semua hal ini menjadi lebih sulit.

Pentingnya interaksi sentuhan #

Pertanyaan 3

Dengan pengguna web seluler masih meningkat dalam statistik kunjungan, tidak mengherankan melihat setengah dari responden melaporkan bahwa sentuhan sangat penting untuk pekerjaan mereka di web. Ini menandakan bahwa fitur web seperti CSS scroll snap dan sentuhan-aksi membutuhkan perhatian ekstra agar web dapat memberikan interaksi sentuhan berkualitas tinggi.

Kesulitan tombol tab atau navigasi gamepad #

Pertanyaan 5a

Pengguliran mencakup metode navigasi seperti panah keyboard, tombol tab, penekanan bilah spasi, dan gamepad, dan mungkin sulit untuk menyertakannya saat melakukan pekerjaan gulir kustom. Hampir setengah dari responden melaporkan agak atau sangat sulit untuk memasukkan masukan ini.

Sedang belajar sentuhan-aksi #

Pertanyaan 9

Beberapa pertanyaan survei menanyakan tentang penggunaan API tertentu dengan kemungkinan jawaban Ya, Tidak, atau “hari ini saya belajar”. Salah satu umpan balik yang penting adalah jumlah orang yang melaporkan belajar tentang sentuhan-aksi dari survei, karena ini adalah properti penting saat membuat gerakan sentuh khusus yang perlu berinteraksi dalam gulir.

Pengguliran siklis #

Soal 27

Angka-angka itu tinggi untuk fitur pengguliran dengan sedikit atau tanpa dukungan yang disediakan oleh platform web. Fitur ini sering menimbulkan utang teknis dalam jumlah besar karena hal ini, dengan duplikasi atau JavaScript yang disuntikkan untuk memaksakan efeknya. Ini populer untuk carousel produk dan ketika memilih waktu dalam hitungan detik atau menit untuk menawarkan pengguliran siklus.

Apakah area yang dapat digulir itu penting? #

Pertanyaan 2

Responden sangat merasakan pentingnya area yang dapat digulir, memberikan sinyal lain tentang perjuangan yang diperlukan untuk memberikan pengguliran berkualitas tinggi.

Korsel #

Soal 20

Hampir setiap responden memberikan carousel dalam pekerjaan web mereka, sementara hanya 25% yang merasa mudah untuk mengelolanya. Korsel off-the-shelf populer selama penelitian kami, tetapi statistik ini mengejutkan kami, karena kedengarannya tidak terlalu terpecahkan.

Gulir tak terbatas #

Soal 22

Dua pertiga responden memberikan scroll tak terbatas dalam pekerjaan web mereka, dan jumlah yang sama melaporkan sulit untuk dilakukan. Contoh lain dari penggunaan tinggi yang dipasangkan dengan kesulitan tinggi, yang menunjukkan kepada kita area yang membutuhkan perhatian.

Ketika visibilitas konten dan mengandung-intrinsik-ukuran dapat digabungkan untuk mengurangi biaya render untuk area yang dapat digulir panjang, tampaknya tidak membantu dengan "memuat lebih banyak" UX gulir tak terbatas.

Animasi tertaut-gulir atau yang dipicu gulir #

Pertanyaan 24

Hampir separuh dari semua responden menggunakan animasi yang diatur dengan gulir dan separuh responden merasa kesulitan, sekali lagi menghubungkan penggunaan yang tinggi dengan kesulitan.

Bersaing dengan pengguliran bawaan #

Soal 26

Interaksi gulir dan sentuh bawaan dari aplikasi ponsel dan tablet sering disebut-sebut sebagai tempat yang jelas di mana web dapat mengejar ketinggalan. Fitur-fiturnya termasuk animasi scroll-linked, antarmuka terprogram, integrasi suara, petunjuk scroll, dan API pull-to-refresh.

Hanya setengah dari responden yang merasa bahwa terkadang hanya mungkin untuk mencocokkan pengalaman pengguliran bawaan.

Kepuasan keseluruhan membangun interaksi gulir di web #

Soal 27

Survei Takeaways #

Hasil survei dibagi menjadi empat kategori: kesesuaian, pendidikan, Lebah, dan fitur.

Kesesuaian #

Tim Chrome memiliki menyatakan gol untuk mengurangi jumlah masalah kompatibilitas web, termasuk kompatibilitas gulir.

Tiga masalah kompatibilitas pertama yang menjadi fokus:

1. Kompatibilitas pengguliran horizontal.
2. overscroll-perilaku Lintas browser.
3. Menghapus awalan dari -webkit-scrollbar dan mengikuti standar.

Pendidikan #

Hasil survei menunjukkan bahwa perlu ada lebih banyak pendidikan di sekitar sentuhan-aksi dan sifat logis. Peramban berada di garis depan tata letak internasional, dan jelas bahwa itu kurang dimanfaatkan atau disalahpahami.

Area yang menjadi fokus:

1. sentuhan-aksi
2. Sifat logika

Lebah #

Penggunaan gertakan gulir sedang berkembang, dan pengembang telah menjawab bahwa mereka ingin menggunakan fitur secara interoperatif dengan perpustakaan dan plugin populer. Memperkecil kesenjangan antara CSS dan pustaka plugin ini akan membantu kepuasan pengembang snap gulir dan pengalaman pengguna.

Kami akan memfokuskan pekerjaan API pada gulir-jepret:

1. Ketersediaan dan kompatibilitas API di seluruh browser.
2. Mulailah bekerja API CSS baru Suka gulir-mulai.
3. Mulailah bekerja acara JS baru Suka snapBerubah().

Fitur #

Hasil survei menunjukkan bahwa pengguna berjuang dengan beberapa jenis komponen terkait gulir tertentu di web, karena platform tidak menyediakan primitif yang mereka butuhkan untuk membangunnya tanpa plugin atau upaya tingkat tinggi. Ini adalah area yang kami harap dapat dieksplorasi lebih dalam.

Fitur yang sulit dikembangkan oleh pengembang meliputi:

1. Korsel
2. Gulir virtual
3. Gulir tak terbatas

Sumber daya #

Gambar kecil: foto oleh Taylor Wilcox pada Hapus percikan.