Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sayfanın çizildiği günkü hâline değil, kullanıldığı günkü hâline bakar: yüzlerce parça ya da ilan arasındaki süzgeçlerin telefona sığması, uzun adlı ya da fotoğrafı olmayan bir ürün eklenince düzenin yerinde kalması, bağlantının yeni sekmede mi aynı sekmede mi açılacağı ve fotoğrafın üstüne yazılan başlığın okunması.
Web Tasarım Yüzlerce Parçanın ya da İlanın Arasında Süzgeçleri Telefon Ekranına Nasıl Sığdırır?
Aksaray merkezdeki bir ağır vasıta yedek parçacısının sitesinde yüzlerce parça vardır. Telefonda listeyi açan usta, ilk ürünü görmeden önce on dört süzgeçle karşılaşır: marka, model, yıl, parça grubu, ölçü, fiyat aralığı; hepsi alt alta, hepsi açık. Parmağıyla kaydırır, kaydırır; ilk balata resmi ancak beşinci ekranda görünür. Web tasarım bu on dört süzgeci atmaz; onlara telefonda başka bir yer bulur.
Küçük ekranda süzgeçler tek bir düğmenin ardına çekilir. Liste, üstünde yalnızca “Süzgeçler” yazan bir düğmeyle açılır; ürünler ilk ekrandan görünür. Düğmeye dokunulduğunda süzgeçler ekranın tamamını kaplayan bir panelde gelir. Yarım açılan dar bir çekmece yerine bütün ekranın kullanılması bilinçli bir seçimdir: seçenekler iri yazılır, parmak yanlış satıra değmez. Panelin dibinde tek bir düğme durur ve kaç sonuç gösterileceğini söyler.
Süzgeçlerin sırası rastgele olmaz. En çok kullanılan üçü en üstte, açık durur; gerisi adlarıyla kapalı bekler, dokunulunca açılır. Hangilerinin en çok kullanıldığı tahmin edilmez, sitenin kayıtlarından okunur; yedek parçada bunlar çoğu zaman araç markası, model ve parça grubudur. Seyrek kullanılan süzgeç atılmaz, yalnızca aşağıya iner. Uzun bir marka listesinin başına küçük bir arama kutusu konur; kimse kırk adı okumak istemez.
Seçilen her şey, listenin üstünde küçük birer etiket olarak görünür: “çekici”, “fren”, “ön aks”. Etiketin yanındaki çarpıya dokunan, yalnızca o seçimi kaldırır; ötekiler yerinde kalır, paneli yeniden açmak gerekmez. Seçim yapıldıkça sonuç sayısı da değişir: düğmenin üstünde “kırk iki parçayı göster” yazarken bir işaret daha konunca “yedi parçayı göster” olur. Ziyaretçi, daralttığı listenin boşalmak üzere olduğunu panelden çıkmadan görür.
İki küçük ayrıntı çok işi kurtarır. Birincisi “hepsini temizle” bağlantısıdır: tek dokunuşla bütün seçimler kalkar, liste baştaki hâline döner. İkincisi boş sonuçtur. Seçimler hiçbir parçayla buluşmuyorsa sayfa yalnızca “sonuç yok” demez; hangi seçimin listeyi boşalttığını söyler: “Bu modelde ön aks parçası yok; model seçimini kaldırırsanız on bir parça var.” Ziyaretçi neyi gevşeteceğini bilir; dükkânda parça kalmadığını sanıp çıkmaz.
Geniş ekranda süzgeçler listenin yanında açık durabilir; aynı düzen telefona küçültülerek taşınmaz, yeniden kurulur. Bunun yapılıp yapılmadığı dışarıdan bakılınca anlaşılır. Web tasarım konuşulmadan önce büyüteç gelir. Halıyı onaracak usta onu önce yere yayar, büyüteci eline alır, ilmek ilmek bakar; bakarken hiçbir şeyi sökmez. Sitenize bakış da böyledir: dışarıdan, şifre istemeden, ücretsiz. Süzgeç paneli, telefonda bir parça aranarak denenir.
Uzun Bir Başlık ya da Fotoğrafsız Bir Ürün Eklendiğinde Sayfanın Düzeni Yerinde Kalıyor mu?
Aksaray ilinde bir mandıranın sitesi açıldığı gün ürün kartları kusursuz duruyordu: dört peynir, dört kare fotoğraf, altlarında ikişer kelimelik adlar. Aylar sonra listeye yeni bir peynir eklendi. Adı üç satır tutuyordu; hangi sütten yapıldığı, kaç ay bekletildiği, hangi ambalajda satıldığı adın içindeydi. Fotoğrafı da henüz çekilmemişti. O kart ötekilerden uzadı, yanındaki alt satıra düştü; sıra dağıldı, fiyatlar başka başka hizalarda kaldı.
Tasarım derli toplu örneklerle çizilir, dağınık gerçekle yaşar. Çizim masasında her ürünün adı kısadır, her fotoğraf aynı ışıkta çekilmiştir, her açıklama üç satırdır. Site ise yıllarca içine ürün girilen bir yerdir ve ürünü giren kişi tasarımcı değildir: mandıranın sahibidir, akşam, telefonundan girer. Uzun adı kısaltmayı, fotoğrafı kırpmayı düşünmez; düşünmek zorunda da değildir. Düzen, onun gireceği her şeyi taşıyabilecek biçimde kurulur.
Bu yüzden düzen, yayına çıkmadan önce en kötü örneklerle denenir. Akla gelen en uzun ürün adı yazılır. Bir ürün fotoğrafsız bırakılır. Liste önce tek ürünle, sonra yüz ürünle doldurulur; fiyatı girilmemiş, açıklaması tek kelime olan birer kart eklenir. Çok büyük bir fotoğraf ile çok küçük bir fotoğraf yan yana yüklenir. Sayfa bunların hepsinde düzgün duruyorsa sıradan bir günde de düzgün durur.
Düzeni yerinde tutan birkaç yalın kuraldır. Ürün adı iki satırda biter; sığmayan kısım üç noktayla kesilir, adın tamamı ürünün kendi sayfasında okunur. Yüklenen fotoğraf küçük de olsa büyük de olsa tek biçimde gösterilir: kart fotoğrafa uymaz, fotoğraf karta göre kırpılır. Fotoğraf yoksa yeri boş kalmaz; mandıranın işaretini taşıyan sade bir yer tutucu durur. Kartların boyu eşittir; fiyat her kartta aynı hizadadır.
Kurallar yerinde olsa bile her eklemeden sonra sayfaya bir kez bakılır. Ürünü giren kişi listeyi telefonda açar: yeni kart ötekilerle aynı boyda mı, ad nerede kesilmiş, kesildiği yer anlamı bozuyor mu? “Tam yağlı olgun…” diye biten ad okura bir şey söyler; “Özel üretim geleneksel…” diye biten söylemez. Ayırt edici söz adın başına alınır; bu tasarım işi değil, yazım alışkanlığıdır.
Dağılmış bir ürün sırasını görmek için siteye girmek gerekmez; dışarıdan bakan da fark eder. Web tasarım büyüteci altında böyle bir sıra bir söküktür; ilmeklerin bıraktığı yer. Karşısına üç not yazılır. Halının neresinde açılmış: ürün listesinin ikinci sırasında. Müşterinin ayağı nerede takılıyor: fiyatı ararken gözü satır atlıyor. Hangi ayın listesinde yeniden ilmeklenecek: bunu işin büyüklüğü ve sizin onayınız belirler.
Bağlantıya Dokunan Ziyaretçi Yeni Bir Sekmeye mi Gönderilmeli, Aynı Sekmede mi Kalmalıdır?
Güzelyurt’ta bir pansiyonun oda sayfasını telefonundan okuyan bir kadın, kahvaltı saatlerine gelmeden “yol tarifi” yazısına dokunur. Ekrana harita gelir. Yola bakar, aklına yazar ve oda sayfasına dönmek ister; sayfa ortada yoktur. Harita, o fark etmeden yeni bir sekmede açılmıştır; okuduğu sayfa arkada, öteki sekmede durmaktadır. Sekmeleri gösteren küçük kareye dokunmayı akıl etmezse pansiyonu baştan aramak zorunda kalacaktır.
Sekme, tarayıcının, yani internette gezdiğiniz programın, aynı anda açık tuttuğu sayfalardan her biridir. Bilgisayarda sekmeler ekranın üstünde yan yana görünür; telefonda bir düğmenin arkasında saklıdır ve çoğu kişi kaç sekmesinin açık olduğunu bilmez. Bu yüzden ilk kural yalındır: sitenin kendi sayfalarına giden bağlantılar aynı sekmede açılır. Odalar sayfasından fiyatlara, fiyatlardan iletişime geçen kişi tek bir yolda yürür; nerede olduğunu yitirmez.
Yeni sekmenin bedeli tek cümleyle şudur: geri tuşu, yeni açılmış bir sekmeden dışarı götürmez. Siteler yine de çoğu bağlantıyı yeni sekmede açar, çünkü sahibi ziyaretçinin siteden çıkmasından çekinir. Çekinmeye gerek yoktur: gitmek isteyen gider. Kalmak isteyen ise birikmiş sekmelerin arasında okuduğu sayfayı arar. Ziyaretçiyi sitede tutan, arkada açık bırakılmış bir sekme değil, aradığını bulduğu sayfadır.
Yeni sekmenin haklı olduğu durumlar bellidir ve hepsinde ölçü aynıdır: sayfadan ayrılmak ziyaretçiye bir şey kaybettirecek mi? Yarısı doldurulmuş bir rezervasyon formunun yanındaki “iptal koşulları” bağlantısı aynı sekmede açılırsa yazılanlar silinebilir. Sayfayla yan yana okunacak bir belge, bir fiyat listesi ya da bir kat planı da böyledir. Harita üçüncü örnektir: yola bakan kişi, oda sayfasına kaldığı satırdan dönmek ister.
Böyle bir bağlantının yanında küçük bir işaret durur: köşesinden ok çıkan bir kare ya da açıkça yazılmış “yeni sekmede açılır” sözü. Ziyaretçi neyle karşılaşacağını dokunmadan bilir; sayfasının arkada beklediğini de. Seçilen kural sitenin her yerinde aynı kalır. Bir sayfada aynı sekmede, ötekinde yenisinde açılan harita, ziyaretçiye her dokunuşta tahmin yaptırır. Telefonda harita bağlantısı kimi zaman harita uygulamasını açar; o da denenir.
Bağlantıların nasıl açıldığı, sayfalar tek tek düzenlenerek değil, sitenin bütünü için konan bir kuralla düzeltilir; ardından telefonda birkaç bağlantıya dokunularak denenir. Web tasarım işleri ilmek listesine yazılır. Her ayın listesi size gösterilir ve sizin onayınızla yürür; onaylamadığınız bağlantıya, düğmeye, sayfaya dokunulmaz. İşin sırası değişmez: önce göbek, sonra kenar. Bu sitede göbek, rezervasyona giden yoldur; sayfanın dibindeki bağlantılar sonra gelir.
Fotoğrafın Üstüne Yazılan Başlık Her Ekranda ve Her Fotoğrafta Okunuyor mu?
Ana yol üstündeki bir otelin sitesi, ilk ekranında geniş bir fotoğraf taşır: bina, önünde otopark, üstünde açık bir gökyüzü. Fotoğrafın ortasına beyaz harflerle bir başlık yazılmıştır. Büro bilgisayarında başlık binanın koyu cephesine denk gelir ve rahat okunur. Telefonda fotoğraf daralır, yazı yukarı kayar; beyaz harfler parlak gökyüzünün üstüne düşer. O akşam için oda arayan sürücü başlığı seçemez.
Fotoğrafın üstüne yazılan başlık, okunaklılığını fotoğraftan ödünç alır. Harfin arkasında ne varsa o belirler: koyu bir duvar, açık bir gök, yapraklı bir dal. Fotoğraf değiştiğinde zemin de değişir; kışın çekilen karede koyu duran yer, yazın çekilende ışıl ışıl olabilir. Ekran daraldığında fotoğraf başka yerinden kırpılır, satırlar başka yerden bölünür. Başlık her seferinde, kimsenin seçmediği bir yere konar.
Çıkış yollarının ilki, harfin arkasına kendi zeminini koymaktır. Fotoğrafın üstüne, yazının durduğu yerde koyulaşan yarı saydam bir perde serilir; fotoğraf görünmeyi sürdürür, harf hangi karenin üstüne gelirse gelsin okunur. İkinci yol daha açıktır: başlık, fotoğrafın bir köşesine yerleşen düz renkli bir panele yazılır. Panel fotoğrafın bir bölümünü örter; karşılığında yazı fotoğrafa hiç bağlı kalmaz.
Üçüncü yol fotoğraf seçilirken başlar. Yazının geleceği yerde sakin, tek tonlu bir alan bulunan kareler kullanılır: düz bir duvar, loş kalan bir cephe, koyu bir akşam göğü. Bu, fotoğrafçıya baştan söylenir; sonradan aranan boşluk çoğu karede bulunmaz. Dördüncü yol en yalın olanıdır: başlık fotoğrafın altına iner. Fotoğraf bütün hâliyle görünür, başlık düz zeminde durur; telefonda çoğu zaman rahat okunan düzen budur.
Dört yoldan hangisi tutulursa tutulsun, sayfa her genişlikte ayrı ayrı açılıp bakılır: dar telefonda, geniş telefonda, tablette, büro ekranında. Fotoğraf her değiştiğinde aynı tur yeniden atılır. Tek yasak şudur: başlık fotoğraf dosyasının içine yazılmaz. Resme gömülen yazı ekranla birlikte küçülür, satırı yeniden bölünemez, başka dile çevrilemez; ekranı sesli okuyan yardımcılar ve çoğu zaman arama motorları onu yazı olarak görmez.
İlk ekranınızdaki başlık telefonda nereye düşüyor? Görmek birkaç dakikalık iştir. Site adresinizi bırakın; sitenizi parasız büyüteç altına alırız ve şifre istemeyiz. Halının dört kenarı da görülür. Ardından web tasarım için bizi seçerseniz metin, çizim ve yazılım ayrı ellere dağılmaz, tek ekipte kalır. Her ay sonu sergisinde halı önünüze serilir: o ay yeniden dokunan yerler ve sıradaki iş, sade bir dille.
Müşterilerim süzgeçte seçim yaptıktan sonra “uygula” düğmesine basmayı unutuyor; seçim yapılır yapılmaz liste kendiliğinden yenilense bu unutkanlık bitmez mi?
Geniş ekranda işe yarar; liste süzgeçlerin yanında durduğu için değişim hemen görülür. Telefonda panel listeyi örttüğünden arkadaki değişim görülmez; bağlantı zayıfsa her dokunuş bir bekleme getirir. Orada daha uygun olan, panelin dibinde hep görünen ve sonuç sayısını yazan tek düğmedir: “yedi parçayı göster”. Sayı değiştikçe düğme kendini hatırlatır.
Ürün adlarım uzun, çünkü müşterim ayrıntıyı adında görmek istiyor; adı iki satırda kesmek yerine kartları büyütsek olmaz mı?
Olur, ama bedeli vardır: bütün kartlar en uzun ada göre büyür ve bir ekrana daha az ürün sığar. Daha uygun yol, adı ikiye ayırmaktır. Ayırt eden söz adın başında, iki satır içinde kalır; gramaj, ambalaj ve bekleme süresi gibi ayrıntılar adın altında, daha küçük ikinci bir satırda durur. Tamamı ürün sayfasında okunur.
Bağlantıya uzun basan misafir onu zaten kendisi yeni sekmede açabiliyor; ayrıca benim karar vermem neden gerekiyor?
Gerekçe tam da budur. Aynı sekmede açılan bağlantıyı isteyen kişi, çoğu telefonda uzun basarak, bilgisayarda sağ tıklayarak yeni sekmeye alabilir; yeni sekmeye gönderilmiş kişi ise bunu değiştiremez. Bu yüzden başlangıç ayarı, seçimi misafire bırakan olmalıdır: aynı sekme. Yeni sekmeyi yalnızca yarım kalacak bir iş ya da sayfanın yanında açık duracak bir belge için ayırın.
Başlığın arkasına koyu bir perde koydurdum, bu kez otelimin fotoğrafı akşam çekilmiş gibi kararmış görünüyor; perde hafifletilebilir mi?
Hafifletilebilir. Perdenin bütün fotoğrafı örtmesi gerekmez; yalnızca yazının durduğu kenarda koyu başlayıp karşı kenara doğru silinen bir geçiş çoğu zaman yeter, fotoğrafın geri kalanı aydınlık kalır. Bu da yetmiyorsa başlık küçük, düz renkli bir panele alınır ya da fotoğrafın altına iner. Hangisi seçilirse seçilsin, sonuca en dar telefon ekranında bakın.