Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sayfaların yerleşimini ve ziyaretçinin tıkladığı öğeleri planlar: iletişim sayfasında etkileşimli harita yerine harita görselinin hangi durumda kullanılacağı, menüde ana sayfa bağlantısının gerekip gerekmediği, düğmelerin klavyeyle seçildiğinde ve fareyle üzerine gelindiğinde nasıl görüneceği ve bir sayfada kaç çağrı düğmesi bulunacağı.
Web Tasarım Sürecinde Etkileşimli Harita Yerine Harita Görseli Ne Zaman Kullanılır?
Etkileşimli harita, sayfaya Google Haritalar’dan yerleştirilen ve ziyaretçinin yakınlaştırıp kaydırabildiği haritadır. Harita görseli ise aynı bölgenin sabit bir resmidir. Web tasarım sürecinde harita görseli, haritanın yalnızca konumu göstermek için bulunduğu yerlerde seçilir: ana sayfa bölümleri, sayfa altı ve hizmet sayfaları. Ziyaretçinin haritada gezinmesi gereken İletişim sayfasında etkileşimli harita kullanılır. Seçimi iki konu belirler: haritanın sayfaya getirdiği yük ve çerez izni.
Etkileşimli harita, sayfa açılırken Google’ın sunucularından çok sayıda dosya indirir: tarayıcıda çalışan JavaScript kodları, harita parçaları ve yazı tipleri. Varsayılan kurulumda bu dosyalar ziyaretçi haritaya bakmasa da yüklenir. Google’ın sayfa hızını ölçen PageSpeed Insights, bu yükü üçüncü taraf kod ve kullanılmayan JavaScript uyarılarında gösterir. Harita alanına geç yükleme verilirse dosyalar ancak alan ekrana yaklaşınca iner. İlk ekrandaki haritada bu ayar yükü azaltmaz.
Etkileşimli harita yüklendiğinde ziyaretçinin tarayıcısı Google’ın sunucularına bağlanır ve Google çerez yerleştirebilir. Çerez, bir sitenin tarayıcıya kaydettiği küçük bir bilgi dosyasıdır. Çerez onay aracı kullanan sitelerde harita, ziyaretçi ilgili çerezlere izin verene kadar engellenebilir. Ayar yapılmadıysa alanda boş bir kutu kalır. Harita görseli sitenin kendi sunucusundan geldiği için bu izne bağlı değildir.
İki yöntem birlikte de kullanılabilir. Sayfa açıldığında önce harita görseli gösterilir. Ziyaretçi görsele dokunduğunda etkileşimli harita yüklenir ve görselin yerini alır. Bu yönteme cephe ile yükleme denir. PageSpeed Insights, ağır üçüncü taraf öğeler için bu yöntemi ayrı bir öneri olarak listeleyebilir. Görselin üzerinde, haritanın dokununca açılacağını söyleyen kısa bir yazı bulunur.
Harita görseli hazırlanırken kaynak kurallarına uyulur. Google Haritalar’dan alınan bir görüntü için Google’ın harita içeriklerine ilişkin atıf yönergeleri geçerlidir. Bu yönergeler, görüntüdeki Google adının ve veri kaynağı yazısının korunmasını ister. Görsel, alanın boyutunda kaydedilir ve sıkıştırılarak sunulur. Görselin alternatif metnine, yani ekran okuyucunun görsel yerine okuduğu açıklamaya işletmenin açık adresi yazılır. Yalnızca görsel kullanılan yerlerde görsel, Google Haritalar’daki işletme kaydına bağlanır.
Harita türü ne olursa olsun açık adres sayfada metin olarak da bulunur. Görselin içindeki yazılar ve gömülü haritadaki etiketler sayfanın metni yerine geçmez. Telefonda etkileşimli harita ekranın büyük bölümünü kaplarsa sayfayı kaydırmak zorlaşabilir; bu yüzden harita alanının yüksekliği sınırlı tutulur. Web tasarım denetiminde her haritanın türü ve sayfanın PageSpeed Insights sonucu sayfa sayfa listelenir.
Menüde Ana Sayfa Bağlantısı Gerekir mi?
Ana sayfa bağlantısı, menüde ziyaretçiyi sitenin ilk sayfasına döndüren öğedir. Google böyle bir öğeyi şart koşmaz. Öğenin gerekip gerekmediği, ziyaretçinin ana sayfaya hangi yollarla dönebildiğine bağlıdır. Sayfa yolu, sayfanın üstünde sitedeki yerini gösteren bağlantı dizisidir. Logo tıklanabilir değilse ve sitede sayfa yolu bulunmuyorsa menüde ayrı bir Ana Sayfa öğesi yer alır. Logo bağlantısı ve sayfa yolu varsa öğe isteğe bağlıdır.
Logonun ana sayfaya bağlanması yaygın bir düzendir, ama her ziyaretçi bu düzeni bilmez. Logoya dokunmayı denemeyen ziyaretçi ana sayfaya dönmek için tarayıcının geri düğmesine başvurur. Logo bağlantısı her sayfada aynı yerde durur ve telefon başlığında da görünür. Elementor Pro’daki Site Logosu öğesi varsayılan olarak ana sayfaya bağlanır. Logonun alternatif metnine sitenin adı yazılır; ekran okuyucu bağlantıyı bu adla okur.
Menüye Ana Sayfa öğesi eklenecekse listenin başına konur. Bu öğe masaüstü menüde bir yer daha kaplar. Menü tek satıra sığmıyorsa öğe adları kısaltılır ya da Ana Sayfa öğesi yalnızca telefon menüsünde bırakılır. Telefondaki açılır menüde öğeler alt alta dizildiği için orada yer sorunu oluşmaz. Elementor’da biri masaüstünde, öteki telefonda görünen iki ayrı menü öğesi kullanılabilir.
Menü, ziyaretçinin hangi sayfada olduğunu da gösterir. Bulunulan sayfanın menü öğesi işaretlenir; ana sayfadayken bu öğe Ana Sayfa olur. İşaret yalnızca renk farkıyla verilmez. Renkleri ayırt etmekte zorlanan ziyaretçiler için alt çizgi ya da kalın yazı eklenir. WordPress’in menü sistemi bulunulan sayfanın öğesini kendiliğinden belirler; bu bilgi ekran okuyuculara da aktarılabilir. Tema işareti görünür bir biçime çevirir.
Arama açısından ana sayfa, logo bağlantısı sayesinde her iç sayfadan bağlantı alır. Görsel bağlantılarda Google, bağlantı metni olarak görselin alternatif metnini kullanır. Menüdeki Ana Sayfa öğesi aynı adrese giden ikinci bir bağlantı ekler. Google, bir sayfada aynı adrese verilen birden fazla bağlantının nasıl değerlendirildiğini ayrıntılı açıklamaz. Bu nedenle öğenin eklenip eklenmeyeceği ziyaretçinin kullanımına göre belirlenir.
Sayfa yolunun ilk adımı her zaman ana sayfadır. İç sayfalarda ziyaretçi bu adımla bir dokunuşta başa döner. Menü kararı verilmeden önce üç dönüş yolu birlikte denenir: logo, sayfa yolu ve menü öğesi. Deneme telefonda ve masaüstünde ayrı yapılır. Web tasarım ile SEO işini aynı ekip yürüttüğü için menü yapısı sitenin iç bağlantı planıyla birlikte hazırlanır.
Düğmelerin Odak ve Üzerine Gelme Durumları Nasıl Tasarlanır?
Bir düğmenin birkaç görünüm durumu vardır. Normal durum, düğmenin ilk görünüşüdür. Üzerine gelme durumu, fare imleci düğmenin üstüne geldiğinde ortaya çıkar. Odak durumu, düğme klavyedeki Tab tuşuyla seçildiğinde görünür. Basılma durumu tıklama anını, devre dışı durumu ise kullanılamayan düğmeyi gösterir. Web tasarım aşamasında bu durumların her biri ayrı çizilir. Ziyaretçi düğmenin hangi durumda olduğunu görünüşünden anlar.
Üzerine gelme durumunda düğmenin zemin rengi koyulaşır ya da açılır; metin aynı kalır. Bu değişim, düğmenin tıklanabilir olduğunu ziyaretçiye bildirir. Düğmenin genişliği ve yüksekliği bu sırada değiştirilmez, çünkü boyut değişimi yanındaki öğeleri kaydırabilir. Renk geçişi kısa tutulur. Telefon ve tablette fare imleci bulunmaz. Bu yüzden hiçbir bilgi yalnızca üzerine gelince görünecek biçimde saklanmaz.
Odak durumu klavyeyle gezinen ziyaretçi içindir. Tab tuşuna her basıldığında odak bir sonraki bağlantıya ya da düğmeye geçer. Odaktaki öğe çevresindeki belirgin bir çerçeveyle gösterilir. Tarayıcılar bu çerçeveyi varsayılan olarak çizer. Bazı temalar görünüşü sade tutmak için çerçeveyi kaldırır; bu durumda klavye kullanıcısı nerede olduğunu göremez. Çerçeve kaldırılmaz, gerekirse sitenin renklerine göre yeniden çizilir.
Odak çerçevesinin rengi hem düğmeden hem de arka plandan ayırt edilir. Erişilebilirlik ölçütleri, odak göstergesinin görünür olmasını ve çevresiyle yeterli kontrast taşımasını ister. Kontrast, iki renk arasındaki açıklık farkıdır. Koyu zeminde açık, açık zeminde koyu bir çerçeve kullanılır. Çerçeve, düğmenin kenarından biraz dışarıda çizilir. Odak ve üzerine gelme aynı rengi paylaşabilir, ama odak yalnızca hafif bir renk değişimiyle bırakılmaz.
Basılma durumu, tıklamanın ya da dokunuşun algılandığını gösteren kısa bir renk değişimidir. Dokunmatik ekranda düğmeden gelen ilk görsel yanıt budur. Form gönderilirken düğme devre dışı bırakılır; böylece aynı form ikinci kez gönderilmez. Devre dışı düğme soluk gösterilir ve imleç üzerine gelince değişmez. Yanında düğmenin neden kullanılamadığını söyleyen kısa bir yazı bulunur.
Durumlar sitenin tamamı için tek seferde tanımlanır. Elementor’da Site Ayarları içindeki düğme ayarları, normal ve üzerine gelme renklerini sitenin tamamına uygular. Odak çerçevesinin temada nasıl çizildiği ayrıca denetlenir. Son denetimde sayfa önce yalnızca klavyeyle gezilir, ardından fareyle ve telefonda dokunarak denenir. Her durumda düğme metninin zeminden ayrıldığı ve okunabildiği tek tek kontrol edilir.
Bir Sayfada Kaç Çağrı Düğmesi Bulunmalı?
Çağrı düğmesi, ziyaretçiyi bir işleme yönlendiren düğmedir: telefonla arama, form açma ya da mesaj gönderme. Bir sayfada kaç çağrı düğmesi bulunacağını belirleyen sabit bir sayı yoktur. Google’ın bu konuda yayımladığı bir sayı da bulunmaz. Düğme sayısını sayfanın uzunluğu ve sayfadaki ana işlem belirler. Web tasarım planında her sayfa için önce tek bir ana işlem seçilir.
Ana işlem, sayfanın amacına en yakın adımdır. Hizmet sayfasında bu çoğu zaman teklif formu ya da telefonla aramadır. Ana işlemin düğmesi dolu renkle, ikincil işlemler çerçeveli düğme ya da metin bağlantısı olarak gösterilir. Böylece aynı bölgede iki düğme bulunsa da hangisinin öncelikli olduğu görünüşünden anlaşılır. Aynı ekranda iki dolu düğme yan yana konmaz.
Uzun sayfada ana işlemin düğmesi birkaç kez tekrarlanır. İlk yer, sayfanın ilk ekranıdır. Sonraki yerler, ziyaretçinin bir bölümü okuyup bitirdiği noktalardır: hizmetin anlatıldığı bölümün sonu, süreç bölümünün ardı ve sayfanın sonu. Tekrarlanan düğmeler aynı metni ve aynı hedefi taşır. Kısa bir sayfada düğme yalnızca ilk ekranda ve sonda bulunur. Böylece ziyaretçi düğmeyi bulmak için sayfayı geri kaydırmaz.
Farklı işlemler aynı yerde toplanır. Telefonla arama, WhatsApp ve form düğmeleri sayfanın farklı bölgelerine dağıtılmaz; tek bir iletişim bölümünde yan yana durur. Telefonda bu bölümdeki düğmeler alt alta dizilir ve her biri parmakla rahat dokunulacak büyüklükte olur. Arama düğmesi telefonda numarayı doğrudan çevirir. Masaüstünde bu düğme her bilgisayarda çalışmaz; bu yüzden numara yanında yazı olarak da görünür.
Düğmelerin sayısı ve yeri ölçümle sınanır. Her düğmeye sayfadaki yerini belirten bir ad verilir: üst, orta, son. Etkinlik, Google Analytics 4’ün, kısaca GA4’ün, ziyaretçi eylemlerini kaydettiği birimdir. Tıklamalar GA4’e etkinlik olarak gönderilir; bu kurulum Google Etiket Yöneticisi ile yapılabilir. Form gönderimi ve arama düğmesine dokunma anahtar etkinlik olarak işaretlenir. Yeterli veri biriktiğinde hiç tıklanmayan bir konum görülürse o düğmenin yeri değiştirilir.
Çağrı için açılan pencereler ayrı bir konudur. Google, içeriği kapatan açılır pencerelerin, özellikle telefonda, ziyaretçinin içeriğe erişimini zorlaştırdığını belirtir. Bu yüzden ana işlem sayfa içindeki düğmelerle sunulur. Açılır pencere kullanılacaksa kapatma düğmesi görünür bir yerde durur. Ücretsiz ön kontrolde mevcut sitedeki düğmelerin sayısı, yeri ve ölçüm durumu kontrol raporuna yazılır. Onaylanan değişiklikler aylık iş listesine girer.
Sitemdeki Google haritası bazı ziyaretçilerde boş bir kutu olarak görünüyor; nedeni ne olabilir?
Çerez onay aracı haritayı izin verilene kadar engelliyor olabilir. Bunu, tarayıcıda çerezleri reddedip sayfayı yeniden açarak deneyin. Reklam engelleyici eklentiler de gömülü haritayı durdurabilir. Boş kutunun yerine harita görseli ve haritayı izinle açan bir düğme koyduğunuzda alan her durumda dolu görünür.
Menümde Ana Sayfa öğesi var ama ana sayfadayken işaretli görünmüyor; neden olur?
Öğe özel bağlantı olarak eklendiyse adresi, sitenin adresinden güvenli bağlantı ya da sondaki eğik çizgi kadar farklı olabilir; bu durumda WordPress öğeyi bulunulan sayfa olarak tanımayabilir. Öğeyi Menüler ekranında Sayfalar listesinden yeniden ekleyin. Görünüm için Elementor’daki menü öğesinin etkin durum renk ayarını kullanın.
Sitemde Tab tuşuna basınca hangi düğmenin seçili olduğunu göremiyorum; neden olur?
Tema ya da bir eklenti, tarayıcının çizdiği odak çerçevesini kaldırmış olabilir. Tarayıcının geliştirici araçlarında düğmeyi seçip odak durumunu zorlayarak hangi ayarın çerçeveyi gizlediğini görebilirsiniz. Çözüm, çerçeveyi sitenin renklerinde yeniden tanımlamaktır; çerçeve hem düğmeden hem zeminden ayırt edilmelidir.
Telefonda arama düğmesine dokunulduğunu GA4’te görebilir miyim?
Dokunuşu görebilirsiniz, görüşmenin yapılıp yapılmadığını göremezsiniz. Arama bağlantısına yapılan tıklama GA4’e etkinlik olarak gönderilir ve anahtar etkinlik olarak işaretlenebilir. Ziyaretçi telefonunda aramayı başlatmazsa bu bilgi siteye dönmez. Gerçek görüşme sayısı için GA4 verisini telefon kayıtlarınızla karşılaştırın.