Interaksi Mikro: 15 Contoh dan Cara Mendesainnya
Interaksi mikro menjelaskan: definisi, empat bagian Dan Saffer, 15 contoh nyata yang dikelompokkan berdasarkan jenis, aturan desain, dan cara membuatnya di CSS, Framer Motion, GSAP, atau ExodeUI.
Pengambilan Inti
Interaksi mikro adalah momen kecil yang terkandung dalam antarmuka yang melakukan satu hal: menyukai postingan, mengubah pengaturan, mengonfirmasi formulir, atau menyelesaikan isyarat. Istilah dan anatominya berasal dari Dan Saffer yang mendefinisikan empat bagian. Pemicu memulainya, aturan memutuskan apa yang terjadi, umpan balik menunjukkan hasilnya, dan loop atau mode mengatur apa yang dilakukannya seiring waktu. Interaksi mikro yang baik bersifat singkat, merespons masukan pengguna sendiri, dan tidak dapat diinterupsi.
Apa itu interaksi mikro?
Interaksi mikro adalah interaksi lengkap terkecil dalam suatu produk: satu tugas dengan awal, perubahan, dan akhir. Ini bukanlah aliran keseluruhan. Menyukai postingan adalah interaksi mikro; menulis dan menerbitkan komentar adalah sebuah alur. Ide dan strukturnya berasal dari buku Microinteractions karya Dan Saffer, yang membagi setiap interaksi menjadi empat bagian.
Empat bagian interaksi mikro
Kerangka kerja Dan Saffer membagi interaksi mikro menjadi empat komponen. Memberi nama pada mereka berguna karena sebagian besar bug dan sebagian besar gerakan buruk berada di salah satu dari keempatnya, bukan secara keseluruhan.
Pemicu
Peristiwa yang memulainya. Dimulai oleh pengguna (ketuk, arahkan kursor, tekan lama, seret) atau dimulai oleh sistem (pengunduhan selesai, terjadi kesalahan jaringan). Kredit: Dan Saffer.
Aturan
Apa yang terjadi setelah dimulai: status valid, batasan seperti batas drag atau nilai minimum dan maksimum, dan urutan kejadian. Kredit: Dan Saffer.
Masukan
Bagaimana produk memberi tahu pengguna apa yang terjadi: perubahan musim semi, perubahan warna, perubahan ikon, pembaruan teks. Di sinilah sebagian besar desain gerak berada. Kredit: Dan Saffer.
Loop & Mode
Apa yang dilakukan interaksi dari waktu ke waktu, dan bagaimana mode mengubahnya. Tombol yang sama dapat berperilaku berbeda dalam mode gelap atau dalam tata letak yang ringkas tanpa mengubah logikanya. Kredit: Dan Saffer.
Mengapa interaksi mikro penting
Interaksi mikro adalah bagaimana antarmuka menjawab pengguna tanpa paragraf teks. Ini mengonfirmasi bahwa suatu tindakan telah diterima, menunjukkan bahwa sesuatu masih berfungsi, atau menjelaskan apa yang baru saja berubah. Ketika mereka hilang, produk yang sama terasa lebih berat: pengguna mengetuk dua kali karena tidak ada yang memberi tahu mereka bahwa ketukan pertama telah dilakukan, atau mereka menunggu di layar yang tidak menunjukkan tanda-tanda kemajuan. Yang baik lebih dirasakan daripada diperhatikan, itulah intinya.
15 contoh interaksi mikro
Ini dikelompokkan berdasarkan apa yang mereka komunikasikan. Jika ExodeUI mengirimkan contoh yang cocok, nama diberikan agar Anda dapat membuka dan mengeditnya.
Tombol dan matikan (tekan dan nyatakan)
1. Penekanan tombol: skala menjadi sekitar 0,92 saat penunjuk ke bawah dan kembali saat dilepaskan (contoh ExodeUI: Tombol Jeli). 2. Toggle switch: terjemahan berbasis pegas dengan perubahan warna saat dilakukan (Gooey Toggle). 3. Sakelar mode: kontrol tersegmentasi yang menggeser indikatornya dan mengubah label aktif (Motion Switch).
Umpan balik formulir (validasi dan penyerahan)
4. Goyangan input tidak valid: dorongan horizontal pendek yang bertuliskan "periksa bidang ini" tanpa dialog (Input Teks Goyangkan). 5. Pengiriman sedang berlangsung: tombol menjadi indikator kemajuan, sehingga pengguna tidak pernah kehilangan tempatnya (Tombol Kirim Animasi). 6. Konfirmasi keberhasilan: ledakan perayaan kecil pada tombol saat aksi mendarat (Tombol Peluncuran Roket).
Memuat dan maju
7. Kemajuan melingkar: sebuah cincin yang mengisi hingga nilai sebenarnya dan diselesaikan dengan pegas (Radial Gauge). 8. Level atau pengukur aktivitas: bilah yang bereaksi langsung terhadap data yang masuk seperti level audio (Gelombang Suara).
Navigasi
9. Pengalih menu: ikon yang berubah antara dua status dan menampilkan menu di tempatnya (Morph Nav). 10. Pembesaran dok: item di dekat kursor terangkat dan membesar, lalu menetap (Magnetic Dock). 11. Pemilihan tab: indikator yang meluncur antar tab dan tidak berkedip (Liquid Tab Bar).
Status kosong dan sukses
12. Keadaan kosong: ilustrasi kecil yang dianimasikan sekaligus untuk memperhalus layar kosong. 13. Pengungkapan hadiah: hadiah atau lencana yang dibuka dengan antisipasi ketika suatu pencapaian tercapai (Kotak Hadiah Kejutan).
Tarik untuk menyegarkan
14. Pull-to-refresh: gulir berlebihan elastis yang melacak tarikan, lalu muncul kembali dan berhenti saat dilepaskan. Umpan baliknya adalah regangan, bukan pemintal.
Umpan balik bergaya haptik
15. Pulsa konfirmasi: skala singkat dan cahaya pada elemen yang mencerminkan ketukan haptik pada ponsel, sehingga tindakan yang sama terasa sama pada perangkat tanpa motor getaran.
Rancang aturan yang menjaganya tetap baik
Beberapa aturan memisahkan interaksi mikro yang membantu dan interaksi yang mengganggu.
- Singkat saja: paling lengkap dalam waktu sekitar 200-400 md; gerakan yang lebih panjang pada elemen kecil terasa lambat
- Mulai di frame yang sama dengan input; permulaan yang tertunda merusak pengertian sebab dan akibat
- Jaga agar tetap dapat diinterupsi: jika pengguna membalikkan tindakan di tengah gerakan, arahkan ulang dengan kecepatan daripada memulai kembali dari nol
- Respect lebih memilih gerakan yang dikurangi: menyediakan fallback statis atau cross-fade yang tetap mengkomunikasikan perubahan
- Berikan satu pekerjaan: jika interaksi memerlukan lebih dari satu keputusan, maka itu adalah sebuah alur
Bagaimana membangun interaksi mikro
Alat yang tepat bergantung pada berapa banyak platform tempat interaksi yang sama harus dijalankan.
CSS saja
Cocok untuk kasus sederhana dan mandiri: pengangkatan kursor, cincin fokus, dan tombol alih yang digerakkan oleh :checked atau perubahan kelas. Transisi dan @keyframes sudah cukup, dan tidak ada yang bisa dikirimkan selain stylesheet.
Framer Motion atau GSAP (web)
Baik bila gerakan memerlukan pegas, isyarat, atau orkestrasi dan hanya harus dijalankan di web. Keduanya memberi Anda pegas yang dapat diinterupsi dan dapat digerakkan dengan status React.
ExodeUI (web, iOS dan Android dari satu file)
Gunakan ini ketika interaksi yang sama harus berperilaku sama di aplikasi React, aplikasi SwiftUI, dan Flutter. Anda menulisnya sekali dalam file .exode dan runtime memutarnya di setiap platform, jadi tidak ada penulisan ulang per platform.
Cuplikan Implementasi Produksi
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Kunci Principles untuk Diingat
- Interaksi mikro adalah satu tugas kecil dengan pemicu, aturan, umpan balik, dan putaran atau mode, empat bagian tersebut dinamai oleh Dan Saffer
- Kebanyakan yang bagus selesai dalam waktu sekitar 200-400 md, dimulai pada frame yang sama dengan input, dan tetap dapat diinterupsi
- Umpan balik adalah hal yang berhasil: umpan balik mengonfirmasi tindakan dan menjelaskan apa yang berubah, seringkali tanpa teks apa pun
- Selalu sediakan fallback pilihan dengan gerakan yang dikurangi yang membawa informasi yang sama tanpa gerakan