Menghindari Change Blindness dengan menggunakan animasi

Pernahkah Anda mengalami hal seperti ini?

Anda membuka sebuah website, lalu melakukan proses registrasi.

Karena form nya terlalu banyak, Anda harus menscroll halaman tersebut

Setelah Anda selesai mengisi form, Anda menekan tombol Lanjutkan. Dan tidak terjadi apa apa. Anda klik berkali kali dan tidak terjadi apa apa.

Lalu Anda iseng menscroll halaman ke atas, ternyata di bagian atas terdapat pesan error

Anda tidak menyadari pesan tersebut, karena pesan tersebut berada di atas.

Pengalaman tersebut dinamakan Change Blindness.

Change Blindness, kondisi dimana user tidak menyadari adanya perubahan setelah ia melakukan sebuah aksi.

Salah satu cara untuk menghindari Change Blindness adalah dengan menggunakan animasi. Berikut contoh contohnya….

Pada kasus diatas, Change Blindness bisa dihindari dengan menambahkan animasi yang bergerak ke atas untuk menunjukkan pesan error kepada user.


Contoh animasi lain untuk menghindari Change Blindness

Sumber: https://dribbble.com/shots/5251891--Exploration-Error-Interaction

Saat user belum mengisi data partisipan dan menekan tombol “Continue” , maka sistem akan memberi tahu kepada user bahwa data partisipan harus diisi, dengan cara memberikan animasi bergoyang dan merubah warna elemennya menjadi merah.


Contoh animasi lain untuk menghindari Change Blindness

Sumber: https://dribbble.com/shots/1969732-Catalog-page-add-to-cart-interaction

Saat user menekan tombol “Add to Cart” maka keranjang belanja yang berada di sebelah kiri akan terupdate.

Untuk menghindari Change Blindness, maka ditambahkan lah animasi seperti diatas, yang menunjukkan kepada user bahwa setelah mereka menekan tombol “Add to Cart” maka baju yang telah mereka pilih akan masuk ke keranjang belanja yang berada di sebelah kiri.

Bayangkan kalau tidak ada animasi tersebut, tentu user akan berpikir “ini udah klik add to cart kok enggak terjadi apa apa. website nya rusak ya?” . Mereka tidak akan menyadari kalau keranjang belanja di area sebelah kiri telah terupdate karena fokus mata mereka sedang berada di area sebelah kanan.


Semoga Bermanfaat :)