スキャン性を向上させるためのUIデザインのベストプラクティス

プロダクトデザイナーは、多くの場合、短期間で多くの情報を伝達します。 「スキャン可能性」という用語、一般的な視線追跡パターン、および最新の設計原則を理解している人は、簡単に消費できるコンテンツと「スティッキーなUI」を作成するための準備が整っています。

毎日、インターネットは新しいアプリ、ウェブサイト、記事などで拡大しています。 関連性のないコンテンツから関連性のある情報をフィルタリングすることが困難であると感じる情報過多のユーザーの注意を引くことはますます困難になっています。 マーケティングの専門家であるDavidZhengは、 60％以上のケースで、訪問者が15秒以内にWebサイトをあきらめて離れることを発見しました。

調査によると、ユーザーは実際に目にするものすべてを単語ごとに読むわけではなく、スキャンして、その資料が時間の価値があるかどうかを判断します。 適切なコンテンツを即座にスキャン可能にすることで、製品設計者は短期間の訪問者を長期的なユーザーに変えることができます。 以下は、見過ごされがちなユーザビリティ設計の重要な要素であるスキャン可能性を増幅するのに役立つUI設計のベストプラクティスの選択です。

スキャン可能性とは何ですか？

Nielsen Norman GroupのUXエキスパートは、次の質問に答えるために調査を実施しました。人々はWebでどのように読むのでしょうか。 彼の発見は単純だった。 彼らはしません。

このグループは、Webサイトを初めて訪問する人の16％だけが単語ごとにそれを読む可能性が高いことを発見しました。 他の84％は、見出し、文章、画像、アニメーションなどのフック要素をすばやくスキャンしてから、資料を深く掘り下げることにします。 この動作は、デジタルインターフェイスに限定されません。 たとえば、人々が新聞のすべての単語を読むことはめったにありません。 代わりに、同じ要素（見出し、画像など）をスキャンして、時間の価値があるものを判断します。

したがって、スキャン可能性は、スキャンしやすいようにコンテンツをレイアウトするアプローチです。 多くの場合、画面上の貴重なコンテンツで訪問者を感動させるのは短期間であるため、ユーザーがWeb上で読む方法に合わせてインターフェイスを完全に最適化することが重要になります。 デジタル製品がWebサイト、アプリケーション、またはその他のタイプのユーザーインターフェイスであるかどうかにかかわらず、スキャン可能性はユーザーフレンドリーなデザインの最も重要な要素の1つです。

スキャン可能なインターフェースの利点

デジタル製品のスキャン可能性を判断する理想的な方法は、ユーザーの視点からデジタル製品を観察し、次の重要な質問に答えることです。

1. ページのコンテンツは視聴者の期待に対応していますか？
2. ページのメインメッセージは短期間でわかりやすいですか？

スキャン可能なインターフェイスの作成には手間がかかりますが、長期的には、スティッキーなUIデザインを作成することで成果が得られます。 Nielsen Norman Groupの調査によると、スキャン可能性に最適化されたページは、次の方法ではるかに効果的になります。

• ユーザーのタスク完了時間は短縮されます
• ユーザーは、コンテンツが自分に適しているかどうかを簡単に定義できます
• ユーザーは回想のエラーを少なくします
• ユーザーはページの構造をよりよく理解できます
• サイトは、信頼性とコンテンツの品質に関してより好ましい主観的な評価を受けます
• バウンス率が低下します
• 再訪問の可能性が高くなります
• 検索エンジン最適化（SEO）が改善されました

スキャンパターンにおけるユーザーの習慣の力

コンテンツの消費方法は人によって異なります。 ただし、調査を通じて、明確に定義された視線追跡パターンが明らかになりました。 ユーザーが最初の数秒以内にインターフェースをどのように操作するかを知ることは、デザイナーがコンテンツに優先順位を付け、主要な可視ゾーンに重要な情報を配置し、強力な視覚的階層を確立するのに役立ちます。

Nielsen Norman Groupによると、ユーザーがインターフェースをスキャンする一般的なパターンは7つあります。

• 有名なFパターン：発見から12年経った今でも、このパターンは、モバイルインターフェイスをスキャンする場合でも、最も一般的なスキャンパターンです。 読書の際によくあるように、目は水平に動き、次に下のコンテンツにスキップします。 これは、スポットティアヒートマップを使用して、ゆっくりと体系的に、または迅速に実行できます。
• Zパターン：ジグザグモデルは、情報の表示が均一で視覚的な階層が弱いWebページで一般的です。
• レイヤーケーキパターン：ユーザーは、見出しと小見出しをスキャンするときにこのパターンに従って、探している情報がページのどこにあるか（およびあるかどうか）をすばやく判断します。
• 斑点パターン：クリエイティブは通常、このスキャンモデルに従います。このモデルでは、テキストの大きなチャンクをスキップし、色、形状、比率の異常などの視覚的なコンポーネントをスキャンして、特定の情報を見つけます。
• マーキングパターン：ダンサーがオブジェクトに固執して回転しながらバランスを保つように、ユーザーはスクロール中に1つの場所に目を向け続けます。これは、モバイルUXでは非常に一般的なパターンです。
• パターンのバイパス：リスト内の複数行のテキストがすべて同じ単語で始まる場合、ユーザーは意図的に行の最初の単語をスキップします。
• コミットメントパターン：これはまれなパターンであり、ユーザーがコンテンツに非常に興味を持ち、すべてを消費する意欲がある場合にのみ発生します。

ユーザーが採用するパターンは、主にWebページにアクセスする動機に関連します。ユーザーはどのような種類の情報を求めていますか。 彼らはそれを見つけるためにどれくらいの時間を費やしても構わないと思っていますか？ この情報をより迅速に提供できる他のWebサイトはありますか？

ユーザー調査とスキャンパターンによる価値の提供

「ユーザー中心設計」という言葉を生み出した認知科学研究者のドナルド・ノーマン博士は、次のように述べています。 、喜びと楽しさ、そしてそうです、人々の生活の美しさです。」

ユーザー調査は、ユーザー中心設計とUI設計のベストプラクティスの基礎です。 その後、デジタルインターフェイスのスキャン可能性を向上させるために、設計者はエンドユーザーを理解する必要があります。 UIパターンをエンドユーザーの観点から設計すると、自然で直感的なエクスペリエンスが実現します。

影響力のあるソリューションは、抽象化で構成されていません。 以下は、美しく、実行可能で、持続可能なデジタル製品のセットです。 各設計チームは、主要な対象者を定義し、視線追跡パターンを使用し、コンテンツレイアウトを設計して、スティッキーなUIを作成しました。

Instacartは、UIデザインパターンを通じてユーザー中心設計を活用しています。 オーディエンスの大部分は視覚障害のある高齢者とユーザーで構成されているため、アイテムは主要なCTAに明確に重点を置いて高コントラストのグリッドにリストされています。 この設計により、スポットパターンスキャンモードで長期の訪問者に対応できます。

Yelpは、最高のレストラン、ショッピング、ナイトライフ、食べ物などを検索するユーザーにサービスを提供します。人々は、自分の個人的な基準と徹底的な調査に基づいてレビューを評価する可能性が高く、Fパターンを最も適切なスキャンモデルにします。 したがって、Yelpは、評価、画像、住所などの特定の要素に重点を置いて、簡単にスキャンできる方法でコンテンツを表示します。

Airbnbは間違いなく世の中で最も愛されているアプリの1つであり、その大部分はユーザーの調査によるものです。 ユーザーがモバイルデバイスを使用していることが多いことを知っているため、マーキングパターンに対応するように設計しています。 大きくて全幅のアパートの画像を強調するために、すっきりとした直感的なインターフェースがレイアウトされています。 ユーザーが適切に時間を割いて、リストが目を引くかどうかを確認できるように、意図的に1画面あたりのカバー画像の数を2つに制限しました。

デジタル製品のスキャン可能性を向上させる際に留意すべき1つの要素は、それが表示されるデバイスのタイプを定義することです。 Airbnbのモバイルプラットフォームは大量のトラフィックを受信します。 親指の使用法のヒートマップに見られるように、Airbnbは、「探索」や「保存された検索」など、最も一般的に使用されるUI要素を、スクロールやスキャン中に簡単にアクセスできる場所に戦略的に配置しました。

スキャン性を向上させるためのUIデザインのベストプラクティス

適切な視覚的階層を作成する

デジタルインターフェイスの視覚的な階層とは、UIデザイン要素の配置と表示を指し、重要度のレベルを伝達して、ユーザーが目的の情報をすばやくスキャンできるようにします。 適切な視覚的階層を備えたレイアウトを設計するには、いくつかの要因があります。

• サイズ
• 色
• 対比
• 近接性
• アラインメント
• ネガティブスペース
• 繰り返し

UIレイアウトデザインを作成する際にこれらのUIデザインパターンを考慮に入れることにより、デザイナーは最終製品が見栄えが良く、調和がとれていて、直感的にスキャン可能なレイアウトになるようにします。

Googleの検索結果ページでは、すべての視覚的階層要素を使用してスキャン可能性を高めています。 見出しは、色、サイズ、そしてその後のコントラストの使用によって強調されています。 各見出しを囲むネガティブスペースは、ユーザーが最初にスキャンするものであることに貢献しています。

ユーザーが関連する見出しを見つけたら、リンクの信頼性を確認する場合があります。これは、色と近接性により簡単に認識できる要素です。 次に、結果をより適切に評価するために、色、サイズ、および近接性が一貫しているコンテンツコピーを掘り下げます。 これらの要因に加えて、繰り返しと配置により、Googleの検索結果は一般的にスキャンしやすくなります。

ネガティブスペースを活用する

華麗なクロード・ドビュッシーはかつて「音楽は音符の間の空間です」と言っていました。 スキャン可能性についても同じ感情が当てはまります。要素間の負のスペースがレイアウトを成功させる要因です。 UI要素の周囲の適切な量のネガティブ（空白）スペースは、要素自体に焦点を合わせます。 コンテンツを強調し、レイアウトが乱雑にならないようにするために必要な呼吸スペースを提供します。 呼吸スペースがないと、人間の脳は関心のあるポイントをスキャンする可能性が低くなり、混乱する可能性が高くなります。

小見出しを使用してコンテンツを要約する

人々はしばしばテキストの大きな塊に否定的に反応します。 段落が彼らの興味と一致しない場合、彼らは時間を失うだろうという仮定を引き起こす可能性があります。 UIデザインのベストプラクティスは、この問題の解決策を提供します。 長い記事の冒頭に短い小見出しを追加することで、ユーザーはトピックに対する究極の洞察を得ることができます。

小見出しを書いている間、それを要点に保つことが重要です。 以下のコンテンツが提供する重要なメッセージを伝えるだけです。

箇条書きと番号付きリストを作成する

人間の脳は非常に体系的です。コンテンツを観察し、それを意味のある単位にグループ化します。 したがって、ユーザーは、テキストの段落にマージされたいくつかのポイントよりも、箇条書きまたは番号付きのリストを理解する可能性が高くなります。

リストによって作成されたネガティブスペースは、ユーザーがスキャンしやすくするため、機会を注意深く探すことが有益です。 テキスト内の2つ以上のポイントが互いに平行であり、それぞれが説明するのに2つ以下の文を必要とする場合、これはリストの有力な候補です。 Nielsen Norman Groupは、箇条書きのデジタルコンテンツを作成するためのさらなる洞察を提供します。

コンテンツを視覚化する

現代のデジタルユーザーは自然に視覚的であり、テキストコンテンツに常にうまく反応する可能性は低いです（完全に構造化されていて、理想的なスキャン可能性のためのすべてのUIデザインのヒントに従っている場合でも）。 外部環境は常に要因になります。 したがって、テキストの多いレイアウトを相殺するために、画像とグラフィックスを使用すると、有益で感情的に魅力的な視覚的な休憩が得られます。 言われているように、絵は千の言葉の価値があります！

オリジナルのビジュアル（イラスト、魅力的な写真など）は、ユーザーの注意を簡単に捉え、一般的なスタイルの概念をサポートします。 さらに、視覚的な階層を改善し、テキストを消化しやすくすることができます。 ただし、グラフィックを適切に使用しないと、逆効果を引き起こす可能性があるという危険性があります。 重要なアイデアをグラフィックに変換する前に、デザイナーがデザインしているコンテンツを完全に理解することが重要です。

CTAに適切な重点を置く

デジタルエクスペリエンスの大部分は、ユーザーから特定のアクションを引き出すことを目的としています。 召喚状（CTA）ボタンは非常にシンプルに見えることがよくありますが、ユーザーが購入、バスケットへの追加、または単に別のページに移動するなどのアクションを完了するのに役立つように戦略的に設計されています。

UIデザインのベストプラクティスでは、アクションを説明するコンテンツの近くにCTAを配置して、ユーザーが直感的に理解できるようにすることをお勧めします。 CTAのプロポーション、色、配置が適切かどうかをテストする効果的な方法は、最終的なデザインを一時的にグレースケールに変換することです。 CTAがはっきりと表示され、強調されたままの場合、スティッキーUIは適切に実行されます。

スキャン可能性の重要性

コンテンツの関連性、競合他社のソリューション、ビジネスロジックなど、UIレイアウトデザインが人々に受け入れられるかどうかを決定する要素はたくさんあります。 Forbesによると、スキャン可能性はコンテンツマーケティングの最も見過ごされている要素である可能性があります。 スキャン可能なコンテンツを作成することにより、短期間の訪問者は長期的なユーザーになることができます。

スキャン可能なコンテンツは、エンドユーザーに自分の時間が大切であることを示し、レイアウトデザインを一瞥するだけでコアメッセージを理解する機会を提供します。 ウイルスブロガーでジャーナリズムの教授であるキム・ケラーは、デザイナーに次のように指摘しています。 それは関係であり、あなたが一緒に時間を過ごしなければ、関係は生き残ることができません。 彼らの時間を尊重し、それを価値のあるものにしてください。」

•••

Toptal Designブログでさらに読む：

• UIデザインのベストプラクティスとよくある間違い
• 空の状態–UXの最も見過ごされている側面
• シンプルさが鍵–最小限のWebデザインを探る
• モバイルインターフェースのヒューリスティック原則
• 読みやすさのための設計–Webタイポグラフィのガイド