it-swarm.asia

Apakah Scroll Bar Mati di 2020?

Baru-baru ini saya mendengar seorang desainer mengatakan bahwa desain web modern tidak menggunakan scrollbar visual - atau setidaknya mereka hanya terlihat saat scrolling. Saya adalah pengembang front-end dan belum pernah mendengar ini. Apakah ada kebenaran dalam hal ini? Secara khusus pertanyaan saya adalah:

ntuk aplikasi web, ketika konten dapat digulir:

  1. Haruskah ada bilah gulir yang terlihat (dan mengapa)?
  2. Haruskah tidak ada bar gulir yang terlihat (dan mengapa tidak)?
92
jbyrd

Ya harus ada.

Bilah gulir yang terlihat adalah kemampuan "halaman ini dapat digulir"

Tanpa petunjuk visual seperti ini, fungsionalitasnya mungkin terlewatkan.

107
colmcq

Beberapa pedoman desain modern tentu saja tidak suka scrollbar yang terlihat, tetapi tidak semua. Misalnya, dalam panduan Desain Bahan , untuk menu, jika menu dapat digulir, itu akan menampilkan bilah gulir. Bagaimanapun, jika konten Anda dapat digulir, itu harus jelas dari melihatnya bahwa itu memberi gulir.

Terserah masing-masing desainer atau pedoman apakah keterjangkauan itu dikutip oleh scrollbar yang dengan jelas menunjukkan seberapa banyak Anda dapat menggulir ke bawah (tradisional), tautan "baca lebih lanjut" atau panah mengarah ke bawah layar (seperti pada banyak halaman aplikasi atau blog modern) ), atau fade-out saat Anda mendekati Tepi area konten yang menyiratkan bahwa Anda dapat bergerak ke arah itu untuk melihat lebih atau lebih jelas, tetapi keterjangkauan itu sendiri adalah komponen yang diperlukan. Ini akan menjadi desain yang buruk untuk menyajikan konten yang dapat digulir tetapi tidak menunjukkan bahwa scrollability kepada pengguna. Ini dapat membuat pengguna frustrasi atau menyebabkan mereka kehilangan informasi penting atau panggilan untuk bertindak.

102
sintax

Sebagai pengguna mouse, saya benci konten yang dapat digulir yang tidak memberi saya pandangan dan akses ke scroll bar.

  1. Bilah gulir adalah kontrol. Ini memungkinkan saya untuk dengan cepat menavigasi halaman besar yang tidak dapat dibandingkan dengan pengguliran jari, pengguliran roda, dll. Ini juga memberi saya lebih presisi untuk sebagian besar halaman daripada roda gulir saya.

  2. Bilah gulir memberi saya informasi. Ini memungkinkan saya untuk dengan cepat menentukan berapa lama waktu yang diperlukan untuk membaca konten pada halaman (menganggap bilah gulir yang layak yang pegangannya: Talang rasio sama dengan layar: rasio halaman) dan memberi tahu saya seberapa jauh melalui halaman yang saya dapatkan . Itu juga memberi saya indeks untuk menentukan di mana saya berada di halaman jika saya ingin dengan cepat gulir ke atas dan kembali ke bawah.

  3. Bilah gulir membutuhkan ruang yang tidak signifikan. Saat ini, layar saya berada di 1920 x 1080 = 2.1 Mpx. Jendela Firefox dengan halaman ini di dalamnya berada di 1125 x 905 = 1,0 Mpx. Bilah gulir berukuran 16 x 816, dengan total 13 Kpx, atau 1,3% dari layar saya. Monitor saya cukup dekat dengan saya karena saya menggunakannya untuk bermain game, jadi saya cenderung menjaga jendela saya lebih sempit daripada monitor, jadi scrollbar secara efektif tidak memakan tempat sama sekali.

  4. Ada saat-saat ketika saya bahkan tidak tahu kontennya dapat digulir, meskipun saya cenderung mencoba menggulir dengan roda tanpa memeriksa bilah, jadi saya ragu ini adalah masalah besar untuk halaman web. Untuk aplikasi desktop yang biasanya tidak menggulir, itu akan menjadi masalah yang lebih besar.

  5. Jika Anda ingin scrollbar yang dapat disembunyikan, itu akan muncul kapan saja saya menggulir secara manual (melalui roda mouse, tombol keyboard, trackpad, dll.), Dan setiap kali saya menggerakkan mouse saya ke arah Tepi kanan layar.

Perangkat seluler lebih rumit, karena bilah gulir memakan banyak ruang, terutama jika cukup besar untuk digunakan.

  • A. Saya biasanya mengatasi masalah ini dengan beralih ke tampilan desktop (Saya belum melihat situs web yang versi selulernya sebagus, apalagi versi desktop, jadi saya default untuk tampilan desktop). Kemudian saya memperbesar jalan keluar, gulir ke bawah, lalu perbesar kembali. Ini lebih cepat dan lebih tepat daripada mencoba menggulir, menggulir, menggulir saat diperbesar, dan tidak memerlukan bilah gulir yang dapat ditarik. (Ini juga memungkinkan saya memperbesar tampilan gambar, diagram, dll. Yang lebih baik, yang ditolak oleh sebagian besar situs seluler.)

  • B. Firefox pada Android memiliki scrollbar yang tidak dapat diakses untuk memberi tahu saya bagian halaman mana yang saya buka (untuk versi desktop dan mobile situs), seperti halnya "Internet" bawaan "Browser. Saya menggunakan ini sama seperti yang saya lakukan pada browser desktop dengan mouse untuk mengindeks dan menentukan panjang halaman.

  • C. Saya juga cenderung hanya melihat halaman web besar pada monitor yang tepat, jadi sangat kecil kemungkinannya saya pada perangkat seluler yang mencoba menelusuri .pdf 900 halaman atau sesuatu. Jika aplikasi web Anda tidak pernah memiliki lebih dari dua atau tiga layar, menggulirkan jauh lebih sedikit masalah.

  • D. Perlu dicatat juga bahwa scrolling layar sentuh pada jari biasanya lebih cepat dan lebih presisi daripada menggunakan roda mouse, sehingga halaman harus jauh lebih besar sebelum sulit dinavigasi dengan cepat.

Kesimpulan

Untuk pengaturan mouse (atau trackpad atau trackball), saya pikir scrollbar harus selalu terlihat dan dapat diraih. Minimal, itu akan muncul saat menggulir atau saat menggerakkan mouse di dekat scrollbar.

Untuk pengaturan layar sentuh seluler, saya pikir bilah gulir harus selalu terlihat saat menggulir, tetapi tidak harus dapat diraih, dan mungkin harus disembunyikan saat tidak menggulir untuk mengurangi ruang yang terbuang.

Saya belum mengacaukan tablet/iPad atau layar sentuh yang lebih besar, jadi saya tidak yakin bagaimana perasaan saya tentang itu.

Tentu saja, memiliki opsi untuk mengubah gaya visual (baik melalui cookie sementara atau melalui pengaturan pengguna yang tersimpan, tergantung pada apakah pengguna Anda seorang tamu atau memiliki akun) adalah pilihan terbaik, tetapi Anda harus menggunakan default untuk sesuatu yang fungsional.

61
MichaelS

Sudut pandang ini terutama berasal dari lingkungan Mac, di mana bilah gulir biasanya ditampilkan sebentar saat konten pertama kali muncul, lalu menghilang. Ketika pengguliran terjadi (pengguna dipicu atau sebaliknya), bilah gulir muncul kembali. Hanya pegangan yang terlihat (sebagai bilah hitam bulat semi-transparan); tidak ada panah atau Talang. Jika kursor berada di atas bilah gulir saat muncul, kursor menjadi lebih luas dan memungkinkan menyeret dengan kursor. Isi konten tidak berubah; berperilaku seolah-olah bilah gulir tidak ada, dan bilah gulir diberikan di atas.

Ini berlaku saat menggunakan trackpad atau mekanisme input seperti trackpad (mis. Laptop). Bilah gulir biasa masih ditampilkan secara default saat menggunakan mouse.

Tentu saja, ini juga meluas ke ponsel; iOS menggunakan perilaku yang hampir identik (interaksi kursor minus). Sebenarnya saya pikir itu dimulai pada iOS (di mana scrollbar akan terlalu kecil untuk mengetuk dengan andal) dan bermigrasi ke macOS.

Secara keseluruhan, ini memiliki kelebihan dan kekurangan:

  • Tidak perlu membuat ruang untuk scrollbar menyederhanakan desain halaman (lebih sedikit elemen yang mengganggu) dan memungkinkan lebih banyak ruang untuk konten, terutama ketika banyak tempat dapat menggulir.
  • Pengguna di mac terbiasa dengan perilaku ini dan mengharapkannya.
  • Tidak ada lompatan dalam ukuran konten ketika suatu area tiba-tiba menjadi dapat digulir, yang juga memperbaiki ambiguitas umum di mana scrollbar dapat dibutuhkan selama itu terlihat, dan tidak diperlukan jika disembunyikan (mis. Karena pembungkus teks).

  • Di sisi negatif, seperti yang telah disebutkan, Anda perlu menemukan cara lain untuk menunjukkan bahwa konten dapat digulir. Bukan masalah untuk bagian utama halaman web karena ini memang diharapkan, tetapi bisa menjadi masalah untuk konten internal tergantung pada harapan pengguna. Flash awal membantu, tetapi tidak selalu cukup.

  • Interaksi pengguna untuk melompat ke lokasi lain dalam dokumen itu kikuk; pengguna harus memindahkan kursor ke tempat bilah gulir akan muncul, gulir sedikit dengan roda mouse atau "gulir 2-jari", ambil bilah gulir saat muncul, dan seret ke lokasi yang diinginkan. Pengguliran momentum membantu menghindari hal ini dalam beberapa kasus.
  • Karena bilah gulir muncul pada latar belakang transparan, jika latar belakangnya gelap maka sulit untuk melihatnya. macOS menyediakan scrollbar alternatif putih yang dapat digunakan dalam kasus ini (saya percaya browser secara otomatis beralih ke ini jika latar belakangnya cukup gelap, tetapi tidak 100% sangat aman). Juga memberikan bilah cahaya (atau bayangan) yang halus sebagai brankas yang cukup bagus.

Jika memungkinkan, tentu saja, tetap berpegang pada komponen asli browser untuk hal semacam ini. Mereka akan memastikan setiap pengguna mendapatkan pengalaman alami untuk platform mereka (Saya sudah pasti melihat banyak situs web mencoba meniru pengguliran momentum dan pengguliran elastis dengan hasil akhir yang mengerikan). Pengguna Mac tidak akan berterima kasih karena telah memaksa scrollbar terlihat di tempat yang tidak mereka harapkan, dan pengguna Windows tidak akan berterima kasih karena menyembunyikan scrollbar di tempat yang mereka harapkan.

26
Dave

Penghapusan scroll bar dalam pandangan saya adalah contoh lain dari ideologi idiot dan dangkal menempatkan gaya di atas fungsionalitas. Ini kembali ke depan tentang bagaimana seharusnya dan merupakan indikasi meredupnya masyarakat bagi saya. Bilah gulir melayani tujuan fungsional yang penting yang tidak selalu dapat direplikasi oleh metode alternatif lain. Saya pikir perubahan ini sebagian didasarkan pada gagasan bahwa orang menggunakan layar sentuh sehingga tidak diperlukan, tetapi banyak orang masih tidak. Banyak metode alternatif membutuhkan konsentrasi dan kemahiran ekstra untuk memanipulasi yang merupakan saluran energi yang saya lebih suka habiskan untuk melakukan pekerjaan, daripada berkelahi dengan antarmuka pengguna yang buruk. Metode pengguliran tradisional biasanya berjalan bersamaan dengan pengguliran keyboard dengan menekan tombol panah ke bawah, yang menurut saya jauh lebih mudah daripada metode lain yang membutuhkan lebih banyak konsentrasi, tetapi dengan bilah gulir dihapus, pengguliran panah keyboard juga kadang-kadang menghilang dengan itu yang seharusnya tidak BESAR -tidak! Contohnya adalah jejaring sosial F besar telah menyebabkan iritasi terus-menerus dengan gaya gulir "dinamis" ketika menggulir ke atas melalui riwayat pesan, dan di mana Anda tidak tahu keberadaan Anda dalam percakapan saat menggulir ke atas, tetapi kemudian Anda menggulir melewati titik tertentu dan tiba-tiba beban tambahan riwayat percakapan dimuat dan Anda akhirnya melompat jauh di depan tempat yang Anda inginkan.

Saya pikir itu juga sebagian ketidaktahuan, dan sebagian keinginan untuk menghemat sumber daya dan bandwidth di server untuk menghemat uang perusahaan dengan mengorbankan pengalaman pengguna. Ini juga tentang membodohi hal-hal idiot untuk membuat hal-hal "lebih mudah" digunakan untuk perintah yang sangat mendasar, dengan mengorbankan membuat hal-hal lebih menyusahkan bagi siapa saja yang tidak bodoh dan mungkin ingin melakukan sesuatu yang sedikit luar biasa. Saya berharap blockchain menandai akhir era ini dengan mengorbankan pengalaman pengguna untuk menghemat uang, dan kami dapat memiliki sistem yang bekerja dengan cepat dan bebas gangguan untuk pengguna dasar dan lanjutan.

Sebagai contoh, bukankah lebih bagus jika perangkat lunak seperti skype dan F messenger membiarkan Anda langsung menggulir ke awal riwayat pesan Anda alih-alih menunggu selamanya bagian demi bagian dimuat ?! Saya selalu menduga itu adalah untuk menghemat sumber daya pemuatan seluruh lot sekaligus. Namun, jika seseorang dengan sedikit kecerdasan dan pemikiran bernuansa mendesain ini, (lebih umum di lingkaran blockchain daripada perusahaan saya harap), kita semua bisa memiliki kue kami dan memakannya. Kita dapat menghemat sumber daya (yang masih bukan hal sepele bahkan di blockchain), dan mendapatkan info yang kita inginkan secara instan tanpa harus memasang sistem halaman demi halaman yang mengerikan ini.

Cukup tata letak kerangka seluruh riwayat waktu pada bilah gulir beserta tanggal yang muncul saat Anda menggulir. Segera setelah Anda melepaskan tombol mouse atau scroll strop, bagian tertentu dapat memuat. Jika Anda ingin kembali ke awal, gulir ke kanan ke atas dan hanya halaman pertama yang perlu dimuat. Jika Anda benar-benar membutuhkan semuanya untuk memuat langsung, untuk mencari kata kunci misalnya, maka cukup berikan tombol sederhana yang dapat ditekan jika perlu untuk mendapatkan seluruh riwayat pesan atau riwayat apa pun yang sedang Anda gulir.

Jika seseorang memberi sinyal secara spesifik maka semua itu perlu dimuat, maka blockchain harus mengakomodasi sumber daya. Ini adalah perbedaan antara itu dan perusahaan-perusahaan pada model lama, yang saya curigai akan enggan membiarkan bahkan mereka yang secara khusus membutuhkan segalanya untuk dimuat, untuk dapat melakukannya untuk melindungi sumber daya mereka untuk motif laba kotor mereka dan mengacaukan pengguna. Inilah sebabnya mengapa kita membutuhkan blockchain, dan lebih disukai versi terbuka.

11
Lex

Sebagai sudut pandang campuran ...

Bilah gulir horizontal biasanya merupakan hal yang buruk. Ini mungkin berarti Anda telah dioptimalkan untuk lebar layar monitor PC, yang tidak diterjemahkan dengan baik ke perangkat seluler. Saat menggulir ke bawah, membaca seluruh halaman membutuhkan banyak gulir kiri-kanan setiap layar konten. Dan sebaliknya situs-situs tersebut akan menyia-nyiakan ruang di layar yang lebih besar. (Pembaca yang lebih tua, ingat situs web yang mengatakan "Paling bagus dilihat di 1024x768"? Ya, itu.) Kita tidak harus tahan dengan hal itu pada tahun 2019 - ini bukan tahun 1990-an dan kami masih belum menggunakan Netscape Navigator. Hanya saja, jangan pergi ke sana.

Bilah gulir vertikal di sisi lain baik-baik saja. Kami secara intuitif terbiasa menelusuri sesuatu - pikirkan bagaimana Anda akan membaca koran kertas, misalnya. Seluruh halaman mudah terlihat dengan hanya gulungan atas/bawah.

Ada pemikiran bahwa lebih dari 2 atau 3 layar penuh konten terlalu banyak. Setelah itu sulit mencari barang. Jadi, sementara bilah gulir bekerja, jangan biarkan itu membawa Anda ke halaman panjang tanpa batas!

8
Graham

Ya, bilah gulir harus terlihat, jika bukan karena alasan lain selain demi aksesibilitas.

Ada banyak contoh di mana menyembunyikan bilah gulir membuat situs/program Anda di mana saja antara frustasi dan garis batas tidak dapat digunakan:

  • Menggunakan perangkat keras/perangkat lunak bantu untuk mengakses halaman Anda
  • Menggunakan mouse yang tidak memiliki roda gulir
  • Menggunakan sistem desktop jarak jauh yang tidak melewati acara gulir
  • Menggunakan touchpad yang menggulir menggunakan gerakan multi-jari (sebagian besar pengguna rata-rata tidak tahu itu ada)
  • Menggunakan layar sentuh, halaman lebih dari beberapa layar, dan saya perlu menggulir ke suatu tempat di ujung halaman
  • Menggunakan layar sentuh, menggulir halaman yang penuh dengan tautan/tombol (di mana gerakan ketuk-dan-jentik kemungkinan secara tidak sengaja mengaktifkan sesuatu)

Bilah gulir yang terlihat adalah cara mudah untuk menghindari semua masalah ini. Jika argumen utama kolega Anda adalah bahwa situs lain melakukannya, maka jangan dengarkan dia. Tekanan teman bukanlah argumen yang valid kecuali disertai dengan alasan signifikan, bermakna mengapa melakukannya adalah ide yang bagus. Pemikiran semacam itu adalah bagaimana <blink> tag menjadi populer.

Demi aksesibilitas, jangan terapkan scrollbar Anda sendiri. Gunakan yang disediakan oleh sistem. Teknologi bantuan tidak selalu dapat mengidentifikasi bilah gulir buatan sendiri dan mengoperasikannya seperti itu.

7
bta

Bilah gulir sangat berguna

  1. itu menunjukkan pengguna bahwa halaman dapat digulir
  2. itu menunjukkan pengguna di mana mereka saat ini berada di halaman yang dapat digulir

Anda tidak tahu berapa kali saya marah dan kehilangan karena beberapa perancang jelek berpikir bahwa menghapus bilah gulir adalah ide yang bagus.

3
Solid_Metal

Untuk menambah jawaban MichaelS,

Di tablet dan iPad, bilah gulir yang tidak dapat diambil, yang bersembunyi saat tidak menggulir, lebih disukai. Seperti yang dia katakan, menggulir pada perangkat sentuh jauh lebih tepat, dan bilah gulir yang terlihat dan dapat dijepit terasa kikuk dan menjengkelkan. Namun, tergantung pada panjang halaman, tombol kembali ke atas akan diterima.

Juga, ketika menulis ini di StackExchange menggunakan iPad pro 12,9 inci, saya perhatikan bahwa menambahkan jumlah padding yang layak (~ 1cm), dengan nada yang sedikit berbeda, sangat membantu karena memungkinkan pengguliran tanpa secara tidak sengaja membuka tautan.

2
Bob Kerman

Sebuah pertanyaan yang menarik, 2c saya berasal dari pengembang tetapi UX memimpin dan juga memiliki antarmuka yang dirancang dengan beberapa area digulir internal.

Beberapa poin:

  1. Bilah gulir yang terlihat harus ada jika kontennya cukup besar sehingga memerlukan gulir, karena keberadaan bilah gulir menandakan dan menjamin bahwa konten dapat digulir.
    • Scroll tak terbatas adalah ide pribadi saya tentang neraka, terutama jika Anda mengklik trackbar dan menyeretnya (bersinggungan dengan)
  2. Jika konten tidak dapat digulir, maka scrollbar adalah anti-penawaran yang menyarankan hal-hal yang tidak dapat terjadi.
    • Kasing Tepi adalah hal-hal yang tidak dapat digulir sekarang tetapi mungkin bisa jika mengatakan, konten bertambah besar, ini umum di editor, atau sistem apa pun dengan keluaran dinamis. Khususnya karena jika Anda menambah/menghapus fungsionalitas gulir yang dapat mengacaukan tata letak, Anda mendapatkan beberapa horizontal jank saat konten meluas dan kemudian bilah gulir muncul. (jika Anda menggunakan overflow: auto sebagai contoh). Dalam hal ini bisa lebih mudah untuk meletakkan scrollbar yang dinonaktifkan untuk menunjukkan bahwa ini adalah area yang dapat digulir, tetapi kontennya belum cukup besar untuk mengaktifkan perilaku ini.
  3. Scrollbar horizontal biasanya merupakan ide yang buruk jika dikombinasikan dengan scrollbar vertikal ketika memperkenalkan dan memilih mode implisit. Seperti pada, standar dari gulir mouse biasanya gulir vertikal, tetapi dengan penekanan tombol penambahan implisit (atau interaksi trackpad) pengguliran horizontal dapat dicapai. Kompleksitas ini sangat jarang dicapai.
  4. Di dalam beberapa antarmuka aplikasi (mis. Slippy maps) menghapus semua scrollbar bisa menjadi ide yang baik, karena konten bergerak di bawah jendela browser dalam paradigma itu, bukan sebaliknya. Kontrol dipahami dengan baik oleh sebagian besar pengguna.
  5. Mencoba gaya bilah gulir adalah 99% dari waktu bukan ide bagus kecuali jika Anda ingin banyak versi khusus, saya juga menerimanya tidak akan terlihat sempurna di semua lingkungan dan menggunakan default browser.
1
dougajmcdonald

Apakah desainer berbicara tentang mengganti scrollbar dengan tombol scroll down/up mengambang? Saya pikir itu masuk akal karena itu adalah pendekatan mobile-first dan saya telah melihatnya berhasil digunakan dalam konteks tertentu, tetapi tombol-tombol itu tidak dapat menggantikan scrollbar di grid.

0
Ling