Anchor Link yang Dirancang Terlalu Berlebihan

• Anchor link pada dasarnya hanyalah struktur klik tombol → gulir ke judul, tetapi saat diimplementasikan, masalah nyata muncul
• Judul yang berada di bagian bawah tidak tergulir tepat ke bagian atas viewport, sehingga menurunkan UX
• Untuk mengatasinya, berbagai pendekatan dicoba, lalu berkembang menjadi cara yang makin presisi dan kompleks

Solusi sederhana: menambahkan padding

• Metode menambahkan ruang kosong agar judul di bagian bawah tetap tertangkap saat digulir
• Masalah ini bisa diatasi dengan menghitung delta lalu menambahkan padding
• Namun, tim desain mungkin tidak menyukai ruang kosong yang tidak perlu

Solusi praktis: memindahkan garis pemicu

• Garis pemicu dipindahkan ke arah bawah viewport agar judul di bagian bawah bisa mencapainya
• Masalahnya, judul jadi berada di bagian paling bawah viewport sehingga keterbacaan menurun

Usulan perbaikan: membuat titik pemicu virtual

• Posisi judul yang sebenarnya tetap dibiarkan, sementara hanya posisi terjadinya pemicu yang dibuat sebagai posisi virtual yang digeser ke atas
• Memberikan fleksibilitas untuk menerapkan penyesuaian yang berbeda pada tiap judul
• Namun, judul pertama terdorong terlalu ke atas dan menimbulkan masalah baru → perlu penyesuaian individual

Cara yang lebih baik: memindahkan posisi pemicu secara proporsional

• Semua pemicu tidak dipindahkan sama rata; judul pertama tetap, judul terakhir dipindahkan semaksimal mungkin
• Judul-judul di tengah bergeser secara proporsional sesuai posisinya
• Memenuhi syarat urutan judul tetap terjaga dan kemungkinan untuk dicapai lewat gulir tetap terjamin
• Pendekatan ini sederhana dan praktis, serta bekerja dengan baik dalam kebanyakan kasus

Pendekatan lanjutan: optimasi dengan fungsi pemetaan kustom

• Karena posisi pemicu diletakkan secara arbitrer di 25%, posisi virtual bisa menyimpang terlalu jauh dari posisi aslinya
• Untuk mengatasinya, diperkenalkan pendekatan optimasi dengan MSE(Mean Squared Error)

Susunan fungsi loss

• Anchor Penalty: seberapa jauh posisi judul virtual menyimpang dari posisi aslinya
• Section Penalty: seberapa besar perubahan jarak antarbagian (panjang gulir)
• Kedua nilai ini diatur dengan bobot untuk mendapatkan posisi pemicu yang optimal

Batasan

• Tetap berada dalam rentang halaman
• Judul pertama tidak digeser ke atas
• Urutan judul dipertahankan

Insight: keterbatasan perpindahan proporsional sederhana

• Pada halaman yang sangat panjang (mis. seluruh Alkitab), muncul inefisiensi karena perpindahan kecil harus diterapkan secara akumulatif di seluruh halaman
• Semakin panjang halaman, semakin besar potensi galatnya, dan ini bisa berdampak buruk pada UX

Solusi akhir: fungsi pemetaan variabel berbasis smoothstep

• Posisi tiap judul dinormalisasi menjadi nilai antara 0~1, lalu digunakan untuk menghitung rasio penyesuaian
• Fungsi Smoothstep (S(x) = 3x² - 2x³) digunakan untuk menghasilkan transisi yang halus
• Posisi awal penyesuaian a ditentukan agar hingga titik tertentu tidak ada perpindahan, lalu setelah itu meningkat secara halus
  • Contoh: jika a = 0.4, maka 40% judul teratas tidak dipindahkan, sedangkan 60% terbawah disesuaikan secara bertahap
• Hasilnya, judul di atas mempertahankan posisi aslinya, sementara judul di bawah menerima penyesuaian maksimum → menghasilkan UX yang alami

Verifikasi dan penutup

• Implementasi akhirnya adalah solusi yang menyeimbangkan ketelitian desain dan kepraktisan
• Tentu saja, umpan balik desainer bisa saja berupa “...pokoknya semoga berfungsi dengan baik”
• Namun setidaknya, tulisan blog ini akan tetap dikenang sebagai catatan rekayasa yang sangat teliti

[GN⁺]

Pendapat Hacker News

• Sebagai pengembang backend, kadang saya terkejut dengan tingkat kompleksitas saat melihat pekerjaan frontend

  • Artikelnya bagus dan pengerjaannya juga rapi, tetapi saya mempertanyakan apakah perlu memperkenalkan kerumitan sebanyak ini hanya untuk scrolling sederhana

• Pertanyaan tentang tujuan UX dari penanda "anchor aktif" di navigasi samping

  • Saat pembaca berada di tengah bagian yang panjang, ini bisa mengingatkan mereka pada bagian saat ini sebagai pengganti heading yang tidak terlihat di layar
  • Ini berarti perilakunya didasarkan pada bagian yang terlihat di layar, bukan heading yang sudah di-scroll
  • Jika bagian yang kecil tidak menempati sebagian besar layar, penanda aktif mungkin tidak terlalu berguna

• Fungsi UX terpenting dari anchor link adalah harus bisa dikirim ke orang lain dan disimpan sebagai bookmark

  • Kemampuan untuk mem-bookmark bagian tertentu jauh lebih praktis daripada memulai dari atas halaman lalu scroll atau mengklik anchor link
  • Situs web ini tidak menyediakan fungsi itu karena tidak menggunakan URL #anchor-name

• Saya mengklik karena kesal dengan anchor/permalink di Jira, tetapi ternyata pendekatannya mirip namun berbeda

  • Tidak bisa berpindah ke anchor dengan keyboard
  • Pertanyaan untuk penulis: mengapa menggunakan event listener JS pada elemen non-interaktif alih-alih elemen HTML

• Idealnya, tambahkan padding di bawah konten halaman utama

  • Ini menyelesaikan masalah ketika bagian akhir konten menempel di bagian bawah viewport
  • Di mobile, margin 90vh terasa pas, dan di layar yang lebih besar, 50vh cocok
  • Di desktop, margin 90vh bisa terlihat canggung

• Di browser modern, kita bisa menggunakan text fragments untuk menyorot bagian tertentu dari halaman

  • Di Chrome, cukup sorot teks lalu klik kanan dan pilih "salin tautan"
  • Saya menggunakannya setiap hari untuk menyorot bagian teks tertentu alih-alih anchor

• Memungkinkan beberapa status "aktif" juga bisa dilakukan

  • Jika kontennya panjang, header dari dua bagian bisa sama-sama berada dalam status "aktif"
  • Pada konten pendek, terlalu banyak bagian bisa ikut tersorot

• Menarik membaca komentar-komentar lainnya

  • Di mobile, desain situsnya menarik dan solusi masalahnya tersampaikan dengan jelas
  • Menyegarkan bisa membaca blog yang membahas hal teknis tanpa popup

• Di Firefox desktop, "solusi indah" itu menyorot "bagian tengah"

  • Kesimpulannya terlihat sepenuhnya bahkan saat belum mencapai bagian bawah halaman
  • Jawabannya adalah menyorot semua anchor yang terlihat di layar

• Artikelnya rapi dan desain blognya bahkan lebih menarik

  • Saya tidak suka tata letak rata kanan, tetapi aktivasi inline di popup kiri sangat keren