空白を減らすと、ユーザーエクスペリエンスが向上または低下しますか？
私はWebデザイナーとして、多くのeコマースWebサイトに取り組んでいます。何度も繰り返されるフィードバックの1つは、垂直方向の間隔を小さくすることです。これは、スクロールせずに見える範囲に製品を増やすだけでなく、ページをスクロールする量を減らすためです。
私は個人的に、コンテンツを呼吸するための多くの余白を与えるために、多くの空白を使用するのが好きです。デザインが窮屈すぎるときは好きではありません。使用したい間隔とクライアントが使用したい間隔の例を以下に示します。 クリックして拡大し、比較のために必ず100％で表示してください。
私の間隔（クリックして拡大）
クライアントの間隔（クリックして拡大）
私の質問は、空白を減らすことで、ユーザーエクスペリエンスが何らかの方法で改善または低下することですか？サイト調査を実施できれば、これはさらに改善されます。
追加したいのは、9.5％の人がまだ1024 x 768以下の解像度を使用していることです。これは、ブラウザーのサイズを1024 x 768に変更すると、表示される製品の数が多くなるほど快適になるため、余白を少なくすることが役立つ可能性があると私が考える1つの可能性です。
ソース：http://www.w3schools.com/browsers/browsers_display.asp
完全な「それは依存する」。
もちろん、空白を効果的に使用して階層を定義し、サイトを使用している人に重要なこと、重要でないことを表現し、ページを通じて人々の注意を引くことができます。
ただし、優れたユーザーエクスペリエンスを構築する上で、多くのツールの1つ（および制約）です。その使用とディスプレイのサイズおよびシステムの使用方法のバランスをとる必要があります。
例。
何年も前に、私は販売ツールに取り組みました。営業担当者がお客様と直接顔を合わせて話しているときに情報を提供しました。
これは、1つのページにすべてを詰め込む古い文字ベースのシステムでした。理解するのが難しく、使い方を学ぶのが大変でした。明確なラベルと適切に構造化されたレイアウトを備えたNice Webアプリに置き換え、情報の階層を読者にわかりやすくしました。
次にユーザーテストを行いました（そして、はい-以前にユーザーテストを行うべきでした-教訓）。
良いニュースは、「使いやすさ」が大幅に向上したことです。だれでもその前に誰でも置くことができ、彼らは必要な情報を抽出する方法を理解できました。
悪いニュースは、営業担当者嫌いそれだということでした。
余白の多い、見やすく、見やすいレイアウトが新しくなったため、スクロールが必要になったからです。何かを調べる必要があるとき、顧客から目を離さなければなりませんでした。ディスプレイに注意してください。マウスに手を伸ばす;周りをクリックしてください。その後、お客様に注意を向けます。
従来の不透明なすべてが1画面のシステムでは、画面を一瞥しただけでした。
新しいシステムにより、営業担当者は何を売っているのか分からず、営業プロセスから注意をそらしたように見えました。古いシステムでは、時々数字を再確認し、顧客に注意を払わなければならないように見えました。
大量の空白と明確な視覚的階層ユーザーエクスペリエンスを完全に台無しにしたこれらの人々。
ホワイトスペースは、特定の状況で人々に大きな効果をもたらします。顧客のコンテキストを理解する必要があります。
大きなデスクトップにたくさんの余白-すばらしい。スマートフォンでは-それほどではありません。
販売は、製品を視覚的に比較する顧客に依存していますか？どの場合、ページあたりの製品数が多いほど、プロセスが改善されるでしょうか？したがって、余白を少なくすると効果的です。
売上は製品の品質の向上にかかっていますか？どちらの場合、おそらくより大きな高品質の画像が少ない方が良いでしょうか？したがって、より多くの空白が役立つ場合があります。
どのくらいの余白が求められているのは間違った種類の質問です。必要がある：
- 顧客を理解する
- 彼らが購入する方法と理由を理解する
- 想定を実験およびテストして、何が最も効果的かを調べます。
はい、空白を減らすとユーザーエクスペリエンスが低下します、サイトの読みやすさの理由は、ほとんどすべての場合に重要であり、ユーザーのナビゲーション効率に影響を与える可能性がありますあなたのサイト。 負のスペース （ホワイトスペースとも呼ばれます）に関するこの記事を引用するには
Web上のテキストは他のプラットフォーム上のテキストとは異なり、すべてのデザインを調整して、エンドユーザーがコンテンツを最も簡単に読むことができるようにします。新聞とは異なり、興味のあるコンテンツが実際にどこにあるのかを解読しようとすることは、Web上でイライラすることがあります。雑然としてデザインが重すぎて対処できない場合は、要素を互いに区別するために最初にWebページを精査する必要があるため、クリーンで読みやすいエクスペリエンスは提供されません。空白は要素間のバッファをハッキングするので、気になるコンテンツを見つけやすくなります。
ここで注意すべき重要な点は、「空白は要素間のバッファをハッキングするため、気になるコンテンツを見つけやすくなります。」というフレーズです。
また、同じ記事には、洗練された感覚と快適さをサイトに伝えて読みやすくするための空白の影響についてのこの記事があります。
ホワイトスペースは、製品が居住する不動産よりも重要であるという感覚を生み出すことにより、一般的なWebページに洗練さと豪華さを加えることができます。「less is more」の原則を使用することで、製品を豪華に見せることができます。 AppleのWebサイト（私たちがコンピューティングのプレミアムエンドにあると見なしているブランド）を見ると、最小限のタグラインはあるものの、製品自体が語るように必要なものはほとんどありません。これは、宣伝されている製品やサービスの一般的な考え方を伝えるのにコンテンツがほとんど必要ない、プレミアムヘルスやウェルビーイングWebサイトでも人気のある現象です。多くの場合、安価なブランドはできるだけ多くの情報をスペースに詰め込んでいるように見えます。異なる市場、異なるエンドユーザー。 HPとAppleサイトなどで、この点を強調します。Appleは、非常に自信があり、彼らの製品が彼らに代わって話せるようにします。製品が必要な場合は、移動しない場合は、周りを見回してください。一方、HPサイトでは、より多くのアップセルとクロスセリングを採用し、オファーを宣伝し、安い価格をユーザーの心に押し込み、興味のあるさまざまな代替製品を紹介します。に。
この例は、この記事（ Whitespace：The Underutilized Design Element ）から取得できます。これは、多くの空白を使用して製品を明確に呼び出すだけでなく、それが役立つ顧客
ただし、一方でローエンドサイトは、この Rooms to Go の例に示されているように、画面スペース内にできるだけ収まるようにしています。
私もこれを読むことをお勧めします タイポグラフィについての記事 これは、空白の使用とそれが読みやすさにどのように影響するかについて言うべきです
これもご覧になることをお勧めします 十分な余白を提供することの重要性に関する優れた記事 eコマースサイトを設計しているので、主な焦点は行動を促すフレーズに変換することです。言及された記事は非常に重要です
空白はCTAを強調します
経験豊富なWebユーザーは、バナーや、それに似たグラフィックアイテムを無視する傾向があります。リンクやボタンを目立たせて、訪問者が目をつぶらないようにします。空白はこれに最適です。空のスペースで囲まれたオブジェクトとコピーが強調され、ユーザーの目を引きます。
この記事で言及されているもう1つの興味深いことは、整然とした外観またはクリーンな外観によって、プロの外観が提供する信頼性が実際にどのように向上するかです。
Tidy = trusttrusty
美学と改宗の間にしっかりしたリンクがあります。訪問者は、一見したところに基づいてWebサイトの専門レベルを測定します。経験がこれに追加されます。ベテランユーザーにとって、Webサイトの見かけの洗練度の評価は第二の性質であり、すぐに行われます。
あまり知られていないのは、優れたウェブデザインが信頼性を示唆しているため、「魅力的」は「信頼できる」に変換されるということです。無地のレイアウト、魅力的な画像、優れた配色–これらの要素はすべて、Webサイトの印象に追加されますが、専門知識を示すため、空白は特に重要です。乱雑なデザインは安っぽくて疑わしいものとしてユーザーを襲うリスクを冒しますが、豊富なパディングと空白は品質と信頼性を示します。
これはどのWebサイトにとっても重要ですが、変換にとっては非常に重要です。明らかに信頼性の低いWebサイトではトランザクションが少なくなります。この意味で、「少ない」は実際には「多い」を意味します。
最後に、サイトとホワイトスペースの欠如が何をしているかをすばやく分析します。
- 同じ色のアクションへの主要な呼び出し（CTA）が近接しているため、チェックアウトせずにすぐにすくい取ることができます。
- ウィッシュリストと比較がバスケットに追加CTAと同じ背景とテキストを使用するという事実により、CTAが目立たなくなり、すべて失われるそこにあるコンテンツ。
- マウスを使用している間はこの問題は問題にならないかもしれませんが、タッチスクリーンデバイスまたは小さいフォームファクターを使用しているときに、行動を促すフレーズが近接しているため、間違った行動を促すフレーズをクリックしないように注意する必要があります。
見るべき他の記事：
Designing the Invisible ルーク・ロブレウスキーによる
デザイナーにとって、ホワイトスペースはコンテンツ自体と同じくらい重要であることがよくあります」インターフェースの見えない要素は、「何が最も重要で、何が関連し、何に注意が必要か」を伝えるのに役立ちます。
ルーペの下＃1：ホワイトスペース これは言うべきことを持っています
ホワイトスペースを適切に使用すると、ページで一般的なフローとバランスを作成できます。これにより、読者を歓迎し、しばらく滞在するように促すことで、デザインの意図を伝えることができます。空白は、重要な要素を強調し、全体的な階層をサポートし、デザイナーの意図によりページの周りに閲覧者を導くことができます。ページ上の空のスペースは、画像が占めるスペースと同じくらい重要な場合があります。空のスペースでさえ目的を果たし、レイアウトの視覚的な整合性をサポートするためです。
もう1つの注目すべきリソースは Webデザインのホワイトスペースの21の刺激的な例 です。
最後に、空白がどのように役立つかについての研究記事を探しているなら、私はこの心理学の記事をお勧めします Reading Online Text：A Comparison of Four White Space Layouts 空白が読み取り速度にどのように影響するかについていくつかの有用な考えがありますと理解
はい、いいえ。余白が多すぎると、空白がないのと同じくらい良くありません。
他のすべてと同様に、黄金平均も適用されます。これは、2つの極端な（空白なし）と（すべての空白）の間に最も快適で機能的なポイントがあることを意味します。
スクリーンショットに大きな白い塊の中央に1つの製品しか含まれていない場合、そのデザインは「機能的」または「豪華」とは言えません。すべての製品が隣同士に接着されている場合も同様です。
User eXperienceはユーザーインターフェイスを操作する必要があります。製品のさまざまなシナリオを検討する必要があります。静的な空白は、27インチのデスクトップ画面と3インチの電話画面の両方で見栄えがよくなりますか？幅広い解像度で機能を維持できますか？ターゲットデバイスの解像度はデザインの魅力に影響しますか？ターゲットユーザーは何を好みますか？空白はテクスチャまたはフラットにする必要がありますか？空白の欠如は、低精度のタッチイベントに干渉しますか？空白があると、小さな画面で過度のスクロールが発生しますか？レイアウトはデバイスパラメータに基づいて動的に調整されますか？
あなたが遭遇するすべてのシナリオについてこれらおよび他の関連する質問に答えるなら、あなたはあなたのデザインの使いやすさについて良い考えを持つでしょう。もちろん、実際にはこれを引き出すのは難しいので、最も可能性の高いものを選択することで、より少ない質問とユースケースに集中できます。
各行の間の水平線を削除すると、同じ量の余白に対してわずかに少ない空白を使用できます。
垂直方向の間隔を狭めることの利点は、「しわの上」により多くのアイテムが収まることですが、間隔の平均は清潔感です。
ただし、選択する必要はありません。画面が小さい場合は間隔を狭め、画面が大きい場合は間隔を広げてください。最近のほとんどのブラウザーは、CSSメディアクエリをサポートしています。
私ができることはいつでも、私は常にそれを避けようとします（明らかに、ある程度まで）。 A/Bテストで起動し、どちらが優れているかを確認します。
微妙な違いなので興味深いテストです。CSSを少し調整するだけで技術的に簡単で、「クライアントの意見」を理解する唯一の方法です。
私は、eコマースの少し余分な空白がコンバージョンに影響を与えたかどうかを知りたいと思っています。
pS私はあなたにCTA（IMO）を改善することを強くお勧めします
スクロールせずに見える範囲の製品を増やすだけでなく、ページを下にスクロールする量を減らす
空白を減らすためのこれらの引数はどちらも無効であることに注意してください。調査によると、ユーザーは非常に細かく、スクロールが可能です。
「折り目とスクロールしない人々」の神話に関するいくつかの読書：
また、他にもグーグルで見つけることができる多くの研究があります。
それで、なぜこれがまだ常に出てくるのですか？
まあ、「折り目」は賢く聞こえます。表面的には理にかなっています。そして、多くの人々は、スマートに聞こえ、表面上意味のあるものを繰り返すことを好みます。それは「ロゴを大きくする」という「簡単な批評」です。したがって、具体的な数値と調査でプッシュバックすることを確認するのは仕事ではありません。
これを減らすもう1つの方法は、デザインをスクリーンショットとして提示しないことです。 Webサイトが「全体」と見なされることはありません。それは常にウェブブラウザの範囲内で見られます。また、ブラウザで作品を見ると、ニースの大きなフォトショップレンダリングを表示する場合とは大きく異なる反応が生じる可能性があります。そして、その違いは、前者の方がはるかに現実的であることです。これが、このような高忠実度のモックアップを提示するときに目指したいことです。