Aşırı Mühendislik Yapılmış Anchor Link'ler

• Anchor link'ler basitçe butona tıkla → başlığa kaydır yapısına sahip olsa da, gerçek uygulamada sorunlar ortaya çıkar
• Alt kısımda yer alan başlıklar, viewport'un üstüne tam olarak kaydırılamaz; bu da UX'in kötüleşmesine yol açar
• Bunu çözmek için çeşitli yaklaşımlar denenir ve zamanla giderek daha rafine ve karmaşık yöntemlere evrilir

Basit çözüm: padding eklemek

• Alt başlıkların kaydırmayla yakalanabilmesi için boşluk ekleme yöntemi
• Delta hesaplanıp padding eklenirse sorun çözülebilir
• Ancak tasarım ekibi gereksiz boşluğu sevmeyebilir

Pratik çözüm: tetik çizgisini taşımak

• Tetik çizgisi viewport'un alt kısmına taşınarak alt başlıkların ona ulaşması sağlanır
• Sorun şu ki başlık viewport'un en altına yerleşir ve okunabilirlik düşer

İyileştirilmiş yaklaşım: sanal tetik noktası oluşturmak

• Gerçek başlık konumunu koruyup, yalnızca tetiklenme noktasını yukarı taşınmış sanal bir konuma alır
• Her başlığa farklı ayar uygulanabilmesini sağlayan esneklik sunar
• Ancak ilk başlık fazla yukarı taşınır ve yeni bir sorun doğar → ayrı ayrı ayarlama gerekir

Daha iyi yöntem: tetik konumunu orantılı taşımak

• Tüm tetikleri aynı miktarda taşımak yerine, ilk başlık olduğu gibi kalır, son başlık ise en fazla taşınır
• Ortadaki başlıklar konumlarına göre orantılı olarak taşınır
• Başlık sırasını koruma ve kaydırmayla ulaşılabilirliği garanti etme koşullarını sağlar
• Bu yöntem basit ve pratiktir; çoğu durumda uygun şekilde çalışır

Gelişmiş yaklaşım: özel bir mapping fonksiyonuyla optimizasyon

• Tetik konumu rastgele %25 noktasına yerleştirildiği için, sanal konum özgün konumdan fazla sapabilir
• Bunu çözmek için MSE(Mean Squared Error) kullanan bir optimizasyon yaklaşımı devreye alınır

Kayıp fonksiyonunun yapısı

• Anchor Penalty: sanal başlık konumunun özgün konumdan ne kadar saptığı
• Section Penalty: bölümler arası mesafenin (kaydırma uzunluğunun) ne kadar değiştiği
• Bu iki değer ağırlıklarla ayarlanarak en iyi tetik konumu bulunur

Kısıtlar

• Sayfa sınırları içinde kalmalı
• İlk başlık yukarı taşınmamalı
• Başlık sırası korunmalı

İçgörü: basit orantılı taşımanın sınırları

• Çok uzun sayfalarda (örn. İncil'in tamamı) sayfanın geneline yayılmış küçük kaydırmaların birikmesi gibi verimsizlikler ortaya çıkar
• Sayfa uzadıkça hata büyüyebilir ve UX'i olumsuz etkileyebilir

Nihai çözüm: smoothstep tabanlı değişken mapping fonksiyonu

• Her başlığın konumu 0~1 aralığında normalize edilir ve buna göre ayarlama oranı hesaplanır
• Smoothstep fonksiyonu (S(x) = 3x² - 2x³) ile yumuşak bir geçiş sağlanır
• Ayarlamanın başlayacağı a konumu belirlenir; bu noktaya kadar taşıma yapılmaz, sonrasında ise yumuşak biçimde artar
  • Örn: a = 0.4 ise üstteki %40'lık başlıklarda taşıma olmaz, alttaki %60 için kademeli ayar uygulanır
• Sonuç olarak üstteki başlıklar özgün konumunu korur, alttakiler ise en yüksek ayarı alır → daha doğal bir UX sağlar

Doğrulama ve kapanış

• Nihai uygulama, tasarımsal incelik ile pratiklik arasında denge kuran bir çözümdür
• Elbette tasarımcı geri bildirimi “...yeter ki düzgün çalışsın” da olabilir
• Ama en azından bu blog yazısı, unutulmayacak kadar incelikli bir mühendislik kaydı olarak kalır

[GN⁺]

Hacker News görüşleri

• Bir backend geliştiricisi olarak frontend işlerine bakarken bazen karmaşıklık karşısında şaşırıyorum

  • Harika bir yazı ve iyi yapılmış bir çalışma, ancak basit bir kaydırma için bu kadar çok karmaşıklık eklemek gerekip gerekmediğini sorguluyorum

• Yan gezinmedeki "aktif anchor" göstergesinin UX amacı sorgulanıyor

  • Okuyucu uzun bir bölümün ortasındayken, ekranda görünmeyen başlığın yerine mevcut bölümü hatırlatabilir
  • Bu, kaydırılıp geçilen başlığa göre değil, ekranda görünen bölüme göre çalıştığı anlamına geliyor
  • Küçük bölümler ekranın büyük kısmını kaplamıyorsa, aktif gösterge faydalı olmayabilir

• Anchor linklerin en önemli UX işlevi, başkalarına gönderilebilmesi ve yer imi olarak kaydedilebilmesi olmalı

  • Belirli bir bölümü yer imlerine ekleyebilmek, sayfanın en üstünden başlayıp kaydırmaktan veya anchor linke tıklamaktan çok daha kullanışlıdır
  • Bu web sitesi #anchor-name URL'sini kullanmadığı için bu işlevi sunmuyor

• Jira'nın anchor/kalıcı linklerine sinir olup tıkladım, ama bu benzer olsa da farklı bir yaklaşım

  • Klavyeyle anchor'a gidilemiyor
  • Yazara soru: Neden HTML `` öğesi yerine etkileşimsiz bir öğede JS event listener kullandınız?

• Ana sayfa içeriğinin altına padding eklemek ideal olur

  • İçeriğin son kısmının viewport altına yapışıp kalması sorununu çözer
  • Mobilde 90vh, daha büyük ekranlarda 50vh margin uygun görünüyor
  • Masaüstünde 90vh margin tuhaf görünebilir

• Modern tarayıcılarda text fragment kullanarak sayfanın belirli bir kısmını vurgulamak mümkün

  • Chrome'da metni vurgulayıp sağ tıklayarak "Bağlantıyı kopyala" seçeneğini seçmek yeterli
  • Bunu her gün anchor yerine belirli bir metin kısmını vurgulamak için kullanıyorum

• Birden fazla "aktif" duruma izin vermek de mümkün

  • İçerik uzunsa iki bölümün başlığı da "aktif" olabilir
  • Kısa içerikteyse çok fazla kısım vurgulanabilir

• Diğer yorumları okumak eğlenceliydi

  • Mobilde site tasarımı ilgi çekici ve çözüm net biçimde aktarılıyor
  • Popup olmadan teknik içerik ele alan bir blog okumak ferahlatıcı

• Firefox masaüstünde "güzel çözüm", "orta bölüm"ü vurguluyor

  • Sayfanın altına ulaşmamış olsanız bile sonuç bölümü tamamen görünüyor
  • Ekranda görünen tüm anchor'ları vurgulamak çözüm olabilir

• Yazı temiz ve blog tasarımı daha da ilgi çekici

  • Sağa hizalı yaklaşımı sevmiyorum ama soldaki popup'ın satır içi aktivasyonu gerçekten çok hoş