製品の顔を表示

この記事では、cplaza.ruのメインページの再設計の例で、Webサイト開発の原則の1つである「製品の顔を見せて」について説明します。



一般的に言えば、この原則は次のように定式化できます。「訪問者がどこに着いて、ここで何が面白いかをすぐに明らかにする必要があります。」 オンラインストアの場合、原則は次のようになります。「製品を表示し、なぜ購入する必要があるのか​​」。 しかし、この原則の単純さにもかかわらず、それはしばしば不当に違反されます。



カットの下には、ウェブサイトのデザインに関する有害なヒント、cplaza.ruメインページの既存のデザインの分析、このページにとってより役立つブロックのストーリーがあります。最後に、改訂されたメインの例を示します。

エントリー

Cplazaは、Appleアプライアンスを販売するオンラインストアです。 彼はしばしばHabréで宣伝されたので、多くの人が彼を知っていると思います。



すべての広告バナーの主なメッセージは、「Appleの機器は信じられないほど低価格です」のようなものです。 しかし、バナーを介してサイトのメインページにアクセスすることで、訪問者は何でも見ましたが、広告で言及されたものは見ませんでした。



同時に、サイトをざっと調べてみると、彼らはまだ主張された機器を持っていること、そしてそれが多くの場所よりも安いことを知ることができます。 つまり、サイトの所有者は、訪問者が広告で話していた情報と、当然のこととして期待している情報を単に隠すだけです。 そして、これは訪問の落雷につながる可能性があります。



メインページを再描画し、「製品の顔」の原則に従って、このオンラインストアのメリットを示してみましょう。



しかし、メスを入手して整形手術を開始する前に、患者の希望を判断する必要があります。 サイト所有者の主な仕事は、できる限り多くの主要製品、つまりAppleの機器とアクセサリーを販売することであるという仮定から進めます。 おそらく他の目標があるか、私の仮定さえ間違っています。 しかし、これをすべて明らかにするには、所有者と直接通信する必要があります。

既存のメインの何が問題なのか

一言で言えば、これがAppleテクノロジーに関するサイトであり、コストが安いことを明確にするものではありません。 サイトにアクセスすると、雑多な商品のフリーマーケットに来たような印象を受けます。 つまり、訪問者には商品がすぐに直接表示されることはなく（低価格のAppleアプライアンス）、ニュース、あらゆる種類のガジェットのカタログ、プロモーションなどを見ることができます。



このセクションでは、現在のサイトのメインページを構成するさまざまなブロックを批判します。 誰もが批判できるので、興味がなければ、次のセクションに進んでください。



悪いアドバイスの助けを借りて、サイトのスクリーンショットのキャプションにコメントの一部を表示しました。 彼らはやや辛cerであることが判明しましたが、エラーの単純な分析ほどドライではありませんでした。 :)

帽子

帽子では、むしろ、ささいなことですべてのニットピッキング。



電話は何らかの理由で、標準ではない方法で壊れており、その端に3つの同じ数字が表示されています。 このような移動（そして実際に美しい携帯電話）は、タクシー、ピッツェリア、サポートサービス、および電話がしばしば必要とされるその他の機関に関連する可能性がありますが、常にノートに記録されるわけではありません。







この店の場合、私は突然、理由もなく突然人が決定する状況を想像することはできません。 早急にiMacを購入する必要があります！」-そして、サイトに行くことなく、すぐにストアに電話することにしました。



同時に、電話を標準外の数字のグループに分類すると、画面からダイヤルするのに便利なニーモニックな短期記憶が悪化します（私はすでに些細なことを選んでいます）。 さらに、あらゆる種類のダイヤラー（Skypeプラグイン、コミュニケーターブラウザー）が自動的にそれを認識できないため、彼らは電話を非常に無駄にしました。



何らかの理由で、営業時間はロゴの下に小さな活字で転送されていますが、電話の下に場所がありますが、店舗に電話してそれがまだ機能するかどうかを判断するときにのみ必要です。







バスケットはとても小さく作られていて、イチジクが見つかります。 その横にある種の「遅延」ブロックが配置されましたが、これはこのコンテキストでは機能しません。







バスケットに入っている製品は、入って初めて見つけることができます。これは、店でよく見られる「人による製品」の原則に違反する種類の1つです。



検索は、ほとんど目立たないフレームでも行われます。 ユーザーは、ユーザーを見つけるために注意する必要があります。



何らかの理由でメインメニューは灰色の背景に灰色で表示され、メインのメニューにはほとんど関係のないアイテムで構成されています。

製品カタログ→

カテゴリのリストは、長くて形のないフットクロスで作成されます。これは、デューデリジェンス、状況の適切な組み合わせ、またはCtrl /⌘+ Fによってのみ見つけることができます。



リストに写真はありません。 それが何であるかを理解するには-読む必要があります。 とりわけ、seoshnikovのために、リスト内の「購入」という単語から形成されたバッテリーは、目的の製品名に目がつかないようにします。

登録ブロック

登録は、いくつかのスクロール画面のページの下部に隠されています。 それが全く必要でないという事実は別々の問題です。

ご紹介

株式は便利なツールです。 しかし、そのようなリーフレットは良くありません。 誰もすべてのフレームを順番に表示するために30秒待機することはなく、さらに高速に表示するためにいくつかのアクションを実行することもありません。 したがって、これは貴重なスペースの無駄です。

ニュース

これは在庫のある別のブロックですが、今回は白で小さなサイズの灰色です。 誰がそれらを読むかは明らかではありません。

新しいアイテム

このストアで最近販売されたアイテムのランダムな選択。 さらに、商品が本当に新しいという事実ではありません。 それは最近その範囲に登場したばかりかもしれません（たとえば、iPhone 4はほとんど目新しいものとは言えません）。







私は商品のリストに対して何もしていません-衝動売りなど。 しかし、店の品揃えの最近の外観の原則に従ってそれらを示すことは私には奇妙に思えます。 訪問者が主なものを定期的に監視している場合、私たちはすでに彼について多くのことを知っているので、彼の興味を考慮してこの場所で何かを提供することができます。

在庫

新製品のフットクロスを克服した人は賞品を受け取ります-共有の別のブロック（「現在」と「ニュース」に加えて）。 もちろん、非常に腐食性の高い訪問者のみがそれらに到達します。 しかし、もっと便利なものを見せてみませんか？

カスタマーレビュー

共有ブロックの近くにレビューのブロックがあります。 注文からの対応はその中で放送されます。 なぜ-私は理解していません。 レビューが肯定的である場合-否定的である場合、それは詐欺のようです-そしてそれはただ買い手を怖がらせます。

ベストセラー

ランダムに選択された製品からの別のフットクロス。 最も勤勉な人だけが彼女にたどり着き、彼女がどのような有用な情報を与えるかは明確ではありません。















あなたは欠点をリストアップし続けることができますが、批判することは簡単なことです。 それでは、すべてを改善する方法に移りましょう。



オンラインストアの生活でメインページが果たすべき役割について考えてみましょう。 実際、それは最も重要なものとはほど遠いものです。 プロモーション、コンテキスト広告、および検索エンジンからのリンクのすべてのバナーは特定の製品およびカテゴリのページにつながるため、訪問者は一般的なバナーからのみ、友人からのリンク、またはメモリからのドメインの入力によってメインページにアクセスします。

メインに入るための可能な方法

ユーザーがメインページにアクセスする方法をいくつか検討してください。 彼はそこで何を見つけることができ、何を見せればいいのでしょうか。



主なシナリオは次のとおりです。

1. 初めてサイトにアクセスしたとき（広告、友人からのリンク）;
2. 定期的に見に来ます。
3. 返品バイヤー。
4. 友人への贈り物を検索します。
5. 特定のものを検索するとき、検索エンジンから行きます。

各シナリオをより詳細に検討してください。

初めてサイトに行ったとき

初めて訪問者が好奇心から主要なものにたどり着くことができるのは、バナーをクリックするか、一般的な性質のコンテキスト広告（たとえば、「Apple」という単語）をクリックするか、友人からリンクを受け取ることです。 または、彼は特定の何かを購入したいかもしれません、そしてそれはバナーが彼に興味を持った理由です。



このシナリオの特徴は、ユーザーについてまだ何も知らないという事実です。ただし、ユーザーはおそらくAppleの手法に興味があり、購入した場合にお金を節約することを嫌っていません。



したがって、訪問者に製品を見せるために最初に必要なのは彼らの顔です-会社が販売するApple機器の全範囲は、同時にその価格が競合他社のものよりも低いことを証明します。



すべての利用可能なポジションからの製品の通常の長いリストは、ここでは最良のオプションではありません-訪問者が無数の同様のオプションの中から興味のあるものを検索する限り、退屈して去ることがあります。 バナーを入力した後、別のバナーに無意味な広告を表示したり、ランダムな商品のリストを表示したりするのはさらに悪いことです。



そのため、この場合、最も有利な美しいオファーと組み合わせた価格付きの圧縮カタログが最適です。



このリストにすばやく目を向け、興味のある製品を見つけ、魅惑的な価格を確認し、製品カテゴリにアクセスしてより詳細な調査を行うことができます。



このリストには、アクセサリ、カバー、バッグ、ギフトも含まれています。 なぜなら、訪問者が今何か深刻なものを購入するつもりがない場合でも、些細なことで衝動買いをすることができるからです。 しかし、衝動買いの主な闘争は、もちろん、主なものではなく、精算時に起こります。

アイドルの好奇心

好奇心から、訪問者は時々、ブックマークと訪問履歴、またはメモリからアドレスバーにドメインを入力するだけでサイトにアクセスして、機器とその価格を見ることができます。これは一種の仮想ショッピングです。



前のシナリオとは異なり、このシナリオの利点は、ターゲットに正確に到達するためにユーザーに関する多くの興味深いことを既に知っていることです。 たとえば、彼はすでにiMacで5回ページを訪れており、主に27インチの画面で設定を見ていることがわかります。



したがって、大きな美しいオファーのあるブロックでは、これらの製品を最初に紹介します。 推奨のあるブロックでは、訪問者の興味を引く可能性のある関連製品をいくつか表示できます。



さらに、iMacが通常よりも低価格で販売されている場合は、特別オファーブロックに表示することができます。これにより、購入が促される可能性があります（特別オファーではないかもしれませんが、スターが集まっただけです）。



また、最後の訪問以降に別の場所でiMacを購入できた場合に備えて、iMacに関するあらゆる種類の推奨事項のブロックに彼を表示することもできます。

返品バイヤー

店で何かを買ったら、訪問者は戻ることができます。 このケースは前のケースと似ていますが、ビジターが何らかの装備を持ち、ビジターがすでに私たちに忠実であることが確実にわかっていることを除きます（ストアがうまく機能している場合）。 この情報は決して見落とされるべきではなく、すぐに訪問者を牛に招待して屋台も購入する必要があります。



たとえば、彼がiPhoneを購入した場合、カバーやその他のガジェットを提供する必要があります。 このためにも、一連の推奨事項が必要です。

ギフト検索

訪問者がeplofilの友人への贈り物を探している場合、このクエストで彼を助ける必要があります。 そのため、カタログ作成者にギフト付きのブロックを提供する必要があります。



さらに、訪問者のグループが異なるため、「ささいなことで」ギフト（カバーなど）と「高価」を分離する必要があります。また、人は友人とチップを贈るためにギフトを探すことができます。

検索エンジンで特定の何かを検索する

ユーザーが検索バーに「MacBook Pro 15」と入力しても、メインバーに移動することはほとんどありません。 その場合、特定の製品またはカテゴリのページにすぐに送信する方がはるかに正しいでしょう。 したがって、この記事ではこのケースを考慮しません。

ブロック

その結果、記述されたシナリオで可能な限り多くのユーザーの関心を喚起するために、次のブロックが必要になります。

1. 訪問者がどこに行ったのかを理解し、興味のある製品を見つけることができるシンプルでわかりやすいカタログ作成ツール。
2. 最高のオファー;
3. 訪問の履歴から何かが既にわかっているユーザーに対する推奨事項のブロック。
4. 一般的な誘惑および宣伝商品を促進する方法としての「シェア」および「特別オファー」のブロック。
5. バスケット（それなし）;

各ブロックでは、勝利の光で商品の顔を見せようとします。

アップルテクノロジーカタログ

Apple製品ラインはそれ自体で十分に構造化されているため、店舗の品揃えで入手可能なコピーを考慮に入れて、それを少しだけコーミングするだけです。







特定の何かを探している訪問者は、カタログ作成者から目的のセクションにすぐに行くことができます（たとえば、15インチのディスプレイを備えたすべてのMacBooks Proを参照してください）。 そして、好奇心だけで入ってきた人たちは、この店が明らかにAppleの機器についてのものであり、その価格に精通していることを知ることができます。

お得な情報

このブロックは、訪問者が入るとすぐに見ることができます。 その中で、大きな美しい写真は最も有利なオファーを示しています。 前のブロックと同様に、商品の顔を表示する機能を実行します。 しかし、彼とは異なり、彼はカテゴリではなく特定の製品に焦点を当てています。







アダプティブブロック：ブラウザウィンドウが広くなるほど、表示できる製品が増えます。 さらに、ユーザーに関する情報が蓄積されている場合は、このブロック内で商品を分類するために使用できます。 たとえば、すでに2回iPhoneを視聴しているユーザーは、最初にiPhoneを表示できます。

推奨事項

このセクションでは、訪問者の訪問履歴を考慮して、訪問者が最も関心を持つ可能性のある製品を示します。 iPhoneケース、保護フィルム、静電容量ディスプレイ用手袋など







訪問者について何も知られていない場合-最も人気のある製品だけが表示されるか、ユーザーが何らかのカテゴリーの商品に興味があるとランダムに仮定されます（推測する機会は大きくありませんが、分析のためのデータがないため、このオプションは機能します）。

プロモーションと特別オファー

プロモーションのブロックでは、プロモートされた製品または興味深い新しいアイテムのみを表示できます。







ブロックは適応型です。 1〜6個の広告に対応できます。 アナウンスが多いほど、それぞれに割り当てられるスペースが少なくなり、より短い情報が含まれるようになります。



ブロックの高さは大きくても小さくてもかまいません。 このブロックのサイズに応じたクリック統計の違いを見るのは非常に興味深いでしょう。







特別オファーブロックは、1つの非常に魅力的な製品の詳細な説明を目的としています。 可能であれば、ユニットは訪問者の希望に適応し、彼が探している製品を正確に表示します。

ショッピングカート

バスケットは必要ありませんが、隠されています。 ただし、商品が表示されるとすぐに、画面上部の目立つ場所に表示されます。







単一の行に収まらないほど多くの商品がある場合は、複数の商品が伸びます。



バスケットが表示されないようにページをスクロールした場合、新しい製品が追加されると、画面の上部の境界線のためにポップアップし、製品がページに追加されてから、バスケットがページの上部の場所に戻ります。



画面の上端に固定することは可能ですが（位置：固定）、そのような解決策はわかりません-あまりに邪魔になることがあります。

地下室

地下では、メインの連絡先を表示した後に発生する可能性のあるすべての連絡先情報と質問への回答が簡単に収集されます。







また、「ブログ」セクションがあり、「MacBook Proをきれいにする方法」などの便利な記事を書くことができます。

まとめ

メインページcplaza.ruの再設計の結果、次のレイアウトが得られました。





結果のページは「信じられないほど安い価格でのAppleテクニック」というスローガンを満たし、入力すると、ユーザーはどこに行ったのかをすぐに理解し、興味のある製品を簡単に見つけることができます。



この記事では、「製品の顔を見せて」というWebサイトの設計の原則を検討しました。 この原則の主な意味は、訪問者がどこに着いたのか、ここで何を見つけることができるのか、どの利点を見つけるのかをすぐに明確にしなければならないということです。



この原則は、店舗だけでなく、他のサイトにも適用されます。 そして、特定の場合にこの原則を拒否するほうがよい理由が正確にわからない場合（そして、これがそうかもしれない）、デフォルトでそれを使用する方が良いです。



この記事を読んで興味を持っていたことを願っています。 投稿を更新することでコメントや質問に答えようとします。これにより、同じ質問が重複したり、それらの間で貴重なアイデアが失われたりする可能性が低くなります。



UPD：コメントへの応答

HTCからスマートフォンをすばやく見つける方法

記事の冒頭で書いたように、このストアは特にApple機器を販売することを目的としているという前提から進めました。 私の仮定は彼らの広告に基づいており、他のメーカーのモデルの範囲は非常に弱いということです。 したがって、 HTCスマートフォンを販売するようにメインページを設定しませんでした。 これらのスマートフォンに興味があるなら、あなたもそれに乗る可能性は低いからです。

これは演習ですか、完成したプロジェクトですか？

この記事は、「製品の顔」の原理について説明するために書きました。 私はcplaza.ruを定期的に訪れたので、例として取り上げました。



当然、戦闘設計について話していた場合、仮定はあまりにも高価で贅沢であり、統計、現地観測の結果、および顧客の経験から得られた他の実際のデータが代わりに機能するでしょう。



顧客がそのようなデータをHabréで共有することを顧客が許可するというのは本当ではありません。 :)



そして、私たちは統計について話しているので、あなたもそれを注意して、数字を盲目的に信じないようにする必要があることに注意すべきです。 たとえば、売上分析の結果によると、一部の製品（またはカテゴリ）が変動していることが判明する場合があります。 これは、販売方法のエラーのために正確に発散が不十分である可能性があるため、すぐに遠くの隅に移動する理由ではありません。 そして、あなたは悪循環に陥ります。



バスケットについて

デバイスバスケットに関する多くのコメント、私はこのアップデートでそれらのほとんどに答えようとします。 製品がある場合にのみ表示されることを思い出させてください。

なぜ彼女はそんなに注目されているのか、なぜそんなに明るいのか？

なぜなら、購入を完了するとすぐに、バスケットをすぐに見つけることができるはずだからです。 一番上にあるのは、購入時に商品が飛び込んだためです（バスケットがスクリーンの後ろにある場合、目に見えるエリアに泳ぎ、商品を受け取って戻ってきました）。 ページを上にスクロールすると、すぐにその場所がわかります。

バスケットに製品を表示する理由

遠くから始めましょう。 実際のスーパーマーケットでよく知られているバスケットが表示されたのはなぜですか？ 訪問者の便宜のためではありませんが、商品を置く場所がない場合は、手に入れることができるものだけを購入するため、販売に悪影響を及ぼします。



同様に、オンラインストアでは、手の数ではなく短期間の記憶のみが制限になりました。 すでに購入したものとそうでないものを覚えておく必要はありません。どこにも行かなくても、いつでも見ることができます。 必要に応じて、商品をバスケットから直接取り出します。 これにより、そこに何かを追加するという恐怖を克服できます。

バスケットと合計金額に価格が表示されない理由

早めに買い手を困らせないために。 通常のスーパーマーケットでトロリーが購入金額を自動的に計算した場合、売上は急落します。

バスケットは画面全体を占有します

店で10種類の製品を購入する場合でも、バスケットは2行を超えて成長することはありません。 もっと購入したい場合は、パーソナルマネージャーが電話してリムジンを送るように申し出るべきだと思います。 :)



さらに、バスケットは製品が入っている場合にのみ表示され、ページの上部にすっきりと表示されるため、何かを追加するだけで煩わしくなります。 また、10行であっても、画面上ではなく1〜2行で表示される場合があります。

得点が高すぎます

このような感覚を避けるために、価格と購入の合計金額はバスケットに表示されません。