UX Lebih Baik Melalui Interaksi Mikro

Saat mendesain produk, ada banyak cara untuk meningkatkan pengalaman pengguna, termasuk mendefinisikan persona, arsitektur informasi yang terstruktur dengan baik, dan konten yang ditulis dengan cermat. Namun setelah struktur tingkat tinggi ini ditetapkan, menciptakan kesenangan bagi pengguna hadir dalam detail desain interaksi yang lebih kecil .

Detail ini, yang dikenal sebagai interaksi mikro , adalah momen individual dalam produk yang dirancang untuk menyelesaikan satu tugas sekaligus meningkatkan aliran produk alami. Menggesek ke atas untuk menyegarkan data, menyukai konten, atau mengubah pengaturan adalah semua interaksi mikro. Mereka juga dapat menyertakan animasi UI sederhana—misalnya, cara menu meluncur masuk saat diketuk, atau kartu meluncur dari layar saat digesek.

Seringkali interaksi mikro bahkan tidak disadari oleh pengguna, tetapi detail halusnya membuat produk lebih menyenangkan dan lebih mudah digunakan , dan karenanya meningkatkan pengalaman penggunanya.

Manfaat Interaksi Mikro

Interaksi mikro dan animasi UI sangat penting sehingga mereka dapat membuat atau menghancurkan desain—atau seperti yang dikatakan Charles Eames, dari desain furnitur dan arsitektur terkenal:

Detailnya bukan detailnya. Mereka membuat desain.

Beberapa manfaat utama dari menggabungkan interaksi mikro ke dalam produk adalah:

• Menciptakan efek emosional positif pada pengguna karena interaksi UI yang lebih lancar
• Memberikan umpan balik langsung kepada pengguna berdasarkan tindakan yang telah mereka ambil
• Memandu pengguna melalui aplikasi dengan cara yang lebih lancar dan intuitif
• Mendorong pengguna untuk berinteraksi dengan aplikasi dengan menanggapi pemberitahuan atau saat berbagi konten
• Mencegah kesalahan pengguna

Praktik Terbaik Desain Interaksi Mikro

Sekarang kita telah menetapkan beberapa definisi dan konteks seputar apa yang mikrointeraksi lakukan, dan memberikan contoh bagaimana mereka meningkatkan pengalaman pengguna, mari kita bahas praktik terbaik untuk membuat mikrointeraksi.

Identifikasi dan Pahami Masalah Pengguna

Aturan pertama dalam desain pengalaman pengguna apa pun adalah mengungkap dan memahami masalah pengguna—tidak berbeda untuk interaksi mikro. Cara terbaik untuk memahami apa yang dibutuhkan pengguna adalah dengan melakukan survei atau wawancara, atau mengamati perilaku melalui riset pengguna. Desainer toptal Ivan Annikov membahas lebih dalam tentang memahami kebutuhan pengguna dalam artikelnya, "Going Guerrilla: Tips dan Alternatif Penelitian UX yang Terjangkau."

Jaga agar Interaksi Mikro tetap Alami

Tujuannya adalah untuk menjembatani kesenjangan antara pengguna dan produk dengan cara yang terasa intuitif dan alami, jadi hindari animasi aneh yang terlalu lama dimuat atau dapat mengalihkan perhatian pengguna. Sebaliknya, buat desain yang mengalir mulus dengan produk. Kehalusan adalah kunci dalam interaksi mikro. Jangan biarkan pengguna bingung dan berpikir, “Apa itu?”

Uji dan Ulangi Temuan dari Pengujian Pengguna

Bahkan desainer berpengalaman jarang mendapatkan desain yang benar-benar tepat pada percobaan pertama. Itu sebabnya menggunakan proses pengujian pengguna dan desain berulang adalah cara sederhana untuk mengurangi kelemahan kegunaan sebelum peluncuran produk.

Selama fase pengujian pengguna, interaksi mikro diuji dan dianalisis untuk kegunaan dan direvisi selama fase desain berikutnya. Proses ini diulang sampai masalah kegunaan dan titik nyeri diperbaiki.

Ikuti Struktur Interaksi Mikro

Menurut Dan Saffer, Perancang Produk Staf Senior di Twitter dan penulis "Microinteractions: Designing with Details," ada empat bagian dari interaksi mikro.

1. Pemicu — Pemicu memulai interaksi mikro. Salah satu jenis pemicu adalah sakelar sakelar yang menghidupkan dan mematikan fungsionalitas.
2. Aturan — Aturan menentukan bagaimana interaksi mikro merespons pemicu dan menentukan apa yang terjadi selama interaksi. Misalnya, aplikasi senter menggunakan tombol sebagai pemicu yang menyalakan dan mematikan lampu.
3. Umpan Balik — Umpan balik memberi tahu pengguna apa yang terjadi selama interaksi mikro. Contoh umpan balik adalah formulir pendaftaran dengan validasi sebaris—warna batas berubah menjadi hijau jika bidang diisi dengan benar, dan berubah menjadi merah jika ada yang salah. Dengan cara ini pengguna langsung tahu ada yang benar atau salah.
4. Loops and Modes — Loops dan mode menentukan meta-aturan interaksi mikro dan bagaimana interaksi mikro berubah saat digunakan berulang kali. Misalnya, di eCommerce, tombol “Beli sekarang” mungkin berubah menjadi “Beli yang lain” ketika pengguna telah membeli item sebelumnya.

Mendekonstruksi Desain Interaksi Mikro

Untuk menunjukkan proses pemikiran di balik perancangan interaksi mikro, mari kita dekonstruksi interaksi mikro oleh Google: interaksi mikro saran nama file di Google Documents.

Interaksi mikro ini mengambil baris pertama dokumen dan menyarankan potongan teks itu sebagai nama untuk dokumen, membuat proses pembuatan nama lebih intuitif.

Proses merancang interaksi mikro sama dengan tugas desain apa pun: mengidentifikasi titik kesulitan pengguna dan memperbaikinya. Sambil mengingat praktik terbaik sebelumnya, mari mulai mengidentifikasi masalahnya.

Masalah Pengguna

Cara mudah dan intuitif untuk menjaga dokumen tetap teratur adalah dengan menamainya secara deskriptif. Di sebagian besar editor teks, bidang "Beri nama dokumen Anda" tetap kosong, meskipun ada kemungkinan besar nama file pada akhirnya akan berkorelasi dengan konten dokumen. Ini adalah proses yang layak ditangani dengan interaksi mikro.

Solusi Google

Google Documents menangani ini dengan dua cara, tergantung pada pilihan pengguna: 1) Pengguna dapat mengeklik bidang nama dan langsung mengubah nama dokumen sebelum mengetik konten apa pun, dan mengubah "Dokumen tanpa judul" menjadi nama pilihan mereka, atau 2 ) Setelah pengguna mengetik baris pertama teks, Google akan otomatis mengisinya sebagai nama dokumen. Pengguna dapat menyimpan ini apa adanya, atau mengubahnya.

Mari kita periksa detailnya:

Pemicu

Mungkin ada beberapa kemungkinan pemicu untuk memberi nama dokumen, menggunakan fungsi File > Save as menu, atau menekan cmd+s pada Mac ( ctrl+s pada Windows) pada keyboard seperti pada aplikasi desktop. Tetapi tidak satu pun dari ini memanfaatkan sifat interaktif web, dan mereka tidak secara khusus meningkatkan aliran pengguna.

Sebagai gantinya, pemicu utama Google Documents adalah dengan mengeklik bidang nama dokumen. Status hover di bidang menampilkan tooltip "Ganti nama". Pemicu sekunder adalah File > Rename , yang menyoroti bidang input nama.

Aturan

Aturan menentukan apa yang terjadi setelah mengklik pemicu. Dalam hal ini, baris pertama teks akan muncul sebagai nama dokumen. Tetapi bagaimana jika pengguna tidak ingin memiliki baris teks pertama sebagai namanya? Ketika pengguna mengklik bidang input nama, semua teks dipilih dan akan dihapus dengan penekanan tombol apa pun, sehingga memudahkan pengguna untuk membuat nama baru.

Masukan

Mengubah warna batas bidang masukan adalah pola interaksi yang umum, dan itulah yang digunakan Google Documents di sini untuk memberikan umpan balik langsung kepada pengguna.

Loop dan Mode

Pengguna berhasil membuat nama dokumen dan pemicu tetap di tempatnya dengan satu perbedaan utama: Dokumen kini telah diberi nama.

Pada titik ini, pengguna mungkin hanya ingin mengubah beberapa huruf atau menambahkan tanggal pada nama, daripada mengubah seluruh nama yang telah ditentukan sebelumnya. Dalam hal ini, berbeda dengan aturan sebelumnya, aturan untuk menyorot seluruh nama dokumen dinonaktifkan.

Hasil

Setelah mendefinisikan masalah dan berfokus pada keempat bagian interaksi mikro, hasilnya adalah pengalaman yang lebih alami dan ramah pengguna. Solusi penamaan file Google Docs membantu pengguna tetap teratur dengan file bernama benar dan menyederhanakan proses penamaan dokumen.

Interaksi Mikro dalam Tindakan: Contoh Dunia Nyata

Menyusun Ulang Daftar Tugas

Pengingat Apple iOS membantu pengguna tetap teratur dan menghilangkan beberapa langkah dengan memungkinkan mereka mengetuk, menahan, dan menyeret item daftar untuk mengubah tempatnya dalam urutan daftar.

Bereaksi terhadap Postingan Media Sosial

“Menyukai” konten dengan mengklik tombol atau ikon jempol ke atas telah menjadi pola desain UX yang umum di banyak aplikasi dan situs web. Facebook membangun interaksi ini dengan menambahkan beberapa opsi selain "menyukai" melalui interaksi mikro yang halus.

Sorotan Teks Bermerek

Di sebagian besar browser, dimungkinkan untuk mengganti warna pemilihan teks default. IKEA menggunakan pola interaksi ini untuk menambahkan detail branding yang halus dengan menyorot teks dalam warna kuning dan biru yang ikonik.

Berbagi Lokasi Anda

Google Hangouts mengasumsikan bahwa salah satu saat pengguna mungkin ingin membagikan lokasi mereka adalah ketika seseorang mengirim SMS “Di mana Anda?”

Saat pengguna melihat pesan ini, tombol “Bagikan lokasi Anda” muncul sebagai opsi kontekstual. Mereka kemudian dapat mengetuk tombol itu untuk mengirim peta lokasi mereka secara otomatis ke pengguna lain.

Menggesek untuk Memilih

Interaksi mikro dapat digunakan untuk menjawab pertanyaan sederhana ya atau tidak dalam aplikasi. Tinder melakukan ini dengan meminta pengguna menggesek ke kiri atau kanan (tidak/ya) tergantung pada apakah mereka suka atau tidak suka kemungkinan kecocokan mereka.

Ekspansi Pencarian

Aplikasi Google Inbox tidak hanya secara cerdas mengelompokkan email dengan bundel, tetapi juga dirancang untuk memungkinkan pencarian dengan suara, atau memilih dari kontak terbaru dengan satu ketukan.

Menambah Kecepatan Informasi Kontak Teman

SeatGeek menyederhanakan proses pengisian formulir dengan secara otomatis mengisi informasi dari kontak pengguna dengan mengetuk tombol “Tambah dari Kontak”.

Pelajari Lebih Lanjut Tentang Interaksi Mikro

Interaksi mikro adalah bagian penting untuk meningkatkan pengalaman pengguna, dan ada banyak sumber daya yang tersedia untuk mempelajari lebih lanjut tentangnya, beberapa di antaranya tercantum di bawah ini.

Untuk mempelajari lebih lanjut tentang interaksi mikro secara umum, kunjungi Microinteractions, situs web yang dibuat sebagai pendamping untuk buku yang disebutkan sebelumnya “Microinteractions: Merancang dengan Detail” oleh Dan Saffer. Di situs tersebut, terdapat penjelasan rinci tentang interaksi mikro serta informasi tentang asal usul interaksi mikro yang terkenal, seperti koreksi otomatis, pelengkapan otomatis, dan potong dan tempel. Bab pertama buku ini juga tersedia sebagai unduhan gratis.

Untuk inspirasi interaksi mikro, kunjungi Little Big Details, kumpulan interaksi mikro yang dikurasi dalam produk digital. Ini menunjukkan contoh bagaimana perusahaan seperti Apple, Trello, dan Stack Overflow mengimplementasikan interaksi mikro dan animasi UI.

Untuk mempelajari cara membuat interaksi mikro di Framer, baca Toptal Designer, artikel Wojciech Dobry, Tutorial Framer: 7 Interaksi Mikro Sederhana untuk Meningkatkan Prototipe Anda.

Beri tahu kami pendapat Anda! Silakan tinggalkan pemikiran, komentar, dan umpan balik Anda di bawah ini.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Prinsip Desain dan Kepentingannya
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Menjelajahi Prinsip Desain Gestalt
• Adobe XD vs. Sketch – Alat UX Mana yang Tepat untuk Anda?
• 10 Hasil Kerja UX yang Digunakan Desainer Teratas