Membawa Mikro-Interaksi & Animasi UI ke Hidup Melalui Kerjasama Designer Pemaju

Kami boleh mencipta pengalaman yang menarik untuk pengguna melalui interaksi mikro dan animasi UI!

Hai, nama saya ialah Kyo Kim dan saya telah bekerja sebagai pereka produk di Capital One selama kira-kira dua tahun. Saya telah menggunakan interaksi mikro dan animasi sepanjang kerja saya di sini, termasuk pada beberapa projek mudah alih yang mungkin anda gunakan sendiri. Sebelum saya mula bekerja dalam teknologi, latar belakang saya dalam filem. Di dalam filem, fokusnya adalah mengenai bercerita dan mengedit untuk mencipta cerita yang melibatkan penonton; dan banyak yang dilakukan melalui penggunaan peralihan. Saya dapati kemahiran yang berguna saat ini ketika saya membuat pengalaman dan cerita untuk alat digital.

Apabila saya merancang, saya berfikir tentang faktor-faktor yang akan memberi pengguna pengalaman yang hebat, menyenangkan dengan peralihan dan bercerita.

Bagi produk untuk menawarkan pengalaman yang menyenangkan kepada penggunanya, ia mesti menawarkan lebih banyak reka bentuk estetika-menyenangkan dan kesan animasi yang mengagumkan.

Tidak kira sama ada produk berasaskan aplikasi, berasaskan web, atau bentuk produk digital yang lain, ia mesti menarik pengguna, bersenang-senang untuk digunakan, dan memberi mereka peluang untuk terlibat dengannya secara langsung dan bermakna cara.

Interaksi mikro mempunyai kuasa untuk menjadikan pengalaman pengguna menyenangkan dan memuaskan dengan cara yang banyak elemen reka bentuk tidak dapat. Sebelum kita masuk ke dalam interaksi mikro dalam konteks reka bentuk produk, mari kita mulakan dengan asas-asasnya.

Apakah mereka? Mengapa ia baik untuk pengalaman pengguna? Kenapa pereka dan pemaju memasukkannya ke dalam kerja mereka? Bagaimanakah pasukan reka bentuk produk boleh bekerjasama untuk memperbaikinya?

Apakah Interaksi Mikro dan Mengapa Kita Perlu Tahu Mengenai Mereka?

Apakah interaksi mikro atau animasi UI? Orang sering merujuk kepada mereka sebagai animasi cantik, grafik gerakan, atau reka bentuk imej bergerak. Walau bagaimanapun, mereka lebih banyak daripada itu.

Tidak seperti bentuk animasi lain yang wujud semata-mata untuk mencipta ilusi pergerakan, interaksi mikro secara langsung melibatkan pengguna, membolehkannya mencapai pelbagai tugas dan berinteraksi dengan produk dengan cara yang intuitif dan berkesan.

Sekiranya kami mengikat semula ini kepada prinsip reka bentuk sistem yang baik, ini dapat meningkatkan dan membolehkan maklum balas sistem untuk pengguna. Sekiranya dilakukan dengan betul, pengguna akan mengambil interaksi mikro sebagai mesej dari pengguna bahawa sistem tersebut melakukan apa yang seharusnya dilakukan sebagai tindak balas terhadap keperluan pengguna.

Walaupun anda tidak tahu apa interaksi mikro, anda terlibat dengannya secara teratur. Setiap kali anda menggunakan aplikasi atau produk berasaskan web untuk mencapai tugas tertentu - sama ada membaca berita, membuat pembelian, bermain permainan, membuat profil, atau menyesuaikan tetapan dan pilihan pemberitahuan - setiap tindakan individu yang anda buat merupakan interaksi mikro. Interaksi mikro secara lancar ditenun ke platform produk, menjadikan fungsi mereka telus dan mudah diakses, dengan berkesan memperbaiki pengalaman keseluruhan pengguna.

Walaupun "tindakan" ini mengambil beberapa bentuk yang berbeza, beberapa contoh yang lazim termasuk:

  • Apabila kita "memindahkan" sesuatu item ke dalam keranjang belanja maya.
  • Apabila kita memilih antara dua pilihan pada butang togol seperti CTA.
  • Apabila kita "tarik turun" untuk memuat semula suapan berita dan melihat kemas kini terkini.
  • Apabila kita "tatal ke atas & ke bawah" dalam suapan panjang atau halaman.

Apabila kita merancang interaksi mikro, kita perlu mengkaji sama ada ia benar-benar perlu dan penting untuk pengalaman pengguna. Jika tidak, ia berpotensi untuk mengalihkan perhatian pengguna menggunakan produk anda dengan berkesan atau menjadi bising visual.

Prinsip-prinsip Interaksi Mikro

Terdapat tiga prinsip yang saya selalu pertimbangkan semasa merancang interaksi mikro.

  1. Kesinambungan (dan kehalusan)

Unsur interaksi mikro haruslah halus sehingga apabila pengguna membuat tindakan, ada aliran yang berterusan dalam pengalamannya. Sebagai contoh, jika kita membuat animasi menatal dalam suapan panjang, pengguna harus dapat memberi tumpuan pada kandungan halaman dan bukannya animasi menatal itu sendiri.

2. Predictability

Interaksi mikro kualiti mempunyai elemen yang boleh diramalkan yang membolehkan pengguna menavigasi produk dengan berkesan dan cekap. Pengguna dengan tepat boleh meramalkan kesan tindakan mereka, berasa selesa membalikkannya, dan yakin dengan kemampuan mereka untuk melaksanakan seperti yang diharapkan.

3. Transformability

Peralihan cecair di antara pelbagai skrin dan transformasi yang jelas dari pelbagai objek di dalamnya adalah aspek utama interaksi mikro yang berkualiti. Mereka membolehkan pengguna untuk membangunkan pemahaman intuitif tentang hubungan antara skrin dan unsur-unsur di dalamnya.

Apabila direka mengikut prinsip ini, interaksi mikro memberikan konteks untuk reka bentuk dengan membantu pengguna mengetahui bagaimana untuk berinteraksi dengannya. Interaksi mikro adalah peristiwa seketika yang menyelesaikan tugas tunggal. Boleh dikatakan unsur interaktif terkecil dari laman web atau reka bentuk aplikasi, interaksi mikro adalah antara yang paling penting kerana ia berfungsi dengan pelbagai fungsi teras.

Pencetus (ketuk, sapu, seret, dll) memulakan setiap tindakan yang disenaraikan di bahagian di atas (kesinambungan, kebolehprediksi dan transformabilitas). Pengguna melakukan tindakan di laman web atau aplikasi untuk memulakan proses (walaupun ia berterusan selepas langkah awal). Ini mengikuti corak tindakan seruan dari pengguna, peraturan untuk pertunangan seperti yang ditentukan oleh antara muka (apa yang akan berlaku dan bagaimana), maklum balas daripada pengguna (adakah ia berfungsi atau tidak), dan corak atau gelung (adakah tindakan berlaku sekali atau ulangi pada jadual).

-Bagaimana Pembangun dan Pereka Boleh Bekerjasama untuk Membawa Interaksi Mikro Ke Hidup

Seperti yang anda dapat lihat, interaksi mikro mempunyai peranan penting dalam membentuk pengalaman pengguna. Kerana ini, mereka telah menjadi sebahagian penting dalam kerja saya sebagai pereka produk. Setelah bekerja pada pelbagai projek di pelbagai platform dan kegunaan, saya perhatikan bahawa tidak semua orang mengenali nilai unsur-unsur ini atau bagaimana membuatnya dengan berkesan. Lebih penting lagi, sering ahli pasukan tidak tahu bagaimana untuk menyatakan idea mereka satu sama lain mengenai merancang peralihan dan interaksi mikro.

Saya menyedari semuanya telah direbus ke komunikasi - sesuatu telah hilang dalam terjemahan apabila saya menerangkan idea reka bentuk saya kepada pemaju saya. Anda mungkin pernah mendengar petikan ini dari Confucius sebelum ini, "Beritahu saya, dan saya akan lupa. Tunjukkan saya, dan saya boleh ingat. Melibatkan saya, dan saya akan faham. "Dan ia adalah melalui penglibatan di mana kita, sebagai satu pasukan pereka dan pemaju, mencipta pengalaman yang hebat.

Pertama, mari kita lari menerangkan proses reka bentuk ...

Dalam situasi yang ideal, apabila seorang pereka datang dengan idea untuk interaksi mikro, aliran kerja tradisional diteruskan dalam susunan berikut:

  1. Pereka bentuk ini membangunkan unsur-unsur visual dan kesan animasi yang diperlukan untuk merealisasikan ideanya.
  2. Pereka bentuk membentangkan model akhir dan konsep asasnya kepada ahli pasukan lain.

Tetapi bagaimana jika proses reka bentuk tidak bermain dalam amalan seperti itu dalam teori? Bagaimana jika kami menyampaikan papan cerita atau model yang tidak lengkap? Atau orang lain dalam pasukan sedang merekabentuk model itu?

Apabila ini berlaku, masalah mungkin timbul dalam persembahan atau pembangunan. Masalah ini biasanya jatuh ke dalam satu daripada tiga kategori:

  1. Idea animasi tidak disampaikan dengan jelas.

Sekiranya anda cuba menggambarkan konsep animasi dengan kata-kata atau imej pegun, anda mungkin melihat grimaces di wajah khalayak anda. Ini bermakna mereka cuba yang terbaik untuk memahami idea anda, tetapi mereka tidak benar-benar mendapatkannya. Sekalipun mereka memahami konsep asas, gambaran yang mereka saksikan dalam fikiran mereka mungkin tidak selaras dengan apa yang anda fikirkan. Kerana orang cenderung untuk melihat imej bergerak, imej pegun, dan deskripsi lisan dengan cara yang berbeza, bergantung pada kata-kata atau imej untuk menyampaikan idea animasi mewujudkan ruang untuk miskomunikasi, dan sering ketegangan yang tidak perlu di kalangan ahli pasukan anda.

2. Pereka tidak tahu jika animasi berfungsi dengan baik sehingga mereka memeriksa dan menguji prototaip pemaju.

Apabila pereka tidak mempunyai kemahiran prototaip, mereka terhad kepada idea mereka kepada pemaju melalui papan cerita. Walaupun seorang pereka sangat percaya pada model interaksi mikro, dia tidak boleh mengatakan sama ada ia berfungsi untuk potensi sepenuhnya sehingga pemaju melengkapkan prototaip. Ini bermasalah untuk beberapa sebab, yang utama adalah kemungkinan besar miscommunication bahawa pendekatan seperti memperkenalkan ke dalam proses. Di samping itu, ia membuka pintu untuk keraguan daripada ahli-ahli pasukan, dan membawa kepada soalan mengenai kemungkinan idea itu. Ini boleh menjadi mahal dari segi masa dari perspektif pembangunan.

3. Pereka dan pemaju tidak berada pada halaman yang sama

Apabila pereka membuat animasi UI atau interaksi mikro, mereka cuba memasukkan butiran rekaan kompleks seperti kemudahan, skrip, ekspresi, dan kesan lain. Apabila membentangkan idea-idea ini kepada pemaju, mereka mungkin mendengar, "Tidak mungkin untuk membuat ini dalam garis masa kami," atau "Kita tidak boleh membuatnya sama tetapi kita akan cuba." Pada ketika ini, mereka mungkin mencuba keluar pelbagai butiran dan isu teknikal dengan pemaju. Walau bagaimanapun, perbincangan ini boleh menjadi sia-sia jika pereka tidak mempunyai pengetahuan tentang alat atau pemaju bahasa yang digunakan. Faktor-faktor ini perlu dipertimbangkan semasa merumus dan membincangkan idea-idea supaya interaksi mikro serasi dengan tetapan lalai pemaju, meningkatkan kemungkinan bahawa produk akhir akan memenuhi piawaian pereka (dan orang lain).

Apakah Beberapa Penyelesaian kepada Isu-Isu Ini?

Walaupun semua pereka dan pemaju mempunyai cara sendiri untuk berkomunikasi tentang konsep animasi mereka, saya mahu berkongsi satu kaedah yang digunakan oleh pasukan saya. Kaedah ini agak berjaya dan telah mengakibatkan kurang mesyuarat dan secara drastik telah meningkatkan komunikasi pasukan kami.

Sekarang, kita tidak lagi berhujah mengenai sama ada atau tidak untuk memasukkan interaksi mikro, kita sedang mencari cara untuk menjadikannya lebih baik!

Panduan Konsep Interaksi Skeleton & Interaksi

"Konsep interaksi rangka dan panduan interaksi tidak memberi ruang untuk tafsiran yang membolehkan saya mula bekerja dengan segera dan yakin dengan pencocokan visi pereka." -Jesse M Majcher / Pimpinan jurutera IOS

Proses standard yang kami gunakan untuk berkomunikasi tentang reka bentuk UX tidak diterjemahkan dengan baik untuk animasi UI. Pertama, reka bentuk dan aliran UX masih direka skrin dengan skrin dan statik. Animasi UI mengalir dalam diri mereka, mereka cecair, dan berdasarkan masa. Apabila kami membuat reka bentuk statik, kami membuat rentetan rentetan kasar supaya kami dapat memahami idea dan membincangkan aliran. Ini membolehkan kami dengan mudah menyemak dan menapis reka bentuk sebelum kami membuat versi akhir. Sekali setiap ahli pasukan bersetuju bahawa reka bentuk bersedia untuk dikembalikan kepada pemaju, pereka bentuk itu menyediakan pemaju dengan panduan gaya dan garis merah yang mengandungi butiran, spesifikasi, dan maklumat penting lain mengenai reka bentuk.

Jika kami menggunakan proses yang sama untuk animasi, proses kami mungkin lebih cepat dan lebih baik.

  1. Konsep Interaksi Skeleton (Kajian Pergerakan)

Konsep interaksi kerangka adalah serupa dengan struktur kawat yang anda akan buat ketika merancang aliran, perbezaan utama ialah demo prototipe yang dapat dimainkan / diklik. Sekiranya kita membawanya ke mesyuarat, ahli pasukan kita tidak perlu menggunakan imaginasi mereka untuk memahami konsep tersebut. Pereka boleh menggunakan demo dimainkan / boleh diklik atau papan cerita statik untuk merujuk secara langsung elemen visual dan animasi reka bentuk. Ini akan memberi setiap orang gambaran yang jelas dan tepat ideanya. Pada gilirannya, para rakan dapat memberikan maklum balas yang sangat spesifik dan, dengan demikian, sangat berharga bagi perancang. Pada masa yang sama, pasukan pengurusan dan pembangunan produk akan memperoleh maklumat yang akan membolehkan mereka memperbaiki komunikasi dalaman dan anggaran masa untuk projek itu.

2. Panduan Interaksi

Apabila pasukan bersetuju pada konsep itu, pereka bentuk mencipta panduan interaksi. Ini sama dengan panduan gaya kerana ia menggariskan kedudukan, putaran, skala, dan masa unsur-unsur. Kita boleh menambah setiap detail mengenai animasi, yang akan membantu rakan kongsi kita memahami dengan jelas. Apabila pereka bentuk menunjukkan panduan interaksi kepada rakan-rakan mereka, dia boleh menjadi lebih jelas mengenai pergerakan dan pengukuran konsep animasi. Ini sangat berguna untuk memuktamadkan kerja melalui kerjasama. Ia juga membantu pereka menjadi lebih bijak dalam reka bentuk animasi / mikro-interaksi mereka.

3. Keterampilan Prototyping untuk Pereka

Dalam pengalaman saya, untuk menetapkan diri anda untuk kerjasama reka bentuk yang berjaya, pereka produk harus menjadi pemandu animasi, dan pemaju harus memberikan sokongan. Ini bermakna bahawa pereka produk mempunyai sebahagian besar tanggungjawab dalam perkongsian. Bukan sahaja mereka bertanggungjawab untuk menerangkan idea-idea mereka dengan jelas, mereka mesti menunjukkan bahawa mereka boleh dilaksanakan dengan memberikan bukti konsep. Ia juga bermakna bahawa pereka produk perlu mampu membuat prototaip animasi mereka sendiri. Jika seorang pereka produk dapat membuat prototaip dan membentangkannya semasa mesyuarat, perbincangan yang berikut akan lebih jelas dan kurang memakan waktu, yang membawa kepada proses komunikasi yang lebih berkesan secara keseluruhan.

Oleh itu, apa jenis alat prototaip harus pereka membiasakan diri dengan? Terdapat banyak alat di luar sana tetapi tidak semua orang tahu apa yang paling sesuai untuk tugas-tugas interaksi mikro tertentu. Berikut adalah cadangan saya berdasarkan pengalaman peribadi saya yang mereka bentuk unsur-unsur ini.

Jika anda biasa dengan pengekodan:

  • Bergerak: Xcode, studio Android
  • Mobile atau Web: Framer
  • Web: animasi CSS

Jika anda ingin merancang interaksi di antara push-like seperti skrin dan modul:

  • Invision dan Marbel

Sekiranya anda ingin membuat interaksi yang lebih terperinci:

  • Prinsip, Adobe CC, origami Studio dan Pixate

Jika anda ingin membuat animasi interaksi terperinci +:

  • Selepas Kesan

Pada masa ini, saya peminat menggunakan Selepas Kesan untuk prototaip saya. Walaupun ia bukan interaktif (iaitu boleh diklik), ia adalah cara yang sempurna untuk membentangkan konsep animasi. Juga, tidak ada batasan kesan dan anda dapat mengawal pergerakan terperinci. Ia juga mungkin untuk menggunakannya untuk membuat interaksi dalam ruang 3D, seperti untuk AR dan VR.

Interaksi Pasukan yang Menyenangkan Buat Produk yang Menyenangkan

Interaksi mikro menjadi semakin penting - jika tidak kritis - elemen web, reka bentuk mudah alih, dan banyak lagi. Walaupun kedua-dua pereka dan pemaju menyedari nilai animasi UI dan bermotivasi untuk mencipta mereka, mereka sering berjuang untuk bekerjasama dengan cara yang berkesan dan berkesan. Ia mengambil pasukan yang kuat untuk menghantar interaksi mikro hebat pada masa; pasukan sedemikian memerlukan penentuan jelas peranan, kemahiran berkomunikasi yang berkesan, dan alat prototaip yang sesuai untuk tugas-tugas yang ada.

Untuk menetapkan interaksi mikro anda untuk berjaya, pastikan pasukan anda mempunyai ciri-ciri ini dan terlibat dengan proses ini. Dan nasib baik dengan perjalanan interaksi mikro anda sendiri!

PENYATA PENDEDAHAN: Pendapat ini adalah pengarang. Melainkan jika dinyatakan sebaliknya dalam jawatan ini, Capital One tidak bergabung dengannya, atau tidak disokong oleh, mana-mana syarikat yang disebutkan. Semua tanda dagangan dan harta intelektual lain yang digunakan atau dipaparkan adalah pemilikan pemilik masing-masing. Artikel ini adalah © 2017 Capital One.

Untuk lebih lanjut mengenai API, sumber terbuka, acara komuniti, dan budaya pemaju di Capital One, lawati DevExchange, portal pemaju sehenti kami: developer.capitalone.com.