Web Sitesi Tasarım Denetimi: Referansla Karşılaştırma

Elinizde çalışan bir site var, fena da değil, ama sektörünüzdeki iyi sitelerin yanında sönük kalıyor. Nerede takıldığını sorduğunuzda kimse net cevap veremiyor — siz de dahil. Bu yazıda o farkı somut maddelere çeviren bir yöntemi anlatıyorum: sitenizi seçtiğiniz bir referansla karşılaştırıp ölçülebilir bir fark raporu çıkarmak.

Neden kendi sitenizin sorununu göremiyorsunuz?

Sorun görme değil, tarif etme. Bir tasarımın iyi olduğunu anlıyorsunuz ama nedenini söyleyemiyorsunuz. "Daha ferah duruyor", "daha profesyonel" gibi cümleler kalıyor elinizde.

Bu, yapay zekâyla çalışırken doğrudan bir engele dönüşüyor: tarif edemediğiniz şeyi model düzeltemez. "Daha iyi yap" isteğine karşılık rastgele değişiklikler alıyorsunuz, çünkü ortada bir hedef yok.

Karşılaştırmalı denetimin çözdüğü şey tam olarak bu. Sezginizi sayıya çeviriyor.

Farkın nerede olduğunu belirleyen beş eksen

Deneyimime göre iki site arasındaki "açıklanamayan" fark neredeyse her zaman şu beşinden birinde çıkıyor:

• Tipografi — yazı tipi seçimi, harf aralığı, satır yüksekliği, başlık-gövde oranı.
• Görsel dil — fotoğraf mı illüstrasyon mu, üretilmiş mi stok mu, tutarlı mı dağınık mı.
• Hiyerarşi — göz önce nereye gidiyor, ikinci nereye. İyi sitelerde bu tesadüf değil.
• Renk — palet genişliği, kontrast, aksan renginin ne sıklıkta kullanıldığı.
• Boşluk — öğeler arası nefes, bölüm aralıkları, kenar boşlukları.

Denetimin işi, bu beş eksende iki siteyi yan yana koymak.

Karşılaştırmalı denetim nasıl yapılır?

Dört adım:

1. Doğru referansı seçin. Kendi sektörünüzden ya da benzer bir kullanıcı kitlesine hitap eden, gerçekten iyi tasarlanmış bir site bulun. Ödüllü site galerileri ve tasarım sistemi arşivleri bunun için ideal. Bazı arşivler siteyi analiz edip renk paletini, tipografi ölçeğini ve tasarım değişkenlerini de birlikte veriyor — bu, karşılaştırmayı ciddi biçimde kolaylaştırıyor.

2. İki tarafı da verin. Kendi sitenizin adresini ve referansın adresini birlikte verin. Sadece "sitemi iyileştir" demeyin; karşılaştırma isteyin.

3. Acımasız olmasını isteyin. Modeller varsayılan olarak nazik. Açıkça "acımasız ol, kibarlık yapma" demezseniz genel geçer övgüyle karışık öneriler alıyorsunuz.

4. Somut çıktı isteyin. İstediğiniz şey "şunu iyileştirebilirsin" listesi değil; yan yana değerler. Sizin harf aralığınız ne, referansınki ne. Sizin köşe yarıçapınız kaç piksel, onunki kaç. Raporu kısa ve okunur bir HTML sayfası olarak istemek işi kolaylaştırıyor.

Denetim isteğini nasıl yazarsınız?

İsteğin yapısı sonucun kalitesini doğrudan belirliyor. Kendi kullandığım iskelet beş parçadan oluşuyor:

1. Rol ve ton: "Bir tasarım yönetmeni gibi bak ve acımasız ol." Bu cümle olmadan nazik ve işe yaramaz bir çıktı alıyorsunuz.
2. İki taraf: kendi adresiniz ve referansın adresi, hangisinin hangisi olduğu açıkça belirtilmiş.
3. Eksen listesi: tipografi, görsel dil, hiyerarşi, renk, boşluk. Serbest bırakırsanız model rastgele şeylere takılıyor.
4. Çıktı biçimi: "Her bulgu için: eksen, benim değerim, referansın değeri, etkisi." Ölçülmüş değer istemezseniz yorum alıyorsunuz.
5. Kapsam sınırı: "En fazla sekiz bulgu, etkiye göre sıralı." Sınır koymazsanız kırk maddelik, önceliksiz bir liste geliyor.

Dördüncü madde en kritiği. "Sitemi nasıl iyileştirebilirim" sorusu size genel tavsiye getirir; "iki sitenin harf aralığı değerlerini ölç ve yan yana yaz" sorusu size uygulanabilir bir sayı getirir.

Karşılaştırılacak somut değerler

Denetimin ölçmesini isteyeceğiniz değerler şunlar. Bu listeyi doğrudan isteğinize koyabilirsiniz:

Eksen	Ölçülecek değer
Tipografi	Başlık/gövde punto oranı, satır yüksekliği, harf aralığı, kullanılan font sayısı
Boşluk	Bölüm arası boşluk, taban ölçek değeri, kenar boşluğu
Renk	Palet genişliği, metin-arka plan kontrast oranı, aksan renginin kullanım sıklığı
Derinlik	Farklı gölge değeri sayısı, köşe yarıçapı sayısı
Hiyerarşi	Üst bölümdeki rekabet eden öğe sayısı, ana eylem çağrısı sayısı

Bu tabloyu doldurttuğunuzda elinizde tartışılacak bir şey değil, düzeltilecek bir liste oluyor.

Denetimin tipik olarak bulduğu şeyler

Bu yöntemi kendi projelerimde ve öğrencilerimin sitelerinde çalıştırdığımda tekrar tekrar çıkan bulgular:

• Harf aralığı fazla geniş. Özellikle büyük başlıklarda. Küçük bir değer değişikliği algılanan kaliteyi belirgin biçimde yükseltiyor.
• Yükselti merdiveni yok. Gölgeler ve katman derinlikleri rastgele; iyi sitelerde bunlar tanımlı bir ölçekten geliyor.
• Ana görsel ürünle yarışıyor. Üst bölümdeki büyük görsel dikkati çekiyor ama asıl mesajı bastırıyor.
• Satır yüksekliği dar. Gövde metni sıkışık duruyor, okuma yorucu oluyor.
• Aksan rengi fazla sık kullanılmış. Vurgu her yerdeyse hiçbir yerde vurgu yok demektir.
• Boşluk ölçeği tutarsız. Bölüm araları 40, 56, 72 gibi ilişkisiz değerlerden oluşuyor.

Bunların hiçbiri "tasarımı baştan yap" gerektirmiyor. Hepsi değer düzeyinde düzeltmeler ve toplam etkileri şaşırtıcı derecede büyük.

Bulguları nasıl önceliklendirirsiniz?

Rapor genelde uzun çıkıyor ve hepsini birden uygulamaya çalışmak yanlış. Benim sıralamam:

1. Tipografi. En yüksek etki/emek oranı burada. Yazı tipi, ölçek ve satır yüksekliği düzeldiğinde site zaten başka görünüyor.
2. Boşluk ölçeği. Tutarlı bir ölçeğe geçmek tek başına dağınıklığın çoğunu topluyor.
3. Hiyerarşi. Bir ekranda tek bir ana mesaj kalana kadar sadeleştirin.
4. Renk ve gölge. En son. Bunlar cila; alt katman bozukken cila işe yaramıyor.

Ve şunu unutmayın: raporda çıkan her maddeyi uygulamak zorunda değilsiniz. Bazı farklar bilinçli marka kararlarıdır. Referans daha iyi diye onun her kararı sizin için doğru değil.

Tek seferde tek değişken

Bulguları toplu hâlde uygulamak en yaygın hata. Sekiz şeyi birden değiştirdiğinizde sonuç iyileşse bile hangisinin işe yaradığını bilemiyorsunuz — ve kötüleşirse hangisini geri alacağınızı da.

Benim yöntemim: bir eksen değiştir, ekran görüntüsü al, öncekiyle yan yana koy, karar ver. Yavaş görünüyor ama toplamda daha hızlı, çünkü geri alma turları ortadan kalkıyor.

Bir de şunu ekleyeyim: değişiklikten sonra siteye birkaç saat sonra bakın. Bir düzenlemenin hemen ardından her şey iyi görünüyor; asıl değerlendirme göz alıştıktan sonra yapılıyor.

Referans seçerken dikkat edilecekler

• Tek referansa kilitlenmeyin. İki üç kaynakla karşılaştırın; yoksa denetim sizi o sitenin kopyasına doğru sürükler.
• Ölçeği benzer olsun. Devasa bir ürünün sitesiyle yeni kurulmuş bir işin sitesini karşılaştırmak yanıltıcı olabilir; onların çözdüğü sorunlar farklı.
• İlkeyi alın, varlığı değil. Boşluk ritmini ve kontrast yaklaşımını almak meşru; paletini, tipografisini ve görsel kimliğini birlikte almak kopyalamaktır.

Denetimin yakalayamadıkları

Bu yöntem görsel farkı ölçmekte iyi, ama sitenizin tamamını değerlendirmiyor. Dört alan kapsam dışında kalıyor ve bunları ayrıca bakmanız gerekiyor:

• Performans. Referans site daha ağır görseller kullanıyor olabilir. Tasarımı kopyalarken yükleme süresini de kopyalamak istemezsiniz.
• Erişilebilirlik. Kontrast oranı denetime giriyor ama klavye gezinimi, odak göstergeleri ve ekran okuyucu uyumu girmiyor.
• Mobil. Karşılaştırma genelde masaüstü görünümde yapılıyor. Trafiğinizin çoğu mobildeyse denetimi ayrıca dar ekranda tekrarlayın.
• İçerik stratejisi. Sayfada hangi bölümlerin olması gerektiği bir tasarım sorusu değil. Denetim size mevcut bölümlerin nasıl göründüğünü söyler, hangilerinin eksik olduğunu değil.

Kısacası denetim "nasıl görünüyor" sorusunu cevaplıyor; "doğru şeyi mi gösteriyor" sorusunu cevaplamıyor. İkincisi hâlâ sizin işiniz.

Sık sorulan sorular

Bu denetimi ne sıklıkla yapmalıyım?

Büyük bir güncelleme öncesi ve sonrası yeterli. Sürekli denetim, sürekli değişiklik demek; tutarlılık zaten kurmaya çalıştığınız şeyin kendisi.

Sadece ana sayfayı mı denetlemeliyim?

Ana sayfayla başlayın ama fiyatlandırma ve ürün sayfalarını da ekleyin. Tutarsızlıklar genelde ana sayfada değil, iç sayfalarda ortaya çıkıyor.

Rapordaki değerleri doğrudan uygulayabilir miyim?

Uygulayabilirsiniz ama körlemesine değil. Referansın 1.6 satır yüksekliği kendi yazı tipinizde farklı durabilir. Değeri alın, kendi tipografinizde gözle doğrulayın.

Denetim sonucunda çıkan değerleri kim uygulayacak?

Değerler somut olduğu için uygulaması çoğu zaman basit: yazı tipi ölçeğini, satır yüksekliğini ve boşluk değerlerini değiştirmek stil dosyasında birkaç satır. Karmaşıklaşan tek yer hiyerarşi bulguları — orada bölüm düzenini değiştirmeniz gerekebilir, bu da tasarım kararı gerektiriyor.

Tasarımcı yerine geçer mi?

Hayır. Bu yöntem farkı tespit etmede çok iyi, ama marka kararı vermede değil. Neye benzemek istediğinize siz karar veriyorsunuz; denetim yalnızca oraya ne kadar uzak olduğunuzu ölçüyor.

Özetle

"Bir şey eksik ama ne olduğunu bilmiyorum" hissi, tasarımda ilerlemeyi en çok yavaşlatan şey. Karşılaştırmalı denetim bu hissi ölçülebilir maddelere çeviriyor — ve maddeye dönüşen her sorun çözülebilir hâle geliyor. Tipografiden başlayın, boşlukla devam edin; renge en son bakın.