Memahami Interaksi Mikro dalam Desain Aplikasi Seluler

Kegunaan adalah salah satu komponen kunci dari desain UI seluler. Kegunaan luar biasa sering melibatkan interaksi mikro yang mana respons dan perilaku kecil dari antarmuka mendiktekan bagaimana UI harus digunakan. Interaksi mikro ini menentukan perilaku, mendorong keterlibatan, dan membantu pengguna memvisualisasikan cara kerja antarmuka.

Antarmuka digital adalah perantara antara pengguna dan tujuan yang diinginkan. Perancang antarmuka menciptakan pengalaman yang membantu pengguna melakukan tugas-tugas tertentu. Misalnya, aplikasi daftar agenda memiliki antarmuka yang membantu pengguna mengatur tugas mereka. Sama seperti aplikasi Facebook memberi pengguna antarmuka untuk berinteraksi dengan akun Facebook mereka.

Dalam panduan ini, saya akan mempelajari lebih jauh interaksi mikro untuk aplikasi seluler. Interaksi kecil mungkin tampak sepele tetapi mereka dapat memiliki dampak yang sangat besar pada kualitas pengalaman pengguna. Ketika dilakukan dengan benar, interaksi mikro terasa seperti bagian asli dari pengalaman pengguna seluler yang menyeluruh.

Kekuatan Interaksi Mikro

Dalam kebanyakan kasus, tujuan dari interaksi mikro adalah untuk berikan umpan balik berdasarkan pada tindakan pengguna. Ini dapat membantu pengguna memvisualisasikan bagaimana antarmuka bergerak atau berperilaku, meskipun itu murni digital di layar datar.

Interaksi mikro memiliki kekuatan karena mereka buat pengalaman ilusi. Slider on / off tidak benar-benar bergerak seperti saklar fisik, tetapi mereka dapat terlihat bergerak seperti ini melalui animasi.

Saya menemukan kutipan luar biasa dalam posting ini yang membahas nilai besar interaksi mikro untuk aplikasi seluler:

“Produk terbaik melakukan dua hal dengan baik: fitur dan detail. Fitur itulah yang menarik orang ke produk Anda. Detail adalah apa yang membuat mereka tetap di sana. Dan detail adalah apa yang sebenarnya membuat aplikasi kita menonjol dari pesaing kita.”

Itu detail kecil mungkin tampak tidak signifikan dari sudut pandang pengembangan, tetapi dari sudut pandang pengalaman pengguna mereka benar-benar buat perbedaan antara UI aplikasi OK dan UI aplikasi luar biasa.

Interaksi mikro yang hebat membuat pengguna merasa dihargai untuk mengambil tindakan. Tindakan ini bisa jadi ulang dan tertanam ke dalam perilaku pengguna. Mereka dapat belajar bagaimana menggunakan aplikasi berdasarkan interaksi mikro yang lebih kecil ini. Ketika pengguna melakukan suatu perilaku, interaksi kecil ini menandakan "ya, Anda dapat berinteraksi dengan saya!"

Lihatlah contoh-contoh yang ditemukan dalam spesifikasi desain material Google. Dokumentasi sebenarnya memiliki seluruh bagian yang didedikasikan untuk gerakan materi. Hubungan spasial adalah bagian besar dari persamaan ini, tetapi gerak dapat menentukan lebih dari sekadar hubungan spasial.

Di sini adalah penggunaan animasi dan gerak yang paling umum dalam desain UI / UX seluler:

• Memandu pengguna di antara berbagai halaman
• Memandu pengguna melalui antarmuka untuk mengajarkan perilaku tertentu
• Menyarankan tindakan / perilaku yang dapat diambil pada halaman tertentu

Aplikasi seluler miliki apalagi ruang layar dari situs web. Ini dapat menyebabkan beberapa kesulitan mengajar pengguna cara menggunakan aplikasi. Tetapi bisa sangat sederhana jika Anda tahu bagaimana menerapkan interaksi mikro dengan benar.

Bagaimana Interaksi Mikro Bekerja

Interaksi mikro tunggal diaktifkan setiap kali pengguna menggunakan satu bagian antarmuka. Sebagian besar interaksi mikro respons animasi terhadap gerakan pengguna. Jadi gerakan menggesek akan merespons secara berbeda dari satu ketukan atau sentakan.

Blink UX melakukan posting hebat membahas detail kecil interaksi mikro. Animasi kecil ini harus mengikuti a proses yang dapat diprediksi bahwa pengguna dapat belajar untuk setiap interaksi dalam aplikasi.

Interaksi mikro memandu pengguna melalui antarmuka oleh menawarkan respons terhadap perilaku. Setelah pengguna tahu bahwa slider on / off dapat bergerak, mereka tahu itu interaktif. Berdasarkan respons, mereka juga akan tahu apakah pengaturan dihidupkan atau dimatikan. Ketika sebuah tombol terlihat seperti itu dapat diklik pengguna secara naluriah tahu mereka dapat berinteraksi dengannya.

Menurut UXPin, setiap interaksi mikro dasar dapat dibagi menjadi empat langkah, tetapi saya telah merangkum prosesnya menjadi tiga langkah.

1. Tindakan - itu pengguna melakukan sesuatu seperti jentik, geser, ketuk & tahan, atau interaksi lainnya.
2. Reaksi - itu antarmuka merespons berdasarkan apa yang perlu terjadi. Menggesek layar mungkin bergerak kembali dalam riwayat browser, atau mengetuk slider ON / OFF mungkin mematikan pengaturan.
3. Umpan balik - ini adalah apa pengguna benar-benar melihat sebagai hasil interaksi. Ketika pengguna menggesek kembali di peramban seluler, ia mungkin mengapung halaman sebelumnya hingga muncul "di atas" layar. Slider on / off mungkin meluncur dengan lancar atau tumbuh lebih besar ketika tekanan diterapkan ke layar.

Tindakan yang sangat kecil ini dapat dilakukan tanpa animasi, tetapi interaksi mikro yang hebat menawarkan a perasaan realistis ke antarmuka digital datar, yang sebagian besar datang dalam bentuk efek animasi realistis. Ini menghembuskan kehidupan ke antarmuka dan mendorong lebih banyak interaksi pengguna.

Cari Detailnya

Dengan melihat bagian-bagian kecil dari desain, Anda akan memahami bagaimana aplikasi harus menanggapi perilaku tertentu.

Tarik untuk menyegarkan adalah contoh yang baik dari interaksi mikro yang kini populer. Itu bukan bagian integral dari iOS ketika pertama kali diluncurkan, tetapi banyak aplikasi mengambil ide ini dan mulai bergerak dengannya. Sekarang tarik untuk me-refresh adalah perilaku yang diketahui sebagian besar pengguna hanya tahu untuk digunakan saat browsing UI feed. Hal yang sama dapat dikatakan tentang menu hamburger seluler yang semakin populer.

Buat setiap interaksi mikro realistis dan sederhana. Jangan berlebihan animasi karena mereka bisa menjadi membosankan jika terlalu detail dan sering digunakan. Pengguna tidak ingin kilau muncul setiap kali mereka mengetuk ikon menu. Mencapai keseimbangan dengan nilai asli yang berkomunikasi bagaimana antarmuka seharusnya bekerja tanpa berlebihan.

Melihat Beberapa Contoh

Saya pikir cara terbaik untuk mempelajari sesuatu adalah dengan melakukannya, dan cara terbaik kedua adalah mempelajari pekerjaan orang lain. Saya telah mengumpulkan sedikit Animasi interaksi mikro UI / UX dari pengguna Dribbble yang berbakat untuk menunjukkan kepada Anda bagaimana ini terlihat dalam mockup nyata.

Setiap aplikasi akan berbeda dan memiliki kebutuhan yang berbeda berdasarkan pada apa yang dilakukan aplikasi. Pada akhirnya sebagian besar pengguna menginginkan hal yang sama: aplikasi itu intuitif dan memberikan pengalaman pengguna yang berkualitas dengan interaksi mikro relatif terhadap perilaku pengguna.

1. UI Aplikasi Acara Beranimasi

Contoh pertama adalah fitur animasi kartu bagus yang dibuat oleh Ivan Martynenko. Anda akan melihat beberapa interaksi mikro dalam desain ini, terutama kartu menggesekkan dan bergerak melalui detail.

Saat mengetuk kartu, ukurannya bertambah. Dan ketika mengetuk tombol Berlangganan, foto profil pengguna meluncur ke dalam daftar pelanggan. Semuanya terasa sangat intuitif dan sangat alami untuk antarmuka.

2. Layar Latihan Interaktif

Animasi latihan seluler yang kreatif ini berasal dari desainer Vitaly Rubtsov. Ini demo pengguna menyimpan latihan mereka untuk satu set squat.

Perhatikan setiap animasi memiliki hal yang sama efek bouncing elastis ketika menu terbuka dan snap tertutup. Ini juga benar ketika aktivitas diperiksa sebagai "Selesai". Konsistensi adalah kunci dengan interaksi mikro karena semuanya harus terasa terhubung ke antarmuka yang sama.

3. Cari Interaksi Mikro Aplikasi

Pendek, manis, dan to the point. Saya pikir ini paling menggambarkan interaksi mikro aplikasi pencarian yang dirancang oleh Lukas Horak. Setiap animasi cepat tapi masih terlihat.

Ini adalah bagaimana Anda harus mendesain interaksi mikro menghindari kompleksitas yang berlebihan. Jika antarmuka akan memuat lebih cepat tanpa animasi lalu mengapa repot-repot menambahkannya? Animasi cepat membuat pengguna terus bergerak tanpa menghalangi pengalaman.

4. Interaksi Mikro Tujuan Kebugaran

Saya pikir Jakub Antalà ??  ?? Ã'Â-k benar-benar memukul yang ini keluar dari taman dengan microinteraction tujuan kebugarannya. Layar semua memiliki perasaan jiggly jell-o karena bentuk bergerak begitu lancar.

Namun antarmuka juga terasa solid dan bisa digunakan. Ini menunjukkan bahwa interaksi mikro yang dibuat dengan tujuan masih bisa menyenangkan dan menghibur tetapi juga fungsional dan pragmatis.

5. Tarik ke Refresh Animation

Inilah salah satu animasi tarik-untuk-menyegarkan favorit saya yang mutlak dibuat oleh tim di Ramotion. Ini bukan saja meniru cairan dengan aksi tarikan, tetapi animasi respon terhubung dengan lancar dari percikan cairan ke dalam lingkaran pemuatan.

Ini banyak perhatian terhadap detail adalah apa yang memunculkan keindahan sejati dalam interaksi mikro aplikasi seluler.

6. Tab Microinteraction

Widget tab cukup umum untuk aplikasi seluler karena layarnya yang lebih kecil. Saya sangat suka interaksi mikro ini yang dibuat oleh John Noussis, meskipun saya pikir ini akan lebih efektif pada kecepatan yang lebih cepat, tetapi animasinya sendiri sangat bagus dan dipikirkan dengan baik.

Panah jangkar tab meluncur ke kanan tepat saat konten baru memantul dari kanan. Ini memberi ilusi seluruh layar bergerak secara fisik ke kanan. Animasi ini sangat indah, tetapi karena sangat lambat saya pikir sebagian besar pengguna akan merasa terganggu setelah beberapa hari.

7. Preloading Animation

Saya belum banyak bicara tentang memuat bilah dalam posting ini, tetapi mereka sama berharganya dengan pengalaman keseluruhan. Sebagian besar pengguna tidak ingin menunggu data dimuat, tetapi mereka jelas tidak ingin menatap layar kosong saat memuat.

Bret Kurtz melakukan layar preloading luar biasa yang menyenangkan dan informatif. Pengguna sebenarnya bisa terhibur menonton ulangi animasi kecil ini. Mereka juga bisa diyakinkan bahwa aplikasi tersebut masih memuat data mereka dan belum jatuh.

Membungkus

Semua contoh ini dengan cemerlang menunjukkan nilai interaksi mikro. Aplikasi seluler mendapatkan nilai lebih banyak dari interaksi mikro karena pengguna menyentuh layar secara fisik dengan jari-jari mereka. Pengguna tidak mengetuk monitor desktop atau layar laptop mereka, tetapi semua orang mengetuk smartphone mereka karena memang itulah keadaan standar interaktivitas.

Itu adalah lebih banyak pengalaman pribadi, itulah sebabnya desain aplikasi seluler bisa seperti itu proses yang bernuansa. Bila dilakukan dengan benar, penambahan interaksi mikro seluler yang hebat dapat membangun a pengalaman pengguna ilusi yang kuat dari apa-apa selain piksel dan gerak.