Akış içerikli arayüzler, yüzeyde basit görünse de pratikte oldukça karmaşıktır. Düzen kaymaları, hareket tercihleri, doğru işaretleme ve çeşitli durumlar gibi dikkat edilmesi gereken birçok husus vardır. Akış kesildiğinde ne olur? Kullanıcılar klavyeyle arayüzde gezinebilir mi? Hangi ARIA nitelikleri gerekli? Bu makalede, bu tür sorunları ele alacağız.
Günümüzde birçok arayüz, yanıt daha oluşturulurken işlemeye başlıyor. Arayüz bir durumda başlıyor, ardından daha fazla veri geldikçe güncelleniyor. Bunu sohbet uygulamalarında, günlüklerde, transkripsiyon araçlarında ve diğer gerçek zamanlı sistemlerde görüyoruz. Zor kısım, 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 konumu zorlaşıyor.
Bu makalede, basit bir arayüz alıp bunu doğru şekilde ele alacağız. İşleri nasıl sabit tutacağımıza, kaydırmayı yönetmeye ve okuma deneyimini bozmadan kısmi içerik işlemeye bakacağız. Akış arayüzünün gerçekte neye benzediğini anlamak için üç demo oluşturdum: bir sohbet balonu, bir günlük akışı ve bir transkripsiyon görünümü. Yüzeyde farklı görünseler de aynı üç sorunla karşılaşıyorlar.
İlk sorun kaydırma. İçerik akarken çoğu arayüz görüntü alanını en alta sabitler. Bu sadece izliyorsanız işe yarar, ancak bir şey okumak için yukarı kaydırdığınız anda sayfa aşağı çekilir. Bunu istemediniz; arayüz sizin adınıza karar verdi ve şimdi okumak yerine onunla mücadele ediyorsunuz. İkinci sorun düzen kayması. Akış içerikli arayüzler, kapların sürekli büyümesi anlamına gelir ve onlar büyüdükçe aşağıdaki her şey aşağı kayar. Tıklamak üzere olduğunuz bir düğme artık orada değil; okuduğunuz bir satır kaymıştır. Sayfa bozuk değil; sadece hiçbir şey rahatça etkileşim kuracak kadar sabit kalmıyor.
Üçüncü sorun render sıklığı. Tarayıcılar ekranı saniyede yaklaşık 60 kez yeniler, ancak akışlar bundan çok daha hızlı gelebilir. Bu, tarayıcının sayfadaki her şeyin dahili temsili olan DOM'un, kullanıcının asla görmeyeceği kareler için güncellenmesi anlamına gelir. Her güncelleme yine de bir maliyete sahiptir ve bu maliyet, performans düşmeye başlayana kadar sessizce birikir. Her bir demoda işlerin ters gitmeye başladığı anlara dikkat edin; arayüzün yolunuza çıkmaya başladığı o küçük sürtünme anı. İşte tam olarak düzeltmek için buradayız.
Sonuç ve Değerlendirme
Örnek olarak, AI sohbet yanıtlarını akışla alan bir arayüz düşünün. Stream düğmesine tıkladığınızda mesaj token token büyümeye başlar. Mesaj akarken yukarı kaydırmayı deneyin; arayüz sizi aşağı çekmeye çalışır. Bu, dikkatinizin nerede olması gerektiğine dair sizin adınıza karar vermesidir. Canlı işleme günlük görüntüleyicisinde de benzer bir sorun var: kuyruk geçişi, etkileşim ve kararlı arayüzler arasındaki dengeyi netleştiriyor. Kuyruk etkin olduğunda arayüz yeni içeriği takip eder, ancak yukarı kaydırıp kalamazsınız; keşfetmek için akışı durdurmanız veya kuyruğu devre dışı bırakmanız gerekir.
Bu sorunları çözmek için öngörülebilir kaydırma davranışı sağlamak gerekir. Amaç: Kullanıcı akışın altındayken otomatik kaydırmayı etkinleştirmek, yukarı kaydırdığında durdurmak ve tekrar alta döndüğünde devam ettirmek. Bunun için kullanıcının alt kısımda olup olmadığını tespit eden bir mantık kurmalıyız. Ayrıca, düzen kaymasını önlemek için sabit boyutlu kaplar veya placeholder'lar kullanabilir, render sıklığını azaltmak için değişiklikleri toplu olarak uygulayabiliriz. Bu yaklaşımlar, akış içerikli arayüzlerin hem kararlı hem de kullanıcı dostu olmasını sağlar.
Kaynak: smashingmagazine.com
