Animasi adalah bagian besar dari pengalaman pengguna. Ketika berbicara tentang transisi dalam aplikasi seluler, ada banyak hal yang dapat Anda komunikasikan secara halus dengan animasi. Kirim pesan, buka Pengaturan, centang kotak, navigasikan ke halaman lain – ini semua adalah momen perubahan. Animasi transisi adalah cara terbaik untuk memperkuat tindakan pengguna.

Pada artikel ini, kami akan meninjau kasus umum ketika animasi fungsional dapat melengkapi desain visual dan mendukung interaksi.

Gambar: Ramosi

Berikan status sistem

Ketika pengguna memicu beberapa tindakan, mereka berharap melihat respons visual – sistem harus menjelaskan bahwa itu menerima permintaan dan mengerjakannya. Berikut adalah beberapa kasus ketika umpan balik animasi dapat memberi manfaat bagi pengalaman pengguna:

• Konfirmasikan tindakan pengguna . Pengguna mendapat pengakuan bahwa sistem menerima tindakan. Ketika pengguna memiliki umpan balik visual, ini mencegah mereka dari mengetuk elemen lagi.

Beri tahu pengguna tentang hasil tindakan mereka. Gambar: Colin Garven

• Perbarui konten pada halaman menggunakan tarikan untuk menyegarkan . Umpan balik visual dalam format indikator memuat membantu pengguna memahami bahwa sistem berfungsi atas permintaan mereka.

Animasi yang halus membantu pengguna memahami apa yang sedang terjadi. Gambar:  Ramosi

• Menunggu konten dimuat. Memuat tidak harus membosankan. Hampir semua aplikasi dapat menggunakan animasi yang halus saat memuat konten untuk mencegah pengguna pergi. Memuat animasi membuat pengguna sibuk dengan umpan balik visual dan sebagai hasilnya, pengguna merasakan waktu tunggu yang lebih singkat.

Animasi dapat membuat pengguna terlibat bahkan sebelum aplikasi dimuat sepenuhnya. Gambar:  UI8

Hubungkan berbagai langkah dalam proses multi-langkah

Terkadang pengguna harus melalui serangkaian langkah untuk menyelesaikan suatu tindakan. Harus jelas bahwa langkah-langkah terhubung satu sama lain. Animasi dapat membantu Anda menghubungkan setiap langkah untuk membuat seluruh perjalanan.

Di bawah ini adalah contoh yang sangat baik tentang bagaimana menggunakan animasi dapat membuat perkembangan acara yang linear.

Gambar: Jakub Antalík

Animasi dapat membantu desainer untuk membuat pengungkapan yang progresif . Pengungkapan progresif membuat antarmuka lebih mudah dipelajari dengan mengurangi jumlah informasi yang disajikan pada satu waktu. Berikut adalah dua contoh hebat menggunakan pengungkapan progresif untuk memberikan informasi dalam potongan yang bermakna:

Gambar: Ramosi

Gambar: Anton Skvortsov

Memperkenalkan elemen baru

Saat kami memperkenalkan elemen baru di halaman, kami mencoba memusatkan perhatian pengguna pada objek dan membantu mereka menjawab pertanyaan “Mengapa saya melihat objek baru?” Animasi membantu Anda menentukan hubungan dan hierarki objek saat memperkenalkan elemen baru.

Animasi dapat menunjukkan dari mana benda baru berasal. Gambar: Virgil Pana

Berikan pengguna rasa orientasi spasial

Animasi membantu pengguna membangun model informasi spasial mental yang lebih baik. Dan ini sangat penting bagi pengguna ponsel – kombinasi rentang perhatian pendek bersama dengan ukuran layar kecil dapat dengan mudah mengarah pada situasi ketika pengguna tersesat di labirin layar.

Kita dapat menggunakan animasi untuk memandu pengguna. Animasi membantu menjelaskan bagaimana arus informasi dari satu negara ke negara lain dihubungkan bersama. Itu membuat pengguna tidak tersesat dengan memberikan informasi pengguna tentang apa yang mereka alami sekarang.

Animasi orientasi memungkinkan Anda mengetahui di mana Anda berada sekarang terkait dengan dari mana Anda berasal. Gambar: Jae-seong, Jeong

Dalam contoh berikut, tombol tindakan mengambang (FAB) berubah menjadi sebuah header dan menjelaskan kepada pengguna bagaimana dua objek ini saling terkait.

Animasi dapat membantu Anda membangun hubungan antar elemen. Gambar: Anish Chandran

Minimalkan muatan kognitif

Beban kognitif adalah sejumlah upaya mental yang diperlukan untuk menggunakan suatu produk. Beban kognitif memiliki efek langsung pada seberapa mudah bagi pengguna untuk berinteraksi dengan aplikasi Anda. Secara umum, semakin banyak upaya yang diperlukan untuk menggunakan suatu produk semakin tidak diinginkan.

Sebagai desainer, tujuan kami adalah menciptakan antarmuka yang mudah digunakan. Animasi, bila digunakan dengan baik, mengurangi upaya pengguna yang dibutuhkan untuk menyelesaikan tugas.

Di hampir semua aplikasi, pengguna harus mengisi beberapa formulir. Banyak formulir memiliki penampung teks sebagai label untuk bidang. Saat pengguna mengetuk bidang tersebut, label menghilang. Akibatnya, menjadi sulit bagi pengguna untuk mencari tahu apa yang diwakili bidang ini. Label mengambang membantu pengguna untuk menjaga konteks dan membuatnya nyaman untuk berinteraksi dengan formulir yang panjang.

Ketika datang ke input pengguna, jangan mengandalkan memori pengguna. Jadikan semua informasi penting terlihat. Gambar:  MDS

Izinkan pengguna untuk memahami perubahan fungsional

Perubahan fungsional terjadi ketika elemen mengubah fungsinya setelah interaksi. Misalnya, ketika pengguna mengetuk tombol, tombol akan berarti hal yang berbeda. Animasi ini membantu pengguna menemukan jawaban untuk pertanyaan “Apa elemen ini sekarang?”

Salah satu contoh umum perubahan fungsional yang dapat dilihat di banyak antarmuka seluler adalah toggle. Animasi membantu pengguna memahami apa keadaan elemen.

Tombol menjiwai pada ketukan sehingga pengguna dapat melihat perubahannya. Gambar: Jurre Houtkamp

Dalam beberapa kasus, perubahan fungsional elemen tunggal mengarah pada perubahan seluruh tampilan. Misalnya, menu hamburger yang berubah menjadi ‘X’ dan mengaktifkan tampilan baru.

Jelaskan kepada pengguna bahwa utilitas objek telah diubah. Gambar: Tamas Kojo

Kesimpulan

Animasi sangat kuat ketika digunakan dengan cara yang canggih. Ini memecahkan banyak masalah fungsional dalam antarmuka dan membuat mereka merasa hidup dan benar-benar responsif kepada pengguna. Tidak peduli apa pun aplikasi yang Anda desainkan, ini akan memberikan cerita kepada pengguna Anda. Dan animasi dapat membantu Anda menceritakan sebuah kisah dengan lebih efektif.

Terima kasih!

sumber:babich.biz marvelapp.com