Akış içerikli arayüzler (streaming UI), yüzeyde basit görünse de pratikte oldukça karmaşıktır. Layout kaymaları, hareket tercihleri, doğru işaretleme ve çeşitli durumlar gibi birçok faktörün hesaba katılması gerekir. Akış kesildiğinde ne olur? Kullanıcılar klavyeyle arayüzde gezinirken içerik kayarsa ne olur? Hangi ARIA özellikleri gerekir? Bu makalede, bu tür sorunları ele alacağız. Günümüzde birçok arayüz, yanıt henüz oluşturulurken içerik sunmaya başlıyor. Arayüz bir durumda başlayıp daha fazla veri geldikçe güncelleniyor. Bunu sohbet uygulamalarında, log görüntüleyicilerde, 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 ve yeni bloklar eklendikçe arayüz büyür. Ekranın hemen altındaki bir öğe aniden kayabilir ve kullanıcının kaydırma konumu zorlaşır. Kullanıcı etkileşim halindeyken arayüzün bazı bölümleri eksik kalabilir. Bu makalede, basit bir arayüz alıp bu sorunları doğru şekilde ele alacağız. İçeriği sabit tutmayı, kaydırmayı yönetmeyi ve okuma deneyimini bozmadan kısmi içerik sunmayı inceleyeceğiz.
Akış içerikli bir arayüz gerçekte nasıl görünür? Üç farklı demo oluşturdum: bir sohbet balonu, bir log akışı ve bir transkripsiyon görünümü. Yüzeyde farklı görünseler de aynı üç sorunla karşılaşıyorlar. Birincisi kaydırma. İçerik akarken çoğu arayüz görünümü en alta sabitler. Bu yalnızca izlerken işe yarar; ancak yukarı kaydırıp bir şey okumak istediğinizde sayfa tekrar aşağı atlar. Bunu siz istemediniz; arayüz sizin için karar verdi ve şimdi onunla savaşıyorsunuz. İkincisi layout shift. Akış 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ğil. Okuduğunuz bir satır kaymış. Sayfa bozuk değil; sadece hiçbir şey rahatça etkileşim kuracak kadar sabit kalmıyor. Üçüncüsü render frekansı. 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üncellendiği anlamına gelir. Her güncellemenin bir maliyeti vardır ve bu maliyet sessizce birikir, ta ki performans düşmeye başlayana kadar. Her demoyu incelerken, işlerin ters gitmeye başladığı anı fark edin. Arayüzün yolunuza çıktığı o küçük sürtünme anı. İşte tam olarak düzeltmek için buradayız.
Örnek 1: Yapay Zeka Sohbet Yanıtları Akışı. Bu en bilinen durum. Stream butonuna tıklıyorsunuz ve mesaj token token büyümeye başlıyor, tıpkı tipik bir AI sohbet arayüzü gibi. Şunu deneyin: Stream butonuna tıklayın, mesaj akarken yukarı kaydırmaya çalışın, hızı artırın (10ms gibi). İnce ama önemli bir şey fark edeceksiniz: arayüz sizi tekrar aşağı çekmeye çalışıyor. Yani dikkatinizin nerede olması gerektiğine sizin için karar veriyor.
Örnek 2: Log Görüntüleyicide Canlı İşleme. Bu örnek yüzeyde farklı görünse de sorun aslında ilk örneğe çok benziyor. Zamanla uzayan bir mesaj yerine, bir terminal veya log akışı gibi sürekli yeni satırlar ekleniyor. Buradaki ilginç kısım tail toggle. Etkileşim ile sabit arayüzler arasındaki dengeyi netleştiriyor. Şunu deneyin: Start butonuna tıklayın, logların kabı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 kaldığınız yerde kalamadığınızı fark edeceksiniz. Bunun yerine, içeriği keşfetmek için akışı durdurmanız veya tail'i etkinleştirmeniz gerekiyor.
Detaylar ve Etkileri
Örnek 3: Gerçek Zamanlı Metrikler Gösteren Gösterge Paneli. Bu durumda arayüz yerinde güncelleniyor: sayılar değişiyor, grafikler kayıyor, değerler sürekli yenileniyor. Bu sefer kaydırma gerilimi yok, ancak farklı bir sorun ortaya çıkıyor. Buna daha sonra değineceğiz.
Sonuç ve Değerlendirme
Arayüz Neden Dengesiz Hissettiriyor ve Nasıl Düzeltilir? Sohbet demosunu denediyseniz ve yanıtlar gelirken yukarı kaydırdıysanız, ilk sorunu hemen fark etmişsinizdir: arayüz sizi güncellenen en son içeriğe geri çekiyor. Bu sizi bağlamdan koparıyor ve geçen içeriği sindirmenize asla izin vermiyor. Aynı sorunu ikinci örnekte, log görüntüleyicide de görüyoruz. Tail toggle olmadan, akış içerik kaydırma konumunuzu geçersiz kılıyor. Bunlar geleneksel anlamda kod hatası değil; tüm kullanıcıları etkileyen erişilebilirlik sorunlarıdır. Ancak planlama ve test sürecinde dikkatli UX değerlendirmeleriyle düzeltilebilir ve önlenebilirler.
Öngörülebilir Kaydırma Davranışı Sağlayın. Hedef şu: Kullanıcı akışın en altındayken otomatik kaydırmayı etkinleştir. Kullanıcı yukarı kaydırdığında otomatik kaydırmayı durdur. Kullanıcı tekrar en alta kaydırırsa otomatik kaydırmayı sürdür. Bunu yapmak için kullanıcının akışın en altında olup olmadığını bilmemiz gerekir. Bunu, scroll olayını dinleyerek ve scrollTop + clientHeight >= scrollHeight - eşik değeri gibi bir kontrolle yapabiliriz. Eşik değeri, kullanıcının en yakın olduğunu hissetmesi için birkaç piksel tolerans sağlar. Ayrıca, otomatik kaydırma sırasında scroll olayını tetiklememeye dikkat etmeliyiz; aksi halde sonsuz döngü oluşur. Bunu bir bayrak (isAutoScrolling) ile yönetebiliriz.
Kaynak: smashingmagazine.com
