Tentang Microinteraction, Buat Tampilan Berbicara Padamu

sumber: dribbble.com

Sebelum saya membahas lebih jauh tentang Microinteraction ini, saya ingin bercerita tentang sumber ide tulisan ini.

Ketika saya bosan dikantor, seperti biasa saya mencoba berselancar ria di internet. Tanpa sengaja kemudian saya tersasaar ke Drible, sebuah mediaa sosiaal khusus para designer. Kemudian saya melihat portofolio beberapa  designer, hingga sampailah pada seorang disigner bernama Johny Vino (Sepertinya lain waktu saya akan mengulas tentang dia, ternyata salah satu orang penting yang mengurusi UI/UX di Microsoft). Saya yang menyukai design UI/UX, sangat terkesima melihat hasil kerjanya.

Satelah melihat karya-karyanya, saya menemukan  sebuah link deskripsi pada postingan dia, yang mengarahkan saya pada sebuah video youtube terkait sebuah materi yang dia sampaikan pada sebuah acara. Pada saat itu, dia menjelaskan tentang hal-hal fundamental terkait UI/UX yang terfokus pada Microinteraction UI. Selain itu dia juga menjelaskan beberapa hal penting lainnya terkait Microinteraction UI tersebut. Berikut ringkasan materi tersebut.

Apa itu Microinteraction pada UI ?

Baik, sebelum saya menjelaskan lebiih jauh terkait Microinteraction, saya akan menjelaskan terlebih dahulu tentang Desain Interaksi. Karena kedua hal ini merupakan hal yang tidak terpisahkan. Menurut pengertian wikipedia, " Desain interaksi atau biasa disingkat IxD, adalah sebuah praktik merancang produk digital secara interaktif, baik pada linkup environment, sistem, atau layanan."

Diluar aspek digital, desain interaksi juga berguna saat membuat produk fisik (non-digital ), bagaimanua saat diimplementasikan, pengguna dapat berinteraksi dengannya. Topik umum desain interaksi mencakup, interaksi manusia dengan komputer, dan pengembangan perangkat lunak. Sementara desain interaksi memiliki minat dalam bentuk (mirip dengan bidang desain lainnya), area fokus utamanya terletak pada perilaku".

Nah, Kemudian berlanjut pada pembahasan microinteraction, menurut Johny secara sederhana Microinteraction adalah sebuah solusi. Maksudnya ?. Ya, sebuah solusi untuk membuat sebuah mesin atau sebuah apps berbicara. Microinteraction Design bekerja untuk memberikan informasi kepada User terkait apa yg sedang dilakukan mesin.

Prinsip dasarnya yaitu mengambil sebuah konsep-konsep fisik untuk di terapkan pada dunia digital. Pada kasus pembahasan ini kita berbicara tentang UI/UX, maka bagaimana menjelaskan sebuah fenomena interaksi fisik, bisa diterjemahkan kedalam sebuah tampilan aplikasi.

Sehingga secara tidak langsung, tampilan tersebut seperti memberitahukan suatu informasi terkait apa yang sedang terjadi saat kita memberikan respon pada tampilan tersebut. Pada bagian-bagian terkecil sekalipun yang ada pada sebuh aplikasi, semisal pada tombol yang kita klik kemudian memberikan sebuah efek transisi tertentu yang tentunya memiliki sebuah maksud dan tujuan.

Untuk mempermudah pemahaman kita, saya coba beri sebuah contoh tampilan microinteraction berikut,

sumber : Shoot dribbble Johny Vino

Apa yang anda lihat ?, ya sebuah animasi. Memang sebuah animasi atau sebuah efek transisi , namun mengacu pada penjelasan diatas, berbicara microinteraction ialah bukan sekedar sebuah efek/animasi yang tidak memiliki makna atau sebuah motivasi kenapa memakai animasi atau efek transisi tersebut.

Bagaimana Microinteraction bekerja ?

Tentunya, setiap hal memiliki hal dasar terkait bagaimana sesuatu tersebut bekerja. Berikut adalah sebuah gambaran sederhana, bagaimana microinteraction bekerja.

Nomal adalah kondisi awal, dimana objek tidak memberikan respon apapun. Action & Rule adalah sebuah tindakan yang akan kita lakukan dengan sebuah aturan-aturan yang sudah kita tentukan. Sehingga menghasilakn Feedback, yaitu respon dari objek awal untuk memberitahukan apa yang terjadi setelah kita memberikan sebuah tindakan.

Lalu, kapan Microinteraction ini digunakan ?

Hemmb, Untuk pembahasan ini. Berhubung jam menunjukkan pukul 00.45, sepertinya saya harus istirahat dulu ni kawan-kawan. Jadi, pembahasan tersebut akan saya lanjut pada artikel selanjutnya.

Sebelumnya terima kasih sudah mau menymak artikel ini.  Semoga bermamfaat.

Sumber tulisan:

- https://www.youtube.com/watch?v=vHPKFiF12wI&feature=youtu.be

- https://en.wikipedia.org/wiki/Interaction_design