Mempermudah untuk menambahkan produk ke posting dan halaman dengan blok Produk untuk Gutenberg

Diterbitkan: 2018-05-02

Blok Produk mewakili tahap pertama dari proyek yang kami sebut sebagai "Wootenberg"—persiapan WooCommerce untuk kedatangan editor Gutenberg.

Gutenberg?

Jika Anda melewatkannya, Gutenberg adalah editor konten baru yang digerakkan secara visual yang dibuat untuk WordPress dan dijadwalkan untuk dimasukkan dalam rilis 5.0. Baca semua tentangnya dan unduh versi terbaru dari plugin fitur Gutenberg.

Apa itu blok Produk?

Pada dasarnya, blok Produk adalah versi modern dari kode pendek Produk, dibuat untuk dunia Gutenberg yang akan segera kita tuju.

Blok Produk menyediakan antarmuka pengguna yang intuitif untuk menyisipkan produk dari berbagai sumber , lalu memberikan pratinjau akurat tentang bagaimana pilihan itu akan terlihat saat dipublikasikan. Anda juga dapat menyempurnakan tampilan produk tersebut dengan menyesuaikan tata letak dan pemesanan.

Dengan blok Produk, Anda dapat dengan cepat dan mudah menambahkan produk ke postingan dan halaman, termasuk:

Produk pilihan individu
Produk dari kategori tertentu
Produk Pilihan
produk penjualan
Produk dengan atribut atau istilah tertentu
Penjualan terbaik
Produk berperingkat teratas

Atau cukup tambahkan semua produk Anda.

Lihat video singkat ini untuk melihat cara kerja blok Produk:

Peningkatan dramatis atas pengalaman kode pendek yang ada, bukan begitu? Kami melakukannya!

Dapatkan Blok Produk

Plugin fitur

Saat ini, blok Produk adalah konsep baru dan bergantung pada Gutenberg. Karena Gutenberg sendiri masih merupakan plugin fitur, kami juga merilis blok Produk sebagai plugin fitur. Dengan cara ini, kami dapat membangun fitur dengan cepat, terlepas dari inti WooCommerce—baca selengkapnya tentang plugin fitur. Yang terbaik dari semuanya, ini menyediakan cara yang nyaman bagi Anda semua untuk menginstal dan memainkannya.

Catatan: Untuk mulai bereksperimen dengan blok Produk, Anda harus menjalankan WooCommerce dan Gutenberg di situs Anda.

Setelah kami puas dengan stabilitas desain dan kode. kami akan menggabungkan fitur-fitur tersebut ke dalam inti WooCommerce sehingga dapat diakses oleh semua toko WooCommerce. Pada saat itu, Anda dapat menonaktifkan dan menghapus plugin fitur , dan semua blok produk yang Anda sisipkan dengan plugin fitur akan tetap aktif.

Pendekatan kita

Gutenberg menciptakan banyak kemungkinan menarik untuk plugin besar seperti WooCommerce. Untuk saat ini, penting bagi kami untuk membatasi ruang lingkup eksplorasi awal kami untuk memastikan kami membangun fondasi yang kokoh dengan pola desain Gutenberg dan basis kode yang berkembang pesat, sebelum beralih ke tugas yang lebih kompleks seperti menambahkan produk. Ternyata, bahkan proyek kami yang lebih kecil cakupannya menemukan peluang yang tidak kami harapkan.

Setelah produk ditambahkan ke postingan atau halaman, Anda akan melihat pratinjau bagaimana nanti saat Anda mempublikasikan konten Anda

Riset

Sebelum terjun ke desain, kami melakukan beberapa putaran penelitian untuk memastikan kami menuju ke arah yang benar. Ini termasuk menghabiskan banyak waktu bermain dengan Gutenberg, berbicara dengan tim desain, dan melihat apa yang dilakukan orang lain di komunitas WordPress dengan Gutenberg saat ini.

Bagan yang menunjukkan persentase situs yang menggunakan kode pendek produk yang berbeda — Persentase situs yang menggunakan kode pendek produk yang berbeda

Karena kami berfokus pada kode pendek produk, kami menganalisis penggunaannya di 10.000 situs WooCommerce. Kami belajar bahwa aplikasi kode pendek yang paling populer adalah untuk menampilkan produk tertentu, kategori produk, dan produk unggulan. Menariknya, sangat sedikit toko yang tampaknya menggunakannya untuk menampilkan produk dengan peringkat teratas, produk terlaris, atau produk dengan atribut tertentu.

Aplikasi shortcode produk yang paling populer adalah untuk menampilkan produk tertentu, kategori produk, dan produk unggulan.

Sangat menarik untuk melihat bagaimana orang-orang benar-benar menggunakan fitur, dan wawasan ini adalah kunci dalam membantu kami mengetahui alur mana yang paling penting. Ini juga menantang asumsi kami, sehingga kami dapat membuat keputusan berdasarkan informasi tentang apa yang kami tangani di fase desain berikutnya.

Pengujian yang dimoderasi, putaran pertama

Putaran pertama desain kami mengeksplorasi cara pemilik toko mungkin ingin menampilkan produk di halaman atau postingan. Kami mewawancarai pembuat toko dan pemilik/manajer toko, membuat beberapa skenario pengujian untuk menyematkan produk, lalu meminta mereka untuk mencoba plugin dan membicarakan reaksi dan umpan balik mereka.

Menangkap umpan balik ini di awal proses desain, sebelum memulai pengembangan, menginformasikan iterasi desain berikutnya agar lebih selaras dengan harapan pelanggan untuk memasukkan dan menampilkan produk mereka. Ini memberi kami kepercayaan diri untuk maju dengan versi pertama plugin fitur untuk pengujian lebih lanjut.

Takeaway utama kami dari putaran pengujian ini adalah bahwa meskipun aliran kami cukup bagus, orang-orang mengalami masalah saat berinteraksi dengan pengaturan blok. Ini sebagian merupakan masalah yang dapat ditemukan, tetapi juga akibat pengaturan yang berlebihan. Jadi kami menghapus beberapa opsi (seperti sakelar visibilitas data produk – sesuatu yang akan segera dapat kami tangani dengan lebih baik melalui inti Gutenberg) dan memindahkan yang lain (seperti pemilih cakupan produk) ke bagian pengaturan blok utama, membuatnya terlihat segera setelah blok dimasukkan.

Sebelum dan sesudah - lebih sedikit pengaturan dan cara yang lebih jelas untuk mengubah cakupan produk — Sebelum dan sesudah – lebih sedikit pengaturan dan cara yang lebih jelas untuk mengubah cakupan produk

Pengujian yang dimoderasi, putaran kedua

Setelah plugin fitur siap dan kami memperbarui desain kami, kami mengatur pengujian kegunaan putaran kedua. Kali ini kami menyiapkan lingkungan pengujian langsung sehingga peserta pengujian dapat berinteraksi dengan antarmuka Gutenberg yang sebenarnya, bukan dengan prototipe. Menyaksikan orang menggunakan produk yang sebenarnya membuka mata — dan sangat berharga.

Cuplikan sesi riset pengguna yang berlangsung di hangout Zoom

Dua pelajaran utama bukanlah tentang blok Produk secara khusus, tetapi tentang Gutenberg itu sendiri. Setiap peserta tes (sebagian besar belum pernah menggunakan Gutenberg sebelumnya) terjebak saat menambahkan blok, dan kesulitan menemukan pengaturan lanjutan. Kami membagikan hasil pengujian kami dengan tim Gutenberg, perbaikan telah diterapkan untuk masalah kedua, dan saat ini kami sedang menjajaki opsi desain untuk mengatasi yang pertama.

Untuk blok Produk itu sendiri, kami melakukan beberapa penyesuaian, seperti menghapus langkah asing saat menampilkan produk yang tidak memerlukan masukan lebih lanjut dari pengguna selama pemilihan — jika Anda memilih untuk menampilkan produk unggulan, kami tidak memerlukan tambahan tindakan untuk mengonfirmasi itu seperti saat memilih kategori. Kami juga memperhatikan bahwa tidak ada alur yang konsisten untuk mengubah cakupan produk yang dipajang dan peserta uji semua mencari di tempat yang berbeda untuk pengaturan ini, jadi kami menambahkan lebih banyak jalur kembali ke pengaturan blok awal.

Cakupan datar mencakup penjualan produk, atau buku terlaris – tidak ada perbedaan. Cakupan yang bervariasi memerlukan masukan lebih lanjut dari pengguna selama proses pemilihan.

Hasil? Plugin fitur ini yang tersedia untuk diunduh hari ini.

Memilih cakupan preset seperti produk unggulan sekarang membawa Anda langsung ke pratinjau tanpa harus mengonfirmasi

Dapatkan Blok Produk

Tertarik untuk menguji prototipe WooCommerce bersama kami?

Tim desain WooCommerce — Lompatan kemenangan yang dilakukan oleh tim desain WooCommerce

Jika Anda tertarik dengan perkembangan WooCommerce terbaru, silakan daftar ke Grup Umpan Balik Desain kami sehingga Anda dapat membentuk masa depan WooCommerce. Kami secara berkala menjangkau anggota untuk membantu meneliti proyek baru dan menguji prototipe dan MVP kami.