アダプティブスケーリング：大画面用のオンラインストアの設計

クリスチャンホルストの記事「 レスポンシブアップスケーリング：大画面Eコマースデザイン 」の翻訳に注目してください。

レスポンシブデザインの革命は間近に迫っています（まだ行われていない場合！）。また、オンラインストアはレスポンシブデザインを他の業界ほど積極的に取り入れていませんが、まだ人気があります。

長い間、レスポンシブデザインに関するほとんどの考えは、モバイルインターフェースとデスクトップインターフェース間の移行の設計を超えていませんでした。 現代のワイドスクリーンにマッチするインターフェースを作成するために、これらの境界を標準デスクトップスクリーンを超えて拡大する可能性に少し注意を払う時です。 これを見てください：

1. 今年初めにテストした米国の大手50のオンラインストアのうち、大画面にデザインを適合させたのは18％のみでした（これらのサイトの94％はモバイルデバイスに設計を適合させました）。
2. 電子販売のほぼ4分の3は、モバイルデバイスではなくPCで行われています（ こちら 、 こちら 、 こちらをご覧ください ）。
3. これらのユーザーの約3分の1は 、1350ピクセルよりも広い画面から来ています（ こちら 、 こちら 、 こちらをご覧ください ）。 （注：もちろん、画面の幅とブラウザウィンドウの幅には違いがあります-指定された幅のブラウザを使用する実際のユーザー数は少なくなります。このセグメントがサイトにとってどれだけ重要かをより正確に把握するために、Web統計でブラウザウィンドウのサイズを監視することをお勧めします。

これらの統計に基づいて、大画面のユーザー向けの特別なインターフェースを設計することは努力する価値があると言えます 。 実際、大画面向けのデザインは、オンラインストアのレスポンシブデザインの次のトレンドになる可能性があります。



この記事では、オンラインストアのデザイナーが適応スケーリングを使用して、大画面のユーザー専用のインターフェイスを設計する方法を探ります。 1つの基本原則を学習し、オンラインストアインターフェースのさまざまな要素をどのように適合させるかについての11のアイデアを学びます。 これらのアイデアを使用して、研究の過程で観察した相互作用の問題のいくつかを解決できます。 この記事は、 元々 Baymard Instituteによって発行されました。





多くの商用サイトでは、大画面で空白を使用していません。 結果：多くの場合、空白はかなり切り捨てられた検索結果に囲まれます。 （ 画像を拡大する ）



かなり切り捨てられたIKEA検索結果を囲む空白に注意してください。 オンラインストアの製品リストの調査の過程で、家の装飾などの美的特性によって選択された製品のニッチでは、ユーザーが製品を正しく評価するために大きなプレビューが必要であることが明らかになりました。 これを使用して空き領域を削除することは、オンラインストアの多くの「適応型スケーリング」アイデアの1つであり、注意を払う必要があります。



主に大画面のために表示された空のスペースは、通常は未使用のままであり、元のページのコンテンツがラップトップ画面向けの狭いデザインにトリミングされると、広い白い海として表示されます。 少なくとも、コンテンツにはもう少し空気が入っている必要があります。モニターの要素間には大きな対角線で少し隙間が必要です。



さらに、「アダプティブスケーリング」では、さらに大きく進むことができ、大画面でのユーザーインターフェイスが改善されます。 空きスペースを使用して、画像の拡大、製品列の追加、ページコンテキストの表示の改善、コンテキスト操作（フィルター、並べ替え、「カートに追加」など）へのアクセスを簡素化できます。

アダプティブスケーリングの基本原則：同じコンテンツ、異なるプレゼンテーション

空のスペースを取り除くには、 主に2つの方法があります ：ページに追加のコンテンツ（つまり、高解像度でのみ表示されるコンテンツ）を配置し、現在のコンテンツを別の形式で表示（要素を移動、フォーマットを変更、拡大など） .d。）。



この記事のすべての例は、現在のコンテンツを異なる方法で （場合によっては根本的に） 表示する方法を示しています。 その理由は、広い解像度でのみ表示される完全に新しいコンテンツを追加することは、ほとんどの場合、良いアイデアではないからです。 もちろん例外もありますが、一般に、コンテンツが「標準」デスクトップ形式で表示するほど重要ではない場合、大画面で表示するほど重要ではない可能性が高いです。





すべてのデバイスで同じコンテンツを表示しますが、異なる方法でパックします。 （ 画像を拡大する ）



大画面が存在するからといって、ユーザーが突然見づらいトリミングされたページを取得したいというわけではありません 。 同様に、画面が小さくても、ユーザーが以前にサイトで見た情報を必要としないわけではありません。 したがって、同じコンテンツを表示しますが、異なる方法で「パック」して、大画面での表示に適しているようにします。



重要なコンテンツをページに追加する必要があるのは、ページ上にコンテンツの余地があるからだけではありません。 同様に、画面スペースが限られているという理由だけで、重要なコンテンツをトリミングするべきではありません（テスト結果「 モバイルサイトとデスクトップサイトの違いは？ 」を参照してください ）。 新しいコンテンツを大画面に追加できるのは、このコンテンツが大画面でのみ意味をなす場合だけですが、通常のコンテンツでは必要ありません。



普遍的なルール：幅広い解像度での新しいコンテンツの出現は、 驚くべき鐘です。 場合によっては、これは正当化されるかもしれませんが、基本的に、コンテンツは標準画面に表示するにはあまりにも重要ではないため、高度なバージョンから除外する必要があるか、本当に重要であり、サイズに関係なく表示する必要がありますスクリーン。 重要なコンテンツは利用可能なスペースで異なって表現できることは明らかですが、このコンテンツはデザインのすべてのバージョンで何らかの形で存在する必要があります。

オンラインストアの適応スケーリングのアイデア

上記のコンテンツの不変性のルールを念頭に置いて、オンラインストアで機能する適応スケーリングの多くの方法のいくつかを検討します。



以降のすべての例は、Wayfair.comのスクリーンショットに重ねられたスケッチの助けを借りて表示されます。 現時点では、Wayfair.comのデスクトップデザインはまったく適合せず（つまり、ブラウザーウィンドウのサイズが変更されてもページは拡大縮小されず、レイアウトは変更されません）、画面の表示領域のサイズに関係なくページ幅は固定されたままです。 ただし、これは、オンラインストアのさまざまなタイプのページを大画面に適合させる方法を示す良い例です。



実際の条件下では、ページ上の他の要素が再構築され、場合によっては拡大縮小される可能性があります（特にヘッダーやフッターなどの要素）。 しかし、私たちのスケッチ図では、少し動かせば十分です。 これらの例はインスピレーションとして役立ちます 。 あなたのニッチと活動分野に応じて、他の人よりもあなたにとって適切な人もいるかもしれません。

統合承認ウィンドウ

モーダル表示を中止し、代わりにページの表示部分のフォームを修正すると、認証画面の大画面への侵入を軽減できます。 そうすると、フォームはページ全体のブロックを停止するため、それほど目立たなくなります。 ロードの直後（メインレイヤー上）にページの上部に表示されるため、これは目立ったままです。





承認フォームのあるウィンドウは、メインレイヤーの上部の列のコンテンツとして埋め込まれます。 （ 画像を拡大する ）



したがって、フォームを特別にオフにする必要がなくなるため、承認を望まないユーザーにとっては、フォームを無視するのが簡単になります。 同時に、当社のユーザビリティ調査では、ほとんどの回答者は単に読むことなく標準ダイアログボックスを閉じ、しばしば「ポップアップ」としてランク付けしました（記事「 オンラインストアではこれら5種類のグラフィックスを避ける 」 を参照）。 これは少し選択的な失明です。 そのような人々は、モーダルではなくコンテンツ上部のメイン列内に表示される場合、認証フォームを見てみたいと思うかもしれません。 要素を見て、彼らはそれをオフにする方法を見つけることにすべての注意を払う必要はありません。

ヘッダーと地下室からのクイックリンク

見出し（たとえば、[マイアカウント]または承認されたユーザーの注文）および地下室（サービスと質問）からの最も人気のあるリンクは、スペースがある場合、メインページのブロックに表示できます。 もちろん、ヘッダーメニューと地下室のセクションの同じ場所でリンクを利用できるようにしておく必要があります。 大画面では、これらのリンクをメインページに簡単に複製できます。





ヘッダーとフッターからの人気のあるリンクは、メインページのブロックにクイックリンクとして表示されます。 （ 画像を拡大する ）



これは、ページ上でアクセス可能なままですが、 表示方法が異なるコンテンツの良い例です。 これは新しいコンテンツではなく、特に大画面のユーザー向けに、現在のコンテンツが異なって表示されるようになっただけです。 具体的には、この例では、メインコンテンツから注意を引き付けないように、クイックリンクを少しくぐらせる必要があります。

内蔵カルーセルスライダー

メインページのカルーセルには多くのインターフェイスの問題があり、常に細心の注意を払って実装する必要があります（調査中に得られたカルーセルの8つの要件を参照）。 大画面では、もちろん、カルーセルを単純に増やすことができるため、スライドショーの機能全体が向上します。 ただし、スライドが正方形の場合や垂直方向の場合でも、拡大されたカルーセルは、可視領域の境界を超えて残りのコンテンツを下げる可能性があります。メインページでは、可視領域は大きくなりますが表示されません。 解決策は、カルーセルを一連の2つまたは3つのスライドに置き換えて、同時に表示することです。





カルーセルのスライドは、一連の通常のスライドに置き換えられます。 （ 画像を拡大する ）



スライドの合計数が列の数に対応する場合、複数列のスライドの静的レイアウトを使用することで、カルーセルの機能上の問題を回避できます。 列よりもスライドの方が多い場合は、カルーセルを終了するか、新しい行を追加する必要があります。

作り付けの買い物かご

ユーザーが製品をバスケットに追加した後、オンラインストアのほとんどの所有者は、次の2つのいずれかを希望します。ユーザーは、バスケットに追加する他の製品を探すか、バスケットに商品を注文します。 ユーザーが他の製品を探している場合、これは間違いなく販売に適しています。 一方、これは、特に追加の商品を探しているときにサイトを探索するのに多くの時間を費やした場合、 ユーザーが選択を後悔し始めることを意味します 。





ユーザーが製品を追加すると、標準のポッピングバスケットが統合されます。 （ 画像を拡大する ）



標準のポップアップバスケット（ヘッダーで利用可能）をコンテンツに統合することにより、売り手は既にバスケットに入っている商品のユーザーの概要を作成します。 したがって、ユーザーが既に見つけた素晴らしい製品を思い出します（もちろん、出発前に購入する必要があります！）。 これにより、ユーザーは注文にすばやくアクセスできるようになり、販売の成立に役立ちます。



さらに、ホームページとカテゴリナビゲーションの調査中に、以前に追加された製品の名前を確認するためだけにカートを開く人をよく見ました。 たとえば、バスケットを開いて、追加されたばかりのカメラのモデル名を確認して、適切なケースを見つけることができます。 デフォルトのポップアップバスケットを使用すると、現在の製品リストとバスケット内のアイテムを直接比較できるため、関連製品を見つけやすくなります。

商品の追加列

商品タイルの空きスペースを取り除く最も明白な方法の1つは、商品を追加の列に収まるように再配置することです。 これにより、画面に表示される製品の数を大幅に増やすことができます。 以下の例では、ユーザーは6つの製品ではなく10の製品を見ることができます。





製品リストグリッドは、追加の列が大画面に収まるように配置されます。 （ 画像を拡大する ）



このアプローチを使用すると、製品のリストを大画面に大幅に適合させることができますが、慎重に行ってください。 列の数が多すぎると、タイルの表示が最終的に難しくなります。 ユーザーは情報を読み、行から行へ目をジャンプすることは困難です（このため、テキストの行の長さが最適です ）。



したがって、ユーザーが情報の海で迷子にならないように、製品のリストを5〜8 列の幅に制限します（リスト内のアイテムのサイズと製品のニッチに応じて）。

リスト内の製品の拡大画像

製品リストの大きな表示スペースを活用するもう1つの明白な方法は、リスト内の各アイテムを画面いっぱいに拡大することです。 たとえば、製品プレビューのサイズを大幅に拡大して、ユーザーが各製品の設計をより詳細に検討できるようにすることができます。 送信された視覚情報の量が最大であれば、ユーザーが味わう製品を選択するのがはるかに簡単になるため、これは外観によって促進される製品のニッチにとって明白な利点です。





製品リストの要素が拡大され、高解像度の画像が読み込まれ、最大量の視覚情報が送信されます。 （ 画像を拡大する ）



ただし、ここでも注意は害になりません。 画像の単純なスケーリングは、多くの場合、リスト行の高さの深刻な増加につながります （比率が保持されると想定します）。 その結果、ページあたりの製品数が大幅に削減されます。 上の図に注意してください-リストの2行目はほとんど見えなくなっています。



したがって、製品リストの画像を拡大するときの妥協点は次のとおりです。各製品の視覚データの詳細レベルを上げると、可視領域に配置される製品が少なくなるため、利用可能な製品の概要を制限します。

製品リストのスケーリングと再構築

ユーザーの画面が拡大した場合に2つの以前のソリューションを組み合わせることにより、つまり、列を追加し、製品リストの各アイテムを増やすことにより、それらのベストを取得します。 概要は保存されますが、各製品にはより視覚的なデータがあります。 リスト内のアイテムの高さが下限に達しても、製品タイルは再構築されて追加の列が表示されます。





商品リストの要素は同時に拡大され、追加の列に再配置されます。 （ 画像を拡大する ）



したがって、追加の視覚情報を表示するためにリスト項目が増加する可能性がありますが、高さは増加しないため、画面に表示される製品の数に妥協する必要があります。 実際、列の追加により、可視領域内の製品の数も増えます。 画面上の製品の総数と各製品の詳細レベルの両方を増やしていることがわかりました。

粘着フィルター

空のスペースを取り除くもう1つの方法は、フィルターを使用してパネルを修正し、「スティッキー」要素として画面の表示領域をソートすることです。 これにより、ユーザーは現在どの製品を監視しているかについての追加情報と、リストパラメーターの管理にすばやくアクセスできます。





フィルターパネルは、画面の端に取り付けられたサイドパネルとして表示できます。 （ 画像を拡大する ）



メインコンテンツがそれほど広くない場合、固定コンテンツはスペースを効果的に使用する方法です。 ただし、画面の端でコンテンツをキャプチャするときはいつでも、コンテンツを配置するのに十分なスペースがある軸、つまりスペースが多すぎる軸に沿ってのみ実行してください。 たとえば、必要なスペースがあるかどうかを確認する表示領域の高さに基づくルール（高さベースのメディアクエリなど）を適用せずに、画面の上部または下部にコンテンツをキャプチャしないでください。



ただし、適切なルールチェックを使用すると、スティッキーサイドフィルターパネルをいくつかの列に再構築し、パラメーターを2つまたは3つの列に分割することもできます。 フィルターパネルが水平の場合、表示領域の高さが許す限り、フィルターパネルを画面の最上部に取り付けることができます。 または、水平方向に多くの空きスペースがある場合、ページをスクロールするときにこのパネルを横に再配置できます。 ブラウザウィンドウの高さを使用して、フィルタパラメータの削減を動的に調整することもできます 。特定のしきい値まで表示されるパラメータの数は、画面の高さの増加とともに増加します。

最近見たアイテム

回答者がテスト中に製品ページにアクセスし、最終的に製品が自分に合わないことに気付いた場合、検索を続行するか、サイトを離れました。 もちろん、前の画面に戻ることができるようにすることは売り手の利益になります。 代替オプションと関連製品 を含むオファーまたは最近表示した製品のリストをサイドバーに表示することで、現在見ている製品が適切でない場合に選択できるエスケープルートをすぐにユーザーに提供します。





製品のオファーまたは最近表示した製品のリストをサイドパネルに配置して、製品間を簡単に移動できます。 （ 画像を拡大する ）



製品から製品への単純な移行は、ユーザーが検索を継続する意欲に大きく影響する可能性があります。 当然、 商品のカテゴリも同じ方法で宣伝できます。 たとえば、 ユーザーシナリオを思い出してください。 ユーザーは製品リストとページの間を行き来しますか、それとも、ある製品から別の製品に移動できますか？



ユーザーがサイトの提供内容をより完全に把握できるため、製品から製品に移行する可能性が魅力的な場合があります。 ただし、このような移行を伴うシナリオでは、多くの競合も発生します。 したがって、ユニットを宣伝するために提供するパスが、カテゴリとユーザーがアクセスする製品カードの間の健全なバランスを維持していることを確認してください。

スティッキー製品の概要

製品カードは長いです。 画像 、説明、仕様、レビュー、 代替および関連製品の提案、質問などが含まれる場合があります。 私たちのすべてのユーザビリティ調査は、より多くの情報がほぼ常により良いことを示しています（コンテンツが良質である限り-つまり、有用で、信頼性があり、多かれ少なかれ正確です）。 また、ユーザーがメインの製品説明（名前、価格、可能な製品オプション、[購入]ボタンなど）から遠く離れていることもあります。 常にコンテキストを表示して[購入]ボタンを手の届く場所に保つには 、ユーザーがページを下にスクロールしたときに、製品のスティッキーサマリーを大画面の空き領域に配置し、表示領域の上部の境界に添付します。





ユーザーが製品のカードの長いページを下にスクロールすると、製品のスティッキーサマリーと[カートに追加]ボタンが画面の上端に添付されます。 （ 画像を拡大する ）



スティッキー製品の概要は、基本的に、アイテムリストアイテムに使用されるデザインのわずかに変更されたバージョンです。 サマリーが画面の上部または下部の境界に固定されている場合、形状を狭くすることができます。 何らかの方法で、ポイントは常にユーザーにコンテキストを表示することであり、ユーザーがレビューに深く入った場合でも、製品の名前、コスト、およびオプションを確認できるようにします。 そしてもちろん、ユーザーが幸せな顧客の熱心なレビューを読むときは、常に[カートに追加]ボタンを手の届くところに置いてください。

スティッキー注文の概要とサポート

チェックアウト中、余分な水平スペースは使用されません。そのようなページには通常集中が必要であり、いくつかの列のフォームは購入プロセス中に深刻なユーザビリティ問題につながる可能性があるためです。 大きな画面では、この空白の海を注文の要約やサポート情報に使用できます。 注文の要約は、ユーザーが購入から数歩しか離れていない商品を常に思い出させるものとして、注文を出すすべての段階で不変の要素になる可能性があります。





注文の概要とサポートの詳細は、画面に余裕がある場合にサイドバーに表示されます。 （ 画像を拡大する ）



一方、通常地下にあるサポートの詳細は、ユーザーが注文のプロセスで問題に遭遇した場合に簡単にアクセスできるように上げることができます。 過剰なサポートコールが心配な場合は、注文の量と注文プロセスのステップ数がすでに完了していること、および検証エラーが発生したかどうかに基づいて、サポートの詳細を選択的に表示できます。

オンラインストアの適応スケーリング

現在、大画面向けにサイトデザインを最適化しているオンラインストアはほとんどありません。 大画面向けに最適化されたサイトを提供しているトップのオンライン小売業者の18％でさえ、実際にこの方向へのわずかな一歩を踏み出しました。 大きな画面を持つユーザーの大部分を考えると、適応スケーリングの領域は成熟しており、可能性があります。



適応スケーリングを使用する場合、 「同じコンテンツ、異なるプレゼンテーション」の基本原則を忘れないでください。 コンテンツのごく一部であっても、すべてのユーザーにとって重要であるか、大きなモニターのユーザーを悩ますほど重要ではありません。 ユーザーが画面上により多くのスペースを持っているという事実は、低品質のコンテンツの山を見たいという意味ではありません。 代わりに、既存のコンテンツを別の方法で表示して、大画面ユーザー向けのインターフェースを改善する方法を探してください。



この記事で説明する11のアイデアは、同じコンテンツと異なるプレゼンテーションというこの原則に基づいています-ページの現在のコンテンツを取得し、それをスケーリングするか、場所を大幅に変更します。

1. 組み込みの認証ウィンドウ
2. ヘッダーと地下室からのクイックリンク
3. 内蔵カルーセルスライダー
4. 内蔵買い物かご
5. 商品の追加列
6. リスト内の製品の拡大画像
7. 製品リストのスケーリングと再構築
8. 粘着フィルター
9. 最近見たアイテム
10. スティッキー製品の概要
11. スティッキー注文の概要とサポート

オンラインストアを大型モニターに適応させるための他のアイデアはありますか？ コメントで共有してください。 大型モニターを使用するユーザーにオンラインストアを適応させるときが来ました。