Interaksi Mikro Berkembang: Cara Mendesainnya di 2023

Published
On 30/12/2022
By gusviradigital


Interaksi mikro bukanlah konsep baru dalam desain UX, tetapi terus menjadi semakin mengesankan. Kami telah berbicara tentang interaksi mikro di sini di Design Shack untuk sementara waktu karena mereka sangat penting untuk keberhasilan proyek web secara keseluruhan.

Interaksi 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 interaksi mikro pada tahun 2021 dengan contoh bagaimana teknik desain ini berkembang.

Desain untuk Fungsi

interaksi mikro di ux

Animasi plus penjelasan.

Biarkan frasa sederhana itu berputar di benak Anda saat Anda mulai berpikir tentang cara terbaik merancang interaksi 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 interaksi mikro menyediakan serangkaian informasi dalam hitungan mikrodetik:

  • Pemicu: Kapan interaksi mikro dimulai atau mengapa dimulai
  • Aturan: Apa yang membuat aksi/interaksi berhasil dan bagaimana cara kerjanya
  • Umpan balik: Bagaimana Anda tahu bahwa tindakan Anda dengan elemen berhasil melalui semacam isyarat
  • Putaran dan mode: Berapa lama interaksi 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 interaksi mikro yang solid dalam aksi.

Selamat bersenang-senang

interaksi mikro di ux

Interaksi 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 interaksi 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 interaksi mikro keadaan melayang juga.

Tunjukkan Kepribadian

interaksi mikro di ux

Salah satu interaksi mikro yang paling diremehkan yang mungkin sering Anda temui adalah bilah fitur reaksi Facebook. (Facebook juga menambahkan beberapa interaksi 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 interaksi 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

interaksi mikro di ux

Sementara beberapa interaksi mikro lebih eksplosif, banyak yang merupakan perubahan halus yang hampir tidak diperhatikan.

Interaksi mikro yang baik seharusnya hampir tidak terlihat. Anda tidak perlu memikirkannya atau mempertanyakan mengapa itu ada atau bagaimana berinteraksi 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 interaksi 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 interaksi sekunder yang terjadi dengan kubus di tengah layar. Anda dapat mengklik contoh untuk melihat cara kerja lapisan mikrointeraksi ini.

Desain untuk Harmoni dengan Konten

interaksi mikro di ux

Setiap interaksi 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.

Interaksi 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 interaksi 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

interaksi mikro di ux

Pikirkan tentang bagaimana beberapa alat yang Anda gunakan sehari-hari berfungsi saat Anda berinteraksi 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. Interaksi 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

Interaksi mikro mulai mendapatkan momentum sekitar tahun 2013 ketika Dan Saffer pertama kali menulis tentangnya dalam bukunya. Empat komponen yang dia uraikan saat itu masih menjadi bagian penting dari interaksi situs web kecil ini – pemicu, aturan, umpan balik, serta putaran dan mode.

Anda dapat melihat elemen-elemen umum ini di hampir setiap interaksi mikro jika Anda melihat lebih dekat.

Kami juga ingin melihat lebih banyak contoh interaksi mikro yang rapi. Bagikan dengan kami dan pastikan untuk menandai saya dan Design Shack di Twitter.



Source link

gusviradigital

gusviradigital

CV. Gusvira Digital Persada merupakan salah satu penyedia jasa layanan digital di Indonesia, dengan menawarkan berbagai kebutuhan untuk pemasaran produk

Related

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

logo-whatsappHubungi Kami
1
error: