Akış halindeki içerikler için arayüz tasarlamak, ilk bakışta basit görünse de uygulamada oldukça karmaşıktır. Layout kaymaları, hareket tercihleri, doğru işaretleme ve çeşitli durumlar gibi göz önünde bulundurulması gereken birçok faktör vardır. Peki, akış kesintiye uğrarsa ne olur? Kullanıcılar klavyeyle arayüzde gezinirken kaymalar yaşar mı? Hangi ARIA özellikleri gerekli? Bu makalede işte bu tür soruları ele alacağız. Günümüzde birçok arayüz, yanıt henüz oluşturulurken render edilmeye başlıyor. Arayüz bir durumda başlayıp daha fazla veri geldikçe güncelleniyor. Bunu sohbet uygulamalarında, log kayıtlarında, transkripsiyon araçlarında ve diğer gerçek zamanlı sistemlerde görüyoruz. İşin zor kısmı, arayüzün sabit bir durumda olmaması; yeni içerik geldikçe sürekli değişmesi. Satırlar uzadıkça büyüyor, yeni bloklar beliriyor. Ekranın hemen altındaki bir öğe aniden hareket edebiliyor ve kullanıcının kaydırma pozisyonu yönetilmesi zor hale geliyor. Hatta kullanıcı etkileşim halindeyken arayüzün bazı kısımları eksik kalabiliyor.
Akış halindeki bir arayüzün nasıl göründüğüne dair üç farklı demo hazırladım: bir sohbet balonu, bir log akışı ve bir transkripsiyon görünümü. Yüzeyde farklı görünseler de hepsi aynı üç sorunla karşılaşıyor. Birincisi kaydırma. İçerik akarken çoğu arayüz görünümü en alta sabitler. Bu sadece izlerken işe yarar; ancak yukarı kaydırıp bir şey okumak istediğinizde sayfa aşağı fırlar. Siz bunu istememişsinizdir, arayüz sizin yerinize karar vermiştir. İkincisi layout kayması. Akış halindeki içerik, kapların sürekli büyümesi anlamına gelir ve büyüdükçe altındaki her şey aşağı kayar. Tıklamak üzere olduğunuz bir düğme artık yerinde değildir. Okuduğunuz bir satır kaymıştır. Sayfa bozuk değildir; sadece hiçbir şey rahatça etkileşim kuracak kadar sabit kalmaz. Üçüncüsü ise render sıklığı. Tarayıcılar ekranı saniyede yaklaşık 60 kez yeniler, ancak akışlar bundan çok daha hızlı gelebilir. Bu, DOM'un kullanıcının asla görmeyeceği kareler için güncellenmesi anlamına gelir. Her güncellemenin bir maliyeti vardır ve bu maliyet, performans düşmeye başlayana kadar sessizce birikir.
İlk örneğimiz, yapay zeka sohbet yanıtlarının akışı. En bilinen durum: Stream butonuna tıklıyorsunuz ve mesaj token token büyümeye başlıyor. Denemenizi istediğim şey: Stream butonuna tıklayın, mesaj akarken yukarı kaydırmayı deneyin, hızı artırın (10ms gibi). İnce ama önemli bir şey fark edeceksiniz: arayüz sizi sürekli aşağı çekmeye çalışıyor. Yani dikkatinizin nerede olması gerektiğine dair sizin yerinize karar veriyor. İkinci örnek, bir log görüntüleyicide canlı işleme. Yüzeyde farklı görünse de sorun aslında ilk örneğe çok benziyor. Zamanla uzayan bir mesaj yerine, sürekli olarak yeni satırlar ekleniyor. Buradaki ilginç kısım, takip (tail) geçişi. Etkileşim ile kararlı arayüzler arasındaki dengeyi net bir şekilde ortaya koyuyor: Başlat butonuna tıklayın, logların konteynırın yüksekliğini aşmasına izin verin, başa kaydırın. Akışı durdurun ve 'tail' seçeneğini devre dışı bırakın. Tail etkinken arayüzün yeni içeriği takip ettiğini, ancak yukarı kaydırıp orada kalamadığınızı fark edeceksiniz. İçeriği keşfetmek için akışı durdurmanız veya tail'i etkinleştirmeniz gerekiyor. Üçüncü örnek ise gerçek zamanlı metrikleri gösteren bir gösterge paneli. Sayılar değişiyor, grafikler kayıyor, değerler sürekli yenileniyor. Bu kez kaydırma gerilimi yok, ancak farklı bir sorun ortaya çıkıyor.
Sohbet demosunu denediyseniz ve yanıtlar gelirken yukarı kaydırdıysanız, ilk sorunu hemen fark etmişsinizdir: arayüz sizi sürekli en son akış içeriğine geri çekiyor. Bu sizi bağlamdan koparıyor ve geçen içeriği sindirmenize asla izin vermiyor. Aynı sorunu ikinci örnek olan log görüntüleyicide de görüyoruz. Tail geçişi olmadan, akış içeriği kaydırma pozisyonunuzu geçersiz kılıyor. Bunlar geleneksel anlamda kod hataları değil; daha çok tüm kullanıcıları etkileyen erişilebilirlik sorunları. Ancak dikkatli UX düşüncesi ve testlerle önlenebilirler. Hedef şu: Kullanıcının akışın sonunda olduğunu tespit ettiğimizde otomatik kaydırmayı etkinleştir, kullanıcı yukarı kaydırdığında otomatik kaydırmayı durdur, kullanıcı akışın sonuna geri döndüğünde otomatik kaydırmayı devam ettir. Bunu yapmak için kullanıcının en altta olup olmadığını bilmemiz gerekiyor.
Layout kaymasını önlemek için ise içerik alanlarına sabit boyutlar vermek ve içerik yüklendikçe bu boyutları korumak önemlidir. Ayrıca, akış hızına göre render sıklığını ayarlamak, gereksiz DOM güncellemelerini azaltarak performansı artırır. Örneğin, requestAnimationFrame kullanarak güncellemeleri tarayıcının yenileme döngüsüyle senkronize edebiliriz. Bu sayede kullanıcının görmeyeceği kareler için işlem yapılmaz. Son olarak, ARIA özellikleriyle erişilebilirliği artırmak gerekir. Örneğin, canlı bölgeler (aria-live) kullanarak ekran okuyuculara içeriğin güncellendiğini bildirebiliriz.
Detaylar ve Etkileri
Özetle, akış içerikleri için kararlı arayüzler tasarlamak, scroll davranışını doğru yönetmek, layout kaymasını önlemek ve render frekansını optimize etmekle mümkündür. Kullanıcının kontrolünü elinden almadan, içeriği takip etmesine izin veren bir denge kurmak esastır. Bu makalede ele aldığımız teknikler, bu tür arayüzlerin daha kullanıcı dostu ve erişilebilir olmasını sağlayacaktır.
Kaynak: smashingmagazine.com
