Memahami Microinteractions dalam Reka Bentuk Aplikasi Mudah Alih

Kebolehgunaan adalah salah satu komponen utama reka bentuk UI mudah alih. Kegunaan hebat sering melibatkan microinteractions yang mana tindak balas dan perilaku kecil dari antara muka mendiktekan bagaimana UI harus digunakan. Microinteractions ini menentukan tingkah laku, menggalakkan penglibatan, dan membantu pengguna memvisualisasikan bagaimana antara muka harus berfungsi.

Antaramuka digital adalah orang tengah antara pengguna dan matlamat yang mereka inginkan. Pereka antara muka mencipta pengalaman yang membantu pengguna melakukan tugas tertentu. Contohnya, apl senarai todo mempunyai antara muka yang membantu pengguna menyusun tugas mereka. Sama seperti aplikasi Facebook memberikan pengguna antara muka untuk berinteraksi dengan akaun Facebook mereka.

Dalam panduan ini, saya akan menyelidiki lebih lanjut microinteractions untuk aplikasi mudah alih. Interaksi kecil mungkin kelihatan remeh tapi mereka boleh mempunyai kesan yang besar mengenai kualiti pengalaman pengguna. Apabila dilakukan dengan betul, microinteractions merasakan seperti bahagian sebenar pengalaman pengguna mudah alih yang menyeluruh.

Kuasa Mikrointeraksi

Dalam kebanyakan kes matlamat microinteraction adalah untuk memberikan maklum balas berdasarkan tindakan pengguna. Ini dapat membantu pengguna menggambarkan bagaimana antara muka bergerak atau berkelakuan, walaupun ia semata-mata digital pada skrin rata.

Microinteractions mempunyai kuasa kerana mereka mewujudkan pengalaman ilusi. Slider on / off tidak benar-benar bergerak seperti suis fizikal, tetapi mereka boleh kelihatan bergerak dengan cara ini melalui animasi.

Saya dapati petikan yang luar biasa dalam jawatan ini membincangkan nilai besar mikrointeraksi untuk aplikasi mudah alih:

“Produk terbaik melakukan dua perkara dengan baik: ciri dan butiran. Ciri-ciri yang menarik orang ke produk anda. Butiran adalah apa yang menyimpannya di sana. Dan butirannya sebenarnya yang membuat aplikasi kami menonjol dari persaingan kami.”

The butiran kecil mungkin kelihatan tidak penting dari segi pembangunan, tetapi dari segi pengalaman pengguna, mereka benar-benar buat perbezaan antara UI aplikasi OK dan UI aplikasi luar biasa.

Microinteractions yang hebat membuat pengguna berasa ganjaran untuk mengambil tindakan. Tindakan ini boleh berulang kali dan tertanam ke dalam tingkah laku pengguna. Mereka boleh belajar cara menggunakan aplikasi berdasarkan microinteractions yang lebih kecil ini. Apabila pengguna melakukan tingkah laku, interaksi kecil ini menandakan "ya, anda boleh berinteraksi dengan saya!"

Lihat contoh yang terdapat dalam spesifikasi reka bentuk bahan Google. Dokumentasi sebenarnya mempunyai seluruh seksyen yang khusus untuk gerakan material. Hubungan spatial adalah sebahagian besar dari persamaan ini, tetapi gerakan boleh menentukan lebih daripada sekadar hubungan spasial.

Disini adalah kegunaan animasi dan gerakan yang paling biasa dalam reka bentuk UI / UX mudah alih:

• Memandu pengguna di antara halaman yang berbeza
• Memandu pengguna melalui antara muka untuk mengajar tingkah laku tertentu
• Mencadangkan tindakan / tingkah laku yang boleh diambil pada mana-mana halaman yang diberikan

Apl mudah alih ada ruang skrin lebih sedikit daripada laman web. Ini boleh menyebabkan beberapa masalah mengajar pengguna cara menggunakan aplikasi. Tetapi ia boleh mengejutkan dengan mudah jika anda tahu bagaimana untuk melaksanakan microinteractions dengan betul.

Bagaimana Microinteractions berfungsi

Satu kebakaran mikrointeraksi tunggal apabila pengguna terlibat dengan satu bahagian antara muka. Kebanyakan mikrointeraksi adalah respons animasi kepada isyarat pengguna. Oleh itu, pergerakan swiping akan bertindak balas dengan cara yang berbeza daripada paip atau flick.

Blink UX melakukan jawatan yang hebat membincangkan butiran kecil mikrointeraksi. Animasi kecil ini harus mengikuti proses yang boleh diramalkan bahawa pengguna boleh belajar untuk setiap interaksi dalam permohonan.

Microinteractions membimbing pengguna melalui antara muka oleh menawarkan respons kepada tingkah laku. Sebaik sahaja pengguna tahu bahawa slider on / off boleh bergerak, mereka tahu ia interaktif. Berdasarkan tindak balas, mereka juga akan mengetahui jika tetapan dihidupkan atau dimatikan. Apabila butang kelihatan seperti ia boleh diklik pengguna secara naluriah tahu mereka boleh berinteraksi dengannya.

Menurut UXPin, setiap microinteraction asas boleh memecah menjadi empat langkah, tetapi saya merumuskan proses itu tiga langkah.

1. Tindakan - yang pengguna melakukan sesuatu seperti flick, sapu, ketik & tahan, atau beberapa interaksi lain.
2. Reaksi - yang antara muka bertindak balas berdasarkan apa yang perlu berlaku. Melayari skrin mungkin bergerak semula dalam sejarah penyemak imbas, atau mengetik slider ON / OFF mungkin mematikan tetapan.
3. Maklumbalas - ini adalah apa yang pengguna sebenarnya melihat hasil daripada interaksi. Apabila pengguna melompat kembali dalam penyemak imbas mudah alih, ia dapat mengaplikasikan halaman sebelumnya sehingga muncul "di atas" skrin. Slider on / off mungkin meluncur dengan lancar atau bertambah besar apabila tekanan digunakan pada skrin.

Tindakan yang sangat kecil ini dapat dicapai tanpa animasi, tetapi microinteractions yang hebat menawarkan a perasaan realistik kepada antara muka digital rata, yang sebahagian besarnya datang dalam bentuk kesan animasi yang realistik. Ini menghidupkan kehidupan ke dalam antara muka dan menggalakkan lebih banyak interaksi pengguna.

Lihat Butiran

Dengan melihat reka bentuk yang lebih kecil, anda akan memahami bagaimana aplikasi harus bertindak balas kepada tingkah laku tertentu.

Tarik untuk menyegarkan semula adalah contoh yang baik dari mikrointeraksi yang popular sekarang. Ia bukan sebahagian daripada IOS apabila ia mula dilancarkan, tetapi banyak aplikasi mengambil idea ini dan mula bergerak dengannya. Sekarang tarik untuk menyegarkan adalah tingkah laku yang diketahui yang kebanyakan pengguna hanya tahu menggunakan ketika melayari UI suapan. Perkara yang sama boleh dikatakan mengenai menu hamburger mudah alih yang telah berkembang dengan sangat popular.

Buat setiap mikrointeraksi realistik dan mudah. Jangan berlebihan animasi kerana mereka boleh menjadi membosankan jika mereka terlalu terperinci dan sering digunakan. Pengguna tidak mahu berkilau muncul setiap kali mereka mengetuk ikon menu. Sumbang keseimbangan dengan nilai tulen yang berkomunikasi bagaimana antara muka harus berfungsi tanpa pergi ke laut.

Melihat Beberapa Contoh

Saya fikir cara terbaik untuk belajar sesuatu adalah dengan melakukannya, dan cara terbaik kedua ialah mengkaji karya orang lain. Saya telah mengumpul segelintir kecil Animasi microinteraction UI / UX dari pengguna Dribbble yang berbakat untuk menunjukkan kepada anda bagaimana rupa ini dalam mockup sebenar.

Setiap aplikasi akan berbeza dan mempunyai keperluan yang berbeza berdasarkan apa yang aplikasinya. Pada akhirnya kebanyakan pengguna menginginkan perkara yang sama: aplikasi yang ada intuitif dan memberikan pengalaman pengguna yang berkualiti dengan microinteractions berbanding dengan tingkah laku pengguna.

1. UI App Acara Animasi

Contoh pertama adalah ciri animasi kad yang bagus yang dicipta oleh Ivan Martynenko. Anda akan perasan segelintir microinteractions dalam reka bentuk ini, terutamanya kad swiping dan bergerak melalui butiran.

Apabila mengetuk pada kad, saiznya bertambah. Dan apabila mengetik butang Langgan, foto profil pengguna meluncur ke dalam senarai pelanggan. Semuanya terasa sangat intuitif dan agak semulajadi untuk antara muka.

2. Skrin Latihan Interaktif

Animasi animasi mudah alih kreatif ini berasal dari pereka Vitaly Rubtsov. Ia demo pengguna menyimpan senaman mereka untuk satu set squats.

Perhatikan setiap animasi yang sama kesan melantun elastik apabila menu dibuka dan snap ditutup. Ini juga berlaku apabila aktiviti itu ditandakan sebagai "Selesai". Ketekalan adalah kunci dengan microinteractions kerana mereka semua perlu merasa disambungkan ke antara muka yang sama.

3. Cari Microinteractions App

Pendek, manis, dan tepat. Saya fikir ini adalah yang terbaik menerangkan mikrointeraksi aplikasi carian yang direka oleh Lukas Horak. Setiap animasi adalah cepat tetapi masih ketara.

Ini adalah bagaimana anda perlu merekabentuk microinteractions ke elakkan lebih kerumitan. Jika antara muka akan memuat lebih cepat tanpa animasi maka mengapa repot menambahnya? Animasi cepat teruskan pengguna yang bergerak tanpa bogging pengalaman.

4. Matlamat kecergasan Microinteraction

Saya fikir Jakub Antalà ??  ?? Ã'Â-k benar-benar memukul ini keluar dari taman dengan mikrointeraksi matlamat kecergasannya. Semua skrin mempunyai perasaan jiggly jell-o kerana ini bentuknya bergerak dengan lancar.

Namun antara muka juga terasa pepejal dan boleh digunakan. Ia menunjukkan bahawa mikrointeraktif yang dibuat dengan tujuan masih dapat menyenangkan dan menghiburkan tetapi juga berfungsi dan pragmatik.

5. Tarik semula Animasi

Berikut adalah salah satu animasi tarik kegemaran saya yang dicipta oleh pasukan di Ramotion. Ini bukan sahaja meniru cecair dengan tindakan tarikan, tetapi animasi respons bersambung dengan lancar dari percikan cecair ke dalam bulatan pemuatan.

Ini banyak perhatian kepada terperinci adalah apa yang menarik keindahan sebenar dalam mikrointeraksi aplikasi mudah alih.

6. Tab Microinteraction

Tab widget sangat biasa untuk aplikasi mudah alih kerana skrin yang lebih kecil. Saya sangat suka microinteraction ini yang dicipta oleh John Noussis, walaupun saya fikir ia akan lebih berkesan pada kelajuan yang lebih cepat, tetapi animasi itu sendiri adalah mulia dan dipikirkan dengan baik.

Anak panah tab anak meluncur ke kanan sama seperti kandungan baru melantun dari kanan. Ia memberikan gambaran ilusi seluruh skrin bergerak secara fizikal ke kanan. Animasi sangat indah, tetapi kerana ia sangat perlahan, saya rasa kebanyakan pengguna akan merasa marah selepas beberapa hari.

7. Preloading Animation

Saya tidak banyak bercakap bar pemuatan dalam jawatan ini, tetapi mereka sama pentingnya dengan pengalaman keseluruhan. Kebanyakan pengguna tidak mahu menunggu untuk memuatkan data, tetapi mereka pasti tidak mahu merenung pada skrin kosong semasa ia banyak dimuatkan.

Bret Kurtz melakukan skrin preloading menakjubkan ini yang menyeronokkan dan bermaklumat. Pengguna sebenarnya boleh dilayan menonton ulang animasi kecil ini. Mereka juga boleh gembira bahawa permohonan itu masih memuat data mereka dan tidak terhempas.

Mengakhiri

Kesemua contoh ini dengan cemerlang menunjukkan nilai mikrointeraksi. Aplikasi mudah alih mendapat lebih banyak nilai daripada microinteractions kerana pengguna sentuh secara fizikal skrin dengan jari mereka. Pengguna tidak mengetuk monitor desktop atau skrin komputer riba mereka, tetapi setiap orang menghidupkan telefon pintar mereka kerana ia adalah keadaan kegagalan interaktif.

Ianya adalah lebih banyak pengalaman peribadi, itulah sebabnya reka bentuk aplikasi mudah alih boleh jadi proses yang bernuansa. Apabila dilakukan dengan betul, penambahan mikrointeraktif mudah alih boleh membina pengalaman pengguna ilusi yang kuat daripada apa-apa tetapi piksel dan gerakan.