Bu blogu nasıl tasarladım
Güzel görünen bir blog yapmak kolaydı. Okunan bir blog yapmak için önce ekranda nasıl okuduğumuza baktım.
Ekim'in ilk günleri. Bir yandan videolarımı bitirmeye çalışıyorum, bir yandan da sosyal medyada nasıl duracağımı baştan düşünüyorum. Bu blog da o telaşın ortasında çıktı.
Portfolyomu bir vitrin gibi tutmak istiyorum. Az iş, iyi işler, uzun açıklama yok. Lakin iş yaparken mütemadiyen bir şeyler araştırıyorum, deniyorum, bazen de yarı yolda vazgeçiyorum. O kısım şimdiye kadar hiçbir yerde durmuyordu. Vitrine koysam vitrin bozulacak, koymasam kaybolup gidecek. Velhasıl ikisini ayırmaya karar verdim.
Peki okunan bir blog neye benzer? Aklıma ilk gelenler belli. Kart ızgaraları… büyük kapak görselleri… kaydırdıkça beliren yazılar… Hangisi okumaya yarıyor, açıkçası bilmiyordum. İşe oradan başladım.
İnsanlar okumuyor, tarıyor
Nielsen Norman Group yıllardır göz izleme çalışmaları yapıyor ve sonuç pek değişmiyor: ekranda metni kelime kelime okuyanlar azınlıkta, çoğumuz tarıyoruz.1 (Ben de öyle yapıyorum, itiraf edeyim.) En verimli tarama biçimine "katmanlı pasta" diyorlar. Göz başlıktan başlığa atlıyor, ilgisini çeken bölüm olursa içine giriyor.2
Bunun bana söylediği basit: yalnızca başlıkları okuyan biri de yazının ne dediğini anlayabilmeli. Nitekim her yazının başında tek cümlelik bir özet var. Ana sayfada da tarih, başlık ve bir satırdan başka bir şey yok. Biri hiçbir yazıyı açmadan da neyle uğraştığımı, nasıl düşündüğümü görebilsin istedim.
Bir karar daha var, bazılarına ters gelebilir. Burada "taslak", "fikir aşamasında" gibi etiketler yok. Yarım kalmış bir araştırmayı bile yazacaksam onu bitmiş bir metin olarak yazıyorum. Zira okuyana ciddi durmayan bir şeyi yayınlamanın manasını göremiyorum.
Satır ne kadar uzun olmalı
Baymard'ın derlediği çalışmalara göre rahat okunan satır 50 ile 75 karakter arasında.3 Erişilebilirlik standardı WCAG ise 80 karakteri üst sınır sayıyor.4
Rakamları kendi gözümle görmek istedim. Okuma deneyimiyle bilinen 14 blogu açıp yazı boyutunu, satır aralığını ve metin sütununun genişliğini tek tek ölçtüm. Rahat okunanlar hep aynı aralıkta çıktı. Craig Mod'da yazı 20 piksel, sütun 746. Medium'da 20'ye 680. Every'de 20'ye 736.
Dan Luu'nun sitesi ise ibretlik bir örnek. Geniş ekranda bir satır 224 karaktere çıkıyor, satırın sonundan bir sonrakinin başına dönerken göz yolunu kaybediyor. Kanaatimce iyi bir yazının kötü bir sayfada heba olmasının en net hali bu.
Burada yazı masaüstünde 20, telefonda 17 piksel. Satır aralığı yazı boyutunun 1,55 katı, metin sütunu 680 piksel. Bu da Türkçe bir satıra 65 ile 70 karakter arası denk geliyor. Malum, Türkçe kelimeler uzun, satırlar İngilizce bir metne göre biraz erken kırılıyor. Yine de aralığın içinde kalıyor.
Kart yok, liste var
Blog ana sayfalarında en sık gördüğüm şey kart ızgarası. Her yazıya bir kutu, her kutuya bir görsel. NN/g'ye göre kartlar birbirinden farklı içerikleri yan yana koymak için iyi, lakin blog yazıları gibi birbirine benzeyen şeyleri taramak listeye göre daha zor ve daha çok yer kaplıyor.5 İşin bir de görsel tarafı var. Her yazıya görsel bulma mecburiyetine girince bir süre sonra alakasız görseller koymaya başlıyorsun.
Ben listeyi seçtim. Yıla göre gruplu, her satırda tarih, başlık ve bir cümle.
Vitrin koyu, burası açık
Portfolyom koyu, burası açık. Sebebi NN/g'nin bir bulgusu: normal görüşte açık zemin okumada daha iyi sonuç veriyor ve fark yazı küçüldükçe büyüyor.6 Uzun metin okunacak bir yerde bu bana yetti. Telefonun ya da bilgisayarın koyu moddaysa site de koyu açılıyor, sağ üstteki düğmeyle istediğin zaman değiştirebiliyorsun.
Olmayanlar ve açık bıraktığım bir kapı
Açılır pencere yok, bülten kutusu yok, yorum yok, reklam yok. Çerez de yok, o yüzden çerez uyarısı da yok. Fontlar bile başka bir sunucudan gelmiyor.
Ölçtüğüm sitelerde bunların insanı ne kadar yorduğunu açık açık gördüm. Every'nin bir yazı sayfasında aynı anda beş sabit katman vardı: üst çubuk, çerez bandı, kayıt penceresi ve iki köşe kutusu. Substack'teki bir yazıda dört kere abone olmam istendi. Linear'ın sayfası 217 ayrı script yüklüyordu. Ve hiçbiri yazıyı daha iyi okutmuyor.
Buna mukabil açık bıraktığım bir kapı var: yapay zekâ botları. Hem arama yapan botlar hem de model eğitmek için siteleri tarayanlar buraya girebiliyor. Yazılarımın bir modelin eğitiminde kullanılması bana fayda edecekse o kapıyı kapatmanın bir anlamı yok.
Neden ayrı bir adres
Önce burakreis.blog gibi tamamen ayrı bir alan adı düşündüm. Yıllığı 20 dolar, şimdilik vermek istemedim. Sonra Google'ın bir alt alan adına da ayrı bir site adı verebildiğini öğrendim.7 Blog şimdi blog.designedbyburak.com adresinde. Portfolyonun menüsünde buraya giden bir bağlantı yok, vitrin sade kalsın diye. Ama burada kimin yazdığı her sayfada yazıyor, iki site birbirini biliyor.
Bir şey gözüne batarsa, satır mı uzun, yazı mı küçük, bana yaz: hello@designedbyburak.com
NOT: Bu yazıyı yazarken blogu bir de çok dar bir ekranda açtım, üstteki menü sayfadan taşıyordu. Düzelttim. Yine de ilk hatanın tam da bu yazıyı yazarken çıkması biraz komik oldu.