Kalau dilihat, micro interaction memang jadi unsur kecil dalam keseluruhan UI website maupun aplikasi.
Namun, seperti yang Anda ketahui nih, dampaknya cukup baik untuk meningkatkan user experience para pengunjung.
Dengan adanya informasi status sistem terkini, animasi pada tombol atau saat loading, website jadi tampil lebih menarik dan dinamis.
Meski ini hanya unsur sederhana, tetap butuh riset dan pertimbangan untuk membuatnya. Jangan sampai ini malah jadi fitur tambahan tidak berguna di website Anda.
Nah, untuk membantu Anda membuat fitur micro interaction yang tepat, kami akan membagikan beberapa contoh website yang bisa Anda jadikan inspirasi.
Contoh Website Micro Interaction
Sebelumnya, sudah sempat disinggung nih soal beberapa bentuk micro interaction. Seperti animasi saat loading, tombol dan contoh micro interaction di website lainnya yang sudah disebutkan.
Tapi, sebetulnya bentuk micro interaction di website sendiri tidak hanya terbatas pada contoh tersebut. Nah, dalam contoh yang akan kami bagikan ini, Anda bisa temukan beragam bentuk micro interaction yang juga bisa Anda aplikasikan pada website.
1. WWF (World Wildlife Fund)
Siapa sih yang tidak mengenal WWF? Ini adalah salah satu organisasi non-government tingkat dunia yang cukup populer.
Seperti yang Anda ketahui nih, WWF merupakan organisasi dunia yang bergerak di pelestarian lingkungan hidup.
Misinya pun berada di berbagai negara lho, termasuk Indonesia. Nah, untuk menjalankan misinya ini, WWF menggunakan website sebagai sarana publikasi mereka.
Yang mana, desain website dari organisasi dunia yang satu ini sangat interaktif. Anda bisa temukan berbagai unsur micro interaction dalam UI website WWF.
Dari yang paling sederhana saja, mereka menggunakan hover warna yang gelap pada tiap tombol CTA-nya.
Tidak hanya itu, saat Anda mengarahkan kursor ke menu, Anda akan langsung melihat semua sub menu yang ada.
Menariknya, WWF juga memberikan sentuhan micro interaction saat para pengunjung scroll halaman ke bawah, lho.
Alih-alih konten yang langsung muncul, web developer dari WWF membuat tiap kontennya muncul satu per satu ketika halaman di-scroll.
Sangat menarik, bukan? Anda bisa nih menjadikan WW sebagai contoh aplikasi fitur micro interaction untuk website NGO.
2. Anna Jona
Membuat website untuk bisnis memang tampaknya sangat mudah. Tapi, ini tidak berlaku sama nih untuk Anda yang menjalankan bisnis di bidang F&B.
Untuk mempromosikan restoran maupun kafe, Anda harus bisa membawa suasana nyatanya melalui website atau media sosial.
Nah, salah satu caranya adalah dengan membuat website yang interaktif dengan beberapa sentuhan micro interaction.
Anna Jona adalah salah satu contoh website bisnis untuk kafe, bar dan mini bioskop yang apik nih dalam mengaplikasikan micro interaction pada UI website mereka.
Alih-alih membuat website bisnis yang standar, Anna Jona mengajak Anda untuk mampir ke kafenya dengan cara yang unik.
Mulai dari saat Anda scroll halaman website, Anda akan melihat beberapa perubahan warna. Ditambah lagi dengan text color yang berubah tiap kata dari gelap ke terang.
Lalu, diakhiri dengan link reservasi yang juga menggunakan micro interaction yang unik, tapi berfungsi dengan baik. Sehingga, Anda bisa tahu nih link mana yang Anda klik nantinya.
3. Qwords
Apakah Anda memiliki bisnis yang bergerak di bidang IT? Membuat website bisnis di bidang IT memang tidak bisa se-interaktif Anna Jona atau WWF.
Tapi, ini bukan berarti tampilan website IT hanya boleh polos tanpa ada interaksi sama sekali di UI-nya. Anda bisa kok menambahkan unsur micro interaction di seluruh bagian website.
Nah, Qwords adalah salah satu website bisnis di bidang IT yang bisa Anda jadikan contoh penggunaan micro interaction yang menarik nih.
Kalau Anda mengakses website Qwords sendiri, unsur micro interaction pertama yang bisa Anda lihat adalah pada tombolnya. Saat Anda mengarahkan kursor ke tombol, Anda akan melihat perubahan pada warna background dan teksnya.
Selain itu, Anda juga bisa melihat animasi kado yang bergerak pada menu Promo seakan ingin menarik perhatian Anda untuk mengklaim promo yang berlangsung.
Tidak berhenti sampai di situ, konten dalam halaman website Qwords juga tampil satu per satu saat Anda scroll ke bawah.
Lihat kan, bagaimana website bisnis di bidang IT pun juga bisa tampil interaktif dengan unsur micro interaction di dalamnya?
4. IKEA
Jika beberapa contoh website di atas menggunakan unsur micro interaction yang hampir sama dan beberapa sedikit kompleks, IKEA punya menggunakan unsur yang berbeda.
Secara keseluruhan, IKEA memang memiliki tampilan yang standar. Tidak se-interaktif contoh website lainnya di atas.
Tapi, ada satu nih yang membuat website IKEA ini unik dan bisa menjadi contoh micro interaction yang oke. Yaitu saat Anda mem-block kata di dalam website.
Alih-alih menggunakan warna biru dengan tulisan putih atau hitam seperti pada umumnya, Anda akan melihat warna yang sama dengan logo IKEA.
Yup, IKEA memilih untuk menggunakan latar biru dengan teks kuning saat pengunjung mem-block teks tersebut. Unsur micro interaction yang seperti tidak seberapa ini malah semakin menguatkan ciri khas dari IKEA, lho.
Selain text block, tentu ada beragam micro interaction lainnya di dalam website IKEA yang bisa Anda jadikan contoh. Seperti efek gambar timbul atau teks yang muncul di sebelah icon diskon saat Anda mengarahkan kursor.
5. Wattpad
Biasanya, saat Anda membaca blog dan scrolling halaman ke bawah, fitur apa yang muncul? Bisa ditebak, hampir tidak ada.
Wajar saja karena memang kebanyakan blog tidak menggunakan fitur tertentu saat scroll halaman. Tapi, Wattpad sangatlah berbeda.
Wattpad memang bukan merupakan website bisnis. Tapi, unsur micro interaction yang dibuat oleh Wattpad dalam versi website ini bisa Anda jadikan contoh.
Kenapa? Karena Anda akan melihat line yang bergerak di bagian atas layar seiring dengan halaman yang di-scroll ke bawah.
Ini memberikan para pembaca tanda sudah seberapa jauh mereka membaca konten tersebut. Pembaca juga jadi bisa tahu nih berapa banyak lagi informasi atau konten yang tersisa.
Tidak hanya itu, lho. Bahkan, Wattpad pun juga memberikan informasi berapa menit sisa waktu yang dibutuhkan untuk membaca lewat fitur tersebut.
Ini merupakan salah satu contoh unsur micro interaction yang bisa Anda terapkan nih pada website blog.
Lewat fitur ini, pengunjung bisa tahu apakah konten ini masih panjang dan apakah ada bagian penting yang harus mereka baca lagi?
6. Hubspot
Selain Wattpad, ada pula Hubspot yang juga memiliki fitur micro interaction yang sama di blog-nya yang bisa Anda jadikan inspirasi.
Selain efek scroll, Anda juga bisa menemukan berbagai contoh micro interaction lainnya dalam UI website mereka.
Misalnya nih seperti efek memutar pada icon menu website Hubspot dalam tampilan mobile. Meski tampaknya sepele, efek ini sebetulnya bisa memberikan pengalaman yang berbeda lho pada pengunjung.
Tidak hanya micro interaction, Hubspot juga memiliki fitur web accessibility berupa High Contrast yang juga bisa Anda jadikan contoh, lho.
Sudah dapat Inspirasi Micro Interaction untuk Website?
Dari berbagai contoh website di atas, Anda bisa melihat nih berbagai bentuk micro interaction. Mulai dari animasi pada tombol, loading, scrolling, text block dan sebagainya.
Memang mengaplikasikan micro interaction seperti berbagai contoh website di atas bisa membuat tampilan website Anda juga menarik.
Tapi, Anda tidak harus membuat micro interaction yang sama, kok. Anda bisa sesuaikan saja dengan jenis website dan tentunya target audiens Anda.
Jangan sampai keinginan untuk membuat tampilan lebih menarik dengan micro interaction malah membuat website jadi lambat.
Kalau begini, yang ada user experience pengunjung jadi menurun. Untuk itu, supaya Anda tidak salah dan website makin maksimal, Anda bisa nih konsultasikan lebih dulu dengan tim Bikin.Website.
Anda bisa konsultasikan konsep website Anda dengan segala unsur micro interaction yang ada. Setelah itu, biarkan tim Bikin.Website memproses website Anda.
Hubungi Tim Bikin.Website Di Sini!
Nah, sampai di sini dulu ya artikel kami kali ini. Semoga Anda bisa mendapatkan inspirasi nih dari contoh yang kami berikan untuk membuat unsur micro interaction yang tepat di website Anda.
