Gecikmeyi Azaltmaya Yönelik Tasarım: Yapay Zeka Hızı Kullanıcı Deneyimine Dönüştüğünde

Yapay zeka ürünlerinde en önemli kullanıcı deneyimi (UX) sorunu yapay zeka gecikmesidir ve neredeyse hiç kimse bunu tasarım işi olarak ele almıyor. En iyi yapay zeka deneyimlerini sunan ekipler, daha hızlı modelleri beklemeyi bırakıp bekleme süresini dikkate alarak tasarım yapmaya başladılar.

İşte yol haritası. Algılanan hızın matematiği, işe yarayan beş model, başarısız olan dört model, beş çözümleme ve ürün piyasaya sürülmeden önce yapılacak bir kontrol listesi.

Yapay Zeka Gecikmesi Bir Tasarım Sorunudur, Mühendislik Sorunu Değildir

Çoğu yapay zeka ürünü yavaş hissettirir çünkü gecikmeyi mühendisliğin sorunu olarak ele alırlar. Mühendislik daha hızlı bir model piyasaya sürse bile ürün hala yavaş hissettirir, çünkü darboğaz asla milisaniyeler değildi. Kullanıcının hiçbir şey okumadan bir dönen pencereye bakmasına neden olan tasarım seçimiydi.

Kullanıcı milisaniyeleri ölçmez. Kullanıcı bir şeyin olup olmadığını ölçer. Dört saniyelik akıcı metin hızlı okunur. Bir modal pencerenin 1,5 saniye gerisinde kalmak bozuk okunur.

Algılanan Hızın Matematiği

Dört saniyelik akıcı bir yanıt hızlı okunur. 1,5 saniyelik bir yanıtın engellenmesi yavaş olarak algılanır. Algılanan hız, geçen süre değil, geri bildirim yoğunluğu ile ilgilidir. Bu tek gerçek, bir yapay zeka ürünündeki her gecikme kararını yeniden düzenler.

Önemli olan sayılar, toplam yanıt süresi değil, ilk token'a ulaşma süresi ve saniyede token sayısıdır. İlk token'a ulaşma süresi 500 milisaniyenin altında ise anlık gibi hissettirir. Saniyede 30 ila 80 token, insan hızında okuma anlamına gelir. Beş saniyelik toplam süre, ilk token'dan itibaren akış sağlandığında tolere edilebilir, ancak engelleme olduğunda kabul edilemez. Bu sayılar etrafında tasarım yaparsanız, daha yavaş bir model bile rakiplerinden daha hızlı hissettirebilir.

İşe yarayan beş model

Akışlı metin. İyimser kullanıcı arayüzü. Aşamalı açıklama. Akıl yürütme yüzeyleri. Arka plan ajanları. Algılanan hızda başarılı olan her yapay zeka ürünü, bunlardan en az üçüne dayanır ve en iyileri beşine de dayanır.

Beş model bir araya gelir. Akış, kullanıcıya okuyacak bir şey verir. İyimser kullanıcı arayüzü onlara görecek bir şey sunar. Aşamalı açıklama onlara tarayacak bir şey sunar. Akıl yürütme yüzeyleri onlara güvenecek bir şey sunar. Arka plan ajanları onlara yapacak başka bir şey sunar. Bunların birleşimiyle model on saniye sürer ve ürün hala canlı hissettirir.

Akışlı metin, beklemeyi cevaba dönüştürür

İlk model, belirteç belirteç işleme yöntemidir. Kullanıcı, model yazarken okur ve bekleme çıktıya karışır. İlk belirtece ulaşma süresi, önemli olan tek sayı haline gelir. İlk belirteç geldiğinde kullanıcı okuyor, beklemiyor.

Claude.ai'nin akışlı modeli, piyasaya sürülen en temiz örnektir. İlk belirteç bir saniyeden kısa sürede gelir ve geri kalanı okuma hızında akar. Kullanıcı, model ikinci paragrafı bitirmeden önce birinci paragrafın ortasındadır. Aynı model, dört saniye sonra tamamlanmış bir blok olarak teslim edilirse, farklı bir ürün gibi hissettirir.

İyimser Kullanıcı Arayüzü, Model Dönmeden Önce Eylemi Onaylar

İkinci model, model bitmeden önce sonucu göstermek ve yanıt geldiğinde uzlaştırmaktır. Kullanıcının henüz doğru cevaba ihtiyacı yoktur. Onaylanmış olması gerekir.

Linear Yapay zeka, bir öneriyi kabul ederken bunu yapar. Sonuç, hafif bir bekleme durumuyla hemen soruna eklenir ve uzlaştırma arka planda gerçekleşir. Model farklı bir sonuç verirse, kullanıcı arayüzü anında güncellenir. Başarısız olursa, kullanıcı arayüzü geri alınır ve hata görüntülenir. Kullanıcı her iki durumda da ilerlemeye devam eder.

Aşamalı Açıklama, İskelet, Taslak ve Son Hali Sunar

Üçüncü model, önce iskelet, sonra kısmi taslak, en son da son çıktı şeklindedir. Yapı, içerikten önce gelir ve gözün takip edebileceği bir şey vererek algılanan beklemeyi azaltır.

v0, bunu uygulama istemi yüzeyinde sunar. Bir düzen iskeleti neredeyse anında belirir, bileşenler model onları oluşturdukça doldurulur ve son stilize edilmiş önizleme en son gelir. Lovable da aynı şekilde çalışır. Her aşama, bir sonraki yüklenirken kullanıcının okuyabileceği bir kontrol noktasıdır.

Akıl yürütme yüzeyleri bekleme süresini güvene dönüştürür

Dördüncü model, model çalışırken planını veya düşünme sürecini göstermektir. Bir ajanın akıl yürütmesini izlemek, dönen bir çarkı izlemekten daha iyidir. Ayrıca güven oluşturur, çünkü kullanıcı modelin ne yapmaya çalıştığını yapmadan önce görür.

Cursor'ın ajan modu bunu bir plan yüzeyiyle birlikte sunar. Kullanıcı, ilk komut çalışmadan önce amaçlanan adımları görür. ChatGPT, yapılandırılmış düzyazı olarak okunan, daraltılabilir düşünce özetleriyle birlikte düşünme modelleri için akıl yürütme izlerini gösterir. On beş saniyelik görünür akıl yürütme, üç saniyelik kara kutudan daha iyidir.

Arka plan ajanları, model çalışırken kullanıcıların çalışmaya devam etmesini sağlar

Beşinci model, ajanı ön plandan çıkarıp bir yan panele taşımaktır. Kullanıcı hiçbir zaman tek bir yapay zeka isteğiyle engellenmez. Kullanıcı ana tuvalde yazmaya, kodlamaya veya tasarlamaya devam ederken, ajan köşede çalışır.

Cursor'ın arka plan ajanları, piyasaya sürülen en temiz sürümdür. Kullanıcı uzun bir görevi başlatır ve ajan yan panelde çalışırken ön planda düzenlemeye devam eder. GitHub Copilot'ın kodlama ajanı, çekme isteği şeklindeki görevlerde aynı şeyi yapar. Bu model yalnızca kullanıcının yapacak başka bir şeyi varsa işe yarar ve gerçek bir iş akışında her zaman başka bir işi vardır.

Başarısız olan dört model

Yavaş hissettiren çoğu yapay zeka ürünü, dört başarısız modelin bir kombinasyonunu sunar. Sadece dönen göstergeler. Düşünme metni döngüleri. Modsal engelleme diyalogları. Hiçbir ilerleme sinyali olmaması. Her biri, yanıt hızlı olsa bile algılanan hızı düşürür.

Sadece dönen göstergeler kullanıcının ihtiyaç duyduğu her şeyi gizler

İlerleme sinyali olmayan bir dönen gösterge kara kutudur. Kullanıcının dikkatini verecek hiçbir şey yoktur ve bekleme süresi, aynı bekleme süresinin bir belirteç akışıyla olduğundan daha yavaş okunur. Dönen bir simge, kullanıcıya başka yöne bakmasını söyler; bu, bir yapay zeka yüzeyinin yapması gerekenin tam tersidir.

Dönen simgeyi silin. Bir belirteç akışı, bir iskelet veya bir akıl yürütme izi gönderin. Yanıt akış için çok kısaysa, iyimser bir durum gönderin. Model görünmez bir iş yapıyorsa, bunu adlandıran bir durum satırı gönderin.

Düşünme metin döngüleri bilgi içermeyen gürültüdür

Dönen bir Düşünme metin döngüsü, dönen simgeden daha kötüdür. Olmayan bir ilerlemeyi ima eder. Kullanıcılar iki oturum içinde onu görmezden gelmeyi öğrenirler; bu da yüzeyin bir sonraki gönderdiği gerçek durum için kanalı öldürür.

Döngüyü gerçek bir durumla değiştirin. Üç kaynak aranıyor. Dosya okunuyor. Yanıt taslağı hazırlanıyor. Durum satırı bilgidir. Döngü, bilgi gibi görünen gürültüdür.

Modal engelleme diyalogları beklemeleri duvarlara dönüştürür

Model çalışırken UI'nin geri kalanını engelleyen bir modal, en pahalı gecikme hatasıdır. Bir beklemeyi rehin alma durumuna dönüştürür. Kullanıcı kaydırma yapamaz, önceki bir cevabı kopyalayamaz, başka hiçbir şey yapamaz.

Modal penceresini silin. Yanıtı satır içi, yan panelde veya engellemeyen bir bildirimde gönderin. Kullanıcı, bir yapay zeka isteği devam ederken ürünün geri kalanına erişimini asla kaybetmemelidir.

İlerleme sinyali olmaması kullanıcıya geri dönmeyi öğretir

İlerleme sinyali olmayan bir yapay zeka yüzeyi, kullanıcıya isteğin bozuk olduğunu varsaymayı öğretir. Yanıt gelmeden önce geri düğmesine basarlar. En kötü durumda, sayfayı yenilerler ve isteği kaybederler.

500 milisaniyeden fazla süren her yapay zeka yüzeyinin bir ilerleme sinyaline ihtiyacı vardır. Akış metni en iyisidir. İskelet bir sonraki seçenektir. Daha uzun beklemeler için mantık izleme işe yarar. Diğer her şey için durum satırı işe yarar. Sinyal mutlaka olmalıdır.

Beş gerçek ürün incelemesi

Gecikmeyi kullanıcı deneyimine dönüştüren beş yapay zeka yüzeyi.

Claude.ai, tüm etkileşim olarak akış

Claude.ai'nin akışı, gecikmeyi bir özellik olarak ele almanın en temiz örneğidir. İlk token'a ulaşma süresi, sıcak bir oturumda bir saniyenin oldukça altında kalır, metin okuma hızında iner ve bekleme süresi çıktıya karışır.

Tasarım hamlesi, akışa tamamen odaklanmaktır. Döndürücü yok, düşünme metni yok, iskelet yok, sadece yanıt tek tek token'lar halinde iner. Ürün, yirmi saniyelik üretim boyunca hızlı hissettirir çünkü kullanıcı on dokuz saniye boyunca okuma yapmıştır.

İmleç, planla ve çalıştır döngüsü

İmleç, ajanın planını önce göstererek, her adımı görünür ilerlemeyle çalıştırarak ve farkları indikçe onaylayarak gecikmeyi güvene dönüştürür. Kullanıcı planı okuyabildiği, her adımı izleyebildiği ve her farkı onaylandığında inceleyebildiği için birkaç dakikalık bir görev amaçlı hissettirir.

Tasarım hamlesi, beklemeyi sıralamaktır. Önce plan. Her adım bir kontrol noktası. Son çıktı olarak farklar. Her katman bilgi taşır, bu nedenle kullanıcı iş dakikalarca sürse bile asla siyah bir kutuya bakmak zorunda kalmaz.

⟦MARKA1⟧ Yapay Zeka, satır içi aşamalı açıklama

⟦MARKA2⟧ Yapay Zeka, mevcut yüzeyler içinde aşamalı açıklama sunar. Yapay Zeka asla ön plana sahip olmaz. Taslak bir öneri, sorunda satır içi olarak görünür. Bir özet, projede satır içi olarak görünür. Bekleme, kullanıcının gerçek çalışmasını asla engellemez çünkü kullanıcı zaten Yapay Zeka'nın desteklediği işi yapmaktadır.

Kullanıcının zaten bildiği bir ürünün içine yerleştirilmiş Yapay Zeka asla bir modal pencere veya devralma olmamalıdır. Satır içi açıklama doğru modeldir ve gecikme maliyeti, kullanıcının zaten yaptığı eylemlerin içinde gizlenir.

Model yavaş olsa bile hızlı hissettiren bir Yapay Zeka ürünü mü istiyorsunuz? ⟦BAĞLANTI0⟧. UXBrainy gecikme denetimleri ve akışlı kullanıcı arayüzü yeniden tasarımları sunar, AppBrainy tam Yapay Zeka ürün teslimatı sunar ve ClaudeBrainy, akışı ucuz hale getiren istem ve Beceri katmanını sunar. Ajan katmanının aynı üretim seviyesinde gönderilmesi için Yapay zeka ajanı kullanıcı arayüzü tasarım kalıpları ile eşleştirin.

Granola, kayıt-özetleme kademesi

Granola, dakikalarca süren model çalışmasını dört aşamalı bir kademenin arkasına gizler. Kayıt önce ham dalga formu olarak gelir. Transkript ikinci olarak kaydırılabilir metin olarak gelir. Taslak notlar üçüncü olarak madde işaretli yapı olarak gelir. Son özet en son olarak cilalanmış düzyazı olarak gelir. Her aşama, bir sonraki hazır olmadan önce kullanışlıdır.

Üç dakikalık model çalışması otuz saniye gibi gelir çünkü ilk kullanışlı çıktı on saniye içinde gelir. Transkript kendi başına değerlidir. Notlar kendi başlarına değerlidir. Özet, değeri kısıtlamadan deneyimi tamamlar.

Perplexity, canlı kaynak akışı

Perplexity, cevaptan önce kaynaklarını yayınlar. Alıntı listesi önce gelir ve model her kaynağı alıp sıraladıkça doldurulur. Kullanıcı kaynakları okurken cevap alttan akar. Bekleme süresi, yükleme değil, araştırma olarak algılanıyor.

Tasarım hamlesi, sonuçtan önce çalışmayı göstermektir. Kaynak listesini okuyan bir kullanıcı beklemiyor. Aynı toplam yanıt süresi, kaynaklar yanıt hazır olana kadar gizli tutulduğunda, iki ila üç kat daha yavaş hissedilir. Beklemenin bilgi yoğunluğu, algılanan hızın tüm hikayesini oluşturuyor.

Yayın Öncesi Gecikme Kontrol Listesi

Bu listeyi herhangi bir yapay zeka yüzeyinde yayınlanmadan önce çalıştırın. On iki kontrol, hepsi ölçülebilir.

1. Sıcak bir oturumda ilk belirteç alma süresi 500 milisaniyenin altında.

2. Hedef modelde akış, saniyede 30 ila 80 belirteç arasında sürdürülüyor.

3. 500 milisaniyeden uzun her beklemede bir ilerleme sinyali var.

4. Yapay zeka yüzeyinde hiçbir yerde saf bir döndürme simgesi yok.

5. Yapay zeka yüzeyinde hiçbir yerde dönen Düşünme metin döngüsü yok.

6. Model çalışırken modal engelleme iletişim kutusu yok.

7. İyimser kullanıcı arayüzü, niyetin 100 milisaniye içinde görünür eylemi gerçekleştirir.

8. İki saniyeden uzun süren herhangi bir yanıt için iskeletler içerikten önce oluşturulur.

9. On saniyeden uzun süren herhangi bir görev için mantık izleme bilgileri gösterilir.

10. Uzun süreli çalışan ajanlar ön planda değil, yan panelde çalışır.

11. Kullanıcı, bir istek devam ederken önceki çıktıyı kaydırabilir, kopyalayabilir ve okuyabilir.

12. Her çok aşamalı yanıt, kullanıcının tüketebileceği ara aşamaları ortaya çıkarır.

Liste, tasarım inceleme şablonunda bulunur ve her çalıştırıldığında daha hızlı hale gelir.

SSS

Bir yapay zeka ürününde en önemli gecikme sayısı nedir?

İlk belirtece ulaşma süresi. Toplam yanıt süresi, kullanıcının okuyacak bir şey bulmadan önce ne kadar beklediğinden daha az önemlidir. 500 milisaniyenin altı anlık olarak kabul edilir.

Akış her zaman engellemeden daha mı iyidir?

Metin için evet. 500 milisaniyenin altında, bekleme görünmez olduğu için engelleme (blocking) sorun değil. Daha uzun süreler için ise, akış (streaming) algılanan hız ölçütlerinin her birinde engellemeyi geride bırakır.

Ne zaman iyimser kullanıcı arayüzü (optimistic UI) kullanmalıyım, ne zaman akış (streaming) kullanmalıyım?

Çıktı, metin, kod veya yapılandırılmış üretim gibi cevap olduğunda akış kullanılır. Model, kullanıcının zaten beklediği bir kararı verdiğinde, örneğin iyileştirilmiş bir taslak veya kabul edilmiş bir öneri gibi durumlarda iyimser kullanıcı arayüzü kullanılır. İkisi birbirini tamamlar.

Dakikalar süren bir ajanın ilerlemesini nasıl gösteririm?

Akıl yürütme yüzeyleri ve yan panel ilerleme akışları. Önce planı, sonra aktif adımı, üçüncü olarak da çalışan çıktıyı gösterin. Kullanıcı planı okur, adımların ilerlemesini izler ve asla kilitlenmiş hissetmez.

Günümüzdeki yapay zeka ürünlerindeki en kötü gecikme hatası nedir?

Döndürme simgesi (spinner) içeren engelleme modalı. Dört başarısız kalıbın hepsini tek bir ekranda birleştirir ve kullanıcıya yapay zekanın kullanılacak bir şey değil, beklenecek bir şey olduğunu öğretir.

Yapay Zeka Gecikmesini Göz Önünde Bulundurarak Tasarım Yapmak Gerçekte Avantaj Sağlar

Yapay zeka gecikmesini göz önünde bulundurarak tasarım yapmak, yavaş modeller için bir çözüm yolu değildir. Bu, daha yavaş ama daha iyi bir modelin, kullanıcının gerçekten önem verdiği her ölçütte daha hızlı ama daha kötü bir modeli geçmesini sağlayan tasarım hamlesidir.

Şu anda kazanan ekipler, ham hız optimizasyonunu bırakıp algılanan hız için tasarım yapmaya başladılar. Akışa odaklandılar, iyimser kullanıcı arayüzü eklediler, 200 ms'lik iskeletler oluşturdular ve ajanları yan panellere taşıdılar. Her bekleme bilgi içerir.

Eğer yapay zeka yüzeyiniz hala bir döndürme penceresi, bir düşünme döngüsü veya engelleyici bir modal içeriyorsa, darboğaz modelde değil, tasarımdadır. Her aşamanın taranabilir kalması için çalışmayı Yapay zeka ajanı kullanıcı arayüzü tasarım kalıpları, Yapay zeka ürününün kullanıma alınması kılavuzu, Yapay zekâ tabanlı ürün tasarımı ve görsel hiyerarşi ile birleştirin.

Model yavaş olsa bile hızlı hissettiren bir yapay zeka ürünü istiyorsanız, Brainy'ı işe alın'ya bakın. UXBrainy gecikme denetimleri ve akış arayüzü yeniden tasarımları sunarken, AppBrainy tam yapay zeka ürün teslimatı sağlıyor ve ClaudeBrainy ise akışı ucuz hale getiren komut istemi ve Skill katmanını sunuyor.