Ünlü Sitelerin Tasarımını Kopyalamak: Neyi Devraldığınız

Bir arayüzü kopyalamak, o arayüzün kararlarını değil sonuçlarını almaktır. Ekranda gördüğünüz düzenin arkasında sizin bilmediğiniz bir katalog büyüklüğü, bir trafik dağılımı ve yıllara yayılmış testlerin artığı var. Kopyalanabilen kısım, en yüzeysel kısım.

Kopyalanan şey düzen değil, varsayımlar

Büyük bir e-ticaret sitesinin kategori sayfasını düşünün: solda on iki katmanlı filtre, üstte çok kolonlu mega menü, altta sonsuz kaydırma. Bu düzen kırk bin ürünlü bir katalog için mantıklı, çünkü kullanıcının işi listeyi daraltmak. Aynı düzeni altmış ürünlü bir sitede kurduğunuzda filtrelerin çoğu ya tek sonuç döner ya boş kalır. O ölçekte kullanıcı daraltmak istemez, gezinmek ister ve düz bir liste filtreden hızlı çalışır.

Ölçek değişince doğru arayüz de değişir. Kopyalama kararı ise ölçeği sormaz, ekran görüntüsüne bakar.

Kayıt ile giriş formunun ayırt edilemediği yer

Rezervasyon sitelerinde uzun süre tekrarlanmış bir hata var: giriş ve kayıt formları aynı görsel ağırlıkta, yan yana, aynı buton stiliyle duruyor. Kullanıcı hesabı olduğunu bilerek geliyor, kayıt alanına yazıyor, "bu e-posta zaten kayıtlı" hatasını alıyor. Mesaj doğru, deneyim bozuk.

Bu ekranın çözümü ikisini eşit göstermemek. Sayfada tek bir baskın eylem olur, diğeri ikincil bir bağlantıya iner. Kopyalarken böyle bir hatanın da geldiğini fark etmezsiniz, çünkü örnek aldığınız site o hatayı hâlâ taşıyor olabilir.

Bileşeni alırsınız, bakım borcu da gelir

Bir mega menüyü görsel tercih saymam. Klavyeyle gezilebilmesi, menü kapandığında odağın tetikleyici öğeye dönmesi, ekran okuyucuda anlamlı bir yapı sunması ve mobilde tamamen başka bir bileşene dönüşmesi gerekir; yani bakımı süren bir iş.

Kopyalanan arayüz çoğunlukla HTML ve CSS olarak alınır, davranış katmanı eksik kalır. Ortaya fareyle çalışan, klavyeyle çalışmayan bir menü çıkar. Erişilebilirlik sonradan eklenen bir cila değil, bileşenin tanımının parçası.

SEO tarafında ne olur, ne olmaz

Kopyalamanın SEO zararı çoğu yazıda hemen çıkma oranı üzerinden anlatılır. Hemen çıkma oranı bir sıralama sinyali değil, sayfa deneyimi tarafında ölçülen şey Core Web Vitals gibi doğrudan hesaplanabilen metrikler. Gerçek maliyet başka yerde: hazır bir düzeni kendi içeriğinize uydurmak için eklenen ek script ve font katmanı LCP'yi bozar, kullanılmayan CSS şişer.

İkinci maliyet içerik tarafında. Rakibin sayfa iskeletini alırsanız onun içerik hiyerarşisini de alırsınız ve sizin güçlü olduğunuz konu sayfada ikinci planda kalır.

İlham almanın işleyen biçimi

Bir tasarımı incelerken sorulacak soru "nasıl görünüyor" değil, "hangi problemi çözüyor". Sırası şöyle:

1. O sitenin ana işini belirleyin: arama mı, keşif mi, tek adımlık satın alma mı?
2. Kendi sitenizin ana işiyle karşılaştırın. Aynı değilse düzenin büyük kısmı size uymaz.
3. Yalnızca işlevi taşıyın: bilginin sırası, adım sayısı, hangi bilginin hangi ekranda durduğu. Renk, tipografi ve bileşen stili kendi kimliğinizden gelir.

Kopyalamanın meşru olduğu bir alan da var, orada kopyalamamak hata: yerleşik kalıplar. Sepet ikonu sağ üstte, arama kutusu üstte, logo ana sayfaya bağlı, form hatası alanın hemen altında. Bunlar kullanıcının başka sitelerde öğrendiği bilgi, farklı yapmak yaratıcılık değil öğrenme maliyeti. Ayrım şurada: kalıp kopyalanır, düzenin tamamı kopyalanmaz.