Karena manusia adalah makhluk yang bergerak dipengaruhi oleh adanya visual dan pergerakan, maka adanya sentuhan animasi mampu memberikan dampak besar pada citra visual sebuah aplikasi.
Mata kita secara natural memperhatikan objek bergerak atau animasi yang eye catchy. Hal ini mampu menarik perhatian dan membantu aplikasi menjadi berbeda dengan pesaingnya.

Charity ios app mobile interaction by: Taras Migulko

Belakangan ini, semakin banyak desainer yang menggabungkan animasi sebagai elemen fungsional yang mampu meningkatkan kepuasan experience tersendiri untuk user. Animasi tidak lagi dibuat hanya untuk hiburan, tapi juga menjadi tools terpenting untuk meningkatkan desain interaksi yang memiliki tujuan, bermakna, dan fungsional sehingga menghasilkan komunikasi yang sesuai.

Animasi yang Fungsional

Animasi Fungsional adalah animasi sederhana yang disematkan ke dalam UI Design sehingga memiliki fungsi untuk desain tertentu. Hal ini memiliki tujuan yang jelas dan logis, di antaranya:

  • Mengurangi beban kognitif
  • Mencegah pemahaman yang bias
  • Membangun ingatan yang lebih baik dalam hubungan spasial

Animasi membuat user interface untuk menjadi lebih hidup. di dalam pendekatan desain yang mengutamakan interaksi antarmuka, haruslah bersifat intuitif, responsif, dan humanis. Animasi fungsional membantu kita mencapai tujuan ini. Tetapi, tidak jarang jika animasi dibuat untuk kebutuhan Story Telling pada sebuah aplikasi.

Aloha, Gojek illustration by : Gojek Design

Interaksi desain yang baik akan memberikan feedback yang sesuai. Feedback akan membuatmu merasa seperti berinteraksi dengan elemen visual yang nyata di layar dan mendemonstrasikan hasil interaksinya.

Elemen interface seperti tombol dan tools pengendalian harus dibuat terlihat seperti sungguhan, meskipun berada di balik lapisan kaca. Isyarat visual dan motion dapat menjembatani antar kesenjangan ini dengan segera memahami input yang kemudian dapat dilihat dan dirasa layaknya manipulasi langsung.

 

Image credit: Ramotion on Behance

Visual feedback juga sangat membantu ketika kita butuh menginformasikan kepada user tentang hasil dari pengoperasian. Contohnya, ketika pengoperasian yang gagal,  animasi fungsional memberikan informasi tentang masalahnya dengan cepat dan mudah dipahami, contoh penggunaan animasi yg digunakan seperti bergetar bisa digunakan ketika terjadi salah password. Inilah kenapa efek getar adalah isyarat yang cukup universal untuk mengkomunikasikan kata “tidak”, seperti hal nya menggelengkan kepala adalah cara sederhana untuk manusia memberikan isyarat “tidak” kepada orang lain.

Animasi untuk notifikasi gagal password. Image credit: thekineticui

Tujuannya untuk mengetahui bahwa sistem telah menerima action dari user dan konfirmasi user bahwa aplikasi telah menerima atau menolak tindakan dari user

Kejelasan Status Sistem

Keterjelasan status suatu sistem menjadi salah satu hal yang terpenting dalam mendesain User Interface. Pengguna ingin mengetahui isi konteks dalam waktu yang mereka tentukan dan aplikasi tidak boleh membuat mereka menerka-nerka. Harus memberi tau user, respon apa yang terjadi melalui visual yang sesuai

 

 

Proses upload dan download data adalah peluang besar untuk memanfaatkan animasi fungsional. Misalnya, animasi loading bars menampilkan seberapa cepat proses berjalan dan menimbulkan ekspektasi untuk seberapa cepat action yang sedang diproses.

 

Jenis animasi fungsional juga bisa digunakan untuk menarik perhatian user ke perubahan status penting dalam aplikasi atau bahkan sistem seperti panggilan masuk dan email masuk.

Image credit: Behance

Image credit: Material Design

Tujuannya untuk memberikan notifikasi yang real-time untuk sebuah status sistem, memungkinkan user untuk dengan cepat merespon dan memahami apa yang terjadi.

Petunjuk Visual / Visual Hint

Pertama, user sering membutuhkan bantuan untuk memahami cara untuk menggunakan aplikasi. Hal ini terutama berlaku untuk interface yang berisi interaksi yang unik atau hal yang tidak biasa (seperti interface yang digerakkan oleh gesture). Tanpa visual bantuan, user mungkin akan bingung tentang cara berinteraksi dengan aplikasi.

Ketika petunjuk visual hadir untuk mengarahkan pengguna tentang apa yang harus dilakukan di dalam UI, kamu harus membuat satu set visual petunjuk visual yang menyampaikan kemungkinan interaksi. Jenis animasi fungsional ini mendorong perhatian pengguna kepada kemungkinan adanya interaksi.

Visual hints bisa memberikan user pemahaman apa yang akan terjadi selanjutnya. Misalnya, animasi fungsional yang mempersiapkan user untuk mengambil foto seperti yang dilakukan aplikasi kamera iOS (sebelum iOS 7)

 

Atau mereka dapat melibatkan user untuk mengambil langkah selanjutnya dengan mendemonstrasikan bagaimana fungsi tertentu ketika aplikasi beroperasi. Dengan adanya Visual Hints dapat meningkatkan tingkat keaktifan user.

Pudding Monsters for iOS. Image credit: Pudding monsters

 

Tujuannya untuk menciptakan ekspektasi yang diperlukan dengan memberi petunjuk kepada user tentang apa yang akan terjadi, Membantu user menyesuaikan diri dengan interface, dan Memberitahu user bagaimana mereka dapat berinteraksi dengan elemen di screen.

Transisi Navigasi

Transisi navigasi adalah perpindahan antar kondisi dalam aplikasi seperti dari tampilan yang umum ke tampilan yang lebih detail. Perubahan status sering kali melibatkan pergantian tampilan yang terkesan kaku dan bisa membuat user untuk sulit mengikuti flow-nya.

Animasi fungsional memudahkan user melalui momen-momen perubahan ini, dengan kata lain, animasi ini dengan lancar membawa user menghubungkan konteks navigasi dan menjelaskan perubahan pada layar dengan membuat koneksi visual antar status transisi

Transisi navigasi dapat berupa Parent-to-child Transition dan Sibling Transition

Parent Tranition. Transisi hierarki Parent digunakan saat user menjelajahi layar yang lebih dalam dari suatu aplikasi, yang merupakan turunan dari layar utama.

Animated zoom-in transition guides a user’s attention from parent-to-child (detailed view). Image credit: Material Design

 

Animated parent-to-child transition clarifies the relationship between parent and child. Image credit: Behance

 

Sibling Transition. Transisi ini terjadi antara elemen pada tingkat hierarki yang sama misalnya animasi ini digunakan saat user menavigasi dengan cara menggesernya

Dalam kedua kasus ini, animasi fungsional membantu mata kita melihat dari mana objek baru datang, dan ke mana objek tersembunyi pergi, lalu dapat ditemukan lagi. Hal ini memberikan isyarat visual, membuat interaksi lebih mudah diikuti dan memperkuat apa yang telah terjadi.

The content and surface of each tab stays at the same level and the animation simply guides focus between views. Image credit: Behance

Tujuannya adalah untuk menentukan hubungan spasial antara layar dan elemen dan juga menghindari transisi yang mengejutkan sampai membuat user blank dengan cara membantu user memahami perubahan yang baru saja terjadi di dalam layout halaman.

 

 

Source :
Thinking Design by Adobe 
Dribble