PANDUAN UTAMA UNTUK PENGGUNAAN ANIMASI YANG TEPAT DI UX

 

Saat ini sulit untuk mengesankan atau bahkan mengejutkan dengan animasi antarmuka. Ini menunjukkan interaksi antar layar, menjelaskan cara menggunakan aplikasi atau sekadar mengarahkan perhatian pengguna. Saat menjelajahi artikel tentang animasi, saya menemukan bahwa hampir semuanya hanya menjelaskan kasus penggunaan khusus atau fakta umum tentang animasi, tetapi saya belum menemukan artikel di mana semua aturan tentang animasi antarmuka akan dijelaskan dengan jelas dan praktis. Nah, dalam artikel ini saya tidak akan menulis sesuatu yang baru, saya hanya ingin mengumpulkan semua prinsip & aturan utama di satu tempat, sehingga desainer lain yang ingin memulai menganimasikan antarmuka tidak perlu mencari informasi tambahan.

 

DURASI DAN KECEPATAN ANIMASI

 

Saat elemen mengubah status atau posisinya, durasi animasi harus cukup lambat agar pengguna dapat melihat perubahan tersebut, tetapi pada saat yang sama cukup cepat agar tidak menunggu.

Animasi apa pun yang lebih pendek dari 100 md bersifat instan dan tidak akan dikenali sama sekali. Sedangkan animasi yang berdurasi lebih dari 1 detik akan menimbulkan kesan delay sehingga membosankan bagi pengguna.

 

Pada perangkat seluler, Panduan Desain Material juga menyarankan untuk membatasi durasi animasi hingga 200–300 md. Sedangkan untuk tablet, durasinya harus lebih lama 30% — sekitar 400–450 mdtk. Alasannya sederhana: ukuran layar lebih besar sehingga objek melewati jalur yang lebih panjang saat mengubah posisi. Pada perangkat yang dapat dikenakan, durasinya harus 30% lebih pendek — sekitar 150–200 mdtk, karena pada layar yang lebih kecil jarak tempuh menjadi lebih pendek.

 

Animasi web diperlakukan dengan cara yang berbeda. Karena kami terbiasa dengan pembukaan halaman web yang hampir instan di browser, kami juga berharap untuk berpindah antar status yang berbeda dengan cepat. Jadi, durasi transisi web harus berlangsung sekitar 2 kali lebih singkat daripada di perangkat seluler — antara 150–200 md. Dalam kasus lain, pengguna pasti akan berpikir bahwa komputer macet atau bermasalah dengan koneksi internet.

 

Tetapi. Lupakan aturan ini jika Anda membuat animasi dekoratif di situs web Anda atau mencoba menarik perhatian pengguna ke elemen tertentu. Dalam kasus ini, animasi bisa lebih panjang.

Perlu diingat bahwa terlepas dari platformnya, durasi animasi harus bergantung tidak hanya pada jarak yang ditempuh tetapi juga pada ukuran objek. Elemen atau animasi yang lebih kecil dengan perubahan kecil harus bergerak lebih cepat. Oleh karena itu, animasi dengan elemen besar dan kompleks terlihat lebih baik jika berlangsung lebih lama.

 

Di antara benda bergerak dengan ukuran yang sama, yang pertama berhenti adalah benda yang menempuh jarak terpendek.

Benda kecil dibandingkan dengan benda besar bergerak lebih lambat karena membuat offset lebih besar.

 

GERAKAN LINIER

 Benda yang tidak terpengaruh oleh gaya fisik apa pun bergerak secara linier, dengan kata lain dengan kecepatan konstan. Dan hanya karena fakta ini mereka terlihat sangat tidak alami dan dibuat-buat untuk mata manusia.

Semua aplikasi untuk animasi menggunakan kurva animasi. Saya akan mencoba menjelaskan cara membacanya dan apa artinya. Kurva menunjukkan bagaimana posisi objek (y axis)berubah selama interval waktu yang sama (x axis). Dalam kasus saat ini, gerakannya linier, sehingga objek menempuh jarak yang sama pada waktu yang sama.

 

KURVA KEMUDAHAN ATAU AKSELERASI

 Kurva ini harus digunakan saat objek terbang keluar layar dengan kecepatan penuh. Itu bisa berupa notifikasi sistem atau hanya kartu antarmuka. Namun perlu diingat bahwa jenis kurva seperti itu hanya boleh digunakan saat objek meninggalkan layar selamanya dan kami tidak dapat mengingat atau mengembalikannya. Kurva animasi membantu mengekspresikan suasana hati yang tepat. Pada contoh di bawah ini, kita dapat melihat bahwa durasi gerakan dan jarak untuk semua objek adalah sama, tetapi perubahan kecil pada kurva memberi Anda kemungkinan untuk memengaruhi suasana animasi.

KOREOGRAFI DALAM ANIMASI ANTARMUKA
 Sama seperti dalam koreografi balet, ide utamanya adalah mengarahkan perhatian pengguna ke satu arah yang mengalir selama transisi dari satu keadaan ke keadaan lainnya.
Ada dua jenis koreografi - interaksi yang setara dan bawahan.

Interaksi yang setara