Laporan Survei Scroll 2021

Dapatkan Laporan Survei Scroll 2021 serta kata-kata dari tim Chrome tentang pengaruhnya terhadap prioritas dan rencana untuk Chromium dan web.

Adam Argyle
Sam Dutton

Pada bulan April, tim Chrome merilis survei scroll dan tindakan sentuh berdasarkan masalah teratas yang dilaporkan dari Laporan DNA Web MDN 2019. Laporan Survei Scroll 2021 sudah siap, dan tim Chrome ingin membagikan beberapa pemikiran dan item tindakan yang kami peroleh dari hasil survei. Kami harap hasil ini akan membantu vendor browser dan grup standar memahami cara meningkatkan kualitas scrolling web.

Lihat Laporan Survei Scroll 2021.

Hasil yang patut diperhatikan

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

Meskipun memulai scrolling hanya memerlukan satu baris CSS, seperti overflow-x: scroll;, area permukaan API dan opsi scroll sangat besar, mulai dari JavaScript hingga CSS. Hasil berikut membantu menyoroti masalah yang dihadapi developer web.

Kepuasan keseluruhan dengan scrolling web

Pertanyaan 27

45%

agak atau sangat tidak puas secara keseluruhan
dengan scrolling 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 kesulitan dengan scroll. Hampir setengah responden melaporkan tingkat ketidakpuasan secara keseluruhan.

Kami yakin bahwa sentimen keseluruhan tentang penggunaan scroll tidak boleh serendah ini. Metrik ini perlu diubah; ini adalah sinyal yang jelas bahwa ada pekerjaan yang harus dilakukan.

Kesulitan menggunakan scroll

Pertanyaan 2

43%

melaporkan bahwa agak atau
sangat sulit
untuk menggunakan scroll.

Dari riset kami, kesulitan ini berasal dari banyaknya kasus penggunaan untuk scroll. Saat kita berbicara tentang scrolling, hal itu dapat mencakup: - Memosisikan elemen dalam area yang dapat di-scroll - Scroll tak terbatas - Animasi terkait scroll - Carousel - Padding scrollview - Scroll siklik - Scroll virtual

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

Pentingnya interaksi sentuh

Pertanyaan 3

51%

melaporkan interaksi sentuh sebagai
sangat atau amat sangat penting
bagi pekerjaan mereka.

Dengan pengguna web seluler yang terus meningkat dalam statistik kunjungan, tidak mengherankan jika setengah 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 ekstra sehingga web dapat memberikan interaksi sentuh berkualitas tinggi.

Kesulitan navigasi tombol tab atau gamepad

Pertanyaan 5a

44%

melaporkan cukup atau sangat sulit
untuk melakukan navigasi gamepad dan tab.

Scrolling mencakup metode navigasi seperti panah keyboard, tombol tab, penekanan tombol spasi, dan gamepad, dan akan sulit untuk menyertakannya saat melakukan pekerjaan scroll kustom. Hampir setengah responden melaporkan bahwa agak sulit atau sangat sulit untuk menyertakan input ini.

Mempelajari touch-action

Pertanyaan 9

50%

laporan pembelajaran tentang
`touch-action: manipulation`
dari survei.

Beberapa pertanyaan survei menanyakan tentang penggunaan API tertentu dengan kemungkinan jawaban Ya, Tidak, atau "hari ini saya belajar". Salah satu masukan penting adalah jumlah orang yang melaporkan bahwa mereka mempelajari touch-action dari survei, karena touch-action adalah properti penting saat membuat gestur sentuh kustom yang perlu berinteraksi dalam scroll.

Scroll siklik

Pertanyaan 27

58%

melaporkan kadang-kadang, sering atau di setiap project
menggunakan scrolling siklus.

Video menampilkan detik yang bergulir secara siklus,
setelah 60 detik, video dimulai dari 0 lagi.

Jumlah tersebut tinggi untuk fitur scrolling 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 disisipkan untuk memaksakan efek. Populer untuk carousel produk dan saat memilih waktu dalam detik atau menit untuk menawarkan scrolling siklus.

Apakah area yang dapat di-scroll penting

Pertanyaan 2

55%

sangat atau
sangat penting

16%

laporkan sama sekali tidak
atau sedikit penting

Responden sangat merasakan pentingnya area yang dapat di-scroll, yang memberikan sinyal lain tentang kesulitan yang diperlukan untuk menghadirkan scrolling berkualitas tinggi.

Carousel

Pertanyaan 20

87%

telah menggunakan carousel.

24%

melaporkan bahwa
mudah dikelola.

Hampir setiap responden menggunakan carousel dalam pekerjaan web mereka, sementara hanya 25% yang merasa mudah mengelolanya. Carousel siap pakai populer selama riset kami, tetapi statistik ini mengejutkan kami, karena tidak terdengar seperti sudah terselesaikan.

Scrolling tanpa batas

Pertanyaan 22

65%

menggunakannya kadang-kadang
untuk setiap project

60%

agak sulit atau
sangat sulit.

Dua pertiga responden menggunakan scroll tak terbatas dalam pekerjaan web mereka, dan jumlah yang sama melaporkan bahwa hal itu sulit dilakukan. Contoh lain dari penggunaan tinggi yang dipasangkan dengan kesulitan tinggi, yang menunjukkan kepada kami area yang perlu diperhatikan.

Meskipun content-visibility dan contain-intrinsic-size dapat digabungkan untuk mengurangi biaya rendering untuk area yang dapat di-scroll panjang, hal ini tampaknya tidak membantu UX scroll tanpa batas "muat lebih banyak".

Animasi yang ditautkan atau dipicu scroll

Pertanyaan 24

47%

menggunakannya sesekali
untuk setiap project

56%

melaporkan agak atau
sangat sulit

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

Bersaing dengan scrolling bawaan

Pertanyaan 26

32%

selalu atau
sangat sering

50%

terkadang

Interaksi sentuh dan scroll bawaan aplikasi ponsel dan tablet sering kali disebut sebagai tempat yang jelas bagi web untuk mengejar ketertinggalan. Fitur ini mencakup animasi terkait scroll, antarmuka terprogram, integrasi suara, petunjuk scroll, dan API tarik untuk memperbarui.

Hanya setengah responden yang merasa bahwa pengalaman scrolling bawaan hanya dapat dicocokkan terkadang.

Kepuasan keseluruhan membangun interaksi scroll di web

Pertanyaan 27

Diagram lingkaran yang menampilkan 5 bagian: 6,3% sangat tidak puas, 2,7% sangat puas, 23,4% cukup puas, 28,8% netral, 38,7% agak tidak puas.

Poin Penting Survei

Hasil survei dikelompokkan ke dalam empat kategori: kompatibilitas, pendidikan, API, dan fitur.

Kompatibilitas

Tim Chrome telah menyatakan tujuan untuk mengurangi jumlah masalah kompatibilitas web, termasuk kompatibilitas scroll.

Tiga masalah kompatibilitas pertama yang harus difokuskan: 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 tentang properti touch-action dan logis. Browser berada di garis depan tata letak internasional, dan jelas bahwa browser kurang dimanfaatkan atau disalahpahami.

Area yang harus difokuskan: 1. touch-action 1. Properti logis

API

Penggunaan scroll snapping semakin meningkat, dan developer telah merespons bahwa mereka ingin menggunakan fitur secara interoperabilitas dengan library dan plugin populer. Mempersempit kesenjangan antara CSS dan library plugin ini akan membantu kepuasan developer dan pengalaman pengguna scroll snap.

Kami akan memfokuskan pekerjaan API pada scroll-snap: 1. Ketersediaan dan kompatibilitas API di berbagai browser. 1. Mulai mengerjakan CSS API baru seperti scroll-start. 1. Mulai kerjakan peristiwa JS baru seperti snapChanged().

Fitur

Hasil survei menunjukkan bahwa pengguna kesulitan menggunakan beberapa jenis komponen terkait scroll tertentu di web, karena platform tidak menyediakan elemen dasar yang mereka butuhkan untuk membuatnya tanpa plugin atau upaya yang besar. Ini adalah area yang kami harap dapat kami pelajari lebih dalam.

Fitur yang sulit dibangun oleh developer meliputi: 1. Carousel 1. Scroll virtual 1. Scrolling tanpa batas

Resource

Gambar thumbnail: foto oleh Taylor Wilcox di Unsplash.