UX sangat penting untuk bagaimana pengguna berinteraksi dengan dan memandang merek kita. Semakin kita memahami tentang pengguna kita, semakin memungkinkan kita untuk memberikan apa yang mereka butuhkan dengan cara yang mereka inginkan dan harapkan. Seiring perkembangan teknologi, penyedia layanan diharapkan untuk membuat perjalanan pelanggan menjadi lebih sederhana dan menyenangkan di setiap tahap, dan seringkali tanpa disadari, bagi pengguna, detail desain interaksi yang lebih kecil ini membuat perbedaan antara produk yang dapat diterima atau fungsional dengan produk yang hebat.
Apa yang dimaksud dengan Interaksi Mikro?
Menurut Nielsen Norman Group,
Interaksi Mikro adalah pasangan pemicu-umpan balik di mana (1) pemicunya dapat berupa tindakan pengguna atau perubahan status sistem; (2) umpan baliknya adalah respons yang ditargetkan secara sempit terhadap pemicu dan dikomunikasikan melalui perubahan kecil yang sangat kontekstual (biasanya visual) pada antarmuka pengguna.
Interaksi mikro adalah (umumnya) animasi kecil dan halus yang membuat aplikasi digital menjadi lebih menarik, intuitif, menarik, dan efisien. Interaksi mikro meningkatkan kualitas pengalaman pengguna, menambahkan validasi pada tindakan dan sering kali dengan hiburan yang meningkatkan kekuatan merek.
Tidak selalu berupa animasi visual; bisa juga berupa haptic atau audio. Jam tangan olahraga Anda mungkin berdengung saat Anda mendekati belokan atau memasuki zona detak jantung yang berbeda, atau notifikasi Anda memutar suara yang Anda kenali yang diasosiasikan dengan aplikasi perpesanan, akun email, atau pencapaian tertentu.
Manfaat Interaksi Mikro
Meskipun terlihat seperti sentuhan kecil yang memungkinkan penciptanya untuk "pamer", namun manfaatnya sangat banyak dan bernilai nyata. Kita mengalami ratusan sentuhan kecil yang rapi ini sepanjang kehidupan kita sehari-hari, sebagian besar tanpa menyadarinya.
- Mendorong keterlibatan
- Meningkatkan kepuasan pengguna
- Mengurangi frustrasi
- Memberikan umpan balik sistem
- Memberi informasi kepada pengguna secara real time
- Menampilkan status sistem atau proses
- Meningkatkan kegunaan
- Membuat produk lebih intuitif dan interaktif
- Mengurangi kekurangan kegunaan
- Memperkenalkan interaksi UI yang lebih halus
- Mempercepat perjalanan pelanggan
- Mencegah kesalahan pengguna
- Menyederhanakan tugas-tugas yang kompleks
- Proses gamifikasi, menjadikannya lebih menyenangkan, lengket, dan menarik, sehingga meningkatkan retensi
- Menegakkan tema, suara, dan nada merek
Praktik Terbaik Desain Interaksi Mikro
Mengidentifikasi dan Memahami Masalah Pengguna
Setiap produk, pengalaman, atau layanan yang baik dirancang untuk memecahkan masalah. Saat merancang interaksi mikro, mendefinisikan masalah-masalah tersebut dan membahas cara mengatasinya mungkin sudah jelas, namun masalah-masalah tersebut lebih mungkin terungkap selama riset pengguna.
Jaga Interaksi Mikro Tetap Alami
Desainer harus menghindari animasi aneh yang mempersulit atau membingungkan proses. Interaksi mikro bersifat alami dan lancar, memberikan umpan balik visual yang sederhana dan menambah nilai pada proses. Interaksi ini tidak boleh terlalu rumit, mengurangi fokus yang sebenarnya, atau menampilkan detail yang tidak perlu. Yang terpenting, mereka harus fokus pada satu tugas.
Menguji dan Mengulangi Temuan dari Riset Pengguna
Fase riset pengguna menciptakan kesempatan yang ideal untuk menemukan masalah dan peluang serta memastikan hasil terbaik. Sebagai spesialis riset UX, kami tidak dapat menekankan betapa pentingnya bagian dari proses UX ini.
Mendekonstruksi Desain Interaksi Mikro
Struktur Interaksi Mikro
Meskipun definisi Nielsen Norman Group sebelumnya menunjukkan bahwa interaksi mikro adalah sistem dua tahap, setiap interaksi memiliki empat bagian penting.
- Pemicu ? Baik yang dipicu oleh pengguna maupun sistem, ini adalah bagian pertama dari proses, yang memperingatkan pengguna tentang alat, tindakan, atau informasi penting. A pemicu yang diprakarsai pengguna dipicu oleh, seperti yang tersirat, permintaan pengguna dengan mengeklik, mengusap, atau lainnya. A pemicu yang diprakarsai oleh sistem akan aktif ketika perangkat lunak mendeteksi adanya kualifikasi tertentu yang terpenuhi.
- Aturan ? Aturan menentukan apa yang terjadi setelah pemicu awal. Jika pengguna mengeklik, mengusap, mengetuk, atau berbicara, apakah animasi akan diputar, proses yang membantu diluncurkan, pengingat diatur, atau item ditambahkan ke keranjang?
- Umpan balik ? Memberikan informasi kepada pengguna untuk memastikan mereka merasa aman dan permintaan mereka sedang diproses. Validasi dan keamanan adalah pemain psikologis yang besar dalam pengalaman pengguna, sehingga menjaga semua orang mendapat informasi di setiap tahap memberikan pembaruan tentang status sistem dan pukulan dopamin kecil yang membuat pengguna senang.
- Loop dan Mode ? Tahap terakhir menentukan apakah tindakan tersebut dapat diulang atau merupakan transaksi satu kali. Loop dan mode menentukan meta-aturan setiap mircrointeraction: gesekan untuk memuat ulang halaman atau meminta Siri menjawab pertanyaan Anda dapat dilakukan sebanyak yang diperlukan (loop), sedangkan menambahkan item ke keranjang hanya dilakukan sekali (kecuali, tentu saja, Anda menambahkan opsi untuk "beli yang lain" atau "edit detail pembelian").
Contoh Interaksi Mikro
Pilihan contoh kami sama sekali tidak lengkap; ini hanya merupakan serangkaian penggunaan yang umum. Semua itu hanyalah beberapa elemen digital yang mungkin Anda alami setiap hari yang menambah nilai pada pengalaman online Anda, namun sering kali dianggap remeh.
Bilah gulir
Pada tahun-tahun awal Internet, scrollbar memiliki fungsi fisik: untuk dipegang dan digerakkan untuk menavigasi halaman. Sekarang, scrollbar adalah fitur animasi yang menunjukkan di halaman mana kita berada dan seberapa banyak konten yang ada di halaman tersebut.
Tarik untuk Menyegarkan Animasi
Sebuah fitur umum pada ponsel cerdas, interaksi mikro tarik untuk menyegarkan dapat memuat ulang halaman, menarik email baru, memperbarui prakiraan cuaca, dan banyak lagi. Roda yang berputar, gif bermerek, atau bilah kemajuan memberi tahu kita bahwa permintaan kita telah dikenali dan sedang diproses.
Animasi Geser
Di mana aplikasi kencan akan berada tanpa gesekannya yang terkenal itu? Animasi tanda silang, tanda centang, atau debar hati memberikan umpan balik waktu nyata atas keputusan kita.
Alarm Digital
Contoh respons pendengaran terhadap pemicu yang diprakarsai oleh sistem: pada waktu tertentu, alarm Anda akan berbunyi. Namun, pada ponsel cerdas, tablet, atau komputer Anda, alarm ini didukung oleh umpan balik visual yang menuntut respons untuk menyelesaikan tugasnya.
Pemberitahuan
Hal yang sama juga berlaku untuk notifikasi. Umpan balik audio dan visual memberikan pembaruan dan peringatan mengenai acara, opsi, atau promosi yang diminta (dan sering kali, untuk acara yang tidak Anda daftarkan!), yang dirancang untuk menarik kembali pengguna yang sudah tidak aktif.
Kesalahan kata sandi
Daripada beralih ke halaman kesalahan baru yang mengharuskan Anda melengkapi kolom input berulang kali, validasi sebaris menghemat waktu dan rasa frustrasi. Selain itu, pengaturan akun baru dapat disederhanakan dengan umpan balik kesalahan kata sandi sebaris, seperti memastikan jumlah huruf, angka, dan karakter khusus yang benar.
Hotspot orientasi
Ada banyak hal yang bisa dipelajari saat Anda menjelajahi perangkat lunak atau platform baru. Entah itu titik kecil yang berdenyut atau gelembung ucapan yang ditempatkan dengan baik, pengguna langsung tahu cara mengikuti tutorial yang diprakarsai oleh sistem ini. Terlalu banyak animasi pada halaman sekaligus akan membuat pengguna kewalahan dan kikuk, jadi dengan mengikuti jalur yang sudah ditetapkan, pengguna baru akan belajar cara menavigasi fitur dan mencernanya dengan cara yang paling mudah, satu per satu.
Status obrolan dan pesan online
Memberikan umpan balik visual kepada pengguna aplikasi perpesanan adalah contoh yang bagus untuk membuat aplikasi menjadi lengket. Dengan tiga titik yang memantul, kita segera mengetahui bahwa penerima telah membaca pesan kita dan merespons. Atau, di WhatsApp, misalnya, umpan balik visual ada di bagian atas halaman, yang memberi tahu kapan penerima sedang online, jauh, atau mengetik. Suka atau tidak suka, tanda centang biru ganda itu memberikan informasi langsung tentang pesan Anda.
Banyak situs web yang memiliki banyak sekali informasi untuk dibagikan, sehingga membutuhkan arsitektur informasi yang terstruktur dengan baik dan mudah dinavigasi. Dengan begitu banyak informasi dan hanya tersedia satu layar, yang sering kali berukuran kecil, menyelipkan semuanya dengan rapi di balik ikon yang mudah dikenali (tiga garis horizontal yang dikenal sebagai hamburger), ikon-ikon tersebut dapat dianimasikan untuk bergeser ke dalam tampilan ketika pengguna mengeklik setiap kategori, untuk membuat pencarian yang kita inginkan menjadi sederhana dan mudah.
Membuat proses pengisian formulir dan pembayaran menjadi lebih efisien
Mendapatkan pesan kesalahan yang tak terduga bisa sangat membuat frustrasi, sehingga banyak formulir dan checkout online yang memiliki interaksi mikro yang dipicu oleh pengguna untuk menambahkan pencegahan kesalahan, sehingga menyederhanakan prosesnya. Entah itu validasi sebaris untuk format email, saran isian yang harus diisi, atau memperkenalkan kotak kalender untuk menentukan tanggal yang tepat, semuanya dirancang untuk membawa kita ke garis akhir tanpa harus kembali untuk memperbaiki kesalahan yang mungkin terlewatkan. Teknik ini juga menyederhanakan proses pembuatan akun, membuat pendaftaran lebih mudah dan kemungkinan ditinggalkan pengguna lebih kecil.
Efek mouseover dan perubahan kursor
Kami terbiasa menggulirkan gambar, kotak informasi, dan slide untuk menguji apakah gambar, kotak informasi, dan slide tersebut dapat diklik, tetapi dengan adanya animasi instruksi di dalamnya, seperti "klik untuk mengunjungi halaman kontak kami" atau "tahan dan gerakkan untuk mengurutkan ulang pilihan Anda", akan memberikan jenis umpan balik yang tepat bagi pengguna yang terlibat yang mereka cari.
Perluasan kotak pencarian
Kotak pencarian yang diperluas dengan opsi yang sudah ditentukan sebelumnya atau secara otomatis menampilkan saran saat Anda mengetik adalah contoh bagus lainnya untuk menambahkan fungsi dan nilai pada UX produk dan pengguna Anda.
Humanisasi kotak obrolan
Untuk menciptakan pengalaman chatbox yang lebih emosional, animasi responsnya diatur waktunya agar efisien tetapi juga mewakili perilaku manusia. Setelah pengguna mengirimkan pertanyaan atau permintaan, mereka akan melihat tiga titik yang memantul yang menandakan bahwa seseorang sedang mengetik meskipun itu adalah respons AI. Memberikan avatar manusia pada kotak obrolan Anda akan memberikan hubungan emosional yang sama seperti yang Anda rasakan terhadap seseorang.
Cara Cerdas Menggunakan Animasi
Menambahkan informasi, promosi, atau informasi ke layar tunggu saat bilah kemajuan Anda meluas, berputar, atau memantul di layar akan menambah nilai bagi pengguna Anda. Ini adalah peluang besar untuk meningkatkan penjualan atau mengedukasi pembeli, pengguna, atau anggota tentang produk yang mungkin belum mereka jelajahi.
Jika sesuai dengan merek Anda, menambahkan keisengan atau lelucon (kita semua pernah melihat halaman 404 yang menyenangkan dan membuat kita tersenyum) mungkin tidak akan menambah apa pun secara langsung pada kunjungan pengguna Anda, tetapi akan memperkuat hubungan pengguna Anda, sehingga menambah loyalitas pelanggan.
Contoh Interaksi Mikro yang Sukses untuk Menginspirasi Anda
Kita semua tahu elemen situs web dan aplikasi mana yang paling mengesankan bagi kita, yang menambah nilai pada pengalaman kita dengan membuat interaksi kita lebih mudah, lebih menyenangkan, dan pada akhirnya lebih bermanfaat. Berikut ini adalah beberapa hal yang secara signifikan mengubah cara kami menggunakan produk digital kami.
Fitur Facebook React
Ketika Facebook mengganti tombol suka dari jempol sederhana menjadi pilihan reaksi - dengan menekan dan menahan ikon asli - setiap pilihan emotif baru memiliki ikon dan animasi kecil yang unik. Tidak diragukan lagi, hal ini mengubah cara kita memberi tahu orang lain tentang perasaan kita dengan cara tercepat dan sesederhana mungkin.
Solusi Apple dan Google untuk Kontrol Suara
Baik Apple maupun Google perlu memberi tahu pengguna bahwa permintaan kontrol suara mereka sedang ditangani. Seluruh proses dilakukan dengan umpan balik visual yang minimal namun sederhana dan cerdas.
Saat Anda mengajukan permintaan, titik-titik mengambang Google Assistant muncul untuk memberi tahu Anda bahwa ia mendengarkan; titik-titik tersebut berubah menjadi gelombang suara untuk memberi tahu Anda bahwa ia menangkap suara Anda saat Anda berbicara, dan memberikan umpan balik dengan responsnya. Siri melakukan hal yang sama, meskipun dengan citra mereknya yang abstrak, bergetar dan berubah bentuk untuk menunjukkan bahwa ia terkunci pada suara Anda.
Ringkasan
Menciptakan interaksi yang lancar yang mengurangi rasa frustasi dan memungkinkan pengguna untuk berpindah dari satu kondisi atau tahap ke tahap lainnya dengan lancar sangat penting untuk pengalaman pengguna yang ideal. Interaksi mikro yang dirancang dan disampaikan dengan baik memberikan hal tersebut.
Sebagai peneliti UX, peran kami adalah menentukan versi yang ideal bagi mereka yang merancang interaksi mikro. Riset dan pengujian pengguna memungkinkan kami untuk mengasah performa terbaik dengan pengujian A-B dan prototipe. Fase riset pengguna mengurangi kekurangan dalam pengiriman dengan cara yang sama seperti banyak interaksi mikro yang berakhir pada pengiriman formulir dan proses pembayaran.
Jika Anda ingin tahu lebih banyak tentang riset pengguna yang dapat membantu Anda menemukan peluang inovasi untuk meningkatkan interaksi mikro dan desain pengalaman pengguna, kirimkan email kepada kami di hello@ux247.com.
[Baru-baru ini kami menerbitkan halaman yang mengeksplorasi interaksi mikro dalam desain UX, seperti yang kami yakini, sebagai elemen penting bagi pengguna [...]
[...] Animasi konfirmasi dan interaksi mikro tertentu [...]