Pola Desain Frustrasi: Filter Rusak

Filter ada di mana -mana. Meskipun kami sering menganggapnya muncul saat memesan penerbangan atau berbelanja online, filter sering digunakan di hampir setiap antarmuka yang menampilkan lebih dari beberapa titik data.

Bukan hanya jumlah data yang sulit untuk dipahami; itu adalah kompleksitas dan kurangnya konsistensi yang biasanya diperlukan oleh data yang memerlukan beberapa penyaringan — seperti skenario umum dalam kisi data, dasbor perusahaan, pelacakan vaksin, dan pencatatan catatan publik.

Bagian Dari: Pola Desain

Merancang Untuk Jangkauan Nyaman

Sebagai pelanggan, kami menggunakan filter untuk mengurangi sekumpulan besar opsi menjadi pilihan yang lebih mudah dikelola dan sangat relevan. Mungkin hanya beberapa lusin slip pembayaran bukan ribuan, atau hanya segelintir blus daripada seluruh koleksi.

Kami memiliki atribut minat tertentu , maksud tertentu , yang kami perlukan untuk berkomunikasi dengan antarmuka. Kami melakukannya dengan memecah niat kami menjadi serangkaian fitur yang tersedia. Maksud tersebut mungkin cukup spesifik atau cukup umum, tetapi dalam kedua kasus tersebut, desain harus meminimalkan waktu yang dibutuhkan pelanggan untuk beralih dari status default (bila tidak ada filter yang dipilih) ke status akhir (saat semua filter berhasil diterapkan).

Itu hanya satu bagian dari cerita. Menerapkan filter yang relevan adalah bagian yang mudah, tetapi menunjukkan hasil yang cukup relevan sedikit lebih sulit. Faktanya, untuk setiap antarmuka, dan untuk setiap maksud, kami memiliki rentang kenyamanan tertentu dalam pikiran, yaitu sejumlah opsi yang kami pikir dapat kami kelola dengan relatif mudah.

Rentang opsi ini tidak harus muat di satu layar, atau ditampilkan di satu halaman, atau terbatas pada daftar pendek kecil yang mudah kita ingat. Itu bisa apa saja dari lusinan hingga ratusan item yang tersebar di sejumlah halaman.

Bagian yang penting adalah kisaran ini memenuhi harapan kami bahwa:

  • kami sedang mencari opsi yang sangat relevan,
  • kita dapat dengan mudah memahami apa yang kita jelajahi,
  • kita dapat melihat perbedaan di antara semua opsi, dan
  • kami dapat memproses semuanya dalam jangka waktu yang wajar dan dapat diperkirakan.

Tidak seperti pengurutan, yang hanya mengatur ulang hasil menurut beberapa atribut yang disukai ( batas lunak ), filter selalu mewakili batas keras. Mereka secara ketat membatasi ruang lingkup hasil. Tidak cukup filter yang tepat dan pengguna menembak jauh di atas rentang yang nyaman; terlalu banyak filter dan pengguna berakhir dengan hasil nol dan meninggalkan situs sama sekali.

Kisaran nyaman bervariasi secara signifikan dari produk ke produk. Isyarat di mana letaknya dapat disimpulkan dari betapa berbedanya pilihan sebenarnya. Dalam uji kegunaan, kami melihat orang-orang tidak kesulitan menjelajahi 20-30 jenis kendaraan, 40-50 jenis sepatu kets, 70-80 karangan bunga, atau bahkan membuat halaman melalui 100-200 slip pembayaran. Namun mereka merasa benar-benar kewalahan saat menjelajahi 15 jenis sharpies atau baterai AAA yang berbeda. Sebagai aturan praktis, tampaknya semakin berbeda pilihannya, semakin nyaman kita merasa dengan pilihan yang sedikit lebih besar.

Pertanyaan terakhir, kemudian, adalah bagaimana menemukan keseimbangan yang rumit itu, ketika antarmuka kami membantu pengguna dengan cepat mencapai hasil yang cukup. Satu jawaban atas pertanyaan itu terletak pada sesuatu yang terdengar sangat jelas: hilangkan hambatan apa pun di jalur pengguna menuju jangkauan yang nyaman itu. Ini lebih mudah ditulis daripada dilakukan — terutama ketika Anda memiliki lusinan atau bahkan ratusan filter yang harus dapat diakses di seluler, di desktop, dan di mana pun di antaranya.

Kompleksitas Penyaringan

Pada pandangan pertama, penyaringan tidak tampak seperti upaya yang sangat rumit. Tentu saja kita dapat berdebat panjang lebar tentang elemen formulir yang tepat untuk berbagai jenis filter — pelengkapan otomatis, radio, sakelar, drop-down pilih, penggeser, dan tombol hanya untuk beberapa nama — tetapi pada intinya, semua elemen formulir hanyalah dasar masukan, kan?

Ternyata, ada beberapa aspek pengalaman yang membuat mendesain filter cukup sulit :

  • filter dapat datang dalam berbagai rasa dan bentuk, untuk harga, peringkat, warna, tanggal, waktu, ukuran, merek, kapasitas, fitur, tingkat pengalaman, rentang usia, gejala, status produk, dll.
  • filter biasanya datang dalam jumlah besar , dan harus ditampilkan di seluruh layar,
  • filter sering kali memiliki status yang berbeda (dipilih, tidak dipilih, dinonaktifkan)
  • filter sering membutuhkan default yang masuk akal , dan mereka harus mengingat input pengguna,
  • filter dapat saling bergantung , dan dependensi ini harus jelas,
  • filter bisa sulit untuk divalidasi , misalnya ketika pengguna dapat mengetikkan data yang kompleks, seperti waktu atau tanggal,
  • filter perlu mendukung dan menampilkan pesan kesalahan yang berarti,
  • dan begitu banyak lainnya.

Filter tidak pernah ada dengan sendirinya ; dalam satu atau lain cara, mereka selalu terhubung dengan hasil yang mereka lakukan. Koneksi ini sering menyebabkan filter dan hasil pencocokan menjadi agak sinkron , karena yang terakhir bergantung pada seberapa cepat UI mendaftarkan input, dan berapa banyak waktu yang dibutuhkan untuk memprosesnya dengan sukses.

Sekarang, mengatasi semua kerumitan halus dari masing-masing tantangan ini tidak lain adalah pekerjaan yang monumental, namun beberapa masalah sedikit lebih membuat frustrasi daripada yang lain, membuat keseluruhan pengalaman menyakitkan dan menjengkelkan, dan karenanya menyebabkan pengabaian yang tinggi dan rasio pentalan yang tinggi. Mari kita jelajahi beberapa yang kritis.

Hindari Panel Gulir Kecil

Setelah hanya beberapa sesi kegunaan dengan pelanggan yang mencoba menggunakan filter pada perangkat mereka sendiri, orang dapat melihat beberapa frustrasi umum yang berulang-ulang. Salah satu pola yang paling menjengkelkan berasal dari bagian filter panjang yang berisi lusinan opsi. Opsi ini sering terselip di panel kecil yang dapat digulir, menampilkan 3-4 opsi sekaligus dan membutuhkan pengguliran vertikal untuk menelusuri opsi.

Bagian ini sering menyebabkan pelanggan menggulir secara vertikal, perlahan, akurat, dengan fokus dan presisi yang ekstrem. Seperti yang mereka lakukan di seluler, beberapa filter diaktifkan secara tidak sengaja, mendorong pelanggan untuk lebih fokus. Contoh klasik dari pola ini adalah filter “Merek”, yang sering kali berisi ratusan opsi, diurutkan berdasarkan popularitas atau alfabet.

Opsi alternatif adalah menampilkan sebanyak 7–10 opsi sekaligus dengan akordeon yang akan meluas dan menampilkan semua opsi saat ketuk/klik. Opsi ini tidak harus ditampilkan dalam ukuran penuh, tetapi dapat hidup dalam panel yang dapat digulir yang lebih besar , tetapi opsi tersebut tidak boleh diaktifkan dengan menggulir panel.

Ini juga merupakan ide yang baik untuk melengkapi filter dengan pelengkapan otomatis pencarian dan tampilan abjad jika beberapa opsi populer disorot di bagian atas. Contoh bagusnya adalah Rozetka.ua , pengecer eCommerce dari Ukraina (lihat di atas).

Selalu Berikan Penggantian Input Teks Untuk Slider

Kapan pun pengguna dapat menentukan rentang nilai yang besar, baik itu kisaran harga di toko ritel, durasi maksimum perjalanan kereta api, atau cakupan minimum/maks untuk paket asuransi, kami mungkin akan menggunakan semacam penggeser . Semua penggeser memiliki satu kesamaan: mereka luar biasa ketika kami ingin mendorong pelanggan untuk menjelajahi banyak opsi dengan cepat, tetapi cukup membuat frustrasi ketika pengguna memikirkan sesuatu yang spesifik dan karenanya perlu sedikit lebih tepat.

Pikirkan saja frustrasi yang biasanya harus kita alami ketika menaikkan harga sedikit, dari $200 menjadi $215, atau menambah satu jam lagi selama penerbangan Anda. Melakukannya dengan slider itu sulit karena membutuhkan presisi yang luar biasa, dan itu selalu menyebabkan kesalahan dan frustrasi.

Kami telah membahas cara mendesain penggeser yang sempurna secara mendetail, tetapi mungkin fitur terpenting yang dibutuhkan setiap penggeser adalah mendukung kecepatan interaksi yang berbeda. Sebenarnya, ada beberapa jenis interaksi yang umum:

  • ketika pelanggan ingin menjelajahi banyak opsi dengan cepat, penggeser lama yang bagus dengan trek dan jempol berfungsi dengan baik;
  • ketika pelanggan untuk lebih tepat dalam eksplorasi mereka, kami dapat membantu dengan menambahkan stepper (+/-) untuk lompatan granular ke depan dan ke belakang,
  • ketika pelanggan memiliki nilai yang tepat dalam pikiran, kami dapat membantu dengan menyediakan bidang input teks untuk nilai min/maks, sehingga pengguna dapat mengetik nilai secara langsung tanpa harus menggunakan penggeser,
  • dalam semua kasus ini, solusi harus dapat diakses dan mendukung interaksi hanya keyboard.

Lihatlah contoh Lloydsbank di bawah ini. Kalkulator pinjaman pribadi mendukung semua jenis interaksi dengan indah. Perhatikan juga gaya fokus saat ibu jari diaktifkan, dan rentang ditampilkan di bawah penggeser suku bunga di bagian atas untuk menunjukkan tempat pelanggan sedang menavigasi. Tingkat bunga berubah tergantung pada berapa banyak uang yang ingin dipinjam oleh pelanggan.

Contoh menarik lainnya dari penggeser yang dirancang dengan baik berasal dari Sofasizer Made.com , yang memungkinkan Anda memfilter sofa berdasarkan dimensi yang harus dimiliki. Daripada menggunakan satu set bidang input, Made.com memilih untuk menggunakan antarmuka visual dengan ikon "Ubah Ukuran". Anda dapat menyeret gagang untuk menyesuaikan ukuran, atau Anda dapat mengetikkan nilai yang tepat di bidang masukan tinggi dan lebar.

Pilihan lainnya adalah mengubah semua bagian filter menjadi overlay dan menampilkannya dengan tap/klik di atas hasil. Bahkan, Anda bahkan dapat menggunakan filter mengambang , sehingga saat pelanggan menggulir halaman ke bawah, filter selalu dapat diakses.

Contoh dari pola ini adalah Adidas (lihat gambar di bawah). Bilah filter tetap; bahkan saat pengguna menggulir halaman ke bawah, overlay filter tidak akan menutup secara otomatis — ini membutuhkan input pengguna, sekali lagi menyerahkan kontrol kepada pengguna. Namun, itu menutup secara otomatis setelah salah satu filter dipilih. Jika pengguna ingin memilih beberapa filter, mereka harus membuka kembali grup filter yang sama berulang kali. Menjaga filter tetap bertahan mungkin merupakan ide yang lebih baik. Namun, hasilnya: tidak ada perubahan tata letak, tidak ada pengguliran yang membuat frustrasi di koridor sempit, dan filter selalu dapat diakses.

Bukan berarti menampilkan filter di atas hasil selalu lebih baik secara default. DiAsos , setiap input filter menyebabkan lompatan ke bagian atas halaman, sehingga pelanggan harus menggulir ke bawah secara manual untuk melanjutkan pemfilteran. Daripada merender ulang seluruh halaman, akan lebih masuk akal untuk merender ulang hanya area filter dan daftar produk.

Ikea menampilkan filter di bagian atas hasil. Terkadang filter muncul dalam overlay drop-down, dan terkadang sebagai pil di bawah filter. Namun sebagian besar waktu, tidak seperti contoh sebelumnya, saat filter dipilih, filter tersebut menampilkan mega-filter-overlay sidebar di sebelah kanan dengan semua opsi pemfilteran yang tersedia dikelompokkan di sana. Saat pelanggan melewati filter, daftar produk diperbarui di latar belakang secara asinkron. Lebih penting lagi, perhatikan tombol "Terapkan" yang labelnya berubah tergantung pada input.

Dengan setiap input filter, permintaan baru dikirim ke server, mengambil jumlah hasil, dan kemudian menampilkannya di UI. Itu cara yang bagus untuk memberi pengguna perasaan yang sangat jelas tentang seberapa jauh atau seberapa dekat mereka dengan jangkauan nyaman mereka.

Contoh lain adalah Galaxus.ch (lihat di bawah), pengecer eCommerce Swiss yang memberikan pengalaman kelas satu dalam hal pemfilteran. Filter ditampilkan di atas hasil produk; hamparan filter muncul saat ketuk/klik. Tidak ada pelambatan, waktu respons cepat, dan integrasi filter aktif yang indah dengan area filter. Contoh referensi bagus yang layak dipertimbangkan saat mendesain filter apa pun.

Secara umum, memiliki tombol "Terapkan" bersama dengan pembaruan real-time dari area konten tampaknya berfungsi paling baik. Ini benar-benar menggabungkan yang terbaik dari kedua solusi: menunjukkan hasil segera ketika mereka tiba, sambil menjaga filter dapat diakses setiap saat.

Hindari Layar Terpisah Di Seluler

Masalah yang telah kami jelajahi dalam artikel ini berlaku sama untuk layar besar dan kecil. Namun, pada layar kecil, dan terutama pada koneksi yang lambat, masalah ini menjadi lebih kritis. Sebagian besar waktu, antarmuka cenderung memblokir seluruh UI pada satu input filter, menyebabkan penundaan besar bagi pelanggan saat bepergian (misalnya Crutchfield , Walgreens ). Di sisi lain, adalah umum untuk membagi layar untuk menampilkan hamparan filter, sambil tetap menampilkan daftar produk yang diperbarui di latar belakang (mis. Nordstrom ).

Namun, secara umum, mungkin lebih baik bereksperimen jika overlay satu halaman penuh untuk filter akan berkinerja lebih baik. Ini memberi lebih banyak ruang untuk bereksperimen dengan tampilan multi-kolom, atau bahkan mungkin menampilkan area yang dapat digesek untuk memilih filter tanpa harus berpindah antar halaman terpisah. Sebenarnya, menggunakan akordeon yang dapat diciutkan dan diperluas alih-alih membawa pengguna ke halaman terpisah mungkin merupakan ide yang bagus — mirip dengan apa yang telah kita diskusikan dengan mega-dropdown .

Tidak seperti di desktop, memiliki tombol "Terapkan" di semua contoh ini penting, dan Anda dapat membuatnya sedikit lebih berguna dengan menambahkan jumlah produk sebagai label pada tombol dan menjaga tombol tetap lengket di bagian bawah saat pengguna menggulir ke bawah .

Daftar Periksa Desain Penyaringan

Seperti biasa, berikut adalah semua hal yang perlu diingat saat mendesain filter apa pun — bantuan kecil untuk tidak melupakan sesuatu yang penting sebelum memulai percakapan dengan rekan desainer dan pengembang Anda. Anda dapat menemukan setumpuk penuh Daftar Periksa Pola Desain Antarmuka Cerdas di Majalah Smashing Anda juga.

  1. Bisakah kita menghindari ikon filter dan menampilkan filter apa adanya?
  2. Jika tidak, ikon apa yang kita pilih untuk menunjukkan pemfilteran?
  3. Apakah ikon + bantalan cukup besar untuk mengetuk dengan nyaman?
  4. Apakah kita meletakkan ikon di atas, bawah atau mengambang (seluler/desktop)?
  5. Apa sebenarnya yang terjadi ketika pengguna mengklik/mengetuk ikon?
  6. Bagaimana ikon akan berubah saat ketuk/klik?
  7. Apakah kita akan memiliki semacam animasi atau transisi saat diklik?
  8. Apakah filter akan muncul sebagai halaman penuh/hamparan sebagian atau slide-in?
  9. Bisakah kita menghindari penyaringan sidebar karena biasanya lambat?
  10. Apakah kami mengekspos filter populer atau relevan secara default?
  11. Apakah kami menampilkan jumlah hasil yang diharapkan untuk setiap filter?
  12. Bisakah kita menggunakan penggesek horizontal untuk berpindah antar filter?
  13. Bisakah kita menghindari drop-down dan hanya menggunakan tombol/chip + matikan?
  14. Untuk filter kompleks, apakah kami menyediakan pencarian di dalam filter?
  15. Apakah kita menggunakan ikon untuk menjelaskan perbedaan antara berbagai filter?
  16. Apakah kita menggunakan elemen yang tepat untuk filter, misalnya slider, tombol, matikan?
  17. Apakah filter diterapkan secara otomatis (ya, untuk slide-in)?
  18. Apakah filter diterapkan secara manual pada konfirmasi (“Terapkan”) (ya, untuk overlay)?
  19. Bagaimana kita mengomunikasikan filter yang sudah dipilih?
  20. Bisakah filter yang dipilih muncul sebagai pil, keripik, atau tag yang dapat dilepas?
  21. Apakah kami merekomendasikan filter yang relevan berdasarkan pilihan?
  22. Apakah kami melacak ketidakcocokan antara filter yang dipilih?
  23. Bagaimana pesan kesalahan atau peringatan muncul di UI?
  24. Apakah kami mengizinkan pelanggan menyetel ulang semua filter dengan cepat, sekaligus?
  25. Apakah filter (atau tombol filter) mengambang di gulir di seluler/desktop?
  26. Bisakah pengguna mengetuk tempat yang sama untuk membuka/menutup filter?

Membungkus

Terlalu sering pengalaman pemfilteran di web rusak dan membuat frustrasi, sehingga menyulitkan pelanggan untuk mendapatkan rentang hasil relevan yang nyaman dan mengilap itu. Saat merancang filter berikutnya, lihat beberapa masalah umum yang mungkin ingin Anda hindari, dan semoga terhindar dari semua frustrasi yang berasal dari filter yang rusak, beku, dan tidak dapat diakses.

  • Desain untuk berbagai pilihan yang nyaman dan untuk kasus ketika pelanggan ingin menambahkan beberapa filter dengan cepat — satu demi satu.
  • Untuk grup filter yang panjang, hindari panel kecil yang dapat digulir dan tampilkan sebanyak 7–10 opsi sekaligus dengan akordeon yang akan meluas dan menampilkan semua opsi saat ketuk/klik. Tambahkan pelengkapan otomatis pencarian dan tampilan abjad juga.
  • Selalu tambahkan stepper (+/-) dan bidang input teks saat menggunakan bilah geser,
  • Pelanggan sering ingin mengatur sejumlah filter dari jenis yang sama. Jangan pernah menggulir pengguna secara otomatis pada satu input dan tidak pernah menciutkan sekelompok filter secara otomatis.
  • Jangan pernah membekukan UI pada satu input , dan jangan pernah membuat pelanggan Anda menunggu antarmuka untuk merespons kembali saat menyetel filter.
  • Selalu perbarui filter dan tampilkan hasil secara asinkron , sehingga pada setiap masukan filter, hasil yang cocok dapat diperbarui secara asinkron, sedangkan filter selalu tetap dapat diakses dan di tempat yang sama.
  • Selalu hindari perubahan tata letak pada input filter dan pertimbangkan untuk menampilkan filter di atas hasil.
  • Di ponsel, tombol "Terapkan" bisa lengket di bagian bawah layar. Perbarui jumlah produk dan tunjukkan pada tombol.

Artikel Terkait

Jika Anda merasa artikel ini bermanfaat, berikut adalah ikhtisar artikel serupa yang telah kami terbitkan selama bertahun-tahun — dan beberapa artikel lainnya akan segera hadir.

July 14, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *