Web Sitesi Tasarımı ve Yazılımı

Kuzguncuk Web Tasarım — Arama ve Filtre Seçimlerini Bağlantıda Koruma

Arama ve filtre durumunu paylaşılabilir URL’de tutun; yenileme ile geri/ileri gezinmesinde seçili kontrolleri ve sonuçları eşleyin.

Kuzguncuk Web Tasarım — Arama ve Filtre Seçimlerini Bağlantıda Koruma

Bir ziyaretçi web sitesindeki hizmet veya içerik listesini birkaç ölçüte göre daraltıyor. Sayfayı yenilediğinde seçimler kayboluyor, geri düğmesine bastığında önceki sonuç yerine listenin başına dönüyor ya da bağlantıyı ekip arkadaşına gönderdiğinde aynı görünüm açılmıyorsa, sorun yalnızca arayüzde değildir. Kullanıcının yaptığı seçim ile adres çubuğundaki durum birbirinden kopmuştur. Bu rehber, arama ve filtre seçimlerini paylaşılabilir bağlantıda koruma, tarayıcının geri/ileri gezinmesinde aynı durumu yeniden kurma ve bu davranışı kabul testinde doğrulama yaklaşımını anlatır. Gerçek bir Kuzguncuk işletmesine, siteye veya sonuca ilişkin iddia içermez.

Önce hangi seçimin kalıcı olduğunu belirleyin

Her arayüz değerini URL’ye taşımak gerekmez. Kullanıcının sonuç listesini anlamlı biçimde değiştiren arama sözcüğü, kategori veya sıralama tercihi paylaşılabilir durumun parçası olabilir. Açık bir açılır menü, yazılmakta olan ama henüz gönderilmemiş metin ya da klavye odağı ise çoğunlukla geçici arayüz durumudur. Ekip önce gerçek görevi tarif etmelidir: “Bu bağlantıyı açan başka biri aynı sonuç kümesini görmeli mi?” Cevap evetse, hangi seçimlerin bu görünümü tanımladığını ve hangilerinin yalnızca ekrandaki anlık etkileşim olduğunu yazın.

Durum listesini ihtiyaç kadar küçük tutun. Üç filtre seçeneği varsa hepsini, boş varsayılanları ve geçersiz değerleri nasıl ele alacağınızı belirleyin. Arama kutusuna yazılan her karakterde ayrı bir geçmiş kaydı oluşturmak geri düğmesini kullanışsız hâle getirebilir. Kullanıcı aramayı uyguladığında, filtreyi seçtiğinde veya “sonuçları göster” adımını tamamladığında kaydı güncellemek daha anlaşılır olabilir. Tasarım kararı, arayüzün nasıl çalıştığına ve ziyaretçinin hangi anı tekrar bulmak istediğine göre verilmelidir.

Bu konu, e-ticaret kategori ağacını kurma ya da filtre kombinasyonlarının arama motorlarında hangi URL’lerle görünmesi gerektiğiyle aynı değildir. Önce kullanıcı açısından adresin anlamını belirleyin. Teknik SEO, indeksleme ve yinelenen adres yönetimi ayrı bir yayın kararıdır. Arayüz durumu paylaşılabilir olsa bile her olası filtre birleşiminin arama motoruna açık olması gerekmez.

URL’yi arayüz durumunun okunabilir temsili yapın

Bir URL parametresi, adresin sorgu bölümünde arama ya da seçim bilgisini taşıyabilir. Tarayıcı arayüzündeki seçimleri bu parametrelerden başlatmak, doğrudan bağlantı açılışında da aynı görünümü kurmaya imkân verir. MDN’nin URLSearchParams belgesi, sorgu parametrelerini okuma ve güncelleme yöntemlerini açıklar. Uygulama bu API’yi kullansa da kullanmasa da parametre adları ekip içinde anlaşılır, istikrarlı ve sayfaya özgü olmalıdır. “q” arama için, “sort” sıralama için, belirli bir isim ise seçilen kategori için kullanılabilir; gerçek isimlendirme proje sözlüğüne göre belirlenir.

Bir filtre birden çok değer alabiliyorsa, değerlerin URL’de nasıl temsil edileceğini baştan tanımlayın. Tekrarlanan parametreler veya ayraçla birleştirilmiş değerler gibi modellerin her biri mümkün olabilir; önemli olan hem bağlantıyı oluşturan hem açan tarafın aynı kuralı uygulamasıdır. Birden çok değerin sırası kullanıcı için anlamsızsa, aynı seçimi farklı parametre sıralarıyla tekrar tekrar üretmemek için çıktı sırasını kararlı tutun. Değerin metin karşılığı değişirse eski bağlantıya ne olacağı da bir içerik ve bakım kararıdır.

Varsayılan seçimi her zaman URL’ye eklemek gereksiz ve gürültülü adresler doğurabilir. Parametrenin olmaması varsayılan anlamına geliyorsa bu kuralı tutarlı uygulayın. Geçersiz bir kategori, bilinmeyen sıralama adı veya artık desteklenmeyen değerle karşılaşıldığında sayfanın nasıl davranacağı açık olmalıdır: güvenli varsayılana dönmek, kullanıcıya seçim hatasını bildirmek veya sonuç bulunamadığını göstermek. Sessizce başka bir seçimi uygulamak, bağlantının neden farklı sonuç verdiğini anlaşılmaz kılar.

URL’ye kişisel veya hassas bilgi eklemeyin. Arama alanına e-posta, telefon, form yanıtı veya hesap bilgisi yazılabiliyorsa, bu değerler kopyalanan bağlantının parçası olmamalıdır. Sorgu adresleri geçmişe, yer işaretine veya paylaşım metnine taşınabilir. Bu nedenle paylaşılabilir durumun yalnızca genel liste tercihlerini taşıması, özel kullanıcı verisini dışarıda bırakması gerekir. URL tasarımı veri minimizasyonu ve uygulamanın gizlilik gereksinimleriyle birlikte gözden geçirilmelidir.

Geri ve ileri gezinmeyi beklenen davranışa bağlayın

Kullanıcı filtre değiştirirken adresi güncelliyorsanız, tarayıcının geçmişine yeni adım ekleyip eklemeyeceğinizi belirleyin. Bir kullanıcının sonuçtan ayrılıp geri geldiğinde önceki anlamlı filtre seçimine dönmesi istenebilir. Buna karşılık, her küçük yazım hareketi için ayrı geçmiş kaydı eklemek onlarca geri adımı gerektirebilir. MDN’nin History API açıklaması, history.pushState() ile geçmişe yeni bir giriş eklemeyi ve popstate olayıyla geçmişte etkinleşen durumu ele almayı anlatır. Bu API’lerin kullanımı tek başına seçimleri ekranda yeniden kurmaz; uygulama URL’yi okuyup denetimleri ve sonuçları senkronize etmelidir.

Adres değiştiğinde filtre düğmeleri, arama alanı, sonuç başlığı ve görünür liste aynı durumu anlatmalıdır. Kullanıcı geri düğmesine bastığında yalnız adres çubuğunun değişmesi yeterli değildir; arayüz de önceki parametreleri uygulamalıdır. İleri düğmesiyle yeniden seçilen durum, aynı biçimde geri kurulmalıdır. Parametre hatalıysa uygulama bunu tahmin ederek sessizce başka bir sonuç göstermemeli; anlaşılır bir varsayılan veya düzeltme yolu sunmalıdır.

Tarayıcı geçmişi için iki farklı işlem türünü ayırın. Kullanıcının tamamladığı anlamlı bir filtre adımı geçmişte yeni bir yer alabilir. Arama alanına yazarken her tuş vuruşunda adresi değiştirmek yerine, bekletilmiş güncelleme, gönderim anı veya mevcut kaydı değiştirme yaklaşımı düşünülebilir. MDN’nin History API belgeleri, pushState ve replaceState davranışlarını ayrı anlatır; hangi yöntemin doğru olduğu ürün kararına göre seçilir. Geri düğmesi, arayüzün önceki görünümüne dönmeli; ana sayfaya veya alakasız bir sayfaya fırlatmamalıdır.

Paylaşılabilir bağlantıyı sade ve güvenli tutun

“Bağlantıyı kopyala” düğmesi veya normal adres çubuğu, kullanıcının seçtiği durumu başkasına aktarmasını sağlayabilir. Bunun için özel bir paylaşım özelliği eklemek şart değildir; fakat bağlantı açıldığında seçimin gerçekten yeniden kurulması gerekir. Parametreler çok uzunsa, tekrarlıysa ya da sadece geçici oturum anahtarı içeriyorsa bağlantı başka cihazda işe yaramayabilir. Kullanıcının kopyaladığı adresin kalıcı bir erişim yolu olup olmadığını, oturum veya kullanıcı hesabına bağlı veri taşıyıp taşımadığını test edin.

Bağlantıdaki arama terimi özel kabul edilebilecek bilgi içeriyorsa, bu özelliği varsayılan olarak paylaşılabilir kılmayın. URL adresleri ekran görüntüsünde, e-postada, mesajlaşmada veya tarayıcı geçmişinde görünebilir. Genel bir katalog filtresi ile kişiye özel bir başvuru yanıtı aynı tür veri değildir. Ürün ekibi, hangi parametrelerin herkese açık olduğunu ve bağlantının erişim denetimini aşıp aşmadığını güvenlik ve gizlilik sorumlularıyla değerlendirmelidir.

Parametrelerin tutarlı yazımı da bakım kolaylığı sağlar. Aynı seçimin hem “kategori=kitap” hem “category=books” gibi birden fazla karşılığı oluşuyorsa, eski bağlantıların nasıl yönlendirileceğini planlayın. URL’yi temizlerken bilinmeyen kampanya parametrelerini veya gerekli izleme bilgisini yanlışlıkla silmemek için sorumluları belirleyin. Geliştirme ekibi yalnızca kendi sayfa durum parametrelerini değiştirmeli; ölçüm etiketleriyle çakışmayı ayrı test etmelidir.

Filtre ve arama kontrolünü erişilebilir durumla birlikte değerlendirin

Bir liste yenilendiğinde, URL doğru olsa bile kullanıcı yeni sonuçların geldiğini anlamayabilir. Görünür sonuç sayısı, seçili filtre göstergesi ve odak davranışı birbiriyle tutarlı olmalıdır. Yardımcı teknoloji kullanan ziyaretçiye kısa bir güncelleme sunmak ayrı bir gereksinimdir; adres çubuğunda değişiklik olması tek başına sonuç değişimini bildirmez. Bu nedenle paylaşılabilir durum tasarımını, filtre sonucu değiştiğinde erişilebilir durum bildirimiyle birlikte sınayın. Ayrıntılı kabul senaryoları için filtre güncellemesinde erişilebilir durum bildirimi rehberine bakılabilir.

Filtre davranışı mobil ve masaüstünde de görev odaklı test edilmelidir. Kullanıcı seçim yaparken paneli kapatıp açabilir, başka bir içeriğe geçebilir veya bağlantıyı kopyalayabilir. Küçük ekranda panelin tüm filtreleri göstermemesi, URL’deki seçimin kaybolmasına yol açmamalıdır. Mobil kullanımın genel kabul yaklaşımı için küçük ekranda gerçek kullanım rehberi incelenebilir. Bu testler belirli bir cihazda kusursuz çalışma garantisi değil, gözlenen koşulları belgeleyen kontrol adımlarıdır.

Yayın öncesi durum matrisi hazırlayın

Bir tablo oluşturup her satıra bir senaryo ekleyin: parametresiz ilk açılış, tek filtreli bağlantı, çoklu filtre, arama sözcüğü, bilinmeyen değer, paylaşım sonrası yeni sekme, yenileme, geri ve ileri düğmeleri. Her senaryoda URL, seçili kontrol, görünen sonuç ve sonuç mesajını kaydedin. Bu dört görünüm birbiriyle uyuşmuyorsa senaryo başarısızdır. Test verisi gerçek müşteri veya kişisel bilgiyi içermemeli; genel, kontrollü örneklerle kullanılmalıdır.

Testi yalnız tek kullanıcının hızlı masaüstü turuyla bitirmeyin. Yavaş ağda sonuç güncellemesi geciktiğinde eski listenin nasıl göründüğünü, ardışık iki filtre değişikliğinde eski yanıtın yeni seçimi ezip ezmediğini ve bağlantı başka cihazda açıldığında aynı temel durumun oluşup oluşmadığını kaydedin. İsteklerin sırası değişebildiği dinamik arayüzlerde bu önemli bir sınama alanıdır. Her proje bu riski aynı şekilde taşımaz; ölçülen durum ve beklenen davranış proje notunda yazılı olmalıdır.

Adres parametreleri paylaşılabilir olsa da her seçimin arama motoru tarafından taranması gerekmez. E-ticaret kategori yapısı ve filtre URL’lerinin indeksleme kararları için filtre ile kategori arasındaki fark rehberini inceleyin. Kullanıcıya çalışır bir liste sunma kararı ile teknik indeksleme politikası birbirinden ayrı tutulmalıdır.

Web tasarımında sayfa, içerik ve etkileşim birlikte planlanır. web tasarım ve yazılım hizmeti sayfası proje yaklaşımını ve kapsamı açıklar; burada anlatılanlar belirli bir süre, trafik artışı veya teknik sonuç vaadi değildir. Bir arayüz değişikliğine karar verirken sayfa sahibi, geliştirme ekibi ve içerik sorumlusu; parametre sözlüğünü, varsayılanları, özel veri sınırını ve kabul testinin tekrarını birlikte netleştirmelidir.

Sık Sorulan Sorular

Her filtre seçimini URL’ye eklemek gerekir mi?

Hayır. Yalnızca kullanıcının sonuç görünümünü tekrar açmak, paylaşmak veya geri dönmek isteyeceği anlamlı seçimleri taşıyın. Geçici panel açıklığı ya da henüz uygulanmamış metin her zaman paylaşılabilir durum değildir.

Paylaşılabilir URL ile arama motoruna açılan URL aynı şey midir?

Hayır. Kullanıcıya bağlantıyla durum aktarmak bir arayüz ve gezinme kararıdır. Hangi adreslerin taranacağı, yinelenen birleşimlerin nasıl ele alınacağı ve indeksleme ayrı teknik SEO politikalarıdır.

Geri düğmesine basınca filtrelerin değişmesi yeterli mi?

Adres çubuğu, denetimler ve sonuç listesi aynı önceki durumu göstermelidir. Sadece URL’nin değişmesi veya sadece listenin değişmesi tutarsız deneyim yaratır. Geri ve ileri adımlarını ayrı ayrı deneyin.

Arama kutusundaki her harfte yeni geçmiş kaydı eklemeli miyim?

Çoğu arayüzde bu, geri düğmesi için çok sayıda anlamsız adım üretir. Kullanıcı aramayı uyguladığında geçmişe yeni kayıt eklemek veya mevcut kaydı güncellemek gibi seçenekleri görev akışına göre değerlendirin.

Çoklu filtre URL’de nasıl temsil edilir?

Tekrarlanan parametre veya birleştirilmiş değer gibi bir model seçilebilir. Oluşturma ve okuma kurallarını kararlı tutun; aynı seçimin farklı sıralamalarla gereksiz farklı adresler üretmesini önleyin.

Hangi arama bilgileri URL’de bulunmamalı?

E-posta, telefon, başvuru yanıtı, hesap verisi veya özel kabul edilen başka bilgiler paylaşılabilir adreslerde taşınmamalıdır. URL’nin geçmiş, yer imi ve mesajlarda kalabileceğini dikkate alın.

Filtreyi URL’ye yazmak erişilebilirlik bildirimi yerine geçer mi?

Hayır. Adres değişikliği, yeni sonuçların yardımcı teknolojiye nasıl duyurulduğunu tek başına çözmez. Görünür seçim, sonuç ve uygun durum bildirimi ayrıca test edilmelidir.

Durum parametresi artık geçersizse ne yapmalıyım?

Güvenli ve anlaşılır bir varsayılan seçin veya kullanıcıya düzeltme yolu gösterin. Eski URL’nin farklı sonucu sessizce açması yerine, hangi seçimin kullanılamadığını açıklamak daha öngörülebilirdir.

Tüm yazılar