Dari berbagai sumber di internet, kita sudah belajar banyak cara untuk meningkatkan UX website. Mulai dari membuat navigasi yang jelas, loading cepat sampai ke tampilan website yang enak di mata.
Tapi, dari segala cara ini, ada satu hal kecil yang ngaruh banget untuk meningkatkan UX website. Yup, yaitu dengan menambahkan micro interaction pada UI website.
Mungkin sebagian dari Anda kurang familiar nih dengan istilah ini. Tapi, sadar nggak sadar, sebetulnya kita semua sudah pernah merasakan micro interaction di UI website atau aplikasi, lho.
Nah, supaya Anda lebih paham dan bisa menerapkan micro interaction di UI website untuk meningkatkan UX, kami sudah siapkan pembahasannya nih.
Kalau begitu, simak hingga tuntas pembahasan berikut ini, ya!
Memahami Micro Interaction UI
Apakah Anda sering atau mungkin pernah meeting melalui Google Meet? Kalau iya, pasti Anda sudah familiar nih dengan fitur reactions di Google Meet.
Saat kita klik salah satunya berkali-kali, reaction tersebut akan muncul di layar device kita. Menariknya, ketika kita klik reaction party popper berkali-kali, seketika party popper tersebut akan meledak dan menebarkan confetti di seluruh layar.
Nah, ini lah salah satu micro interaction UI yang – mungkin – sering Anda lihat sehari-hari. Sesuai namanya, micro interaction merupakan unsur detail kecil dalam UI dengan satu fungsi tertentu.
Apa fungsi dari micro interaction ini? Tentunya untuk mengajak pengguna atau pengunjung berinteraksi dengan UI website.
Ketika pengunjung berinteraksi, micro interaction pun akan memberikan feedback atau respon dari tindakan tersebut sebagai bentuk informasi.
Feedback-nya dalam bentuk apa? Yang pasti beragam, tergantung pada interaksi yang dilakukan. Tapi, yang paling sering memang dalam bentuk visual seperti animasi.
Contohnya ya seperti fitur reactions di Google Meet tersebut di mana emoji reaction akan muncul di layar sebagai respon atau feedback dari klik.
Contoh lainnya yang paling mudah adalah saat Anda me-refresh aplikasi di smartphone. Ketika layar ditarik ke bawah, akan muncul animasi loading yang beragam.
Apakah Micro Interaction UI Sangat Penting?
Jika dibilang penting atau tidak, jawabannya tentu penting. Karena dengan menambahkan micro interaction pada UI website, Anda bisa meningkatkan UX jadi lebih baik.
Tapi, apakah micro interaction ini harus dan berdampak buruk kalau tidak ada? Jawabannya tentu tidak, meski Anda tidak menambahkan micro interaction pada UI website ini tidak jadi masalah, kok.
Namun, kembali lagi, menambahkan micro interaction pada UI website dapat meningkatkan user experience para pengunjung.
Dengan memberikan fitur current system status saat proses upload atau publish, pengunjung jadi tahu apakah file yang mereka upload berhasil atau tidak.
Atau dengan memberikan micro interaction pada UI saat password input, bisa membuat pengunjung tahu apakah password yang mereka buat sudah kuat atau belum.
Yang mana, semua ini bisa membuat pengunjung memberikan penilaian yang baik terhadap brand Anda terkait pengalaman mereka dengan semua micro interaction dalam website.
Baca juga: Ini Pentingnya User Experience dalam Web Design, Jangan Skip!
Unsur dalam Micro Interaction
Meskipun micro interaction tampaknya hanya sekadar unsur kecil dalam UI website, tetap saja tidak bisa dibuat secara sembarangan.
Anda tidak bisa hanya menambahkan animasi tanpa ada fungsi atau tujuan tertentu. Nah, ada 4 unsur nih di dalam micro interaction yang harus Anda perhatikan.
1. Triggers
Fungsi utama dari micro interaction adalah untuk mengajak pengunjung atau pengguna berinteraksi dengan UI website Anda.
Nah, supaya pengunjung mau berinteraksi, dibutuhkan triggers atau unsur pemicu di dalam UI website Anda.
Pemicunya ini dalam bentuk apa? Seperti yang sudah dicontohkan sebelumnya, Anda bisa membuat trigger ini dalam bentuk tombol, scroll dan sebagainya.
2. Rules
Setelah ada triggers yang diberikan di UI website Anda, unsur selanjutnya dalam micro interaction adalah rules.
Rules ini merupakan action apa yang harus dilakukan oleh website atau aplikasi saat pengunjung klik triggers.
Misalnya animasi saat loading, pada button dan sebagainya. Yang pasti, sesuaikan dengan jenis triggers yang ingin Anda berikan.
3. Feedback
Sebelumnya sudah ditentukan nih rules apa yang diinginkan dari triggers yang terjadi. Baru di tahap inilah, Anda memberikan feedback atau respon dari triggers tersebut.
Di sini, Anda menunjukkan pada pengunjung apa yang terjadi ketika mereka klik, refresh maupun scroll halaman website Anda.
4. Loops and Modes
Unsur terakhir yang ada di dalam micro interaction adalah loops and modes. Nah, unsur yang satu ini menentukan rules baru nih dari fitur micro interaction yang Anda buat.
Rules baru ini dibuat untuk keadaan jika kondisinya berubah. Misalnya nih kalau di Instagram, loops and modes ini bisa Anda lihat saat Anda me-refresh halaman.
Saat Anda me-refresh halaman beberapa kali dalam satu waktu, Instagram akan memberikan pesan bahwa belum ada update terbaru lagi nih dalam beberapa menit tersebut.
Nah, inilah yang dinamakan loops and modes. Rules dan feedback-nya berubah karena keadaannya pun yang juga berubah.
Cara Menambahkan Micro Interaction pada UI Website
Dalam pembahasan di atas soal unsur, Anda sudah tahu nih bahwa micro interaction tidak bisa dibuat secara asal-asalan.
Anda tidak bisa menambahkan micro interaction hanya karena supaya UI website lebih menarik. Micro interaction harus memiliki tujuan yang jelas supaya ini bisa meningkatkan user experience para pengunjung.
Nah, ada beberapa cara nih yang bisa Anda lakukan untuk membuat micro interaction yang tepat pada UI website.
1. Analisis Kebutuhan User
Cara pertama yang harus Anda lakukan untuk membuat micro interaction yang berdampak baik pada micro interaction adalah menganalisa kebutuhan dari para user.
Cobalah lihat apa yang menjadi kesulitan user saat menjelajahi atau menggunakan website Anda. Misalnya user kesulitan saat membuat password karena tidak tahu apakah sudah tepat atau belum.
Nah, jika Anda sudah menemukan kesulitan user, Anda bisa membuat list fitur apa saja yang bisa memudahkan supaya experience-nya semakin baik di website Anda.
2. Membuat Animasi yang Fungsional
Jika Anda sudah menemukan apa yang menjadi kesulitan user dan fitur solusinya, sekarang saatnya Anda membuat micro interaction yang fungsional.
Anda bisa membuatnya dalam bentuk animasi, swipe, data input, current system status dan sebagainya. Tentunya jangan lupa untuk menyesuaikan dengan kebutuhan user, ya.
Untuk membuat animasi ini, pastikan pula sudah memasukkan keempat unsur micro interaction yang ada.
3. Buatlah Micro Interaction yang Fun
Salah satu hal yang harus Anda perhatikan saat membuat fitur micro interaction pada UI website adalah experience yang enjoy.
Artinya, fitur micro interaction yang Anda buat haruslah memberikan pengalaman yang menyenangkan nih bagi user.
4. Gunakan Bahasa Manusia
Nah, ini nih yang sering dilupakan oleh para web developer, yaitu untuk menggunakan bahasa manusia dalam tiap teks yang ada di website.
Ini penting supaya user paham dengan apa yang terjadi atau apa yang harus mereka lakukan di website Anda.
Misalnya dalam pesan error. Alih-alih menggunakan bahasa teknis yang sulit dipahami, Anda bisa menggunakan bahasa percakapan sehari-hari.
Contohnya seperti “Yah, halaman yang kamu cari nggak ada nih! Coba refresh atau kembali ke halaman utama, ya.”.
Baca juga: 7 Tips UX Writing untuk Website, Wajib Tahu Supaya UX Makin Efektif!
Sudah Ada Micro Interaction Ui di Website Belum?
Micro interaction memang bukan fitur yang wajib ada di UI website. Tapi, peranannya cukup penting nih untuk meningkatkan user experience website Anda.
Ada berbagai bentuk micro interaction yang bisa Anda gunakan di UI website, kok. Mulai dari animasi, swipe, animasi loading dan sebagainya.
Nah, untuk Anda yang juga ingin meningkatkan user experience website, Anda bisa nih membuat micro interaction di semua bagian website.
Tidak perlu khawatir kalau Anda tidak bisa membuatnya sendiri. Tim Bikin.Website bisa membantu Anda untuk mewujudkannya, kok!
Hubungi Tim Bikin.Website Di Sini!
Kalau begitu, semoga artikel kali ini bisa membantu Anda ya untuk semakin meningkatkan user experience website. Jangan lupa share hasil dari micro interaction website Anda di kolom komentar, ya!
