Dengan perkembangan teknologi yang cepat, animasi kurang dari kemewahan visual dan lebih dari kebutuhan fungsional yang diharapkan pengguna. Animasi memecahkan banyak masalah fungsional dalam antarmuka dan membuat antarmuka terasa hidup dan benar-benar responsif kepada pengguna.
Mari kita jelajahi taktik animasi utama yang meningkatkan fungsionalitas dan kekuatan emosional antarmuka ponsel Anda.
1. Status Sistem
Selalu ada sejumlah proses yang terjadi di belakang panggung di aplikasi Anda, seperti data sedang diunduh dari server, perhitungan sedang berlangsung. Proses seperti itu selalu memakan waktu. Anda harus memberi tahu pengguna bahwa aplikasi tidak dibekukan dan untuk menunjukkan status yang sedang diproses. Tanda-tanda kemajuan visual memberi pengguna rasa kontrol atas aplikasi.
Memuat Indikator
Waktu memuat adalah situasi yang tidak dapat dihindari untuk sebagian besar produk digital. Sementara animasi tidak akan menyelesaikan masalah, mereka tentu membuat menunggu lebih sedikit dari masalah.
KETIKA KITA TIDAK BISA MENDORONG GARIS, KAMI DAPAT MENJADI TUNGGU, LEBIH MENYENANGKAN.
Indikator kemajuan kreatif dapat mengurangi persepsi waktu pengguna. Animasi ini memengaruhi persepsi pengguna Anda tentang produk Anda, membuatnya tampak lebih baik daripada yang sebenarnya.
Tarik untuk menyegarkan
Animasi terkenal di grup ini adalah “pull down to refresh,” yang memulai proses pembaruan konten pada perangkat seluler.
Kiat: Animasi tarik-untuk-menyegarkan harus cocok dengan garis besar desain aplikasi – jika aplikasi minimal, animasi juga harus.
Notifikasi
Karena gerakan secara alami menarik perhatian, menggerakkan notifikasi Anda adalah cara yang menyenangkan untuk memberi tahu pengguna tentang sesuatu tanpa mengganggu terlalu banyak pengalaman.
2. Navigasi dan Transisi
Penggunaan animasi yang paling dasar adalah dalam transisi. Logika di balik jenis animasi ini adalah untuk membantu pengguna memahami perubahan yang baru saja terjadi di tata letak halaman, apa yang telah memicu perubahan dan bagaimana memulai perubahan lagi nanti. Contoh klasik adalah tombol hamburger yang mengaktifkan konten tersembunyi.
Walaupun animasi hamburger mungkin merupakan opsi yang paling diharapkan di sini, ada banyak cara lain yang melengkapi navigasi.
Transportasi antar konteks navigasi
Desainer menggunakan animasi untuk memindahkan pengguna dengan lancar antara konteks navigasi dan menjelaskan perubahan dalam pengaturan elemen pada layar.
Hirarki visual dan koneksi antar elemen
Animasi sangat cocok untuk menggambarkan objek antarmuka dan menggambarkan bagaimana mereka berinteraksi satu sama lain.
Perubahan fungsi
Dalam kasus tertentu, perancang dipaksa untuk merancang tombol aksi yang fungsinya berubah dalam kondisi tertentu. Kita sering melihat ini dalam desain ponsel di mana ruang keseluruhan terbatas.
Jenis animasi ini menunjukkan bagaimana suatu elemen berubah ketika pengguna berinteraksi dengannya. Dalam contoh di bawah ini, ketika pengguna menekan tombol aksi mengambang, tanda plus berubah menjadi pensil. Ini menunjukkan bahwa pensil adalah metode pembuatan utama. Detail sekecil itu berarti perbedaan antara harus menebak apa yang akan terjadi selanjutnya dan mengetahui apa arti ikon di kedua negara.
3. Umpan Balik Visual
Umpan balik visual sangat penting untuk setiap antarmuka pengguna. Itu membuat pengguna merasa terkendali dan bagi pengguna, kontrol berarti mengetahui dan memahami konteks mereka saat ini dalam sistem pada waktu tertentu.
Pengakuan
Elemen antarmuka pengguna seperti tombol dan kontrol akan terlihat nyata, meskipun mereka berada di balik lapisan kaca.
DI DUNIA FISIK, TOMBOL, KONTROL, DAN OBYEK LAINNYA BERTANGGUNG JAWAB DENGAN INTERAKSI KAMI DENGAN MEREKA. ORANG MENGHARGAI TINGKAT TANGGUNG JAWAB YANG SAMA DARI PENGENDALIAN ANTARMUKA PENGGUNA.
Untuk menjembatani kesenjangan itu, isyarat visual dan gerak mengakui input dengan segera dan menghidupkan dengan cara yang terlihat dan terasa seperti manipulasi langsung.
Visualisasikan hasil tindakan
Animasi dapat meningkatkan setiap titik interaksi dan memperkuat tindakan yang dilakukan pengguna sebelumnya.
Dalam contoh Stripe di bawah ini, ketika pengguna mengklik “Bayar”, seorang pemintal muncul sebentar sebelum aplikasi menunjukkan status keberhasilan. Animasi tanda centang membuat pengguna merasa seperti mereka melakukan pembayaran dengan mudah dan pengguna menghargai detail penting tersebut.
Alat dan Tutorial
Tutorial berikut akan membantu Anda memasukkan animasi ke dalam proyek Android atau iOS Anda:
Kumpulan alat yang dapat Anda gunakan untuk membuat animasi dan gerakan
Menggunakan Adobe After Effects untuk animasi
Membangun Aplikasi dengan panduan Grafik & Animasi membantu Anda menambahkan gerakan ke dalam aplikasi Android Anda
Menggunakan animasi khusus di proyek iOS:
Kesimpulan
Animasi sangat kuat ketika digunakan dengan cara yang canggih. Ini menambah kehidupan untuk desain apa pun, melibatkan pengguna bahkan dalam tugas-tugas paling rutin, dan tentu saja membuat Anda menonjol dari kerumunan. Animasi yang dirancang dengan baik membuat pengalaman merasa dibuat.
Terima kasih!
sumber:uxplanet.org
