How to design a good search, sort, and filter in mobile application.

Search

Hampir semua aplikasi memiliki search bar karna search bar ini memudahkan user untuk mencari sesuatu yang diinginkan oleh user, jadi baiknya kita mengerti cara mendesign search bar yang baik.

Mendesign search bar terlihat mudah tapi tidak bisa sembarangan mendesign karna serach bar harus sesuai dengan aplikasi. Seperti aplikasi Google Chrome, tujuan pertama user membuka aplikasi ini adalah mencari suatu informasi jadi design search bar yang tepat adalah search bar nya harus terlihat jelas atau bisa dibilang full width bar. Berikut merupakan tipe-tipe design search bar yang baik.

1. Full-width bar at the top of the app.
   Tipe search bar ini digunakan untuk aplikasi yang ketika user membuka aplikasi ini tujuannya untuk melakukan pencarian/search.

2. A tab in the bottom-aligned navigation bar.
   Tipe search bar ini digunakan untuk aplikasi yang memanfaatkan search bar sebagai peningkatan primary experience dalam menggunakan main features.

Sebagai contoh aplikasi Instagram, Instagram merupakan aplikasi merupakan social media dengan infinity content, jadi user akan mendapatkan content terus menerus dan fitur search ini digunakan untuk mencari teman atau orang-orang yang ingin dicari.

Jadi sebelum membuat search bar harus mengetahui terlebih dahulu kegunaan search bar  dalam aplikasi, apakah aplikasi ini search bar digunakan untuk membantu main features atau digunakan sebagai main features. Dan berikut merupakan tampilan search yang baik:

1. Simple, Untuk mendesign serach bar yang baik harus terlihat simple, agar user mudah untuk menemukan search bar tersebut.
2. Hint text, agar mempermudah user, search bar bisa diberi hint text seperti aplikasi booking hotel memiliki tujuan mencari penginapan. Jadi dalam search barnya bisa tampilak hint text untuk memastikan kepada user apa yang bisa dicari dalam search bar ini.
3. Suggestion, dalam search bar ini bisa ditambahkan suggestion untuk memberi saran kepada user.
4. History atau Recent, menampilkan history atau recent dalam search bar akan mempermudah user ingat apa yang dicari sebelumnya atau apa yang biasanya dicari oleh user.
5. Autocomplete, memberi autocomplete akan memudahkan user untuk mencari. User tidak harus mengetik dengan lengkap, ketika autocomplete ini sesuai apa yang ingin dicari, user bisa langsung menekan pencarian tersebut.

SORT 

Dalam sorting memiliki 2 jenis sorting yang baik, yaitu onscreen sort dan sort selector.

1. Onscreen Sort
   Sort jenis ini meruapakan sort yang ada pada layar dan hanya menekan jenis sorting yang dipilih sebagai contoh aplikasi booking hotel, pada saat kita ingin mencari hotel dibogor, dibagian atas atau bawah layar akan nampilkan soritng yang ada seperti ‘populer’ yang akan menampikan hotel popular di bogor.
   
2. Sort Selector
   Sort jenis ini merupakan jenis sort yang memiliki pilihan sort lebih banyak dan sort ini tidak langsung ditampikan pada screen tetapi harus menekan icon terlebih dahulu seperti gambar dibawah, kemudian akan muncul pilihan sorting.
   

Filter :

Kumpulan data yang berjumlah banyak memerlukan filter untuk mempermudah user dalam pencarian. Filter biasanya merupakan kumpulan kategori-kategori data yang digunakan untuk mencari data yang lebih spesifik. Biasanya dalam aplikasi film seperti Netflix memiliki fitur filter didalamnya, user bisa memfilter film yang dicari seperti action, drama, 2019. Dalam fitur filter ini harus memiliki pilihan-pilihan yang jelas agar memudahkan user dalam pencarian. Ada beberapa jenis filter :

1. Onscreen Filter
   Onscreen Filter ini memiliki kesamaan dengan Onscreen Sort. Tapi bedanya filter dalam layar ditampilkan dengan hasil atau daftar object sedangakn sort ini mengurutkan.

2. Filter Drawer
   Merupakan filter yang cara menampilkannya menyerupai laci yang ditarik. Filter ini muncul tapi tidak menutupi satu layar penuh. Sebagai contoh filter pada aplikasi booking hotel. Pada gambar dibawah ini bisa memfilter jenis harga, jarak dan bintang atau kemewahan hotel.

Ini merupakan beberapa jenis filter. Fitur filter ini bisa ditempatkan dimana saja sesuai dengan kreativitas asalkan fitur ini memiliki tampilan yang simple agar dimengerti oleh user.