Archive for the Category » 規約 «

変更が保存されていない場合に確認ダイアログを出す

木曜日, 11 月 20th, 2008 | Author: sibsiv |

(5)

(0)

(1)

(0) Total: 6

SNSやブログで力作の日記を書いて、いざ投稿しようと思ったら間違って×ボタンを押して閉じてしまったり、リンクをクリックして別ページに遷移してしまって、せっかく書いた内容がパーになってしまったというような経験は無いでしょうか？

昔「フォームにリセットボタンは必要か」でも書きましたが、自分の行った作業が無駄になってしまうと多かれ少なかれフラストレーションが溜まります。毎日更新していた日記でも、「もう一度書き直す元気が無いし、また明日書こう」といって一旦間を空けてしまうと、それからずっと書かなくなってしまったりするかもしれません。

ウェブサイトをサービスとして提供する場合、そのような「利用を止められてしまうきっかけ」は出来るだけ少ないに越したことはありません。

そこで、重要なページの場合には、変更が保存されていない状態でウインドウを閉じたり、ページ遷移しようとした場合に確認ダイアログを出して、保存しなくて良いか確認してあげるようにしましょう。

(Firefox3の場合のダイアログの例)

このようなウインドウを表示するためには、JavaScriptの"onBeforeUnload"イベントを利用します。

more…

Category: 規約 | Leave a Comment

エラーメッセージの表示位置に注意

金曜日, 10 月 17th, 2008 | Author: sibsiv |

(3)

(0)

(0) Total: 3

入力エリアを用意しユーザーに入力してもらう場合、入力チェックが必須になるので、大抵の場合にはエラーメッセージが必要です。

エラーメッセージはメッセージの文言も重要ですが、表示する位置もよく考える必要があります。

以下はYahoo!の例ですが、一般的にエラーの対象となったエリアとエラーメッセージの表示位置が近いほうが、ユーザにとってより分かりやすく、修正しやすいです。

しかし、ブログのコメントのように、ページの先頭に情報がたくさんあり、下のほうにフォームがあるような画面では注意が必要です。

more…

Category: 規約 | Leave a Comment

セレクトボックスの選択肢には「選択してください」を用意する

火曜日, 9 月 30th, 2008 | Author: sibsiv |

(2)

(0)

(0) Total: 2

フォーム入力の際、必須入力の項目が未入力であった場合には「○○を入力してください」などのメッセージを出し、入力するまで先に進めないようにすることが一般的です。

これをセレクトボックスに当てはめると、セレクトボックスは必ず１つの選択肢を選択してしまうので、「何も選択していない」ことを表す選択肢を選択している場合にはメッセージを出すということになります。

この、何も選択していないことを表す選択肢の文言はサイトによってばらばらで、空白だったり、「未選択」「選択してください」というような文言が使われます。

例えば、利用者アンケートの場合には以下のような選択肢になります。

・選択してください←デフォルトで選択されている項目

・使いやすい

・どちらでもない

・使いにくい

ここで、「ユーザーは作業中のエラーを嫌う」ということを思い出し、デフォルトで何か一つ有効な選択肢を選択しておくようにしたら良いのではないかと考えるとどうでしょう。

・使いやすい←デフォルトで選択されている項目

・どちらでもない

・使いにくい

このようにしてしまうと、デフォルトのまま登録して「使いやすい」という回答をする人が多くなり、本当の印象とは別の回答をされてしまう可能性が増えてしまいます。

more…

Category: 規約 | Leave a Comment

検索結果ページにも検索条件を表示しておく

金曜日, 8 月 29th, 2008 | Author: sibsiv |

(0)

(0) Total: 0

今回は検索画面で検索条件を指定し、検索結果画面で結果を表示するという場合に気をつけるべき点を挙げます。

1.検索結果画面にも検索条件を表示する

まず、検索画面で「ウェブユーザビリティ.JP」と入力し、検索ボタンを押します。すると、該当する検索結果が一覧で表示されます。このようなときに、検索結果画面に検索結果だけを出してしまうと、どのような条件で検索したのか分からなくなってしまいます。

検索結果ページには、その検索結果の前提となる検索条件を表示してあげるようにしましょう。

more…

Category: 規約 | Leave a Comment

ラジオボタンやチェックボックスにはlabelをつける

木曜日, 8 月 28th, 2008 | Author: sibsiv |

(5)

(0)

(0) Total: 5

一般的にラジオボタンやチェックボックスは、それを選択することが何を意味するのかを表す文字列（ラベル）と共に用いられます。

そして、ラジオボタンやチェックボックスはサイズが小さくクリックしづらいため、WindowsなどOSレベルでは、ラベルをクリックした時もラジオボタンやチェックボックスをクリックしたのと同様の動作が起こるようになっています。

この仕組みはユーザビリティという意味でもアクセシビリティという意味でも有効なので、積極的に利用すると良いです。

more…

Category: 規約 | Leave a Comment

ラジオボタンはデフォルトで1つ選択しておく

火曜日, 8 月 26th, 2008 | Author: sibsiv |

(4)

(0)

(1) Total: 5

ラジオボタン（<input type="radio">）は複数の選択肢の中から1つを選択するための入力コントロールです。したがって、必ず1つ選択されている状態が正しく、RFCでもそのように定義されています。

At all times, exactly one of the radio buttons in a set is checked. If none of the <INPUT> elements of a set of radio buttons specifies `CHECKED’, then the user agent must check the first radio button of the set initially.

集合中のラジオ・ボタンは、いつも丁度1つがチェックされます。ラジオ・ボタンの集合の input 要素のどれも checked が指定されていなければ、利用者エージェントは初期状態として集合の最初のラジオ・ボタンをチェックしなければなりません。

RFC1866 / 8.1.2.4. Radio Button: INPUT TYPE=RADIO

しかし、現在のブラウザの実装では、html上でcheckedを記述していない場合に、どれも選択されていないという状態が起こり得てしまいます。

したがって、実装時に意識して一番最初の選択肢（一番左または一番上）にcheckedをつけておくようにしましょう。

また、選択しないという選択を許すために、ラジオボタンが何も選択されていない状態を利用しようとした場合には、一度選択したら選択していない状態に戻せないということが起こりますので、現状では、選択しないことを表す選択肢を用意しておくことが妥当な対策です。

Category: 規約 | Leave a Comment

文脈を意識したボタンのラベル付け

水曜日, 7 月 16th, 2008 | Author: sibsiv |

(3)

(0)

(0) Total: 3

ボタンのラベル付けについては、以前「ボタンのラベル付け～名詞？動詞？編～」や「ボタンのラベル付け～UPDATEボタン編～」でも考えたのですが、要するに大切なのはページ内の見出し、一覧、ボタンなど様々な要素を文脈を意識して適切に配置できるかということなのだと思います。

例えば、以下のような画面があった時に、「新規登録する」ボタンが「何」を新規登録するのかが分かるかということがまず大切です。

この例では、ページが「ユーザー一覧」となっていることから、「ユーザー」を新規登録するということが暗黙的に理解されますが、業務システムなど一ページに大量の情報がある場合には、ボタンの影響範囲が分からなくなったり、どれに対応しているのか分からなくなりがちです。そのような場合には、ページの中でどこからドコまでが一つの文章であるのかを視覚的に表現してあげる必要があります。（具体的には、線で囲む、色を分ける、物理的に間を空けるなどです。）

more…

Category: 規約 | Leave a Comment

最初から入力欄にフォーカスを与えておく

水曜日, 7 月 09th, 2008 | Author: sibsiv |

(2)

(1)

(0) Total: 4

ページを開いた際に、あらかじめ一つ目の入力欄にフォーカスを与えておくと、そのまま入力を開始できるので、入力がスムーズになります。

特に、ウェブやPCに慣れているユーザーは入力欄の移動をTabで行うことが多いので、最初にフォーカスを与えておくことで、マウス操作を行わずに入力を開始することが可能になります。（フォーカスを与えておかなくても、Tabの連打で入力欄にたどり着けますが、親切ではありません。）

具体的に方法を書くと、以下のようになります。

■フォーカスしたい入力欄

<form name=”data_form”>

?? ? <input type=”text” name=”input1″ />

???? <input type=”text” name=”input2″ />

</form>

■フォーカス処理（ページ読み込み時）

<body onload=”document.data_form.input1.focus();”>

導入自体はとても簡単ですし、典型的なフォームでは大抵効果的だと思います。

Category: 規約 | Leave a Comment

文章の日付には年を含める

火曜日, 7 月 08th, 2008 | Author: sibsiv |

(2)

(0)

(1)

(0) Total: 3

以前、「文章には日付を記載する」で文章には日付を記載した方が、ユーザーへの判断材料を与えるという意味でユーザビリティが高まるということを書きました。
ですが、日付が書かれていても、それが無駄になるばかりか逆に混乱させてしまうパターンも存在します。

それは、「月」「日」だけ書かれていて「年」が書かれていないパターンです。

自分がよくチェックしているサイトであれば、年月だけしか書かれていなくても、ほぼリアルタイムに確認するので、年を誤解する余地はありません。
しかし、検索サイトから初めてそのページにたどり着いた場合など、サイトの状況を把握していない状態だと、一体いつの7月8日なのかが判らないということになってしまいます。

特に、ニュースなどはリアルタイムで知らせることを目的としている情報なので、しばらく後で参照されるという状況を想定できずに書かれてしまうことが多いのかもしれません。

CMSなどのシステムを利用すれば、動的に出力される日付に関しては気にする必要が無くなることも多いですが、それでも文中に日付を記載するシチュエーションはあると思うので、その際には注意が必要です。