Mengenal Microinteraction

Ketika saya bosan di tempat kerja, seperti biasa saya mencoba berselancar ria di internet. Tanpa sengaja kemudian saya tersasar ke situs Dribbble, sebuah media sosial khusus para desainer. Kemudian saya melihat portofolio dari beberapa designer, hingga sampailah pada seorang desainer bernama Johny Vino (salah satu orang penting yang mengurusi UI/UX di Microsoft). Saya yang menyukai design UI/UX, tentunya sangat terkesima melihat hasil kerjanya.
Satelah melihat karya-karyanya, saya menemukan sebuah link deskripsi pada postingan yang mengarahkan saya pada sebuah video youtube terkait sebuah materi yang dia sampaikan pada sebuah acara. Saat itu, dia menjelaskan tentang hal-hal fundamental terkait UI/UX yang terfokus pada Microinteraction UI. Selain itu dia juga menjelaskan beberapa hal menarik terkait Microinteraction UI/UX, dan bagi saya penjelasannya begitu sangat sederhana dan mudah dipahami. 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 lingkup environment, sistem, atau layanan."
Diluar aspek digital, desain interaksi juga berguna saat membuat produk fisik (non-digital ), bagaimana saat di implementasikan, 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 sama dengan sebuah solusi. Solusi yang dimaksud ialah untuk membuat suatu mesin atau sebuah aplikasi berbicara dengan pengguna. Microinteraction bekerja untuk memberikan informasi kepada User terkait apa yg sedang dilakukan oleh mesin.
Prinsip dasarnya yaitu mengambil sebuah konsep-konsep fisik untuk di terapkan pada dunia digital. Khusus 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 sebuah ilustrasi microinteraction berikut,


sumber : Shoot dribbble Johny Vino

Apa yang anda lihat ? Betul, sebuah animasi. Nyatanya 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.

Coba perhatikan sesi animasi gambar daun yang terus tumbuh pada gambar di atas. Hal tersebut terjadi ketika user menggeser tombol scroll pada ilustrasi gambar di atas. Dan tentunya jika kita perhatikaan satu persatu, masih ada beberapa sesi animasi lainnya yang memiliki motivasi tertentu.

 

Bagaimana Microinteraction bekerja?

Secara sederhana Johny menjelaskan terkait bagaimana proses microinteraction bekerja. Diilustrasikan pada gambar berikut,

sumber : Blog Penulis :)

Nomal adalah kondisi awal, dimana objek tidak memiliki 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.
Kurang lebih, itu dulu yang dapat saya ulas mengenai Microinteraction. Barangkali dilain waktu saya akan menulis pembahasan lain yang mungkin masih terkait dengan pembahsan Microinteraction ini.


Sumber tulisan:

• https://www.youtube.com/watch?v=vHPKFiF12wI&feature=youtu.be
• https://en.wikipedia.org/wiki/Interaction_design