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にしろ、切り替え表示のような見せ方には難があるとおもいますが、プレゼンテーション的な視点では効果的な場面もあると思います。
最近、インタラクションデザインという言葉が所々で使われるようになってきました。ちなみに、昨日紹介した「デザイニング・インターフェース」のサブタイトルも「パターンによる実践的インタラクションデザイン」です。
そんなインタラクションデザインについて、まとめている数少ない書籍のひとつが「インタラクションデザインの教科書」です。この本はもともと米国AdaptivePath社のDan Saffer氏が書いたものの和訳版です。
ざっくり説明すると、インタラクションデザインとは、製品やサービスを介してた人と人の対話のデザインのことです。広い意味では、電子メールや電話を使ったコミュニケーションのあり方をデザインしたり、狭い意味では、ボタンを押した際のアプリケーションの挙動などをデザインしたりします。
インタラクションデザイン自体は新しい分野ですが、「モノ」自体のデザインから一歩飛び出して、モノを使って得られる「コト」のデザインをするための橋渡しになる考え方ではないかと思います。
いつも身近なところにおいてるけど紹介していなかった書籍の一つが「デザイニング・インターフェース」です。
インターフェース好きとしては、この本をパラパラめくっているだけでもワクワクしてしまう、そんな本です。
2007年頭に出版され、プログラミング以外をテーマにしたオライリー本としては異例の売れ行きだったという話を聞いています。
様々なインターフェースのパターンを概要、利用場面、理由、用法、事例を示しながら紹介されており、それぞれのパターンの利点欠点などを意識しながら、良い表現方法を探ることができます。
目次が便利なのもこの本の特徴です。目次の各項目の下にそれぞれの内容がガイドライン的に書かれているため、目次だけささっと目を通して、自分の知識として足りていないところだけ詳細を読み進めてもよいかもしれません。
