Untuk Meningkatkan User Experience, Pahami Apa Itu Micro Interaction, Unsur, serta Contohnya
Isi Artikel
Saat belajar desain produk dan user experience, kamu mungkin pernah bertemu dengan istilah micro interaction atau interaksi mikro.
Sebenarnya, apa itu interaksi mikro, mengapa penting, dan bagaimana penerapannya dalam desain suatu produk?
Nah, Glints sudah merangkum informasinya dari Toptal, UX Collective, GeekyAnts, dan UX Planet, hanya untukmu.
Apa Itu Micro Interaction?
© Freepik.com
Kita akan mulai dulu dari definisi, apa itu interaksi mikro?
Micro interaction adalah unsur kecil dan detail dalam desain produk yang melibatkan pengguna dan satu fungsi spesifik.
Setelah pengguna berinteraksi dengan unsur kecil tersebut, produk akan memberi suatu tanggapan.
Tanggapan ini seringnya berupa animasi, tetapi juga bisa berupa hal lainnya seperti perubahan warna.
Tanggapan inilah yang menjadi nilai tambah untuk user experience. Pengguna merasa bahwa apa yang baru saja dilakukan benar-benar memiliki dampak.
Hal ini bisa terjadi karena dampak tadi terlihat melalui visualisasi berupa animasi atau hal lainnya.
Agar kamu tak semakin bingung, berikut ini contoh dari micro interaction:
© Wzyowl.com
Pada aplikasi di atas, apabila pengguna melakukan swipe ke atas, aplikasi akan me-refresh post yang ada di halaman.
Nah, apabila pengguna melakukannya, ada animasi kubus yang bergerak melingkar, menandakan proses loading dari refresh tadi.
Baca Juga: Apa Itu Design Thinking? Pahami Prinsip, Langkah, dan Penerapannya di Sini!
Ciri Micro Interaction yang Baik
© Freepik.com
Nah, interaksi mikro sendiri memiliki beberapa kriteria agar tidak terkesan berlebihan.
Ingat, istilah micro interaction memiliki kata “micro” di dalamnya, yang dalam bahasa Indonesia diartikan sangat kecil.
Ciri interaksi mikro yang baik di antaranya:
- simpel, banyaknya interaksi mikro yang kita temui sehari-hari akan memicu user merasa tak nyaman apabila terlalu kompleks
- konsisten, tidak ada interaksi mikro yang lebih menonjol daripada yang lain
- memiliki tujuan yang spesifik untuk berinteraksi dengan user
- telah dites pada user dan terasa meningkatkan experience-nya
Komponen Micro Interaction
© Freepik.com
Kata Dan Saffer, seorang product designer, terdapat empat komponen dalam interaksi mikro:
1. Trigger
Trigger merupakan sesuatu yang memicu interaksi mikro. Unsur ini bisa dimulai baik dari user maupun dari sistem
Nah, bentuk konkrit trigger user biasanya berupa tombol atau fungsi yang bisa diklik, tarik, scroll, dan lain-lain.
Sementara itu, trigger sistem biasanya merupakan fungsi otomatis. Misalnya, saat notifikasi muncul dalam aplikasi.
2. Rules
Komponen selanjutnya dalam micro interaction adalah rules.
Secara singkat, rules merupakan apa yang harus dilakukan oleh aplikasi setelah trigger terjadi.
3. Feedback
Unsur interaksi mikro berikutnya adalah feedback. Komponen ini merupakan cara aplikasi “berbicara” kepada user.
Feedback bisa berupa animasi, pop-up, perubahan warna, dan lain-lain.
Misalnya, apabila user salah memasukkan password, kotak kata sandi akan berubah menjadi merah serta bergetar ke kiri dan kanan.
Ada dua faktor yang harus dipikirkan dalam membuat feedback:
- apa yang harus diketahui pengguna
- seberapa sering feedback harus terjadi.
4. Loops dan modes
Komponen interaksi mikro yang terakhir adalah loops dan modes.
Kedua unsur ini memiliki maksud seberapa lama dan seberapa sering interaksi mikro harus terjadi.
Apabila suatu kondisi berubah, bagaimana perubahan kondisi tersebut mengubah interaksi mikro juga?
Misalnya, pada aplikasi e-commerce, tombol “Beli Sekarang!” berubah menjadi “Beli Lagi!” apabila user pernah membeli suatu barang.
Baca Juga: 9 Tren Desain UI/UX Tahun 2020 yang Harus Kamu Ketahui!
Contoh Micro Interaction
Telah disampaikan bahwa ada banyak sekali interaksi mikro yang kita temui sehari-hari.
Kamu mungkin tidak sadar bahwa kamu sangat sering menemuinya. Beberapa contoh micro interaction di antaranya:
1. Saat Google Docs memberikan saran penamaan artikel
© Toptal.com
2. Saat mengubah urutan task di aplikasi Reminder milik iOS
© Toptal.com
3. Warna yang senada dengan logo IKEA saat memilih suatu teks
© Toptal.com
Masih ada banyak contoh interaksi mikro yang bisa kamu temui sehari-hari.
Baca Juga: Tips Belajar UI UX Design yang Harus Diketahui oleh Pemula
Demikian informasi dari Glints soal micro interaction. Terapkan sesuai kebutuhan dan ketentuan agar produkmu makin ciamik, ya!
Apabila kamu ingin mendapat lebih banyak informasi terkait pengembangan produk, kamu bisa mendapatkannya melalui newsletter blog Glints.
Dengan berlangganan, kamu akan mendapatkan beragam informasi bermanfaat, langsung di emailmu.
Daftarkan dirimu sekarang juga!
