#BestPractice — #2, Hint Animation

Dwinawan
Insight
Published in
2 min readSep 11, 2018

--

Ini adalah artikel yang membahas tentang beberapa pola design yang sering digunakan di aplikasi ataupun di website. Pola design meliputi layout, flow, dan animasi.

Salah satu fungsi animasi adalah untuk mengkomunikasikan suatu konteks terhadap user. Berikut beberapa contoh penggunaan animasi untuk memberikan informasi dan konteks kepada user.

1. Animasi untuk memberitahukan terdapat gestur yang tersembunyi (Hidden Gesture)

Dibuat menggunakan principle

Animasi diatas memberitahu user bahwa terdapat gestur swipe di setiap baris untuk memunculkan opsi untuk menghapus riwayat transaksi.

Setelah user mencoba untuk men-swipe, maka hal itu langsung dideteksi dan dicatat oleh sistem sehingga kedepannya sistem tidak akan menampilkan animasi tersebut, karena sistem menganggap user telah mengetahui adanya gestur swipe.

2. Animasi untuk memberitahukan bahwa user harus mengisi suatu informasi

Terkadang user melewatkan beberapa inputan informasi. Animasi bisa menjadi salah satu solusi untuk memberitahu hal tersebut

Dibuat menggunakan principle

Dengan mengubah warna elemen yang harus diisi oleh user menjadi merah dan memberikan animasi “bounce” atau bergoyang, membuat user melihat ke arah elemen tersebut, dan sadar bahwa ia harus mengisi informasi di elemen tersebut.

Semoga bermanfaat :)

--

--

Dwinawan
Insight

Co-Founder Paperpillar • UI Designer • Love to create design exploration on dribbble.com/dwinawan • Have a question? find me on twitter.com/dwinawan_