Animasi yang diterapkan pada visual lebih banyak memecahkan masalah fungsional pada sebuah interface dan membuat sebuah interface terasa lebih real dan lebih responsif bagi user. Berikut taktik animasi yang dapat mengimprove fungsional dan mampu memberikan kekuatan emosional pada mobile interface anda.

1. System Status

Selalu ada proses yang terjadi ketika sebuah aplikasi digunakan, seperti data yang didownload dari server, perhitungan sedang berjalan. Proses seperti itu memerlukan waktu, untuk itu anda harus memberi tahu user anda bahwa sebuah proses sedang berlangsung melalui visual sebuah aplikasi.

Loading Indicators

Loading Indicators yang kreatif dapat mengurangi persepsi user terhadap waktu. Animasi dapat mempengaruhi persepsi user terhadap produk anda, membuatnya tampak lebih baik dari keadaan sebenarnya.

masukkan judul gambar

Pull to refresh

Animasi yang cukup terkenal ini "Pull to refresh", dimana menggambarkan sebuah ketika memulai proses pembaruan konten pada mobile devices.

masukkan judul gambar

Tips: Animasi "Pull to refresh" harus sesuai dengan garis besar dari design sebuah aplikasi, jika aplikasi minimal animasi pun harus minimal.

Notifications

Karena gerakan yang natural mampu menarik perhatian, memberikan animasi pada design notifikasi anda merupakan cara yang baik untuk memberi tahu user tentang informasi (sesuatu) tanpa terlalu mengganggu experience user.

masukkan judul gambar

2. Navigation and Transitions

Penggunaan animasi yang paling dasar adalah pada proses transisi. Logika yang ada dibalik animasi jenis ini membantu user memahami perubahan yang baru saja terjadi, apa yang memicu perubahan itu dan bagaimana ketika memulai perubahan itu kembali. Contonhya adalah button hamberger yang menampilkan konten tersembunyi.

masukkan judul gambar

Transport between navigational context

Designer menggunakan animasi ini untuk mempermudah transport user antara konteks navigasi dan menjelaskan perubahan susunan element yang ada pada sebuah screen.

masukkan judul gambar

Visual hierarchy and connection between elements

Animasi ini sangat cocok untuk menggambarkan suatu objek pada interface dan mendeskripsikan bagaimana mereka berinteraksi satu sama lain.

masukkan judul gambar

Function change

Pada kasus tertentu, designer kadang merancang sebuah action button yang fungsinya berubah pada kondisi tertentu.

masukkan judul gambar

masukkan judul gambar

3. Visual Feedback

Visual Feedback sangat penting untuk setiap interface user. Ini membuat user merasa terkontrol, sehingga user memahami konteks mereka saat di dalam sistem dan waktu tertentu.

masukkan judul gambar

Visualize the results of the actions

Animasi dapat meningkatkan point interaksi dan mengarahkan tindakan yang akan dilakukan user. Contohnya Stripe di bawah ini, saat user mengklik "pay", spinner akan muncul sebentar sebelum aplikasi menunjukkan status sukses. Animasi Checkmark membuat user merasa seperti mudah melakukan pembayaran dan user menghargai hal detail penting tersebut.

masukkan judul gambar

Tools and Tutorials

Tutorial berikut akan membantu anda incorporate animasi ke project Android atau iOS anda :

Gunakan Adobe After Effects Untuk Animation
https://cgi.tutsplus.com/tutorials/welcome-to-after-effects-overview-and-getting-started--ae-28388

Buat Apps dengan Graphics & Animation guidelines untuk membantu anda menambahkan motion pada App Android anda
https://developer.android.com/training/building-graphics.html

Gunakan Animasi Custom pada project iOS :

Sumber :

https://uxplanet.org/3-key-uses-for-animation-in-mobile-ui-design-4d7c482dd84b