memo.xight.org

日々のメモ

カテゴリ : Usability

1ページ目 / 全1ページ

ユーザビリティに関する10の発見とガイドライン

Posted on | Tagged :

Summary

Smashing Magazineによる、ウェブサイトのユーザビリティに関するまとめ

1. フォームのラベルは入力項目の上に配置するのがベスト。
2. ユーザは、人物の顔、または顔が向いている方に注目する。
3. デザインの品質は信頼性の指標になる。
4. 今時のユーザの大半はスクロールをする。
5. リンクに最適な色は「青」である
6. 検索語を入力するフィールドの理想的な幅は27文字である。
7. 適切なスペースはコンテンツを読みやすくする。
8. 効果的にユーザテストを行うためには、大規模にする必要はない。
9. 有益な製品のページはサイトのブランド向上に繋がる。
10. 大抵のユーザは広告に目が行かない。

Bonus: Findings From Our Case-Studies

Smashing Magazine - 2009-08-20 - Typographic Design Patterns and Best Practices より
・行の高さ (Line height) ÷ フォントサイズ (body copy font size) = 1.48
・行の長さ (Line length) ÷ 行の高さ (line height) = 27.8
・段落の幅 (Space between paragraphs) ÷ 行の高さ (line height) = 0.754
・1行あたりの最適な文字数は 55～75文字

Reference

Smashing Magazine - 2009-09-24 - 10 Useful Usability Findings and Guidelines
http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/

Smashing Magazine - 2009-08-20 - Typographic Design Patterns and Best Practices
http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/

@IT連載 Webアプリケーションのユーザーインターフェイス

Posted on | Tagged :

Reference

@IT - リッチクライアント - 連載 - 第1回 ユーザーにとって “インターフェイス”が製品そのもの
http://www.atmarkit.co.jp/fwcr/rensai/usability01/01.html
@IT - リッチクライアント - 連載 - 第2回 ユーザーが選びやすいフォームのカタチを考えよう
http://www.atmarkit.co.jp/fwcr/rensai/usability02/01.html
@IT - リッチクライアント - 連載 - 第3回 UCD=利用者中心設計のプロセスとは?
http://www.atmarkit.co.jp/fwcr/rensai/usability03/01.html
@IT - リッチクライアント - 連載 - 第4回 お金を下ろせないATMの画面デザインを考える
http://www.atmarkit.co.jp/fwcr/rensai/usability04/01.html
@IT - リッチクライアント - 連載 - 第5回 入力情報を預かる責任を果たせる画面デザインとは?
http://www.atmarkit.co.jp/fwcr/rensai/usability05/01.html
@IT - リッチクライアント - 連載 - 第6回 「戻る」で入力データが消えてしまうフォームはいらない
http://www.atmarkit.co.jp/fwcr/rensai/usability06/01.html

暗黙のインターネットルール

Posted on | Tagged :

Summary

  以下の「暗黙のインターネットルール」を盲信することの危険性について．

暗黙のルールその1：疑わしいときは「ここをクリック」リンクを貼る
暗黙のルールその2：「詳細はこちら」リンクを使う
暗黙のルールその3：「さらに読もう」「続きを読もう」「次は」といったあいまいなハイパーリンクをできるだけ多く使う
暗黙のルールその4：検索エンジンのために書く
暗黙のルールその5：オンラインでは短いコピーがいいのか。 それともオンラインでは長いコピーがよいのか


Reference

  Japan.internet.com - Webマーケティング - 2005-07-08 - 暗黙のインターネットルール
  http://japan.internet.com/wmnews/20050708/6.html

via

  たつをのChangeLog - 2005-07-11
  http://chalow.net/2005-07-11-2.html

accesskey

Posted on | Tagged : ,

Summary

  accesskey を利用したアクセシビリティの向上．
  前後のエントリへの移動，プレゼンテーションへの応用．

Reference

  Going My Way - 2005-03-05 - 前後のエントリーに簡単に移動できる用accesskeyを設定
  http://kengo.preston-net.com/archives/001819.shtml
  Going My Way - 2005-01-31 - プレゼンテーションで使えるHTML+accesskey
  http://kengo.preston-net.com/archives/001767.shtml
  Stopdesign - Presentations - Web Essentials 04 - Pushing Your Limits (and other secrets of designing with CSS)
  http://stopdesign.com/present/2004/sydney/limits/

Jakob Nielsen 博士の Alertbox

Posted on | Tagged : ,

ユーザビリティテスト

  5ユーザでテストすれば十分な理由

リンク関連

  リンクを視覚化するためのガイドライン
  訪問済みリンクの色は変えるべし
  直リンクのすすめ
  リンク切れとの戦い
  リンクタイトルは行き先が予想できるものに

Reference

  Usability.gr.jp -Jakob Nielsen 博士の Alertbox
  http://www.usability.gr.jp/alertbox/
  useit.com - Jakob Nielsen's Website
  http://www.useit.com/jakob/

アクセスしやすいWebページ

Posted on | Tagged : ,

マウスクリックに反応するページ上の全テキスト領域に対してAタグのみを使用する

  ・キーボード操作のみでクリックに反応する領域にナビゲート可能．
  ・Screen Readersプログラムにも情報提供可能．
  ・アンカー上にマウスカーソルが移動すると，カーソル形状が"手の形"に変化する．

常に title属性 に値を割り当てる

  ・テキスト情報を持たない要素に追加情報を指定できる．
  ・<area>タグ,<bgsound>タグなどで有効．
<bgsound src="example.mid" title="Example Song" />


CSS Positioningを使う場合は必ず "em" 単位で座標を指定する

  ・ユーザがフォントサイズを変更した場合に，emのサイズもフォントサイズに応じて変更される．
  ・標準のフォントサイズでは，1em = 10ピクセル とほぼ同じ．

Reference

  MSDN Japan - MSDN Library - Dynamic HTMLのアクセシビリティ
  http://www.microsoft.com/japan/msdn/library/ja/jpisdk/dhtml/accessibility/accessibility.asp

ラジオボタンを押しやすくする

Posted on | Tagged : ,

Summary

  ラジオボタンの横のテキストをクリックすることで，対応するラジオボタンを選択できるようにする
  ラジオボタンが選択しやすくなる．

Example

<form>
	<input type="text" name="q" size="50">
	<input type="submit" name="sbmt" value="検索"><br />
	<input type="radio" id="splace1" name="searchplace" value="1">
	<label for="splace1">このサイトの中を検索</label>
	<input type="radio" id="splace2" name="searchplace" value="2">
	<label for="splace2">web全体を検索する</label><br />
</form>

キモ

  <input>の id属性と <label>のfor属性を同一の値にする

Reference

  All About Japan - HTML・XML - ラジオボタンの命中率を格段にUP
  http://allabout.co.jp/career/html/closeup/CU20031102A/