いつの間にやら4月になりましたね！4月といえば人事異動･･･。うちの会社でも若干の異動がありました。心機一転頑張りたいと思います。
うちの会社は小さい会社なのでユーザビリティを専門に扱うチームや部署は無いのですが、個人ベースで社内向けに「ユーザビリティサポートサービス」なるものを立ち上げてみました。
具体的には、対象のプロジェクトについてヒアリングして、
のアドバイスをしたり手伝ったりします。
立ち上げてから少し経ちましたが、早速いくつか声を掛けてもらっています。具体的な話だったり、概念的な話だったり、ワンポイントだったり･･･。
そんな状況について、とある社員の方が「受注」という表現をしてましたが、自分が担当しているプロジェクトでは得られない経験を得られてるという意味では、お金では買えない貴重なものを報酬として頂いています。
これからもユーザビリティについては貪欲に突き詰めて行きますよー。
さて、ここしばらくインプット期間だったけど、そろそろアウトプットできそうかなぁ～？
携帯電話用サイトでのパスワード入力について、ビービットさんのコラムにこんな記事が掲載されていました。
パスワードを英文字も含めて設定してもらう場合には、テキストエリアには「INPUT type=”password”」ではなく「INPUT type=”text”」を使うことをお勧めします。
（中略）
弊社のユーザ行動観察調査の中では、入力中から「*****」という表記になることで、打ち間違いが容易に発生することがわかっています。
?
確かに、携帯サイトを利用する際に、パスワードが****のようなアスタリスクで表示されてしまうと分かりづらいと感じていましたが、実際自分で携帯サイトを製作するにあたって、input type=”text”で実装してしまってよいのか悩んだ事もありました。
携帯なので、端末を共有したり、覗き見されてパスワードが盗み取られてしまうというリスクはPCよりは少ないでしょうが、それでもゼロではないからです。ですが、PCと比較すると、ID,パスワードの自動入力機能が導入されておらず、意図せず勝手に表示されてしまうということが無い（少ない）という点もパスワードを平文でそのまま表示することに対して後押しになりそうです。
と、個人的な意見はここまでにして、現状一般的なサイトではどうなっているのか興味がわいたので調べてみました。
最近更新できていなくて書くのが遅くなりましたが、今年もBad Usability Calendarが公開されたようです。
早速印刷してデスクの横の壁に貼ってみました。
カレンダーを配布しているBadUsability.comでは、各言語のpdfファイルがダウンロードでき、日本語版もあります。
昨年のカレンダーも改めて見返してみましたが、今見ても共感することが多く、今年のものも含めて肝に銘じておこうと思います。
今月23日（金）にHCD-Netのイベント「魅力的なUIに向けて - iPhoneに超えるには」が開催されるようです。
近年、ＨＣＤの対象は使いにくいものを使いやすくするだけでなく、より魅了的なデザインを生み出すために活用されています。
今回は近年、話題になっているiPhoneを題材に、より魅力的なＵＩを生み出すための議論をしたいと思います。■会費：HCD-Net会員2,000円/一般5,000円
■定員：40名・申込要(一般の方も参加可能）
■概要：1. 17:00-17:10 HCD-Netサロンの活動、山崎和彦氏(千葉工業大学)
2. 17:10-17:40 iPhoneのユーザ評価から見るこれからのUI、原田養正氏(U’eyes Design)
3. 17:40-18:10 iPhoneのＵＩ開発から見るこれからのUI、篠原稔和氏(ソシオメディア)
4. 18:10-18:40 iPhoneを超えるＵＩを作るには、八田晃氏(ソフトデバイス)
5. 18:50-20:30 ディスカッション
場所が京都（京都工芸遷移大学）なので私は参加できませんが、iPhoneを中心としたUIについて4人の方の公演＋ディスカッションが予定されており、濃い内容になりそうです。
有料ですが、一般の方も参加可能になりましたので、iPhoneを始めとした先進的なUIに興味のある方は参加してみてはどうでしょうか？
申し込み方法及びイベントの詳細はHCD-Netのサイトにてご確認ください。
個人的には最近は、ペーパープロトタイピングやAxure、OmniGraffleなどのプロトタイピングツールに興味を持っていますが、それらはあくまでプロトタイピング段階の話で、仕様書としておこす場合には、ExcelやVisioなどのファイルに記述することになると思います。
業務でExcelやVisioを用いて画面仕様書や画面遷移図（サイトマップ）を作成する中で感じた良い点・悪い点などをまとめてみます。(PowerPointは少ししか使ってないのでおまけ程度に載せてみました。)
画面設計、画面仕様書作成ツールを検討する際の参考にして頂ければと思います。
SuperSliderは複数並んだラジオボタンを見た目だけスライダーバー風に変更する、PrototypeとScript.aculo.usをベースにしたスクリプトです。
ウェブ上のFAQの末尾などに「この情報は役にたちましたか？」のような形でフィードバック用のアンケートが用意されていることがあります。一般的にこのようなアンケートはラジオボタンによる段階評価で行うことが多いのですが、段階評価であれば、スライダーバーのような全体の高低の関係が視覚的に分かるUIのほうが理解しやすく、回答の間違いも減ると思います。
スライダーバーはJavaScriptなどを使えば実現できるのですが、既存の仕組みがラジオボタンだったり、JavaScriptを利用できない環境でも使える必要がある場合などもあります。
そのような場合には、実際の仕組み自体はラジオボタンで実装しておき、見た目だけSuperSliderを使ってスライダーバー風にしてしまうというのが、JavaScript有効/無効の両方に効果的に対応する方法ではないでしょうか？
ユーザビリティの向上に役立つフィードバックとフィードフォワードという考え方について紹介します。
フィードバック、フィードフォワードという言葉はユーザビリティとは別の分野でも使われているので、なじみのある言葉だと思いますが、ここでは一般的な説明から離れ、少しユーザビリティ寄りで定義したいと思います。
フィードバック･･･ユーザーの動作によって生じた結果を、後からユーザーに提示すること。問題を解決するための情報を与えること。
フィードフォワード･･･ユーザーの動作によって生じるであろうことを、事前にあらかじめユーザーに提示すること。問題が発生しないように情報を与えること。
フィードバックとフィードフォワードの例として面白いのがカーナビです。
カーナビは基本として、「○○メートル先の交差点を右方向です。」「この先○○kmの渋滞です。」などのように、これから起こることを事前に運転手に伝えて、通り過ぎてしまうなどの問題が発生しないようにしたり、渋滞にはまってしまうなどの問題を回避するための情報を与えたりします。このような情報の提供方法はフィードフォワードに該当します。
カーナビの意義の大半がこのフィードフォワードにあるといっても過言ではないと思いますが、それだけでは不十分なのです。
最近の電子レンジにはボタンひとつで適切な温度に温めてくれる「あたためモード」が搭載されています。
昔は、パッケージに時間が書かれているようなもの以外を温める場合には、過去の経験からくる大体の勘などを頼りに時間を設定し、加減しながら温めなおすなど、物を適切な温度に温めるという作業にも手間がかかっていました。
しかし、あたためモードができたことにより、（どれくらいの頻度で使われているかは別として）物を温める作業の手間が減少したように思います。
では、昔の電子レンジに存在した手間は消えてなくなってしまったのでしょうか？
ラリー・テスラー氏は、手間＝複雑性について以下のような法則を提唱しています。
あらゆるプロセスには本来備わっている複雑性があり、「臨界点」以降はその複雑性は簡略化できず、移動のみ可能である。
このテスラーの複雑性保存の法則に従って考えると、昔の電子レンジに存在していた、温める物によって時間を設定したり、状況に応じて時間を延長したりするような手間は、消えてなくなってしまったわけではなく、電子レンジの内部に移動しただけであるといえます。
道具の利用者の立場から見ると、消えてなくなったのでも道具の中に移動したのでも、自分が気にする必要がなくなったという点では同じです。
しかし、道具を設計する立場の私たちにとっては、複雑性の移動は非常に重要な考え方です。
ユーザビリティを高めようとしたとき、何も考えずに複雑性を道具側に移し、人間側から複雑性を奪えばよいわけではありません。
Masked Input Pluginは、jQueryベースのフォーマット入力サポートプラグインです。
入力フォームで郵便番号や電話番号を入力させる場合、ハイフンなどの区切り文字ごとにインプット要素を分けるかどうか、分けない場合区切り文字を入力させるかどうかで悩むと思います。
区切り文字ごとにインプット要素を分けた場合、 フォーマットと異なる形式で入力されることによる入力エラーなどは減りますが、タブやマウスクリックでインプット要素間を行き来する手間などが問題になります。
逆に、区切り文字も含めてひとつのインプット要素に入力させる場合には、フォーマットどおりに入力する手間が問題になります。
インプット要素間の行き来を自動的に行ってくれるものとして、以前「入力後に自動でフォーカスを移動してくれるスクリプト: Autotab」を紹介しましたが、Masked Input Pluginはひとつのインプット要素の中でフォーマットどおりに入力することをサポートするスクリプトです。。
Masked Input Pluginが適用されたインプット要素は、一見普通のテキストボックスのように見えますが、フォーカスを当てるとフォーマットを表す背景が表示されます。
上記画像は日付を入力するフォーマットで、「XX/XX/XXXX」という形式の入力を行う場合の例です。
フォーマットを背景に表示してくれるだけであれば、インプット要素の右側などに入力サンプルを例示しておくのとあまり違いがありませんが、Masked Input Pluginの場合には、さらに便利なことに、フォーマットに含まれる”/”(スラッシュ)などの入力はユーザーが行う必要がなく、自動的に補完されます。
つまり、XX/XX/XXXXというフォーマットであれば、数字を2文字入力した段階で”/”が自動的に補完され、3文字目の入力が”/”の後にくるようになります。
s3Sliderは複数の画像と説明文を一定時間で切り替えて表示するためのjQueryプラグインです。
このような動的な切り替えはFlashで行うことが多かったと思いますが、最近はJavaScriptでもクオリティの高いものを作ることができます。
Flashの場合にはテキストをコピーできないなどの問題がありますが、s3Sliderの場合はJavaScriptによる実装なので問題ありません。
アクセシビリティ的な視点でみると、FlashにしろJavaScriptにしろ、切り替え表示のような見せ方には難があるとおもいますが、プレゼンテーション的な視点では効果的な場面もあると思います。
