(0275) 2974 127
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).
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 interaksi mikro yang baik di antaranya, yaitu :
Kata Dan Saffer, seorang product designer terdapat empat komponen dalam interaksi mikro, yaitu :
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.
Komponen selanjutnya dalam micro interaction adalah rules. Secara singkat, rules merupakan apa yang harus dilakukan oleh aplikasi setelah trigger terjadi.
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 :
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.
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.
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.
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.
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.
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.
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.
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.
Beberapa contoh micro interaction di antaranya :
Secara default, WordPress tidak mendukung A/B testing. Tapi jangan khawatir. Di bawah ini, kami telah…
UX design merupakan singkatan dari User Experience design atau desain pengalaman pengguna. Istilah ini sering…
A/B testing adalah prosedur pengujian yang membandingkan dua halaman situs web atau lebih secara bersamaan…
Menemukan topik blog yang menarik dan terkini mungkin tidak mudah, terutama bagi pemula yang belum…
Cara Memonetisasi Blog – Menulis blog pribadi bukan lagi sekedar hobi, kegiatan ini menawarkan peluang…
Membuat blog adalah salah satu cara terbaik untuk berbagi cerita dan kisah Anda sambil terhubung…