UI microinteractions adalah respon visual atau audio yang dilihat pengguna saat melakukan tindakan atau interaksi pada produk. Kata mikro pada microinteractions diartikan sebagai perubahan kecil dan sangat kontekstual pada tampilan visual yang dilihat pengguna.

Satu hal yang membuat microinteractions begitu kuat adalah rasa senang yang muncul dari pengguna. Desainer harus memiliki tujuan untuk menyenangkan penggunanya dan membuat mereka merasa senang saat menggunakan produk.

Dalam buku Designing for Emotion yang ditulis oleh Aaron Walter, kesenangan (pleasurable) pengguna berada di puncak piramida kebutuhan pengguna setelah produk tersebut memiliki fungsi (functional), dapat diandalkan (reliable) dan dapat digunakan (usable).

Meningkatkan Pengalaman Pengguna (UX)

Piramida kebutuhan pengguna membuktikan bahwa pengalaman pengguna (user experience) yang baik lebih penting daripada produk yang hanya bisa digunakan begitu saja. Pengalaman pengguna yang menyenangkan membuat interaksi dengan produk juga menjadi menyenangkan.

UI Microinteraction dapat mendorong keterlibatan pengguna pada produk, membantu pengguna melihat hasil visual dari tindakan yang mereka lakukan dan mencegah kesalahan dalam menggunakan produk.

Yang tidak kalah penting, dapat mengkomunikasikan antara brand dan value yang dimiliki kepada pengguna sehingga mereka akan selalu mengingat dan menggunakan brand atau produk walaupun banyak kompetitor dengan produk serupa.

Ciri Microinteraction yang Baik

Ciri interaksi mikro yang baik di antaranya, yaitu :

Simpel, banyaknya interaksi mikro yang kita temui sehari-hari akan memicu user merasa tidak nyaman apabila terlalu kompleks.
Konsisten, tidak ada interaksi mikro yang lebih menonjol daripada yang lain.
Memiliki tujuan yang spesifik untuk berinteraksi dengan user.
Telah di tes pada user dan terasa meningkatkan experience-nya.

Komponen Microinteraction

Kata Dan Saffer, seorang product designer terdapat empat komponen dalam interaksi mikro, yaitu :

1. Trigger

Trigger merupakan sesuatu yang memicu interaksi mikro. Unsur ini bisa dimulai baik dari user maupun dari sistem. Bentuk konkrit trigger user biasanya berupa tombol atau fungsi yang bisa di klik, 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

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, yaitu :

apa yang harus diketahui pengguna.
seberapa sering feedback harus terjadi.

4. 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.

UI Microinteractions pada Produk Digital

Saat mengkonfirmasi tindakan di suatu produk akan melihat visual saat mengklik tombol atau elemen interaktif lain sebagai konfirmasi dari interaksi atau tindakan. Sebagai pengguna tahu jika sistem sudah menerima dan mengerjakan perintah.

UI microinteractions memudahkan pengguna untuk mengetahui apa yang sedang dilakukan sistem. Contohnya pada progress bar setelah klik konfirmasi dari tindakan. Progress bar memudahkan pengguna untuk memprediksi berapa lama waktu yang dibutuhkan sistem untuk beroperasi.

UI microinteractions juga dapat membantu mengkomunikasikan masalah kepada pengguna dan memandu ke solusi permasalahan tersebut.

1. Like dan Dislike

Salah satu contohnya adalah fitur like pada Twitter. Pengguna dapat mengklik ikon hati sebagai tindakan pada suatu tweet yang disukai. Microinteractions menggunakan animasi hati untuk mengkomunikasikan bahwa menyukai sesuatu di produk tersebut.

Bisa membatalkan tindakan dengan klik lagi ikon hati, warna hati akan kembali ke warna semula yang sebelumnya merah ketika disukai.

2. Transisi Navigasi

UI microinteractions dapat membantu desainer UI/UX dalam meningkatkan pengalaman navigasi di aplikasi. Banyak aplikasi ponsel menggunakan ikon navigasi garis tiga (seperti hamburger) untuk melihat menu dengan pilihan navigasi.

Bisa mengkomunikasikan perubahan status yang dijalankan sistem secara lebih jelas dengan menggunakan transisi dengan klik ikon garis tiga tersebut.

3. Pull to Refresh

Menarik layar handphone atau tablet untuk merefresh halaman aplikasi adalah salah satu contoh umum yang sering ditemui. Pengguna akan mendapatkan tampilan visual yang lebih baik setelah melakukan tindakan menarik layar.

4. Kesalahan saat Input Data

Ketika pengguna melakukan kesalahan dalam menggunakan aplikasi atau produk, biasanya mereka tidak akan peduli apa yang menyebabkan kesalahan baik itu kesalahan dari input yang mereka masukkan atau kesalahan sistem.

Perasaan pengguna menjadi hal yang penting saat kesalahan tersebut bisa ditangani. Sistem perlu mengkomunikasikan ketika pengguna memasukkan data yang salah.

Setelah pengguna memasukkan data, microinteractions visual yang bergetar atau kolom isian formulir berlabel merah memberi info kepada pengguna bahwa data tersebut tidak valid dan mendorong pengguna untuk terus berinteraksi mengisi formulir di aplikasi.

5. Siap untuk Input Perintah

Perangkat digital berbasis suara seperti Google Home menggunakan microinteractions untuk mengkomunikasikan cara mereka bekerja. Misalnya ketika Google Home menampilkan animasi titik berbentuk lingkaran untuk memberitahu pengguna bahwa sistem mendengarkan perintah dari pengguna.

6. Respon Suara

Tidak hanya visual, banyak produk juga mengandalkan respon suara untuk berkomunikasi dengan penggunanya. Microinteraction saat menghidupkan Apple Mac adalah contohnya. Bisa menggunakan respon tindakan berupa microinteractions dengan audio.