Bidang pencarian adalah bagian utilitarian dari situs web rata-rata Anda. Tapi itu tidak berarti itu harus diabaikan. Di sisi lain.
Pencarian memberi pengguna cara mudah untuk menemukan apa yang mereka cari dan dapat sangat berharga di situs dengan banyak konten. Jadi, perlu luangkan waktu ekstra untuk memastikan area pencarian Anda menarik, luar biasa, dan mudah digunakan.
Dengan mengingat hal itu, berikut adalah kumpulan cuplikan yang membawa bidang pencarian sederhana ke tingkat berikutnya. Mulai dari peningkatan CSS estetika sederhana hingga UI dengan JS yang membantu menciptakan pengalaman yang lebih mendalam.
Ikon morphing
Animasi transformasi selalu menyenangkan. Di sini kita memiliki ikon kaca pembesar di mana-mana yang, ketika diklik, berubah menjadi bilah pencarian lengkap. Mengklik “X” mengembalikan semuanya ke titik awal. Ini bisa menjadi solusi yang baik untuk layar yang lebih kecil karena Anda dapat dengan mudah menyimpan bidang saat tidak digunakan.
Cukup arahkan mouse dan cari
Contoh ini menawarkan fungsionalitas yang mirip dengan yang sebelumnya, tetapi dengan satu perbedaan penting. Daripada harus mengklik untuk mengungkapkan bidang pencarian, pengguna hanya perlu mengarahkan kursor ke ikon. Ini mungkin hal yang relatif kecil, tetapi bisa memberikan dorongan ketika datang ke kegunaan. Sekali lagi, opsi yang berpotensi solid untuk ruang sempit.
Penggulung juga perlu mencari
Di perangkat seluler, pengguna dapat melakukan banyak perjalanan. Tetapi jika mereka tidak dapat menemukan apa yang mereka cari, itu seringkali berarti mereka harus kembali ke header situs untuk melakukan pencarian. Di sini kita memiliki bilah pencarian “lengket” yang akan dilampirkan di bagian atas layar saat Anda menggulir ke bawah halaman. Fitur praktis ini dapat membuat hidup lebih mudah bagi pengguna.
Layar penuh bahan
Desain material Google banyak digunakan akhir-akhir ini. Karena itu, wajar jika bahasa desain juga berlaku untuk pencarian. Sangat menyenangkan bahwa, sekali diklik, bidang pencarian ini memakan seluruh layar. Ini memungkinkan pengguna untuk fokus hanya pada pencarian mereka, dan dengan sedikit kerja, desainer dapat menambahkan informasi terkait lainnya ke layar.
Pencarian Kustom Sederhana
Mungkin ada saat-saat ketika pengguna ingin mencari hanya area tertentu di situs Anda. Meskipun pencarian khusus bukanlah konsep yang baru, pencarian kustom tidak selalu merupakan proses yang menarik secara visual. Itulah yang membuat demo bidang pencarian kustom ini sangat bergaya. Ini memiliki serangkaian ikon, yang masing-masing mewakili area yang berbeda di mana pencarian dapat dilakukan (tips alat lebih berguna). Pengguna cukup mengklik pada area yang ingin mereka cari, mudah!
Animasi konteks
Menyediakan konteks visual selama pencarian membantu memastikan pengguna berada di jalur yang benar. Cuplikan ini menggunakan AJAX untuk mengubah warna latar belakang dan menambahkan informasi tekstual saat pengguna mencari.
Transparansi
Bagaimana Anda membuat area pencarian yang menonjol tanpa menonjol seperti jempol yang sakit? Menggunakan transparansi adalah salah satu cara untuk melakukannya. Di sini kami memiliki bidang pencarian transparan di bagian atas gambar layar penuh. Namun, batas putih kuat, dan itu menciptakan efek visual yang bagus tanpa menyalip halaman.
Pencarian berganda
Untuk situs yang memungkinkan pengguna mencari lebih dari satu dataset, contoh ini bisa sangat berguna. Manfaatkan jQuery untuk memungkinkan pengguna untuk beralih di antara bidang pencarian yang berbeda, sehingga menempatkan semua fungsi pencarian di satu tempat.
Akhirnya ternyata
Bidang pencarian dapat memainkan peran penting dalam menjaga pengguna di situs web Anda. Dan contoh di atas adalah bukti bahwa Anda dapat memberikan beberapa perbaikan yang bermanfaat tanpa banyak usaha ekstra. Jadi, jika Anda lalai untuk memperhatikan dengan cermat tampilan dan nuansa fungsi pencarian situs Anda, ini akan memberi Anda tempat yang bagus untuk memulai.
