SaaS Web Tasarımı En İyi Uygulamaları: Tasarım Standartları ve Bilmeye Değer Eğilimler

SaaS web tasarımı için en iyi uygulamalar nelerdir?

SaaS sitesinden sonra, SaaS sitesinden sonra bir SaaS sitesinde tökezledikten sonra yanıtlamaya başladığım soru bu… Hemen hemen aynı görünüyorlardı:

En iyi uygulamaları anlamak, web tasarımcıları (ve SaaS kurucuları) için kendi marka varlıklarını düşünmeleri için harika bir yol olabilir. Bu, Andy Crestodina'nın en iyi 50 pazarlama sitesi için web standartlarını analiz ederken birkaç yıl önce aldığı bir yaklaşım . Ayrıca tasarımcıların, stratejistlerin ve kurucuların tel çerçeveler kullanarak ve ana sayfalarında hangi temel tasarım öğelerinin olması gerektiğini belirleyerek tasarım girişimlerini planlamalarına yardımcı olabilir.

Nielsen / Norman Group, Web Tasarım Standartları ile ilgili ilk belgelerden birini yayınladı ve üç standardizasyon seviyesi tanımladı:

• Standart: Sitelerin %80'inden fazlası aynı yaklaşımı kullanıyor
• Kural: Web sitelerinin %50 – 79'u aynı yaklaşımı kullanıyor
• Karışıklık: %49 veya daha az web sitesi bir yaklaşım kullanıyor

Başlangıçta benzer SaaS markalarıyla ilgili çok fazla hayal kırıklığı yaşasam da, tasarım standartlarını ve en iyi uygulamaları takip etme gerekçesine daha yakından baktıkça, tutarlılığın faydasını daha iyi anladım. Aşağıdaki tasarım web standartlarıyla birlikte gelen avantajlardan bazıları şunlardır:

• Ortak tasarım öğelerini görünce güvenlik ve güven duygusu
• Bir şeye ihtiyacınız olduğunda tam olarak nereye gideceğinizi bilmek (örn. Ev yoluyla. logo tıklaması)
• Yeni simgeler, düğmeler ve tasarım öğelerinde belirsizlik yok. Hiçbir temel öğe (yani, bir demo alın) kaçırılmadı

Tüm bunlar, kullanıcı deneyimini daha sorunsuz ve daha sezgisel hale getirebilir.

Ancak SaaS alanında, iyi bir sebep olmadan çoğaltılmış gibi görünen pek çok şey var.

Bu nedenle, SaaS Web Tasarım Standartlarını daha iyi anlamak için, hangi şeylerin standart hale geldiğini, neyin geleneksel olduğunu ve bir yazı turasının ne olduğunu bize gösteren bir veri seti oluşturmak için SaaS 1000'den ilk 250 siteyi aldık.

İşte 2022'de gerçekleşen SaaS tasarım en iyi uygulamalarına daha yakından bir bakış:

Marka Logoları Daima Sol Taraftadır

Yani, bir logo oluşturmaya (veya mevcut olanı güncellemeye) karar verdiniz ve bunu web sitenizde nereye yerleştireceğinizi merak ediyorsunuz. Logonuzun bir web sitesinin sol üst köşesine yerleştirilmesi, yaygın bir tasarım en iyi uygulamasıdır. 2019'dan bu yana navigasyonun solundaki logolarda bile %1'lik bir artış gördük! Çoğu tasarımcının SaaS'ın içinde ve dışında kullandığı bir yaklaşımdır. Kuzey Amerika'daki çoğu insanın bir siteyi soldan sağa görüntülediğini kabul etmek mantıklı bir seçimdir.

Ama bazen (araştırmamızda; bir zamanlar) bir tasarımcı logoyu başka bir yere yerleştirmeye karar verir. Sağ tarafa logolarını yerleştiren hiçbir site görmesek de; logosunu doğrudan sitelerinin ortasına yerleştiren DataDog'u bulduk:

Bir logo araştırma çalışmasında , Venngage'deki insanlar, insanların %35'inin teknoloji şirketleri için metin ağırlıklı ve yatay stilde logoları tercih ettiğini buldu.

Çoğu SaaS Web Sitesi Mobil Duyarlıdır

Mobil bir dünyada yaşıyoruz.

Mobil uyumlu siteler, masaüstünde veya mobilde ziyaret eden kişilere bozuk deneyimler sunmamanızı sağlamanın harika bir yoludur.

2018'de dünya çapındaki tüm çevrimiçi trafiğin %52,2'si cep telefonları üzerinden oluşturuldu. Bu nedenle, neredeyse tüm SaaS şirketlerinin yalnızca masaüstü bilgisayarlar için oluşturmak yerine duyarlı tasarım ve mobil açılış sayfası en iyi uygulamalarına yatırım yaptığını görmek harika.

Video, Sitelerin Üçte Birinde Bulunabilir

Video, sosyal medya kanallarında fırtına gibi esmesine rağmen, SaaS web sitelerinde o kadar popüler değil. Ana sayfalarında bir video bulunan web sitelerinin çoğu, kullanıcıların videoyu başlatmak için tıklamasını gerektiriyordu. Bu videolar genellikle şirketin geçmişi, değer önerisi veya ürün tanıtımı hakkında bağlam sağlayan, çoğu 5 dakikadan kısa olan kısa kliplerdi.

Çoğu web sitesinin ana sayfalarında video olmamasına çok şaşırdık ve 2019'daki önceki çalışmamızdan bu yana %13'lük bir düşüş görmek bizi daha da şaşırttı.

Yüksek kaliteli bir video üretmenin getirdiği eski maliyet beklentileri, markaları bu yatırımdan geri tutuyor olabilir. Resimli ürün açıklamaları birkaç yıl önce popülerlik kazandı ve Fiverr ve Upwork gibi siteler aracılığıyla satın alınan popüler bir hizmet haline geldi.

Bugün, bu tür videolara olan talep hala oldukça yüksek (ayda 14.800'den fazla açıklayıcı video aranıyor), ancak SaaS şirketlerinin yalnızca yarısından biraz fazlası bunları kullanıyor.

Her Zaman Bir Birincil Harekete Geçirici Çağrı Vardır

SaaS topluluğunda, insanları bir şeyler yapmaya teşvik eden harekete geçirme çağrınızın ekranın üst kısmında olması gerektiğine dair net bir en iyi uygulama vardır. Bu SaaS Tasarım araştırmasına dahil edilen tüm sitelerin %90'ından fazlasının ekranın üst kısmında bir düğme veya harekete geçirici mesaj vardı.

CTA'nın Yerleşimi Genellikle Katlamanın Üstünde Bulunabilir

Çoğu SaaS web sitesi, CTA'nın yerleştirildiği yere gelince kovalamayı keser. Web sitelerinin çoğu, CTA'larını ekranın üst kısmına koyar. Bu, takip edilmesi gereken iyi bir uygulamadır, çünkü kullanıcıların sayfayı sonuna kadar kaydırmasalar bile CTA'nızı görmelerini sağlar.

SaaS Düğmelerinin Yeni Seçimi Olarak Mavi, Yeşili Geçti

Çeşitli harekete geçirici mesaj renklerini analiz ederken, ikinci sırada yeşil CTA'lar ve üçüncü sırada turuncu olmak üzere maviye doğru açık bir eğilim vardı.

Mavi CTA düğmelerinin popülaritesi 2019'dan bu yana önemli ölçüde arttı ve yeşili yaklaşık %3 oranında geride bıraktı (2019'daki en popüler CTA rengiydi). Bunun iyi bir nedeni var: mavi renk en çok köprüler için kullanılır ve göz alıcı bir renktir.

Ücretsiz Deneme, SaaS'taki En Popüler CTA Olarak Başlıyor

SaaS markalarının çoğu, cüzdanlarında müzik olan harekete geçirici bir dil kullanıyor: ücretsiz .

İncelediğimiz sitelerin çoğu, harekete geçirici mesajlar için "Ücretsiz Deneme" ifadesini seçti. İkinci gelen bir başka CTA, ziyaretçiyi dönüşüm hunisinde daha ileriye iten bir şey yapmaya ikna eden eylem odaklı bir dildi. Bazı varyasyonlar şunları içerir:

• Başlamak

• Demo Talep Et

• Demo Planla

• Üye olmak

• Ücretsiz Demo Alın

• X'i Ücretsiz Alın

Harekete geçirici mesajdaki en yaygın kelimeler + ifadeler şu şekildedir: Ücretsiz, Demo, Al, Başla, X'i Dene ve Talep Et… Bu kelimelerden bazıları birlikte ortaya çıktı (yani, Ücretsiz Demo veya Ücretsiz X'i Dene), ancak bir Bu kelimelerin kombinasyonu, en çok SaaS birincil CTA'larında görünme eğilimindedir.

Açık Bir Arka Plan Kullanmak En İyi Uygulamadır

SaaS'ta siyah arka plana sahip bir site görmek yaygın değildir:

Sitelerin çoğu (bunların %92'si) siteleri için birincil arka plan olarak beyaz veya açık renkler kullanmıştır.

SaaS'ın %80'i Gerçek Kişileri Kullanıyor

Gerçek kişilerin ana sayfaya yerleştirilmesi, SaaS markalarının çoğu için en uygun seçenekti. Gerçek kişilerin ana sayfaya yerleştirilmesi genellikle referanslar ve içerik varlıklarıyla eşleştirilmiş bölümlerde bulunur. Bazen, aşağıdaki örnekte olduğu gibi, doğrudan başlıkta ekranın üst kısmında görünüyorlardı, ancak çoğu zaman, gerçek insan görüntüleri sayfanın ilerisinde yer aldı.

Bu, 2019'da yaptığımız aynı çalışmadan BÜYÜK bir sıçrama . Sadece 3 yıl önce, web sitelerinin yalnızca %56'sı ana sayfalarında gerçek kişileri kullandı ve bu %24 gibi büyük bir artışı temsil ediyordu.

Görüntü seçiminde biraz çeşitlilik görmek de harikaydı. Eksik olan tek şey, bu “Ekibimiz” sayfalarında benzer bir çeşitlilik düzeyi görmekti, ancak bu başka bir zamanın konusu.

Özel Çizimler Çok Yaygındır (%70)

Özel illüstrasyonların yükselişi, SaaS topluluğunu kasıp kavurdu. Son 3 yıldır her sitede ortaya çıkan bir şey. Profesyonel görüşümüz, bunun bir trend olduğu yönündedir, ancak en iyi uygulama olmaktan yalnızca birkaç yüzde puan uzaktadır.

İşte bazı sitelerin ve çizimlerinin bir anlık görüntüsü:

Bu ilginç bir eğilim.

Ne düşünüyorsunuz: Tasarıma yönelik bu yaklaşım, yeni başlayanların öne çıkmasına yardımcı oluyor mu, yoksa karışmalarına mı neden oluyor? Önemli mi? Güven duygusu veriyor mu?

SaaS Markalarının Yarısı Canlı Sohbet Aracı Kullanıyor

Canlı sohbet ve konuşma pazarlamasının yükselişi, izlemek için büyüleyici bir trend oldu. Kullanıcılar yanıt ister ve hızlı bir şekilde isterler. Potansiyel müşterilerle (veya botları kullanarak) gerçek zamanlı konuşmaları benimseme fikri ilgi çekmeye devam ederken, B2B SaaS şirketleri arasında açıkça popüler hale geliyor.

Araştırmamız, SaaS sitelerinin %5'inden biraz fazlasının, köşede etkileşime hazır bir sohbet kutusu olduğunu buldu. Bu sitelerin çoğunda kullanılan hizmetler Intercom veya Drift idi.

Öyleyse Standartları Takip Etmelisiniz?

Duruma göre değişir.

Tasarımla denemeler yapmak, endüstrinin geri kalanından önce bir şeyi ortaya çıkarmanın harika bir yoludur. Bununla birlikte, tasarım denemesinin riski, kullanıcıların tüm deneyimi bozuk ve kötü oluşturulmuş olarak bulabilmeleridir. Öte yandan, dünya çapında SaaS web sitelerinde halihazırda kullanımda olan standartlara uyarsanız, kolayca uyum sağlayabilirsiniz.

Herkes gibi olmayan bir site istiyorsanız , web sitesi tasarım ipuçlarının bir listesi :

• Düz illüstrasyonu markanızın soyut bir temsili olarak kullanmayın
• Ana sayfanızda koyu turuncu veya sarı düğmeler kullanmayın
• Değer teklifinizi sitede hizalamayın
• Logonuzu ortaya veya sağ tarafa yerleştirin
• Siteniz için koyu bir arka plan kullanın

Siteniz şu anda bu standartları karşılıyor mu? Burada sizi şaşırtan bir şey oldu mu?