2010年01月18日

ユーザを混乱させない表組みのコツ

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 
顔写真
ユーザビリティコンサルタント
藪 義郎

ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。

ケーススタディ  あるイベントの申込サイトでは、「開催スケジュール」というページでイベントの開催日程表を掲載していました(表1参照)。皆さんならこの日程表をどのように改善するでしょうか?

イベント開催日程表(改善前)

表1はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。

同種の情報をユーザは区別できない

表1の問題点として、
  1. 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい
  2. 列数が多いために、セル内に折り返しが発生し、読みにくい
ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消えてしまい、各日付が何を意味するのかユーザは分からなくなってしまうからです。

ユーザが見たい情報を強調した表組みにする

これらの問題点を踏まえて、表1を改善してみます(表2参照)。

イベント開催日程表(改善案)

改善案のポイントは次の2点です。

  1. ユーザが一番見たい情報を強調する
    • ユーザがこのページで一番見たい情報は「開催日」であるため、「開催日」とそれ以外の情報を区別
    • 「開催日」を一番左の列に置き、フォントサイズも大きくする

  2. ユーザにとっての補足情報は「備考」にまとめ、表の列数を削減
    • 補足情報を1列にまとめた上で、ユーザが各日付の意味を分かるように、セル内で【申込期間】などのキャプションを付ける

改善案では、開催スケジュールを見に来たユーザが下にスクロールしても、左列の日付が何を意味するのか分からず混乱することはなくなります。

表組みは、情報を整理して見せる際に一覧性が担保できるというメリットがあります。しかし、項目数・同種の情報が多い場合には、安易に表組みを使うとユーザの混乱を引き起こす可能性があります。そういった場合には、ユーザが見たい(もしくは見せたい)情報と、その他の情報とを区別し、強弱を付けた表組みをする必要があります。

情報を整理する際は、ユーザがどの情報を求めているのかを考慮し、きちんと強弱を付けることが重要です。

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

<< 診断ツールにおける選択肢の作り方 | トップ | わかりにくい1クリックよりも、わかりやすい2クリック >>



AI搭載 モーメント分析クラウド「USERGRAM(ユーザグラム)」