Panduan Lengkap untuk Menggunakan Animasi di UX Dengan Benar

Saya membawa kepada Anda terjemahan dari artikel yang sangat keren tentang animasi antarmuka.
Panduan utama untuk penggunaan animasi di UX oleh Taras Skytskyi.



Saat ini sulit untuk mengesankan atau bahkan mengejutkan dengan animasi antarmuka. Ini menunjukkan interaksi antara layar, menjelaskan cara menggunakan aplikasi atau hanya mengarahkan perhatian pengguna. Mempelajari artikel tentang animasi, saya belajar bahwa hampir semuanya menggambarkan hanya kasus penggunaan tertentu atau fakta umum tentang animasi, tetapi saya tidak menemukan artikel apa pun di mana semua aturan mengenai animasi antarmuka akan dijelaskan dengan jelas dan praktis. Tetapi, dalam artikel ini saya tidak akan menulis sesuatu yang baru, saya hanya ingin mengumpulkan semua prinsip dan aturan dasar di satu tempat, sehingga desainer lain yang ingin menjalankan antarmuka animasi tidak perlu mencari informasi tambahan.

Durasi dan kecepatan animasi

Ketika elemen mengubah keadaan atau posisi mereka, durasi animasi harus cukup lambat untuk memungkinkan pengguna memperhatikan perubahan, tetapi pada saat yang sama cukup cepat untuk tidak menimbulkan harapan.



Gunakan durasi animasi yang benar. Jangan membuatnya terlalu cepat dan jangan meninggalkan pengguna banyak waktu untuk kebosanan

Sejumlah penelitian telah menunjukkan bahwa kecepatan animasi optimal dari antarmuka adalah dari 200 hingga 500 ms. Angka-angka ini didasarkan pada kualitas spesifik otak manusia. Animasi apa pun yang lebih pendek dari 100 ms bersifat instan dan tidak akan dikenali sama sekali. Jika animasi yang berlangsung lebih dari 1 detik akan menyampaikan perasaan penundaan dan, oleh karena itu, akan membosankan bagi pengguna.



Durasi animasi, yang lebih baik untuk ada di antarmuka Anda

Pada perangkat seluler, Pedoman Desain Material juga menyarankan untuk membatasi durasi animasi hingga 200-300 ms. Sedangkan untuk tablet, durasinya harus 30% lebih lama - sekitar 400-450 ms. Alasannya sederhana: ukuran layar lebih besar, sehingga objek bergerak jauh ketika mereka mengubah posisi. Pada gadget, durasi harus 30% lebih pendek, masing-masing - sekitar 150-200 ms, karena jarak yang ditempuh lebih pendek pada layar yang lebih kecil.



Ukuran perangkat seluler memengaruhi durasi animasi

Animasi web bekerja secara berbeda. Karena kita terbiasa membuka halaman web secara instan di browser, kami juga mengharapkan transisi cepat antara berbagai kondisi. Dengan demikian, durasi transisi web harus berlangsung sekitar 2 kali lebih pendek dari pada perangkat seluler - dari 150 hingga 200 ms. Dalam kasus lain, pengguna pasti berpikir bahwa komputer membeku atau mengalami masalah saat terhubung ke Internet.

Tapi Lupakan aturan ini jika Anda membuat animasi dekoratif di situs web Anda atau mencoba menarik perhatian pengguna ke elemen tertentu. Dalam kasus ini, animasinya mungkin lebih lama.



Layar komputer besar = Animasi lambat? Tidak mungkin!

Harus diingat bahwa terlepas dari platform, durasi animasi harus tergantung tidak hanya pada jarak yang ditempuh, tetapi juga pada ukuran objek. Elemen atau animasi yang lebih kecil dengan perubahan kecil harus bergerak lebih cepat. Dengan demikian, animasi dengan elemen besar dan kompleks terlihat lebih baik ketika mereka bertahan sedikit lebih lama.

Di antara objek bergerak dengan ukuran yang sama, objek pertama yang berhenti adalah jarak terdekat.

Objek kecil, dibandingkan dengan objek besar, bergerak lebih lambat, karena mereka membuat perpindahan besar.



Durasi animasi berbeda-beda tergantung pada ukuran objek dan jarak yang ditempuh.

Ketika benda bertabrakan, energi tabrakan harus didistribusikan secara merata di antara mereka sesuai dengan hukum fisika. Dengan demikian, lebih baik untuk menghilangkan efek bouncing. Gunakan hanya dalam kasus luar biasa saat itu masuk akal.



Hindari menggunakan efek pantulan karena mengalihkan perhatian.

Pergerakan objek harus jelas, jadi jangan gunakan gerakan blur (ya, pengguna After Effects, tapi tidak kali ini). Sulit untuk mereproduksi efeknya bahkan pada perangkat mobile modern, dan itu tidak digunakan sama sekali dalam animasi antarmuka.



Jangan gunakan efek blur dalam animasi

Daftar item (kartu berita, daftar email, dll.) Harus memiliki sedikit keterlambatan tampilan. Setiap tampilan elemen baru harus berlangsung dari 20 hingga 25 ms. Penampilan elemen yang lebih lambat dapat mengganggu pengguna.



Animasi untuk item daftar harus berlangsung 20-25 ms

Pelunakan

Pelunakan membantu membuat gerakan objek lebih alami. Ini adalah salah satu prinsip utama animasi , yang dijelaskan secara rinci dalam buku "The Illusion of Life: Disney Animation," yang ditulis oleh dua animator utama Disney - Ollie Johnston dan Frank Thomas.
Agar animasi tidak terlihat secara mekanis dan artifisial, objek harus bergerak dengan akselerasi atau perlambatan - sama seperti semua objek hidup di dunia fisik.



Animasi atenuasi terlihat lebih alami dibandingkan linier

Gerakan linear

Objek yang tidak tunduk pada kekuatan fisik apa pun bergerak secara linear, dengan kata lain, pada kecepatan konstan. Dan hanya karena ini mereka terlihat sangat tidak alami dan buatan untuk mata manusia.

Semua aplikasi animasi menggunakan kurva animasi. Saya akan mencoba menjelaskan bagaimana cara membacanya dan apa artinya. Kurva menunjukkan bagaimana posisi objek (sumbu y) berubah dalam interval waktu yang sama (sumbu x). Dalam kasus saat ini, gerakannya linear, sehingga objek bergerak pada jarak yang sama secara bersamaan



Kurva gerak linear.

Gerak linear, misalnya, hanya dapat digunakan ketika suatu benda berubah warna atau transparansi. Sebagai aturan, kita dapat menggunakannya untuk keadaan saat objek tidak mengubah posisinya.

Gain atau kurva akselerasi

Kita dapat melihat pada kurva bahwa pada awalnya posisi objek berubah perlahan, dan kecepatannya meningkat secara bertahap. Ini berarti bahwa objek bergerak dengan akselerasi tertentu.



Kurva percepatan

Kurva ini harus digunakan ketika benda terbang keluar dari layar dengan kecepatan penuh. Ini bisa berupa notifikasi sistem atau hanya kartu antarmuka. Namun perlu diingat bahwa jenis kurva ini hanya boleh digunakan ketika benda meninggalkan layar selamanya, dan kita tidak bisa kembali atau mengingatnya.



Kurva percepatan untuk mengeluarkan peta dari layar.

Kurva animasi membantu mengekspresikan suasana hati yang tepat. Dalam contoh di bawah ini, kita melihat bahwa durasi dan jarak untuk semua objek adalah sama, tetapi bahkan perubahan kecil pada kurva memberi Anda kemampuan untuk mempengaruhi suasana animasi.

Dan, tentu saja, dengan mengubah kurva, Anda dapat memindahkan objek sedekat mungkin dengan kenyataan.



Durasi dan jarak yang sama, tetapi suasana hatinya berbeda

Kurva atenuasi atau deselerasi

Ini adalah kebalikan dari kurva penguatan, sehingga objek dengan cepat menutupi jarak yang besar, dan kemudian perlahan-lahan kehilangan kecepatan sampai berhenti.



Kurva perlambatan

Jenis kurva ini harus digunakan ketika suatu elemen muncul di layar - ia terbang di layar dengan kecepatan penuh, secara bertahap melambat hingga berhenti sepenuhnya. Ini juga dapat diterapkan ke berbagai peta atau objek yang muncul di luar layar.



Kurva pengereman untuk kejelasan

Kurva Keuntungan dan Atenuasi atau Kurva Standar

Kurva ini menyebabkan objek untuk menambah kecepatan di awal, dan kemudian perlahan-lahan mengatur ulang ke nol. Jenis gerakan ini paling sering digunakan dalam animasi antarmuka. Setiap kali Anda ragu jenis gerakan apa yang akan digunakan dalam animasi Anda, gunakan kurva standar.



Kurva standar

Menurut Pedoman Desain Material , yang terbaik adalah menggunakan kurva asimetris untuk membuat gerakan lebih alami dan realistis. Ujung kurva harus lebih ditekankan daripada awalnya, sehingga durasi akselerasi lebih pendek daripada kecepatan deselerasi. Dalam hal ini, pengguna akan lebih memperhatikan pergerakan akhir elemen dan, oleh karena itu, status barunya.



Lihat Perbedaan Antara Kurva Standar Simetris dan Asimetris

Kurva standar digunakan ketika objek bergerak dari satu bagian layar ke yang lain. Dalam hal ini, animasi menghindari efek yang menarik dan dramatis.



Memindahkan elemen pada layar dan kurva asimetris yang sesuai

Jenis gerakan yang sama harus digunakan ketika item menghilang dari layar, tetapi pengguna dapat mengembalikannya ke lokasi sebelumnya kapan saja. Ini berlaku khususnya pada bilah navigasi.



Bilah navigasi disembunyikan dari layar menggunakan kurva standar

Dari contoh-contoh ini, aturan mendasar berikut, yang diabaikan oleh banyak pemula - animasi awal tidak sama dengan animasi akhir. Seperti halnya bilah navigasi, ini muncul dengan kurva perlambatan dan menghilang dengan kurva standar. Selain itu, menurut Google Material Design , waktu penampilan suatu objek harus lebih lama untuk menarik lebih banyak perhatian.



Tampilan dan hilangnya menu samping dilakukan masing-masing dengan perlambatan dan kurva standar

Fungsi cubic-bezier () digunakan untuk menggambarkan kurva. Disebut kubik karena didasarkan pada empat titik. Titik pertama dengan koordinat 0; 0 (kiri bawah) dan yang terakhir dengan koordinat 1; 1 (kanan atas) sudah ditentukan pada grafik.

Berdasarkan ini, kita perlu menggambarkan hanya dua titik pada grafik, yang diberikan oleh empat argumen fungsi cubic-bezier () : dua yang pertama adalah koordinat x dan y dari titik pertama, dan yang kedua adalah koordinat x dan y dari titik kedua.

Untuk menyederhanakan pekerjaan dengan kurva, saya sarankan menggunakan situs easings.net dan cub-bezier.com . Yang pertama berisi daftar kurva yang paling umum digunakan, parameter yang dapat Anda salin ke alat prototyping. Sumber kedua memberi Anda kesempatan untuk bermain dengan berbagai parameter kurva dan segera melihat bagaimana objek akan bergerak.



Berbagai jenis kurva dan parameternya untuk fungsi tersebut

cubic-bezier() 

Koreografi dalam antarmuka animasi

Seperti dalam koreografi balet, ide utamanya adalah mengarahkan perhatian pengguna ke perubahan selama transisi dari satu kondisi ke kondisi lainnya.

Ada dua jenis koreografi - interaksi yang sama dan bawahan.

Interaksi yang setara

Interaksi yang setara berarti bahwa penampilan semua objek mematuhi satu aturan tertentu.

Dalam hal ini, penampilan semua elemen dianggap sebagai satu aliran, yang mengarahkan perhatian pengguna dalam satu arah, yaitu dari atas ke bawah. Jika kami tidak mengikuti pesanan, perhatian pengguna akan tersebar. Penampilan semua elemen sekaligus akan terlihat buruk.



Perhatian pengguna harus diarahkan dalam satu arah.

Adapun tampilan tabel, ini sedikit lebih rumit. Di sini, fokus pengguna harus diagonal, jadi menampilkan elemen satu per satu adalah ide yang buruk. Mengidentifikasi setiap elemen satu demi satu akan membuat animasinya terlalu lama, dan perhatian pengguna akan zigzag, yang salah.



Tampilan diagonal untuk tampilan elemen tabel

Interaksi budak

Interaksi bawahan berarti bahwa kita memiliki satu objek pusat yang menarik perhatian semua pengguna, dan semua elemen lainnya berada di bawahnya.
Vanilla Thunder

Jenis animasi ini memberikan rasa ketertiban dan lebih menarik perhatian pada konten utama.

Dalam kasus lain, akan sangat sulit bagi pengguna untuk memahami objek mana yang harus diamati, sehingga perhatiannya akan tersebar. Oleh karena itu, jika Anda memiliki beberapa elemen yang ingin Anda menghidupkan, Anda perlu mendefinisikan dengan jelas urutan gerakan mereka dan menghidupkan objek sesedikit mungkin pada suatu waktu.



Layak untuk menghidupkan kembali hanya satu objek pusat dan yang lainnya lebih rendah dari itu. Jika tidak, pengguna tidak akan tahu objek yang harus diperhatikan.

Menurut Desain Material , ketika objek bergerak secara tidak proporsional ditransformasikan, mereka harus bergerak dalam lengkungan, bukan garis lurus. Ini membantu membuat gerakan lebih alami. "Secara proporsional" Maksud saya bahwa perubahan tinggi dan lebar objek dengan menambah / mengurangi dilakukan secara asimetris, yaitu pada kecepatan yang berbeda (misalnya, elemen persegi berubah menjadi persegi panjang).



Pergerakan objek, yang secara tidak proporsional mengubah ukurannya, harus ditempatkan di sepanjang busur

Gerakan di sepanjang garis digunakan ketika objek mengubah ukurannya secara proporsional. Karena pelaksanaan gerakan semacam itu jauh lebih sederhana, aturan gerakan busur yang tidak proporsional sering diabaikan. Melihat contoh aplikasi dunia nyata, Anda akan melihat dominasi gerak linier.



Mengubah ukuran proporsional dilakukan dalam garis lurus.

Gerakan di sepanjang kurva dapat dicapai dengan dua cara: yang pertama disebut Pintu keluar vertikal dari objek mulai bergerak secara horizontal dan berakhir dengan gerakan vertikal; yang kedua - pintu keluar horisontal objek mulai bergerak secara vertikal dan berakhir dengan gerakan horizontal.

Jalur objek di sepanjang kurva harus bertepatan dengan sumbu utama antarmuka gulir. Sebagai contoh, pada gambar berikutnya, kita dapat menggulir antarmuka ke atas dan ke bawah, dan, karenanya, objek berputar secara vertikal - pertama ke kanan, dan kemudian ke bawah. Gerakan dalam arah yang berlawanan dilakukan dengan cara yang berlawanan, yaitu, objek pertama naik secara vertikal dan berakhir dengan gerakan horizontal.



Arah memperluas / menciutkan objek harus bertepatan dengan sumbu antarmuka

Jika jalur benda yang bergerak bersilangan satu sama lain, mereka tidak dapat melewati satu sama lain. Objek harus meninggalkan ruang yang cukup untuk pergerakan objek lain, memperlambat atau mempercepat kecepatan mereka sendiri. Pilihan lain adalah mereka hanya mengusir objek lain. Kenapa begitu Karena kami menganggap bahwa semua objek di antarmuka berada di bidang yang sama.



Selama gerakan, objek tidak boleh saling melewati, tetapi meninggalkan ruang untuk memindahkan objek lain

Dalam kasus lain, objek bergerak mungkin naik di atas objek lain. Namun sekali lagi jangan bersinggungan dengan benda lain. Mengapa Karena kami percaya bahwa elemen antarmuka berperilaku sesuai dengan hukum fisika, dan tidak ada benda padat di dunia nyata yang bisa melakukan ini.



Objek dapat naik di atas objek lain dan kemudian bergerak.

Kesimpulan

Jadi, untuk meringkas semua aturan dan prinsip di atas, animasi di antarmuka harus mencerminkan gerakan yang kita ketahui dari dunia fisik - gesekan, akselerasi, dll. Dengan mensimulasikan perilaku objek dari dunia nyata, kita dapat membuat urutan yang memungkinkan pengguna untuk memahami apa yang diharapkan dari antarmuka.

Jika animasi dibangun dengan benar, maka itu tidak mengganggu dan tidak mengalihkan pengguna dari tujuan mereka. Jika demikian, Anda harus melunakkan atau menghapusnya sama sekali. Ini berarti bahwa animasi tidak boleh memperlambat pengguna atau mengganggu tugas.

Tetapi jangan lupa bahwa animasi lebih merupakan seni daripada sains, oleh karena itu lebih baik untuk bereksperimen dan menguji keputusan Anda pada pengguna.

Sumber: Panduan utama untuk penggunaan animasi yang tepat di UX
Diposting oleh: Taras Skytskyi.