Kart Arayüzü Tasarımı: Okunabilirlik mi Estetik mi?

Bir kart oyununda arayüz, kuralların oyuncuya ulaştığı tek yüzeydir: kart okunmuyorsa oyun da anlaşılmıyor. Bu yazıda kart görseli, ikon seti, metin yoğunluğu ve elde kart dizilimi üzerine verdiğimiz kararları, bir de "oyuncu bu kartı bir bakışta anlıyor mu?" sorusunu ölçmek için kullandığımız yöntemleri anlatıyoruz; sonunda kendi tasarımınıza uygulayabileceğiniz bir kontrol listesi var.

"Bir bakışta anlamak" ölçülebilir bir şey mi?

"Okunabilir" kelimesi tek başına işe yaramıyor, çünkü herkes kendi tasarımını okunabilir sanır. Tasarımcı kartı yüz kere görmüştür; oyuncu ilk kez görür. Bu yüzden okunabilirliği fikir tartışması olmaktan çıkarıp gözlenebilir davranışa çevirmek gerekiyor. Kullandığımız dört basit ölçüm şu:

• Flaş testi: Karta yarım saniye kadar bakma izni verip ekranı kapatıyor, sonra "bu kart ne yapıyor?" diye soruyoruz. Yarım saniye, bir oyuncunun elindeki kartlara gerçekten ayırdığı süreye yakın. Cevap "sanırım bir şey topluyordu" ise kart bilgi hiyerarşisi kurmuyor demektir.
• Geri anlatma (tell-back): Oyuncu kartı kendi kelimeleriyle anlatıyor. Kartın metnini ezberden tekrar ediyorsa değil, kuralı doğru ama farklı kelimelerle anlatıyorsa kart anlaşılmıştır.
• İlk dokunuşa kadar geçen süre: Sıra oyuncuya geçtikten sonra ilk karta dokunana kadar geçen süreyi kaydediyoruz. Bu süre stratejik düşünmeyi de içerir, ama aynı el aynı kurallarla iki farklı kart tasarımıyla oynandığında aradaki fark büyük ölçüde okuma maliyetidir.
• Yanlış dokunuş oranı: Oyuncunun oynamak istediği kart ile dokunduğu kart aynı mı? Bu bir okunabilirlik değil, dizilim ve dokunma hedefi problemi; ikisini ayırmak önemli çünkü çözümleri farklı.

Bunların hiçbiri laboratuvar düzeneği gerektirmiyor. Telefonun ekran kaydı, bir zamanlayıcı ve yanınızda oyunu ilk kez gören biri yeterli. Zor kısım ölçmek değil, sonucu kabul etmek: sevdiğiniz eskizin testte yavaşlattığını görmek.

Kart yüzünde üç katmanlı bilgi hiyerarşisi

Kart yüzünü tek bir kompozisyon gibi değil, üç katman gibi düşünmek işleri kolaylaştırdı:

1. Kimlik katmanı: Kartın ne olduğunu uzaktan, örtülü haldeyken bile söyleyen şey. Genelde renk + form kombinasyonu.
2. Değer katmanı: Sayı, tür, seviye gibi karşılaştırma yapılan bilgi. Oyuncu kartları sıralarken sadece bu katmana bakar.
3. Detay katmanı: Kural metni, açıklama, çelişkili durumlar. Yalnızca kart büyütüldüğünde veya basılı tutulduğunda gerekli.

Hata yaptığımız yer genellikle ikinci ve üçüncü katmanın birbirine karışması oluyordu. Kural metni kart yüzünde büyütülünce değer katmanıyla aynı görsel ağırlığa geliyor ve oyuncu, sıralama yapmak için bakarken metni okumaya başlıyor. Değer katmanının detay katmanından en az iki kat daha güçlü olması gerekiyor: punto, kontrast veya konum farkı yaratmak zorundasınız.

Kart Üçlüsü gibi klasik ve gündelik bir kart oyununda bu ayrım daha da kritik, çünkü oyuncu kuralı zaten biliyor; arayüzden beklediği tek şey mevcut durumu hızlıca taramak.

İkonografi: siluet testinden geçmeyen ikon çizim değildir

İkonlarda üç kural bize en çok zaman kazandırdı:

• Siluet testi: İkonu tamamen tek renk siyaha çevirin. Ayırt edilemiyorsa iç detaylar boşuna çizilmiş. Kart üstünde ikon 20-28 piksel civarında görünür; o boyutta iç detay yok, yalnızca dış hat vardır.
• Renk tek başına anlam taşımaz: Renk her zaman bir form farkıyla eşleşmeli. Yalnızca renkle ayrılan iki ikon, renk görme farklılığı olan oyuncular için aynı ikondur. Ekran görüntüsünü gri tonlamaya çevirmek bunu iki saniyede gösterir.
• Kontrast eşiği: Metin ve metin gibi davranan küçük sayılar için WCAG'nin AA seviyesinde istediği 4.5:1 kontrast oranını alt sınır kabul ediyoruz (W3C, SC 1.4.3). Oyun arayüzleri bu standarda uymak zorunda değil, ama güneş altında telefonla oynanan bir oyun için bu oran lüks değil zorunluluk.

Testte en çok yavaşlatan ikon seti, "birbirine ait görünsün" diye hepsini aynı çerçeve içine aldığımız versiyondu. Estetik olarak tutarlıydı; işlevsel olarak felaketti, çünkü ortak çerçeve dış hatları eşitleyince siluetler birbirine benzedi. Tutarlılık, ayırt edilebilirliği yiyorsa tutarlılık değil gürültüdür.

Metin yoğunluğu: kelime bütçesi koyun

Kart metni için sayısal bir bütçe koymak, sonsuz tartışmayı bitiren en pratik karar oldu. Kart yüzünde kural metni varsa üst sınırı belirleyin ve sığmayan her metni kartın kendisinin değil, tasarımın problemi sayın. Sığmayan metni küçültmek en kötü çözüm; sığmayan metin genelde kartın çok fazla iş yaptığının işaretidir.

İşe yarayan somut dönüşümler:

• Cümleyi sayıya çevirin: "Rakibinizin elindeki kartlardan birini alır" yerine ikon + 1.
• Aynı anlamı her kartta aynı kelimelerle yazın. Eşanlamlı kullanmak edebiyatta iyi, arayüzde pahalıdır: oyuncu her yeni kelimeyi yeni bir kural sanır.
• İstisnaları kart yüzünden çıkarıp basılı tutma detayına taşıyın. Oyuncuların yüzde biri o istisnayı arıyor, yüzde doksan dokuzu her turda o metnin üzerinden atlıyor.

Elde kart dizilimi: yelpazenin matematiği

Elde kart dizilimi, okunabilirlikten çok dokunma hedefiyle ilgili bir problem. Kart sayısı arttıkça örtüşmeyi artırmak zorundasınız, ama her kartın görünen şeridi bir parmağın güvenle isabet edebileceği genişliğin altına düşmemeli. Apple'ın arayüz kılavuzu dokunulabilir öğeler için en az 44x44 pt öneriyor (Apple HIG, Accessibility); yelpazede bu, kartın tamamı değil görünen şeridi için geçerli sayılmalı.

Aşağıdaki fonksiyon bu kısıtı doğrudan hesaba katıyor: ideal aralığı hesaplıyor, sonra minimum görünür şerit ile kart genişliği arasına kırpıyor.

public struct CardSlot { public Vector2 Position; public float Angle; }

// handWidth, cardWidth, minVisible: aynı birimde (ör. dünya birimi veya piksel)
public static CardSlot[] LayoutHand(int count, float handWidth, float cardWidth,
                                    float minVisible, float maxSpread, float arcHeight)
{
    var slots = new CardSlot[count];
    if (count == 0) return slots;
    if (count == 1)
    {
        slots[0] = new CardSlot { Position = Vector2.zero, Angle = 0f };
        return slots;
    }

    float ideal = (handWidth - cardWidth) / (count - 1);
    float step  = Mathf.Clamp(ideal, minVisible, cardWidth); // şerit hep tıklanabilir
    float startX = -step * (count - 1) * 0.5f;

    for (int i = 0; i < count; i++)
    {
        float t = i / (float)(count - 1);        // 0..1
        float u = 2f * t - 1f;                   // -1..1
        slots[i] = new CardSlot
        {
            Position = new Vector2(startX + step * i, arcHeight * (1f - u * u)),
            Angle    = -u * maxSpread * 0.5f     // uçlarda maksimum eğim
        };
    }
    return slots;
}

İki detay testte fark yarattı. Birincisi, kartların hangi yönde örtüştüğü: sağ elle oynayan oyuncular için sol kartın sağ kartın altında kalması, görünen şeridin başparmağın geldiği tarafta olmasını sağlıyor. İkincisi, seçili kartın büyütülmesi: kartı yukarı kaydırmak yeterli, ayrıca ölçeklendirmek komşu kartların dokunma alanını bozuyor ve yanlış dokunuş oranını artırıyor.

Test oturumlarında oyuncuyu yavaşlatan tasarımlar

Sürekli aynı beş desen karşımıza çıktı:

• Dolu illüstrasyon arka planı: Kartın arkasındaki resim ne kadar iyiyse üstündeki sayıyı o kadar geciktiriyor. Çözüm resmi silmek değil, sayının arkasına düz bir alan açmak.
• Merkeze konumlanmış değer: Yelpazede kartların ortası örtülür. Değer, kartın örtülmeyen köşesinde olmalı.
• Yumuşak/ince yazı tipleri: Küçük puntoda düşük kontrastlı ince fontlar okuma süresini uzatıyor. Kart üstündeki sayılar için kalın ve kısa gövdeli fontlar daha güvenli.
• Aynı ailedeki fazla ikon: Beş benzer ikon, beş farklı ikondan daha yavaş ayırt ediliyor.
• Animasyonlu vurgu: Nabız gibi atan bir çerçeve, oyuncunun taramasını kesiyor. Vurgu statik olmalı; hareket yalnızca durum değiştiğinde bir kez.

Eskizden ekrana: iterasyonu ucuza yapmak

Kart tasarımını üç aşamada test etmek en az iş çıkaran yol oldu:

1. Kağıt eskiz: Kartın gerçek fiziksel boyutunda, kalemle. Bu aşamada sadece hiyerarşi test edilir: neyi ilk görüyorsunuz?
2. Gri blok: Renk ve illüstrasyon yok, sadece gri dikdörtgenler ve gerçek punto. Bu versiyon flaş testini geçemiyorsa renkli hali de geçmez, renk sadece geçici olarak dikkat toplar.
3. Cihazda, küçük ölçekte: Ekran görüntüsünü yüzde 25'e küçültün veya hafif bulanıklaştırın. Kimlik ve değer katmanı hâlâ okunuyorsa tasarım sağlamdır.

Okunabilirlik mi, estetik mi?

Bu ikilem çoğu zaman yanlış kurulmuş bir ikilem: çatışma estetikle okunabilirlik arasında değil, dekorasyonla okunabilirlik arasında. Bir kart setinin karakteri renk paletinden, kart çerçevesinin biçiminden, arka yüzden ve tipografiden gelir; bunların hiçbiri sayıyı geciktirmek zorunda değil.

Karar verirken şu sırayı kullanıyoruz: kartın kimliği ve değeri hiçbir koşulda pazarlık konusu değil, detay katmanı ise gerektiği kadar sanatsal olabilir. Bir kararın hangi kategoriye girdiğinden emin değilseniz flaş testine sokun; yarım saniye çoğu tartışmayı bitiriyor. Kart Üçlüsü'nde bu yaklaşım, gündelik oyuncunun kartlarına bakıp hamlesini düşünmeye ayırdığı süreyi okuma değil karar verme süresi yapmayı hedefliyor.

Kontrol listesi

• Kartı gri tonlamada ayırt edebiliyor musunuz?
• İkonlar tek renk siluete indirgendiğinde farklı mı?
• Değer, yelpazede örtülmeyen bölgede mi?
• Görünen şerit, parmakla güvenle dokunulabilir genişlikte mi?
• Kart metni sabit bir kelime bütçesinin altında mı?
• Oyunu ilk kez gören biri yarım saniyelik bakıştan sonra kartı doğru anlatabiliyor mu?

Son madde diğer beşinin yerini tutar. Kalan beşi, o maddeye neden takıldığınızı söyler.