Anasayfa › Web Tasarım
Web Tasarım
Web tasarım çalışmamızda ölçü, telefonu tek elle tutan ziyaretçinin baş parmağıdır; sayfadaki boşluk, açılır pencerelerin zamanı ve bağlantınız paylaşıldığında görünen kart da aynı masada kararlaştırılır.
Web Tasarım Telefon Ekranında Baş Parmağın Ulaştığı Yere Neyi Yerleştirir?
Kırklareli merkezde minibüste ayakta giden bir öğrenci, bir eliyle tutamağa asılmış, öteki elindeki telefonda akşam yemeği için köfteci arıyor. Ekrana dokunabilen tek parmağı, telefonu tutan elin baş parmağıdır. Açtığı sitede “Ara” düğmesi ekranın sol üst köşesinde duruyor; oraya uzanmak için telefonu avucunda kaydırması gerekiyor, minibüs de tam o sırada fren yapıyor. Web tasarım bu ânı hesaba katmak zorundadır.
İnsanlar telefonu sık sık tek eliyle kavrar ve aynı elin baş parmağıyla kullanır. Parmağın rahatça değdiği yer ekranın alt yarısıdır; ortaya doğru uzanmak kolay, üst köşelere erişmek zordur. Ekranlar büyüdükçe bu fark da büyümüştür. Bundan yalın bir yerleşim kuralı çıkar: ziyaretçinin en sık yapacağı iş parmağın altına, seyrek yapacağı iş yukarıya konur. Kural basittir, ama pek çok sitede tersi görülür.
Küçük bir işletmenin sitesinde en sık yapılan işler bellidir: telefonla aramak, yazılı mesaj göndermek, yol tarifi almak. Bu üçü çoğu zaman ekranın altına sabitlenen ince bir çubukta toplanır; sayfa kaydırılsa da çubuk yerinde kalır. Üzerindeki her düğme yalnızca simgeyle değil, sözle de adlandırılır: “Ara”, “Mesaj”, “Yol tarifi”. Üç düğme yeter; beşincisi eklendiğinde her biri küçülür ve parmak yanlış olana değer.
Üst bölüme az dokunulan şeyler konur: logo, işletmenin adı ve menü. Bunlar ziyaretçiye nerede olduğunu söyler; parmağın sık sık oraya gitmesi gerekmez. Menü düğmesi alışıldığı için çoğu sitede üst köşede kalır; içinden açılan liste ise parmağın uzanabildiği yüksekliğe indirilebilir. Asıl sakınılacak şey, tek önemli düğmeyi, yani aramayı ya da sipariş vermeyi, ekranın erişilmesi en zor köşesine yerleştirmektir.
Yer kadar ölçü de önemlidir. Bir düğme, üzerine inen parmağın kapattığı alandan küçük olmamalıdır; iki düğme arasında da parmağın ikisine birden değmesini önleyecek bir aralık kalmalıdır. Alt alta sıralanmış küçük yazılı bağlantılar fareyle kolay seçilir, parmakla seçilemez. Numaranın üzerine basıldığında telefon aramaya geçmeli, adrese basıldığında harita açılmalıdır. Ziyaretçi bunların hiçbirini fark etmez; fark ettiği, eksik olduklarında yaşadığı zorluktur.
Sabit çubuğun bir bedeli vardır: ekranın bir şeridini kaplar. Sayfanın son satırları çubuğun arkasında kalmamalı, çerez izni soran kutu ile çubuk üst üste binmemelidir; biri ötekinin düğmesini örterse ziyaretçi ikisini de kullanamaz. Web tasarım işinde yerleşim, tek elle tutulan bir telefonda sayfa baştan sona gezilerek sınanır. Ücretsiz site röntgeni, yani sitenizi dışarıdan okuduğumuz ilk çekim, düğmelerin yerini bir bulgu olarak yazar.
Sayfadaki Boşluk Neden Boşa Harcanmış Yer Değildir?
Kırklareli ilinde bir ayçiçeği tarlasının yanından geçen kişi, sıraların arasında bırakılmış toprağı görür. O aralık boşa harcanmış tarla değildir; bitki oradan ışık alır, kök oraya yayılır, makine oradan geçer. Tohumu sık atmak daha çok ürün demek değildir. Bir sayfadaki boşluk da benzer bir iş görür: yazının, fotoğrafın ve düğmenin nefes aldığı yerdir. Oysa site sahibinin ilk isteği çoğu zaman onu doldurmaktır.
İstek anlaşılırdır: ekran dardır, söylenecek çok şey vardır, boş kalan her yer kullanılmamış gibi görünür. Araya bir fotoğraf daha, bir cümle daha, bir kampanya kutusu daha girer. Sonunda sayfada her şey vardır, ama hiçbiri öne çıkmaz. Göz nereden başlayacağını bilemez; ziyaretçi sayfayı okumaz, üzerinde gezinir ve bir yerinde bırakır. Kalabalık sayfa bilgi vermez, gürültü yapar.
Boşluğun iki işi vardır. Birincisi gruplamaktır: birbirine yakın duran şeyleri göz bir bütün sayar, aralarına mesafe girenleri ayrı tutar. Fiyat, ait olduğu ürünün hemen altında durursa kimse hangisinin fiyatı olduğunu sormaz. İkincisi sıralamaktır: çevresinde geniş yer bırakılan başlık ya da düğme, sıkıştırılmış olandan önce görülür. Çizgi çekmeden, kutu çizmeden, yalnızca aralıkla sayfaya düzen verilebilir.
Aynı ölçü yazının içinde de geçerlidir. Bilgisayar ekranını bir uçtan öbür uca kaplayan satırı göz izleyemez; satır sonuna vardığında bir alttakinin başını kaçırır. Bu yüzden geniş ekranda yazı dar bir sütunda tutulur, iki yanı boş bırakılır. Satırlar arasında harflerin birbirine değmeyeceği kadar açıklık, paragraflar arasında da bir satırlık ara bulunur. Telefonda yazının kenarı ekranın kenarına yapışmaz.
Telefonda işe yarayan kural, her ekrana tek bir düşünce koymaktır. Ziyaretçi parmağını bir kez ittiğinde karşısına yeni bir konu çıkar: önce ne yaptığınız, sonra bir işiniz, sonra bir müşterinin sözü, sonra size ulaşmanın yolu. Her biri kendi başlığı ve kendi boşluğuyla gelir. Sayfa uzar, ama okumak kısalır; çünkü ziyaretçi her ekranda tek bir şeye bakar ve gerekirse geçer.
Ferah bir sayfa, söyleyeceğini bilen ve acele etmeyen bir işletmeyi düşündürür; bunu abartmamak gerekir, boşluk tek başına kimseyi müşteri yapmaz. Ölçüsü de vardır: fazla açılmış bir sayfada ziyaretçi boş ekranlar arasında kaybolur. Web tasarım çalışmasında her bölüm için tek bir soru sorarız: bu ekranda ziyaretçinin görmesi gereken tek şey nedir? Geri kalanı ya aşağıya iner ya da kendi sayfasına taşınır.
Açılır Pencereler ve Bildirim İzni Soran Kutular Ziyaretçiyi Ne Zaman Kaçırır?
Cumartesi sabahı İstanbul’dan yola çıkmadan önce Kıyıköy’de balık lokantası bakan biri, bir lokantanın sitesini telefonda açıyor. Yemek listesi daha belirmeden ekranı bir pencere kaplıyor: “Bültenimize katılın!” Çarpıyı buluyor, kapatıyor. Sayfayı gösteren program, yani tarayıcı soruyor: bu site size bildirim göndermek istiyor, izin veriyor musunuz? “Engelle”ye basıyor. Ardından bir sohbet balonu yükselip “Ara” düğmesinin üzerine oturuyor. Henüz tek bir yemek adı görmedi.
Bu kutuların hepsi iyi niyetle eklenir. Kampanya penceresi indirimi duyurmak, bülten kutusu e-posta adresi toplamak, bildirim sorusu ziyaretçiye sonradan ulaşabilmek, sohbet balonu soru soranı kaçırmamak içindir. Bilgisayarın geniş ekranında her biri bir köşede durur. Telefonda ise aynı pencere ekranın tamamını örter; ziyaretçi, okumaya geldiği sayfayı görebilmek için önce kapatma işaretini aramak zorunda kalır.
Sorun pencerenin varlığından çok zamanındadır. Ziyaretçi henüz ne sattığınızı bilmiyorken e-posta adresini istemek, kapıdan giren kişiye selam vermeden kartvizit sormaya benzer. Bildirim izni için durum daha da nettir: neyin bildirileceğini bilmeyen kişi büyük olasılıkla “engelle”ye basar ve tarayıcılar bu kararı hatırlar; aynı soru o ziyaretçiye bir daha gösterilemeyebilir. Erken sorulan soru, sonradan haklı olarak sorulabilecek soruyu da harcar.
Arama motoru tarafında da bir kayıt vardır. Google, telefonda içeriğe ulaşmayı zorlaştıran, araya giren pencerelerin bulunduğu sayfaların aramalarda daha geride değerlendirilebileceğini yıllar önce duyurmuştu. Aynı duyuruda yasal zorunluluktan doğan kutular, örneğin çerez izni ya da yaş doğrulaması, bunun dışında tutulmuş; ekranın makul bir bölümünü kaplayan ve kolayca kapatılan şeritler de sorun sayılmamıştı. Bunun bugünkü ağırlığını dışarıdan kimse kesin bilemez.
Pencere her zaman kötü değildir; yerinde açılanı işe yarar. Üç koşul aranır. Ziyaretçi sayfayı okuduktan sonra gelmelidir: yazının sonunda ya da bir düğmeye kendisi dokunduğunda. Bir kez sorulmalıdır; “hayır” diyen kişiye sonraki sayfada yeniden sorulmaz. Kapatması kolay olmalıdır: çarpı parmağın rahatça bulacağı büyüklükte durur, pencerenin dışına dokunmak da onu kapatır. “Hayır, indirim istemiyorum” gibi utandıran düğme yazıları kullanılmaz.
Sohbet balonu ve sabit düğmeler için ek bir kural vardır: hiçbir şey bir başkasının üzerine binmez. Balon arama düğmesini, bildirim şeridi menüyü, kampanya kutusu fiyatı örtmemelidir. Web tasarım çalışmasında sitedeki bütün açılan kutuların dökümünü çıkarırız: hangisi ne zaman açılıyor, ne istiyor, nasıl kapanıyor? Kaldırılacak ya da geciktirilecek olanlar reçeteye, yani o ay yapılmak üzere onayladığınız işlerin listesine yazılır.
Sitenizin Bağlantısı WhatsApp’ta Paylaşıldığında Karşı Tarafa Nasıl Görünür?
Bir müşteriniz arkadaşına sizi öneriyor ve sitenizin adresini WhatsApp’ta gönderiyor. Karşı tarafın ekranında adresin üstünde küçük bir kart belirir: bir resim, bir başlık, bir satır açıklama. Kartta dükkânınızın fotoğrafı ve “Vize’de el yapımı peynir” yazıyorsa arkadaşı ne gönderildiğini dokunmadan anlar. Yalnızca çıplak bir adres ya da ilgisiz bir resim çıkıyorsa mesaj, tanımadığı bir yerden gelmiş bağlantıya benzer.
Bu kartı mesajlaşma uygulaması kendisi hazırlar. Bağlantı yapıştırıldığında sayfaya bakar ve kodunda tam bu iş için yazılmış birkaç satırı arar: paylaşım başlığı, paylaşım açıklaması ve paylaşım resmi. Bu satırlar sayfanın üzerinde görünmez; bağlantıyı önizleyen uygulamalar için yazılır. Satırlar yazılmışsa kart sizin seçtiğiniz sözlerle ve sizin seçtiğiniz resimle kurulur. Aynı satırları sosyal medya uygulamalarının çoğu da kullanır.
Satırlar eksikse uygulama elindekiyle yetinir. Başlık olarak sayfanın genel başlığını alabilir; o da “Anasayfa” ya da “Başlıksız” ise kartta bu yazar. Resim bulamazsa kartı resimsiz bırakabilir ya da sayfadan rastgele birini seçebilir: bir ok işareti, bir ödeme logosu, başka bir ürünün fotoğrafı. Hangi uygulamanın ne yapacağı değişir; değişmeyen, sonucun sizin seçiminiz olmamasıdır. Kimi durumda kart hiç oluşmaz.
İyi bir kart üç şeyi doğru yapar. Başlık, sayfanın ne olduğunu birkaç kelimeyle söyler. Açıklama tek cümledir ve mesajı alan kişiye bağlantıyı neden açması gerektiğini söyler. Resim sade ve küçük boyda da seçilebilir olmalıdır; üzerine sığdırılmış uzun yazılar telefonda okunmaz. Her önemli sayfa kendi kartını taşır: anasayfa işletmeyi, ürün sayfası ürünü, iletişim sayfası dükkânın kapısını gösterir.
Kartın yanında anılması gereken bir parça daha vardır: tarayıcıda açık sayfaların adlarının dizildiği şeritte, sayfa adının solunda duran simge. Simge tanımlanmamışsa orada boş bir kâğıt ya da siteyi kuran yazılımın kendi işareti görünebilir. Aynı simge kimi zaman arama sonuçlarında sitenizin adının yanında da görünür; yer imlerinde de o durur. Logonuzun küçük boyda seçilebilen yalın bir hâli bu iş için yeterlidir.
Bir uyarı: uygulamalar hazırladıkları kartı bir süre saklar. Resmi ya da başlığı değiştirdiğinizde daha önce paylaşılmış bağlantılarda eski kart görünmeyi sürdürebilir; yenisinin ne zaman geleceği uygulamaya göre değişir. Bu yüzden kartlar site yayına girmeden hazırlanır. Web tasarım işinde bunu teslimden önce gerçek bir sohbette deneriz. Sitenizin adresini bir satırla yazın; ücretsiz site röntgenini çeker, sayfalarınızın paylaşıldığında nasıl göründüğünü de bulgu listesine ekleriz.
Solak müşterilerim için düğmelerin yerini değiştirmek gerekir mi?
Gerekmez. Ekranın alt bölümünde, boydan boya uzanan bir çubuktaki düğmelere iki elin baş parmağı da rahatça ulaşır. Erişmesi zor olan yerler üst köşelerdir ve bu, telefon hangi elle tutulursa tutulsun değişmez. Sorun, tek bir küçük düğmenin sağ ya da sol alt köşeye yaslanmasında çıkar; öteki elle tutan kişi ona zor uzanır.
Boşluk bırakınca sayfam uzuyor; ziyaretçi o kadar aşağı iner mi?
Telefonda aşağı inmek zahmetsiz bir harekettir; insanlar aradıklarına yaklaştıklarını gördükçe iner. Vazgeçiren uzunluk değil, nerede olduğunu kestirememektir. Her ekranda tek bir konu ve açık bir başlık varsa ziyaretçi kendi sorusuna gelene kadar hızla geçer. En önemli bilgi ile arama düğmesi yine de ilk ekranda bulunmalıdır.
Kampanyalarımı bildirimle duyurmak istiyorum; izin sorusunu hiç sormamalı mıyım?
Sorabilirsiniz, ama ilk saniyede değil. Soru, ziyaretçi bunu kendisi istediğinde anlam kazanır: “ürün gelince haber ver” ya da “siparişim yola çıkınca bildir” gibi bir düğmeye dokunduğunda. O zaman neye izin verdiğini bilir. Bir kez “engelle” diyen ziyaretçiye tarayıcı aynı soruyu çoğu zaman yeniden göstermez; ilk izlenim burada geri alınamaz.
Sitemin bağlantısını WhatsApp’ta gönderince yanında ilgisiz bir resim çıkıyor; bunu nasıl düzeltirim?
Kartın resmi, sayfanın kodundaki paylaşım satırından alınır. Satır yoksa uygulama kartı resimsiz bırakabilir ya da kendi bulduğu bir resmi koyabilir; satırda siteyi kuran kişinin bıraktığı hazır resim duruyorsa kartta o çıkar. Satıra kendi fotoğrafınız yazılır. Uygulama kartı bir süre sakladığı için değişiklik hemen görünmeyebilir; denemek için adresin sonuna bir soru işareti ile bir harf ekleyin.