真面目な店の真面目なデザイン。 パート2.オンラインストアのモジュール

前回はかなり人気のある記事を書きました。「 真面目な店の真面目なデザイン。 パート1.研究 」、この記事はその論理的な続きです。 この記事と以下では、世界のトップオンラインストアのほぼ60の機能モジュールについて説明し、多くのページのインターフェイスを詳細に分析します。







オンラインストアを外部と内部の2つの部分にすぐに分割することを提案します。 誰もが外部部分を見ます。これは購入が行われる場所ですが、オンラインストアの所有者を除き、これらの購入が処理される内部部分について考える人はほとんどいません。 開発者でさえ、何がそこにあるべきかをめったに知りません。 しかし、深刻な内部会計システムがなければ、単一の大きなオンラインストアは存在できません。

外側部分

適切な設計のためには、人は目標から始める必要があります。 そのため、オンラインストアの外部部分の主な目標は、コンバージョンを最大化することです。 「販売」ではなく「コンバージョン」という言葉を書いたのはなぜですか？ 私は偶然これをしませんでした。 この場合の販売は、いくつかの重要な要素で構成されています。1.主に外部マーケティング（オンラインストアのマーケティングについては、別のシリーズの記事を準備します）; 2.サイトの外部部分（この記事の本質、コンバージョンに大きく影響するのはこの部分です）。 3.サイトの内部部分（一部はこの記事の本質、一部はビジネスプロセスの正しい構成）。 したがって、外部部分はコンバージョンに大きく影響しますが、売上はクライアントの質の高いサイトに依存するだけではありません。 オンラインストアを利用する予定がある場合は、上記の3つの点についてよく考えることをお勧めします。



一般に、すべての主要なオンラインストアの外部部分は、少なくともサイトの特定の部分の指定において互いに類似しています。 関連する目的のために、変換およびその他のツールを増やすためのかなり多くの異なる方法があります。 多くの場合、ストアはこれらのメソッドを実装するためのオプションからのみ選択します。 しかし、多くの標準的なものがあるという事実を考慮しても、ユニットに対してこれを体系化することはまだ可能でした。 これらすべての情報を論理ブロックに分割し、体系的に送信するために、以下を試みます。 現時点では、変換に強く影響する50個以上の機能モジュールをカウントしました。 しかし、一般に、この重要な指標を増やす方法は1000以上あり、毎年、新しい研究ごとに、この数字は急速に成長しています。

製品カタログ

オンラインストアの最も重要な機能の1つは、製品カタログです。 これにより、ほとんどのユーザーが購入を決定する前に通過します。 私たちは感情的な購入に個別に取り組みますが、今の目標は、すぐに購入する準備ができておらず、店内を回りたい人のための便利なカタログを作成することです。



各店舗には、製品グループと商品自体の両方というかなりユニークなカタログがあります。 したがって、設計チームはすぐに「これをグループ化する方法！？」という質問を提起します。 通常、サプライヤのカタログまたは顧客からの単一のカタログを単に紹介することは不可能であり、通常はサイトに紹介しません。 ほとんどの場合、それらは非常に混乱し、理解しにくいものですが、どの製品がどこにあるかを直感的にユーザーが理解できるようにする必要があります。



最初に、カタログ内の製品アイテムの数を顧客から確認し、これらの製品のグループ化を取得する必要があります。 多くの場合、中小規模の店舗では、カタログは1万アイテムを超えませんが、顧客が1万アイテムを超える場合、これは大規模ストアであり、これは将来の技術プラットフォームの選択に影響します。







数量を把握したら、商品の保管方法と保管場所を理解する必要がありますか？ これが1Cまたは別の会計システムである場合、この会計システムとオンラインストアとの統合を定め、商品の荷降ろしを自動化する必要があります。 商品がエクセルファイルに保存されている場合、すべての商品を調べて単一の形式（見出し、各商品のデータ）にしてから、価格表を自動的に処理し、そこからデータを解析する機能を追加する必要があります。 したがって、顧客は価格表が更新されるたびにストアにアップロードし、その後すべての情報が即座に更新されます。 特に深刻なケースでは、会計システムや価格表がなく、情報の手動処理のみが残りますが、これは最大100個のアイテムがあり、情報が頻繁に変更されない場合に許容されます。他の場合は、適切な会計システムに情報を保存することに集中することをお勧めします。 商品を保管するための3つのオプションのうち、今後の作業に最も効果的なのは会計システムです。可能な場合は、顧客をそこに連れて行く必要があります。



顧客から情報を受け取ったら、すべての製品をユーザーが慣れている論理グループに分割する必要があります。 ユーザーにどの製品がどこにあるかを考えさせないことが非常に重要です！ 基礎として、理想的には、いくつかの人気のある価格アグリゲーターまたは大規模なオンラインストアから商品のグループを取り、彼らはすでに「自転車に乗り出しました」。 製品グループの単純な名前について考えることを別にお勧めします。設計は主にコピーライティングです。 3つ以上のディレクトリレベルは実行する価値がありません。







一年中現れたり消えたりする動的な製品グループを忘れないでください。 たとえば、休日用に作成できる特別なグループ：3月8日、2月23日、または新年までの商品。 理想的には、それらはカタログにも表示され、休日の特定の商品の売上を増やすために特別な方法で強調表示される必要があるため、インターフェースでこの場所を提供する必要があります。



さらに、これらの製品グループはサイトインターフェイスに埋め込む必要があります。 多くのカテゴリ、特に7つ以下のカテゴリがない場合は、ROZETKAオンラインストアのように水平メニューを作成できます。 さらにポイントがある場合は、Amazon.comのように、左側に垂直メニューを作成することをお勧めします。 いずれにせよ、メニューはドロップダウン、理想的には2レベル、まれに3レベルになります。 ちなみに、近年、ROZETKAは新しい製品グループを追加しており、カタログの水平メニューには8つのアイテムがあり、ユーザーの注意に悪影響を及ぼします。ユーザーは右側の最後の製品カテゴリにあまり注意を払わず、これは変換に悪影響を及ぼします。



カタログ内の各製品の外観を統一する必要があります。 しかし同時に、各製品には独自のパラメーターセットがあります。 次の質問がすぐに発生します。「カタログ内の製品の簡単なプレビューで何を表示するか？」 いくつかのオプションがあり、写真、名前、価格、購入ボタンを表示するのが最も簡単です（製品が在庫にない場合は、「可用性の報告」ボタンに置​​き換えられます）。 しかし、今日ではこれで十分ではないかもしれません。商品がたくさんあり、カタログを見ると、ユーザーは特定の製品が自分にとって興味のあるものとそうでないものの表面的な結論を出さなければなりません。 したがって、多くの場合、製品カタログには、評価、レビューの数、製品の主なパラメーターが追加表示されます。これにより、インターフェイスが過負荷にならないように、製品を比較し、欲求に追加することを提案し、プロモーション製品または新製品の特別な選択もあります。 製品のプレビューにカーソルを合わせると、詳細情報を表示できます。 インターフェースを情報で過負荷にしないことは非常に重要です、それは興味を引くのに十分であるべきですが、購入に必要なすべてを示す必要はありません、興味のある人は製品カードに行くか、極端な場合には比較のために製品を送ります。



カタログに20〜25を超える製品がある場合、リストの下部でページ切り替え（ページネーション）を行い、1ページ（10、20、50、100）で商品の数量を制御する機能をインターフェースに配置する必要があります。 1ページに100個を超える製品を表示しない方が良いでしょう。ロードに時間がかかり、ユーザーのブラウザが「フリーズ」する可能性があります。



さらに、カタログには補助ナビゲーションツールが必要です：ファセットナビゲーション、関連製品グループ、販促資料、ブランドナビゲーション、ヒント、レビュー、記事の形式のヘルプ、人気のある製品、タイル付きのカタログを表示する機能、または拡張情報などの重要なリスト要素。 ユーザーはカタログに質問をしてはいけません;すぐに購入するか、製品ページを深く掘り下げる必要があります。



店舗の所有者にとって、最高の利益率の製品を販売する販売および電子商品販売ツールを刺激するツールを作成する必要があります。 私たちは、買い手の注意を管理することができます。

ナビゲーション

オンラインストアナビゲーションの基本は、もちろん、メニュー、カタログ、および検索です。 まず、メインメニューを決定する必要があります。店ではほとんどの場合、商品のカタログがメインメニューとして機能します。 すべての製品を5〜7のメイングループにグループ化できる場合は、メニューを水平にすることをお勧めしますが、グループが7つ以上ある場合は、サイトの左側でメニューを垂直にすることをお勧めします。 ほとんどすべての店舗には主要なグループとサブグループがあるため、メニューはドロップダウンになります。 3レベル以上のドロップダウンメニューは実行しないでください。2レベルに制限するのが理想的です。



メインメニューに加えて、ショップにはほとんどの場合補助メニューがあります。 2つの目的に使用できます。店舗に関する情報（会社、配送と支払い、記事など）に関する情報を含む補助メニュー-通常、検索の上部、サイトの最上部、またはカタログのサブカテゴリを含むコンテキストメニュー-通常はインターフェイスにあります左へ。



サイトとのやり取りを簡素化するもう1つの重要な要素は、「パン粉」です。 人は常に自分がどこにいるのか、そしてこのページのサイトの前にどんな構造があるのか​​を見る必要があります。 方法（パン粉）は理想的にはこの問題を解決します。 インターフェイスでは、通常、パスはメインメニューの下に配置され、左に配置されます。 セクションにネストがある場合、パスの各ステップの近くに三角形のアイコンを配置し、クリックしてドロップダウンリストを作成できます。 また、「検索に戻る」リンクを追加できます。ユーザーが検索結果（ファセット）でページにアクセスした場合、このリンクをクリックすると、そのユーザーは結果に戻り、以前に選択したすべてのパラメーターが保存されます。



リストに多数の要素（製品、記事など）がある場合、ページネーションを使用することをお勧めします。 各ページには静的なURLが必要です。これはインデックス作成の恩恵を受けます。 さらに、1ページに表示する要素の数をユーザーが選択できるようにすることをお勧めします。 オプションとして、下にスクロールするときに動的なデータの読み込みを行うことができますが、これはユーザーのブラウザに過負荷をかける可能性があり、検索エンジンのインデックス作成には不適切です。



多くのオンラインストアでは、製品カードにタグがあります。 サポートナビゲーションの役割を果たすことができ、SEOの目的にも使用できます。 通常、タグはコンマで区切られた文字列で記述され、5〜7以下にする必要があります。



サイトマップを忘れないでください。 まず、検索エンジンによるインデックス作成に必要なセクション。 ユーザーはもうほとんど使用していません。 インターフェースでは、サイトのフッターにある通常の目立たないリンクになります。 ページ自体は、サイトのすべてのページへのリンクの構造化されたリストです。 1ページに最大300個のリンクがあり、その下にページネーションがあります。 セクションは自動的に生成されます。

ファセットナビゲーション

ユーザーが大きなディレクトリ内を移動できるようにする非常に重要なツール。 現代の世界には、膨大な数のパラメーターを持つ多くの異なる製品があります。 1つの製品グループには、購入者がほとんどの場合よく理解していない1000個の製品が存在する可能性があります。 ただし、各バイヤーには特定の期待があり、自分のパラメーターセットを製品で確認する必要があります。 ファセットナビゲーションを使用すると、購入者は必要なパラメータですべての製品をフィルタリングできます。



まず、ストアで販売されるすべての製品グループは、パラメーターに従って異なるサブグループに分割する必要があります。 製品グループごとに異なります。たとえば、家電製品などの一部のグループでは、10個を超える多くのグループが存在する可能性があります。







最も単純なフィルタリングは、価格別、ブランド別、サイズ別、重量別、色別などです。 これらは、さまざまな製品グループに適用される一般的なパラメーターです。 個々のグループに固有のものもあります。



インターフェースでは、ファセットナビゲーションは通常、画面の左側にあり、右側には商品自体があります。 同種のパラメータはすべて視覚的にグループ化されています。たとえば、画面の対角線をグループ化できます。 各パラメーターには、製品の数量を示す数字が必要です。また、現在製品がまったくないパラメーターには、クリックできないようにする必要があります。



インターフェース自体は、動的なデータの読み込みを行う必要があります。 オプションを選択するときにページをリロードしないでください。製品のみです。 これはユーザーにとって便利ですが、マイナスがあります。SEOは考慮されません。 別の方法で各パラメーターのページをリロードし、一意のURLを動的に生成し、このドキュメントのタイトルを追加すると、このページに検索エンジンでインデックスを付けることができます。たとえば、「Sony TVs、50-55 3D」では、通常、店舗は特に宣伝されていませんが、あまりにも多すぎる可能性があります。 ちなみに、2番目のオプションはRosetteに実装されています。

主な製品

顧客行動の心理的特性に基づいた別のメカニズム。 他の人が買うものは人々にとって重要です。 消費者は人気のある製品に自信を持っています。 この機能を使用するために、「人気製品」の特別なタグとブロック全体が考案されました。 同じ機能については、店舗の常連客のみが新製品を運ぶことができます。



まず、人気商品のブロックをオンラインストアのメインページに配置する必要があります。 競合他社の分析に戻ると、メインページのほとんどすべての最大のプロジェクトには、人気のある製品と新製品があります。 第一に、商品はあまり人気がなく、ほとんどの場合、これらは宣伝された商品、高品質、または安価であり、人気が出た理由はあまり気にしません。新しい訪問者の注意を引き、購入に導くことが重要です。そのような商品の購入は高くなります。 第二に、これらは少なくとも彼らのニッチでの消費財であり、したがって、それらがターゲットオーディエンスに適合する可能性が高い。 第三に、買い手は他の人が承認した製品により自信を持っています。 このブロックでは、5〜7個の商品から15〜21個の商品を配置できます。 人気のある製品の完全なリストへのリンクが必要です。 このブロックは自動的に調整およびパーソナライズできます。購入履歴、サイトでの行動、興味、その他の多くの情報がわかっているため、一般のお客様にとっては特に簡単です。 理想的には、各訪問者は、興味のあるカテゴリの人気商品、お気に入りのブランド、財布の中を見るべきです。



製品カタログでは、一般的に人気のある製品には「Top Selling」というラベルが付けられ、新しい製品には「New」というラベルが付けられます。 これは、3番目のタイプの割り当て「プロモ​​ーション」とともに、主要な割り当ての1つです。 ラベルにはさまざまな形と色があるため、ユーザーは視覚的に簡単に区別できます。 それらは通常、製品プレビューの右上隅の写真の上にあります。 同じ場所にある製品カード。 当然、これはマネージャーがストアの管理部分で適切な設定を入力した後に自動的に行われます。

電子商取引（製品ランキング）

今日、ほとんどのオフラインストアで、彼らは売り上げを最大化するために商品をどのようにレイアウトするかを考えています：子供向けの商品は低く、目の高さでは、センターの人気ブランドです。売り上げを刺激するために別のブランドカウンターを作ることさえできます。 これらのツールはすべてオンラインストアで利用できるようになりました。より正確には、オフラインよりもさらに多くのツールがあります。



まず、すべての製品の統計を収集して保存する必要があります。 ストアにとって重要なのは、マージン、人気、コンバージョンなどです。 このデータは自動的に収集および分析できます。 受信したデータに基づいて、ユーザーに合わせてディレクトリを動的に調整できます。 たとえば、ユーザーがカタログでカテゴリ「モニター」を選択した場合、そのユーザーはストアのマージンが最も高く、同時にコンバージョン率が高い製品を最初に見る必要があります。 したがって、店舗は売上と純利益を最大化できます。



特定のブランドの販売を促進するために、個々の製品カードまたはカテゴリ全体をブランド化できます。 場合によっては、ウェブサイト全体の背景がブランド化されます。



マーチャンダイジングでは、これらのデータがあり、ストアが特定の年齢グループに何を表示するかを知っている場合、ユーザーの性別と年齢に関する情報に基づいて製品グループをさらに調整できます。 ここでも、人々を異なるグループに分割し、それぞれについて特定のルールを考え出すことができます。



統計を収集するには、Google Analyticsと統合する価値があります。

検索する

さらに多くのユーザーが使用する別の主要な販売ツールに行きました。 オンラインショッピングサイトはより複雑になり、製品の数は増加し、人々はますます怠laになっています。 この関数だけで、変換を数倍増やすことができます。



インターフェースでは、検索を大きくし、視覚的に強調表示して、サイトヘッダーの中央に配置する必要があります。 成功したすべてのオンラインストアを調べると、サイト全体の中心的な場所の1つが検索に使用されていることがわかります。 それは非常に単純に見えます：情報入力行と「検索」ボタン、検索カテゴリの選択、フォームの下でのクエリの例のヒント、仮想キーボードはあまりありません。



リクエストを入力するとき、ブランドデータベースの小さなアイコンや製品の小さな写真であっても、製品データベースからのヒントが自動的にロードされるべきであり、ユーザーが情報を吸収するのに役立ちます。 合計のドロップダウンヒントは10以下である必要があります。GoogleまたはYandexからのドロップダウンヒントは適切に実装されています。この実装の品質はストアで悪化することはありません。 多くのユーザーがキーボードレイアウトを変更せずにクエリを入力し始めることを覚えておく必要があります。オンラインストアもそのようなクエリを理解する必要があります。 ヒント自体には、商品以外の情報を含めないでください。ユーザーの注意をそらさないでください。



最上部のヘッダーのすぐ下で、同じクエリを入力したユーザーによってまだ検索された結果とプロンプトを表示する単語を思い出す必要があります。これらの結果の数のすぐ下、さらにユーザーのクエリの写真（アイコン）のあるカテゴリとサブカテゴリを下げますそして、これらのカテゴリーに入る能力。 また、チェックボックスを検索するためのカテゴリを絞り込む機会を与える価値があります。 たとえば、ある人が「ASUS」という単語を検索し、モニターとルーターを意味しますが、このメーカーには興味のない他の種類の製品があるため、この機能は不要ではありません。 カテゴリの下には、さまざまなバージョンで表示できる商品の検索結果自体があります。詳細な説明またはタイルのみです。 製品はカタログと同じように表示する必要があり、検索から直接製品をすばやく購入することができます。



検索結果が多数ある場合は、カタログを左側の列全体に表示できます。 各カテゴリ名とサブカテゴリの近くに、このカテゴリのユーザーの要求に該当する製品の正確な数を括弧内に記述する必要があります。 左側のカタログの下で、見つかった他の種類の情報を表示できます：記事、ニュース、レビュー、コメントなど。 しかし、他の種類の情報は注意を引くべきではありません。別のページに移動して、販売にとって重要ではないこれらの要素を操作する機能との単なるリンクにしましょう。



さらに、検索結果は、価格、人気、受領日、リリース年などでソートできる必要があります。



1つのページに、従来は限られた数の製品を表示し、カタログのように、表示される製品の数をユーザーが制御できるようにしました。 ページの最後にページネーションがあります。 ページを下にスクロールするときにコンテンツを動的にロードできるため、ページが終了することはありません。 ただし、動的ロードを使用するバージョンでは、古いコンピューターでブラウザーがフリーズする危険があります。



最後に、ユーザーに質問することができますが、検索結果に満足していますか？ そうでない場合は、コンサルタントのヘルプ（チャット）を提供するか、質問と回答のセクションを使用します。このセクションには、未経験者の検索の使用方法の説明が含まれている必要があります。

連絡先

優れたデザインはサイトのインターフェースに限定されず、優れたデザイナーは無条件で変化しないものとして顧客からの情報を受け入れません。 したがって、別の重要なトピックに触れたいと思いますが、これはインターフェイスやビジネスロジックとはほとんど関係がありませんが、販売と変換には非常に重要であるため、これを処理する必要があります。 この重要なトピックは連絡先です。



連絡先のオンラインストアの利便性と信頼のために、多くの異なるものが必要です。 販売用の主な連絡先（電話または複数の電話、オンラインチャット）は、各ページ、理想的にはサイトのヘッダーにある必要があります。 情報で過負荷にならないように、ヘッダーには購入者の市のメインの電話番号を表示する必要がありますが、同時にそれをドロップダウンリストの形式でインターフェースに実装する必要があります。クリックすると、人はさまざまなオペレーターの電話を見ることができます。 電話を初めて選択すると、サイトはこのユーザー用に電話を自動的に記憶します。



サイトには、本社の電話番号が必要です。理想的には、これは州都の直接の都市番号です。 必要に応じてホットライン0 800、特定の地域の電話、電子メール、オンラインチャット、フィードバックフォーム、Skype、オフィス、倉庫の住所など、連絡先が異なる都市に分かれている場合は、都市ごとの住所を含むドロップダウンリストを作成できます。 連絡先ページで、理想的には、個々の部門の電話をペイントします：販売、倉庫、管理、人事など。 アドレスは連絡先ページにある必要があり、サイトの地下にあり、信頼できます。 また、オフィスと従業員の美しい写真を表示することもできます。

オンラインチャット

別途、オンラインチャットを検討する必要があります。 多くのオンラインストアは、これらの目的のためにサードパーティのサービスを使用しています。これは安価ですが、あまり最適ではありません。 オンラインチャットを行い、通信履歴を特定のユーザーに、直接CRMまたは分析システムに結び付けることをお勧めします。 これを行うには、ユーザーのチャットに入るときに、ログインを要求するか、少なくとも名前とメールアドレスを入力します。 チャット自体は別のウィンドウで開く必要があります。 シンプルなフォームでは、チャットには通信ウィンドウ、テキスト入力フォーム、送信ボタンがあります。 チャットが終了した後、購入者はストアからコンサルタントを評価するように求められる必要があります。 管理者にとっては、すべてがもう少し複雑になります。少なくともクライアント、注文履歴、アクティビティなどに関する情報を表示する機能は複雑になります。 オンラインストアの内部構造については、記事の他の部分で説明しますが、今は外部ユーザーの部分についてのみ話しているため、次に進みます。



予算上、独自のチャットができない場合は、無料サービスを使用できます。 SiteHeartをお勧めします。

サイトからの呼び出し

過去数年でオンラインストアサイトに登場し始めた比較的新しい機能。 インターフェースでは、通常、ボタンと「オンラインチャット」ボタンで表されます。クリックすると、オンラインストアとの音声通信が開きます。 サイトのヘッダーにボタンを配置することをお勧めします。 この機能を使用するには、ブラウザとマイクのみが必要です。



ソフトウェアの観点から見ると、この関数をゼロから作成するのは非常に長くて費用がかかるため、ここではサードパーティのサービスを使用することをお勧めします。 それらの多くは、ロシア語と英語の両方があります。 ロシア語を話すサービスZingayaをお勧めします。 サイトからのすべての呼び出しは、メインの電話にリダイレクトされるだけで、その後はすべてが通常どおりに行われます：マネージャーへの呼び出しの転送、通話の追跡など。



これらすべてのブロックの研究の最後に、オンラインストアのメインページがあります。







この部分はこれで終わりです。次に、製品カード、製品のデモ、価格と在庫の監視、ワンクリック購入、クレジット購入、レビュー、製品評価、変更、要望、その他多くの便利なモジュールについて説明します。 私たちと一緒にいてください！



当社からの興味深い：



eコマースコース。 まもなく、 Digitovビジネススクールは 、記事の著者から実践的なコースを開始します： 深刻なサイトの設計 、オンラインストアのマーケティング、オンラインストアの 作成に関するすべて 。 急いでコースにサインアップして割引をゲットしてください！



電子商取引の本。 オンラインストアの作成とプロモーションに関する書籍の執筆を終了しました。 ご希望の方はリクエストを残して、本の最初のコピーを入手できます。 これを行うには、件名「E-Commerce Book」を記載した電子メールをinfo@secl.com.uaに送信し、本の発行直後に詳細情報を送信します。



新しい記事。 他の記事よりも早く新しい記事を受け取る場合、または単に新しい出版物を見逃さないようにする場合は、SECL Groupのファンページ（ Facebook 、 VK 、 Twitter ）を購読してください。



もとの記事： http : //secl.com.ua/article_serjoznoye_proyektirovaniye_serjoznogo_magazina_moduli_internet_magazina.html



投稿者

ニキータ・セメノフ

社長

SECL GROUP / インターネットセールステクノロジー