Anatomi
Jenis dan variasi
States
Terdapat 5 states untuk Search, yaitu Default, Hovered, Focused, Filled dan Error. Berikut contoh gambar dan penjelasannya:
Search Bar
Search Icon
Behaviors
Pindah ke halaman lain
Pengguna pindah ke satu halaman khusus pencarian saat mereka mengklik kotak Search (mode fokus) atau saat mengetik kata pencarian (typing). Kami merekomendasikan behavior ini jika ada kebutuhan untuk menambahkan informasi pendukung terkait pencarian seperti riwayat, rekomendasi, dan lain-lain.
Berada di halaman yang sama
Pencarian tetap berada di halaman yang sama. Behavior ini kami rekomendasikan jika ingin menampilkan hasil pencarian secara instan ketika pengguna masih dalam mode fokus atau mulai mengetik.
Panduan penggunaan
Search memudahkan pengguna mencari dan menemukan informasi lewat memasukkan kata atau kalimat kunci yang relevan.
Penempatan
Search berada di tengah dan biasanya di bagian atas layar.
Penggunaan error
Disarankan
Helper text hanya digunakan untuk error yang disebabkan oleh pengguna seperti kata kunci pencarian belum diketik.
Dihindari
Helper text tidak digunakan untuk memberikan informasi pencarian tidak ada hasil.
Untuk kasus "Tidak ada hasil" bisa menggunakan komponen seperti ini:
Panduan penulisan
Untuk mencapai penulisan pada fitur Search yang jelas, ringkas, dan lugas:
Gunakan kata kerja aktif/call to action
Tulis instruksi atau petunjuk penggunaan yang spesifik dengan kata kerja aktif, yang sesuai dengan kegiatan yang pengguna lakukan. Misalnya kata “Cari” atau “Ketik”.
Lengkapi kalimat dengan objek atau tipe informasi
Jelaskan fungsi atau hasil dari fitur tersebut ke pengguna.
Di fitur ini kami menggunakan kata “Cari” untuk menekankan fungsi fitur, dan “modul ajar”, “aksi nyata”, dan lain-lain untuk menjelaskan jenis informasi yang bisa dicari beserta cakupannya.