Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sitenizin ekranda görünen yüzünün ve kullanım düzeninin hazırlanmasıdır. Menü, düğmeler, formlar, renkler ve yazı boyutları küçük ve büyük ekranlarda aynı kolaylıkla kullanılacak biçimde hazırlanır. Tasarım bitince sayfaların hızı ve formların çalışması denenir.
Web Tasarımda Oturum Süresi Dolmadan Önce Ziyaretçi Nasıl Uyarılır?
Oturum, ziyaretçinin bir siteye giriş yaptıktan sonra site tarafından tanınmaya devam ettiği süredir. Üye girişi olan sayfalarda, uzun formlarda ve ödeme adımlarında site ziyaretçiyi bu süre boyunca hatırlar. Güvenlik için bu süre sınırlı tutulur. Ziyaretçi bir süre hiçbir işlem yapmazsa oturum kapanır ve girdiği bilgiler silinebilir. Web tasarım çalışmasında bu kapanıştan önce ziyaretçiye bir uyarı gösterilir. Uyarı, ziyaretçiye süreyi uzatma ya da yaptığı işi kaydetme imkânı verir. Böylece yarım kalan bir form ya da doldurulmuş bir sepet kaybolmaz ve ziyaretçi işine kaldığı yerden devam eder.
Uyarının ne zaman çıkacağı oturum süresine göre belirlenir. Önce sitenin oturumu ne kadar süre sonra kapattığı, sunucunun ya da sitenin yazılımının ayarlarından öğrenilir. Uyarı bu süre bitmeden, ziyaretçinin okuyup karar vermesine yetecek bir zaman kala açılır. Uyarı penceresinde kalan süre yazılır ve “Süreyi uzat” düğmesi yer alır. Düğmeye basılınca site oturumu yeniden başlatır. Ziyaretçi sayfadan ayrılmadan işine devam eder. Erişilebilirlik ilkeleri, süre sınırı olan işlemlerde ziyaretçiye bu sürenin önceden bildirilmesini ve süreyi uzatma imkânı verilmesini ister.
Uyarı penceresi fark edilecek biçimde tasarlanır. Pencere sayfanın ortasında açılır ve arkadaki sayfa hafifçe karartılır. Metin kısa ve açıktır: oturumun ne zaman kapanacağı ve ne yapılması gerektiği yazılır. Düğmeler büyük tutulur ve telefonda parmakla rahatça basılır. Pencere açılınca klavye odağı “Süreyi uzat” düğmesine taşınır. Klavye odağı, klavyeyle gezinirken o anda seçili olan öğedir. Ekran okuyucu kullanan ziyaretçiye de pencerenin açıldığı sesli olarak bildirilir. Pencere, ziyaretçi düğmeye basmadan kendiliğinden kaybolmaz ve kalan süre her saniye yenilenir.
Oturum kapansa bile ziyaretçinin yazdıkları korunur. Formdaki bilgiler, kişisel ve ödeme bilgileri dışında, tarayıcıda geçici olarak saklanır. Ziyaretçi yeniden giriş yaptığında form aynı bilgilerle açılır. Oturum kapandıktan sonra açılan sayfa sade tutulur: oturumun neden kapandığı yazılır ve yeniden giriş bağlantısı verilir. Giriş yapılınca ziyaretçi, oturumun kapandığı sayfaya geri gönderilir. Web tasarım sürecinin sonunda oturum süresi deneme için kısaltılır. Uyarının doğru zamanda çıktığı, düğmelerin çalıştığı ve bilgilerin korunduğu bu kısa süreyle kontrol edilir ve ayar eski hâline getirilir.
Site Ekran Okuyucu Programla Nasıl Denenir?
Ekran okuyucu, ekrandaki yazıları, düğmeleri ve bağlantıları sesli okuyan bir programdır. Görme engelli ya da az gören kişiler siteleri bu programla kullanır. Program sayfayı yukarıdan aşağıya okur. Başlıkları, bağlantıları, görsel açıklamalarını ve form alanlarını ayrı ayrı söyler. Kişi bilgisayarda klavyeyle, telefonda parmak hareketleriyle sayfada ilerler. Bilgisayarların ve telefonların çoğunda bir ekran okuyucu hazır gelir. Android telefonlarda Google’ın TalkBack adlı ekran okuyucusu, ayarlardaki erişilebilirlik bölümünden açılır. Denemede sitenin bu programla nasıl duyulduğu baştan sona dinlenir ve her sorun not edilir.
Denemenin ilk adımı başlıklardır. Ekran okuyucuyla gezinen kişiler sayfada çoğu zaman başlıktan başlığa atlayarak ilerler. Bu yüzden her sayfada bir ana başlık olup olmadığı ve alt başlıkların sırayla gelip gelmediği dinlenir. Ardından görsellere geçilir. Her görselin bir açıklama metni olabilir. Açıklama metni, görselin ne gösterdiğini anlatan ve ekran okuyucunun sesli okuduğu kısa yazıdır. Açıklaması olmayan görselde program dosyanın adını okur ya da görseli atlar. Bilgi veren her görsele içeriğini anlatan bir açıklama yazılır. Yalnızca süs için konan görsellerin açıklaması boş bırakılır ve program onları atlar.
Sonra bağlantılar ve düğmeler denenir. Her bağlantının yazısı, gittiği sayfayı tek başına anlatacak biçimde yazılır. “Tıklayın” ya da “Devamı” yazan bağlantılar ekran okuyucuda art arda aynı sözcük olarak duyulur. Bu bağlantılara gittikleri sayfanın adı eklenir. Yalnızca bir simgeden oluşan düğmelere sesli okunacak bir ad verilir. Menü düğmesi, telefon simgesi ve arama düğmesi bu gruptadır. Klavyeyle gezinirken her öğenin sırayla seçildiği, seçili öğenin çerçeveyle belli olduğu ve açılan menülerin klavyeyle kapatılabildiği de kontrol edilir. Bu adımda sayfanın hiçbir bölümünün klavyeyle atlanmadığına bakılır.
Formlar denemenin son adımıdır. Her alanın adı, ekran okuyucuda alanın kendisiyle birlikte okunur. Ad yalnızca alanın içine silik bir yazı olarak konmuşsa ziyaretçi yazmaya başlayınca bu ad kaybolur. Bu yüzden her alanın üstüne görünür bir ad yazılır ve bu ad alana bağlanır. Hata mesajları da sesli okunur ve ziyaretçi hangi alanda neyin eksik olduğunu duyar. Web tasarım sırasında fark edilen her eksik not edilir, düzeltilir ve aynı programla yeniden dinlenir. Deneme hem bilgisayarda hem telefonda yapılır, çünkü iki cihazda gezinme biçimi farklıdır.
Site İçi Aramada Yazarken Çıkan Öneriler Nasıl Tasarlanır?
Site içi arama, ziyaretçinin sitenin kendi sayfaları arasında arama yapmasını sağlayan kutudur. Yazarken çıkan öneriler, ziyaretçi birkaç harf yazdığında kutunun hemen altında açılan kısa listedir. Listede yazılan harflerle başlayan ya da bu harfleri içeren sayfa adları, hizmet adları ve sık aranan sözcükler yer alır. Ziyaretçi aradığını listede görünce yazmayı bırakıp öneriye dokunur. Böylece yazım hatası yapılmaz ve sonuç vermeyen aramalar azalır. Öneriler sitenin kendi içeriğinden üretilir. WordPress ile kurulan sitelerde bu liste, sayfaların ve yazıların başlıklarından alınabilir.
Önce önerilerin içeriği belirlenir. Liste kısa tutulur, birkaç öneri ekrana sığar ve kaydırma gerektirmez. Her öneride ziyaretçinin yazdığı harfler kalın ya da farklı renkte gösterilir. Bu, önerinin hangi harflerle eşleştiğini ziyaretçiye gösterir. Öneriler türlerine göre ayrılabilir: sayfalar, hizmetler ve yazılar ayrı küçük başlıklar altında durur. Liste tek harfte açılmaz, ziyaretçi ilk birkaç harfi yazınca açılır. Her yeni harfte liste yenilenir. Hiç öneri yoksa liste kapalı kalır ya da sonuç bulunamadığını bildiren kısa bir satır gösterir.
Öneriler hem klavyeyle hem dokunarak kullanılabilir. Aşağı ve yukarı ok tuşları öneriler arasında gezdirir, giriş tuşu seçili öneriyi açar, çıkış tuşu listeyi kapatır. Seçili öneri farklı bir arka plan rengiyle belli edilir. Ekran okuyucu kullanan ziyaretçiye kaç öneri çıktığı ve hangisinin seçili olduğu sesli bildirilir. Telefonda her öneri satırı parmakla rahatça basılacak yükseklikte tutulur. Telefonun klavyesi açıldığında önerilerin üstü kapanmamalıdır. Bu yüzden arama kutusu telefon ekranında üst kısma yerleştirilir ve liste kutunun hemen altında açılır.
Tasarım bittikten sonra öneriler gerçek aramalarla denenir. Google Analytics, sitenin ayarlarına bağlı olarak site içi aramaları ayrı bir kayıt olarak tutabilir. Bu kayıtlardan ziyaretçilerin sitede hangi sözcükleri aradığı okunur. Sık yazılan ama sonuç vermeyen sözcükler bir listeye alınır. Bu sözcükler için öneri listesine yeni bir eşleşme eklenir ya da ilgili sayfa öneriler arasına konur. Web tasarım sürecinde listenin açılma hızı da ölçülür ve liste yazmayı yavaşlatmadan gelir. Bu düzenlemeler aylık iş listesinde yer alır ve onayınızdan sonra yapılır.
Telefonda Sayfayı Parmakla Büyütme Neden Açık Bırakılır?
Parmakla büyütme, telefonda iki parmağı ekranda birbirinden ayırarak sayfayı yakınlaştırmaktır. Ziyaretçi küçük bir yazıyı, bir tabloyu ya da bir görseli bu hareketle büyütür. Sayfanın telefonda nasıl gösterileceği, sayfanın başına yazılan görünüm ayarıyla belirlenir. Bu ayar, sayfanın genişliğini telefonun ekranına uydurur. Aynı ayarın içinde büyütmeyi kapatan bir seçenek de bulunur. Bu seçenek kullanılırsa ziyaretçi parmaklarını ayırsa bile sayfa büyümez. Sitenin tasarımında bu seçenek kullanılmaz. Böylece parmakla büyütme her sayfada ve her telefonda çalışır.
Büyütme, az gören ziyaretçilerin sayfayı okumasını sağlayan yollardan biridir. Telefonun yazı boyutu ayarı her sayfada aynı sonucu vermez. Bazı yazılar ve görseller bu ayarla büyümez. Parmakla büyütme ise ekranda görünen her şeyi büyütür. Küçük yazılı bir tablo, bir harita ya da bir belge görseli bu sayede okunur. Erişilebilirlik ilkeleri, metnin ek bir araç kullanılmadan da büyütülebilmesini ister. Büyütme kapalı olduğunda bu ziyaretçiler sayfanın bazı bölümlerini okuyamaz. Bu yüzden büyütme her sayfada açık bırakılır ve sayfanın düzeni buna göre hazırlanır.
Büyütme açıkken sayfanın düzeninin karışmaması için tasarımda birkaç ayar yapılır. Sayfa telefonun genişliğine göre esnek kurulur ve büyütülen bir bölüm yana taşmaz. Bazı telefonlarda küçük yazılı bir form alanına dokunulunca sayfa kendiliğinden yakınlaşır. Bunun önüne geçmek için form alanlarındaki yazı yeterince büyük seçilir. Harita ve kaydırılan görsel alanları, iki parmak hareketini sayfanın büyütülmesiyle karıştırmayacak biçimde ayarlanır. Ekranın üstünde sabit duran menü, sayfa büyütüldüğünde ekranın büyük bölümünü kapatmayacak yükseklikte tutulur. Büyütülen sayfada yazıların satır sonundan taşmadığı ve görsellerin bulanıklaşmadığı da ayrıca denenir.
Kontrol Google’ın kendi aracıyla ve gerçek bir telefonla yapılır. PageSpeed Insights, adresi girilen sayfada hız ve erişilebilirlik ölçümleri yapan ücretsiz Google aracıdır. Aracın erişilebilirlik bölümü, görünüm ayarında büyütmenin kapatılıp kapatılmadığına bakar. Kapatılmışsa bunu ayrı bir madde olarak listeler. Bu ölçüm sitedeki her sayfa türü için ayrı yapılır. Ardından sayfalar telefonda açılır ve parmakla büyütülür. Yazıların, düğmelerin ve formların büyütülmüş hâlde de kullanılabildiği denenir. Web tasarım çalışmasında bulunan her konu aylık iş listesinde ayrı bir madde olur ve onayınızdan sonra düzeltilir.
Web tasarım sırasında oturum süresi uyarısı hangi sayfalara eklenir?
Uyarı, ziyaretçinin giriş yaptığı ve bilgi yazdığı sayfalara eklenir. Üye paneli, uzun formlar ve ödeme adımları bu gruptadır. Web tasarım çalışmasında önce sitenin oturumu ne kadar süre sonra kapattığı öğrenilir. Uyarı bu süre bitmeden açılır, kalan süreyi yazar ve süreyi uzatan bir düğme gösterir. Giriş gerektirmeyen sayfalara bu uyarı eklenmez.
Web tasarım bittikten sonra siteyi ekran okuyucuyla kendim deneyebilir miyim?
Deneyebilirsiniz. Android telefonlarda Google’ın TalkBack ekran okuyucusu, ayarlardaki erişilebilirlik bölümünden açılır. Bilgisayarlarda ve öteki telefonlarda da çoğu zaman hazır gelen bir ekran okuyucu bulunur. Sayfayı baştan sona dinleyin ve başlıkların, görsel açıklamalarının ve form alanlarının adlarının okunup okunmadığına bakın. Web tasarım sürecinde bu dinleme bizim tarafımızdan da yapılır.
Web tasarım çalışmasında arama önerileri kaçıncı harften sonra açılır?
Öneriler tek harfte açılmaz, ziyaretçi ilk birkaç harfi yazınca açılır. Harf sayısı, sitedeki sayfa sayısına ve önerilerin ne kadar hızlı geldiğine göre ayarlanır. Web tasarım sürecinde bu ayar gerçek aramalarla denenir. Her yeni harfte liste yenilenir. Sonuç yoksa liste kapalı kalır ya da sonuç bulunamadığını bildiren kısa bir satır gösterir.
Web tasarım sonrasında telefonda büyütmenin açık olduğunu nasıl kontrol ederim?
Sayfayı telefonda açın ve iki parmağınızı ekranda birbirinden ayırın. Sayfa büyüyorsa ayar açıktır. Sayfanın adresini Google’ın PageSpeed Insights aracına yazdığınızda erişilebilirlik bölümü de büyütmenin kapatılıp kapatılmadığını gösterir. Web tasarım çalışmasında bu kontrol sitedeki her sayfa türü için ayrı yapılır ve sonucu size iletilir.