セレクトボックスを使う場合、選択肢が多くなるにつれて、自分が選択したい選択肢を見つけるのが難しくなってしまいます。

そんなときには、情報の組織化を行ない、探しやすくしてあげる必要がありますが、その１つの手段として、optgroupというものがあります。

この機能を利用すると、セレクトボックスの表示は以下のようになります。

optgroupを利用するためのソースは以下のようになります。

<select name=”browser”>
<optgroup label=”Internet Explorer” class=”ie”>
  <option label=”IE5.5″ value=”ie5″>IE5.5</option>
  <option label=”IE6″ value=”ie6″>IE6</option>
  <option label=”IE7″ value=”ie7″>IE7</option>
</optgroup>
<optgroup label=”Firefox” class=”ff”>
  <option label=”FF1.5″ value=”ff1″>FF1.5</option>
  <option label=”FF2″ value=”ff2″>FF2</option>
  <option label=”FF3″ value=”ff3″>FF3</option>
</optgroup>
</select>

more…

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

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

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

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

more…

「ユーザビリティ」というと一般的には、HCIの分野で、人と機械の係わり合いに関する指標であると考えられています。

ウェブサイトのユーザビリティと言った場合にも、例えばECサイトであれば、商品購入者向けの画面では、購入者とサイトのユーザビリティを考え、管理者向けの画面であれば、管理者とサイトのユーザビリティを考えるというように、バラバラの「人-機械のコミュニケーション」として捉えてしまいがちです。

しかし、パーソナルツールなど特定の目的のサイト以外は、最終的には「人-機械-人のコミュニケーション」で成り立っています。

more…

最近、「コミュニケーションの心理学」という本を読んだので紹介します。

この本は今から10年ほど前に書かれた本で、恐らく大学の講義にテキストとして使われていたのではないかな～と思うような感じの本でした。

タイトルは「コミュニケーションの心理学」となっていますが、サブタイトルに「認知心理学・社会心理学・認知工学からのアプローチ」とあるように、心理学などを工学分野に活用することを前提とした内容です。

「コミュニケーションの心理学」では、コミュニケーションの種類を以下の３つに分けて解説しています。

• 人-人
• 人-機械-人
• 人-機械

「人-人のコミュニケーション」としては、対面コミュニケーションにおいて非言語コミュニケーションや対人距離が与える影響などが書かれています。

「人-機械-人のコミュニケーション」としては、電話やコンピュータを介したコミュニケーションによって「人-人」のときと比べて変わったことなどが書かれています。

「人-機械」のコミュニケーションとしては、人間中心設計から始まり、HCI、メンタルモデル、ユーザビリティなどの解説が続きます。

more…

本日は2008年度の地方自治体ホームページユーザビリティ評価のためのワークショップが開催されたため、朝から参加してきました。

10時から18時という丸一日のスケジュールで、個人的に病み上がりの状態だったので結構疲れましたが、有意義な１日を過ごすことができました。

本年度の地方自治体ホームページユーザビリティ評価に評価者として参加する方々が集まり、実際の評価を始める前の知識の共有と講習を目的としたワークショップでした。

午前中、ウェブユーザビリティに関する前提知識の講習を受け、午後にペルソナ・シナリオのワークショップを行いました。

地方自治体ユーザビリティ評価プロジェクトは、以下のようなステップになっており、今回のワークショップ後、二次審査が行われます。

事前審査→一時審査→ワークショップ→二次審査→最終審査

二次審査は、ウェブユーザビリティを前提としたチェックリストとペルソナを利用したチェックリストを元にヒューリスティック評価を行う予定です。

最終審査の後、上位の地方自治体にインタビューなどを行うため、最終的な発表は年度末になる予定ですが、最後まで参加していこうと思います。

htmlの標準コンポーネントとして用意されているセレクトボックスですが、選択肢に色を付けたいとか、画像を使いたいというようなことに対応できないので若干機能不足を感じたことは無いでしょうか？

そんなときに便利なのが、セレクトボックスを独自実装して機能を拡張したSelectBoxFactoryです。

選択肢に画像を使ったり、

選択肢をリンクにしたり、

選択肢に色付けしたり、

といった、普通のセレクトボックスではできないことが実現された、ちょっと便利な拡張セレクトボックスが色々用意されています。

JavaScriptを使った独自実装なので、通常のセレクトボックスに変えてこれを利用すべきかどうか検討は必要です。

しかし、これを使うと今までやりたくてもできなかったことが実現できるかもしれません。

more…