Konu Satırı – E-posta Tasarımına Nasıl Yaklaşılır

Tüketicilerin önemli bir yüzdesi - %99 - her gün e-postalarını kontrol ediyor. Y kuşağı dahil bazı demografiler, telefon görüşmeleri veya metinler gibi diğer iletişim biçimlerine kıyasla şirketlerden e-posta iletişimlerini tercih eder. Ve dünya çapında aktif olan 5 milyardan fazla e-posta hesabıyla e-posta, herhangi bir dijital ürün stratejisinin önemli bir parçasıdır.

Pazarlamacılar için binlerce e-posta şablonu tasarımı mevcut olsa da, e-posta tasarımı web tasarımcıları için önemli bir uzmanlık alanıdır. Bu özellikle daha büyük markalarla, yaratıcı şirketlerle ve şablonlardan çekinen diğerleriyle çalışmak isteyenler için geçerlidir.

Tasarımcıların e-postaları tasarlarken akıllarında tutmaları gereken, çoğu e-posta platformunun sınırlamalarından (en büyüklerden biri olan Gmail'deki web yazı tipleri gibi şeyler için sınırlı destekle) ve tüketicilerin bir e-postayı açarken beklediklerinden bazı şeyler vardır. zaten iş yapabilecekleri şirket.

Mobil E-posta Tasarımının Önemi

Tüm e-postaların en az yarısının artık mobil cihazlarda açılıp okunmasıyla, tasarımcıların mobil uyumlu e-posta tasarımlarını görmezden gelmeleri sorumsuzluktur. Özellikle mobil e-posta dönüşüm oranlarının masaüstü oranlarından önemli ölçüde yüksek olma eğiliminde olduğu göz önüne alındığında.

PiperJaffray'in bu mobil e-posta tasarımı, her şeyi basit ve zarif tutar. Temiz bağlantılar ve ince markalama ile bir mobil cihazda okunması kolaydır. Kullanıcının ihtiyaçlarını ilk sıraya koyar, genel kullanıcı deneyimini ve şirketin algısını geliştirir.

Dribbble, "Popüler çekimler" e-postalarını, tamamen içeriğe odaklanarak noktaya kadar tutar. Bu odak, e-postanın mobil cihazlarda gezinmesini kolaylaştırır. İçeriğe odaklanan basit bir düzen birçok e-posta türü için iyi bir fikir olsa da, hem içeriği tüketmeyi hem de onunla etkileşim kurmayı kolaylaştıran mobil e-postalar için özellikle çok uygundur.

İçeriğe Odaklanmak

En iyi uygulama olarak, ister e-posta ister diğer dijital ürünler tasarlayın, tasarımcılar her zaman içeriğe odaklanmalıdır. Bazı e-posta tasarımları, içeriğin tasarım olduğu minimalist tasarımla bu en iyi uygulamayı en uç noktaya taşır.

Tasarımcılar, çoğu e-posta tasarımı üzerinde çalışırken, tasarıma dalmadan önce içeriğin oluşturulmasından yararlanır. Ancak özellikle minimalist tasarımlarda içeriğin ön planda olacağını bilmek daha da önemlidir.

Marvel, minimalist bir tasarımla içeriğine odaklanıyor. Beyaz arka plan ve yalnızca sayfadaki metni destekleyen görseller, içeriği gerçekten öne çıkarıyor.

Unsplash'ın tüm e-postaları, tam olarak tanıtımını yaptıkları resimlere odaklanır. "Koleksiyon Görüntüle" düğmesi ve resimlerin alt kısmındaki solma, siteye yapılan tıklamaları artırabilir, çünkü insanları daha fazlasını görmek ister hale getirir.

Markalaşmayı Güçlendirmek

Bir ziyaretçi bir web sitesine geldiğinde, bu (ideal olarak) sürükleyici bir marka deneyimidir. Her şey web sitesinin tasarımcısının kontrolü altındadır. Ancak e-posta tasarımı farklıdır. Kullanıcı, e-postaları başka bir uygulama içinde görüntülüyor ve tüm e-posta uygulamaları tüm e-postaları eşit şekilde oluşturmuyor.

Bu nedenle, e-posta tasarımlarında marka bilinci oluşturma, e-postayı okuyan kullanıcı için doğru deneyimi yaratmak için hayati önem taşır. Bununla birlikte, çeşitli cihazlarda ve e-posta istemcilerinde en yüksek kullanıcı yüzdesine etkili bir şekilde işlenmesi için marka bilinci oluşturmanın genellikle basit tutulması gerekir.

E-postanın üst kısmındaki basit bir logo, birden çok resimde aynı başlık resimlerini kullanan ve markanın diğer dijital ürünlerinden olabildiğince çok öğeyi tutarlı tutan, markanın tüketicilere yönelik algısını desteklemek ve güçlendirmek için uzun bir yol kat ediyor.

Everlane'in markası, e-postalarında ve web sitesinde doğası gereği basittir. Bu e-postanın en üstünde belirgin bir şekilde görüntülenen logoları, bu marka bilinci oluşturmayı güçlendirir.

Orta Parmak Projesi, parlak mor vurgu rengiyle birlikte tüm e-postalarında tutarlı bir başlık görüntüsü kullanır. Bu, e-postalarının abone olan herkes tarafından hemen tanınmasını sağlar ve marka bilinci oluşturma web sitesinde devam eder.

Renklerle Dikkat Çekmek

Renk, duyguları, algıları ve hatta davranışları etkileme yeteneği ile insan zihni üzerinde güçlü bir etkiye sahiptir. E-postalarda rengi etkin bir şekilde kullanmak, tıklama ve dönüşüm oranlarını artırabilir. Bazı testlerde, düğme rengindeki fark, dönüşüm oranlarında %20'den fazla fark yaratabilir.

Ancak renk kullanımından yararlanan yalnızca harekete geçirici mesajlar değildir. Renkli bir e-posta oluşturmak, beklenenden farklı olabilir ve bir kişinin gelen kutusundaki diğer e-postalardan tamamen farklı bir görünüm ve his yaratabilir.

Parlak kırmızıya sahip bir satış afişine dikkat çekmek, genellikle aynı renkte yapılan gerçek hayattaki satış işaretlerini anımsatır. Okuyucunun gözü hemen kırmızıya çekilir.

İskandinav mobilya e-Ticaret sitesi olan Article, sessiz kırmızı ve yeşil renk şeması kullanıyor ve kırmızı, en önemli kısma, yani satış için harekete geçirici mesaj düğmesine dikkat çekiyor.

Bazı e-posta tasarımları, içeriğin belirli bir bölümüne dikkat çekmek için renkleri kullanırken, Houston Hayvanat Bahçesi'nden gelen bu e-posta, eğlenceli ve enerjik bir tasarım oluşturmak için parlak renkler kullanır. Parlak turuncu ve sıcak pembe renk şeması hemen göz alıcıdır ve okuyucuyu içine çeker.

Çarpıcı Görüntüleri Kullanma

İnsanlar görsel yaratıklardır ve çarpıcı görüntüler bir e-postayı yüceltebilir ve okuyucunun dikkatini çekebilir. Görseller ayrıca e-postanın mesajını ve şirketin markasını güçlendirebilir.

Stranger Things'den canlı ama gizemli bir fotoğraf kullanan bu Netflix e-postasıyla, TV şovlarının “çarpıcı görüntüler” kategorisinde bir üstünlüğü var gibi görünüyor. Göz alıcı görseli hemen altındaki "Oynat" harekete geçirici mesajıyla birleştirmek, okuyucuların tanıtılan şovu hemen izlemesini kolaylaştırdığı için UX açısından anlamlıdır.

Çarpıcı görüntüler sadece fotoğraflarla sınırlı değildir. WePresent'in e-postalarında kullandığına benzer bir karikatür veya illüstrasyon, bir fotoğraf kadar dikkat çekicidir ve okuyucuları içeriğe çekmeye yardımcı olabilir.

Discovery Channel belgesel dizisini tanıtan bu Deadliest Catch e-postası, altındaki içeriğe karışan çarpıcı bir başlık resmi gösteriyor. Bu, izleyiciyi okumaya devam etmeye teşvik eden kullanışlı bir tekniktir.

Alışılmadık Düzenlerle Denemeler Yapmak

Birçok e-posta tasarımının oldukça standart bir biçimi vardır: üstte başlık, üstte ve altta harekete geçirici mesajlar içeren tek sütunlu içerik. Ancak tasarımcıların bu belirli modeli takip etmesi gerektiğini söyleyen bir kural yok.

Alışılmadık düzenler, okuyucunun dikkatini çekmenin ve içeriği okumak istemelerini sağlamanın harika bir yoludur. Sıra dışı tasarımlar yaratmanın çeşitli yolları vardır. Popüler yöntemlerden biri, birçok e-posta platformuyla uyumlu olması gerekmeyen e-posta düzenleri oluşturmak için resimleri kullanmaktır.

Geleneksel olmayan düzenlerin mutlaka duvardan çıkması gerekmez. Mailchimp'ten gelen bu, bir sütunun renk blokları tarafından alındığı iki sütunlu bir tasarım kullanıyor. Onu unutulmaz kılan şey, görsel olarak çekici ve beklenmedik olmasıdır.

Görüntüleri kullanmak, KLM için bunun gibi daha beklenmedik e-posta düzenlerine izin verir. Tasarımcıların yalnızca bazı e-posta istemcilerinin görüntülerin otomatik olarak yüklenmesini engelleyeceğini ve bu da mesajın özünü ileten yedek metne sahip olmayı gerekli kılacağını akıllarında tutmaları gerekir.

Fontlarla Çalışmak

Çoğu popüler e-posta istemcisi web yazı tiplerini destekler, ancak ne yazık ki hepsi desteklemez - Gmail en dikkate değer istisnadır (Gmail, Gmail arayüzünün bir parçası olarak Roboto ve Google Sans'ı desteklemesine rağmen). Ancak tasarımcılar, çok sayıda e-posta istemcisinin yedek yazı tiplerini kullanacağını akıllarında tuttukları sürece, web yazı tiplerini kullanmaya devam edebilirler.

Web yazı tiplerini kullanmanın alternatifi, elbette, yazı tiplerini içeren görselleri kullanmaktır. Pek çok e-posta tasarımcısının, özellikle yedek yazı tiplerinin yerinde görünmeyeceği başlıklarda yapmayı tercih ettiği şey budur.

Bu FabFitFun haber bülteni, içeriğe dikkat çekmek için eğlenceli bir yazı tipi kullanır ve onu son derece okunaklı bir sans serif yazı tipiyle eşleştirir. E-posta tasarımlarında yazı tipi kombinasyonlarını denemek harika bir fikirdir ve hatta bir web sitesinde yazı tiplerini değiştirmeden veya başka markalı malzemelerde kullanmadan önce deneme çalışması olarak kullanılabilir.

Sickbubble, e-posta tasarımlarında çeşitli yazı tipleri kullanır, bu da yanıltıcı olabilir. Ancak bu durumda, her bölümü ayırdıkları için işe yarıyor. Ana gövde metni okunması kolay bir sans serif iken, başlıktaki ekran yazı tipi çok sinirli bir his veriyor. Ürün tanıtımı bölümündeki el yazısı yazı tipleri, e-postanın gövdesinden kaydırıldığından çalışır.

Animasyonlarla Eğlenmek

Animasyonlar, e-postalara ekstra görsel ilgi katar ve hemen okuyucunun dikkatini çeker. Animasyonlu GIF'ler, e-postalara hareket eklemek için popüler bir seçimdir ve çoğu e-posta istemcisi tarafından desteklenir.

Pek çok kişi e-postaları mobil cihazlarda okuduğundan, tasarımcılar herhangi bir animasyonu yerleştirirken dosya boyutlarını göz önünde bulundurduğundan emin olmalıdır. Ayrıca animasyonların içeriği desteklemesini ve yalnızca dolgu olmamasını sağlamalıdırlar.

Bir noktayı eve götürmek veya sunulan içeriği eğlenceli bir şekilde daha iyi göstermek için animasyonlu GIF'leri kullanmak, Product Hunt'tan bu e-posta örneğinde olduğu gibi, bir e-posta tasarımına harika bir ektir.

Hustle, hem mesajın amacını göstermek hem de minimalist bir e-posta tasarımına görsel ilgi eklemek için e-postalarında animasyonlu bir GIF kullanır.

Harekete Geçirici Mesajlar

Harekete geçirme ifadesi, bir şirketin gönderdiği neredeyse tüm e-postaların tartışmasız en önemli parçasıdır. Çoğu e-posta, ister bir makale okuyor, isterse bir ürün satın alıyor veya başka bir davranış sergiliyor olsun, harekete geçmek için gönderilir.

Tasarımcılar, harekete geçirici mesajların tasarımına çok dikkat etmek ve performans için optimize edildiklerinden emin olmak için üzerlerinde A/B testi yapmak konusunda iyi hizmetlidir.

Litmus'un burada yaptığı gibi, harekete geçirici mesaj için parlak bir renk kullanmak, onu içeriğin geri kalanından farklı kılar. Tasarımcılar, e-posta kampanyaları gönderirken A/B testleri kullanarak hangilerinin hedef kitleleri için en iyi sonucu verdiğini görmek için farklı renklerle denemeler yapmayı düşünmelidir.

Harekete geçirici mesaj için bir e-postanın geri kalan içeriğinden tamamen farklı bir renk kullanmak onu öne çıkarır. Campaign Monitor'ün e-postasındaki limon yeşili, arka planı oluşturan mora bölünmüş tamamlayıcı bir renk olduğundan, çakışmadan göze çarpıyor.

E-posta Tasarımı En İyi Uygulamalarına Dikkat Edin

E-posta tasarımında yaratıcılık ve deney için bolca yer olsa da, tasarımcıların ortamın en iyi uygulamalarını ve sınırlamalarını da akıllarında tutmaları gerekir.

E-posta tasarımındaki en önemli adımlardan biri, e-postaları göndermeden önce çeşitli e-posta platformlarında test etmektir. Aralarında küçük farklılıklar olması muhtemel olsa da ve tasarımları farklı şekilde oluşturan daha az yaygın platformları kullanacak insanlar her zaman olsa da, e-postaların çoğu kullanıcı için kabul edilebilir bir şekilde görünmesini sağlamak akıllıca olacaktır.

Tasarımcıların e-postalarının çeşitli e-posta platformlarında nasıl görüneceğini görmek için kullanabilecekleri birkaç e-posta test hizmeti vardır. Litmus en popüler seçeneklerden biridir, ancak Mailgun, Email on Acid, Mailtrap ve Preview My Email gibi diğer seçenekler de her projenin ihtiyaçlarını en iyi karşılayanı görmek için kontrol etmeye değer.

Bunun ötesinde, mobil cihazlarda açılan e-postaların sayısı nedeniyle görüntü boyutlarını ve bant genişliği kullanımını akılda tutmak çok önemlidir. Duyarlı tasarımlar hemen hemen aynı nedenle bir zorunluluktur.

En iyi e-posta tasarımları, insanların herhangi bir cihazda okuması kolay olacak ve - en önemlisi - onlardan e-postadaki harekete geçirici mesajı tıklamalarını (veya başka türlü istenen eylemi gerçekleştirmelerini) isteyecektir. Bu e-posta tasarımı en iyi uygulamalarını takip etmek, web tasarımcılarına bunu etkili bir şekilde yapan e-postalar oluşturma konusunda bir avantaj sağlar.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Deneyim Her Şeydir – En İyi Kullanıcı Deneyimi Kılavuzu
• Tüm Trendler Buna Değer mi? Tasarımcıların Yaptığı En Yaygın 5 UX Hatası
• UI vs. UX – Temel Farklılıkları Keşfedin [Infographic]
• Mobil UX Tasarım İlkeleri ve En İyi Uygulamalar
• Mobil Kullanılabilirlik için Temel Kılavuz