グーテンベルクのProductsブロックを使用して、投稿やページに商品を簡単に追加できるようにする

公開: 2018-05-02

Productsブロックは、私たちが愛情を込めて「Wootenberg」と呼んでいるプロジェクトのステージ1を表しています。これは、Gutenbergエディターの到着に向けたWooCommerceの準備です。

グーテンベルク？

見逃した方のために説明すると、Gutenbergは、WordPress用に構築され、5.0リリースに含まれる予定のまったく新しい視覚駆動型のコンテンツエディターです。それについてすべて読んで、グーテンベルク機能プラグインの最新バージョンをダウンロードしてください。

Productsブロックとは何ですか？

基本的に、Productsブロックは、Productsショートコードの最新バージョンであり、間もなく移行するグーテンベルクの世界向けに構築されています。

Productsブロックは、さまざまなソースから製品を挿入するための直感的なユーザーインターフェイスを提供し、公開されたときにその選択がどのように表示されるかを正確にプレビューします。また、レイアウトや順序を調整することで、これらの製品の外観を微調整することもできます。

Productsブロックを使用すると、次のような商品を投稿やページにすばやく簡単に追加できます。

厳選された個性的な商品
特定のカテゴリの製品
おすすめ商品
セール商品
特定の属性または用語を持つ製品
ベストセラー
一流の製品

または、単にすべての製品を追加します。

この短いビデオを見て、Productsブロックがどのように機能するかを確認してください。

既存のショートコードエクスペリエンスを大幅に改善しましたね。やる！

製品ブロックを取得

機能プラグイン

現在、Productsブロックは新しい概念であり、Gutenbergに依存しています。グーテンベルク自体はまだ機能プラグインであるため、Productsブロックも機能プラグインとしてリリースしています。このようにして、WooCommerceコアに関係なく、機能をすばやく構築できます。機能プラグインの詳細をご覧ください。何よりも、それはすべての人がそれをインストールして遊ぶための便利な方法を提供します。

注：Productsブロックの実験を開始するには、サイトでWooCommerceとGutenbergの両方を実行する必要があります。

デザインとコードの安定性に満足したら。機能をWooCommerceコアに統合して、すべてのWooCommerceストアからアクセスできるようにします。 その時点で、機能プラグインを非アクティブ化して削除することができ、機能プラグインで挿入した製品ブロックはすべてアクティブなままになります。

私たちのアプローチ

グーテンベルクは、WooCommerceのような大きなプラグインに多くのエキサイティングな可能性を生み出します。今のところ、製品の追加などのより複雑なタスクに進む前に、最初の調査の範囲を制限して、グーテンベルクのデザインパターンと急速に進化するコードベースで強固な基盤を構築することが重要でした。結局のところ、私たちのより小さな範囲のプロジェクトでさえ、私たちが予期していなかった機会を発見しました。

製品が投稿またはページに追加されると、コンテンツを公開したときに製品がどのように表示されるかをプレビューできます。

リサーチ

設計に取り掛かる前に、正しい方向に向かっていることを確認するために、数回の調査を行いました。これには、グーテンベルクと遊んだり、デザインチームと話したり、WordPressコミュニティの他の人たちが現在グーテンベルクで何をしているのかを調べることに多くの時間を費やすことが含まれていました。

さまざまな製品のショートコードを使用しているサイトの割合を示すグラフ — さまざまな製品のショートコードを使用しているサイトの割合

製品のショートコードに焦点を当てたため、10,000のWooCommerceサイトでの使用状況を分析しました。ショートコードの最も一般的なアプリケーションは、特定の製品、製品カテゴリ、および注目の製品を表示することであることがわかりました。興味深いことに、一流の商品、ベストセラーの商品、または特定の属性を持つ商品を表示するためにそれを使用している店舗はほとんどないようです。

製品ショートコードの最も人気のあるアプリケーションは、特定の製品、製品カテゴリ、および注目の製品を表示することでした。

人々が実際に機能をどのように使用しているかを見るのは魅力的であり、この洞察は、どのフローが最も重要であるかを理解するのに役立ちました。それはまた私たちの仮定に挑戦するので、私たちは次の設計段階で何に取り組むかについて情報に基づいた決定を下すことができます。

モデレートテスト、ラウンドワン

最初のデザインでは、ストアの所有者がページや投稿に商品を表示する方法を検討しました。ストアビルダーとストアオーナー/マネージャーにインタビューし、製品を埋め込むためのいくつかのテストシナリオを作成してから、プラグインを試して、彼らの反応とフィードバックについて話すように依頼しました。

開発を開始する前に、設計プロセスの早い段階でこのフィードバックを取得し、顧客が製品を挿入して表示する方法とよりよく一致するように、設計の次の反復に通知しました。これにより、機能プラグインの最初のバージョンをさらにテストするために前進する自信が得られました。

このラウンドのテストからの主なポイントは、フローはかなり良好でしたが、ブロック設定との対話に関して人々が問題に遭遇したことでした。これは部分的に発見可能性の問題でしたが、設定の過負荷の結果でもありました。そこで、いくつかのオプション（製品データの可視性の切り替えなど– Gutenbergコアを介してすぐに処理できるようになるもの）を削除し、他のオプション（製品スコープセレクターなど）をメインブロック設定セクションに移動して、ブロックの直後に表示できるようにしました挿入されます。

前後-設定が少なく、製品範囲を変更するためのより明確な方法 — 前後–設定が少なく、製品範囲を変更するためのより明確な方法

モデレートテスト、ラウンド2

機能プラグインの準備が整い、デザインを更新したら、2回目のユーザビリティテストを手配しました。今回は、テスト参加者がプロトタイプではなく実際のグーテンベルクインターフェースと対話できるように、ライブテスト環境を準備しました。人々が実際の製品を使用するのを見るのは目を見張るものがあり、非常に貴重でした。

重要な教訓の2つは、特に製品ブロックに関するものではなく、グーテンベルク自体に関するものでした。すべてのテスト参加者（ほとんどがこれまでグーテンベルクを使用したことがない）は、ブロックを追加するときに行き詰まり、詳細設定を見つけるのに苦労しました。テストの結果をグーテンベルクチームと共有しました。2番目の問題の修正はすでに展開されており、現在、最初の問題に対処するための設計オプションを検討しています。

製品ブロック自体については、選択時にユーザーからの追加入力を必要としない製品を表示するときに余分なステップを削除するなど、いくつかの微調整を行いました。注目の製品を表示することを選択した場合、追加の製品は必要ありません。カテゴリを選択するときのようにそれを確認するためのアクション。また、展示されている製品の範囲を変更するための一貫したフローがないことに気付き、テスト参加者はすべてこれらの設定についてさまざまな場所を調べたため、初期ブロック設定に戻る経路を追加しました。

フラットスコープには、製品の販売やベストセラーが含まれます。差異はありません。 スコープが異なる場合は、選択プロセス中にユーザーからさらに入力する必要があります。

結果？この機能プラグインは、今日ダウンロードできます。

注目の製品などのプリセットスコープを選択すると、確認せずに直接プレビューに移動できるようになりました

製品ブロックを取得

WooCommerceのプロトタイプを私たちと一緒にテストすることに興味がありますか？

最新のWooCommerceの開発に興味がある場合は、WooCommerceの未来を形作ることができるように、デザインフィードバックグループにサインアップしてください。私たちは定期的にメンバーに連絡を取り、新しいプロジェクトの調査やプロトタイプとMVPのテストを支援しています。