Jangan Ganggu Scroll

 (dontfuckwithscroll.com)
2 poin oleh GN⁺ 2024-11-30 | 1 komentar | Bagikan ke WhatsApp
  • Scrolljacking menimpa kecepatan, arah, dan efek scroll bawaan browser, sehingga mengganggu penjelajahan web yang terprediksi dan diharapkan pengguna
  • Dalam riset kegunaan Nielsen Norman Group, banyak peserta kehilangan orientasi, dan sebagian menganggap scroll yang berubah sebagai bug
  • Plugin momentum, smooth, dan inertial scrolling merusak memori otot serta fungsi bawaan browser, sehingga sulit mengetahui posisi saat ini di halaman yang panjang
  • Animasi transisi layar dan ketergantungan pada JavaScript meningkatkan beban aksesibilitas dan performa pada mabuk gerak/pusing, teknologi bantu, perangkat kelas bawah, dan lingkungan mobile
  • Pengguna datang untuk melihat konten, bukan efek scroll, jadi situs sebaiknya mempertahankan scroll native yang cepat apa adanya

Bagaimana Scrolljacking Merusak Penjelajahan Web

  • Scrolljacking adalah praktik mendefinisikan ulang perilaku scroll bawaan browser untuk mengubah kecepatan, arah, dan efek scroll pada halaman web
  • Plugin momentum scrolling, smooth scrolling, dan inertial scrolling termasuk bentuk scrolljacking yang umum
  • Meskipun terlihat seperti peningkatan, praktik ini mengganggu pengalaman menjelajah web yang alami, efisien, dan dapat diprediksi
  • Dampaknya terutama muncul pada kegunaan, aksesibilitas, dan performa

Kebingungan yang Terlihat dalam Riset Kegunaan

  • Riset kegunaan Nielsen Norman Group menunjukkan bahwa scrolljacking dapat membuat pengguna kehilangan orientasi
    • Banyak peserta mengalami setidaknya tingkat kehilangan orientasi yang minimal
    • Sebagian pengguna menafsirkan perilaku scroll yang berubah sebagai bug
    • Pengguna yang berorientasi tugas jauh kurang toleran terhadap scrolljacking dibanding pengguna yang berorientasi eksplorasi
  • Seorang peserta bereaksi dengan inti pernyataan, “Saya sudah swipe penuh tapi tidak berpindah ke mana pun,” dan mengatakan bahwa jika ia adalah calon pelanggan, ia akan sangat kesal
  • Di mobile, masalah menjadi lebih besar karena durasi scroll yang panjang dan layar yang kecil

Pelanggaran terhadap Ekspektasi dan Kendali Pengguna

  • Pengguna mengharapkan perilaku dasar bahwa saat mereka scroll, konten langsung bergerak
  • Plugin momentum scrolling memberikan gerakan beranimasi alih-alih perpindahan yang instan dan dapat diprediksi
  • Perubahan seperti ini mengganggu memori otot dan kebiasaan lama yang diandalkan pengguna untuk bernavigasi secara efisien
  • Saat scroll bawaan ditimpa, pengarahan visual situs ditempatkan di atas preferensi atau kebutuhan pengguna
  • Pengguna mengunjungi situs untuk melihat konten, bukan untuk mengalami scroll yang dibuat terlalu dramatis

Mabuk Gerak dan Beban Aksesibilitas

  • Plugin momentum scrolling menambahkan animasi yang terasa melayang atau bergoyang, yang bisa membebani pengguna yang rentan terhadap mabuk gerak atau pusing
  • Banyak situs tidak menyediakan opsi untuk mematikannya, sehingga pengguna sulit menghindari ketidaknyamanan saat membaca
  • Teknologi bantu seperti screen reader dan navigasi keyboard dapat terganggu karena jeda waktu
  • Pengguna dengan gangguan motorik atau keterbatasan penglihatan dapat merasa lebih sulit menggunakan situs karena jeda ini
  • Aksesibilitas harus diperlakukan sebagai kebutuhan dasar dalam penggunaan web, bukan fitur opsional

Penurunan Performa dan Konsistensi antar Perangkat

  • Plugin momentum scrolling memuat JavaScript, dan dapat menyebabkan jeda, patah-patah, atau kerusakan pada perangkat lama atau berspesifikasi rendah
  • Alih-alih terasa “smooth”, halaman justru bisa terlihat seperti rusak di perangkat yang lemah
  • Rendering animasi membutuhkan library JavaScript yang membengkak, dependensi tambahan, dan lebih banyak siklus CPU
  • Akibatnya, waktu muat halaman bisa menjadi lebih lambat
  • Di jaringan mobile atau wilayah dengan koneksi buruk, efek scroll yang berlebihan membuat halaman lebih lambat dan kurang mudah diakses

Masalah Fungsi Bawaan Browser dan Kesadaran Posisi

  • Browser modern sudah menyediakan pengaturan momentum scrolling bagi pengguna yang menginginkannya
  • Plugin pihak ketiga dapat menimpa atau berbenturan dengan fungsi bawaan ini, sehingga merusak gesture scroll kustom atau momentum scrolling
  • Preferensi pengguna seperti pengaturan reduce motion di seluruh sistem mungkin tidak bekerja seperti yang diharapkan
  • Animasi momentum scrolling menambahkan jeda antara input pengguna dan hasil yang terlihat
  • Di halaman panjang, hal ini membuat posisi saat ini lebih sulit dipahami secara akurat, dan navigasi cepat menjadi merepotkan

Power User dan Biaya Pemeliharaan

  • Bagi power user yang ingin memindai dokumen dengan cepat atau berpindah secara presisi di halaman, momentum scrolling memperlambat alur kerja
  • Mereka harus menunggu animasi yang lambat selesai, sehingga bertentangan dengan harapan pengguna yang ingin segera menyelesaikan pekerjaan
  • Plugin momentum scrolling bukan fitur yang cukup dipasang sekali lalu selesai
  • Diperlukan pembaruan berkala agar tetap kompatibel dengan browser, sistem operasi, dan perangkat terbaru
  • Setiap pembaruan berisiko menghadirkan bug baru, dan menambah pekerjaan bagi tim pengembang alih-alih menggunakan waktu dan biaya tersebut untuk membuat situs lebih cepat, aman, atau optimal

Kesimpulan: Biarkan Scroll Tetap Menjadi Perilaku Bawaan

  • Scrolljacking dan plugin momentum scrolling menambahkan kompleksitas yang tidak perlu, menurunkan kegunaan, dan membuat pengguna frustrasi
  • Seperti ungkapan Nielsen Norman Group, “kegunaan adalah fondasi dari kesenangan”
  • Daripada menciptakan ulang scroll, lebih baik mempertahankan perilaku scroll yang native, dapat diprediksi, dan cepat
  • Jangan jadikan scroll sebagai acara khusus; biarkan pengguna cukup melakukan scroll

Bacaan terkait

1 komentar

 
GN⁺ 2024-11-30
Komentar di Hacker News

  • Jangan utak-atik URL, navigasi browser, atau tombol kembali juga
    Rasanya ini pertarungan yang sudah lama kalah, dan SPA merusak web sehingga jadi jauh lebih buruk

    • SPA tidak harus seperti itu; itu hanya pilihan cara membuatnya
      History API baik-baik saja, jadi SPA dan navigator internalnya bisa dibuat bekerja selaras dengan browser dan pengguna
      Namun banyak developer merusaknya karena tidak peduli pada dasar-dasar web seperti kemampuan bookmark dan navigasi
      SPA yang bagus harus berperilaku seperti situs web biasa; Anda seharusnya tidak sadar itu SPA selain karena cepat dan responsif
    • Saya tidak suka harus menekan tombol kembali berkali-kali hanya karena berinteraksi dengan suatu elemen di halaman
      Memang benar status tertentu harus bisa di-bookmark atau dibagikan, tetapi untuk itu jauh lebih baik URL berubah di tempat saja daripada membuat langkah navigasi baru
    • Cara mudah membuat SPA yang tidak mengutak-atik URL sudah ada sejak lama
      Yang merusak web adalah orang-orang yang tidak peduli pada dasar web, URL, tombol kembali, dan pengalaman pengguna saat scroll; bukan SPA itu sendiri
    • Jangan utak-atik tombol Esc juga, Squarespace!
    • Redirect sudah lama merusak riwayat kunjungan, dan rantai redirect 2 langkah adalah pengalaman terburuk
      Browser seharusnya memperbaikinya, tetapi inersianya terlalu besar sehingga sepertinya tidak akan terjadi

  • Sikap “kami lebih tahu daripada pengguna” menurut saya tidak hanya berlaku pada scroll Momentum, tetapi juga pada banyak tren desain UX saat ini
    Saya penasaran bagaimana kita bisa sampai pada pemujaan estetika sampai-sampai mengorbankan segalanya

    • Ini masalah yang lebih dalam daripada desain UI/UX; ini masalah seluruh industri IT
      Ada sikap sangat merendahkan yang mencegah pengguna memikul tanggung jawab apa pun sendiri
      Hari ini pun saya mencari cara mematikan perilaku menyebalkan di macOS: “kata sandi diperlukan untuk mengaktifkan Touch ID”; saya paham permintaan setelah reboot, tetapi permintaan yang tampaknya berbasis waktu sepertinya tidak bisa dimatikan
      Cara terdekat yang saya temukan adalah mengurangi batas waktu dengan perintah bioutil, dan tidak bisa memperpanjangnya
      Saya jadi ingin merekayasa balik lokasi pemeriksaan nilai maksimum dan melihat apakah bisa melewatinya dengan memanggil API tingkat bawah secara langsung
    • Menyalahkan masalah ini pada “tren desain UX” menurut saya tidak adil
      Ini justru lebih mirip ketiadaan desain UX
    • Bagian itu mengingatkan saya pada tombol Call to Action yang dibungkus dengan kata-kata manis
      Ada tulisan blog bagus berjudul kira-kira “Button presses You”, tetapi saya tidak bisa menemukannya
      Intinya, tujuan aplikasi bergeser bukan lagi menentukan apa yang pengguna ingin program lakukan, melainkan aplikasi yang mengarahkan pengguna harus melakukan apa dan bagaimana

  • Scrollbar juga jangan diutak-atik
    Belakangan sepertinya ada tren membuatnya selebar sekitar 1px di mana-mana

    • Benar, scrollbar yang terlalu kecil membuatnya tidak bisa dipakai di layar sentuh
      Kalau benar-benar ingin membuat aplikasi ergonomis, gesture satu atau dua jari, misalnya menarik dengan jari untuk scroll, harus berfungsi dengan baik
    • Muncul saat mouse diarahkan ke atasnya tidak apa-apa, tetapi banyak situs web memilih jalan mudah dengan mematikan scrollbar sepenuhnya pada satu sumbu atau kedua sumbu
      Akibatnya, satu-satunya cara untuk scroll di desktop adalah menyeret seleksi teks melewati tepi frame
    • Biasanya saya menyembunyikan scrollbar
      Saya berusaha tidak memakai konten yang meluap, tetapi ketika memang harus meluap, scrollbar mengganggu desain dan scrollbar bawaan terlalu jelek, jadi saya sembunyikan
    • Saya suka scrollbar yang menghilang
      Begitu mouse digerakkan, ia muncul; saat berhenti, ia menghilang
      Kalau ingin melihat posisi progres, cukup gerakkan mouse sedikit

  • Saya sudah memakai internet sejak era Gopher, dan menyukai minimalisme estetika HTML murni
    Tautan di bawah tulisan menuju situs web yang menginspirasi artikel ini juga sangat bagus
    Saat melihat source pada halaman seperti ini, rasanya bukan sekadar nostalgia sederhana, melainkan muncul perasaan hangat bahwa “orang-orang ini paham sesuatu”
    Mirip adegan dalam dokumenter Helvetica ketika para desainer menjelaskan sensasi saat akhirnya bisa memilih Helvetica yang baru alih-alih font script jelek bergaya 1950-an

  • Saya rasa landing page mencolok yang isi latarnya berubah mengikuti scroll atau bagian halaman itu sendiri terpecah juga termasuk dalam hal ini
    Contoh: https://webflow.com/made-in-webflow/website/Translate-Webflo...

    • Aplikasi yang berperilaku seperti itu hanya sebagian akibat kode yang cacat, sedangkan browser sendiri adalah scroller yang bagus
      Scroll dengan kemiringan di iPad membantu orang yang lebih tua membaca dan menggulir dengan cepat, dan auto-scroll juga cukup bagus

  • Saya masih sama bencinya seperti saat pertama melihat tombol < > dimasukkan ke baris item pada halaman yang semula hanya di-scroll naik-turun
    Platform media streaming paling terkenal buruk dalam hal ini, tetapi bukan satu-satunya pelaku

  • Yang paling saya benci belakangan ini adalah membajak Ctrl+F atau Ctrl+K

    • Saya ingin menambahkan pembajakan aksi seleksi dan Ctrl-C
    • Fakta bahwa browser mengizinkan penimpaan shortcut saja sudah sangat buruk
      Dari sisi browser, untuk memungkinkan ini pasti perlu kode tambahan, dan rasanya Google, Apple, atau Mozilla tidak perlu mengeluarkan biaya apa pun jika tidak menulis kode itu
    • Meski menyediakan pencarian dalam aplikasi yang berguna, pembajakan Ctrl+F benar-benar saya benci
      Browser seharusnya menyediakan shortcut alternatif seperti Shift+Ctrl+F untuk kasus seperti ini
      Saya baru saja mengetahui bahwa Shift+Cmd+F melakukan sesuatu di Firefox
    • Outlook for web membajak Ctrl+R
      Kombinasi tombol standar tidak boleh diutak-atik
      Jangan mengambil fungsi aplikasi lain dan mengejutkan pengguna
    • Jujur, menurut saya ini bisa dilihat dari dua sisi
      Belakangan di Google Sheets pada Mac, Cmd-F untuk pencarian di dalam spreadsheet berhenti berfungsi; memang caranya adalah membajak shortcut sistem, tetapi sebenarnya tidak ada fungsi pengganti juga
      Jadi untuk mencari, saya harus pergi ke menu bar Sheets dan menemukannya di dalam menu

  • Jangan utak-atik juga halaman yang saat di-scroll ke bawah menjalankan animasi, elemen bergerak ke samping, dan harus melewati gerbang scroll sebelum bisa turun lagi ke bawah halaman
    Itu desain yang mengerikan, mengganggu, menghalangi, dan memusuhi pengguna

  • Yang paling lucu adalah tautan “Back to the normal version” hanya bisa diklik setelah kembali ke bagian paling atas dengan smooth scroll
    Kena jebakan dengan sempurna

  • Saya penasaran apakah ini bisa dimatikan di Firefox lewat about:settings
    Atau apakah deteksi event-nya akan rusak?