Interaksi mikro dan animasi mikro

Sebuah aplikasi mungkin bermanfaat bagi pengguna, tetapi tanpa desain UX dan UI yang bagus, pengguna mungkin akan mengabaikannya. Jadi, bagaimana cara kita menarik pengguna untuk menggunakan aplikasi kita? Bagaimana kita bisa membuat aplikasi kita menonjol dari yang lain? Salah satu caranya adalah dengan menyertakan animasi mikro dan interaksi mikro. Ada perbedaan halus antara interaksi mikro dan animasi mikro. Interaksi mikro dimulai dengan sebuah pemicu dan berlanjut ke serangkaian instruksi yang direpresentasikan secara visual melalui animasi. Output visual dari interaksi mikro adalah animasi.

Animasi mikro ini adalah momen produk individual yang dirancang untuk menyelesaikan satu tugas sekaligus meningkatkan aliran produk alami. Animasi mikro mencakup hal-hal seperti menggeser ke atas untuk menyegarkan data, menyukai konten, dan mengubah pengaturan. Animasi ini juga dapat mencakup animasi antarmuka pengguna yang sederhana, seperti bagaimana sebuah menu bergeser saat diketuk atau kartu meluncur dari layar saat digeser.

Interaksi mikro

Berikut ini adalah beberapa manfaat utama dari memasukkan interaksi mikro ke dalam sebuah produk:

• Memberikan umpan balik tentang hasil dari suatu tindakan,
• Menyelesaikan tugas kecil,
• Meningkatkan perasaan manipulasi langsung,
• Membantu pengguna dalam melihat hasil dari tindakan mereka, dan
• Menghindari kesalahan pengguna.

Contoh interaksi mikro

Tombol Suka di Facebook

Ini adalah contoh interaksi mikro yang terkenal. Tahan tombol Suka pada aplikasi atau arahkan mouse Anda ke atasnya jika Anda menggunakan desktop untuk melihat semua reaksi, lalu ketuk salah satu yang ingin Anda posting.

Menu hamburger

Pengguna mengasosiasikan ikon ini untuk menampilkan atau menyembunyikan menu.

Tarik untuk menyegarkan

Pola tarik-ke-refresh memungkinkan pengguna menggunakan sentuhan untuk menarik daftar data ke bawah untuk mengambil lebih banyak data.

Kontrol volume

Interaksi mikro dapat membantu desainer membuat tugas yang paling dasar sekalipun, seperti kontrol volume, menjadi lebih menyenangkan.

Pelengkapan otomatis

Anda mungkin pernah mendengar tentang Pelengkapan Otomatis. Di sinilah mesin pencari Anda dapat mencoba membantu Anda dengan apa yang Anda coba ketik. Interaksi mikro, menurut Dan Saffer, penulis buku Micro-interactions, menyatakan bahwa mendesain dengan detail memiliki empat komponen utama:

1. Pemicu

pemicu manual

ini terjadi ketika pengguna berinteraksi dengan sistem, misalnya, dengan menggeser untuk membuka kunci ponsel.

pemicu sistem

pemicu ini terjadi ketika sistem memenuhi suatu kondisi secara otomatis, seperti menerima notifikasi pada ponsel Anda.

2. Aturan

aturan menginstruksikan aplikasi tentang apa yang harus dilakukan setelah peristiwa pemicu terjadi. Aturan mengontrol bagaimana interaksi mikro ditangani dalam

aplikasi.

3. Umpan balik

komponen ini memberi tahu pengguna tentang respons pemicu. Ada dua faktor yang mempengaruhi umpan balik:

1. informasi apa yang dibutuhkan pengguna?
2. Seberapa sering hal itu harus terjadi?

4. Mode dan Perulangan

mode dan loop adalah meta-aturan interaksi mikro. Artinya, ketika ada permintaan, mode digunakan,

sedangkan loop menentukan berapa lama interaksi mikro harus berlanjut dan apakah perlu diulang.

klik tautan di bawah ini untuk membaca lebih lanjut tentang interaksi mikro:

interaksi mikro: Merancang dengan Detail oleh Dan Saffer

Animasi mikro

Animasi sudah ada sejak lama. Namun, seiring dengan perkembangan peramban dan prosesor seluler, meluangkan waktu untuk animasi di antarmuka Anda menjadi semakin penting. Animasi dapat meningkatkan interaksi dan memperjelas antarmuka.

Antarmuka pengguna yang sederhana

Karena pengguna dapat melihat sesuatu yang terjadi secara langsung saat menggunakan animasi mikro, pengguna mendapatkan rasa manipulasi langsung.

Konteks dan perubahan

Sangat menantang bagi pengembang untuk memasukkan semua informasi ke dalam layar yang kecil. Oleh karena itu, beberapa elemen terkadang disembunyikan. Animasi mikro dapat membantu pengguna dalam menavigasi dan melihat semua informasi pada layar.

Konsentrasi pengguna

pengguna dapat dengan cepat terganggu oleh objek yang bergerak di layar. Akibatnya, menganimasikan sebuah tombol akan mendorong pengguna untuk mengkliknya untuk memulai suatu tindakan pada halaman. Menggunakan terlalu banyak animasi akan meratakan hirarki dan melemahkan pesan yang mungkin ingin Anda sampaikan kepada pengguna.

Penghargaan

Animasi mikro sangat berguna untuk memberikan penghargaan kepada pengguna setelah menyelesaikan suatu tindakan, seperti mengirimkan formulir. Sangat penting untuk diingat untuk menggunakan animasi kecil daripada membuat kartun yang besar.

Pikiran akhir

Meskipun interaksi mikro mungkin terlihat sebagai detail kecil, namun hal ini dapat membuat perbedaan antara aplikasi yang hanya berfungsi dan aplikasi yang menyenangkan dan terasa intuitif bagi pengguna. Bahkan proyek yang paling luar biasa pun bergantung pada keberhasilan komponen yang paling kecil.

Animasi mikro meningkatkan dan memperkaya antarmuka pengguna. Menggunakan animasi mikro hanya membantu perancang dalam membuat antarmuka yang lebih ramah pengguna. Animasi mikro membantu pengguna dengan memberikan umpan balik visual dan menampilkan perubahan dengan lebih jelas. Banyak hal yang dapat dijelaskan dengan menggunakan animasi mikro tanpa sepatah kata pun.