Blog Yazısı · Web Tasarım

404 Sayfa Tasarımı: Kaybolanı Göreve Döndürün

KepezWeb Ekibi 8 dk okuma Web Tasarım
404 Sayfa Tasarımı: Kaybolanı Göreve Döndürün

Kırık bağlantı veya silinmiş sayfa, ziyaretçiyi şakayla avutmaz; yolunu kaybettiğini hissettirir. 404 sayfa tasarımı, arama kutusu, popüler yollar ve tek net çıkışla bu anı bir kurtarma ekranına çevirir. Bu rehberde espri görseli yerine göreve dönen bir hata sayfasını nasıl kuracağınızı adım adım göreceksiniz.

Yanlış yazılmış bir URL, kalkmış bir ürün veya eski bir kampanya bağlantısı; ziyaretçi bir anda kaybolur. 404 sayfa tasarımı bu kaybı illüstrasyonla örtmek değil, kişiyi arama, popüler yollar ve net bir çıkışla göreve döndürmektir. Hata anında okuyucu mizah beklemez; nerede olduğunu ve sıradaki adımı görmek ister. Ekranın işi kısa bir kabul cümlesi kurmak, arama alanını öne almak ve ana sayfa ya da kategori gibi güvenli bir yolu görünür kılmaktır.

Bu rehber, 404 ekranını bir mizah afişi olmaktan çıkarıp arama, sık kullanılan yollar ve tek bir birincil eylem etrafında nasıl kuracağınızı anlatır. Amaç kişiyi sitede zorla tutmak değil; başladığı işe mümkün olan en kısa yoldan geri vermektir.

404 sayfa tasarımı neden bir kurtarma ekranıdır

Ziyaretçi siteye bir görevle gelir: ürün bulmak, hizmet okumak, form doldurmak, siparişi izlemek. 404 bu görevi keser. Kesinti anında ekran iki iş yapabilir. Ya dikkat dağıtır ya da görevi yeniden kurar. Kurtarma ekranı ikinciyi seçer.

Kurtarma, üç parçalı bir cümledir. Önce durumu adlandırırsınız: bu adres artık yok. Sonra araç sunarsınız: ara, seç, çık. En sonda tek bir birincil yol bırakırsınız. Bu yol çoğu sitede ana sayfa, vitrin veya en işlek kategori olur. İkincil yol iletişim veya yardım olabilir; üçüncü bir düğme nadiren gerekir.

404, boş durum ekranından farklıdır. Boş durumda henüz veri yoktur ve kullanıcı çoğu zaman doğru yerdedir. 404’te adres yanlıştır veya içerik kalkmıştır. Bu yüzden “henüz bir şey yok, oluştur” dili burada işlemez. Dil “aradığınız yer burada değil, şuradan devam edin” olmalıdır.

Hata sayfasının başarısı gülünç bir görsel değil; kaybolan kişinin bir sonraki tıklamayı tereddütsüz yapmasıdır.

KepezWeb projelerinde bu sayfayı kampanya yüzeyi değil, görev kurtarma yüzeyi olarak ele alırız. Marka sesi sıcaktır; fakat sıcaklık, şaka anlatmak zorunda olmak anlamına gelmez.

Espri görseli neden görevi kaçırır

Kayıp astronot, kırık robot, kahve döken kedi: bu kalıplar tanıdıktır çünkü tasarımın asıl kararını erteler. Mizah, sinirli veya aceleci bir okuyucuda çoğu zaman boşluk doldurur. Görsel büyük, metin küçük, arama yoksa kişi gülmeden önce vazgeçer.

Espri üç yerde özellikle zarar verir. Birincisi, dil ve kültür kayması: iç espri çeviride ve farklı yaş gruplarında anlaşılmaz. İkincisi, tekrar: sık 404 üreten bir sitede aynı şaka ikinci kez yorgunluk üretir. Üçüncüsü, erişim: anlamı yalnızca görselde duran bir mesaj, ekran okuyucuda veya yavaş bağlantıda kaybolur.

Görseli yasaklamak zorunda değilsiniz. Destekleyici, sakin ve metni ezmeyen bir illüstrasyon durabilir. Ölçü şudur: görseli kaldırsanız da başlık, arama ve çıkış tek başına işini görür mü? Görmüyorsa süs, görevden önde gidiyordur.

Marka tonunu korumak da mizah zorunluluğu değildir. Kısa, düz ve nazik bir cümle çoğu kurumsal sitede şakadan daha inandırıcı durur. “Bu sayfa bulunamadı. Aşağıdan arayın veya sık kullanılan bölümlere geçin.” Bu cümle kimseyi küçük düşürmez, kimseye anlatacak bir fıkra da bırakmaz.

Arama kutusunu hata anının merkezine alın

Kaybolan kişi çoğu zaman doğru siteye, yanlış adrese gelmiştir. En hızlı onarım, niyeti yeniden yazmasına izin vermektir. Bu yüzden arama kutusu 404’ün dekoru değil, birinci aracıdır.

Kutuyu ilk bakış alanına, başlığın hemen altına koyun. Mobilde başparmak mesafesinde, yeterli yükseklikte ve tek sütunda tutun. Yer tutucu metin “ara” demekle yetinmesin; sitede neyin arandığını söylesin. Mağazada “ürün, kategori veya sipariş no”; hizmet sitesinde “hizmet veya konu” daha doğru bir beklenti kurar.

Arama, boş sonuç üretecekse 404’ün işi yarım kalır. Sonuç yoksa yine bir sonraki adım gösterin: popüler kategoriler, doğru yazım önerisi, iletişim. Kutuyu koyup kişiyi ikinci bir boş duvara göndermek, hata anını uzatmaktır.

Sitede gerçek bir arama yoksa sahte bir kutu koymayın. Yerine üç-beş görünür yol kartı kullanın. Sahte arama, tıklanınca kırılan ikinci bir 404 üretir. Yok olan bir yeteneği varmış gibi sunmak, kurtarma değil ikinci bir kırılmadır.

Klavye ile kutu odaklanabilir olmalı, gönder düğmesi görünür yazılmalı ve odak halkası kaybolmamalıdır. Bu ayrıntı, erişilebilir web tasarımı kararlarıyla aynı yerde durur: hata sayfası da dolaşılabilir bir yüzeydir, bir poster değildir.

Popüler yollar ve tek net çıkış

Arama, niyeti bilen kişi içindir. Niyeti bulanık olan kişiye hazır yollar gerekir. Bu yollar site haritasının tamamı değildir. Üç ile beş bağlantı yeter; fazlası yine bir labirenttir.

Yolları moda başlıklardan değil, gerçek işlerden seçin. E-ticarette kategori, kampanya vitrini ve sipariş takibi sık işlerdir. Kurumsal sitede hizmetler, hakkımızda yerine iş kanıtı ve iletişim daha sık iş görür. Blog ağırlıklı sitede öne çıkan yazılar ve konu dizinleri daha anlamlıdır. “En çok tıklanan menü öğesi” ile “hata anında işe yarayan öğe” aynı liste olmayabilir; 404’te ikinci listeyi kullanın.

Birincil çıkış tektir. Çoğu sitede bu, güvenli liman olarak ana sayfadır. Ana sayfa da rastgele bir yığın olmamalıdır; kişi orada yine bir görev sırası görmelidir. Bu sırayı ana sayfa tasarımı kararlarıyla bağlamak, 404’ten sonraki ilk ekranın da dağılmasını önler.

İkincil çıkış, takılan kişi içindir: “Yardım alın” veya “Bize yazın”. Bunu birincil düğmeyle aynı ağırlıkta boyamayın. Eşit iki düğme, kaybolmuş kişiye ikinci bir seçme ödevi yükler. Üçüncü bir eylem ancak gerçekten ayrı bir iş ise durur; örneğin sipariş numarası olan müşteri için kargo takibi.

  • Birincil eylem: ana sayfa, vitrin veya en işlek kategori.
  • Arama: niyeti yeniden yazmak isteyen kişi için.
  • Popüler yollar: üç-beş gerçek görev bağlantısı.
  • İkincil eylem: iletişim veya yardım; görsel olarak daha sakin.

Mesaj, hiyerarşi ve erişilebilirlik

Başlık durumu söylemeli. Yalnız “Hay aksi” veya “Oops” bir durum adı değildir; süslemedir. “Sayfa bulunamadı” düzdür ve yeterlidir. Gerekirse bir cümlelik gerekçe eklenir: bağlantı eski olabilir, ürün kalkmış olabilir, adres yanlış yazılmış olabilir. Gerekçe spekülasyon yığınına dönüşmesin.

Kod numarası olan 404’ü büyük bir kahraman rakam gibi kullanmak şart değildir. Teknik ekip için yararlıdır, ziyaretçi için ikinci plandadır. Rakam görsel hiyerarşide arama kutusunu ve çıkışı ezmemelidir. Ölçü ve konum kararları görsel hiyerarşi ile aynı dildedir: büyük olan, o an yapılması gereken iştir.

Odak sırası başlıktan aramaya, yollara, birincil çıkışa, sonra ikincil bağlantıya akmalıdır. Menüyü tamamen gizlemek nadiren iyidir; kişi tanıdık bir çubuk görünce sitede olduğunu anlar. Menüyü olduğu gibi şişirmek de yanlıştır. 404’te küresel dolaşma durabilir, fakat arama ve çıkış ondan önde durur.

Metin alternatifleri, düğme adları ve başlık düzeyi de işin parçasıdır. Yalnız ikondan oluşan “ev” düğmesi ekran okuyucuda boş kalır. Bağlantı metinleri “tıklayın” değil, gideceği yeri söylemeli: “Ana sayfaya dön”, “Kadın giyim”, “Hizmetler”. Aynı metnin üç yerde tekrar etmesi de kafa karıştırır; bir birincil cümle yeter.

Durum kodu, yönlendirme ve sonra neye bakarsınız

Tasarım yüzeyi kurtarır; durum kodu gerçeği söyler. Var olmayan bir adres 404 dönmelidir. Aynı adresi 200 ile “bulunamadı” içeriği gibi sunmak, tarayıcıya ve arama motoruna sayfanın geçerli bir sonuç olduğu sinyalini verebilir. Bu yüzden özel 404 bir şablon olabilir, fakat sahte bir başarılı yanıt olmamalıdır.

Her kırık adresi ana sayfaya 301 ile yığmak da kurtarma değildir. Toplu yönlendirme, kalkmış içeriği varmış gibi gösterir ve kişiyi alakasız bir kapıya bırakır. Yönlendirme, içeriğin gerçekten taşındığı adrese yapılır. Taşınmamışsa 404 gösterilir; kurtarma arayüzü burada devreye girer.

Ölçüm, espri beğenisi değil, çıkışın işe yarayıp yaramadığıdır. Hata sayfasından arama gönderimi, popüler yol tıklaması, ana sayfaya dönüş ve hemen çıkış ayrı izlenir. Aynı URL’nin tekrar tekrar 404 üretmesi içerik veya iç bağlantı hatasına işaret eder. Tarama raporlarında bu adresleri görmek için Google Search Console indeksleme kayıtları işe yarar; sayısal bir başarı vaadi değil, kırık yol haritasıdır.

İç bağlantı temizliği 404 üretimini düşürür. Menüde, dipnotta, eski kampanya modülünde ve e-posta imzasında ölü adres bırakmamak, kurtarma ekranına düşen kişi sayısını azaltır. Düşen kişi için ekran yine hazır durmalıdır; çünkü dışarıdaki eski bağlantıyı siz her zaman silemezsiniz.

Yaklaşım Ziyaretçinin gördüğü Sonraki adım
Espri odaklı 404 Büyük görsel, belirsiz başlık, gizli araçlar Kişi şakayı okur, görevi yeniden kuramaz
Yönlendirme yığını Ana sayfaya düşüş, açıklama yok Adres kaybı gizlenir, niyet dağılır
Kurtarma odaklı 404 Kısa durum, arama, birkaç yol, tek çıkış Kişi niyeti yeniden yazar veya güvenli yola geçer

Yayın öncesi kontrol listesi

KepezWeb ekibi hata sayfasını ana şablonun bir parçası gibi tasarlar; “sonra bakarız” yüzeyi bırakmaz. Yayın öncesi aşağıdaki kontrol, görsel tartışmasından daha çok işe yarar.

  1. Başlık, sayfanın bulunamadığını düz cümleyle söylüyor mu?
  2. Arama kutusu ilk bakışta var mı, yoksa sahte bir kutu mu duruyor?
  3. Üç-beş popüler yol gerçek görevleri mi, yoksa tüm menüyü mü kopyalıyor?
  4. Birincil çıkış tek mi, yoksa eşit ağırlıkta düğme kalabalığı mı var?
  5. Odak sırası kutu ve çıkışa gidiyor mu; klavye ile tamamlanıyor mu?
  6. Sunucu gerçek 404 dönüyor mu, yoksa 200 ile “bulunamadı” mı basıyor?
  7. Taşınmış içerikler 404’e düşmek yerine doğru adrese yönleniyor mu?
  8. Mobilde kutu ve düğmeler başparmakla basılacak kadar ayrı duruyor mu?

Bu listeyi bir kez geçmek, yeni bir illüstrasyon sipariş etmekten daha fazla kayıp anı kurtarır. Görsel en sonda, metin ve yollar oturduktan sonra gelir.

Sıkça Sorulan Sorular

404 sayfasında arama kutusu her sitede gerekir mi?

Gerçek arama altyapınız varsa evet, kutuyu öne alın. Arama yoksa sahte kutu koymayın; üç-beş görev bağlantısı ve tek net çıkış daha temiz bir kurtarma sağlar.

Tüm 404’leri ana sayfaya yönlendirmek doğru mu?

Hayır. İçerik gerçekten taşındıysa yeni adrese yönlendirin. Taşınmadıysa 404 gösterin ve kurtarma arayüzünü sunun. Toplu ana sayfa yönlendirmesi kaybı gizler, niyeti de dağıtır.

404’te küresel menüyü gizlemeli miyim?

Menüyü tamamen silmek, kişiyi siteden kopmuş hissettirebilir. Menü durabilir; fakat arama, popüler yollar ve birincil çıkış ondan önce okunmalıdır. Menü, kurtarmanın yerine geçmesin.

Büyük bir 404 rakamı ve espri görseli durabilir mi?

Durabilir, baskın olmamak koşuluyla. Rakam ve görsel başlığı, kutuyu ve çıkışı ezmemeli. Görseli kaldırınca da sayfa görevini yapıyorsa süs yerindedir.

Mobilde 404 nasıl sadeleşir?

Tek sütun, kısa başlık, hemen altında kutu, ardından en fazla beş yol ve bir birincil düğme. Uzun dipnot, paylaşım çubuğu ve ilgili yazı kalabalığı hata anında ertelenir.

Sonuç ve Sonraki Adım

Kırık adresler kaçınılmazdır; kayıp anını şakaya bırakmak kaçınılmaz değildir. 404 sayfa tasarımını arama, popüler yollar ve tek çıkışla kurmak istiyorsanız KepezWeb üzerinden teklif alın. Sayfayı birlikte, kaybolan ziyaretçinin yeniden işine döneceği bir kurtarma ekranına çeviririz.

Bu yazıyı paylaş