KAWANO's PukiWiki Plus! - Lecture/JouhouC2007/14th/usability のバックアップ(No.1)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/JouhouC2007/14th/usability へ行く。
  • 1 (2007-07-09 (月) 14:01:46)

ユーザビリティとは

ユーザビリティとは

ユーザビリティ (Useability)とは、 「使い勝手」のことです。 Webサイト（ページ）の「使いやすさ」・「わかりやすさ」のための、 ひとつの考え方です。

例えば、ショッピングサイトで、 商品を購入するために次のような操作をしなくてはならないのなら、 商品を買う気になりますか？

• どのような商品があるか、メニューがない（わかりにくい）
• ボタンを4回以上クリックしないと注文できない
• 何度情報を入力しても、エラーになって、理由が表示されない

Webのユーザビリティは、 ショッピングサイトに限らず、 サイトやページの訪問者が快適に自分の目的を果たすことができるようにした上で、 「発信者の情報を的確にわかりやすく伝達する」 ための、 情報のデザイン上、 重要な考え方になります。

ユーザビリティの定義

• 学習しやすさ
  • 簡単に学習できる。
  • それを使ってすぐに作業をはじめられる。
• 効率性
  • 一度学習すれば、あとは効率よく作業できる。
• 記憶しやすさ
  • しばらく使っていなくても、覚えなおさなくても使える。
  • 覚えやすい。
• エラー発生率
  • システムがエラーを起こしにくい。
  • ユーザがエラーを起こしにくい。
  • エラーが起こっても、簡単に回復できる。
• 主観的満足度
  • ユーザが個人的に満足できる。
  • 楽しく利用できる。

参考文献＆リンク

• ヤコブ・ニールセン「ユーザビリティエンジニアリング原論」、 東京電機大学出版局、1999年
• ヤコブ・ニールセン「ウェブ・ユーザビリティ」、MdN、2000年
• ユーザビリティ（Wikipedia）
• ユーザビリティとは（U-Site）

ユーザビリティの例

ユーザビリティを高めるためのポイントには、 さまざまなものが数多くあります。 ここでは、その一部ですが、 実際のサイトを例にして紹介します。

なお、次にあげるものは、 ここまでの授業の中ですでに登場しているユーザビリティのポイントです。

• title要素で、ページの内容を表すタイトルを設定する
• ページの最後に、著作権表示、更新日、連絡先を明記する

(1) リキッドレイアウト

「リキッドレイアウト」とは、 ページの横幅を固定しないで、 ウィンドウの横幅に合わせて自動的に伸縮するレイアウトのことです。

Webページには、さまざまなパソコン環境の人が訪れます。 最近のパソコンの画面解像度は、1024×768ピクセル以上のものがほどんどですが、 以前のパソコンでは800×600ピクセル以下の解像度のものもあります。

そこで、「800×600ピクセルの解像度」を基準にして、 リキッドレイアウトを使って、 レイアウトをします。 具体的には、次のようにしましょう。

• 水平線やテーブルの幅は、パーセンテージ（%）で指定
• CSSで、ブロックの幅は、パーセンテージ（%）で指定

(2) 統一したレイアウト

メニューなどのクリックする場所、 見出しや文章のレイアウトなどが、 同じサイト内のページごとに違っていると、 操作しづらくて見づらくはありませんか？

同じサイト内のページでは、 レイアウトやメニューはもちろん、デザインも統一しましょう。 そうすれば、 訪問した人が操作に迷ったりすることなく、 直感的にあなたのサイトの中を探検することができます。

例えば、ショッピングサイトAmazonは、 商品のジャンルが変わっても、レイアウトが統一されています。

• Amazon.co.jp（和書）
• Amazon.co.jp（DVD/ビデオ）

(3) パンくずリスト

検索サイトが発達した現在では、 サイトのトップページからではなく、 検索サイトを使っていきなりサイトの中の特定のページに訪問することができます。

複雑な構成のサイトでは、 訪問した人が「自分がサイトのどこにいるのか？」が わかるための手段が必要になります。
次のような、 トップページからの位置がわかるようなリンクを、 ページの上部に表示させておくと、 トップページからの現在位置がわかって便利です。 このよなリストを「パンくずリスト」といいます。

• Yahoo! JAPANの「兵庫大学」のカテゴリ

  #ref(): File not found: "id00.png" at page "Lecture/JouhouC2007/14th/usability"

「>」で区切られた文字は、すべてリンクです。 「>」以外に「/」や「|」が使われる場合もあります。

ちなみに、 グリム童話「ヘンゼルとグレーテル」で ヘンゼルが森の中で迷子にならないように、 パンくずを落として目印にしておいた、 という話が名前の由来です。

(4) 機種依存文字を使わない

携帯電話からパソコンにメールを送るときに、 絵文字を使ったメールの、絵文字の部分がパソコンで表示されなかった、 という経験はありませんか？

機種依存文字とは、メーカーが独自に設定した文字のことです。 このような文字は、同じ種類のパソコンやOS上では正しく表示されますが、 機種やOSが異なると表示されないか、違う文字が表示されてしまいます。

どのような文字が機種依存文字なのかは、 次のサイトを参考にしてください。

• 機種依存文字劇場: http://apex.wind.co.jp/tetsuro/izonmoji/

次へ進んでください。