Setiap Frame Harus Sempurna
(tonsky.me)- UI adalah hampir satu-satunya permukaan tempat pengguna menilai kualitas aplikasi, dan kepercayaan terbentuk jika pada momen mana pun saat tangkapan layar diambil, keadaan layar tetap masuk akal
- UI dengan tingkat penyelesaian tinggi menjadi sinyal bahwa pengembang meluangkan waktu untuk memolesnya, dan menjadi heuristik yang masuk akal bahwa kualitas kodenya kemungkinan dipoles dengan standar serupa
- Tolok ukur nyatanya adalah menghilangkan kedipan putih di antara perpindahan layar, pemuatan parsial, perubahan tata letak saat memuat, ketidaksesuaian pesan status, dan animasi yang tidak akurat
- Meski keadaan awal dan akhir bagus, frame di tengah yang meleset akan memberi kesan komponen tidak tersinkronisasi, dan seperti pada kasus Photos, bahkan bisa menciptakan sensasi palsu pada transisi yang sebenarnya tidak mengubah apa pun
- Animasi seharusnya membantu memahami transisi, dan UI baru terasa seperti alat presisi jika bukan hanya awal dan akhir, tetapi juga setiap frame di antaranya dikelola dengan baik
Prinsip inti
- Tujuan eksplisit Wayland, “every frame is perfect”, adalah sasaran teknis untuk merebut kembali kendali di tengah kompleksitas tumpukan GPU modern
- Prinsip yang sama juga berlaku pada UI, dan pada momen mana pun aplikasi diambil tangkapan layarnya, tampilannya harus terasa alami dan konsisten
- Pengguna tidak bisa melihat kode, sehingga UI menjadi satu-satunya permukaan untuk menilai kualitas aplikasi
- Jika UI dipoles dengan baik, itu menjadi sinyal bahwa pengembang telah meluangkan waktu untuk pemolesan, dan mengarah pada penilaian bahwa kodenya kemungkinan dipoles pada tingkat yang serupa
Tolok ukur nyata dan contoh
- Untuk mencapai frame yang sempurna, tidak boleh ada kedipan putih di antara layar, tidak boleh ada konten yang hanya termuat sebagian, dan tidak boleh ada perubahan tata letak saat proses pemuatan berlangsung
- Keadaan internal UI harus konsisten; satu bagian tidak boleh mengatakan “1 update available” sementara bagian lain mengatakan “Checking for updates...”
- Animasi sering terlupakan; meskipun keadaan awal dan akhir sudah baik, jika bagian di antaranya terasa janggal maka tangkapan layar di tengah akan menjadi frame yang tidak masuk akal
- Dalam kasus Safari, teks placeholder bergerak dari tengah, tetapi kursor dianimasikan dari posisi kiri, sehingga kedua komponen memberi kesan tidak saling sinkron
- Dalam kasus Photos, saat beralih antara mode Crop dan Adjust, foto langsung berpindah ke posisinya sementara bingkai crop dianimasikan, sehingga menimbulkan kesan palsu bahwa ada sesuatu yang berubah secara halus selama perpindahan mode
- Dalam contoh UI pencarian, animasi yang seharusnya membantu memahami transisi justru membuat gerakan ikon kaca pembesar sulit diikuti
- Dalam kasus Youtube, bahkan pada tugas sederhana seperti memindahkan persegi panjang dari satu posisi ke posisi lain, muncul gerakan aneh, dan terlepas dari alasannya hasilnya tetap berupa frame yang tidak sempurna
- Termasuk animasi pembesaran di aplikasi Preview, poin utamanya adalah bahwa perhatian harus diberikan bukan hanya pada keadaan awal dan akhir, tetapi juga pada setiap momen di antaranya
2 komentar
Komentar Hacker News
Memang benar beberapa contoh yang dibawa penulis adalah animasi yang buruk, tetapi sulit setuju dengan premis tulisannya
Grafika komputer adalah bidang yang memanfaatkan karakteristik sistem visual manusia, dan hal yang bergerak dipersepsikan berbeda dari hal yang diam. Jika dipisahkan, frame yang tampak “salah” justru bisa terlihat paling baik dalam aliran waktu yang sebenarnya
Kalau dianalogikan ke film, tracking shot cepat bisa membuat frame individual tampak buruk karena motion blur, dan shot sudut lebar bisa membuat objek tampak “salah” karena distorsi, tetapi jika itu menghasilkan efek artistik yang diinginkan di bioskop maka itu pilihan yang benar
Jika blur yang tepat ditambahkan ke gerakan, hasilnya terasa lebih jelas, tetapi jika dilihat sebagai gambar diam tentu tidak akan tampak lebih tajam. Intinya, motion blur yang tepat memastikan bahwa sesuatu terlihat hanya setajam detail bergerak yang memang bisa dipersepsi manusia pada kecepatan tersebut. Karena itu, menilai frame motion blur yang dibekukan berdasarkan ketajaman atau kemudahan interpretasi adalah keliru
Sisa tulisan ini berfokus pada detail implementasi, tetapi melewatkan kesempatan untuk bertanya apakah sebagian animasi seperti ini memang perlu ada sejak awal. Gerakan bisa menjadi affordance yang baik bila dipakai terbatas, tetapi sekarang penggunaannya sering melampaui batas hingga mengganggu bidang pandang dan beban kognitif pengguna. Desainer dan PM melihatnya sebagai penanda “UX modern yang rapi”, padahal dalam banyak hal ia telah merosot menjadi ornamen trendi yang meniru desain bagus, bukan desain bagus itu sendiri
Beberapa animasi yang ditampilkan memang jelas masih bisa diperbaiki. AI terasa cukup cocok untuk mendorong hal-hal kecil yang menyenangkan seperti ini lebih jauh, karena dulu prioritasnya terlalu rendah untuk layak diberi waktu
Ada perbedaan antara frame tengah animasi yang sedikit terlihat “aneh” tetapi secara logis tetap benar, dan keadaan antara yang memang tidak masuk akal karena pembuatnya sama sekali tidak memikirkan apa yang terjadi selama animasi. Jika yang terjadi adalah yang kedua, lebih baik animasinya dihapus saja atau dibuat lebih sederhana
Sudut pandang tulisan ini yang melihat kualitas polesan UI sebagai metrik pengganti kualitas perangkat lunak itu bagus, dan penunjukan animasi yang buruk juga tepat. Hanya saja, konsistensi per frame bukan ukuran terbaik untuk menilai apakah sebuah animasi itu “bagus”
Beberapa perangkat masih memakai Sonoma, dan yang bisa saya katakan hanya bahwa kualitasnya terus mundur
Dialog simpan memang sedikit bergoyang, tetapi tidak sekacau contoh itu. Tombol di Notes berpindah antarpanel dengan sangat mulus. Jika bar Safari difokuskan lalu dilepas berulang kali, animasinya kadang rusak, tetapi kursor tetap sinkron tepat dengan teks dan hanya fade-in setelah teks selesai bergeser ke kiri. Bug Preview juga tampaknya masalah yang baru dan tidak muncul pada saya
https://streamable.com/kx7op6
Saya rindu masa ketika perusahaan seperti Apple, Sony, dan IBM benar-benar peduli pada detail yang sangat kecil. Khususnya Apple mendapatkan valuasinya sekarang lewat iPhone; dibanding Windows Mobile atau PDA Symbian saat itu, bukan berarti ia punya fitur yang luar biasa istimewa, malah dalam beberapa aspek fungsional tertinggal, tetapi setidaknya itu perangkat full-touch yang tidak membuat Anda ingin melemparkannya ke dinding setelah dipakai beberapa menit. Animasi seperti sekarang ini justru membangkitkan lagi nuansa Windows Mobile dan Symbian
Saya masih ingat betapa Steve menyukai animasi OS X. Di panggung ia sering memutarnya lagi berkali-kali, kadang dalam slow motion. Yang sekarang rasanya pantas diserahkan kepada orang-orang yang dulu membuat penanggung jawab antena iPhone 4 mengalami nasibnya
UI tanpa frame-frame tak sempurna seperti ini memang terasa akan lebih baik, tetapi sekarang saya ingin ada yang memperbaiki setiap klip dan menunjukkan seperti apa hasil nyatanya
Pada saat yang sama, saya juga mempertanyakan kenapa semuanya perlu bergerak. Setahu saya, gerakan seharusnya dipakai ketika UI berubah secara halus di area yang berbeda dari tempat pengguna memulai aksinya, seperti toast
Banyak transisi yang ditampilkan di sini tampak tidak perlu, dan rasanya tetap akan baik-baik saja jika langsung berubah dengan penataan ulang seketika
Kursor muncul di kiri karena memang di situlah pengguna mulai mengetik. Orang yang paham UI kemungkinan akan melihat ke sana. Menampilkan kursor di tengah layar lalu menggesernya itu tidak perlu dan mengganggu
Teks placeholder yang meluncur ke kiri dimaksudkan untuk menarik perhatian pengguna yang belum terbiasa
$BRANDlebih unggul daripada alternatifnyaSebagian besar contoh ini kemungkinan akan terasa lebih baik tanpa animasi. Kalau tombol sudah ditekan, ya tampilkan hasilnya. Jangan diajak menari dulu baru ditampilkan; langsung tampilkan saja
Tanpa gerakan, otak sering harus memindai ulang seluruh halaman setiap kali terjadi penyegaran
Saya merasa argumen dalam tulisan ini disajikan dengan lemah. Tidak ada alternatif yang lebih baik, dan juga tidak benar-benar dijelaskan mengapa hal-hal yang diajukan itu buruk bagi pengguna. Mungkin memang bisa berdampak negatif, tetapi ini mirip dengan cara kritik yang hampa, yaitu menunjuk smear frame media atau titik transisi lalu mengkritiknya
Standar “setiap frame harus masuk akal” juga terasa terlalu berat. Saya menganggapnya mustahil, dan ingin bertanya bagaimana caranya menjaga semua frame tetap sempurna bahkan saat ukuran jendela sedang diubah
Penulis sendiri tampaknya lebih mudah menunjuk frame yang cacat daripada mempraktikkan standar yang ia katakan. Jika menekan tautan header blognya, animasi diputar setelah klik selesai. Jika melihat proyek UI miliknya, ada juga bagian di mana teks dan objek tidak tetap berada di dalam kontainer. Jika mengatakan prinsip seperti ini harus diikuti, seharusnya bisa menunjukkannya sendiri
Kalau ditulis dengan lebih baik, seharusnya fokus pada mengapa hal-hal yang diajukan itu buruk bagi pengguna akhir dan bagaimana menanganinya sebagai gantinya. Kritik yang baik bukan hanya mencakup “apa”, tetapi juga mengapa dan bagaimana
Tulisan itu menyajikan ide, bukan solusi. Karena gagal melihat itu, kritik ini malah membangun sejumlah argumen orang-orangan sawah lalu menyerangnya
Yang lebih penting, tulisan itu tidak ditulis dengan nada menghakimi. Ia ditulis dengan hati-hati, seperti “I think”, “Next thought:”, “Probably”, “So yeah.”. Ini adalah seseorang yang membagikan pemikirannya sendiri, dan pemikiran itu cukup matang hingga bisa membuat banyak orang yang masuk akal berpikir ke arah serupa
Hanya karena penulis tidak menawarkan solusi bukan berarti ia wajib melakukannya. Standar seperti itu aneh dan tidak masuk akal
Menyerang situs penulis juga tidak terlihat bagus. Kesenjangan antara selera dan eksekusi sudah dikenal luas, dan menghukum kontribusi konseptual karena mendahului teknik nyata terasa cukup tidak menyenangkan
Kritik yang lebih baik akan lebih murah hati, sesuai dengan semangat komunitas ini
Saya melihat beberapa tanggapan yang berharap penulis menyertakan contoh solusi. Baru-baru ini ia menulis artikel yang sangat mirip dengan ini, dan seperti di sini, ia membahas masalah animasi secara rinci lalu juga menjelaskan bagaimana ia memperbaikinya
Kalau penasaran, bisa dilihat di sini: https://www.thisischris.dev/projects/project-6/
Menurut saya, frame yang tidak sempurna sekarang lebih baik daripada frame sempurna nanti. Dalam semua UI, latensi harus menjadi prioritas utama. Jika latensinya cukup rendah, itu terasa seperti bagian dari tubuh sendiri dan mengurangi beban kognitif. Animasi sangat buruk untuk hal ini, karena menambahkan latensi ratusan milidetik
Saya berharap ada contoh positif selain contoh negatif. Kesimpulan yang saya dapat sekarang hanya bahwa animasi harus dihindari, padahal sepertinya bukan itu yang sebenarnya ingin disampaikan penulis
Animasi yang bagus cukup sering memakai sedikit tipu daya saat bergerak, alih-alih terlihat sempurna di setiap frame. Seperti smear frame dalam kartun: jika dihentikan di saat yang salah akan terlihat aneh, tetapi di dalam keseluruhan animasi justru membuat gerakannya tampak meyakinkan secara visual
Saya bukan pengembang, tetapi saya bisa merasakan ada area-area di mana ikon atau jendela tidak lagi ditata atau bergerak seperti dulu, atau seperti yang semestinya
Kesan tambal sulam seperti ini tidak berubah seiring waktu. Ada begitu banyak contoh di seluruh OS dan aplikasi sehingga saya ingin bilang “memang dari dulu begitu”, padahal sebenarnya tidak. Apple menetapkan standar, standarnya tinggi, dan kualitasnya luar biasa
Rasanya untuk mencapai tata letak UI atau animasi yang sama di SwiftUI, dibutuhkan banyak peretasan
Hal terakhir yang sering saya pikirkan adalah bahwa karya analog memang sangat sulit, dulu maupun sekarang. Di dunia digital, kita terbiasa berpikir bisa dibereskan nanti, tetapi kenyataannya sering tidak, dan yang menyedihkan kita malah sering menumpuk hal buruk di atas hal yang sudah buruk
[1]: https://youtu.be/vIdeGmN__Pw?t=550
Aplikasi tanpa animasi sama sekali akan terasa mengerikan. Jika punya Android, Anda bisa mencobanya sendiri dengan mengubah kecepatan animasi menjadi 0x di pengaturan pengembang. Perubahan yang instan terasa mengganggu, dan otak justru butuh sekitar 1 detik untuk memproses apa yang terjadi, yang dalam prosesnya bisa terasa lebih lambat daripada saat ada animasi
Pengaturan saya di 0.5x dan rasanya sudah cukup. Masih cepat, tapi Anda tetap bisa melihat aplikasi terbuka dan tertutup
Masalah dengan 0x adalah kelihatannya itu hanya berlaku untuk sekitar 90% UI. Beberapa hal masih tetap beranimasi, dan hasilnya ritmenya terasa sangat aneh
Di 0.5x, hal-hal yang anehnya tidak terpengaruh oleh pengaturan kecepatan animasi jadi tidak terlalu mengganggu
Kalau berfungsi dengan benar, saya akan memakai 0x
Jika perlu, saya lebih memilih menghabiskan 1 detik untuk pemrosesan, dan saya bahkan tidak merasa itu benar-benar perlu. Jauh lebih baik daripada setiap kali aplikasi berpindah halaman terasa 1 detik lebih lambat karena animasi, dan saat menavigasi semuanya terasa seperti bergerak dalam tetes tebu
Saya setuju dengan tulisan ini, tapi rasanya akan lebih baik kalau ada contoh yang positif juga. Nadanya tidak terbaca seperti keluhan, tetapi sebagai orang yang tidak terlalu paham soal membangun UI yang bagus, saya tidak merasa jadi lebih dekat untuk tahu apa yang harus dijadikan bintang penuntun
Kalau tertarik, bisa lihat di sini: https://www.thisischris.dev/projects/project-6/
Komentar Lobste.rs
Menurut saya premis dasar tulisan ini keliru. Aplikasi seperti ini tidak digunakan per frame
Bahkan di kelas dasar animasi pun diajarkan bahwa cara kita mengenali gerakan berbeda dari gambar diam. Jika mencari demo "squash and stretch", kita bisa melihat bahwa pada tiap frame, dimensi suatu objek secara terpisah bisa tampak tidak masuk akal, tetapi tetap bekerja dengan indah saat dilihat dalam gerakan
Bahkan, seperti pada contoh pemotongan, itu bisa menampilkan status program secara keliru. Pengguna pada dasarnya harus mematikan otak sekitar sepertiga detik sambil menunggu UI dirakit kembali, baru setelah itu bisa lanjut memakai program
Saya rasa ini sama sekali bukan makna frame perfectness yang dimaksud proyek Wayland
Ini lebih dekat ke detail teknis tingkat rendah seperti pengubahan ukuran jendela. Misalnya, konten di-resize secara asinkron, sinkronisasi vertikal rusak sehingga muncul screen tearing atau artefak diagonal aneh, atau pelaporan area rusak dilakukan sebagai subarea persegi panjang
Tentu saja akan bagus jika detail tingkat rendah dan animasi tingkat tinggi sama-sama sempurna di level frame
Misalkan kita ingin menguji animasi seperti ini, dan menulis pengujian untuk memastikan sifat semacam ini tidak rusak seiring waktu
Apa teknik mutakhir saat ini untuk menguji sifat seperti ini pada aplikasi web dan aplikasi native? Apakah ada kategori pengujian tertentu yang pada praktiknya mustahil atau sangat sulit ditulis karena kita tidak bisa mengendalikan event loop?
Atau, dengan alat seperti Paparazzi, seluruh transisi bisa direkam sebagai Animated PNG untuk pengujian regresi otomatis
Dengan begitu, kedua titik itu bisa diverifikasi secara terpisah, lalu pada akhirnya cukup memeriksa status akhir. Animasi seharusnya tidak terikat pada input waktu, melainkan bisa dijalankan langkah demi langkah dari luar
Menurut saya contoh YouTube hampir tepat sebagai kasus View Transitions
Pendekatannya adalah mendeklarasikan, “kalau elemen ini berubah, ubah bentuknya secara otomatis”, dan hasilnya memang secara teknis mengesankan, tetapi menghasilkan transisi yang agak lembek, dengan elemen-elemen melayang-layang dan berubah bentuk satu sama lain
Teknologinya sangat keren, tetapi saya hampir tidak pernah melihatnya tampak benar-benar bagus selain untuk efek penekanan kecil saat navigasi. Agar tidak terlalu mengganggu, ini harus dipakai dengan sangat hemat