E-bülten tasarımı ve şablonu: okunabilir, mobil uyumlu ve erişilebilir bülten

E-bülten tasarımı neden içerik kadar önemli?

Okur bir bülteni satır satır okumaz; önce göz gezdirir, ilgisini çeken bir başlık ya da görsel görürse durur. Tasarım bu göz gezdirme anını yönetir. Aynı içerik dağınık bir düzende sunulduğunda okur aradığını bulamaz ve bülteni kapatır; net bir hiyerarşiyle sunulduğunda ise birkaç saniyede neyin kendisini ilgilendirdiğine karar verir.

Tasarımın ikinci işi güvendir. Her sayıda aynı yerde duran logo, aynı renkler, aynı düzen ve tanıdık bir gönderen adı, okura bu iletinin beklediği kurumdan geldiğini söyler. Her sayıda değişen, kalabalık ve reklam broşürüne benzeyen bir düzen ise hem okurun güvenini hem de bültenin e-posta kutusundaki itibarını zayıflatabilir. Teslim edilebilirliğin teknik tarafını mail neden spama düşer yazımızda ayrıca ele alıyoruz.

İyi bir e-bülten şablonunun bölümleri

Aşağıdaki tablo, şirket bültenlerinde ve ajansların hazırladığı müşteri bültenlerinde en sık kullanılan yapıyı yukarıdan aşağıya özetler. Her bölümün tek bir görevi vardır; bir bölüm iki işi birden yapmaya çalıştığında okur kararsız kalır.

Ön izleme metni ve üst alan

Okur bülteni açmadan önce gelen kutusunda gönderen adını, konu satırını ve ön izleme metnini görür. Ön izleme metni, tasarımın görünmeyen ama en çok okunan parçasıdır; boş bırakıldığında e-posta programı bültenin ilk satırındaki rastgele bir metni, çoğu zaman da "tarayıcıda görüntüle" gibi bir ifadeyi gösterir. Konu satırı ile ön izleme metnini birlikte düşünün; konu satırı yazımı için e-posta konu satırı optimizasyonu rehberimize bakabilirsiniz.

Üst alan sade olmalıdır. Logonuz, bültenin adı ve gerekiyorsa sayı ya da dönem bilgisi yeterlidir. Web sitesindeki menüyü olduğu gibi bültenin üstüne taşımak, okurun dikkatini ana içerikten uzaklaştırır ve telefonda değerli alanı tüketir.

Ana içerik bloğu

Her sayının tek bir ana mesajı olmalıdır: yeni bir ürün, bir etkinlik daveti, bir rapor ya da önemli bir kurum haberi. Ana içerik bloğu bu mesajı bir başlık, kısa bir giriş paragrafı, isteğe bağlı bir görsel ve tek bir çağrı düğmesiyle verir. Ana mesajı belirleyemediğiniz bir sayı, genellikle içerik planının netleşmediğini gösterir; bu durumda tasarımı değil, içeriği yeniden düşünmek gerekir.

İkincil içerik blokları

Diğer haberler, duyurular ve yazılar ikincil bloklarda yer alır. Her blokta aynı düzeni kullanın: kısa bir başlık, bir iki cümlelik özet ve devamını okumak için bir bağlantı. Okur aynı düzeni birkaç kez gördüğünde bülteni çok daha hızlı tarar. İkincil blokların her birinde ayrı bir renkli düğme kullanmak yerine metin bağlantısı tercih etmek, ana çağrının öne çıkmasını sağlar.

Alt alan

Alt alan, bültenin yasal ve kurumsal bilgilerinin yer aldığı bölümdür: kurumun kimlik bilgileri, iletişim adresi, okurun neden bu bülteni aldığını hatırlatan kısa bir not, abonelik tercihlerine ve ret işlemine giden bağlantılar. Bu bölüm çoğu zaman küçük ve soluk bir yazıyla sona sıkıştırılır. Oysa okurun aradığında bulabilmesi gereken bilgiler buradadır; yazıyı okunabilir tutun ve bağlantıları belirgin gösterin.

E-bültende bulunması gereken bilgiler tasarıma nasıl yerleşir?

Ticari nitelikteki bir e-bülten, tasarım aşamasında düşünülmesi gereken bazı içerik kurallarına tabidir. Bu kurallar 6563 sayılı Elektronik Ticaretin Düzenlenmesi Hakkında Kanun ve buna dayanan Ticari İletişim ve Ticari Elektronik İletiler Hakkında Yönetmelik ile belirlenmiştir. Bültenin ticari elektronik ileti sayılıp sayılmadığı ve gönderim için hangi onayın gerektiği ayrı bir konudur; bunu bülten göndermek için izin şart mı ve İYS ticari e-posta kuralları yazılarımızda anlatıyoruz. Burada yalnızca bu bilgilerin şablonda nereye ve nasıl yerleşeceğine odaklanıyoruz.

• Kimlik bilgileri: Yönetmeliğin m.8 hükmü, ticari elektronik iletinin başlığında ya da içeriğinde tacirler için MERSİS numarası ve ticaret unvanına, esnaflar için ad soyad ile T.C. kimlik ya da vergi kimlik numarasına yer verilmesini ister. Marka ya da işletme adı gibi tanıtıcı bilgiler bunlara ek olarak kullanılabilir. Pratikte bu bilgiler alt alanda, her sayıda aynı yerde durur.
• İletişim bilgisi: Kanunun m.7 hükmü ve Yönetmeliğin m.8 hükmü, iletide erişilebilir durumdaki iletişim bilgilerinden en az birinin bulunmasını ister. E-bültende bu genellikle yanıt verilebilen bir e-posta adresi ya da telefon numarasıdır.
• Ret imkânı: Kanunun m.8 hükmü, ret bildiriminin elektronik iletişim araçlarıyla kolay ve ücretsiz iletilmesini sağlamayı ve bunun için gerekli bilgiyi iletide sunmayı hizmet sağlayıcıya yükler. Yönetmeliğin m.9 hükmüne göre ret imkânı gönderilen her iletide yer alır ve ileti hangi kanaldan gönderildiyse ret de aynı kanaldan sağlanır.
• Niteliği belirten ibare: Yönetmeliğin m.8 hükmüne göre iletinin niteliği içeriğinden açıkça anlaşılmıyorsa tanıtım, kampanya ya da bilgilendirme gibi belirleyici bir ibare kullanılır; e-postada bu ibarenin yeri konu bölümüdür.
• Promosyonlar: Bültende indirim, hediye ya da promosyon amaçlı yarışma varsa bu durum iletide açıkça belirtilir; geçerlilik ve katılım şartları da Yönetmeliğin m.8 hükmü uyarınca kolayca ulaşılabilen bir yöntemle, örneğin bu şartlara ayrılmış bir sayfa bağlantısıyla sunulur.

Ret bağlantısı tıklandıktan sonra ne olacağı da tasarımın parçasıdır. Okuru giriş yapmaya zorlamayan, işlemi anında tamamlayan ve sonucu açıkça bildiren bir sayfa hazırlayın. İsterseniz bu sayfada okura sıklık ya da konu tercihi sunabilirsiniz, ancak bu tercihleri ret işleminin önüne bir engel olarak koymayın. Ret talebinin uygulanmasına ilişkin süreler Yönetmeliğin m.9 ve m.10 hükümlerinde düzenlenmiştir; listenizin bu talepleri yönetmelikte belirtilen süre içinde işlediğinden emin olun. Abone listesi tarafındaki pratik süreci e-bülten abone listesi oluşturma rehberimizde anlatıyoruz.

Mobil uyumlu e-bülten tasarımı

Okurlarınızın önemli bir kısmı bülteni telefonda açar ve çoğu zaman tek elle, kısa bir arada göz gezdirir. Bu yüzden şablonu önce telefon ekranında düşünün, sonra masaüstüne uyarlayın. Masaüstünde güzel görünen çok sütunlu bir düzen, telefonda küçülmüş ve okunamayan bir görüntüye dönüşebilir.

• Tek sütunlu bir düzeni temel alın; yan yana bloklar telefonda alt alta dizilecek şekilde kurulmalıdır.
• Yazıyı büyütmeden okunabilecek bir boyutta tutun; okurun parmaklarıyla yakınlaştırmak zorunda kaldığı bülten kapanır.
• Düğmeleri parmakla rahatça dokunulacak büyüklükte yapın ve bağlantıları birbirine çok yakın yerleştirmeyin.
• Paragrafları kısa tutun; telefonda uzun bir paragraf, ekranı dolduran bir metin duvarı gibi görünür.
• Görsellerin ekran genişliğine göre küçüldüğünden, metnin görselin içine gömülmediğinden emin olun.
• Koyu mod kullanan okurları düşünün; şeffaf arka planlı logolar ve sabit renkli metinler koyu modda kaybolabilir.

Görsel ve metin dengesi

Bülteni tamamen tek bir büyük görselden oluşturmak cazip görünebilir; tasarım tam istediğiniz gibi durur. Ancak bu yaklaşımın ciddi sakıncaları vardır. Birçok e-posta programı görselleri varsayılan olarak göstermez; okur görselleri açana kadar boş bir kutu görür. Görselin içindeki metin ekran okuyucular tarafından okunamaz, aranamaz, kopyalanamaz ve telefonda küçülerek okunmaz hâle gelir. Ayrıca yalnızca görselden oluşan iletiler, filtreler tarafından daha şüpheli karşılanabilir.

Sağlıklı yaklaşım, bültenin ana mesajını gerçek metinle vermek ve görseli metni destekleyen bir unsur olarak kullanmaktır. Kendinize şu soruyu sorun: görseller hiç yüklenmeseydi okur bu sayının ana mesajını anlar ve ana çağrıya ulaşabilir miydi? Cevap hayırsa, şablonu yeniden düzenleyin.

• Başlıkları, tarihleri, yerleri ve çağrı ifadelerini görselin içine değil, metin olarak yazın.
• Görselleri bülteni ağırlaştırmayacak şekilde sıkıştırın; yavaş yüklenen bir görsel, okurun ilk izlenimini bozar.
• Haber görsellerinde, kurum içi fotoğraflarda ve etkinlik karelerinde kişilerin görüntüsünün kullanımına dikkat edin; çalışan ve katılımcı fotoğrafları konusunu kurum içi bülten rehberimizde ele alıyoruz.
• Kullanım hakkına sahip olmadığınız görselleri bültende kullanmayın; görsel kaynağını ve izni dosyada saklayın.

Erişilebilir e-bülten: alt metin, kontrast ve okunabilirlik

Erişilebilirlik, bülteninizi görme güçlüğü olan, ekran okuyucu kullanan, renk ayırt etmekte zorlanan ya da sadece güneş altında telefondan okuyan herkesin okuyabilmesi demektir. Erişilebilir bir tasarım çoğu zaman herkes için daha okunaklı bir tasarımdır.

Alt metin

Her anlamlı görsele, görselin ne anlattığını kısaca söyleyen bir alt metin yazın. Alt metin, görsel yüklenmediğinde okurun göreceği metindir ve ekran okuyucular tarafından seslendirilir. "Görsel" ya da dosya adı gibi anlamsız ifadeler yerine "Yeni üretim tesisinin açılışında kurdele kesimi" gibi içerik anlatan bir cümle kullanın. Süsleme amaçlı çizgi ve desenlere ise boş alt metin verin ki ekran okuyucu bunları gereksiz yere okumasın.

Renk ve kontrast

Metin ile arka plan arasında yeterli kontrast olmalıdır. Açık gri zemin üzerine açık gri yazı ya da renkli bir görselin üzerine yerleştirilmiş ince yazı, birçok okur için okunmaz. Bilgiyi yalnızca renkle vermeyin; örneğin bir bağlantıyı sadece rengiyle değil, altı çizili ya da açık bir ifadeyle de belli edin. Marka renkleriniz yeterli kontrast sağlamıyorsa, bu renkleri metin rengi olarak değil vurgu unsuru olarak kullanın.

Okunabilir yapı

• Başlıkları gerçek başlık olarak işaretleyin; ekran okuyucu kullananlar bülteni başlıklar arasında gezerek okur.
• Bağlantı metinlerini anlamlı yazın: "buraya tıklayın" yerine "raporun tamamını okuyun" gibi bağlantının nereye gittiğini söyleyen ifadeler kullanın.
• Tamamı büyük harfle yazılmış uzun metinlerden ve iki yana yaslanmış paragraflardan kaçının; ikisi de okumayı zorlaştırır.
• Okuma sırasının mantıklı olduğundan emin olun; görsel olarak yan yana duran bloklar, ekran okuyucuda beklenmedik bir sırayla okunabilir.
• Bültenin dilini doğru tanımlayın ki ekran okuyucular metni doğru telaffuz etsin.

Tek ana çağrı ilkesi

Her bülten, okurdan bir şey yapmasını ister: bir yazıyı okumasını, bir etkinliğe kaydolmasını, bir raporu indirmesini ya da bir ürünü incelemesini. Aynı anda birçok farklı eylem istemek, okurun hiçbirini yapmamasıyla sonuçlanabilir. Bu yüzden her sayı için bir ana çağrı belirleyin ve onu görsel olarak en belirgin unsur yapın.

• Ana çağrıyı bir düğmeyle verin ve düğme metninde eylemi açıkça yazın: "Kaydınızı yapın", "Raporu indirin" gibi.
• Ana çağrıyı ana içerik bloğunun içinde, okurun ilk ekranda göreceği bir yere koyun.
• İkincil içeriklerde düğme yerine metin bağlantısı kullanarak ana çağrıyla yarışmalarını önleyin.
• Çağrının götürdüğü sayfanın, bültende verilen sözü tuttuğundan emin olun; bültende etkinlik daveti varsa bağlantı doğrudan kayıt sayfasına gitmelidir.
• Bağlantılarınıza ölçüm amacıyla parametre ekliyorsanız bunu tutarlı bir düzenle yapın; ayrıntıları ölçüm rehberimizde anlatıyoruz.

E-bülten şablonu nasıl hazırlanır? Adım adım

Her sayı için sıfırdan tasarım yapmak hem zaman kaybıdır hem de tutarlılığı bozar. Bunun yerine bir kez iyi düşünülmüş bir şablon hazırlayıp her sayıda yalnızca içeriği değiştirmek çok daha verimlidir.

• Bültenin amacını ve okurunu yazın: kurumsal haber bülteni mi, müşteri bülteni mi, çalışan bülteni mi? Okurun bültenden ne beklediği, şablonun yoğunluğunu belirler.
• Son birkaç sayının içeriğini inceleyin ve tekrar eden içerik türlerini çıkarın: ana haber, kısa duyurular, etkinlik takvimi, öne çıkan yazı gibi.
• Her içerik türü için bir blok tasarlayın ve blokların hangi sırayla, hangi koşulda kullanılacağını belirleyin.
• Üst alanı ve alt alanı sabitleyin; kimlik, iletişim ve ret bilgilerini alt alana bir kez doğru yerleştirin.
• Yazı tipini, yazı boyutlarını, renkleri, boşlukları ve düğme stilini yazılı bir stil notu hâlinde tanımlayın.
• Şablonu telefon ve masaüstünde, farklı e-posta uygulamalarında, görseller kapalıyken ve koyu modda test edin.
• Şablonu kullanacak herkes için kısa bir kullanım notu hazırlayın: hangi blok ne için kullanılır, görsel ve metin için neye dikkat edilir.
• Belirli aralıklarla ölçüm sonuçlarına bakarak şablonu gözden geçirin; her sayıda değil, planlı dönemlerde değişiklik yapın.

Şablonu ve stil notlarını ekipte herkesin ulaşabileceği tek bir yerde tutmak, farklı kişilerin hazırladığı sayıların aynı kurumdan geliyormuş gibi görünmesini sağlar. Bu ihtiyaç özellikle birden fazla müşteri için bülten hazırlayan ajanslarda belirgindir; şirketler ve PR ajansları için hazırladığımız bülten yazılımı da bu tür ekiplerin günlük işini düşünerek hazırlanıyor.

Bir bülten tasarımcısının iş günü

Bir şirketin iletişim ekibinde bülten sorumlusu olduğunuzu düşünün. Sabah, içerik ekibinden gelen bu sayının metinlerini şablona yerleştirirsiniz. Ana haber bir etkinlik daveti olduğu için kayıt düğmesini ana bloğa koyar, diğer iki duyuruyu ikincil bloklara metin bağlantısıyla eklersiniz. Pazarlama ekibi etkinlik afişini olduğu gibi bültene koymak ister; afişin içindeki tarih, yer ve konuşmacı bilgilerini metin olarak ana bloğa taşır, afişi ise alt metniyle birlikte destekleyici görsel olarak kullanırsınız.

Öğleden sonra test gönderimini yaparsınız. Koyu modda logonun kaybolduğunu fark eder, logonun koyu zemine uygun sürümünü eklersiniz. Görseller kapalıyken bülteni açtığınızda ana mesajın ve kayıt düğmesinin hâlâ göründüğünü kontrol edersiniz. Alt alandaki kimlik bilgileri, iletişim adresi ve ret bağlantısının yerinde olduğunu, ret bağlantısının çalıştığını doğrularsınız. Son olarak onay sürecindeki yöneticiye test gönderimini iletir, onay geldikten sonra gönderimi planlarsınız.

Gönderim öncesi tasarım kontrol listesi

• Gönderen adı tanıdık ve tutarlı, konu satırı ve ön izleme metni birbirini tamamlıyor.
• Bu sayının tek bir ana mesajı ve tek bir ana çağrısı var.
• Görseller kapalıyken de ana mesaj ve çağrı anlaşılıyor.
• Tüm anlamlı görsellerin alt metni yazılmış.
• Metin ve arka plan arasındaki kontrast yeterli, bağlantılar yalnızca renkle ayırt edilmiyor.
• Bülten telefonda yakınlaştırma gerektirmeden okunuyor, düğmelere rahatça dokunulabiliyor.
• Koyu modda logo ve metinler görünür.
• Alt alanda kimlik bilgileri, iletişim bilgisi ve görünür bir ret bağlantısı var; ret bağlantısı test edildi.
• Promosyon varsa niteliği açıkça belirtilmiş ve şartlarına bağlantı verilmiş.
• Tüm bağlantılar doğru sayfalara gidiyor ve çalışıyor.

E-bülten tasarımında sık yapılan hatalar

• Bülteni tek bir büyük görselden oluşturmak ve görseller yüklenmediğinde okura boş bir ekran bırakmak.
• Her sayıda tasarımı değiştirmek; okur bülteni tanımakta ve taramakta zorlanır.
• Aynı sayıda birçok farklı renkli düğmeyle okurdan birçok farklı eylem istemek.
• Ret bağlantısını küçük, soluk ya da zor bulunur bir yere saklamak.
• Ön izleme metnini boş bırakmak ve gelen kutusunda anlamsız bir metin göstermek.
• Masaüstüne göre tasarlayıp telefonda hiç test etmemek.
• Alt metin yazmamak ya da alt metne dosya adı bırakmak.
• Web sitesinin menüsünü ve tüm bölümlerini bültenin üstüne taşımak.
• Kimlik ve iletişim bilgilerini bazı sayılarda unutmak.

Sık Sorulan Sorular

E-bülten tasarımı nasıl olmalı?

Tek sütunlu, telefonda rahat okunan, net bir başlık hiyerarşisine sahip, ana mesajını gerçek metinle veren ve tek bir ana çağrıya odaklanan bir tasarım en sağlam başlangıçtır. Alt alanda kimlik, iletişim ve ret bilgileri her sayıda aynı yerde durmalıdır.

E-bülten şablonu kaç sütunlu olmalı?

Telefonda okunacak bir bülten için tek sütunlu düzen en güvenli seçimdir. Masaüstünde yan yana bloklar kullanmak isterseniz, bu blokların telefonda alt alta dizildiğinden emin olun.

E-bültende görsel mi metin mi ağırlıkta olmalı?

Ana mesaj her zaman metinle verilmelidir; görsel bu mesajı destekler. Görseller yüklenmediğinde de bülten anlaşılıyorsa doğru dengeyi kurmuşsunuz demektir.

E-bültende ret bağlantısı nereye konmalı?

Genellikle alt alanda, açık bir ifadeyle ve okunabilir boyutta yer alır. Yönetmelik ret imkânının her iletide bulunmasını ve kolay ve ücretsiz olmasını ister; bağlantının bulunması ve kullanılması zahmetsiz olmalıdır.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: E-bülten nasıl hazırlanır? · E-bülten performansı nasıl ölçülür? · Abone listesi oluşturma · Konu satırı optimizasyonu · Mail neden spama düşer? · İYS ticari e-posta kuralları