Web Tasarım Hataları: Klasik Listenin Eskiyen ve Eskimeyen Maddeleri
Web tasarım hataları listeleri birbirinin kopyası gibidir: kötü site içi arama, PDF olarak yayımlanan içerik, rengi değişmeyen ziyaret edilmiş linkler, izinsiz açılan yeni sekmeler. Maddelerin çoğu hâlâ doğru. Ama bir kısmı, yazıldıkları tarihten sonra tarayıcılar değiştiği için artık ilk anlamıyla çalışmıyor. Listeyi ezberlemek yerine her maddenin bugün hangi nedenle geçerli olduğuna bakmak daha işe yarıyor.
Site içi arama aslında sizin araştırma aracınız
Arama kutusuna dokunan ziyaretçi, menüde bulamadığı bir şeyi arıyordur ve niyeti nettir. Bu yüzden arama kutusunun asıl değeri, kullanıcıya sunduğu kolaylıktan çok, size bıraktığı kayıtta.
Sorgu loglarını açıp sonuç dönmeyen aramalara bakın. O liste, sitenin vaat ettiği ama karşılamadığı şeylerin dökümüdür. Aynı sorgu haftalarca boş dönüyorsa sorun arama motorunda değil; ya o içerik hiç yok ya da siz ona müşterinin kullanmadığı bir isim vermişsiniz. "Kargo takip" diye aranan şeye sitede "Gönderi Sorgulama" diyorsanız arama kutusu size bunu söyler, analitik söylemez.
Bunun tersi de var: on iki sayfalık kurumsal sitede arama kutusu dekordur. İndeksleyecek içerik yoksa kutuyu koymayın, menüyü düzeltin.
PDF yasağı topyekûn uygulanmaz
"İçeriği PDF olarak verme" kuralı, makalesini, hizmet tanıtımını, hatta iletişim bilgisini PDF'e gömen siteler için doğru. Tarayıcıda PDF açmak sekmeyi ele geçirir, mobilde satır sonlarını takip etmek işkenceye döner, arama motoru içeriği zar zor değerlendirir.
Ama kural bir yerde duruyor. Basılmak ya da arşivlenmek üzere üretilmiş belgeler için PDF tam olarak doğru biçimdir: fiyat listesi, teknik föy, sözleşme, garanti belgesi, ürün kataloğu. Ölçüt basit. Bunu biri yazdıracak mı, e-postaya ekleyecek mi, bir yıl sonra aynı sayfa numarasıyla mı arayacak? Cevap evetse PDF kalsın. Değilse o bir web sayfasıdır ve PDF onu sadece saklamaktadır.
Ziyaret edilen link rengi: kuralın kendisi eskidi
Klasik tavsiye şudur: ziyaret edilmiş bağlantıların rengi değişsin ki kullanıcı nereye baktığını hatırlasın. Tarayıcıların varsayılanı zaten bunu yapıyordu, mavi (#0000EE) ziyaret edilince mora (#551A8B) dönüyordu.
Sonra iki şey oldu. Birincisi, tasarımcılar mor linki çirkin bulup :visited stilini markanın rengiyle ezdi ve ayrım fiilen ortadan kalktı. İkincisi ve daha önemlisi, 2010'da Firefox'un başlattığı, ardından bütün büyük tarayıcıların uyguladığı gizlilik kısıtı geldi. Bir sayfa, JavaScript ile linkin gerçekten ziyaret edilip edilmediğini okuyup kullanıcının geçmişini sızdırabiliyordu.
Kısıt şöyle işliyor: :visited ile artık yalnızca renk grubundaki özellikleri değiştirebilirsiniz. color, background-color, kenarlık renkleri ve outline-color. Kalınlık, alt çizgi kalınlığı, arka plan görseli, content ile eklenen ikon, hiçbiri çalışmaz. Üstelik getComputedStyle size her zaman ziyaret edilmemiş halin değerini döndürür, yani kendi kodunuzla test ederken de yalan söyler.
Pratik sonucu şu: tasarım sisteminiz durumları ikonla ya da çizgi kalınlığıyla ayırıyorsa, ziyaret edilmiş link kuralını uygulayamazsınız. Yapabileceğiniz tek şey, biraz solmuş bir renk tonu vermek. Burada listenin kendi içinde bir çelişki de var. Aynı listeler "yerleşik konvansiyonları bozma" der; oysa mor ziyaret edilmiş link bugün artık konvansiyon değil, istisnadır. İki kural aynı anda tutulamıyor ve ben renk tarafını seçmekten yanayım: uzun içerik listelerinde, arşivlerde ve arama sonuçlarında hafif bir ton farkı gerçekten işe yarıyor, kurumsal bir sitenin beş linkli menüsünde ise kimsenin umurunda değil.
Yeni sekmede açmak ne kadar sorun
Bu maddenin bir ayağı düştü. target="_blank" eskiden hem kullanıcı deneyimi hem güvenlik meselesiydi; açılan sayfa window.opener üzerinden kaynak sekmeyi başka bir adrese yönlendirebiliyordu. Tarayıcılar 2020-2021 aralığında _blank için noopener davranışını varsayılan yaptı. Güvenlik argümanı bitti.
Geriye kontrol meselesi kalıyor, o da yerine göre değişiyor. Site içi gezinmede yeni sekme açmak savunulamaz, kullanıcı geri tuşunu kaybeder. Buna karşılık formu yarım dolduran birine sözleşme metnini aynı sekmede açarsanız yazdıklarını çöpe atarsınız; orada yeni sekme doğru karardır. Ekran okuyucu kullananlar için ise sekme değişimi sessiz gerçekleşir, bu yüzden dışarı açılan bağlantıyı link metninde ya da aria-label içinde belli etmek gerekir.
Reklama benzeyen her şey görünmez olur
Kullanıcılar reklam biçimindeki alanları öğrenip taramayı bırakır. Bunun bilinen ama sık atlanan tarafı, filtrenin sizin kendi içeriğinizi de yutması. Duyurunuzu sağ kolona banner ölçülerinde bir kutu olarak koyduğunuzda, içinde kampanya da olsa görülmez. Kutuyu değil, yerleşimi değiştirmek gerekir: mesaj içeriğin akışına girmeli.
Pop-up tarafında ölçü, kapatma maliyetidir. Kapat düğmesi ilk bakışta bulunuyorsa ve pencere sayfa yüklenir yüklenmez değil, okuma başladıktan sonra çıkıyorsa katlanılabilir. Gizlenmiş bir çarpı, mobilde ekranın tamamını kaplayan bir katman ve "hayır, indirim istemiyorum" yazdıran bir düğme, kalmayacak ziyaretçiyi biraz daha erken uğurlar.
Okunabilirlik ve sayfa başlıkları
Metin tarafında ölçülebilir iki şey var. Satır uzunluğu 45 ile 75 karakter arasında kalsın, tam genişlik paragraflar gözün satır başını bulmasını zorlaştırır. Gövde metni 16 piksel altına inmesin, mobilde 16 pikselin altındaki alan girişleri iOS Safari'de sayfayı otomatik yakınlaştırır ve düzeni bozar.
Sayfa başlığında ise karakter saymak yanıltıcı. Google başlığı karakter sayısına göre değil, yaklaşık 600 piksellik bir genişliğe göre kırpar; büyük harfle yazılmış kısa bir başlık, küçük harfli uzun bir başlıktan önce kesilebilir. Ayırt edici kelimeyi başa alın, marka adını sona bırakın. Her sayfaya aynı başlığı veren şablon, en sık rastlanan ve en kolay düzeltilen hatadır.
Listeyi nasıl okumalı
Bu maddeler tek bir küme değil, iki ayrı küme. Bir yanda insan algısına bağlı olanlar var: okunabilirlik, reklam körlüğü, tanıdık yerleşim, sorulara cevap veren içerik. Bunlar yavaş eskir, on yıl önce doğruysa bugün de büyük ölçüde doğrudur. Öbür yanda platform davranışına bağlı olanlar var: ziyaret edilmiş link stilleri, sekme açma, PDF görüntüleyiciler, arama davranışı. Bunların ömrü bir tarayıcı sürümü kadar.
Bir tavsiyeyi uygulamadan önce hangi kümede olduğuna bakın. İkinci kümedeyse kaynağın tarihine bakmadan uygulamayın.
Kaynaklar