【翻訳】スキャナビリティ＝ユーザーの視線移動しやすさを向上させよう（Nemanja Banjanin, Toptal）
スキャナビリティは見過ごされがちなユーザビリティ要素ですが、最もインパクトのある要素の1つです。これらのUIデザインのヒントは、デザイナーが短時間の訪問者を長期的なユーザーに変えることを容易にします。
プロダクトデザイナーは、短時間で多くの情報を伝えることがよくあります。スキャナビリティ」という言葉、一般的な視線追跡パターン、モダンデザインの原則を理解している人は、消費しやすいコンテンツや「粘着性のあるUI」を作成するのに適しています。
インターネットは日々、新しいアプリやウェブサイト、記事などで拡大しています。情報過多のユーザーが、関連性のないコンテンツから関連性のある情報を取捨選択することは難しくなっています。マーケティングの専門家であるDavid Zhengは、60%以上のケースで、訪問者が15秒未満でウェブサイトを諦めて去ってしまうことを発見しました。
この調査によると、ユーザーは実際に目にしたものすべてを一字一句読むわけではなく、スキャンしてから、その資料が自分の時間を費やす価値があるかどうかを判断するのだそうです。適切なコンテンツを瞬時にスキャンできるようにすることで、プロダクトデザイナーは短期的な訪問者を長期的なユーザーに変えることができるかもしれません。以下に、見落とされがちなユーザビリティデザインの重要な要素を強化するためのUIデザインのベストプラクティスを紹介します： スキャナビリティです。
スキャナビリティとは何か？
ニールセン・ノーマン・グループのUXの専門家は、リサーチを行い、この質問に答えました： 人々はウェブ上でどのように読むのか？彼の発見はシンプルでした。読まないのです。
初めてウェブサイトを訪れた人のうち、一字一句読む人はわずか16％。残りの84%は、見出し、文章、画像、アニメーションなどのフックとなる要素を素早くスキャンしてから、その内容を深く読み込もうとします。このような行動は、デジタルインターフェースに限ったことではありません。例えば、新聞を一字一句読む人はめったにいません。その代わりに、見出しや画像など、同じ要素をスキャンして、自分の時間を費やすに値するものは何かを判断します。
したがって、スキャナビリティとは、スキャンしやすいようにコンテンツをレイアウトするというアプローチです。画面上で価値あるコンテンツをビジターに印象づける時間は短いことが多いため、ユーザーがウェブ上でどのように読むかに合わせてインターフェイスを完全に最適化することが重要になります。デジタル製品がウェブサイトであれ、アプリケーションであれ、その他のタイプのユーザーインターフェースであれ、スキャナビリティはユーザーフレンドリーデザインの最も重要な要素の1つです。
スキャナブルなインターフェースの利点
デジタル製品のスキャナビリティを判断する理想的な方法は、ユーザーの視点からそれを観察し、以下の重要な質問に答えることです：
- ページのコンテンツは視聴者の期待に応えているか？
- ページのメインメッセージは短時間で理解しやすいか？
スキャナブルなインターフェイスを作るには労力がかかりますが、粘着性のあるUIデザインを作ることで、長い目で見れば報われます。ニールセン・ノーマン・グループの調査によると、スキャナビリティに最適化されたページは、以下の点ではるかに効果的です：
- ユーザーのタスク完了時間が短縮
- ユーザーは、そのコンテンツが自分にとって適切かどうかを簡単に判断できます。
- ユーザーの記憶ミスが減少
- ユーザーはページの構造をより理解しやすくなります。
- サイトの信頼性とコンテンツの質に対する主観的評価が向上します。
- 直帰率が減少
- 再訪問の確率が高まります
- 検索エンジン最適化（SEO）が改善されます
スキャンパターンにおけるユーザーの習慣の力
コンテンツの消費方法は人それぞれです。しかし、研究を通じて、明確に定義された視線追跡パターンが浮かび上がってきました。ユーザーが最初の数秒間でどのようにインターフェースとインタラクションするかを知ることは、デザイナーがコンテンツに優先順位をつけ、重要な情報を主要な可視ゾーンに配置し、強力な視覚階層を確立するのに役立ちます。
ニールセン・ノーマン・グループによると、ユーザーがインターフェイスをスキャンする一般的なパターンは7つあります。
- 有名なFパターン：このパターンは発見から12年経った今でも、モバイルインターフェイスをスキャンするときでさえ、最も一般的なスキャンパターンです。視線は、読むときに典型的なように水平に移動し、次に下のコンテンツに飛びます。これは、ゆっくりと体系的に行うこともできますし、よりスポッ トなヒートマップで素早く行うこともできます。
- Zパターン：ジグザグモデルは、情報が一様に表示され、視覚的階層が弱いウェブページで典型的です。
- レイヤー・ケーキ・パターン：見出しや小見出しをスキャンして、求めている情報がページのどこにあるか（あるかどうか）を素早く判断するときに、ユーザーはこのパターンに従います。
- 点在パターン：クリエイティブは通常このスキャニングモデルに従い、テキストの大きな塊を読み飛ばし、色、形、比率の異常などの視覚的要素をスキャンして、特定の情報の断片を見つけます。
- マーキングパターン：ダンサーが回転しながらバランスを保つためにオブジェクトを固定するように、ユーザーはスクロール中に視線を一箇所に集中させます。
- 迂回パターン：リスト内の複数のテキスト行がすべて同じ単語で始まる場合、ユーザーは行の最初の単語を意図的にスキップします。
- コミットメント・パターン:これはまれなパターンで、ユーザーがコンテンツに非常に興味を持ち、そのすべてを消費する意欲がある場合にのみ発生します。
ユーザーが採用するパターンは、主にウェブページを訪れた動機に関係します： どのような情報を求めているのか？どのような情報を求めているのか？この情報をもっと早く提供できるウェブサイトは他にあるのか？
ユーザーリサーチとスキャンパターンによる価値の提供
「ユーザー中心設計」という言葉を作った認知科学の研究者であるドナルド・ノーマン博士は、「機能的で、理解しやすく、使いやすい製品を作るだけでは十分ではない」と記しており、「私たちは、人々の生活に喜びや興奮、喜びや楽しみ、そしてそう、美しさをもたらす製品を作る必要もある」と述べています。
ユーザーリサーチは、ユーザー中心設計とUI設計のベストプラクティスの要です。続いて、デジタルインターフェースのスキャナビリティを向上させるためには、デザイナーはエンドユーザーを理解しなければなりません。UIパターンがエンドユーザーの視点からデザインされると、自然で直感的な体験が生まれます。
インパクトのあるソリューションは抽象的なものではありません。以下は、美しく、実用的で、持続可能なデジタル製品のセットです。各デザインチームは、主要なユーザーを定義し、視線追跡パターンを使用し、粘着性のあるUIを生み出すためにコンテンツのレイアウトを設計しました。
Instacartは、UIデザインパターンを通してユーザー中心デザインを活用しています。彼らの利用者のかなりの部分は、高齢者と視覚障害のあるユーザーで構成されているため、主要なCTAに明確な重点を置いて、アイテムは高コントラストのグリッドにリストされています。長時間の訪問者に対応するため、Spotted Patternのスキャンモードが可能なデザインになっています。
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によると、スキャナビリティはコンテンツマーケティングにおいて最も見過ごされている要素かもしれません。スキャン可能なコンテンツを作成することで、短期的な訪問者は長期的なユーザーになることができます。
スキャン可能なコンテンツは、エンドユーザーに対して、彼らの時間が大切にされていることを示し、レイアウトデザインに目を通すだけで、核となるメッセージを理解する機会を提供します。バイラルブロガーでジャーナリズム教授のキム・ケラーは、デザイナーに対して「あなたは、顧客として欲しい人と会話を始めているのです」と指摘しています。それは関係であり、一緒に時間を過ごさなければ、どんな関係も存続できません。相手の時間を尊重し、価値あるものにしましょう。」
