Jakob Nielsenは、「How Long Do Users Stay on Web Pages?」の記事にて「ページごとの平均滞在時間は1分弱となっており、実際に訪問しているページのテキストの4分の1しか読む時間がない」と述べています。もちろん、サイトの性質や使われ方にもよりますが、私達が制作しているページのうちの75%はほとんどのユーザーに読まれていないことになります。あなたもブログ記事のイントロを読み、途中をざっと流し読みして、最後のまとめだけを読んだ経験はありませんか？
私達がサイトを閲覧する時の殆どは明確な目的を持っています。 必要とする情報以外のテキストをじっくり読むことはなく、自分が求めている情報を探すためにざっと斜め読みし、目当てとなる情報を探していることが殆どです。早急に答えを求めるユーザーにとって、あれもこれもと次々と情報を訴求するウェブサイトは、斜め読みされ、離脱されてしまい、ユーザーを効果的に誘導できていないのではないでしょうか。
一方で、効果的にユーザーを導き、成果を上げているウェブサイトも数多く存在します。 そのようなサイトを分析し、共通項となる原則を見つけ出し活用することができれば、読まれていなかった75%の領域までユーザーを導くことができるのではないでしょうか？それでは、ユーザーを効果的に導くためには、Webデザイナーは具体的にどのようなアプローチをすべきでしょうか。
1. ユーザーを考えさせない
ウェブサイトのデザインは、そのページがどんなページであるかを明確に説明している必要があります。 ページを見てすぐに、何をするためのページかが理解できることはユーザーの離脱を防ぐために非常に重要な要素となり、ページ見て疑問を抱かれてしまうようなサイトではそれ以上読み進められることはありません。ナビゲーションが直感的でない場合にも、ユーザーがサイトの構造を理解するのは難しく、同様に離脱の原因となります。自分の居場所がわかり、別のページに移動することが明確なリンクを設けることでこの問題を解消できるでしょう。
ネットショップ作成サービスのBASEの場合、ファーストビューに記載された「ネットショップの作成が、今までで一番簡単に。」というキャッチコピーが、そのままサイトで出来ることを明確に伝えています。さらに、登録のためのフォームを並列で配置することで、ユーザーに次のアクションを提示し、ECサイトの運営を検討するユーザーを登録へ促すことが出来ていると言えます。ウェブサイトが提供できるメリットがユーザーに理解されない限り、そのサイトが使われることはありません。
2. ユーザーを強制しない
あなたが制作しているサービスやツールは、ユーザーが最小限のアクションで試すことができるものになっているでしょうか？ 新規のユーザーは、自分が見つけたサービスやツールを体験しようとする気持ちはありますが、1つのアカウントを作るために延々と続く長いフォームを埋めてまで利用するということは稀です。また、一度アカウント作成に負担に感じたサービスはそれ以降使われることはないでしょう。そのため、ユーザーがアカウントを作成する際に必要とされないような情報まで一度に取得しようとすることは妥当ではなく、最小限の項目で登録を完了させることが重要になってきます。
Ruby on RailsやBasecampの開発元として知られる37signalsのRyan Singerは「ユーザーは、彼らが実際にサービスやツールを体験し、そのサービスを自分が求めていると感じる場合、必要とされる情報を提供してくれるだろう。彼らは自分が得たことに対しリターンをする考えを持っている」と述べています。実際、Basecampのトライアルのために必要とされる情報は自身の名前とログインのためのID/PWのみとなっており、ユーザーが気軽にサービスを体験できる配慮がされています。
不要な必須項目を削り、ユーザーに登録までのハードルを感じさせないフローになっているか確認しましょう。
3. ユーザーの興味を惹くものを明確化する
サイトを構成する要素にはいくつかの側面があります。画像はテキストより目を引きやすく、太字がプレーンテキストより目立つように、それぞれの要素が固有の誘目性を持っています。どんなビジュアル要素が、ユーザーの興味に影響を与えられるのかを知ることで、ページのゴールを達成するデザインに近づけることができるでしょう。例えば、人間の目は、ページ上で動いている要素を瞬時に認識することができます。現在では、映像や動きのあるバナー広告は非常に目に付くため迷惑がられていますが、マーケティングの観点からすると、それらはユーザーの関心を引くことを達成していると言えるでしょう。
アスリートのためのメガネを開発したパリミキのスペシャルサイトでは、この原理を利用しています。中央に向かって放射状にブラーがかかった写真によって、視線は自ずと中央のエリアに向けられます。エリア中央の再生ボタンを押すことで、製品のベネフィットを伝える動画が再生され、ユーザーは閲覧して1分もしないうちにこの製品の魅力を理解することが可能になります。
特定のエリアにユーザーの注意を誘導するためにビジュアル要素を活用する事は、あなたのサイトを閲覧するユーザーを点AからBに移動させることをサポートすることができるでしょう。
4. ぱっと見て機能がわかる
ひと目見ただけで明確に機能が分かる構造やデザインは非常にユーザーフレンドリーです。
ベビー用品を扱うグレコのサイトでは、ページ上部のグローバルナビゲーションと、ページ下部の製品カテゴリへのナビゲーションという、ひと目見ただけで明確に9つのナビゲーションと2つの入力フィールドがあることがわかります。この、見ただけでそれが機能を持ったものだとユーザーに理解されることがUI設計の基本原則となります。これらのUIがひと目見て機能が理解でき、操作するのが快適だと感じさせることが良いユーザー体験へ繋がります。
5. 効果的なライティングをする
ウェブは印刷とは違い、ユーザーの好みやブランドが形成すべき人格にあわせ文体を変える必要があります。また、広告的なテキストは読まれることはなく、画像や太字や斜体でキーワードを指定していない長い段落はスキップされ、誇張された内容は無視されます。さらに、気取った、または巧妙な言い回しや会社固有の言葉、馴染みのない技術的な言葉は避けられる傾向にあります。もし、あなたがサービスを説明し、ユーザーにアカウントを作成させたい場合は、「我々のサービスを知る」よりも「今すぐはじめる」のほうが優れています。
開発者向けホスティングサービスのSQALEでは、これらの要点を踏まえたライティングがされています。気取った言葉や誇張された表現もなく、代わりに開発者がまず知りたい特徴、手間、運用にかかる費用が端的に書かれています。また、実際に始めるために押すべきボタンも明確にされています。
効果的なライティングのための最適な方法としては、
- 短く、簡潔なフレーズを使うこと（できるだけ早く本題に入る）
- 斜め読み可能なレイアウトを使う（コンテンツを分類し、複数の見出しレベルを使用し、均一な段落ではなくポイントとなる画像や箇条書きを使う）
- 飾らなく、客観的な言葉であること（広告的な印象や説得を含む言葉は広告のように思われます）
を心がけるべきでしょう。
6. 簡潔にする
サイトデザインの第１の目標であるべき原則として、Keep It Simple（KIS）というものがあります。ユーザーがサイトのデザインそのものを楽しむということはめったにありません。さらに、ほとんどの場合、デザインがあったとしても、ユーザーは自分が必要とする情報を探してサイトを訪れています。余計な要素、装飾などでページを複雑にする代わりに、簡潔になるよう努めましょう。
シンプルさは構造の把握にとても役立ちます。上記で紹介したこれらのサイトはどちらも日本語ではなく、意味は読み取れませんが、直感的にナビゲーションやヘッダー、コンテンツエリアやフッターを認識することができるでしょう。簡潔さを保つには、不要なコンテンツを持たず、詰め込みすぎずにユーザーに選択肢を提示できることが必要です。
7. 空白を恐れない
行間や文字間、要素間などに適度な空白（ホワイトスペース）を設けることにより、ユーザーが読む際の負担を減らすことに繋がります。実際の所、前述の要因だけを大きく評価することは難しく、空白を設ける事は、ユーザーが読む際の負担を減らすのに役立つ反面、一度に見える情報量を制限することにもなります。
しかし、複雑な情報は、流し読み、分析する作業が困難になります。初めてページを見るユーザーは、デザインされたレイアウトに対し、ページを流し読みして、コンテンツ領域を区分して情報のグループを把握しようとします。そこで、2つの要素間のスペースを、線または空白で区切ることでグループの把握をサポートできますが、空白で区切ることにより、構造が複雑になるのを防ぐことができます。更に、インデントなどで視覚的に階層構造を持たせることで、コンテンツ同士の関係性を認識しやすくすることができます。
Appleのウェブサイトはホワイトスペースを効果的に用いている優れた例です。テキストブロックの周囲にゆったりと設けられたスペースと、メリハリのある文字サイズがコンテンツの構造を把握しやすくし、斜め読み可能なレイアウトを実現しています。
8. ビジュアルコミュニケーションを効果的に使う
ビジュアルコミュニケーションとは、メッセージまたは文脈を伝えるために使われるグラフィカルな要素の全てを指しており、主にレイアウト（フォーマット、構成、グリッド）、タイポグラフィ（書体の選定、文字の扱い）、色とテクスチャ、アニメーション等が該当します。Aaron Marcusは論文で、効果的なビジュアルコミュニケーションに必要とされる3原則について述べています。
ビジュアルコミュニケーションを整理する
明確で一貫した構造の考え方をユーザーに提供します。画面のレイアウト、情報の関係性、導線は、整理するために重要な要素で、同じ規則やルールは、全ての要素に適用されるべきです。
ビジュアルコミュニケーションを効率よく利用する
- 効率よく利用するために、4つの考慮すべき点があります：シンプルさ、明快さ、独自性、強調
- シンプルさ：コミュニケーションのための最も重要な要素だけが含まれているか
- 明快さ：意味があいまいなコンポーネントはないか
- コントラスト：重要な機能は他と区別できる要素になっているか
- 強調：最も重要な要素は簡単に認識できるか、一番目立っているか
ビジュアルコミュニケーションを伝える
UIが正常に機能するために、見やすさ、読みやすさ、タイポグラフィ、シンボル、multiple views、色や質感のバランスを整える必要があります。場合に寄りますが、使用する書体は3種類以内、サイズのバリエーションは3サイズ、1行に18単語、50〜80文字のテキストにしましょう。
9. 慣習を活用する
昔からの慣習に沿ったからといってつまらないサイトになることはありません。実際には、そのルールがあることで、サイト設計に関する動作、学習コストを減らすことに貢献することができます。例えば全てのサイトで、RSSフィードのアイコンが全く別のものだったら、わかりにくく、フィード登録の際の手間が嵩んでしまうことが予測できます。
私達の普段の行動と同じように、データを整理したり、ページを見たりするという行動は慣習化されるものです。慣習に基づいたルールを利用することで、ユーザーの信頼、信用を獲得でき、サイトの信頼性を証明することができます。
全く違う言語のサイトだとしても、UIのルールが適用されている場合、ユーザーは、言葉が理解できないとしても、その要素が何の機能を持っているのかを想像することができ、目的達成までのステップを短くすることができます。もちろん、既存の設計を覆せるような革新的なアイデアがある場合はこの限りではありませんが、そうでなければ、慣習に基づいたルールに則ることでサイトの信頼性を向上させましょう。
10. 早期に、そして頻繁にテストする
ユーザーテストと聞くと専門の検証会社が実施する敷居の高いものを想像するかもしれませんが、ここでお伝えするテストの原理は、高度な機材を必要とせずに実施することが可能です。ワイヤーフレームを被験者に渡すか、画面上で表示してもらい、行なって欲しい事を伝え、達成できるかを見ることで、意図したアクションを行なっているかを知ることができます。
また、デザインが意図したバーソナリティを感じさせるものになっているかを検証するためにもテストは有効です。「クラシック／モダン」「慎重／積極的」「簡潔／複雑」「女性的／男性的」のような対となる印象のキーワードを設定し、制作しているデザインがどのような印象を与えたいかを予め決めておきます。その上で、テスト対象の方にデザインを見てもらい、自分が感じた印象が前述のキーワードのどちらに近いかを、最もあてはまる／ややあてはまる／どちらとも言えないのような段階を付けた表をもとにチェックをつけてもらうことで、意図した印象を感じさせることが出来ているかの検証をすることが可能です。
テストは常に有益な結果をもたらします。良かった時はあなたの洞察が証明されたこととなり、悪かったとしたら構造上の問題を理解することができます。1人のテストをすることは、テストをしなかったプロジェクトより100%良い物になり、プロジェクト早期に1人のテストをすることは、プロジェクト後期に50人のテストを行うことと同じくらいの効果があります。可能な限り早い段階で実施するべきでしょう。早期に実施することで、実装フェーズでのロスを減らすことが出来、最終的なアウトプット品質の向上に繋がります。
考慮する点として、テストの被験者となるメンバーは、プロジェクトに携わっていない人である必要があります。プロジェクトメンバーは数週間そのサイトに従事しており、実際にどのように動くかや、全体の構造も知っていて、新鮮な気持ちで接することは不可能となり、有効なテストができません。プロジェクトの背景や事情を知らない第三者に行なってもらうことが理想でしょう。
Webデザイナーになりたての時期は、ビジュアルの作り込みや技術を少しでも早く習得してスキルアップを図りたいと感じるかもしれません。しかし、見栄えだけがいいデザインではユーザーを効果的に導くことができず、せっかく作りこんだビジュアルも、見られない、機能しない無駄なものになってしまいます。そのようなことを避けるために、上記のような原則を念頭に置いておくことで、デザインをする際の指針ができ、より説得力のあるアウトプットができるのではないでしょうか。
また、10の原則については全て考慮すればいいというわけではなく、状況に応じて判断していく必要があると思います。デザインを制作していく中で、どの原則があてはまり、どのように改善することができるかを判断し、クオリティを上げていくことで、自分のデザインについてロジカルに判断をすることができるようになり、Webデザイナーとしての能力も向上させることに繋がります。
すぐに実践できるプロジェクトが無いのであれば、普段使っているサイトで上記の原則に当てはまるものがないか探してみましょう。それらのサイトが、原則をどのように活用しているのか考えてみたり、今回の原則を使うことで改善できる点を探したり、今すぐ取り組める事から実践してみることが重要です。