Untuk Meningkatkan User Experience, Pahami Apa Itu Micro Interaction, Unsur, serta Contohnya

Diperbarui 02 Mar 2021 - Dibaca 7 mnt

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?

    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:

    contoh interaksi mikro 1

    © 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

    ciri micro interaction

    © 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

    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

    contoh interaksi mikro 2

    © Toptal.com

    2. Saat mengubah urutan task di aplikasi Reminder milik iOS

    contoh interaksi mikro 3

    © Toptal.com

    3. Warna yang senada dengan logo IKEA saat memilih suatu teks

    contoh interaksi mikro 4

    © 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!

    Seberapa bermanfaat artikel ini?

    Klik salah satu bintang untuk menilai.

    Nilai rata-rata 5 / 5. Jumlah vote: 1

    Belum ada penilaian, jadi yang pertama menilai artikel ini.

    We are sorry that this post was not useful for you!

    Let us improve this post!

    Tell us how we can improve this post?


    Comments are closed.

    Artikel Terkait