Menghadirkan Interaksi Mikro-Animasi & UI untuk Hidup Melalui Kolaborasi Pengembang-Desainer

Kami dapat menciptakan pengalaman yang menyenangkan bagi pengguna melalui interaksi mikro dan animasi UI!

Hai, nama saya Kyo Kim dan saya telah bekerja sebagai desainer produk di Capital One selama sekitar dua tahun. Saya telah menggunakan interaksi mikro dan animasi di seluruh pekerjaan saya di sini, termasuk pada beberapa proyek seluler yang mungkin Anda gunakan sendiri. Sebelum saya mulai bekerja di bidang teknologi, latar belakang saya di film. Dalam film, fokusnya adalah tentang bercerita dan mengedit untuk membuat cerita yang melibatkan penonton; dan banyak dari itu dicapai melalui penggunaan transisi. Saya menemukan keterampilan itu bermanfaat hari ini karena saya menciptakan pengalaman dan cerita untuk alat digital.

Saat saya mendesain, saya memikirkan faktor-faktor yang akan memberi pengguna pengalaman yang hebat dan menyenangkan dengan transisi dan bercerita.

Agar suatu produk menawarkan pengalaman yang menyenangkan bagi penggunanya, ia harus menawarkan lebih dari desain yang menyenangkan secara estetika dan efek animasi yang mengesankan.

Terlepas dari apakah produk itu berbasis aplikasi, berbasis web, atau bentuk lain dari produk digital, itu harus menarik pengguna, menyenangkan bagi mereka untuk digunakan, dan memberi mereka kesempatan untuk terlibat dengannya secara langsung dan bermakna. cara.

Interaksi mikro memiliki kekuatan untuk membuat pengalaman pengguna menyenangkan dan memuaskan dengan cara yang tidak bisa dilakukan oleh banyak elemen desain. Sebelum kita masuk ke interaksi mikro dalam konteks desain produk, mari kita mulai dengan dasar-dasarnya.

Apakah mereka? Mengapa ini baik untuk pengalaman pengguna? Mengapa desainer dan pengembang harus memasukkan mereka ke dalam pekerjaan mereka? Bagaimana tim desain produk dapat bekerja sama untuk meningkatkannya?

Apa Interaksi Mikro dan Mengapa Kita Harus Peduli Tentang Mereka?

Apa itu interaksi mikro atau animasi UI? Orang sering menyebutnya sebagai animasi yang cantik, gambar gerak, atau desain gambar bergerak. Namun, mereka jauh lebih dari itu.

Tidak seperti bentuk animasi lain yang ada semata-mata untuk menciptakan ilusi gerakan, interaksi mikro secara langsung melibatkan pengguna, memungkinkan dia untuk menyelesaikan berbagai tugas dan berinteraksi dengan produk dengan cara yang intuitif dan efektif.

Jika kita mengikat ini kembali ke prinsip-prinsip desain sistem yang baik, ini meningkatkan dan memungkinkan umpan balik sistem untuk pengguna. Jika dilakukan dengan benar, pengguna akan mengambil interaksi mikro sebagai pesan dari pengguna bahwa ia (sistem) melakukan apa yang seharusnya dilakukan sebagai tanggapan terhadap apa yang dibutuhkan pengguna.

Bahkan jika Anda tidak tahu apa itu interaksi mikro, Anda terlibat dengannya secara teratur. Setiap kali Anda menggunakan aplikasi atau produk berbasis web untuk menyelesaikan tugas tertentu - apakah itu membaca berita, melakukan pembelian, bermain game, membuat profil, atau menyesuaikan pengaturan dan preferensi pemberitahuan Anda - setiap tindakan individu yang Anda buat merupakan interaksi mikro. Interaksi mikro secara mulus dijalin ke dalam platform produk, membuat fungsinya transparan dan dapat diakses, secara efektif meningkatkan pengalaman pengguna secara keseluruhan.

Meskipun "tindakan" ini mengambil sejumlah bentuk yang berbeda, beberapa contoh umum termasuk:

  • Ketika kita "memindahkan" suatu barang ke keranjang belanja virtual.
  • Saat kami memilih antara dua opsi pada tombol sakelar mirip CTA.
  • Ketika kami "menarik" untuk menyegarkan feed berita dan melihat pembaruan terbaru.
  • Ketika kita "gulir ke atas & bawah" di feed atau halaman panjang.

Ketika kami mendesain interaksi mikro, kami perlu memeriksa apakah itu benar-benar diperlukan dan vital untuk pengalaman pengguna. Jika tidak, ia berpotensi mengalihkan bentuk pengguna menggunakan produk Anda secara efektif atau menjadi gangguan visual.

Prinsip Interaksi Mikro

Ada tiga prinsip yang selalu saya pertimbangkan ketika mendesain interaksi mikro.

  1. Kontinuitas (dan Kehalusan)

Elemen interaksi mikro harus halus sehingga ketika pengguna membuat tindakan, ada aliran berkelanjutan dalam pengalamannya. Misalnya, jika kami membuat animasi gulir dalam umpan panjang, pengguna harus dapat fokus pada konten halaman daripada animasi gulir itu sendiri.

2. Prediktabilitas

Interaksi mikro yang berkualitas memiliki unsur prediktabilitas yang memungkinkan pengguna untuk menavigasi produk secara efektif dan efisien. Pengguna dapat secara akurat memprediksi efek tindakan mereka, merasa nyaman membalikkannya, dan percaya diri dalam kemampuan mereka untuk melakukan seperti yang diharapkan.

3. Transformabilitas

Transisi cairan antara beberapa layar dan transformasi yang jelas dari berbagai objek di dalamnya adalah aspek kunci dari interaksi mikro yang berkualitas. Mereka memungkinkan pengguna untuk mengembangkan pemahaman intuitif tentang hubungan antara layar dan elemen di dalamnya.

Ketika dirancang mengikuti prinsip-prinsip ini, interaksi mikro menyediakan konteks untuk desain dengan membantu pengguna tahu bagaimana berinteraksi dengannya. Mikro-interaksi adalah peristiwa sesaat yang menyelesaikan satu tugas. Bisa dibilang elemen interaktif terkecil dari situs web atau desain aplikasi, interaksi mikro adalah beberapa yang paling penting karena mereka melayani berbagai fungsi inti.

Pemicu (ketuk, gesek, seret, dll.) Memulai setiap tindakan yang tercantum di bagian atas (kontinuitas, prediktabilitas, dan transformabilitas). Pengguna melakukan tindakan pada situs web atau aplikasi untuk memulai proses (bahkan jika itu berlanjut setelah langkah awal). Ini mengikuti pola ajakan untuk bertindak dari pengguna, aturan untuk keterlibatan sebagaimana ditentukan oleh antarmuka (apa yang akan terjadi dan bagaimana), umpan balik dari pengguna (apakah itu berfungsi atau tidak), dan pola atau loop (melakukan tindakan terjadi sekali atau ulangi sesuai jadwal).

-Bagaimana Pengembang dan Desainer Dapat Bekerja Sama untuk Menghadirkan Interaksi Mikro ke Kehidupan

Seperti yang Anda lihat, interaksi mikro memiliki peran penting dalam membentuk pengalaman pengguna. Karena ini, mereka menjadi bagian yang semakin penting dari pekerjaan saya sebagai perancang produk. Setelah bekerja pada berbagai proyek di berbagai platform dan kegunaan, saya perhatikan bahwa tidak semua orang mengakui nilai elemen-elemen ini atau cara membuatnya secara efektif. Lebih penting lagi, seringkali anggota tim tidak tahu bagaimana mengekspresikan ide-ide mereka satu sama lain tentang merancang transisi dan interaksi mikro.

Saya menyadari itu semua bermuara pada komunikasi - ada sesuatu yang hilang dalam terjemahan ketika saya menjelaskan ide-ide desain saya kepada pengembang saya. Anda mungkin pernah mendengar kutipan dari Konfusius ini sebelumnya, “Katakan padaku, dan aku akan lupa. Tunjukkan padaku, dan aku mungkin ingat. Libatkan saya, dan saya akan mengerti. ”Dan melalui keterlibatanlah kita, sebagai tim perancang dan pengembang, menciptakan pengalaman hebat.

Pertama, mari kita jalankan melalui deskripsi singkat tentang proses desain ...

Dalam situasi yang ideal, ketika seorang desainer datang dengan ide untuk interaksi mikro, alur kerja tradisional berlangsung dalam urutan berikut:

  1. Perancang mengembangkan elemen visual dan efek animasi yang diperlukan untuk mengaktualisasikan idenya.
  2. Perancang menyajikan model akhir dan konsep yang mendasarinya kepada anggota tim lainnya.

Tetapi bagaimana jika proses desain tidak berjalan dalam praktik seperti dalam teori? Bagaimana jika kita menyajikan storyboard atau model yang tidak lengkap? Atau orang lain di tim sedang merancang model?

Ketika ini terjadi, masalah cenderung muncul dalam presentasi atau pengembangan. Masalah-masalah ini biasanya jatuh ke dalam salah satu dari tiga kategori:

  1. Gagasan animasi tidak dikomunikasikan dengan cukup jelas.

Jika Anda mencoba menggambarkan konsep animasi dengan kata-kata atau gambar foto, Anda mungkin melihat meringis di wajah audiens Anda. Ini berarti mereka mencoba yang terbaik untuk memahami ide Anda, tetapi mereka tidak benar-benar mengerti. Bahkan jika mereka memahami konsep dasar, gambaran yang mereka buat dalam pikiran mereka mungkin tidak konsisten dengan apa yang Anda bayangkan. Karena orang cenderung melihat gambar bergerak, gambar diam, dan deskripsi verbal dengan cara yang berbeda, mengandalkan kata-kata atau gambar untuk menyampaikan ide animasi menciptakan ruang untuk miskomunikasi, dan sering ketegangan yang tidak perlu di antara anggota tim Anda.

2. Perancang tidak tahu apakah animasi berfungsi dengan baik sampai mereka memeriksa dan menguji prototipe pengembang.

Saat desainer tidak memiliki keterampilan membuat prototipe, mereka terbatas untuk mengajukan ide mereka kepada pengembang melalui storyboard. Bahkan jika seorang desainer sangat percaya pada model interaksi mikro, ia tidak dapat mengatakan apakah itu bekerja secara maksimal sampai pengembang menyelesaikan prototipe. Ini bermasalah karena sejumlah alasan, yang utama adalah kemungkinan miskomunikasi yang tinggi yang diperkenalkan oleh pendekatan semacam itu ke dalam proses. Selain itu, itu membuka pintu untuk keraguan dari anggota tim, dan mengarah ke pertanyaan tentang kelayakan ide. Ini bisa mahal dari segi waktu dari perspektif pembangunan.

3. Perancang dan pengembang tidak pada halaman yang sama

Ketika desainer membuat animasi UI atau interaksi mikro, mereka mencoba memasukkan detail desain yang rumit seperti kemudahan kustom, skrip, ekspresi, dan efek lainnya. Ketika mempresentasikan ide-ide ini kepada pengembang, mereka mungkin mendengar, "Tidak mungkin untuk membuat ini dalam timeline kami," atau "Kami tidak dapat membuatnya persis sama tetapi kami akan mencoba." Pada titik ini, mereka mungkin mencoba untuk hash berbagai detail dan masalah teknis dengan pengembang. Namun, diskusi ini bisa berakhir sia-sia jika perancang tidak memiliki pengetahuan tentang alat atau bahasa yang digunakan pengembang. Faktor-faktor ini harus dipertimbangkan ketika merumuskan dan mendiskusikan ide-ide sehingga interaksi mikro tersebut kompatibel dengan pengaturan default pengembang, meningkatkan kemungkinan bahwa produk akhir akan memenuhi standar desainer (dan semua orang lain).

Apa Beberapa Solusi untuk Masalah Ini?

Sementara semua desainer dan pengembang memiliki cara mereka sendiri untuk berkomunikasi tentang konsep animasi mereka, saya ingin berbagi salah satu metode yang digunakan tim saya. Metode ini cukup berhasil dan menghasilkan lebih sedikit pertemuan dan secara drastis meningkatkan komunikasi tim kami.

Sekarang, kami tidak lagi berdebat tentang apakah akan menyertakan interaksi mikro atau tidak, kami sedang mencari cara untuk membuatnya lebih baik!

Konsep Interaksi Kerangka & Panduan Interaksi

“Konsep interaksi kerangka dan panduan interaksi tidak memberikan ruang untuk interpretasi yang memungkinkan saya untuk segera mulai bekerja dan percaya diri dalam mencocokkan visi perancang.” -Jesse M Majcher / Lead IOS engineer

Proses standar yang kami gunakan untuk berkomunikasi tentang desain UX tidak menerjemahkan dengan baik untuk animasi UI. Pertama, desain dan aliran UX masih dirancang layar demi layar dan bersifat statis. Animasi UI mengalir dengan sendirinya, lancar, dan berdasarkan waktu. Saat kami membuat desain statis, kami membuat bingkai gambar kasar sehingga kami bisa memahami ide dan mendiskusikan alurnya. Ini memungkinkan kita untuk dengan mudah merevisi dan menyempurnakan desain sebelum kita membuat versi final. Setelah setiap anggota tim setuju bahwa desain siap untuk diserahkan kepada pengembang, perancang memberikan panduan gaya dan garis merah yang berisi rincian, spesifikasi, dan informasi penting lainnya tentang desain kepada pengembang.

Jika kami menggunakan proses serupa untuk animasi, proses kami mungkin jauh lebih cepat dan lebih baik.

  1. Konsep Interaksi Kerangka (Studi Gerak)

Konsep interaksi kerangka mirip dengan kerangka gambar yang akan Anda buat saat mendesain alur, perbedaan utamanya adalah bahwa ini demo prototipe yang dapat diputar / dapat diklik. Jika kami membawa ini ke rapat, anggota tim kami tidak harus menggunakan imajinasi mereka untuk memahami konsep. Perancang dapat menggunakan demo yang dapat dimainkan / diklik atau papan cerita statis untuk secara langsung merujuk elemen visual dan animasi dari desain. Ini akan memberi setiap orang rasa yang jelas dan akurat tentang idenya. Pada gilirannya, para mitra dapat memberikan umpan balik yang sangat spesifik dan, karenanya, sangat berharga bagi perancang. Pada saat yang sama, tim manajemen dan pengembangan produk akan mendapatkan informasi yang akan memungkinkan mereka untuk meningkatkan komunikasi internal dan estimasi waktu untuk proyek tersebut.

2. Panduan Interaksi

Setelah tim menyetujui konsep tersebut, perancang menciptakan panduan interaksi. Ini mirip dengan panduan gaya yang menguraikan posisi, rotasi, skala, dan waktu elemen. Kami dapat menambahkan setiap detail tentang animasi, yang akan membantu mitra kami memahaminya dengan jelas. Ketika desainer menunjukkan panduan interaksi kepada pasangannya, dia bahkan bisa lebih jelas tentang pergerakan dan pengukuran konsep animasi. Ini sangat membantu untuk menyelesaikan pekerjaan melalui kolaborasi. Ini juga membantu para desainer untuk lebih bijaksana dalam desain animasi / interaksi mikro.

3. Keterampilan Prototyping untuk Desainer

Dalam pengalaman saya, untuk mengatur diri sendiri agar kolaborasi desain yang sukses, desainer produk harus menjadi pendorong animasi, dan pengembang harus memberikan dukungan. Ini berarti bahwa perancang produk menanggung sebagian besar tanggung jawab dalam kemitraan. Mereka tidak hanya bertanggung jawab untuk menjelaskan ide-ide mereka dengan sangat jelas, mereka harus menunjukkan bahwa mereka layak dengan memberikan bukti konsep. Ini juga berarti bahwa perancang produk harus mampu membuat prototipe animasi mereka sendiri. Jika seorang perancang produk dapat membuat prototipe dan mempresentasikannya selama rapat, diskusi yang mengikuti akan lebih jelas dan tidak memakan banyak waktu, yang mengarah ke proses komunikasi yang lebih efektif secara keseluruhan.

Jadi, jenis alat prototyping apa yang harus dibiasakan oleh para desainer? Ada banyak alat di luar sana tetapi tidak semua orang tahu apa yang terbaik untuk tugas interaksi mikro tertentu. Berikut adalah rekomendasi saya berdasarkan pengalaman pribadi saya merancang elemen-elemen ini.

Jika Anda terbiasa dengan pengkodean:

  • Seluler: Xcode, Android studio
  • Mobile atau Web: Framer
  • Web: Animasi CSS

Jika Anda ingin mendesain interaksi antara dorongan seperti layar dan modul:

  • Invision dan Marbel

Jika Anda ingin membuat interaksi yang lebih detail:

  • Prinsip, Adobe CC, origami Studio, dan Pixate

Jika Anda ingin membuat interaksi + animasi terperinci:

  • Setelah efek

Saat ini, saya penggemar menggunakan After Effect untuk prototipe saya. Bahkan jika itu tidak interaktif (mis. Diklik), itu adalah cara yang sempurna untuk menyajikan konsep animasi. Juga, tidak ada batasan efek dan Anda dapat mengontrol gerakan detail. Bahkan dimungkinkan untuk menggunakannya untuk berinteraksi dalam ruang 3D, seperti untuk AR dan VR.

Interaksi Tim Menyenangkan Membuat Produk Menyenangkan

Interaksi mikro telah menjadi elemen yang semakin penting - jika tidak kritis - web, desain seluler, dan banyak lagi. Sekalipun perancang dan pengembang mengenali nilai animasi UI dan termotivasi untuk membuatnya, mereka sering berjuang untuk berkolaborasi dengan cara yang efisien dan efektif. Dibutuhkan tim yang kuat untuk mengirimkan interaksi mikro yang hebat tepat waktu; tim semacam itu membutuhkan penggambaran peran yang jelas, keterampilan komunikasi yang efektif, dan alat prototyping yang tepat untuk tugas-tugas yang dihadapi.

Untuk mengatur interaksi mikro Anda agar sukses, pastikan tim Anda memiliki karakteristik ini dan terlibat dengan proses ini. Dan semoga sukses dengan perjalanan mikro-interaksi Anda sendiri!

PERNYATAAN PENGUNGKAPAN: Pendapat ini adalah milik penulis. Kecuali disebutkan sebaliknya dalam posting ini, Capital One tidak berafiliasi dengan, juga tidak didukung oleh, salah satu perusahaan yang disebutkan. Semua merek dagang dan kekayaan intelektual lain yang digunakan atau ditampilkan adalah kepemilikan masing-masing pemiliknya. Artikel ini adalah © 2017 Capital One.

Untuk selengkapnya tentang API, sumber terbuka, acara komunitas, dan budaya pengembang di Capital One, kunjungi DevExchange, portal pengembang lengkap kami: developer.capitalone.com.