Interaction mikro bukanlah konsep baru dalam desain UX, tetapi terus menjadi semakin mengesankan. Kami telah berbicara tentang interaction mikro di sini di Design Shack untuk sementara waktu karena mereka sangat penting untuk keberhasilan proyek web secara keseluruhan.
Interaction mikro adalah detail kecil yang mengubah pengalaman pengguna biasa menjadi sesuatu yang lebih berkesan dan menarik. Hal-hal kecil yang mengejutkan dan menyenangkan, menambahkan lapisan UX yang menyenangkan ke aplikasi atau situs web Anda.
Berikut adalah tampilan bagaimana desainer menggunakan interaction mikro pada tahun 2021 dengan contoh bagaimana teknik desain ini berkembang.
Desain untuk Fungsi
Animasi plus penjelasan.
Biarkan frasa sederhana itu berputar di benak Anda saat Anda mulai berpikir tentang cara terbaik merancang interaction mikro. Setiap keterlibatan situs web kecil ini harus melakukan hal-hal ini.
Animasi adalah titik kesenangan yang menarik pengguna ke dalam elemen. Penjelasan membantu mereka memahami untuk apa tombol atau sakelar atau ikon itu dan bagaimana menggunakannya.
Setiap interaction mikro menyediakan serangkaian informasi dalam hitungan mikrodetik:
- Pemicu: Kapan interaction mikro dimulai atau mengapa dimulai
- Aturan: Apa yang membuat action/interaction berhasil dan bagaimana cara kerjanya
- Umpan balik: Bagaimana Anda tahu bahwa tindakan Anda dengan elemen berhasil melalui semacam isyarat
- Putaran dan mode: Berapa lama interaction berlangsung hingga disetel ulang untuk pengguna tertentu
Kunjungi contoh sakelar mode terang/gelap di atas. Sakelar meluncur dan melakukan persis seperti yang Anda harapkan tanpa banyak keributan. Ini memiliki animasi mudah yang menjelaskan dengan tepat apa yang akan terjadi jika Anda mengaktifkan tombol. Itu adalah interaction mikro yang solid dalam action.
Selamat bersenang-senang
Interaction mikro seharusnya menyenangkan. Ini adalah elemen menarik yang dapat membantu memandu pengguna melalui desain dengan sentuhan sesuatu yang modern dan mungkin tidak terduga.
Situs Aurelia Durand penuh dengan interaction kecil yang sangat menyenangkan. Penunjuk adalah tangan kecil yang bergerak untuk mengeklik area yang sesuai, mengarahkan kursor ke menu, dan mendapatkan semburan titik berwarna untuk mendorong tindakan, ilustrasi utama berubah dan bernyawa sebagai bagian dari interaction mikro keadaan melayang juga.
Tunjukkan Kepribadian
Salah satu interaction mikro yang paling diremehkan yang mungkin sering Anda temui adalah bilah fitur reaction Facebook. (Facebook juga menambahkan beberapa interaction mikro yang bagus ke logo ponsel dari waktu ke waktu.)
Inilah mengapa ini berhasil. Saat Anda mengklik atau mengetuk dan menahan setiap emoji kecil tampak hidup, menunjukkan ekspresi emosi yang sebenarnya untuk Anda pilih. Rasanya lebih pribadi dan lebih autentik daripada ketukan cepat ikon klasik seperti jempol ke atas.
Elemen kecil ini juga memiliki status hover yang memberi tahu Anda arti setiap emoji/ikon. Sepotong informasi tambahan ini membuat interaction mikro lebih berguna dan memberi pengguna alat untuk membuat pilihan yang tepat saat memilih perasaan mereka tentang sebuah kiriman di media sosial.
Lapisan informasi tambahan ini bisa menjadi sangat penting jika emoji atau ikon baru ditambahkan, seperti pelukan “perhatian” yang menjadi bagian dari bilah fitur pada pertengahan tahun 2020.
Animasi Halus Bisa Efektif
Sementara beberapa interaction mikro lebih eksplosif, banyak yang merupakan perubahan halus yang hampir tidak diperhatikan.
Interaction mikro yang baik seharusnya hampir tidak terlihat. Anda tidak perlu memikirkannya atau mempertanyakan mengapa itu ada atau bagaimana berinteraction dengannya. Majalah UX mendeskripsikannya seperti ini: “Pastikan animasi mikro tidak terasa canggung atau mengganggu. Tindakan umum dan kecil menuntut tanggapan sederhana. Tindakan sesekali dan besar membutuhkan respons yang solid.
Contoh bagusnya adalah interaction mikro yang hadir dengan banyak ikon hamburger atau menu pop-out.
Lucid Reality Labs memiliki ikon garis ganda (pojok kanan atas) yang bergeser ke satu baris, lalu “X” saat menu terbuka. Itu menganimasikan yang lain ketika “x” diklik untuk menutup. Ini sangat sederhana sehingga Anda hampir tidak melihatnya.
Ada juga interaction sekunder yang terjadi dengan kubus di tengah layar. Anda dapat mengklik contoh untuk melihat cara kerja lapisan mikrointeraction ini.
Desain untuk Harmoni dengan Konten
Setiap interaction mikro harus hidup selaras dengan konten yang menyertainya.
Anda tidak mendesain dalam gelembung jadi jangan biarkan faktor keren dari ide atau sesuatu yang Anda buat lebih diutamakan daripada penempatan dan sinkronkan dengan keseluruhan desain.
Interaction mikro garis waktu untuk Cara Berbicara dengan Anak Kulit Putih Tentang Rasisme, di atas, sederhana dan terintegrasi penuh dengan desain lainnya. Mereka berisi tingkat detail yang membuat bergerak melalui versi digital buku ini menyenangkan.
Setiap interaction mikro garis waktu menyertakan ikon yang cocok dengan konten pada halaman yang terkait dan tajuk utama untuk konten tersebut. Ini memperbesar ukuran sehingga Anda bisa melihat sekilas karya seni dan gerakan sederhananya menarik.
Desainnya juga dikemas dengan animasi menyenangkan lainnya, seperti pergantian halaman (tunggal dan balik) yang membuat seluruh desain ini menjadi sesuatu yang ingin Anda selami.
Gunakan Elemen Taktil
Pikirkan tentang bagaimana beberapa alat yang Anda gunakan sehari-hari berfungsi saat Anda berinteraction dengannya.
- Sentuhan jam tangan Apple Anda saat Anda mengetuk tombol
- Ping lembut notifikasi di ponsel Anda
- Titik mendengarkan saat Anda berbicara dengan Siri atau perangkat lain
- Buzz lembut untuk menandai setiap mil selama Anda berjalan atau berlari
- Nada saat earbud terhubung ke Bluetooth
Semua elemen yang menggabungkan digital dan realitas ini adalah bagian dari pengalaman taktil yang lebih besar yang menyatukan ruang. Interaction mikro adalah cara yang bagus untuk melakukan itu.
Kamu bisa menggunakan:
- Merasa
- Suara
- Kemajuan
- Melambung
- Pulsa atau dengungan
Ada begitu banyak cara untuk mencapai ini. Persamaannya adalah mereka terlihat dan terasa nyata. Mereka bukan bagian dari layar dan lebih merupakan bagian dari dunia fisik Anda (atau setidaknya dimaksudkan).
Kesimpulan
Interaction mikro mulai mendapatkan momentum sekitar tahun 2013 ketika Dan Saffer pertama kali menulis tentang mereka dalam bukunya. Empat komponen yang dia uraikan saat itu masih menjadi bagian penting dari interaction situs web kecil ini – pemicu, aturan, umpan balik, serta putaran dan mode.
Anda dapat melihat elemen-elemen umum ini di hampir setiap interaction mikro jika Anda melihat lebih dekat.
Kami juga ingin melihat lebih banyak contoh interaction mikro yang rapi. Bagikan dengan kami dan pastikan untuk menandai saya dan Design Shack di Twitter.
