Menarik dan Bergerak – Panduan Prinsip-Prinsip Desain Gerak

Gerakan memiliki dampak besar pada pengalaman pengguna produk digital, tetapi jika elemen antarmuka tidak menunjukkan prinsip desain gerakan dasar, kegunaannya akan berkurang. Dalam konteks antarmuka pengguna, gerakan lebih dari sekadar hiasan visual. Ini adalah kekuatan yang mendorong keterlibatan produk dan memperluas jangkauan komunikasi desain.

Dunia kita adalah salah satu gerakan. Bahkan di saat-saat hening, daun bergetar dan paru-paru mengembang. Dalam ranah desain produk digital, tampaknya gerak adalah sifat alami kedua, perpanjangan dari kehidupan sehari-hari yang dapat dimanfaatkan dengan sedikit usaha. Andai saja itu benar.

Tanyakan saja kepada siapa saja yang pertama kali menganimasikan elemen UI. Upaya berjam-jam menghasilkan hasil yang amatir. Sesuatu yang sederhana seperti kartu yang digeser ke layar terlihat canggung. Mengapa demikian?

Secara teori, membuat elemen UI bergerak itu mudah. Tentukan titik pada jalur yang telah ditentukan, dan perangkat lunak mengubah celah tersebut. Pada kenyataannya, itu tidak bekerja seperti itu. Alat dan teknik sangat penting, tetapi mereka memperoleh kekuatannya dari prinsip. Jika gerak adalah untuk meningkatkan kegunaan produk digital, itu harus didasarkan pada aturan perilaku yang tidak berubah yang berlaku untuk jumlah kasus penggunaan yang tak terbatas.

Asal Usul Desain Gerak

Perkawinan desain gerak dan UX relatif baru, tetapi akarnya ada di Disney. Frank Thomas dan Ollie Johnston termasuk di antara animator Walt Disney yang paling berharga dan kontributor utama untuk karya klasik seperti Pinnochio , Bambi , dan Fantasia . 12 Prinsip Dasar Animasi mereka tetap berpengaruh dalam grafik gerak untuk film, televisi, dan konten digital.

Prinsip-prinsip Disney menyaring hukum-hukum penting dari gerak fisik demi mendongeng animasi. Mereka memberdayakan karakter yang digambar untuk bergerak dan mengeluarkan suara, tetapi mereka tidak cukup memenuhi kebutuhan gerakan interaktif dari antarmuka pengguna modern.

Desainer kontemporer telah berusaha untuk menjembatani kesenjangan ini. Salah satu contoh yang lebih ilustratif adalah 10 Prinsip Desain Gerak , sebuah adaptasi Disney oleh pakar animasi Jorge R. Canedo Estrada. Namun, takeaways membutuhkan terjemahan jika ingin diterapkan secara holistik pada desain produk digital.

Upaya paling ambisius untuk mengorientasikan ulang prinsip-prinsip gerakan di sekitar elemen UI interaktif (dan signifikansi UX-nya) adalah UX in Motion Manifesto Issara Willenskomer. Kedalamannya mencengangkan, tapi itu bukan bacaan ringan.

Dalam menetapkan 12 Prinsip UX in Motion , Willenskomer:

• Membedakan desain gerak dari animasi UI
• Mengartikulasikan bagaimana gerakan membantu kegunaan
• Membongkar cara kerja inti dari perilaku gerak inti

Desain Gerak dan UX: Perbedaan Penting

Sebelum membahas prinsip-prinsip desain gerak, penting untuk menyoroti perbedaan utama yang muncul di seluruh manifesto Willenskomer.

Gerakan Lebih dari Ornamen

Desain gerak tidak identik dengan animasi UI. Ini sangat penting karena animasi UI hampir selalu diperlakukan sebagai renungan kosmetik tanpa ada kaitannya dengan UX (kecuali untuk menambah pesona). Gerakan bukanlah ornamen, itu adalah perilaku, dan perilaku hanya dapat membantu atau menghalangi pengalaman pengguna.

Dua Jenis Interaksi: Real-time vs. Non-real-time

Desain gerak berkaitan dengan dua interaksi mendasar: real-time dan non-real-time.

• Interaksi waktu nyata memberikan umpan balik langsung saat pengguna memanipulasi elemen UI di layar. Dengan kata lain, perilaku gerak merespons masukan pengguna secara instan .
• Interaksi non-real-time terjadi setelah input pengguna, artinya pengguna harus berhenti sebentar dan menonton perilaku gerakan yang dihasilkan sebelum melanjutkan.

Gerakan Mendukung Kegunaan

Desain gerak harus mendukung kegunaan dalam empat cara berbeda.

• Harapan: Saat pengguna berinteraksi dengan elemen UI, perilaku gerak apa yang mereka harapkan untuk dilihat? Apakah gerak memenuhi harapan atau menyebabkan kebingungan?
• Kontinuitas: Apakah interaksi menghasilkan perilaku gerakan yang konsisten sepanjang pengalaman pengguna?
• Narasi: Apakah interaksi dan perilaku gerak yang dipicunya terkait dengan perkembangan logis dari peristiwa yang memenuhi maksud pengguna?
• Hubungan: Bagaimana atribut spasial, estetika, dan hierarki elemen UI berhubungan satu sama lain dan memengaruhi pengambilan keputusan pengguna? Bagaimana gerak mempengaruhi berbagai hubungan elemen yang ada?

12 Prinsip Desain Gerak untuk Produk Digital

1. Mempermudah

Easing meniru cara objek dunia nyata mempercepat dan memperlambat dari waktu ke waktu. Ini berlaku untuk semua elemen UI yang menunjukkan gerakan.

Kebalikan dari easing adalah gerakan linier. Elemen UI yang menampilkan gerakan linier berubah dari stasioner ke kecepatan penuh, dan kecepatan penuh ke stasioner, secara instan. Perilaku seperti itu tidak ada di mana pun di dunia fisik dan tampak terhenti bagi pengguna.

2. Offset dan Penundaan

Ketika beberapa elemen UI bergerak pada waktu dan kecepatan yang sama, pengguna cenderung mengelompokkannya bersama-sama dan mengabaikan kemungkinan bahwa setiap elemen mungkin memiliki fungsinya sendiri.

Offset dan penundaan menciptakan hierarki antara elemen UI yang bergerak pada saat yang sama dan mengkomunikasikan bahwa mereka terkait, namun berbeda. Alih-alih sinkronisasi lengkap, pengaturan waktu, kecepatan, dan jarak elemen dibuat terhuyung-huyung, menghasilkan efek "satu demi satu" yang halus.

Saat pengguna melakukan perjalanan antar layar, offset dan tunda menandakan bahwa ada beberapa opsi interaksi.

3. Pengasuhan

Pengasuhan menautkan properti dari satu elemen UI ke properti yang lain. Saat properti di elemen induk berubah, properti terkait dari elemen turunan juga berubah. Semua properti elemen dapat dihubungkan satu sama lain.

Misalnya, posisi elemen induk dapat dikaitkan dengan skala elemen anak. Ketika elemen induk bergerak, elemen anak bertambah atau berkurang ukurannya.

Pengasuhan menciptakan hubungan antara elemen UI, menetapkan hierarki, dan memungkinkan beberapa elemen untuk berkomunikasi dengan pengguna sekaligus. Untuk alasan ini, mengasuh anak paling berdampak ketika digunakan dalam interaksi waktu nyata.

4. Transformasi

Transformasi terjadi ketika satu elemen UI berubah menjadi yang lain. Misalnya, tombol unduh berubah menjadi bilah kemajuan, yang berubah menjadi ikon penyelesaian.

Dari perspektif UX, transformasi adalah cara yang efektif untuk menunjukkan kepada pengguna status mereka dalam kaitannya dengan tujuan (Visibilitas Status Sistem). Ini sangat membantu ketika progresi antara elemen UI terkait dengan proses dengan awal dan akhir (misalnya, mengunduh file).

5. Perubahan Nilai

Representasi nilai (numerik, berbasis teks, atau grafik) berlimpah di antarmuka digital, muncul dalam produk mulai dari aplikasi perbankan hingga kalender pribadi hingga situs eCommerce. Karena representasi ini terkait dengan kumpulan data yang ada dalam kenyataan, mereka dapat berubah.

Perubahan nilai mengomunikasikan sifat dinamis dari representasi data dan menginformasikan pengguna bahwa data bersifat interaktif dan dapat dipengaruhi sampai batas tertentu. Saat nilai diperkenalkan tanpa gerakan, keinginan pengguna untuk terlibat dengan data berkurang.

6. Penyamaran

Masking adalah pengungkapan strategis dan penyembunyian bagian dari elemen UI. Dengan mengubah bentuk dan skala perimeter elemen, masking menandakan perubahan utilitas sambil membiarkan elemen itu sendiri tetap dapat diidentifikasi. Untuk alasan ini, visual yang mendetail seperti foto dan ilustrasi adalah kandidat yang ideal.

Dari perspektif kegunaan, desainer dapat menerapkan masking untuk menunjukkan kepada pengguna bahwa mereka maju melalui serangkaian interaksi.

7. Hamparan

Dalam ruang 2D, tidak ada kedalaman, dan elemen UI hanya dapat bergerak di sepanjang sumbu X atau Y. Overlay menciptakan ilusi perbedaan latar depan/latar belakang dalam ruang 2D UI. Dengan mensimulasikan kedalaman, overlay memungkinkan elemen disembunyikan dan diungkapkan sesuai dengan kebutuhan pengguna.

Hirarki informasi merupakan pertimbangan penting ketika menggunakan overlay. Misalnya, hal pertama yang harus dilihat pengguna di aplikasi pencatat adalah daftar catatan mereka. Kemudian, hamparan dapat digunakan untuk mengungkap opsi sekunder untuk setiap pesan—seperti Hapus atau Arsipkan .

8. Kloning

Kloning adalah perilaku gerakan di mana satu elemen UI terpecah menjadi elemen lain. Ini adalah cara cerdas untuk menyoroti informasi penting atau opsi interaksi.

Saat elemen UI muncul dalam antarmuka, mereka membutuhkan titik asal yang jelas yang menautkan ke elemen yang sudah ada di layar. Jika elemen meledak atau menghilang entah dari mana, pengguna tidak memiliki konteks yang diperlukan untuk interaksi yang percaya diri.

9. Pengaburan

Bayangkan pintu kaca buram. Ini membutuhkan interaksi untuk membuka, tetapi mungkin untuk membedakan (sampai batas tertentu) apa yang menunggu di sisi lain.

Pengaburan bekerja dengan cara yang sama. Ini memberi pengguna antarmuka yang meminta interaksi sambil secara bersamaan mengungkapkan petunjuk layar untuk diikuti. Menu navigasi, layar kode sandi, dan jendela folder/file adalah contoh umum.

10. Paralaks

Paralaks ditampilkan ketika dua (atau lebih) elemen UI bergerak pada waktu yang sama tetapi pada kecepatan yang berbeda. Di sini sekali lagi, maksudnya adalah membangun hierarki.

• Elemen interaktif bergerak lebih cepat dan muncul di latar depan.
• Elemen non-interaktif bergerak lebih lambat dan mundur ke latar belakang.

Parallax mengarahkan pengguna ke elemen UI interaktif sekaligus memungkinkan elemen non-interaktif tetap berada di layar dan mempertahankan kesatuan desain.

11. Dimensi

Dimensi membuatnya tampak seolah-olah elemen UI memiliki banyak sisi interaktif, sama seperti objek di dunia fisik. Perilaku ini dicapai dengan membuat elemen tampak seolah-olah dapat dilipat, dapat dibalik, mengambang, atau diberikan properti kedalaman yang realistis.

Sebagai perangkat naratif, dimensi menyiratkan bahwa sisi berbeda dari elemen UI ditautkan dan menghasilkan transisi layar yang mulus.

12. Dolly dan Zoom

Dolly dan zoom memungkinkan pengguna untuk "bepergian" melalui elemen UI secara spasial atau meningkatkan skala mereka untuk mengungkapkan tingkat detail yang lebih besar.

• Dolly: Dolly terjadi ketika sudut pandang pengguna mendekati (atau lebih jauh dari) elemen UI. Bayangkan seseorang dengan kamera berjalan ke bunga untuk mendapatkan bidikan yang lebih dekat.
• Zoom: Dengan zoom, sudut pandang pengguna dan elemen UI tetap, tetapi ukuran elemen bertambah (atau berkurang) di dalam layar pengguna. Sekarang bayangkan orang tersebut tetap diam dan menggunakan fitur zoom kamera untuk membuat bunga tampak lebih besar.

Gerak Adalah Komunikasi

Pengalaman interaktif menuntut gerakan dalam segala bentuknya yang sigap dan halus. Ketika prinsip-prinsip desain gerak ditegakkan, bahkan elemen UI yang paling dasar pun menjadi agen komunikasi manusia yang canggih. Ketika prinsip diabaikan, gerakan mewujudkan karakteristik yang tidak ditemukan di alam. Tidak ada keindahan estetika yang dapat mengatasi kecanggungan yang dihasilkan.

Hubungan antara desain gerak dan UX produk digital berkembang pesat. Pendekatan berprinsip pada gerakan mencegah ketergantungan yang tidak semestinya pada utilitas tren, alat, dan teknik yang sekilas. Lebih baik lagi, ini mencakup pemisahan antara gerakan abstrak elemen pada layar 2D dan persepsi gerakan di dunia 3D.

Beri tahu kami pendapat Anda! Silakan tinggalkan pemikiran, komentar, dan umpan balik Anda di bawah ini.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Animasi Web Di Era Pasca-Flash
• Tepi Perancang – Gambaran Umum Plugin Photoshop
• Tren Desain UX Retrospektif 2019
• Berkenalan – Panduan untuk Alur Orientasi Pengguna
• Prinsip Desain UX Seluler