Animasi yang Punya Tujuan

• Animasi bila digunakan dengan tepat dapat meningkatkan prediktabilitas, kecepatan yang dirasakan, dan kesenangan dalam antarmuka
• Namun, animasi yang digunakan secara serampangan dapat menyebabkan ketidakpastian, penundaan, bahkan penurunan kepercayaan pengguna
• Langkah pertama yang penting adalah menetapkan tujuan yang jelas untuk animasi
• Semakin sering animasi digunakan, justru pengalaman tanpa animasi bisa menjadi pilihan yang lebih baik
• Kecepatan animasi juga sangat menentukan dalam performa kognitif dan kepuasan pengguna

---

Kesengajaan dalam tujuan animasi

• Penggunaan animasi yang tepat meningkatkan prediktabilitas, kecepatan yang dirasakan, dan kesenangan pengalaman pengguna dalam antarmuka
• Animasi yang buruk membuat antarmuka terasa lambat, membingungkan, dan tidak menyenangkan, serta berdampak negatif pada kepercayaan pengguna terhadap produk

Pentingnya niat yang jelas

• Sebelum menerapkan animasi, kita perlu bertanya, "Apa tujuan dari animasi ini?"
• Sebagai contoh, animasi pemasaran Product Intelligence milik Linear membantu pengguna memahami cara kerja fitur tersebut secara langsung, alih-alih hanya menampilkan gambar statis
• Efek scale down yang halus saat tombol ditekan membuat antarmuka terasa lebih hidup dan responsif
• Animasi kemunculan toast di Sonner memiliki dua tujuan berikut
  • Muncul secara alami alih-alih tiba-tiba, sehingga mengurangi kesan janggal
  • Muncul dan menghilang dari arah yang sama untuk menjaga konsistensi spasial dan meningkatkan intuisi gestur swipe-down
• Terkadang, "kegembiraan" itu sendiri bisa menjadi tujuan animasi, dan pada interaksi yang jarang terjadi, animasi dapat memberi kesan yang berbeda serta pengalaman yang mudah diingat
• Namun, ketika frekuensi penggunaan meningkat, kegembiraan awal itu dapat segera berubah menjadi kejengkelan dan penundaan

Frekuensi penggunaan dan animasi

• Semakin sering animasi dilihat, semakin besar kelelahan pengguna dan penundaan pekerjaan yang mungkin timbul
• Misalnya, dalam situasi penggunaan Raycast berulang kali, animasi yang tidak perlu menjadi gangguan besar
• Pada menu, daftar, dan situasi yang dioperasikan dengan keyboard secara berulang, lebih baik menghilangkan animasi sepenuhnya
• Bahkan diperlihatkan contoh bahwa animasi saat menggunakan keyboard justru menurunkan kecepatan respons
• Dalam skenario tertentu seperti pekerjaan berulang atau volume besar, pengalaman tanpa animasi bisa menjadi pilihan terbaik

Persepsi kecepatan dan responsivitas

• Di luar situs pemasaran, semua animasi UI harus berjalan cepat agar meningkatkan performa dan responsivitas yang dirasakan pengguna
• Loading spinner yang berputar cepat bisa terasa lebih cepat meskipun waktu muatnya sama
• Animasi dropdown selama 180ms terasa jauh lebih responsif dibanding 400ms
• Secara umum, durasi animasi UI yang tepat adalah di bawah 300ms
• Untuk tooltip, sedikit jeda saat pertama kali muncul itu baik, tetapi setelah terbuka, respons instan tanpa animasi tambahan memberikan pengalaman terbaik (lihat Radix UI, Base UI)
• Perpindahan tanpa jeda antar tooltip meningkatkan pengalaman pengguna tanpa merusak tujuannya

Membangun antarmuka yang hebat

• Tujuan akhirnya bukanlah animasi itu sendiri, melainkan membangun antarmuka pengguna yang unggul
• Yang penting adalah menciptakan pengalaman yang ingin digunakan pengguna dengan senang hati dalam keseharian mereka
• Terkadang animasi memang diperlukan, tetapi tergantung situasinya, "tanpa animasi" bisa menjadi pilihan terbaik
• Mengetahui kapan dan bagaimana menerapkan animasi adalah kemampuan penting dalam perancangan UI/UX

Penutup

• Untuk membuat antarmuka yang luar biasa, dibutuhkan pemahaman mendalam tentang cara memanfaatkan animasi
• Materi teori dan praktik tambahan dapat ditemukan di "Animations on the Web"

[GN⁺]

Komentar Hacker News

• Setiap kali para desainer membahas animasi, mereka cenderung memakai kata-kata seperti “kebijakan” atau “kegembiraan” sambil menimbang elemen-elemen itu terhadap latensi persepsi; itu tidak sepenuhnya salah, tetapi ada beberapa hal yang terasa kurang memuaskan

  1. Saya rasa bagian tentang kegembiraan (delight) terlalu dibesar-besarkan; orang yang benar-benar terkesan oleh animasi yang mencolok kebanyakan adalah desainer lain
  2. Yang paling penting, saat memutuskan kapan animasi harus digunakan, lebih berguna untuk berfokus pada “state”; jika ada risiko pengguna tidak menyadari perubahan state dengan baik, saat itulah animasi dipakai untuk membantu visualisasi. Menurut saya, itulah tujuan utama penggunaan animasi, selebihnya hanyalah kesia-siaan

  • Menanggapi pendapat bahwa “kegembiraan itu dibesar-besarkan”, animasi yang bermakna di perangkat lunak memang punya dampak positif yang nyata bagi pengguna jika digunakan dengan tepat dan tidak mengganggu, hanya saja dampaknya mungkin sedikit berbeda dari yang dibayangkan banyak orang
    Animasi yang dirancang dengan baik adalah elemen 20% terakhir yang membedakan “bagus” dari “luar biasa”; tidak wajib, tetapi bisa menjadi pembeda saat dibandingkan dengan pesaing
    Alasan realistis mengapa animasi bisa bernilai mirip dengan bagaimana pada produk fisik, orang menganggap bobot atau daya tahan sebagai ciri produk premium
    Namun, selama 10 tahun terakhir desain UI terlalu condong pada “nuansa”, “presentasi dramatis”, dan “branding”, sementara riset yang benar-benar layak dan sisi praktis pemanfaatan animasi yang efektif justru terabaikan
    Menurut saya, sekarang saatnya desain UI kembali berfokus pada kegunaan praktis

  • Saya terkejut bahwa efek scale down halus saat tombol diklik dianggap sebagai salah satu jenis animasi; ini adalah umpan balik visual yang sangat mendasar untuk memberi tahu bahwa sesuatu bisa diklik dan bahwa kliknya sudah dikenali

  • Sikap yang menekankan delight itu sendiri dalam desain perangkat lunak banyak terlihat pada para penggemar Apple lama, misalnya dalam rasa sayang terhadap berkurangnya kesan menyenangkan Apple setelah era Jobs
    Saya tidak tahu tulisan representatif yang merangkum tema ini secara menyeluruh, tetapi tulisan singkat ini menyinggungnya
    Kecenderungan menyukai detail-detail seperti ini bukan sekadar selera beberapa desainer atau fenomena sempit, melainkan salah satu ciri inti fandom Apple

  • Saya sering melihat desainer yang bekerja di lingkungan B2B mendesain dengan nuansa B2C
    Di B2B, terutama enterprise, ini hanyalah alat kerja harian pengguna, jadi animasi yang mencolok, gradasi warna-warni (yang belakangan kadang juga berarti AI), dan sebagainya tidak membantu pekerjaan nyata, malah membuatnya lebih mengganggu
    Elemen dekoratif seperti ini hanya menghalangi pengguna menavigasi dashboard yang dominan teks secara efisien
    Jika ingin membuat pengalaman yang “cantik dan menyenangkan”, maka perusahaan workflow seperti CRM/ERP memang bukan tempat yang cocok; itu baru bermakna jika Anda bekerja di perusahaan yang nilai bisnisnya memang terhubung langsung dengan kepuasan emosional pengguna

  • Saya tidak setuju bahwa delight dibesar-besarkan
    Misalnya, jika pengguna Apple/iPhone memakai Android selama seminggu, mereka akan bilang rasanya “ada yang janggal dan mengganggu”
    Bagian seperti ini hadir karena iOS punya animasi yang dibuat dengan cermat di seluruh interaksi
    Konsumen umum mungkin tidak akan mendeskripsikan pengalamannya dengan istilah delight, tetapi mereka jelas menyadari ketika pengalaman yang mereka dapatkan lebih buruk dari sebelumnya

• Saya rasa Apple juga punya hal yang perlu dipelajari di sini; sering kali waktu terbuang hanya untuk menunggu animasi yang tidak perlu
  Misalnya, setelah scroll sampai ke paling bawah lalu mengetuk tombol, kadang harus menekan berkali-kali sebelum merespons karena animasi bouncing belum selesai
  Aksi berbasis gesture seperti swipe antar aplikasi, menutup notifikasi, membuka dock atau drawer, dan sebagainya, kebanyakan diproses terlalu lambat
  Animasi berjalan berurutan: yang satu harus selesai dulu, baru animasi berikutnya, dan setelah itu barulah interaksi bisa dilakukan
  Ironis bahwa perangkat baru terasa lebih nyaman dipakai hanya jika animasi seperti ini dimatikan lewat pengaturan Accessibility

  • Saat Apple Wallet terhubung ke ponsel, ada animasi layar penuh yang sama sekali tidak berguna, dan selama itu saya tidak bisa melakukan apa pun, jadi sangat menjengkelkan
    Cukup beri sinyal haptic kecil ketika sudah terhubung

  • Semua animasi navigasi iOS dirancang agar bisa dipotong di tengah lalu dilanjutkan dengan aksi lain; tidak perlu selalu menunggu sampai selesai sepenuhnya

  • Di macOS, saat berpindah desktop/space, semua input tetap diterapkan ke space sebelumnya sampai animasinya benar-benar selesai, dan ini sangat membuat frustrasi
    Apple sekarang tampaknya tidak benar-benar memperhatikan UI/UX; di organisasi sebesar itu, tanpa pengambil keputusan sekuat Steve Jobs, sulit membuat pengalaman pengguna yang bagus
    Dan sering kali para desainer tidak menyadari bahwa “pengguna rata-rata” bukanlah diri mereka sendiri atau penggemar produk mereka, melainkan orang yang hanya menginginkan fungsi dasar dan konsistensi
    Setiap kali ingin mengubah sesuatu, perlu sikap bahwa itu jangan pernah diubah kecuali setelah ditunjukkan ke nenek Anda dia berkata, “Wah, ini memang jauh lebih baik”

• Saya justru ingin kecepatan animasi dibuat lebih cepat lagi
  300ms terlalu lambat bagi saya
  Saya lebih suka animasi yang sangat singkat sampai nyaris tidak terasa
  Bahkan, Anda mungkin baru menyadari keberadaan animasi justru ketika animasinya dihilangkan
  Jika lebih lama dari itu, terasa terlalu lambat

  • Dulu saya juga memakai sekitar 250ms, tetapi belakangan saya turunkan ke 200ms
    200ms adalah kecepatan transisi UI yang ideal untuk memahami apa yang berubah, bagaimana berubah, dan mengapa
    Jika tidak memenuhi standar itu, lebih baik transisinya dihapus saja
    200ms juga praktis karena bisa ditulis sederhana sebagai .2s di CSS
    Di bawah 150ms, transisi bisa terasa seperti glitch rendering, jadi jika terlalu singkat, kelebihan animasi justru hilang

  • Saat pertama kali memakai ponsel Android, hal pertama yang saya lakukan adalah masuk ke mode pengembang dan mengatur kecepatan animasi menjadi dua kali lebih cepat
    Melihatnya berjalan pada kecepatan default terasa sangat menyebalkan

• Animasi dalam desain web pada praktiknya tidak berbeda jauh dari efek presentasi di PowerPoint
  Dalam kebanyakan kasus, satu atau dua efek cross-fade cepat sudah cukup untuk membuat UI terasa rapi, dan selebihnya jarang benar-benar dibutuhkan

• Saya rasa animasi hanya bermakna ketika ia menegaskan sesuatu yang sudah diketahui pengguna; animasi tidak boleh menjadi sarana utama untuk menyampaikan informasi
  Artinya, bahkan jika animasi dimatikan, pekerjaan tetap harus bisa dilakukan dengan kecepatan yang sama, dan alurnya pun harus tetap bisa dipahami dengan sama baiknya
  Tujuan animasi adalah menghubungkan perjalanan UX dengan mulus dan memberi sinyal kecil bahwa state memang sesuai harapan
  Misalnya, jika saat mouse hover sebuah elemen cepat di-highlight, saya tidak perlu lagi secara sadar memastikan bahwa mouse saya berada di atas kontrol itu
  Seperti pada contoh popup tooltip yang setelah sekali muncul lalu berikutnya tampil instan pada 0ms, itu terasa seperti tanda bahwa pembuatnya benar-benar memahami alur UX pengguna
  Inilah contoh representatif dari animasi yang memahami perjalanan UX dengan baik

• Prinsip saya adalah: jika pengguna harus menunggu sampai animasi selesai untuk bisa melanjutkan interaksi, maka animasi itu harus dihapus
  Dan saya juga percaya harus selalu ada opsi aksesibilitas untuk mematikan semua animasi

  • Untuk tujuan ini, media query CSS prefers-reduced-motion sangat berguna
    Lihat dokumentasinya

• Soal animasi perkenalan fitur Product Intelligence dari Linear, saya paham maksud desainernya, tetapi saat benar-benar dilihat, itu sama sekali tidak membantu pemahaman
  Animasi dengan sudut 3D yang aneh tampak tidak ada hubungannya dengan UI yang sebenarnya
  Efek 3D ini memang memberi isyarat bahwa kotak tertentu di layar, yaitu produknya, bukanlah halaman yang sedang saya baca, tetapi tetap saja tidak banyak membantu memahami fitur itu sendiri
  Efek fade-in memang membuat area tersebut menarik perhatian, tetapi tidak banyak berkontribusi dalam penyampaian isi

• Animasi yang “menyenangkan” terlihat baik di layar saya, misalnya M1 MacBook Pro, tetapi di layar lain seperti monitor IBM ThinkVision beresolusi rendah, animasi yang sama terlihat sangat canggung dan lambat
  Video demo di MacBook
  Video demo di monitor berkualitas rendah
  Rasanya bisa benar-benar berbeda tergantung monitor apa yang dipakai untuk melihatnya

  • Saya penasaran apakah monitor IBM itu digunakan pada resolusi native-nya

• Menanggapi pendapat bahwa “spinner yang berputar lebih cepat membuat loading terasa lebih cepat”, saya justru makin sering menemui desain buruk yang menyalahgunakan spinner cepat saat sebenarnya tidak ada yang sedang terjadi, sehingga spinner lambat terasa lebih bisa dipercaya

  • Saya hanya percaya loading bar yang menunjukkan progres secara nonlinier; dalam kasus seperti itu, saya bisa lebih jelas melihat sinyal bahwa sesuatu benar-benar sedang berjalan tahap demi tahap

  • Spinner yang lambat justru memberi kesan meyakinkan bahwa sistem sedang tersendat karena mengerjakan tugas yang berat, sehingga terasa lebih dapat dipercaya

• Contoh yang langsung merusak hari saya adalah ketika state menjadi tidak konsisten saat animasi sedang berjalan
  Misalnya di Windows, saat popup notifikasi dari sebuah aplikasi muncul, jika saya menekan X untuk menutupnya sebelum animasinya selesai, justru notifikasinya terbuka
  Di Mac, saat berpindah desktop, sebuah aplikasi sempat terlihat sekilas di layar lalu tiba-tiba berganti ke aplikasi lain; karena animasinya lambat, saya mengira prosesnya sudah selesai dan melakukan sesuatu, lalu malah bingung
  Bahkan kejadian seperti ini kadang muncul secara acak
  Untuk para desainer: jika Anda benar-benar ingin menambahkan animasi, maka animasi itu harus dibuat sepenuhnya kokoh; jika tidak, saya akan langsung kehilangan kepercayaan pada aplikasi tersebut