プロダクトデザイナーは、短期間に多くの情報を表示してしまうことがよくあります。「スキャナビリティ（読み取りやすさ）」という言葉の意味や、一般的な視線の動きのパターン、そして現代のデザイン原則を理解していれば、消費しやすいコンテンツと、魅力的なUIをつくることができるでしょう。
インターネットの世界は日々新たなアプリ、Webサイト、記事などが現れて広がっていきます。溢れかえるコンテンツから自分に関係のあるものだけを探すことは骨が折れるため、ユーザーを情報に注意を引きつけることはますます難しくなっています。
マーケティングの専門家であるDavid Zheng氏によれば、60%以上のユーザーは15秒以内にサイトを離脱しているというのです。
調査によれば、ユーザーはサイトの一言一句をきちんと読んでいるわけではなく、全体をざっとみて、時間をかける価値があるかを決めているようです。適切なコンテンツを素早く読み取れるようにすることで、プロダクトデザイナーは短期的な訪問者をヘビーユーザーに変えることができるでしょう。
次に紹介するのは、しばしば見落とされる「スキャナビリティ」というユーザビリティデザインの重要な要素を強化するために役立つ、UIデザインのベストプラクティスの例です。
スキャナビリティとは
Nielsen Norman GroupのUXの専門家たちは、「ユーザーはWebサイトにおいてどのようにコンテンツを読んでいるか」という疑問に答えるための調査を実施しましたが、その結果はシンプルでした。ユーザーは、コンテンツを読んでなどいないのです。
リサーチを行ったグループは、コンテンツをいちいち読んでいるのは初めてサイトを訪れたユーザーのわずか16%に過ぎないことを発見しました。残りの84%は、それをもっと詳しく読むかどうかを決めるために、タイトルや文章、イメージ、アニメーションなどのフックとなる要素をざっとみているだけなのです。
この現象は、デジタルなインターフェイスに限ったものではありません。たとえば、新聞に書いてある文字をすべて読んでいる人はめったにいないでしょう。デジタルの場合と同様に、タイトルやイメージなどをざっとみてから、時間をかける価値のあるコンテンツを決めているのです。
つまりスキャナビリティとは、ユーザーが読み取りやすいようにコンテンツを並べるアプローチなのです。画面上の価値のあるコンテンツを表示してユーザーを感動させるには、限られた短い時間しかないことがほとんどなので、Webでユーザーがどのようにコンテンツを読むかに合わせてインターフェイスを十分に最適化することが重要です。
デジタルプロダクトがWebサイトでもアプリでも、あるいはその他のUIであっても、スキャナビリティはユーザーフレンドリーなデザインをつくるためのもっとも重要な要素の一つなのです。
スキャナブルなインターフェイスのメリット
デジタルプロダクトがどれほどスキャナブルなのかを知るための理想的な方法は、ユーザーの観点からこれを観察し、次のような重要な問いに答えることです。
１. ページのコンテンツはユーザーの期待に沿っているか
２. ページで一番伝えたいメッセージはすぐに理解しやすいものになっているか
スキャナブルなインターフェイスをつくるのは手間がかかりますが、ユーザーを引き付けるUIデザインをつくることは、長期的にみればよい結果をもたらします。
Nielsen Norman Groupの研究によれば、スキャナビリティが最適化されたページは次のような点でより効果的になるということです。
- ユーザーのタスク完了までにかかる時間が短くなる
- そのコンテンツは求めていたものかどうかをユーザーが素早く判断できる
- ユーザーの記憶に間違いが少なくなる
- ページの構成に対するユーザーの理解度が向上する
- サイトの信頼性とコンテンツの質について、より好意的な評価を得られる
- 直帰率が下がる
- 再訪率が上がる
- SEOが改善される
Airbnbのランディングページは、ユーザーの需要を満たすメッセージを理解しやすくすることでスキャナブルなコンテンツの多くの利点を生かしています。
スキャニングパターンに影響するユーザーの傾向
コンテンツの見方は人によって異なります。しかし、研究を通して、はっきりと定義されたいくつかのアイトラッキングのパターンがあります。ユーザーが最初の数秒間でどのようにインターフェイスに反応するかを知ることは、デザイナーがコンテンツの優先順位を付け、重要な情報を一番目につく場所に配置し、効果的なビジュアルヒエラルキーを設計するのに役立ちます。
研究の結果、特徴的なアイトラッキングのパターンを示すヒートマップが明らかになりました。どのコンテンツエリアがもっともみられているかがわかります。（出典：Nielsen Norman Group）
Nielsen Norman Groupによれば、ユーザーのインターフェイスの読み取り方には７つのパターンがあるといいます。
- Fパターン：このパターンが発見されてから12年経ちますが、これはいまでももっとも一般的なスキャニングパターンです。これはモバイルインターフェイスにおいても同様です。ユーザーの目線は普段ものを読むときと同様に、まず水平方向に動き、その下にあるコンテンツに移動します。この動きはゆっくりと規則的に進むこともあれば、素早く動いてまだらなヒートマップを描くこともあります。
- Zパターン：このジグザクな動きは、情報の表示が均質で、ビジュアルヒエラルキーがあまりないWebページでよくみられます。
- レイヤーケーキパターン：ユーザーが求めている情報がページのどこにあるのか、もしくはみつかるかどうかを素早く判断するため、見出しと小見出しだけをざっとみるときはこのパターンに当てはまります。
- スポットパターン：クリエイティブな職種の人はこのパターンを取ることが多いです。テキストのかたまりはスキップし、特定の情報を探し出すために色や形、変則的なバランスなどの視覚的要素にざっと目を通します。
- マーキングパターン：ダンサーがくるくると回るときにバランスをとって１点に留まるように、ユーザーは画面のスクロール中に視線を１ヶ所に固定します。これはモバイルUXにおいて非常によくみられます。
- バイパスパターン：リストに含まれるテキストのうち複数行が同じワードから始まっている場合、ユーザーは意図的にその最初のワードを読み飛ばします。
- コミットメントパターン：めったにみられないパターンで、ユーザーがコンテンツに高い関心をもっており、すべてを読み取ろうというモチベーションがあるときにだけ発生します。
ユーザーのパターンは、主にWebページを訪れる動機に関係するでしょう。どのような情報を探しているのか、それをみつけるためにどれだけの時間を使う気があるのか、それをさらに素早く提供してくれるWebサイトが他にあるのか、といった条件によって決まります。
ユーザーリサーチとスキャニングパターンで価値を提供する
「user-centered design（ユーザー中心設計）」という言葉を生み出した認知科学の研究者であるDonald Norman博士は次のようなことを述べています。
機能的で、わかりやすく、便利なプロダクトをつくるだけでは不十分です。私たちは人々の生活に楽しさとワクワク、喜びと面白さ、そして美しさを提供するプロダクトをつくらなければなりません。
ユーザーリサーチは、ユーザー中心設計、そしてUIデザインのベストプラクティスの基盤となるものです。さらに、デジタルインターフェイスのスキャナビリティを向上させるためには、デザイナーはエンドユーザーについて理解する必要があります。エンドユーザーの視点を考慮してUIパターンがデザインされたとき、自然で直感的な体験が生まれるのです。
効果的な解決策は、抽象的なものからは生まれません。以下に続く例は、美しく、機能的で、長く使えるデジタルプロダクトの例です。いずれのデザインチームも、中心となるユーザーを定義し、アイトラッキングのパターンを活用して魅力的なUIをつくるためにコンテンツのレイアウトをデザインしています。
Instacartは、ユーザーリサーチとスポットパターンに基づいてレイアウトをデザインしました。
InstacartはUIデザインのパターンを通してユーザー中心設計を活用しています。サイトの主なユーザーは高齢者や視覚に問題を抱えている人々で構成されているので、アイテムはコントラストの強いグリッド上に並べられており、メインとなるCTAも明確に強調されています。このデザインはスポットパターンに基づいており、ヘビーユーザーにも対応しています。
YelpはFパターンに従って情報を表示しています。
Yelpは評判のよいレストランやお店、ナイトスポット、フードなどの情報をユーザーに提供しています。ユーザーは個人的な基準と徹底的なリサーチに従ってレビューを評価するので、Fパターンがもっとも最適なスキャニングパターンです。したがってYelpは、評価や写真、住所といった特定の要素を強調し、コンテンツを読み取りやすいように並べています。
Airbnbはマーキングパターンを採用し、読み取りやすいコンテンツをつくることで、ユーザーと明確なコミュニケーションをとっています。
Airbnbは世の中でもっとも愛されているアプリの一つであることは間違いなく、その理由の大部分は彼らのユーザーリサーチの結果によるものです。Airbnbのチームはアプリのユーザーが大抵モバイル端末を使ってアクセスすることを知っているからこそ、マーキングパターンに沿ってデザインしているのです。
画面いっぱいに広がる大きな物件写真を強調するため、すっきりしていて直感的なインターフェイスが設計されています。１画面に表示する写真を意図的に２枚までに制限することで、ユーザーが自分の時間を適切に費やし、そのリストが目を引くものかどうか確認できるのです。
Airbnbはスキャナビリティを強化するUIデザイン要素を配置するとき、ユーザーが使う端末を考慮しています。（出典：Airbnb）
デジタルプロダクトのスキャナビリティを改善するときに留意すべき事項の一つは、その画面がどのような端末でみられるのかを定義することです。
Airbnbのモバイル向けのプラットフォームには非常に多くのユーザーがアクセスします。ユーザーの親指の使い方を表したヒートマップをみればわかるように、Airbnbは「探す」「お気にいり」といった、もっとも頻繁に使われるUI要素を、ユーザーが画面をスクロールまたは読み取っている間でもアクセスしやすい位置に戦略的に配置しています。
良質なスキャナビリティのためのUIデザインのベストプラクティス
適切なビジュアルヒエラルキーを設定する
デジタルインターフェイスにおけるビジュアルヒエラルキーは、情報の重要度を伝えるためのUI要素の配置と見せ方を意味し、これによってユーザーは探している情報を素早く読み取ることができます。適切なビジュアルヒエラルキーを用いてレイアウトをデザインする際には、考慮すべき要素がいくつかあります。
- サイズ
- 色
- コントラスト
- 近接
- 整列
- ネガティブスペース（余白）
- 反復
デザイナーがUIのレイアウトをデザインする際にこれらのUIパターンを考えることで、調和が取れていて美しく、直感的に読み取りやすいレイアウトのプロダクトがつくり出されることでしょう。
Googleの検索結果ページは、スキャナビリティを向上させるためのビジュアルヒエラルキー要素がすべて使われています。色とサイズ、そしてコントラストによってタイトルは強調されています。各タイトル周りのネガティブスペースは、そのタイトルが先んじてユーザーの目に止まるような役割を果たしています。
ユーザーが気になるタイトルをみつけたとき、それが信憑性のあるものか調べるためにリンクをチェックするでしょう。そのリンクは色と近接のおかげで認識しやすい要素になっています。
次に、その検索結果を吟味するために、一貫した色、サイズ、近接しているコンテンツコピーを読むでしょう。これらの要素に加えて反復と整列も活用されているので、Googleの検索結果は全体的に読み取りやすくなっているのです。
ネガティブスペースを有効活用する
著名な音楽家であるClaude Debussyは、かつてこう言いました。
音楽とは音と音の間の空間である。
スキャナビリティについても同じことが言えます。すなわち、UI要素の間にあるネガティブスペースこそが、レイアウトデザインの成功のカギとなるのです。UI要素の周囲に適切な量のネガティブスペースをもつことで、要素自体に目線を集めることができます。
これによってコンテンツが強調され、レイアウトが乱雑にみえないようにするための余裕が生まれます。余裕のあるスペースが無いと、人間の脳は興味のある点を読み取りづらくなり、混乱しやすくなってしまうのです。
ネガティブスペースを使ったシンプルな段落のほうがより読みやすく、ネガティブスペースがほとんど無いとゴチャゴチャしていて混乱を招いてしまいます。（出典：UX Planet）
コンテンツを要約するためにサブタイトルを使う
ほとんどのユーザーは大量のテキストに対して拒否反応を示すものです。テキストの量が多いと、それがもし自分が求めている内容でなかったら時間の無駄になると思わせてしまうのです。
UIデザインのベストプラクティスには、この問題の解決策があります。長い文章の最初に簡単なサブタイトルを付けることで、ユーザーはそのトピックについてだいたい推測することができます。
サブタイトルを付けるときには、要点を外さないことが重要です。そのあとに続くコンテンツが伝える主なメッセージをシンプルに表しましょう。
箇条書きリストと番号付きリストを使う
人間の脳は非常に規則的なので、まずコンテンツを観察し、続いてそれを意味に基づいたグループにまとめます。したがって、ユーザーはテキストのパラグラフに要点をいくつも詰め込むよりも、箇条書きや番号付きのリストの方が理解しやすいのです。
リスト化することによって生まれるネガティブスペースのおかげでユーザーはこれを読み取りやすくなるので、必要な情報も探しやすくなります。テキスト内の２点以上の要点が互いに相似していて、それぞれが２文内で説明できるなら、それらはリスト化すべきです。Nielsen Norman Groupは箇条書きで整理されたデジタルコンテンツについて、さらに多くの知見を提供しています。
コンテンツを視覚化する
最近のデジタルユーザーは視覚的な表現に慣れていて、誰もがテキストの多いコンテンツにうまく対処できるわけではありません。たとえ理想的なスキャナビリティのためにUIデザインのコツをすべて押さえて、完璧な構成をしたとしてもです。
外部環境はつねに要因となります。ですから、テキストの多いレイアウト中和するために、情報的で魅力的な写真やグラフィックを使用することで、ユーザーは文章を読む疲れから一時的に解放されます。百聞は一見にしかずと言われるように、１枚の絵は1,000の言葉に匹敵するのです。
イラストや写真など、オリジナルのビジュアル要素はユーザーの目を惹き、全体的なスタイルのコンセプト設計に役立ちます。さらに、そうした要素はビジュアルヒエラルキーを向上させ、テキストを読みやすくすることもできます。
しかしながら、これは間違った使い方をすると逆効果になる危険性もあります。カギとなるアイデアをグラフィックに落とし込む前に、デザイナーは自分たちがデザインしようとしているコンテンツを完全に理解することが重要となります。
Appleはインターフェイスのビジュアルヒエラルキーとスキャナビリティを向上させるためにコンテンツの視覚化を使いこなしている非常に優れた例です。
CTAを適切に強調する
デジタル体験の大半は、ユーザーに特定のアクションを促すためのものです。CTAボタンは非常にシンプルにみえることが多いですが、実はユーザーがアクション（購入、カートへ追加、別のページへ移動など）を完了するのをサポートするために戦略的にデザインされているのです。
UIデザインのベストプラクティスでは、CTAをユーザーにとって直感的なものにするため、そのアクションを説明するコンテンツの近くにCTAを配置することを推奨しています。
CTAのバランスや色、位置が適切かどうかをテストするためのよい方法は、できあがったデザインを一旦グレースケールにしてみることです。その状態でもCTAがはっきりとみやすく、際立っているようなら、魅力的なUIにデザインされているということになります。
Uberは、十分な広さのネガティブスペースを使ってCTAをはっきりと際立たせることで、彼らの約束である「Tap a button, get a ride（ボタンをタップして、すぐに乗車）」を実行しています。
スキャナビリティの重要性
コンテンツの関連性、競合が提供している解決策、ビジネスロジックなど、UIのレイアウトデザインがユーザーに受け入れられるかどうかを決める要素は数多くあります。
Forbesによれば、コンテンツマーケティングにおいてもっとも見落とされている要素がスキャナビリティかもしれないということです。スキャナブルなコンテンツをつくることで、ちょっと立ち寄っただけの訪問者がヘビーユーザーに変わるのです。
スキャナブルなコンテンツは、エンドユーザーが使っている時間が価値のあるものであると証明し、レイアウトデザインをざっとみるだけでそのサイトのコアメッセージを理解するきっかけを与えます。
影響力のあるブロガーでジャーナリズムの教授であるKim Keller氏はデザイナーに対して次のように指摘しています。
あなたたちは、顧客になってほしい人々と会話を始めているのです。それは人間関係であり、時間をともに過ごさなければ関係性は築けません。彼らの時間を尊重し、価値のあるものにしましょう。
