Gutenberg için Ürünler bloğu ile gönderilere ve sayfalara ürün eklemeyi kolaylaştırma

Yayınlanan: 2018-05-02

Ürünler bloğu, sevgiyle “Wootenberg” olarak adlandırdığımız bir projenin birinci aşamasını temsil eder—WooCommerce'in Gutenberg editörünün gelişi için hazırlanması.

Gutenberg?

Bunu kaçırdıysanız, Gutenberg, WordPress için oluşturulmuş ve 5.0 sürümüne dahil edilmesi planlanan yepyeni, görsel odaklı bir içerik düzenleyicidir. Bununla ilgili her şeyi okuyun ve Gutenberg özellik eklentisinin en son sürümünü indirin.

Ürünler bloğu nedir?

Esasen, Ürünler bloğu, yakında taşınacağımız Gutenberg dünyası için oluşturulmuş Ürünler kısa kodunun modern bir versiyonudur.

Ürünler bloğu, çeşitli kaynaklardan ürün eklemek için sezgisel bir kullanıcı arabirimi sağlar , ardından bu seçimin yayınlandığında nasıl görüneceğine dair doğru bir önizleme sunar. Ayrıca, düzeni ayarlayarak ve sipariş vererek bu ürünlerin görünümünde ince ayar yapabileceksiniz.

Ürünler bloğu ile gönderilere ve sayfalara hızlı ve kolay bir şekilde ürünler ekleyebilirsiniz:

Bireysel, özenle seçilmiş ürünler
Belirli kategorilerdeki ürünler
Özel Ürünler
indirimli ürünler
Belirli niteliklere veya terimlere sahip ürünler
En çok satanlar
En beğenilen ürünler

Veya tüm ürünlerinizi ekleyin.

Ürünler bloğunun nasıl çalıştığını görmek için bu kısa videoya bir göz atın:

Mevcut kısa kod deneyimi üzerinde çarpıcı bir gelişme, sence de öyle değil mi? Yaparız!

Ürünler Bloğu Alın

Bir özellik eklentisi

Şu anda Ürünler bloğu yeni bir konsept ve Gutenberg'e bağlı. Gutenberg'in kendisi hala bir özellik eklentisi olduğundan, Ürünler bloğunu da bir özellik eklentisi olarak yayınlıyoruz. Bu şekilde, WooCommerce çekirdeğinden bağımsız olarak özelliği hızlı bir şekilde oluşturabiliyoruz; özellik eklentileri hakkında daha fazla bilgi edinin. Hepsinden iyisi, hepinizin onu kurması ve onunla oynaması için uygun bir yol sağlar.

Not: Ürünler bloğunu denemeye başlamak için sitenizde hem WooCommerce hem de Gutenberg'in çalışıyor olması gerekir.

Tasarımın ve kodun istikrarından memnun olduğumuzda. tüm WooCommerce mağazalarında erişilebilir olmaları için özellikleri WooCommerce çekirdeğinde birleştireceğiz. Bu noktada, özellik eklentisini devre dışı bırakabilir ve kaldırabilirsiniz; özellik eklentisiyle eklediğiniz tüm ürün blokları etkin kalır.

Bizim yaklaşımımız

Gutenberg, WooCommerce gibi büyük bir eklenti için birçok heyecan verici olasılık yaratıyor. Şimdilik, bir ürün eklemek gibi daha karmaşık görevlere geçmeden önce, Gutenberg'in tasarım kalıpları ve hızla gelişen kod tabanıyla sağlam bir temel oluşturduğumuzdan emin olmak için ilk araştırmamızın kapsamını sınırlamak bizim için önemliydi. Görünüşe göre, daha küçük kapsamlı projemiz bile beklemediğimiz fırsatları ortaya çıkardı.

Ürünler bir gönderiye veya sayfaya eklendiğinde, içeriğinizi yayınladığınızda nasıl olacaklarının bir önizlemesini görürsünüz.

Araştırma

Tasarıma geçmeden önce, doğru yöne gittiğimizden emin olmak için birkaç tur araştırma yaptık. Bu, Gutenberg ile oynamak, tasarım ekibiyle konuşmak ve WordPress topluluğundaki diğerlerinin şu anda Gutenberg ile ne yaptığına bakmak için çok zaman harcamayı içeriyordu.

Farklı ürün kısa kodları kullanan sitelerin yüzdesini gösteren bir grafik — Farklı ürün kısa kodları kullanan sitelerin yüzdesi

Ürün kısa koduna odaklandığımız için, 10.000 WooCommerce sitesinde kullanımını analiz ettik. Kısa kodun en popüler uygulamalarının belirli ürünleri, ürün kategorilerini ve öne çıkan ürünleri göstermek olduğunu öğrendik. İlginç bir şekilde, çok az mağaza bunu en yüksek puan alan ürünleri, en çok satan ürünleri veya belirli özelliklere sahip ürünleri sergilemek için kullanıyor gibi görünüyordu.

Ürün kısa kodunun en popüler uygulamaları belirli ürünleri, ürün kategorilerini ve öne çıkan ürünleri görüntülemekti.

İnsanların bir özelliği gerçekten nasıl kullandığını görmek büyüleyici ve bu içgörü, hangi akışların en önemli olduğunu anlamamıza yardımcı oldu. Aynı zamanda varsayımlarımıza meydan okuyor, böylece bir sonraki tasarım aşamasında nelerle uğraşacağımız konusunda bilinçli kararlar verebiliyoruz.

Denetlenen testler, birinci tur

İlk tur tasarımlarımız, mağaza sahibinin ürünleri bir sayfada veya gönderide sergilemek isteyebileceği yolları araştırdı. Mağaza kurucuları ve mağaza sahipleri/yöneticileriyle görüştük, ürünleri yerleştirmek için birkaç test senaryosu oluşturduk, ardından onlardan eklentiyi denemelerini ve tepkilerini ve geri bildirimlerini konuşmalarını istedik.

Geliştirmeye başlamadan önce tasarım sürecinin başlarında bu geri bildirimi almak, müşterilerin ürünlerini nasıl yerleştirmeyi ve sergilemeyi beklediklerine daha iyi uyum sağlamak için tasarımların bir sonraki yinelemesine bilgi verdi. Bu bize daha fazla test için özellik eklentisinin ilk sürümü ile ilerlemek için güven verdi.

Bu test turundan çıkardığımız ana sonuç, akışlarımızın oldukça iyi olmasına rağmen, blok ayarlarıyla etkileşime geldiğinde insanların başının belaya girmesiydi. Bu kısmen bir keşfedilebilirlik sorunuydu, ancak aynı zamanda ayarların aşırı yüklenmesinin bir sonucuydu. Bu nedenle bazı seçenekleri kaldırdık (ürün verileri görünürlük geçişleri gibi - yakında Gutenberg çekirdeği aracılığıyla daha iyi halledebileceğimiz bir şey) ve diğerlerini (ürün kapsam seçici gibi) ana blok ayarları bölümüne taşıyarak bunları bloktan hemen sonra görünür hale getirdik yerleştirildi.

Öncesi ve sonrası - daha az ayar ve ürün kapsamını değiştirmenin daha net bir yolu — Öncesi ve sonrası – daha az ayar ve ürün kapsamını değiştirmenin daha net bir yolu

Denetlenen testler, ikinci tur

Özellik eklentisi hazır olduğunda ve tasarımlarımızı güncelledikten sonra, ikinci bir kullanılabilirlik testi turu düzenledik. Bu sefer canlı bir test ortamı hazırladık, böylece test katılımcıları prototipler yerine gerçek Gutenberg arayüzü ile etkileşime girebilir. İnsanların gerçek ürünü kullanmasını izlemek ufuk açıcıydı ve paha biçilemezdi.

Bir Zoom Hangout'unda gerçekleşen bir kullanıcı araştırma oturumunun anlık görüntüsü

Anahtar derslerden ikisi, özellikle Ürünler bloğu hakkında değil, Gutenberg'in kendisi hakkındaydı. Her bir test katılımcısı (çoğu daha önce Gutenberg'i kullanmamıştı) bir blok eklerken takıldı ve gelişmiş ayarları bulmakta sorun yaşadı. Testlerimizin sonuçlarını Gutenberg ekibiyle paylaştık, ikinci sayı için zaten bir düzeltme uygulandı ve şu anda ilkini ele almak için tasarım seçeneklerini araştırıyoruz.

Ürünler bloğunun kendisine gelince, seçim sırasında kullanıcıdan daha fazla girdi gerektirmeyen ürünleri görüntülerken gereksiz bir adımı kaldırmak gibi bazı ince ayar ayarlamaları yaptık - öne çıkan ürünleri görüntülemeyi seçerseniz, ek bir öğeye ihtiyacımız yok kategorileri seçerken bunu onaylamak için eylem. Ayrıca, sergilenen ürünlerin kapsamını değiştirmek için tutarlı bir akış olmadığını fark ettik ve test katılımcılarının tümü bu ayarlar için farklı yerlere baktı, bu nedenle ilk blok ayarlarına geri dönüş için daha fazla yol ekledik.

Düz kapsamlar , ürün satışını veya en çok satanları içerir - hiçbir fark yoktur. Çeşitli kapsamlar , seçim işlemi sırasında kullanıcıdan daha fazla girdi gerektirir.

Sonuç? Bugün indirilebilen bu özellik eklentisi.

Öne çıkan ürünler gibi önceden ayarlanmış bir kapsam seçmek, sizi artık onaylamanıza gerek kalmadan doğrudan önizlemeye götürür

Ürünler Bloğu Alın

WooCommerce prototiplerini bizimle test etmek ister misiniz?

WooCommerce tasarım ekibi tarafından gerçekleştirilen bir zafer sıçraması

En son WooCommerce gelişmeleriyle ilgileniyorsanız, WooCommerce'in geleceğini şekillendirebilmeniz için lütfen Tasarım Geri Bildirim Grubumuza kaydolun. Yeni projeler araştırmak ve prototiplerimizi ve MVP'lerimizi test etmek için üyelere periyodik olarak ulaşıyoruz.