Tuesday, August 16, 2022
spot_imgspot_imgspot_imgspot_img
HomeVisual DesignIni Dia Panduan Utama untuk Penggunaan Animasi yang Tepat di UX

Ini Dia Panduan Utama untuk Penggunaan Animasi yang Tepat di UX

Saat ini sulit untuk mengesankan atau bahkan mengejutkan dengan animasi antarmuka. Ini menunjukkan interaksi antara layar, menjelaskan cara menggunakan aplikasi atau hanya mengarahkan perhatian pengguna. Saat menjelajahi artikel tentang animasi, saya menemukan bahwa hampir semuanya menggambarkan hanya kasus penggunaan tertentu atau fakta umum tentang animasi, tetapi saya belum menemukan artikel mana pun yang semua aturan mengenai animasi antarmuka 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 antarmuka penghubung tidak harus mencari informasi tambahan.

Durasi dan kecepatan animasi

Ketika elemen mengubah keadaan atau posisi mereka, durasi animasi harus cukup lambat untuk memberi pengguna kemungkinan untuk melihat perubahan, tetapi pada saat yang sama cukup cepat untuk tidak menyebabkan menunggu.

Gunakan durasi yang tepat dalam animasi Anda. Jangan membuatnya terlalu cepat dan jangan biarkan pengguna cukup waktu untuk menguap

Banyak penelitian telah menemukan bahwa kecepatan optimal untuk animasi antarmuka adalah antara 200 dan 500 ms. Angka-angka ini didasarkan pada kualitas khusus otak manusia. Animasi apa pun yang lebih pendek dari 100 ms bersifat instan dan tidak akan dikenali sama sekali. Sedangkan animasi lebih lama dari 1 detik akan menyampaikan rasa penundaan dan dengan demikian menjadi membosankan bagi pengguna.

Durasi animasi yang sebaiknya Anda miliki di antarmuka Anda

Di perangkat seluler, Material Design Guidelines juga menyarankan membatasi durasi animasi hingga 200–300 ms. Sedangkan untuk tablet, durasi harus lebih lama 30% – sekitar 400-450 ms. Alasannya sederhana: ukuran layar lebih besar sehingga objek mengatasi jalur yang lebih panjang ketika mereka mengubah posisi. Pada perangkat yang dapat dikenakan, durasi harus 30% lebih pendek – sekitar 150-200 ms, karena pada layar yang lebih kecil jarak untuk bepergian lebih pendek.

Ukuran perangkat seluler memengaruhi durasi animasi

Animasi web diperlakukan dengan cara yang berbeda. Karena kita terbiasa dengan pembukaan halaman web yang hampir instan di browser, kami juga berharap untuk transit antar negara yang berbeda dengan cepat. Jadi, durasi transisi web harus berlangsung sekitar 2 kali lebih pendek dari pada perangkat seluler – antara 150-200 ms. Dalam kasus lain, pengguna pasti akan berpikir bahwa komputer membeku atau memiliki masalah dengan koneksi internet.

RELATED ARTICLES

Most Popular

Recent Comments