Mockup Nedir, Tasarım Kodlanmadan Nasıl Sınanıyor?

---

Bir ekran tasarımı onaylanmadan kodlanırsa, hata kodun içinde bulunuyor ve düzeltmesi pahalı oluyor. Mockup'ın varlık sebebi bu: karar vermeden önce görmek.

Bu yazı mockup ve prototip kavramlarının hangi işi gördüğünü, hangi aşamada kullanıldığını, kâğıt taslakla kodlu prototip arasındaki farkı ve kullanıcı testinde neye yaradığını iki resmî rehbere dayanarak açıklıyor.

Neden yapılıyor?​

Birleşik Krallık'ın kamu hizmetleri için hazırladığı Hizmet El Kitabı kuralı doğrudan koyuyor: herhangi bir şey inşa etmeye karar vermeden önce farklı tasarımları keşfetmek, paylaşmak ve sınamak için hizmetinizin prototiplerini yapmalısınız.

Rehber yöntemin ekonomisini de anlatıyor: hızla birden çok prototip yapılıp sınanabiliyor ve iyi sonuç vermeyenler atılabiliyor.

Faydaları da maddeler hâlinde sayılıyor: hizmetin kullanılabilirliğini artırıyor, kullanıcılar için doğru hizmeti inşa ettiğinizden emin olmanıza yardım ediyor, bütün ekibin hizmetin geleceği hakkında ortak bir anlayışa varmasını sağlıyor ve tasarım fikirlerini üretim kodu kullanmaktan çok daha hızlı ve düşük riskle keşfetmeye imkân veriyor.

• Amaç: İnşa etmeden önce keşfetmek ve sınamak.
• Kazanç: Hız, düşük risk, ortak anlayış.
• Yöntem: Çok sayıda deneme, kötü sonuç verenleri elemek.

Hangi aşamada kullanılıyor?​

Rehber prototiplerin zamanlamasını da belirliyor. Hizmetin tasarımına yönelik farklı yaklaşımları keşfetmek ve sınamak için alfa aşamasında prototip kullanılması gerekiyor.

Kullanım burada bitmiyor: beta ve canlı aşamalarda da olası yeni özellikleri veya iyileştirmeleri keşfetmek için prototip yapılmaya devam ediliyor.

Yani mockup tek seferlik bir başlangıç adımı değil; her yeni karar öncesinde tekrarlanan bir alışkanlık.

Püf nokta' Alıntı:

Prototip yalnız ilk tasarım için değil; sonradan eklenecek her özellik için de aynı işi görüyor.

Genişletmek için tıkla ...

Kâğıt mı, kod mu?​

Rehber prototiplerin biçim olarak değiştiğini söylüyor: hızlı bir kâğıt kalem eskizinden, tam etkileşimli bir web sitesi gibi çalışan kod prototipine kadar.

Seçim ihtiyaca göre yapılıyor. Rehbere göre eskizler temel fikirleri keşfetmek ve iş arkadaşlarıyla tartışmak için yararlı; kod prototipleri ise daha gerçekçi oldukları için kullanıcı araştırması açısından daha iyi.

Kod prototipinin üstünlükleri de sıralanıyor: gerçeğine neredeyse birebir benziyor ve mobilde de masaüstünde de öyle davranıyor, bu yüzden test edilen kullanıcılar daha az dikkati dağılıyor; web için tasarlamanın kısıtları sürekli görünür kalıyor; bütün ekibin tasarım fikirleri konusunda ortak anlayışa varması kolaylaşıyor.

Rehber önemli bir muafiyet de tanıyor: prototipteki kodun üretim kodu ile aynı standartları karşılaması gerekmiyor.

Neyi sınamak istiyorsunuz?​

Prototipin biçimini belirleyen şey soru. Yerleşim mi tartışılıyor, görsel dil mi kararlaştırılıyor, yoksa bir akışın tamamlanıp tamamlanmadığı mı ölçülüyor?

Rehberin eskiz-kod ayrımı bu üç soruya farklı yanıtlar veriyor. Yerleşim tartışmasında kâğıt yeterli oluyor ve saatler yerine dakikalar alıyor. Akışın sınanmasında ise kullanıcıyı gerçek davranışa yaklaştıran bir temsil gerekiyor.

Aradaki fark maliyette de görünüyor. Yanlış yerleşim kâğıtta bulunursa yeni bir çizim yapılıyor; aynı hata üretim kodunda bulunursa geliştirme, test ve yayın döngüsünün tamamı tekrarlanıyor.

Rehberin "üretim kodu kullanmaktan çok daha hızlı ve düşük riskle" ifadesi tam bu hesaba işaret ediyor.

Kullanıcıya ne zaman gösteriliyor?​

W3C'nin erişilebilirlik girişiminin kullanıcıları projelere dahil etme rehberi prototipin araştırmadaki yerini gösteriyor: tasarım ve geliştirme boyunca kullanıcılardan prototipleri incelemesini isteyin.

Rehber yöntemi de tarif ediyor: kullanıcılara tamamlamaları için belirli görevler verin ve tasarımın ile kodlamanın farklı yönlerinin nasıl iyileştirilebileceğini görün. Bol soru sorulması öneriliyor.

Aynı sayfa bir uyarı da içeriyor: bütün geri bildirimleri dikkatle değerlendirin ve bir kişiden gelen görüşün bütün engelli kullanıcılar için geçerli olduğunu varsaymaktan kaçının.

Mockup, wireframe, prototip​

Üç kavram birbirine karışıyor ama işlevleri farklı. Kaba çizim yapıyı ve yerleşimi tartışmaya yarıyor; mockup görsel kararları gösteriyor; prototip ise etkileşimi sınıyor.

Rehberin eskiz ile kod prototipi ayrımı da bu ölçeği yansıtıyor: soru "neyi tartışmak istiyorum" olduğunda kâğıt yetiyor, soru "kullanıcı bunu yapabiliyor mu" olduğunda etkileşim gerekiyor.

Yapı tarafındaki ilk adımı wireframe yazımızda ele almıştık. Bu çalışmaların ekiple birlikte nerede yürütüldüğünü Figma yazımızda anlatmıştık.

Prototipte anlaşılan davranışın teslimde ölçülebilir hâle gelmesi ise ayrı bir adım; bunu kabul kriteri yazımızda toplamıştık.

Sık Sorulan Sorular​

Mockup nedir?
İnşa etmeye karar vermeden önce tasarımı görmek, paylaşmak ve sınamak için yapılan temsil.

Ne zaman yapılıyor?
Rehber alfa aşamasında zorunlu tutuyor; beta ve canlı aşamalarda yeni özellikler için sürdürülüyor.

Kâğıt eskiz yeterli mi?
Temel fikirleri tartışmak için yararlı; kullanıcı araştırmasında kod prototipi daha gerçekçi sonuç veriyor.

Prototip kodu kaliteli olmalı mı?
Rehbere göre prototip kodunun üretim koduyla aynı standartları karşılaması gerekmiyor.

Kullanıcı testinde nasıl kullanılıyor?
W3C rehberi kullanıcılara belirli görevler verilmesini ve prototipi incelemelerinin istenmesini öneriyor.

Özetle​

Mockup ve prototip, kod yazmadan önce kararları görünür kılıyor. Resmî rehber bunu zorunlu bir adım sayıyor: önce keşfet, sına, kötü fikri at. Biçim kâğıttan kodlu prototipe kadar değişiyor ve seçim soruya göre yapılıyor. Kullanıcıya gösterilirken belirli görevler verilmesi, gelen geri bildirimin de tek kişiye indirgenmemesi öneriliyor.

Son ekranınızı kodlamadan önce kaç farklı denemeyi elediniz?

Güncelleme: 2 Eylül 2026. GOV.UK Hizmet El Kitabı ve W3C WAI kullanıcı katılımı rehberi kontrol edildi.

---