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 semua 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 pendaftar catatan publik.

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 beberapa 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 bahwa 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 opsinya, semakin nyaman kita merasa dengan serangkaian opsi yang sedikit lebih besar.

Pertanyaan terakhirnya, 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 ketergantungan 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 terus berulang. 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. Saat mereka melakukannya 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 . Tapi kemudian mereka tidak boleh diaktifkan dengan menggulir melalui 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 kita alami ketika menaikkan harga sedikit, dari $200 menjadi $215, atau menambah satu jam lagi selama penerbangan. Melakukannya dengan slider itu sulit karena membutuhkan ketelitian yang luar biasa, dan itu selalu menghasilkan kesalahan dan menyebabkan 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 ingin 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.

Jangan Pernah Menggulir Otomatis Pengguna Pada Satu Masukan

Anda pernah ke sana sebelumnya. Mungkin karena terburu-buru, Anda pergi ke toko ritel, mengeklik semua tautan kategori yang tepat, menggesek ke kiri dan kanan melalui sub-navigasi, dan melihat ke dalam satu laptop baru yang mengilap yang kini akhirnya siap Anda gunakan. Apa yang menanti Anda selanjutnya mungkin bukan pengalaman yang Anda harapkan untuk memanjakan diri Anda. Lihatlah contoh di bawah ini. Dapatkah Anda melihat apa yang tampaknya terjadi?

Dalam contoh dari Dell.com ini, saat Anda memilih fitur laptop, hanya satu input yang didaftarkan pada satu waktu. Jika Anda memilih beberapa opsi dengan cepat, hanya input terakhir yang akan diterapkan. Dan saat input didaftarkan, halaman disegarkan, melompati pelanggan hingga ke bagian atas bilah samping pemfilteran. Artinya, semakin banyak filter yang ingin Anda gunakan — dan biasanya bernavigasi dari atas ke bawah — semakin banyak Anda harus terus menggulir ke bawah untuk menemukan filter yang tepat.

Alasan mengapa penerapan ini sangat umum bukan karena kami ingin menggulir otomatis pelanggan ke bagian atas area filter , melainkan karena kami ingin mengarahkan mereka ke bagian atas hasil produk dengan filter yang diterapkan. Terjebak di suatu tempat di tengah daftar tidak akan terlalu berguna setelah Anda menerapkan filter baru. Dan memang, lebih baik untuk menampilkan hasil teratas dengan setiap pembaruan filter, tetapi itu tidak berarti bahwa kita juga perlu menggulir filter secara otomatis.

Faktanya, bahkan jika Anda ingin menentukan hanya 6–10 fitur dengan cara ini, Anda harus memulai pertarungan gulir yang cukup keras melawan gulir otomatis , dengan hanya satu filter terdaftar pada satu waktu. Dimungkinkan untuk mengetuk atau mengklik beberapa filter sekaligus, tetapi dalam kasus ini sayangnya UI tidak akan merespons seperti yang diharapkan. Pengalaman keseluruhan cukup membuat frustrasi dan membingungkan, juga karena situs web terasa lambat, dan selalu membutuhkan lebih banyak upaya untuk terus memfilter. Bukan contoh terbaik untuk meminimalkan waktu dari status default ke status akhir.

Salah satu cara untuk mengatasi masalah ini adalah dengan menghapus gulir otomatis untuk filter sekaligus dan menemukan cara yang lebih baik untuk menunjukkan bahwa hanya satu masukan yang dapat dibuat dalam satu waktu. Misalnya, kita dapat membekukan seluruh antarmuka dan dengan demikian menonaktifkan input apa pun hingga data baru kembali dari server. Kemudian kita harus menunggu hasil baru untuk disuntikkan ke DOM, dan baru kemudian UI kembali. Meskipun sedikit lebih jelas dari solusi sebelumnya, ternyata memiliki masalah sendiri.

Jangan Pernah Membekukan UI Pada Satu Masukan

Setiap kali kami membekukan UI pada satu input, kami secara aktif memperlambat pelanggan kami dalam mengekspresikan niat mereka. Kami sebenarnya membuatnya sedikit lebih rumit bagi mereka untuk menentukan apa yang mereka minati, memprioritaskan tampilan hasil daripada input. Itu tampaknya menjadi prioritas yang salah. Mari kita lihat contoh di bawah ini.

Di Sears.com, setiap kali pemilihan dibuat, UI tidak hanya diblokir sepenuhnya; pengguna juga didorong ke bagian atas halaman. Itu sangat membuat frustrasi untuk filter yang menyertakan akordeon ("lihat lebih banyak" tautan di "Merek", misalnya). Dengan setiap filter baru, pengguna harus menggulir ke bawah dan membuka akordeon untuk menemukan atribut tertentu yang ingin mereka pilih. Walmart (lihat contoh di bawah) mengikuti pola yang sama.

Dalam kasus ini, kita perlu mengandalkan JavaScript untuk beralih antara status beku dan bekerja dengan andal, bahkan jika data belum kembali dari server, atau jika kembali lambat, atau jika formatnya buruk. Itu asumsi yang cukup rapuh untuk diandalkan.

Sekarang, tentu saja kami tidak tahu kapan pengguna selesai dengan masukan mereka, tetapi masuk akal untuk memastikan bahwa selama seluruh interaksi dengan filter, pelanggan tidak perlu menunggu antarmuka untuk merespons kembali . Sekarang, jika kita melihat lebih dekat pada tiga contoh di atas, kita akan melihat satu kesamaan. Semuanya secara otomatis menerapkan setiap filter saat dipilih, menonaktifkan pilihan lebih lanjut hingga halaman hasil baru kembali.

Namun, sangat umum bagi pelanggan untuk menambahkan beberapa filter dengan cepat , terkadang dalam kategori yang sama. Perilaku UI tidak mendukung maksud ini dengan baik.

Jadi, apakah kita punya alternatif? Alternatif yang jelas adalah menyerahkan keputusan kepada pengguna tentang kapan hasilnya harus diperbarui. Itu bisa berarti menambahkan tombol "Terapkan" dan mendorong pelanggan untuk memilih semua filter terlebih dahulu sebelum melihat hasil apa pun . Tapi itu belum tentu satu-satunya pilihan. Sebenarnya, ternyata, kita dapat melakukan keduanya: melihat hasil terbaru saat berinteraksi dengan filter tanpa penundaan. Kita hanya perlu berpindah dari tampilan hasil sinkron ke tampilan asinkronnya.

Selalu Tampilkan Hasil Secara Asinkron

Kami telah menyebutkan bahwa filter dan hasil pencocokan seringkali agak sinkron. Namun, kami dapat membagi bagian UI dan merender keduanya secara terpisah, secara asinkron. Dalam hal ini, pada setiap masukan filter, hasil pencocokan dapat diperbarui secara asinkron, sedangkan filter selalu dapat diakses dan di tempat yang sama. Dengan setiap input filter baru, pengguna akan melihat kilasan konten baru yang mengalir.

Contoh BestBuy di atas menunjukkan pola itu beraksi. Saat kami memilih filter di bilah sisi kiri, filter tersebut diterapkan di latar belakang sementara kami dapat terus memilih lebih banyak filter jika kami memilih untuk melakukannya. Daftar produk diperbarui secara asinkron: tidak pernah ada status nonaktif karena konten baru dimasukkan ke dalam daftar hasil yang cocok setiap kali data kembali dari server.

Kita bisa membuatnya sedikit lebih jelas dengan menunjukkan bahwa produk baru sedang dimuat saat filter baru diterapkan. Contoh bagusnya adalah Coolblue, dengan UI penyaringan bilah sisi asinkron muncul di sisi kiri.

Perlu ditekankan pada titik ini bahwa setiap input di area filter perlu didaftarkan, dan kemudian diterapkan ke daftar produk. Kami telah memperhatikan bahwa bagi banyak pelanggan itu adalah perilaku yang diharapkan, kecuali jika Anda menyimpan tombol "Terapkan" mengambang di dekat area filter.

Hindari Pergeseran Tata Letak Pada Input Filter

Selama antarmuka tidak memblokir input, tentu saja pelanggan berharap mereka dapat mengatur sejumlah filter satu demi satu. Namun, bergantung pada lokasi filter, terkadang filter mungkin mengalami pergeseran tata letak yang tidak disengaja , sehingga mereka harus menyesuaikan diri pada halaman lagi, menggulir ke atas dan ke bawah untuk menemukan di mana mereka tinggalkan, lalu melanjutkan dengan masukan berikutnya. Lihatlah contoh di bawah ini. Apa yang tampaknya menjadi masalah di VictoriaPlum (ditampilkan di bawah)?

Setiap kali pengguna berinteraksi dengan filter, begitu item produk baru masuk, ada sedikit perubahan yang terjadi di area filter. Biasanya ada tiga alasan mengapa hal itu terjadi:

• pada setiap input filter, bagian filter yang telah diperluas oleh pelanggan otomatis runtuh,
• filter yang tersedia sebelumnya menjadi tidak tersedia, dan mereka menjadi tersembunyi, mengurangi ketinggian area penyaringan,
• ikhtisar filter yang diterapkan terletak di atas area filter, sehingga semakin besar ukurannya dengan setiap filter baru, filter juga akan turun.

Untuk menghindari masalah pertama, kita perlu mempertahankan status akordeon dan tetap membukanya, bahkan jika pengguna telah menyetel filter baru atau menyegarkan halaman. Kita juga perlu menjaga pengaturan filtering saat refresh, atau navigasi. Faktanya, kami melihat pelanggan mengharapkan filter tetap diterapkan meskipun mereka kembali ke kategori atau halaman sebelumnya (misalnya dengan tombol “Kembali”).

Untuk masalah kedua, jika filter tidak tersedia lagi, daripada menyembunyikannya secara otomatis, kami dapat menonaktifkannya, tetapi juga menjelaskan mengapa filter dinonaktifkan (petunjuk ramah mungkin membantu) dan apa yang perlu dilakukan untuk mengaktifkannya kembali . Kami kemudian juga dapat menambahkan opsi ke "Sembunyikan semua opsi yang tidak tersedia".

Terakhir, kita mungkin ingin mempertimbangkan kembali posisi filter yang diterapkan di atas area filter. Sebenarnya tidak banyak pilihan di mana mereka bisa tinggal, dan pilihan yang lebih baik tampaknya adalah area di atas hasil penyaringan.

Tampilkan Filter Di Atas Hasil

Untuk menghindari pergeseran tata letak sama sekali, kami dapat menampilkan filter yang diterapkan di atas hasil produk . Itu akan menjaga area pemfilteran stabil dan dapat diprediksi selama seluruh interaksi pengguna. Sebenarnya, itu tidak harus selalu terlihat. Crate & Barrel, pada contoh di bawah, memungkinkan pelanggan untuk menyembunyikan dan menampilkan filter sesuai permintaan, sementara filter yang diterapkan ditambahkan ke area khusus di atas produk. Perhatikan bahwa opsi untuk menghapus semua filter juga tersedia. (Halaman produk telah berubah sejak video direkam.)

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 tetap dapat diakses setiap saat.

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. Di Asos, setiap input filter menyebabkan lompatan ke bagian atas halaman, sehingga pelanggan harus menggulir ke bawah secara manual untuk melanjutkan penyaringan. Daripada merender ulang seluruh halaman, akan lebih masuk akal untuk merender ulang area filter dan daftar produk secara terpisah.

Namun secara umum, dua opsi pertama (Crate & Barrel dan Adidas) tampaknya bekerja dengan sangat baik, dan mereka memberikan lebih banyak ruang untuk produk yang akan ditampilkan, sambil menghindari semua masalah yang telah kita bahas sebelumnya. Itu pola yang cukup andal untuk digunakan ketika kita ingin menghindari penghalang jalan atau kebingungan. Tapi kita masih bisa melakukan lebih banyak lagi, misalnya dengan tombol "terapkan" yang bagus.

Tunjukkan Jumlah Hasil Pada Tombol "Terapkan"

Hampir terasa agak kuno memiliki tombol "Terapkan" untuk filter di saat kita terbiasa dengan interaksi yang mulus dan mulus, fade-in, dan animasi berwaktu. Namun, jika kita ingin mengarahkan pelanggan ke kisaran yang nyaman, hampir tidak ada cara yang lebih baik untuk melakukannya selain menampilkan jumlah hasil sesegera mungkin .

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 menampilkan nomor itu 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 lapisan 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 menghindari kehilangan detail 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 kami menggunakan ikon untuk menjelaskan perbedaan antara berbagai filter?
16. Apakah kita menggunakan elemen yang tepat untuk filter, misalnya penggeser, tombol, sakelar?
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 implementasi yang rusak dan tidak dapat diakses.

• Desain untuk berbagai pilihan yang nyaman , 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 Seri

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.

• Akordeon Sempurna
• Konfigurator Responsif Sempurna
• Pemetik Ulang Tahun yang Sempurna
• Pemilih Tanggal dan Waktu yang Sempurna
• Mega-Dropdown Sempurna
• Perbandingan Fitur Sempurna
• Penggeser Sempurna
• Buku Pola Desain Formulir oleh Adam Silver, diterbitkan di SmashingMag
• Berlangganan buletin email kami agar tidak ketinggalan buletin berikutnya.