--- title: 'Tel Çerçeve ve Prototip' source: 'https://academia.sh/tr/kurslar/kullanici-deneyimi/tel-cerceve-ve-prototip' course: 'Kullanıcı Deneyimi ve Davranış Tasarımı' language: tr updated: '2026-08-17T18:09:38+00:00' license: 'CC BY-SA 4.0' --- # Tel Çerçeve ve Prototip Doğruluğun görsel, içerik ve etkileşim olmak üzere üç bağımsız ekseni; prototipin düğüm kapsamasıyla görev kapsamasının ayrılması ve doğruluk düzeyinin hazırlık maliyetine etkisi. Akış denetlendi, gezinme yapısı kuruldu. İkisi de kâğıt üzerinde tutarlı, ama tutarlı bir yapı kullanılabilir bir arayüz demek değildir. Bunu anlamanın tek yolu, yapıyı birine göstermek ve bir görev vermektir. Soru neyin gösterileceğidir. Kutulardan oluşan kaba bir taslak mı, tıklanabilir bir kopya mı, gerçek metinlerle doldurulmuş görsel olarak tamamlanmış bir ekran mı? Bu ders doğruluk düzeyi kararını ele alır ve prototipin kaç ekranı kapsarsa kaç görevin sınanabileceğini hesaplar. ## Tel Çerçeve ile Prototip Ayrı Sorulara Yanıt Verir **Tel çerçeve (wireframe)**, tek bir ekranın yapısını gösterir: hangi bilgi var, hangi hiyerarşide duruyor, hangi eylemler bulunuyor. Yanıtladığı soru "bu ekranda doğru şeyler var mı" sorusudur. Tel çerçeve durağandır ve tek ekranlıdır; akışı sınayamaz. **Prototip (prototype)**, ekranlar arası geçişi de içerir. Yanıtladığı soru "kullanıcı bu görevi tamamlayabiliyor mu" sorusudur. Prototip, akış diyagramının çalıştırılabilir karşılığıdır: düğümler ekranlara, geçişler tıklamalara karşılık gelir. Aradaki fark bir olgunluk farkı değil, soru farkıdır. Ekranın içeriği tartışmalıysa tel çerçeve yeterlidir ve prototip hazırlamak boşa emektir. Görevin tamamlanıp tamamlanmadığı tartışmalıysa tel çerçeve hiçbir şey söylemez. ## Doğruluk Tek Bir Eksen Değildir Doğruluk düzeyi çoğu zaman "düşük" ile "yüksek" arasında tek bir kaydırıcı gibi düşünülür. Aslında birbirinden bağımsız üç eksen vardır ve her biri ayrı ayarlanabilir. - **Görsel doğruluk.** Renk, tipografi, aralık ve durum tasarımının gerçeğe ne kadar yakın olduğu. Düşük ucunda gri kutular, yüksek ucunda Arayüz Tasarımının Temelleri kursunda kurulan bütün kararların uygulanmış hâli vardır. - **İçerik doğruluğu.** Ekrandaki metnin ve verinin gerçek olup olmadığı. Düşük ucunda yer tutucu metin, yüksek ucunda kataloğun gerçek kayıtları — uzun başlıklar, eş adlı ciltler, boş üstveri alanları dâhil. - **Etkileşim doğruluğu.** Kaç geçişin çalıştığı. Düşük ucunda tek yol tıklanabilir, yüksek ucunda bütün dallar. Bu eksenlerin bağımsızlığı pratik bir sonuç verir: **görsel doğruluğu düşük, içerik doğruluğu yüksek** bir prototip, mikro metin ve bilgi mimarisi sorunlarını yakalamak için en verimli birleşimdir. Gri kutular içine gerçek kayıt başlıkları konduğunda, birinci konuda ölçülen kırpma ve eş adlı kayıt sorunları görünür hâle gelir; renk kararları ise tartışmayı dağıtmadan bekler. Ters birleşim — görsel doğruluk yüksek, içerik doğruluğu düşük — en yanıltıcı olanıdır. Katılımcı gördüğü ekranı bitmiş sanır ve yapıya değil renge yorum yapar; ayrıca yer tutucu metinlerin hepsi aynı uzunlukta olduğu için hiçbir kırpma sorunu ortaya çıkmaz. ## Kaç Ekran, Kaç Görev Prototip hazırlanırken kaç düğümün uygulanacağı bir bütçe kararıdır. Bu kararın ölçütü kapsanan ekran oranı değil, uçtan uca sınanabilen görev oranıdır. ```js // prototip-kapsama.mjs — prototipin dugum kapsamasi ile gorev kapsamasi ayni degildir const TUM_DUGUMLER = [ "basla", "oturum var mi", "giris ekrani", "giris hatasi", "kayit durumu", "rafta", "gecikmis kitap var mi", "borc odeme", "odunc onayi", "oduncte", "rezervasyon onerisi", "rezervasyon onayi", "odunc basarili", "rezervasyon basarili", "vazgec", ]; // Her gorev, akista gecilmesi gereken dugum dizisi const GOREVLER = { "odunc al (oturum acik)": ["basla", "oturum var mi", "kayit durumu", "rafta", "gecikmis kitap var mi", "odunc onayi", "odunc basarili"], "odunc al (giris gerekli)": ["basla", "oturum var mi", "giris ekrani", "kayit durumu", "rafta", "gecikmis kitap var mi", "odunc onayi", "odunc basarili"], "borcu ode ve odunc al": ["basla", "oturum var mi", "kayit durumu", "rafta", "gecikmis kitap var mi", "borc odeme", "odunc onayi", "odunc basarili"], "oduncteki kaydi rezerve et": ["basla", "oturum var mi", "kayit durumu", "oduncte", "rezervasyon onerisi", "rezervasyon onayi", "rezervasyon basarili"], "yanlis parola sonrasi vazgec": ["basla", "oturum var mi", "giris ekrani", "giris hatasi", "vazgec"], "rezervasyondan vazgec": ["basla", "oturum var mi", "kayit durumu", "oduncte", "rezervasyon onerisi", "vazgec"], }; // Prototipin surumleri: her surum bir oncekine dugum ekliyor const EKLENEN = [ ["P1 ana yol", ["basla", "oturum var mi", "kayit durumu", "rafta", "gecikmis kitap var mi", "odunc onayi", "odunc basarili"]], ["P2 giris", ["giris ekrani", "giris hatasi", "vazgec"]], ["P3 rezervasyon", ["oduncte", "rezervasyon onerisi", "rezervasyon onayi", "rezervasyon basarili"]], ["P4 borc", ["borc odeme"]], ]; const gorevAdlari = Object.keys(GOREVLER); const kapsanan = (kume, g) => GOREVLER[g].every((d) => kume.has(d)); console.log("surum dugum dugum kapsamasi sinanabilir gorev gorev kapsamasi"); const kume = new Set(); const surumler = []; for (const [ad, yeni] of EKLENEN) { yeni.forEach((d) => kume.add(d)); const sinanabilir = gorevAdlari.filter((g) => kapsanan(kume, g)); surumler.push({ ad, dugum: kume.size, gorev: sinanabilir.length, kume: new Set(kume) }); console.log( `${ad.padEnd(16)} ${String(kume.size).padStart(5)} ${((kume.size / TUM_DUGUMLER.length) * 100).toFixed(1).padStart(15)}% ` + `${String(sinanabilir.length).padStart(18)} ${((sinanabilir.length / gorevAdlari.length) * 100).toFixed(1).padStart(15)}%` ); } // Bir surumde eksik kalan dugumlerden hangisi en cok gorevi acar console.log("\nP1 sonrasi: eksik dugum engelledigi gorev sayisi"); const p1 = surumler[0].kume; const eksik = TUM_DUGUMLER.filter((d) => !p1.has(d)); const engel = eksik .map((d) => [d, gorevAdlari.filter((g) => !kapsanan(p1, g) && GOREVLER[g].includes(d)).length]) .sort((a, b) => b[1] - a[1]); for (const [d, c] of engel) console.log(` ${d.padEnd(24)} ${c}`); // Dogruluk duzeyinin maliyeti: dugum basina varsayilan hazirlik suresi const BIRIM = { "dusuk (kagit)": 0.5, "orta (tiklanabilir)": 2, "yuksek (gorsel tam)": 6 }; console.log("\ndogruluk duzeyi P1 P2 P3 P4 (saat)"); for (const [ad, saat] of Object.entries(BIRIM)) { console.log( `${ad.padEnd(22)} ${surumler.map((s) => (s.dugum * saat).toFixed(1).padStart(5)).join(" ")}` ); } const enBuyuk = surumler.at(-1).dugum; console.log(`\ntum gorevleri sinamak icin ${enBuyuk} dugum gerekiyor`); console.log(`dusuk duzeyde ${(enBuyuk * BIRIM["dusuk (kagit)"]).toFixed(1)} saat, yuksek duzeyde ${(enBuyuk * BIRIM["yuksek (gorsel tam)"]).toFixed(1)} saat (${(BIRIM["yuksek (gorsel tam)"] / BIRIM["dusuk (kagit)"]).toFixed(0)} kat)`); ``` ``` surum dugum dugum kapsamasi sinanabilir gorev gorev kapsamasi P1 ana yol 7 46.7% 1 16.7% P2 giris 10 66.7% 3 50.0% P3 rezervasyon 14 93.3% 5 83.3% P4 borc 15 100.0% 6 100.0% P1 sonrasi: eksik dugum engelledigi gorev sayisi giris ekrani 2 oduncte 2 rezervasyon onerisi 2 vazgec 2 giris hatasi 1 borc odeme 1 rezervasyon onayi 1 rezervasyon basarili 1 dogruluk duzeyi P1 P2 P3 P4 (saat) dusuk (kagit) 3.5 5.0 7.0 7.5 orta (tiklanabilir) 14.0 20.0 28.0 30.0 yuksek (gorsel tam) 42.0 60.0 84.0 90.0 tum gorevleri sinamak icin 15 dugum gerekiyor dusuk duzeyde 7.5 saat, yuksek duzeyde 90.0 saat (12 kat) ``` ## Ekran Saymak Görev Saymak Değildir İlk tablonun iki sütunu birbirini izlemiyor. Ana yol prototipi düğümlerin %46.7'sini kapsıyor ama görevlerin yalnızca %16.7'sini uçtan uca sınatabiliyor. Üçüncü sürümde düğüm kapsaması %93.3'e çıkıyor, görev kapsaması %83.3'te kalıyor. Nedeni bileşik bir koşuldur: bir görev, geçtiği **bütün** düğümler uygulanmışsa sınanabilir. Tek bir eksik düğüm görevin tamamını kullanılamaz kılar. Yarısı hazır bir prototip, görevlerin yarısını değil çok daha azını sınatabilir. Bunun doğrudan bir uygulama sonucu var: prototip **ekran listesinden değil görev listesinden** kurulur. Önce sınanacak görevler seçilir, sonra o görevlerin geçtiği düğümler kümesi çıkarılır, prototip o kümeyi kapsar. Ekran ekran ilerlemek, hazırlanan ekranların çoğu sınanamayan bir prototip üretir. İkinci tablo hangi düğümün önce yapılacağını söylüyor. Ana yol prototipinden sonra en çok görevi açan düğümler giriş ekranı, ödünçte durumu, rezervasyon önerisi ve vazgeçme; her biri iki görevi engelliyor. Bu, akış diyagramının yol sayımıyla aynı mantıktır ve öncelik tartışmasını sayıya bağlar. ## Maliyet Oranı, Maliyetin Kendisi Değil Üçüncü tablodaki saat değerleri varsayılmış birim maliyetlerdir; gerçek sayılar ekibe, araca ve ekranın karmaşıklığına göre değişir. Anlamlı olan mutlak süreler değil, aralarındaki orandır: düşük doğruluklu bir prototip düğüm başına yüksek doğruluklu olandan on iki kat ucuza geliyor. Bütün görevleri kapsayan bir prototip düşük doğrulukta 7.5 saat, yüksek doğrulukta 90 saat. Bu oranın kararı belirlediği yer şurasıdır: **aynı bütçeyle ya bir görevi ayrıntısıyla ya da on iki görevi kabaca sınayabilirsiniz.** Hangi sorunun sorulduğu bu seçimi belirler. Yapı sorusu — kullanıcı görevi tamamlayabiliyor mu — geniş ve ucuz prototiple yanıtlanır. Görsel karar sorusu — bu iki durum yeterince ayrışıyor mu — dar ve pahalı prototiple yanıtlanır. Ucuz prototipin ikinci bir üstünlüğü vardır ve maliyetten daha önemlidir: **atılabilir** olduğu için eleştirilmesi kolaydır. Doksan saat harcanmış bir prototip, üzerinde çalışan ekipten değişiklik önerisi almayı zorlaştırır; hem tasarımcı hem katılımcı yatırımı savunma eğilimine girer. ## Prototipin Yanıtlayamadığı Sorular Prototip bir kopyadır ve bazı sorularda sistematik olarak yanıltır. **Veri ölçeği.** Prototipte on kayıt vardır, katalogda binlerce. Sonuç listesinin on kayıtla iyi çalışması hiçbir şey kanıtlamaz; kırpma, sıralama ve daraltma sorunları ölçekle ortaya çıkar. İçerik doğruluğunu yükseltmenin en ucuz yolu, kayıt sayısını değil kayıtların **çeşitliliğini** gerçekçi tutmaktır: en uzun başlık, eş adlı iki cilt, üstverisi eksik bir kayıt. **Hata sıklığı.** Prototipte bağlantı kopmaz, işlem başarısız olmaz, oturum düşmez. Akış diyagramında bulunan çıkışsız hata düğümü prototipte hiç görünmez, çünkü oraya düşmenin yolu yoktur. Hata durumları prototipe ancak kasten yerleştirilirse sınanır. **Zaman.** Prototipte her geçiş anlıktır. Bekleme durumlarının tasarımı — Arayüz Tasarımının Temelleri kursundaki yükleme ve boş durumlar — prototipte doğal olarak sınanmaz; gecikme elle eklenmedikçe kullanıcı hiç beklemez. **Öğrenme.** Prototip oturumu bir kerelik bir karşılaşmadır. İlk kullanımda zor görünen bir yapı, üçüncü kullanımda en hızlısı olabilir; ilk kullanımda kolay görünen bir yapı uzun vadede yorucu olabilir. Prototip ilk karşılaşmayı ölçer ve bunu açıkça söylemek gerekir. ## Özet - Tel çerçeve tek ekranın içeriğini, prototip görevin tamamlanabilirliğini sorar; ikisi arasındaki fark olgunluk değil soru farkıdır. - Doğruluk görsel, içerik ve etkileşim olmak üzere üç bağımsız eksendir; görsel düşük, içerik yüksek birleşimi bilgi mimarisi ve metin sorunlarını yakalamakta en verimlisidir. - Düğüm kapsaması ile görev kapsaması aynı hızda artmaz; örnek veride %46.7 düğüm kapsaması görevlerin yalnızca %16.7'sini sınatabildi, çünkü tek eksik düğüm görevin tamamını kapatır. - Prototip ekran listesinden değil görev listesinden kurulur; hangi eksik düğümün kaç görevi açtığı hesaplanarak sıralanır. - Doğruluk düzeyinin anlamı mutlak maliyet değil orandır; aynı bütçeyle ya bir görev ayrıntısıyla ya da çok sayıda görev kabaca sınanır. - Prototip veri ölçeğini, hata sıklığını, bekleme süresini ve öğrenmeyi sistematik olarak eksik gösterir; bu sınırlar bulguların yanına yazılır. ## Sonraki Adım Prototip hazır, ama katılımcı çağırmadan önce ucuz bir denetim yapılabilir. Bilinen kullanılabilirlik sorunlarının büyük bölümü, yerleşik değerlendirme ölçütleri listesi elde tutularak arayüzü gözden geçirmekle bulunur. Sonraki ders bu ölçütleri ilke ilke ele alır, birden çok değerlendiricinin bulgularının ne kadar örtüştüğünü hesaplar ve tek bir uzmanın niçin yetmediğini sayıyla gösterir.