Demo'ya Dayanıklı Şablon Kararı: 6 Adımlık Not

Özet

Patronunuz az önce bir demoda bir e-ticaret şablonu seçti ve bunun dönüşüm sağlamayacağını biliyorsunuz. Zevk hakkında tartışmak yerine, adayı tek sayfalık bir karar notuyla sonuçlanan altı adımlı bir değerlendirmeden geçirebilirsiniz. Süreç yazılı bir iş tanımıyla başlar, ardından demoyu kendi içeriğinizle yeniden kurar, gerçek dünya hızını ve mobil davranışını ölçer, özelleştirme maliyetini puanlar ve ödünleşimleri sade bir dille tabloya döker. Sonuç, teknik bilgisi olmayan patronunuzun CSS anlamadan onaylayabileceği bir belgedir. Görünüş üzerine savaşmayı bırakıp kanıtları karşılaştırmaya başlayacaksınız. Bu makale, her adımı somut mikro örnekler ve uyarılarla ele alıyor; ücretsiz temaların neden nadiren ücretsiz olduğunu ve demo hızının neden kurgu olduğunu da içeriyor.

Patronunuzun bir sekmede demo, diğerinde Slack açık. Bir ana sayfa: tam sayfa hero videosu, basın logolarından oluşan bir şerit ve aciliyet hissi veren satışa geri sayım çubuğu. "İşte bu," diye yazıyorlar. Üç gününüzü dönüşüm odaklı düzenleri karşılaştırarak geçirdiniz ve "Bu tasarım aslında mobil dönüşümlere zarar veriyor" demek üzeresiniz, ama 'aslında' ile başlayan cümlelerin fikir değiştirmediğini öğrendiniz. Fikir değiştiren şey, çalışmanızı gösteren bir çerçevedir.

İşte bir şablon kararını zevk testinden karar notuna dönüştürmek için kullandığım altı adımlı yöntem. Birkaç saat sürer ve teknik bilgisi olmayan patronunuzun teslim olmuş hissetmeden onaylayabileceği bir belge ortaya çıkarır.

1. Herhangi bir demoyu açmadan önce iş tanımını yazın.

İlke: bir şablonu, ne için işe alındığını bilmeden değerlendiremezsiniz. Patronunuzun demosunun bir işi var: ünlü bir marka gibi görünmek. Web sitenizin bir işi var: geri dönen bir müşteriyi "Buna ihtiyacım var"dan "Bunu satın aldım"a mümkün olduğunca hızlı getirmek.

Bu yüzden tek bir tema açmadan önce mağazanızın temel senaryosu hakkında kısa bir paragraf yazın. Deri ürünler satan bir butik için bu şöyle olabilir: "Telefonda, ne istediğini bilen bir müşteri, kaydırmadan ürün fiyatını ve sepete ekle düğmesini görebilmelidir. O andan ödemeye giden yol bir dakikadan az sürmeli ve ürün sayfası ile ödeme ekranı arasında hiçbir şey açılmamalıdır." Bu test edilebilir bir ifadedir. Ardından, gelirinizin çoğunu sağlayan üç veya dört eylemi listeleyin - aramadan ürüne, üründen ödemeye ve belki mevsimsel alıcılar için "koleksiyona göre alışveriş" gibi.

Uyarı: iş tanımına görsel tercihleri koymayın. Renkler, yazı tipleri ve görsel kırpmaları değiştirilebilir - CSS'in ne kadar çok şeyi geçersiz kılabileceğine şaşırırsınız. Bunu davranışlara ve kısıtlamalara odaklı tutun: hız, mobil görünürlük, gezinme derinliği ve ödeme adımları. Patronunuz "Büyük görseli seviyorum" dediğinde, "Büyük bir görseli koruyabilir ve yine de iş tanımını karşılayabiliriz - ancak sepete ekle düğmesi ilk ekranda kalırsa" diye cevap verebilirsiniz. Onların zevkini reddetmiyorsunuz; bunu mağazanın gerçek ihtiyaçlarına göre test ediyorsunuz.

2. Demoyu kendi içeriğinizle yeniden oluşturun.

Satıcı demoları, profesyonel ürün fotoğrafçılığı, tam genişlikte başlıklar ve tema yazarının yazdığı metinlerle sahnelenir. Sizin ürünlerinizin farklı görsel oranları var, ürün başlıklarınız cümle gibi ve 'hakkımızda' sayfanız sürdürülebilirlik hakkında üç paragraf. Demo tüm bunları gizleyebilir.

Bu yüzden şablonu bir hazırlık ortamına alın ve gerçek içeriğinizle değiştirin - örnek bir kurgu değil, gerçek bir ürün, gerçek adı ve gerçek açıklamasından bir paragrafla. Ardından önemli olan üç anı test edin: 375 piksel genişliğindeki ekranda ürün sayfası, uzun bir kategori adıyla arama sonuçları ve gerçek ödeme sağlayıcınızla ödeme. Örneğin, el yapımı seramik kupalar satan bir mağaza, demodaki ürün görsellerinin beyaz bir arka planda çekildiğini, ancak kendi fotoğraflarının yoğun bir atölye arka planına sahip olduğunu fark eder - temanın koyu kaplaması kupayı görünmez yapar. Bu, yalnızca kendi içeriğinizle yakalayabileceğiniz bir şey.

Bu, şablon demosunu denetlemenin özüdür - pazarlamayı kontrol eder, temayı değil. Başlık üç satıra sarılırsa ve 'Sepete Ekle' düğmesini aşağı iterse, demo ne kadar iyi görünürse görünsün bu bir kırmızı bayraktır.

3. Demonun göstermediğini ölçün.

Demo, tema geliştiricisinin optimize edilmiş sunucusunda çalışır. Siteniz, kendi sunucunuzda, eklentilerinizle, analitik betiklerinizle ve terk edilmiş sepet uygulamanızla çalışacak. Bu yüzden demonun yüklenme hızı aslında bir kurgudur.

Gerçek envanterinizle bir hazırlık sitesi kurun ve iki test yapın: önce hızlı bir masaüstü bağlantısında, sonra önbellek temizlenmiş gerçek bir telefonda 4G üzerinden. Sayfanın kullanılabilir hale geldiği süreye bakın, yalnızca yüklendiği anda değil. Birçok tema başlığı anında işler, ancak bir kaydırıcı betiği yüklenirken düzeni iki saniye boyunca engeller - bu, telefonlarda gerçek bir sorundur. Ayrıca telefonda ödeme adımlarını deneyin. Bazı cilalı temalar masaüstünde iyi görünür, ancak mobil ödemeyi beş ekranlık bir slayt gösterisine dönüştürür, adresten önce promosyon kodunu sorar ve ödeme düğmesinden sonra kargo tahminini gösterir. Mobil öncelikli kontrol listesinin işe yaradığı nokta burasıdır - baş parmak erişimini, dokunma hedeflerini ve 'Devam' düğmesinin sayfa katının üstünde olup olmadığını doğrulamanızı sağlar.

Temanın kendi hız raporuna güvenmek isteyebilirsiniz. Güvenmeyin. Tema demo sayfası, önbelleğe alma ile bir CDN'den sunulur ve temanın hız rozeti genellikle ideal koşullarda çekilmiş bir ekran görüntüsüdür. Sizin ortamınız farklı ve bu sorun değil - test sizin ortamınızla ilgili.

4. Özelleştirme maliyetini puanlayın — ve 'ücretsiz' konusunda dürüst olun.

İşte karşı çıkmanız gereken varsayım: ücretsiz temalar daha ucuzdur. Nadiren ücretsizdirler, çünkü geliştirici zamanıyla ödersiniz. Ücretsiz bir temanın sınırlı bir seçenek paneli olabilir ve her marka ince ayarı - başlığı ayarlamak, hero görselini değiştirmek, rozet eklemek - bir CSS geçersiz kılma veya alt tema gerektirir, bu da her biri için bir saat fatura edilebilir geliştirici zamanı anlamına gelir. İyi bir seçenek paneline sahip ücretli bir tema, tek bir özel kod isteğinden kaçındığınız ilk seferde kendini amorti edebilir.

Ancak bunun tersi de doğru: sayfa oluşturucu içeren ücretli bir tema, sade bir ücretsiz temadan daha yavaş ve bakımı daha zor olabilir. Gerçek maliyet lisans fiyatı değil; 'demonun yaptığı' ile 'markanızın ihtiyaç duyduğu' arasındaki farktır. Gerçekten yapacağınız değişiklikleri sayın: logo, başlık düzeni, tipografi, ürün ızgarası, altbilgi ve güven rozetleri. Temanın seçenek paneli sekizden beşini kapsıyorsa, öndesiniz. Sadece ikisini kapsıyorsa, bir tema değil bir proje satın alıyorsunuz. Bu, yanlış şablonu seçmenin gizli maliyetlerinin bir parçasıdır - fiyat etiketi yalnızca başlangıçtır.

5. Ödünleşimleri patronunuzun görebileceği şekilde ortaya koyun.

Bir tablo, yüzlerce gidip gelmeden daha değerlidir çünkü konuşmayı 'Bunu seviyorum'dan 'Bu seçimin maliyeti şu'ya taşır. İki finalisti karşılaştırırken bunu yazdırın (veya Slack'e yapıştırın):

Demonun gösterdiği	Doğrulamanız gereken
Hero videosu anında oynuyor	Mobil veride otomatik oynuyor mu, yoksa kimsenin dokunmadığı bir oynat düğmesiyle donmuş bir görüntüye mi dönüşüyor?
Ürün görselleri premium görünüyor	Ürün görselleriniz, ürünü karede kaybetmeden kırpmaya uyuyor mu?
Gezinme sorunsuz	Gerçek bir telefonda, menüye tek başparmakla ulaşılabiliyor mu, yoksa iki elinizi de kullanmanızı gerektiren bir uzanma mı söz konusu?
Sayfa hızlı yükleniyor	Hız testini satıcının değil, kendi sunucunuzda çalıştırın.
Ödeme sayfası güzel	Gerçek bir test siparişi tamamlayın. Kaç dokunuş ve ne kadar kaydırma gerektiğini not edin.

Patronunuz bazı demoların hisleri dönüştürdüğünü, satışları değil, görecek. Tablo bu hisleri onay kutularına dönüştürür.

6. Tartışmayı bitiren tek sayfalık bir karar notu yazın.

Son adım, denetimi bir karara dönüştürür. Tek sayfada, sade bir dille tutun. Öneriyle başlayın, ardından üç kanıt gösterin: mobil test, hız testi ve özelleştirme tahmini. Sonra kabul ettiğiniz ödünleşimi belirtin - örneğin, 'animasyonlu sepet simgesini kaybediyoruz, ancak telefonda daha kısa bir ödeme kazanıyoruz.' Son olarak, sonraki adımlarla bitirin: lansmandan sonra neleri ayarlayacaksınız ve nasıl ölçeceksiniz.

Not, bir satış belgesidir - patronunuza, kendi yöneticisine savunabileceği bir kararı satıyorsunuz. Her noktayı iş terimleriyle çerçeveleyin. 'Sepete ekle düğmesi iPhone SE'de sayfa katının altında' yerine, 'En yaygın telefon boyutunda, müşterilerin ürünü eklemek için kaydırma yapması gerekir, bu da ayrılma olasılığını artırır' yazın. 'Tema çok fazla JavaScript kullanıyor' yerine, 'Sayfa 4G'de daha uzun sürede yükleniyor ve yavaş sayfalar daha düşük dönüşümle ilişkilendiriliyor' yazın. 'Sonraki adımlar' bölümünü atlamayın; patronunuzu kalıcı bir şeye onay vermediğinize ikna eder - lansman sonrası ayarlamaları içeren bir sürece başlıyorsunuz.

Bir şablonun özellik setini dönüşüm hedeflerinizle eşleştirme konusunda daha derin bir bakış istiyorsanız, dönüşüm sağlayan bir şablon seçme rehberi özellik bazında dökümü kapsar.

Amaç karar değil, çerçevedir.

Bir demo her zaman gelir - yeni bir trend, daha gösterişli bir animasyon, patronunuzun ikinci kuzeninin sitesi. Her seferinde tartışmak yerine, adayı aynı altı adımdan geçirin. Demo o anı kazanabilir, ancak not toplantıyı kazanır. Ve bir dahaki sefere bir karara ihtiyacınız olduğunda, hikayenin ne kadar iyi olduğunu umursamayan bir süreciniz olacak.