Ana Sayfa Tasarımı 101: Web Sitenizin Ön Sayfasına Neler Eklenmeli?

Ana sayfanız hem markanıza bir giriş hem de hem yeni hem de mevcut müşterilerin ihtiyaç duydukları şeyi bulmak için işletmenizde gezinmelerine yardımcı olacak bir dizi kodlanmış talimat görevi görür.

Bir açılış sayfası gibi, ana sayfanızın amacı ister ürünlerinizi satmak isterse e-posta abonelerini yakalamak olsun, çok ayrıntı güçlü bir ilk izlenim oluşturmaya ve amaçlanan bir eylemi teşvik etmeye yönelik olmalıdır.

Ana sayfa tasarlamanın tek bir yolu yoktur. Bununla birlikte, ister ilk mağazanızı kuruyor olun, ister web sitenizin bu önemli bölümünü yeniden ziyaret ediyor olun, ana sayfanızı yukarıdan aşağıya planlarken aklınızda bulundurmanız gereken bazı ipuçları.

Ana sayfanızı tasarlarken sorulacak sorular

Bir işletme için mükemmel çalışan bir ana sayfa, başka bir işletme için başarısız olabilir.

Web sitesi tasarım seçeneklerine bakıyorsanız ve hangi yöne gideceğinizden emin değilseniz, kararınızı yönlendirmenize yardımcı olacak birkaç soru:

• Ana sayfanıza ulaşmaları ne kadar kolaydı ve markalı bir alan adınız var mı? Bir alan adı bulmanıza yardımcı olacak ücretsiz araçlarımız var.
• Ziyaretçinin ne yapmasını istiyorsunuz? (örneğin bir satın alma işlemi yapın, e-posta listenize katılın, vb.)
• Bunu yapmaları için ne kadar basit hale getiriyorsun?
• Hedefinizi tamamlamak için kaç adım var?
• Bir sonraki adıma geçmek için ne kadar bilgiye ihtiyaçları var?
• Ortadan kaldırabileceğiniz adımlar var mı?

Ziyaretçiler bazen ne istediklerini bilerek ana sayfalara gelir, bazen de istemezler. Kararlarınızın birincil hedeflerinizle uyumlu olmasını sağlarken ana sayfanızı her ikisini de göz önünde bulundurarak tasarlamanız gerekir.

İyi bir ana sayfa, belirli bir sonuç arayan ziyaretçileri barındırırken, olmayanların da dikkatini çekmelidir.

Ücretsiz Okuma Listesi: Çevrimiçi Mağaza Tasarım İpuçları

Çevrimiçi mağazanızın görünümünün satışlarda büyük etkisi olabilir. Etkileyici makalelerden oluşan ücretsiz, derlenmiş listemizle içinizdeki tasarımcıyı serbest bırakın.

Ücretsiz okuma listesini alın

Doğrudan gelen kutunuza teslim edilen Mağaza Tasarımı okuma listemizi alın.

Neredeyse orada: Anında erişim sağlamak için lütfen aşağıya e-postanızı girin.

E Güncellemeleri al

Ayrıca size Shopify bülteninden yeni eğitim kılavuzları ve başarı öyküleri hakkında güncellemeler göndereceğiz. SPAM'den nefret ediyoruz ve e-posta adresinizi güvende tutacağımıza söz veriyoruz.

Abone olduğun için teşekkürler. Yakında ücretsiz ipuçları ve kaynaklar almaya başlayacaksınız. Bu arada, 14 günlük ücretsiz Shopify deneme sürümüyle mağazanızı oluşturmaya başlayın.

Başlamak

Ana sayfa tasarımınız hangi sonuçları desteklemeli?

Ortalama olarak, ziyaretçiler ana sayfanızda 10-20 saniye geçirir. Tasarım açısından bunun anlamı, ziyaretçilerin kendileri (ve işiniz için) için en iyi yolu hızla seçebilmeleri için gezinme akışını netleştirmeniz gerektiğidir.

Bu aciliyete ek olarak, insanların vermesi çok uzun süren bir karardan kaçınma eğilimi olan “ karardan kaçınma ” adı verilen psikolojik bir fenomen vardır.

Bir ana sayfada, karardan kaçınma, sayfadan çıkarak veya geri düğmesine basarak "zıplama" anlamına gelir.Bunu önlemek için ana sayfanızın ilk görevi, potansiyel müşterileri sitede kalmaya ikna etmek olmalıdır.

Bunu yapmak için, web sitenizin en değerli gayrimenkulünün rolünü anlamanız gerekir.

1. Eyleme ilham veren "ekranın üst kısmındaki" içerik

Web tasarımcıları ana sayfanın bir alanından "ekranın üst kısmı" olarak bahsettiğinde, ziyaretçilerin kaydırmaya karar vermeden önce gördüklerine atıfta bulunurlar.

Ekranın üst kısmında ne olduğunu ve bunun ana sayfanızın geri kalanına nasıl eşlik ettiğini düşünürken, ziyaretçinin sitenize ilk geldiğinde yapmasını istediğiniz eylemlere, ilk önce ihtiyaç duyduğu bilgilere ve kararlarını kolaylaştırmaya nasıl yardımcı olabileceğinize odaklanın.

Örneğin Morning Recovery'nin ana sayfasını ele alalım. Morning Recovery, tek ürünü olarak akşamdan kalma bir çare satıyor. Amaç, potansiyel müşterileri amiral gemisi ürünlerini satın almaya yönlendirmek olduğundan, parlak renkli ve ürün odaklı görseller, ekranın üst kısmındaki bölümü ziyaretçileri satın almaya yönlendiren net bir harekete geçirici mesajla süslüyor.

Bu ana sayfada, kullanıcının verebileceği iki hızlı karar vardır:

1. Satın alma işlemine devam edin
2. Veya ekranın altındaki daha fazla bilgi için aşağı kaydırın—incelemeler, bir video ve ürünün bileşenleri hakkında bilgi.

En iyi e-ticaret web sitesi tasarımlarının çoğu, yeni ziyaretçileri sitede tutmak ve onları markaya alıştırmak için dikkat çekici bir başlık, ikna edici alt yazı ve ekranın üst kısmındaki büyüleyici görselin birleşiminden oluşan başlıklar kullanır.

Bununla birlikte, özel bir teklifin veya ücretsiz gönderimin reklamını yapmak için navigasyonunuzun üzerinde bir promosyon afişi kullanmak gibi, en başından itibaren bir müşterinin ilgisini çekmenin başka birçok yolu vardır.

Başlığınız için görsellere mi ihtiyacınız var?

Burst, girişimciler ve yaratıcılar için küratörlüğünde görseller içeren Shopify'ın ücretsiz stok fotoğraf sitesidir . Başlığınız için optimize edilmiş 1000'lerce yaşam tarzı ve ürün resmine göz atın.

Burst'e şimdi göz atın

2. Navigasyonu temizle

Bir web sayfasının gezinme gücü, basitliğine dayanır. Farklı ziyaretçi türlerini barındırmak istediğinizde bu çelişkili görünebilir, ancak insanların internette sayfadan sayfaya ne kadar hızlı hareket ettiğini düşündüğünüzde mantıklıdır.

Başlıkta gezinme, çoğu ziyaretçi için en önemli olan yollara öncelik vererek mümkün olduğunca basit olmalıdır. Orbit Media Studios'un stratejik direktörü Andy Crestodina, ana sayfanızda yediden fazla gezinme bağlantısı önermez.

İnsanlar, bilginin "parçalar" adı verilen daha küçük zihinsel birimlere bölündüğü "parçalama" adı verilen bir kurumsal ezberleme yöntemi kullanırlar.

Ne kadar az "parça" varsa, hafızada tutma o kadar kolay olur. 1956'da yayınlanan etkili bir makalede, psikoloji profesörü George Miller, kısa süreli belleğimizin genellikle bir seferde yalnızca yedi öğeyi tutabildiği sonucuna vardı.

Çok fazla gezinme seçeneğine sahip siteler, ziyaretçilerin siteyi bırakma veya yanlış yolu seçme olasılığını artırarak, karmaşık ve bunaltıcı görünebilir. En önemli sayfalar solda olacak şekilde gezinme bağlantılarınızı soldan sağa önceliklendirmek iyi bir uygulamadır.

Çok sayıda ürününüz ve koleksiyonunuz varsa, ana sayfa navigasyonunuzda ana üst düzey koleksiyonlarınıza odaklanın ve alt gezinme oluşturmak için bir "mega menü" veya bir açılır menü kullanın.

Alt gezinme, ürünlerinizi ve sayfalarınızı, başlangıçta çok fazla seçenekle müşterileri boğmadan kolay keşif için düzenlemenin mükemmel bir yoludur.

Örneğin UNCONDITIONAL'ın ana sayfası, iyi organize edilmiş bir açılır menü ile minimum gezinme ve kapsamlı envanteri dengeler.

Bazı web sitelerinde ayrıca, ana hedeflerini destekledikleri için, bizim hakkımızda sayfalarına, bize ulaşın sayfasına, SSS sayfasına veya başlık gezinmelerinde diğer sayfalara bağlantılar bulunur.

Ancak, bu sayfaları ziyaret edenlerin hedeflerinize göre dönüşüm sağlamadığını fark ederseniz, bu bağlantılar büyük olasılıkla onları dönüşüm yolundan uzaklaştırıyor. Bu durumda, bunun yerine bu bağlantıları altbilgiye eklemek en iyisidir.

3. Göz alıcı görüntüler

Karardan kaçınma, yalnızca navigasyonunuz için değil, ana sayfanızdaki diğer tüm öğeler için de geçerlidir. Kullanıcı dikkatinin sınırlarını takdir etmek, ana sayfanızı tasarlarken en önemli olanı vurgulamanıza yardımcı olacaktır.

İster bir ürün veya koleksiyonu tanıtıyor olun, ister olası satışları yakalamaya çalışıyor olun, görsellerinizin amacı, web sitenize ulaşır ulaşmaz kullanıcının dikkatini çekmektir.

Ana sayfanızın ekranın üst kısmındaki bölüme görselleri dahil etmenin birkaç yolu:

Metin yerleşimli resim

Bu ekranın üst kısmındaki görüntü stili, genellikle tek bir güçlü görüntüyü, doğrudan kopyayı ve harekete geçirici mesajı bir araya getirir. Sınırlı süreli indirim, amiral gemisi ürün veya sezonluk koleksiyon gibi önde gelen bir teklife odaklanmak isteyen tüccarlar için en iyi sonucu verir.

Slayt gösterileri

Belirli bir satışın, ürün grubunun veya yüksek kaliteli ürün fotoğrafının reklamını yapan slaytların her birine bir slayt gösterisi eklemeyi seçebilirsiniz.

Birkaç kategoride geniş bir ürün yelpazesi satan mağaza sahipleri, ziyaretçilere tanıtmak istedikleri birkaç koleksiyon veya sayfa olduğunda genellikle bu yaklaşımı tercih eder.

Slaytları önceliğe göre, en yüksek öncelikli slayda göre sıralamak isteyeceksiniz. Kullanıcılar bir sonraki adıma geçmeden önce uzun süre tek bir slayda bakmayacaklarından, kendinizi kabaca üç slaytla sınırlamak en iyisidir.

Video

Bazı markalar, hikayelerini anlatan bir ana sayfa görselinden faydalanabilir. Bazı ürünler için, özellikle yenilikçi veya karmaşık olanlar için, ziyaretçilerin ilgisini çekmeden önce ürünün nasıl kullanılacağını göstermeniz gerekebilir.

Örneğin Bottle Cutting Inc'in ana sayfasını ele alalım. Pek çok ziyaretçi ürüne ihtiyaç duyduklarını henüz bilemeyeceklerdir, bu nedenle ana sayfa bir video gösterimi aracılığıyla ürünle ilgili heyecan yaratır; bu, dönüşüm sürecinde doğal bir ilk adımdır.

Görsellerin çok hızlı ve önemli bir etkisi olduğundan, yüksek kaliteli olduklarından ve markanızı gerçekten temsil ettiğinden emin olmak önemlidir.

Fotoğrafçı değilseniz, ücretsiz stok fotoğraf koleksiyonumuzdan seçim yapmak için Shopify tema düzenleyicisindeki resim seçiciyi kullanabilirsiniz .

4. Doğrudan harekete geçirici mesaj

Harekete geçirici mesajı bir otoyoldaki çıkış işareti olarak düşünün; kısa olmalı, gözden kaçırılması zor olmalı ve doğru sürücüleri izlemeleri gereken yola yönlendirmelidir.

Harekete geçirici mesajlarınız ve bağlantı verdikleri şey, bir müşterinin ana sayfanızın ana hedeflerine doğru atabileceği sonraki adımlarla uyumlu olmalıdır. Bu, en son koleksiyonunuzla bağlantı kurmak veya kullanıcıların daha fazla bilgi edinmek için açıklayıcı bir video izlemesini sağlamak anlamına gelebilir.

Kullanıcı, harekete geçirici mesaj butonunuzun çevredeki tasarımdan öne çıkması gerektiğinden, nereye tıklanacağını hemen anlamalıdır. Bir kullanıcının harekete geçirici mesajı bulması ne kadar uzun sürerse, kafasının karışması veya tıklama olasılığı o kadar artar.

Yukarıda belirtilen PopSockets ana sayfası, kullanıcıyı ideal dönüşüm yolundan aşağı taşımak için mükemmel bir iş çıkarır. Kullanıcının dikkatini çekmek için mükemmel ürün görüntüleri kullanılırken, harekete geçirici mesaj ön ve orta siyah beyazdır (renkli arka planın aksine).

Ekranın üst kısmındaki hiçbir şey, ana sayfanın ana hedefinden dikkati dağıtmaz: kullanıcıyı en son ürün serisine göz atmaya yönlendirmek. Aşağı kaydırdıkça, diğer ürünleri satın almak için daha fazla CTA göreceksiniz.

5. Erişimi kolay bir alışveriş sepeti

Alışveriş sepeti, çoğu e-ticaret web sitesi için ana sayfanın ayrılmaz bir parçasıdır.

Müşterileriniz için gezinmeyi sezgisel hale getirmenin bir parçası, alışveriş sepetlerinin kolay bulunmasını sağlamaktır. "Yapışkan" alışveriş sepeti (bazı Shopify temalarında bulunan "kaydırmalı" sepet olarak da adlandırılır), genellikle sağ üst köşede olmak üzere tüm tarama deneyimi boyunca ekranda bulunan ve kullanılabilen bir alışveriş sepetidir.

Daha da iyisi, müşterinin sepetindeki o anda ürün sayısını da görüntüleyebilirsiniz. Sepette eklenmiş olan ürün sayısını belirten cesur, göz alıcı bir bildirim, müşterilere satın alma işlemlerinin devam ettiğini hatırlatır ve onları ödeme işlemlerini tamamlamaya teşvik eder.

Alt satırda: Ürünler sepetteyken ve ona nasıl erişeceklerini müşterilere açıkça belirtin.

Chubbies ana sayfasında, kullanıcının alışveriş sepetindeki öğelerin sayısını vurgulayan kırmızı bir bildirimin yanı sıra, kullanıcıların alışverişe kolayca devam etmelerini veya ödemeye devam etmelerini sağlayan sürgülü bir sepet bulunur.

6. Bir arama çubuğu (geniş ürün koleksiyonları için)

Minimal gezinme ve sabit bir alışveriş sepetinin yanı sıra, birçok çevrimiçi mağaza, tam olarak ne aradıklarını bilen ziyaretçilere yardımcı olmak için bir arama çubuğu içerir - özellikle de keşfedilecek çok sayıda farklı ürünü veya içeriği varsa.

Örneğin Morphe, farklı makyaj ürünlerinden oluşan geniş bir koleksiyona sahiptir. Müşterilerinin aradıklarını bulmalarını kolaylaştırmak için Morphe, bir ziyaretçinin arama sorgusunu önerilen ürünler, koleksiyonlar ve sayfalarla otomatik olarak tamamlayan akıllı bir arama çubuğu ekledi. Bu, kullanıcının ana sayfadan aradığı sayfaya doğrudan bir yol oluşturur.

Genel olarak, bir aramayı tamamlayan kullanıcıların dönüşüm sağlama olasılığı daha yüksektir. Markanız çok sayıda ürün satıyorsa, bulması kolay bir arama çubuğu, müşterileri geri çevirebilecek karmaşık gezinmeye bir alternatif sunar.

Ekranın ötesinde: Dikkate alınması gereken diğer ana sayfa öğeleri

Ekranın alt kısmında öne çıkardığınız öğeler (yani, kullanıcılar sayfayı kaydırdıktan sonra) daha az önemli değildir; bunlar genellikle daha önce sunduğunuz bilgileri pekiştirir ve genişletir, aynı dönüşüm hedefine giden başka yollar sağlar ve diğer sayfaları kullanıcının kullanımına sunar. onlara ihtiyacı olan müşteriler.

Hedefleriniz için ne kadar önemli olduklarına bağlı olarak, ana sayfa tasarımınızın veya alt bilginizin bir parçası olarak ekleyebileceğiniz öğelerin kısa bir listesi burada.

1. Bloglar, videolar ve diğer içerikler

Blog ve video içeriği SEO için harika olabilir, ancak ekranın üst kısmındaki içerik, müşterilerin dikkatini dağıtma ve onları ürünlerinizden uzaklaştırma potansiyeline sahiptir. Genelde içeriğinizin kullanıcıları ürünlerinize yönlendirmesini istersiniz, tersi değil.

Özellikle içerik işinizin temel bir yönü değilse, içeriğinizin bağlantılarını ekranın alt kısmına veya hatta altbilgiye yerleştirmeyi düşünün ve sitenizi keşfetmeyi seçen kullanıcıların onu bulmasına izin verin.

İçeriğinizi tanıtmak istiyorsanız, en üstteki navigasyonunuza bir bağlantı ekleyebilirsiniz, ancak bunu kendi web sitenize harici trafik çekebilmesi için sosyal medya, e-posta ve üçüncü taraf siteler aracılığıyla yapmak genellikle en iyisidir.

Örneğin BioLite Energy, sürdürülebilir, taşınabilir pişirme ve aydınlatma cihazları satıyor. Bilgilendirici, ana sayfa video içeriği, kullanıcıların dikkatini temel değer önermelerinden uzaklaştırmak için ekranın altına ve altbilginin üstüne yerleştirilmiştir. Bloglarından YouTube kanallarına kadar her şey, ziyaretçiler arıyorsa aşağıda mevcuttur.

2. Sosyal kanıt: Müşteri incelemeleri, onaylar ve basın

Sosyal kanıt, yeni ziyaretçilerin güvenini kazanmak için müşterilerden/uzmanlardan gelen mevcut güvenden yararlanan markanızın onaylanmasıdır. Bu, basındaki sözleri, incelemeleri, sosyal medya gönderilerini, Instagram galerilerini veya etkileyicilerden veya uzmanlardan gelen onayları içerebilir.

Kullanabileceğiniz ikna edici sosyal kanıtlarınız varsa, ana sayfanız bunun için iyi bir yer olabilir.

Aşağıdaki ErgoDox ana sayfası, ürünlerinin kalitesinin bir kanıtı olarak, sosyal medyadan alıntılar ve tanınmış şirketlerdeki çalışanların haykırışlarını sunmaktadır. Ancak bu, ürünlerinin ne yaptığını belirledikten sonra en alta doğru tanıtılır.

3. Düşük öncelikli ve ek ürünler

Daha eski ürünler ve saat kayışları gibi ek ürünler, ana sayfanızın alt kısmına doğru kaydırılmaya değer olabilir. Ne de olsa amiral gemisi ürünlerinizle liderlik etmek veya en yeni ürün gruplarınıza dikkat çekmek istiyorsunuz.

Ana ürünlerinizi tamamlayan daha ucuz ürünler, kasada bir üst satış olarak kullanılan anlık satın almalar olarak en iyi sonucu verir, ancak yedek parça gerektiren bir ürün satıyorsanız, ziyaretçilerin bunlardan haberdar olmalarını sağlamak için ekranın altındaki ana sayfaya da dahil edilebilirler. veya yeniden doldurur.

Örneğin, LIV Saatler, doğal olarak saatlere odaklanır, ancak ana sayfalarının alt kısmına doğru kayışlar gibi birinci sınıf eklenti ürünlerinin reklamını yapar.

4. Daha düşük öncelikli sayfalar

Düşük öncelikli olduğunu düşündüğünüz sayfalar, iş modelinize göre farklılık gösterebilir.

Genel olarak Hizmet Şartlarınız, Gizlilik Politikanız veya İade Politikanız gibi sayfalar en iyi şekilde alt bilgide çalışır. Bu sayfalara bağlantılar genellikle altbilgide tutulduğundan, birçok ziyaretçi bu sayfalara ulaşmaları gerektiğinde sezgisel olarak oraya bakmalıdır.

Hakkımızda sayfa şablonunuz, iletişim bilgileriniz, mağaza konumları veya sipariş takip sayfaları gibi diğerleri de altbilginize eklenebilir. Ancak, potansiyel müşterilerin sizden satın almalarına gerçekten yardımcı oluyorlarsa veya başka bir önemli hedefe ulaşmanıza yardımcı oluyorlarsa, en üstteki navigasyonunuzda ve hatta ana sayfa tasarımınızda onlara öncelik vermeyi düşünebilirsiniz.

Örneğin, bir abonelik hizmeti satan bir satıcı, ana sayfa gezinmelerine belirgin bir SSS bağlantısı ekleyerek destek biletlerini önemli ölçüde azaltabilir. Veya ürünlerinin genellikle şahsen satın alındığı Bellroy örneğinde olduğu gibi, ziyaretçilerin daha belirgin bir Mağaza Bulucu bağlantısı aracılığıyla en yakın fiziksel perakende satış yerini keşfetmelerine yardımcı olabilirsiniz.

Bir sayfanın düşük önceliğe sahip olup olmadığına karar vermeye çalışırken, kendinize, ziyaretçileri hemen o sayfaya yönlendirmenin ne kadar fayda sağlayacağını ve bunun onların dikkatlerini dağıtmaya mı yoksa amaçlanan sonuçlara doğru çekmeye mi hizmet edeceğini kendinize sorun.

Mobil ana sayfa tasarımını akılda tutmak

Mobil web trafiği, son birkaç yılda istikrarlı bir şekilde büyümeye devam etti. Trafiğinizin büyük bir bölümünün mobil kaynaklardan gelmesi muhtemel olduğundan, ana sayfanızın tasarımıyla ilgili verdiğiniz her karar, mobil kullanıcıları hesaba katmalıdır.

Kullanıcıları belirli bir dizi eyleme yönlendirmek için ana sayfanızı basitleştirmek, mobil kullanıcılar için daha da önemli hale gelir.

Shopify mağazası sahibiyseniz Shopify tema mağazasındaki herhangi bir temanın öğeleri ekran boyutuna göre ayarlanır. Ancak, geniş bir masaüstü ekranında çarpıcı görünen görüntülerin mobil ekranda alışılmadık şekillerde kesilebileceğini veya kırpılabileceğini unutmayın. Harekete geçirici mesajların bulunması veya taşınması, ziyaretçilerin tıklama olasılığını artıracak şekilde daha zor olabilir.

Önizlemenizin üst kısmındaki görünüm değiştirme seçeneklerini kullanarak Shopify tema düzenleyicisinde ana sayfa tasarımınızı farklı cihazlarda kolayca önizleyebilirsiniz.

Ana sayfa tasarımınızı zaman içinde iyileştirme

Muhtemelen şimdiye kadar bildiğiniz gibi, ana sayfanızı tasarlamanın tek bir en iyi yolu yoktur. Kullanıcı demografisi, marka bilinci oluşturma, ürün sayısı, pazarlama kanalları ve daha fazlası gibi faktörler, kullanıcınızın davranışını çeşitli şekillerde etkileyebilir.

Bu nedenle, ana sayfanızın etkisini ölçmek ve zaman içinde ayarlamalar yapmak için oluşturduğunuz trafiği ve satışları kullanarak ana sayfanızı her zaman devam eden bir çalışma olarak görmek çok önemlidir.