Mikrointeraksi, dikombinasikan dengan desain yang terencana dengan baik, dapat meningkatkan keterlibatan pengguna.

Kita semua menggunakan aplikasi di smartphone, komputer, tablet, dan banyak perangkat lainnya, tetapi kita sebagian besar tidak menyadari nuansa halus yang telah diciptakan desainer untuk menikmati pengalaman pengguna.

Seorang desainer yang baik tidak hanya menciptakan desain yang menakjubkan, tetapi juga berfokus pada menciptakan pengalaman pengguna yang menyenangkan juga.

Pengalaman pengguna adalah semua yang dilihat dan dirasakan pengguna tentang aplikasi Anda, termasuk informasi yang terdefinisi dengan baik, desain terstruktur, dan sebagainya. Bagian penting dari pengalaman pengguna itu adalah mikrointeraksi. Ini sering diabaikan, tetapi ini memiliki tujuan penting dalam memecah apa yang terjadi di balik layar dan merupakan bagian penting dari memakukan kesan pertama yang sempurna itu.

Apa itu mikrointeraksi?

Interaksi mikro adalah momen kecil dengan satu tujuan untuk membuat interaksi pengguna menarik dan menyenangkan.

Kami berinteraksi dengan lusinan perangkat fisik, aplikasi, dan situs web setiap hari, dan masing-masing interaksi tersebut memicu reaksi. Input pengguna dapat berkisar dari gesekan sederhana ke bawah hingga menggeser menu terbuka, mengetuk tombol, atau beralih antar tab.

Respons dapat dilakukan dengan berbagai cara, termasuk animasi yang tepat, mengubah warna tombol, elemen meluncur di layar, dan sebagainya. Berikut adalah empat  komponen yang melakukan mikrointeraksi:

• Pemicu: Inilah yang menyebabkan interaksi mikro. Pikirkan untuk mencolokkan pengisi daya ponsel Anda, itu adalah pemicu.
• Aturan: Tentukan bagaimana reaksi mikro bereaksi atau apa yang harus terjadi setelah dipicu. Dalam kasus kami, telepon akan mulai mengisi daya.
• Umpan balik: Beri tahu pengguna tentang apa yang terjadi selama interaksi mikro. Berikut adalah animasi pengisian daya yang menunjukkan suara ping pendek yang dibuat oleh telepon dan pengisian dayanya.
• Loop dan Mode: Tentukan bagaimana mikrointeraksi bereaksi ketika mereka digunakan berulang kali, dan berbagai cara di mana mikrointeraksi beregenerasi.

“Interaksi mikro adalah praktik pengendalian diri, melakukan sebanyak yang Anda bisa dengan jumlah sesedikit mungkin, menerima kendala Anda dan fokus untuk melakukan satu hal dengan baik. Mantra Mies van der Rohe “less is more” juga harus menjadi mantra seorang perancang mikrointeraksi.

Mikrointeraksi untuk menginspirasi proyek Anda berikutnya

Di bagian ini, kami akan fokus pada interaksi mikro intuitif yang harus Anda bawa untuk putaran proyek berikutnya untuk meningkatkan keterlibatan dan popularitas pengguna. Selain itu, Anda dapat berbagi tips berguna dengan pengguna tanpa mengorbankan usaha tambahan atau ruang layar.

• Tinjau prosesnya

Hampir setiap formulir atau proses memerlukan semacam mode konfirmasi dari pengguna untuk melanjutkan ke langkah berikutnya. Untuk membuat interaksi mikro ini menarik bagi pengguna, buat beberapa perubahan pada gaya biasa yang membawa pengguna ke halaman baru setelah mengklik tombol dan memperkenalkan animasi pendek ke tombol kirim. Jika perlu, Anda bahkan dapat menambahkan teks yang menyertainya karena perubahan kecil namun menyegarkan ini akan sangat menarik bagi pengguna.

• Peringatan kesalahan

Tanpa peringatan kesalahan, Anda akan menjadi bodoh dan tersesat dalam perjalanan Anda melalui dunia digital.

Ini adalah prinsip-prinsip panduan yang akan membuat Anda tetap pada jalurnya, dan merupakan elemen penting tidak hanya dalam layanan digital, tetapi juga dalam kehidupan nyata.

Misalnya, jika baterai sangat rendah, seperti ketika baterai berada di bawah angka 5%, peringatan laju baterai yang rendah akan dilemparkan dan Anda harus menghubungkan pengisi daya dan melanjutkan.

Demikian pula, peringatan kesalahan sangat penting untuk menjaga semuanya berjalan dengan benar. Tujuan menerapkan peringatan kesalahan adalah untuk menggunakan informasi dukungan untuk menyajikan kesalahan kepada pengguna dengan cara yang jelas dan tidak mengintimidasi untuk meminimalkan kebingungan.

• Hamburger & Tutup Animasi

Menu hamburger menjauhkan sejumlah besar pilihan dari ruang layar dan membuat Anda tetap bersih dan rapi, sambil meningkatkan fokus Anda pada hal-hal penting.

Hanya satu ketukan yang memicu interaksi mikro dan menggeser keluar panel dengan opsi yang dapat dipilih, tetapi ikon tutup menggeser panel kembali. Desainer dapat dengan lancar beralih antara hamburger dan ikon tertutup untuk desain yang lebih konsisten, dan harus bereksperimen dengan menu hamburger untuk meningkatkan nuansa konten yang imersif.

• Animasi obrolan

Mikrointeraksi obrolan itu sendiri merupakan kumpulan interaksi mikro yang lebih kecil.

Mari kita lihat perjalanan menggunakan chatbot situs web, misalnya, mengklik ikon obrolan memicu jendela obrolan. Indikator input muncul, dan pengguna lain mengetik pesan.

Pesan yang dimasukkan dapat dianimasikan dengan menekan tombol kirim. Emoji dapat dianimasikan dalam pratinjau, jadi pilihannya bukan hanya ketukan tumpul di layar.

Misalnya, Facebook Messenger menggunakan interaksi mikro yang halus, seperti gelembung obrolan yang berkembang menjadi pop-up ukuran penuh untuk percakapan, emoji animasi, dan mengirim suka berukuran dinamis dalam obrolan.

• Interaksi tombol tindakan

Tombol tindakan adalah bagian penting dari desain apa pun saat memulai atau melakukan tugas di aplikasi Anda.

Mereka telah menjadi di mana-mana dan melakukan berbagai kegiatan tergantung pada aplikasi dan aplikasi. Tindakan yang paling sering ditetapkan termasuk membuat, mengedit, mengirimkan, membagikan, dan menghapus. Mereka dapat diperbaiki di beberapa tempat atau mengambang (biasanya sudut) di layar untuk meminimalkan gangguan dan meningkatkan keterjangkauan.

Interaksi mikro dengan tombol-tombol ini mencakup animasi dan transisi yang dirancang dengan cerdik yang, ketika diketuk, pada prompt pesan, konfirmasi cepat.

Dengan memperhatikan bentuk, warna, ukuran, dan penempatan, Anda dapat menciptakan pengalaman pengguna yang berkesan yang akan meninggalkan kesan jangka panjang pada pengguna Anda.

• Animasi loader

Jika aplikasi atau situs web  Anda membutuhkan waktu lebih dari  dua  detik untuk memproses informasi dan melanjutkan ke langkah berikutnya, menerapkan loader sangat penting untuk selalu memberikan informasi kepada pengguna.

Loader modern intuitif dan cantik, tetapi mereka sering kekurangan interaksi pengguna dan tidak harus menjadi momen yang membosankan untuk menunggu di layar pemuatan. Loader interaktif dapat membuat proses menunggu lebih informatif dan menarik.

Contoh terkenal dari pemuat interaktif adalah dari video game bernama Skyrim, yang memungkinkan Anda untuk melihat model 3D dari berbagai karakter dan binatang buas permainan saat memuat.

Banyak game kuno menggunakan teknik ini dan membuat pemain terhibur selama proses pemuatan.

• Peta Perjalanan

Peta perjalanan pada dasarnya melacak dan melaporkan proses yang dilalui pelanggan di aplikasi Anda.

Mereka biasanya digambar dengan desain yang lebih mendasar dan memiliki sedikit fokus pada pengalaman pengguna. Namun, dengan perawatan yang tepat, peta perjalanan dapat dirombak secara signifikan dengan memperkenalkan mikrointeraksi dalam bentuk animasi, warna, dan pesan roti panggang, karena berisi sejumlah besar komponen kecil, seperti tombol, kartu, dan menggambarkan sejumlah besar informasi. Dengan memahami perjalanan pengguna, Anda dapat belajar banyak tentang cara mendekati desain ulang untuk meningkatkan konektivitas.

• Seret &lepas unggahan

Pengguna biasa menemukan kotak unggahan file dalam beberapa cara di sebagian besar situs web dan aplikasi. Meskipun ini penting, cara Anda menarik dan melepas file adalah cara intuitif untuk mengunggah file. Ini seperti menjelajah dan mengunggah file, tetapi drag-and-drop meningkatkan kreativitas dan mengarah ke interaksi mikro yang lebih baik.

Menyoroti target drop dengan animasi adalah cara yang bagus untuk memandu pengguna dan dapat dikombinasikan dengan animasi unggahan unik yang sesuai dengan keseluruhan tema.

• Mikrointeraksi tab bar

Bilah tab, yang biasa terlihat di perangkat seluler, telah menjadi standar de facto yang memungkinkan navigasi instan ke tab.

Sekarang lebih mudah untuk hanya mengambil alih ke beberapa halaman dan bagian dalam aplikasi, meningkatkan kegunaan secara keseluruhan. Tersedia dalam ratusan desain dan animasi, tab ini dapat disembunyikan atau ditampilkan secara dinamis berdasarkan arah gulir atau jumlah konten di layar.

Mikrointeraksi, yang disediakan dalam bentuk peralihan tanpa batas antara tab dengan animasi halus, adalah suatu keharusan mutlak dalam desain seluler apa pun.

Beberapa mikrointeraksi yang umum digunakan  :

• Tanggapan Facebook termasuk suka, cinta, haha, wow, sedih, marah, dan banyak lagi.
• Animasi seperti Twitter —
• Geser animasi
• Animasi pemberitahuan
• Menganimasikan bilah pencarian
•  Animasi pencarian otomatis
• Animasi Ajakan Bertindak
• Tarik dan perbarui
• Isi formulir
• Tombol Berlangganan dan bel notifikasi

Kesimpulan

Interaksi mikro memiliki banyak kemungkinan yang cenderung diabaikan oleh desainer. Mengingat fokus yang tepat, interaksi mikro ini, dikombinasikan dengan desain yang terencana dengan baik, dapat meningkatkan keterlibatan pengguna dan membangun rasa senang di antara pengguna. Memperhatikan detail seperti itu sangat penting dan sangat membantu dalam meningkatkan kualitas dan keunikan aplikasi Anda dan sangat meningkatkan pengalaman pengguna secara keseluruhan. Bagaimanapun, interaksi mikro inilah yang memisahkan pengalaman yang hampir tidak dapat diterima dari pengalaman yang jauh lebih menyenangkan, dan membuat pengguna kembali ke aplikasi Anda untuk mendapatkan lebih banyak lagi.

Catatan: Untuk menghilangkan berbagai jenis masalah, saya ingin memperingatkan Anda tentang fakta bahwa artikel ini hanya pendapat pribadi saya yang ingin saya bagikan dan Anda memiliki hak untuk tidak menyetujuinya.