より良いウェブデザイナーになるための、9つの情報デザインTips

少し前の記事だけど、PSDTUTSにあった9 Information Design Tips to Make You a Better Web Designerをまとめてみる(記事が長いので、全文の和訳はあきらめた)。

この記事は、The 3 Components of Web Design Seriesでいわれている次の3つの要素の内、情報デザインについて書かれた記事。

ウェブデザインの3つの要素

  • インターフェイスデザイン (ユーザがそのサイトとどのようにやりとりするか)
  • 美的デザイン (サイトのビジュアル的なルック & フィール)
  • 情報デザイン (そのサイトの情報がどのように整理され、提供されるか)

その他、関連記事は次の通り。

より良いウェブデザイナーになるための、9つの情報デザインTips

1. 秩序を持たせる

1) サイトのコンテンツ、プロセスおよび目的を理解する

コンテンツとは、サイトで提供する、コピー、画像、ビデオなどのすべてのコンテンツ。プロセスとはユーザがサイトとやりとりを行い、完了させるタスクとワークフロー。目的は、クライアントとユーザのゴール。

2) 優先度、およびユーザの導線

どのページが最も重要か。ユーザが目的を達成するためには、どのような導線を辿るのか。

3) 情報の整理

情報を整理する際、単純にカテゴリー分けするのではなく、提供されたコンテンツをアレンジする(合わせたり、図式化したり)ことも必要となる。サイトマップ、またはどのように階層化するのかを考える。

2. 型にとらわれない

型にとらわれない視点を持つには、他の誰か(ユーザやプログラマなど)に意見を聞いてみると良い。自分とは全く別の視点や考え方を与えてくれる。

3. 構成のバランスを保つ

サイト構成の広さと深さ(レイヤー)のバランス。それぞれ4-8の間に収める。トップレベルの項目が8つ、それぞれが8つのサブカテゴリーをもち、サブかテゴイリーが8つの子カテゴリーを持つ場合、全部で512ページになる。

深い階層に重要なコンテンツがある場合は、通常のナビゲーション以外からもアクセスできるようなリンクを追加することで解決できるケースもある。

4. 目を通す、ざっと読む、読み飛ばすためのデザイン

重要なテキストは、他のテキストに埋もれないように目立たせる。見出しや箇条書き、図などを使って分割する。ユーザがどのようにそのサイトを使うか考え、ユーザを手助けするようにデザインする。

5. 読みたいと思わせるテキストのデザイン

小さすぎるフォントや、背景に対してコントラストの低い文字色、暗い背景に明るい色の文字などを避ける。タイトル、見出し、リード文(本文のサマリー)などを使って、ユーザの目線を導くようにデザインする。

6. ページ間、およびページ内でユーザを導く

ユーザが簡単に目的を達成できるよう、複数のページ間の移動、および1ページ内でどのように進めば良いかを、ビジュアルやリンクを使って導いていく。

7. 複雑にしすぎない。

シンプルに。デザインを複雑にしすぎてしまう1つの例としては、ボタンやユーザのアクションなどに余計な言葉を使ってしまうことがある。

8. 情報のビジュアル化

ビジュアルはテキストを分割するだけではなく、記憶に残りやすくし、ページを生き生きとさせる。情報のビジュアル化について書かれた、information visualization, diagrams and what the author calls infographicsという記事は一見の価値あり。

9. 情報デザインを分析する

情報デザインは、1回で正しいものを作るのが難しいものの1つなので、サイトを構築した後に、ユーザにどのように見られているか、ユーザがサイト上でどのように行動するかを分析する必要がある。

Google Analyticsはこの分析を行うのにとても良いツールで、これを使ってユーザがサイト上でどのように行動するか、何%のユーザがどのステップで離脱していったか、などを知ることができる(他にはユーザが検索したキーワードから、どういう情報を求めてサイトに訪れたのかなどが分かる)。

Advertisements
より良いウェブデザイナーになるための、9つの情報デザインTips