Shopify Tasarım İpuçları ve UX En İyi Uygulamaları

Yayınlanan: 2022-03-11

Shopify, 175 ülkede yarım milyondan fazla e-ticaret işletmesine güç sağlıyor. 2012'den bu yana Shopify platformundaki tüccarların sayısı yıllık ortalama %74 arttı ve bu tüccarlar, Shopify'ın bugün en iyi bilinen ve kullanımı en kolay e-ticaret platformlarından biri olması sonucunda 55 milyar dolardan fazla satış gerçekleştirdi.

Shopify için tasarım yapmak, tasarımcılar için çok kazançlı olabilir.

Shopify, alan adları, barındırma, tüm arka uç ve bazı ön uç işlevleriyle ilgilenirken, UX tasarımına daha fazla zaman, para ve kaynak harcanabilir. 2021 yılına kadar, dünya çapındaki e-ticaret satışlarının 4,9 trilyon dolarlık yeni bir yüksek seviyeye ulaşması bekleniyor ve standart altı UX tasarımının terkedilmiş ödemelere en büyük katkıda bulunanlardan biri olmasıyla, e-Ticaret en iyi uygulamalarının uygulanmasının oldukça etkili olmaya devam edeceği çok açık.

Bu makalede, en iyi Shopify tasarım ipuçlarını keşfedeceğiz.

Shopify'ın Hangi Özellikleri Var?

Shopify, en iyi e-ticaret platformundan bekleyeceğiniz tüm özelliklerle birlikte gelir:

  • Stripe ve PayPal gibi harici ödeme ağ geçitleriyle entegrasyon
  • Harici seçeneklere kıyasla sıfır ücretle Shopify Payments'a erişim
  • Hediye kartı veya mağaza kredisi ile ödemeye izin verme yeteneği
  • Özelleştirilebilir bir ödeme sayfası (yalnızca Shopify Plus müşterileri için)
  • Kullanıcı hesapları veya misafir ödeme seçeneği
  • Statik sayfalar (ör. Gizlilik Politikası veya Şartlar ve Koşullar)
  • Promosyon içerikli açılış sayfaları
  • Geliştirme aşamasındaki mağazalar için parola erişimi
  • Bir dizi özelleştirilebilir seçeneğe sahip ürün çeşitleri
  • Ürünlerin kategorizasyonunu otomatikleştirmek için akıllı koleksiyonlar
  • Ürün keşfine yardımcı olmak için arama ve etiketleme işlevi
  • Ürünleri gönderilere yerleştirme özelliğine sahip blog işlevi
  • Geliştiricilerin dinamik web siteleri ve mobil uygulamalar oluşturmasına yardımcı olacak bir API

E-Ticaret Ürün Keşfini Artırma

Müşterilerin bir personele sorarak belirli öğeleri bulabilmeleri için gerçek mekanda faaliyet gösteren mağazaların departmanlar tarafından düzenlenmesine benzer şekilde, çevrimiçi alışveriş yapanların da aradıklarını kolayca ve kolayca bulabilmeleri için göz atma, filtreleme ve arama yapma yeteneğine ihtiyaçları vardır. çabuk .

E-Ticaret müşterilerinin %40'ı, yüklenmesi 3 saniyeden uzun süren web sitelerini terk ediyor, bu da ürün keşfetme konusunda ne kadar sabırsız olduklarını gösteriyor. Neyse ki Shopify, özel gezinme oluşturmayı, ürünleri ve kategorileri düzenlemeyi ve arama işlevini uygulamayı kolaylaştıran bir dizi özelliğe sahiptir.

Özel Gezinme

Müşteriye çok fazla seçenek sunmak, analiz felcine neden olabilir (etkili bir şekilde karar vermek için çok fazla seçenek olduğunda, hayal kırıklığı ve terk ile sonuçlanır). Özel bir gezinme tasarlayarak, en etkili şekilde dönüştürülen ürünlere ve "koleksiyonlara" öncelik verebiliriz - örneğin, masa ürünleri en popülerse "Masa" koleksiyonunu görünür şekilde sergilemek. Bu özel gezinmeler, gündelik A/B testini etkinleştirmek için Shopify CMS'de de düzenlenebilir.

Görsel olarak konuşursak, en iyi dönüşüm sağlayan Shopify temaları, koleksiyonun başlığını net bir şekilde gösterir ve kullanıcının sunulan tüm ürünler, koleksiyonlar ve sayfalar arasında aradıklarını kolayca tanımlamasına yardımcı olmak için yeterli boşluk kullanır.

Shopify tasarım ipucu: özel gezinmeler kullanmayı düşünün
Optimize edilmiş navigasyondan yararlanan Grovemade'den Shopify mağazası.

Koleksiyonlar

Koleksiyon, benzer ürünlerden oluşan organize bir gruptur. Ürünler manuel olarak koleksiyonlara ayrılabilir veya eşleşen kriterlere göre otomatik olarak sıralanabilir (örneğin, ürün başlığı belirli bir anahtar kelime içeriyorsa, belirli bir etikete atanmışsa veya belirli bir fiyat aralığına giriyorsa). Koleksiyonlar, Shopify web sitesi tasarımlarının her zaman alakalı, zamanında ve hepsinden önemlisi yüksek oranda dönüşüm sağlamasını sağlamak için geçici (yani sezonluk veya sınırlı süreli satış için) olabilir.

Bu koleksiyonlar perde arkasında tanımlanırken, e-Ticaret tasarımcılarının Shopify için tasarım yaparken bu işlevin farkında olması yararlıdır.

Ürün etiketleri

Görüntülenen/görünür etiketler müşterilerin benzer ürünleri bulmasına yardımcı olur ve yukarıda bahsedildiği gibi koleksiyonlar oluşturmak için dahili olarak da kullanılabilirler. Bununla birlikte, etiketlerin en büyük yararı, müşterilerin ürünleri "Sarı" gibi etiketli tanımlayıcı bir özniteliğe göre filtrelemesine olanak tanıyan çok yönlü bir arama oluşturmak için kullanılabilmesi gerçeğinde yatmaktadır.

Shopify tasarım ipucu: Shopify etiket sistemini kullanma
Shopify platformunda ürünlere etiket atama.

Bu Shopify tasarım ipuçlarını aklınızda bulundurun:

  • Ek açıklama için hangi filtrelerin uygulandığını gösterin.
  • Müşterilerin aramalarını genişletmek için filtreleri kaldırmasına izin verin.
  • İlk bakışta yalnızca en popülerleri göstermek için filtreleri kısaltın.

Etiketler ve kesilmiş filtrelerle daha iyi Shopify web sitesi tasarımı
Etiketleri kullanarak etkili ürün filtreleme. Pure Cycles tarafından Shopify mağazası.

Arama

Arama işlevi, tam olarak ne aradıklarını bilen müşteriler için kullanışlıdır ve özellikle, bir mobil cihazda etkileşim kurmanın doğal garipliği nedeniyle göz atmayı ve filtrelemeyi sinir bozucu bulan mobil müşteriler için önemlidir.

Arama deneyimleri tasarlarken göz önünde bulundurulması gereken Shopify en iyi uygulamaları şunlardır:

  • Arama kutusunu asla gizlemeyin; hemen kullanılabilir hale getirerek sürtünmeyi azaltın.
  • Aramayı müşterilerin beklediği yere yerleştirin (yani, sağ üst veya merkezi).
  • Yalnızca arama simgesini değil, tüm giriş kutusunu gösterin.
  • Kullanıcıların daha hızlı arama yapmasına yardımcı olmak için otomatik tamamlama işlevini dahil edin.
  • Önerilen sonuçları ve otomatik düzeltmeyi kullanarak insan hatası için tasarım yapın.
  • Kullanıcı aramalarını kaydedin ve satış yapılmadıysa takip e-postaları gönderin.

Daha iyi arama deneyimleri tasarlayarak Shopify mağaza tasarımını iyileştirin
Sunday Somewhere tarafından kapsamlı ama iyi yapılandırılmış bir arama.

Ürün Sayfaları için Shopify En İyi Uygulamaları

Shopify, e-Ticaret müşterilerini bağlamak ve kullanıcıları akıcı bir şekilde doğrudan ödeme aşamasına yönlendirmek için gereken tüm özellikleri sunar. Bu özellikleri e-ticaretin en iyi uygulamalarıyla birleştirirsek, terk edilen ödeme sayısını ortalama istatistiğin altına çekebiliriz.

Büyüleyici Ürün Resimleri Kullanın

Bir e-ticaret sitesini iyi yapan şey, kullanıcıları duygusal olarak büyüleyen görüntülerdir. Bu amaçla Shopify, birden fazla görselin ve ürün çeşidinin yüklenmesine izin verir. Bununla birlikte, Shopify'ın en iyi uygulaması olarak, beklentileri belirlemek için bu ürün resimlerinden en az birini ölçekli olarak (yani, ürünün ne kadar büyük olduğunu göstermek için başka nesnelerle çevrili olarak) görüntüleyin.

Müşteriler, tüm ürün görsellerinin canlı, yüksek kaliteli ve yakınlaştırılabilir olduğundan emin olmak için ürünü satın almadan önce kapsamlı bir araştırma yapmak isterler.

Shopify tasarım ipucu: Harika görüntülere sahip Shopify mağazaları daha iyi dönüşüm sağlar
Hardgraft'tan görsel olarak büyüleyici bir ürün sayfası.

Net Ürün Bilgilerini Görüntüle

Şok edici (ama şaşırtıcı olmayan) sayıda e-ticaret müşterisi, gerçek maliyet hakkında bilgi eksikliği nedeniyle alışveriş sepetlerini terk ediyor. Müşterilerin %60'ı alışveriş sepetini terk etme nedeni olarak beklenmeyen maliyetleri (ör. kargo, vergi, ücretler) belirtiyor ve %23'ü toplam maliyeti önceden hesaplayamıyor. Şeffaflığın olmaması, e-Ticaret web sitelerinde dönüşümleri artırmanın kesin bir yoludur, bu nedenle bu Shopify ipuçlarını ve püf noktalarını aklınızda bulundurun:

  • Bilgileri net bir şekilde yapılandırmak için aşamalı açıklama tekniklerini kullanın.
  • Maliyetlerin tam dökümünü önceden görüntüleyin.
  • Değer teklifini açıkça iletin.
  • Şimdi satın al/sepete ekle düğmesini görsel olarak ayırt edici hale getirin.

İyi tasarlanmış bir Shopify mağazası
Luxy Hair, önemli bilgileri netleştirmek için dikkatli ürün sunum tasarımı kullanır.

Güven ve Güven Oluşturun

Baymard Enstitüsü'ne göre, müşterilerin %19'unun kasadan ayrılma nedeni olarak güven eksikliği gösteriliyor. Neyse ki, tüm Shopify mağazaları varsayılan olarak SSL (güvenli ödeme) ile gönderilir, ancak müşterilerin sosyal kanıt olarak yorum bırakmalarına da izin verir.

Sosyal kanıt, e-Ticaret web sitelerinde güveni güçlendirerek dönüşümleri hızla artırmanın yadsınamaz bir yoludur. BrightLocal'a göre, tüketicilerin %88'i çevrimiçi incelemelere kişisel bir tavsiye kadar güveniyor, bu nedenle önceki müşterileri inceleme bırakmaya teşvik etmek ve bunu müşteri yolculuğunda belirtmek çok önemli. Çoğu Shopify teması, bu derecelendirmeleri doğrudan arama sonuçlarına entegre etmek için Şema işaretlemesinden de yararlanır.

Shopify en iyi uygulamalarının bir parçası olarak ürün incelemelerini kullanan bir Shopify mağazası
Ürün incelemelerinin uygulanması. MVMT Saatler tarafından Shopify mağazası.

Sosyal doğrulamanın yanı sıra Intercom, Zendesk, Drift veya Kayako gibi bir canlı sohbet çözümünü uygulayarak müşteri güveni oluşturmayı düşünün. Shopify, uygulama mağazası ve manuel kurulum yoluyla üçüncü taraf hizmetlerle entegrasyona izin verir.

İlgili Ürün Önerilerini Göster

Tüm önde gelen e-ticaret işletmeleri, çapraz satış ve yukarı satış stratejilerinden yararlanır. Optimizely'nin Web Önerileri gibi analitik ve A/B testi entegrasyonlarıyla birleştirilen etiketler, tasarımcıların, müşterilerin ilgi duyabileceği alternatif veya ek öğeleri görüntüleyerek dönüşüm oranlarını iyileştirmelerine yardımcı olabilir.

En iyi dönüşüm sağlayan Shopify temaları, çapraz satış ve yukarı satış stratejilerini kullanır
Hardgraft, zorlayıcı satış stratejileri kullanır.

Alışveriş Deneyimi Kişiselleştirmesini Entegre Edin

Shopify koleksiyonları ve etiketleriyle birlikte Optimizely tarafından Web Kişiselleştirmeleri gibi entegrasyonlar, veriye dayalı işletmelerin kitleleri ilgi alanlarına ve önceki satın alma geçmişine göre segmentlere ayırmasına ve sayfa içeriğini buna göre değiştirmesine olanak tanır.

Öngörülü tasarım teknikleriyle Shopify mağazaları daha alakalı içerik görüntüleyebilir, bu da izleyicilerin daha uzun süre etkileşimde kalmasını sağlar ve böylece satışa dönüşme olasılığı daha yüksektir. Kişiselleştirme, herhangi bir e-ticaret işinin finansal alt satırını artırmanın anahtarıdır.

Ödeme Optimizasyonu

Misafir Ödeme ve Müşteri Hesapları

Baymard Enstitüsü'ne göre, "site bir hesap oluşturmamı istedi", müşterilerin hiçbir şey satın almadan ödemelerini terk etmelerinin ikinci en yaygın nedenidir (%35 ile). Shopify, misafir ödemesine (özellikle mobil cihazlarda) izin verilmesini önerir ve bu amaçla müşteri hesaplarının devre dışı bırakılması varsayılan seçenektir.

Shopify
Shopify, hem müşteri hesaplarına hem de misafir ödemesine izin verir.

UX Kusurlarını Belirleme ve Kayıpları Azaltma

Sağlam analitik olmadan terk edilmiş ödemeleri çözmeye çalışmak, karanlık bir odada kara bir kedi aramak kadar etkilidir. Kullanıcı deneyimlerini ve ödeme akışlarını optimize etmek, veriye dayalı bir süreç olduğunda en iyi sonucu verir.

Shopify tasarımcıları, Google Analytics'i Shopify'a bağlayabilir ve yeterli veri toplandıktan sonra, müşterilerin satın alma işlemine devam etmek istemediğine karar verdikleri yeri tam olarak gösterecek olan bir hedef huni oluşturabilir.

En iyi dönüşüm sağlayan Shopify temalarını analiz etmek için Google Analytics'i kullanarak hedef hunisi görselleştirmesi
Patrick Han tarafından Google Analytics kullanılarak hedef hunisi görselleştirme.

En iyi sonuçlar için, ısı haritalarını ve ziyaretçi kayıtlarını kullanarak bu sorunlu alanları daha ayrıntılı olarak gözlemlemek için Shopify'ı Crazy Egg, Hotjar ve FullStory gibi araçlarla entegre edin.

Çözüm

Tasarımcıların Shopify platformunun avantajlarını ve özelliklerini daha iyi iletebilmeleri ve müşterilere hangi çözümleri sağlayıp sağlayamayacağını öğrenebilmeleri için ücretsiz bir demo mağazası açmak en iyisidir. Ek olarak, en iyi e-ticaret tasarımcıları, Shopify web sitesi tasarımcısı olarak özgeçmişlerine daha fazla güvenilirlik ekleyerek kayıtlı Shopify Experts olabilir.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

  • Daha fazla Shopify ipucu ve püf noktası için Shopify blogunu okuyun.
  • eCommerce UX – Temel Tasarım Stratejileri ve İlkeleri
  • Mobil Deneyim için e-Ticaret UX
  • UX Tasarımı ile e-Ticaret Müşterilerini Nasıl Kancalarsınız?
  • Duyarlı Tasarım - En İyi Uygulamalar ve Hususlar