Dapatkan Laporan Survei Scroll 2021 serta penjelasan dari tim Chrome tentang pengaruh hal ini terhadap prioritas serta rencana untuk Chromium dan web.
Pada bulan April, tim Chrome merilis survei scroll dan tindakan sentuh berdasarkan masalah yang paling sering dilaporkan dalam Laporan DNA Web MDN 2019. Laporan Survei Scroll 2021 sudah siap, dan tim Chrome ingin menyampaikan beberapa pendapat serta item tindakan yang kami kumpulkan dari hasil survei. Kami harap hasil ini akan membantu vendor browser dan grup standar memahami cara meningkatkan scroll web.
Lihat Laporan Survei Scroll 2021.
Hasil penting
Survei ini mengumpulkan 880 kiriman secara anonim, dengan 366 menjawab setiap pertanyaan.
Meskipun memulai scroll adalah satu baris CSS, seperti overflow-x:
scroll;, area platform scroll API dan opsinya besar, yang mencakup JavaScript hingga
CSS. Hasil berikut membantu menyoroti masalah yang dihadapi
developer web.
Kepuasan secara keseluruhan dengan scroll web
Pertanyaan 27
45%
agak atau amat sangat tidak puas secara keseluruhan
dengan scroll web.
Pertanyaan ini sengaja ditempatkan di dekat akhir survei, setelah pertanyaan tentang 26 kasus penggunaan dan fitur scroll. Dari respons tersebut, jelas bahwa komunitas web mengalami kesulitan dengan {i>scroll<i}. Hampir setengah dari responden melaporkan tingkat ketidakpuasan secara keseluruhan.
Kami percaya bahwa sentimen keseluruhan terkait penggunaan scroll tidak boleh serendah ini. Metrik ini perlu diubah; ini merupakan sinyal yang jelas bahwa ada pekerjaan yang harus dilakukan.
Kesulitan saat menggunakan scroll
Pertanyaan 2
43%
melaporkan bahwa ini agak atau
sangat sulit
untuk bekerja dengan scroll.
Dari riset kami, kesulitan ini berasal dari banyak kasus penggunaan untuk scroll. Ketika kita berbicara tentang scroll, hal itu mungkin mencakup: - Memosisikan elemen dalam area yang dapat di-scroll - Scroll tanpa batas - Animasi tertaut scroll - Korsel - Padding scrollview - Scrolling siklus - Scroll virtual
Tidak adanya fitur browser, JavaScript yang kompleks, dan kebutuhan untuk mendukung mode input seperti sentuhan, keyboard, dan gamepad, membuat semua ini lebih sulit.
Pentingnya interaksi sentuh
Pertanyaan 3
51%
melaporkan interaksi sentuh sebagai
sangat atau sangat penting
untuk pekerjaan mereka.
Dengan pengguna web seluler masih meningkat dalam statistik
kunjungan,
tidak mengejutkan melihat setengah dari responden melaporkan bahwa sentuhan sangat
penting untuk pekerjaan mereka di web. Hal ini menandakan bahwa fitur web seperti CSS
scroll snap dan touch-action memerlukan perhatian tambahan sehingga web dapat memberikan
interaksi sentuh berkualitas tinggi.
Kesulitan navigasi tombol tab atau gamepad
Pertanyaan 5a
44%
melaporkan
yang agak atau sangat sulit
untuk digunakan gamepad dan navigasi tab.
Scrolling menyertakan metode navigasi seperti panah keyboard, tombol tab, penekanan spasi, dan gamepad, dan mungkin sulit untuk menyertakannya saat melakukan pekerjaan scroll kustom. Hampir setengah dari responden melaporkan sedikit atau sangat sulit untuk menyertakan {i>input<i} ini.
Mempelajari touch-action
Pertanyaan 9
50%
melaporkan learning tentang
`touch-action: manipulation`
dari survei.
Beberapa pertanyaan survei yang diajukan tentang penggunaan API tertentu dengan
kemungkinan jawaban Ya, Tidak, atau "hari ini saya belajar". Salah satu masukan yang penting adalah
jumlah orang yang melaporkan telah mempelajari touch-action dari survei, karena
ini adalah properti penting saat membuat gestur sentuh kustom yang perlu
berinteraksi dalam scroll.
Scrolling siklus
Pertanyaan 27
58%
melaporkan terkadang, sering, atau pada setiap project
menggunakan scroll siklus.
setelah 60 detik, video dimulai dari 0 lagi.
Angka-angka itu tinggi untuk fitur scroll dengan sedikit atau tanpa dukungan yang disediakan oleh platform web. Oleh karena itu, fitur ini sering kali menimbulkan banyak utang teknis karena duplikasi atau JavaScript yang dimasukkan untuk memaksa efek. Fungsi ini populer untuk carousel produk dan saat memilih waktu dalam detik atau menit untuk menawarkan cyclical scrolling.
Apakah area yang dapat di-scroll itu penting
Pertanyaan 2
55%
sangat atau
sangat penting
16%
melaporkan sama sekali tidak
atau sedikit penting
Responden merasa sangat penting tentang pentingnya area yang dapat di-scroll, sehingga memberikan sinyal lain tentang kesulitan yang diperlukan untuk menghasilkan scroll berkualitas tinggi.
Carousel
Pertanyaan 20
87%
telah menggunakan carousel.
24%
melaporkan bahwa halaman tersebut
mudah dikelola.
Hampir setiap responden memberikan carousel dalam pekerjaan web mereka, sementara hanya 25% responden menganggapnya mudah dikelola. Korsel standar populer selama penelitian kami, tetapi statistik ini mengejutkan kami, karena terdengar tidak mudah diselesaikan.
Scrolling tanpa batas
Pertanyaan 22
65%
menggunakannya terkadang
untuk setiap project
60%
agak atau
sangat sulit.
Dua per tiga responden memberikan scrolling tanpa batas dalam pekerjaan web mereka, dan laporan jumlah yang sama sulit untuk dilakukan. Contoh lain penggunaan tinggi yang dipadukan dengan tingkat kesulitan tinggi, yang menunjukkan kepada kami area yang memerlukan perhatian.
Meskipun content-visibility dan
contain-intrinsic-size dapat digabungkan untuk mengurangi biaya render untuk area
yang dapat di-scroll lama, tampaknya tidak membantu UX scroll tanpa batas
"muat lebih banyak".
Animasi yang dipicu scroll atau tertaut dengan scroll
Pertanyaan 24
47%
menggunakannya terkadang
untuk setiap project
56%
laporkan agak atau
sangat sulit
Hampir setengah dari semua responden menggunakan animasi dengan orkestrasi scroll dan setengah dari responden merasa sulit, sekali lagi menghubungkan penggunaan tinggi dengan kesulitan.
Bersaing dengan scroll bawaan
Pertanyaan 26
32%
selalu atau
sering kali
50%
kadang-kadang
Interaksi scroll dan sentuh bawaan aplikasi ponsel dan tablet sering disebut sebagai tempat yang jelas di mana web dapat mengejar ketertinggalan. Fitur ini mencakup animasi scroll link, antarmuka terprogram, integrasi suara, petunjuk scroll, dan API pull-to-refresh.
Hanya setengah dari responden merasa kadang-kadang mungkin untuk mencocokkan pengalaman scroll bawaan.
Kepuasan secara keseluruhan dalam membangun interaksi scroll di web
Pertanyaan 27
Poin-Poin Penting Survei
Hasil survei dibagi menjadi empat kategori: kompatibilitas, pendidikan, API, dan fitur.
Kompatibilitas
Tim Chrome telah mendeklarasikan sasaran untuk mengurangi jumlah masalah kompatibilitas web, termasuk kompatibilitas scroll.
Tiga masalah kompatibilitas pertama yang harus menjadi fokus:
1. Kompatibilitas scroll horizontal.
1. overscroll-behavior lintas browser.
1. Menghapus awalan dari -webkit-scrollbar dan mengikuti standar.
Pendidikan
Hasil survei menunjukkan bahwa perlu ada lebih banyak edukasi seputar
touch-action dan properti
logis. Browser berada di
garis depan tata letak internasional, dan tampaknya kurang dimanfaatkan atau
disalahpahami.
Area yang harus menjadi fokus:
1. touch-action
1. Properti logis
API
Penggunaan scroll scroll terus bertambah, dan developer telah menjawab bahwa mereka ingin menggunakan fitur secara interoperabilitas dengan library dan plugin populer. Menyingkat kesenjangan antara library CSS dan plugin ini akan membantu kepuasan developer scroll snap dan pengalaman pengguna.
Kita akan memfokuskan pekerjaan API pada scroll-snap:
1. Ketersediaan dan kompatibilitas API di berbagai browser.
1. Mulai kerjakan API CSS
baru seperti scroll-start.
1. Mulai kerjakan peristiwa JS
baru seperti
snapChanged().
Fitur
Hasil survei menunjukkan bahwa pengguna mengalami kesulitan dengan beberapa jenis komponen terkait scroll tertentu di web, karena platform tidak menyediakan primitif yang mereka perlukan untuk mem-build-nya tanpa plugin atau upaya tingkat tinggi. Ini adalah area yang kami harap dapat dijelajahi lebih dalam.
Fitur yang sulit dibangun oleh developer meliputi: 1. Korsel 1. Scroll virtual 1. Scrolling tanpa batas
Referensi
- Laporan Survei Scroll
- Pengumuman Survei
- Laporan DNA Mozilla
- Compat2021: Menghilangkan lima titik masalah kompatibilitas teratas di web
Thumbnail: foto oleh Taylor Wilcox di Unsplash.