5. フィードバックの事例(1)
ここでは一般的に用いられているフィードバックの例をいくつか紹介しよう。
5-1. ボタン
もっとも端的なフィードバックの例がスクリーン上のボタンである。スクリーンに現れるボタンは、ハードウェアの操作部品をメタファとしたものである。この仮想のボタンは物理的に出っ張った形状(の表現)をしており、マウスなどで押(実際はポイントとクリック)されると、押し込まれた表現になることによってフィードバックする。こういったアニメーションによって、操作感を高めている。主にタッチスクリーンやポインティングディバイスなどによるGUI作法で用いられる。
Webページでもマウスでクリック可能なものはボタンと呼ばれるが、必ずしも物理的な形状を真似ていないものも多い。場合によっては文字だけのものもあり、押されても文字の色が変わるだけというフィードバックという面からは素っ気ない反応しかしない。時にはまったくフィードバックを返さないものも見かけるが、操作感として拍子抜けがする。リンク先のページの読込に時間がかかるようだと、ユーザは押していないと勘違いして、何度も同じボタンを押してしまう、などのミスが発生する可能性がある。
ボタンをフィードバックも含めてきちんとデザインしようとすると、表1のような5つの状態を作りコントロールしなければならない。また、マウス(タッチパネルの場合もほぼ同様)による動作の詳細を図2のチャートに示す。
| 状態 | 説明 |
|---|---|
| (1) 通常/Normal | 何も操作がされていない状態を表す。 |
| (2) 押し下げ/Pushed | ボタンが押された瞬間で手を放す前の状態を表す表現。狭い意味でのフィードバックの表現である。 |
| (3) 選択/Selected | 押された状態を保持するタイプのボタンをシミュレートするもので、ON状態(選択状態)を表す。さらにはn個のステートを持つ場合は、n個の状態を表現することになる。 |
| (4) ロールオーバー/Roll over | マウスがボタンの上に来たときに、ボタンが押下げ可能であることを表現する。この表現も物理的ボタンを超えたものであるが、特に押せることが自明でない文字だけのボタンなどでは、有効なものである。 表現としてはボタンそのものの表現を変える場合もあるが、マウスカーソル自体を矢印から手の形に変えるといった少々変形的なフィードバックが行われる場合もある。これは、マウスなどのポインティングディバイスのときのみ有効なものである。(指によるタッチパネルでは有効でない) |
| (5) ディスエイブル/Disable | ボタンが使えない(押しても何も起きない)状態であることを表す。これは物理的なボタンを超える表現であるが、一般には受け入れられ、認知されている。 |
表1

図2
ボタンは、いわゆるWidget(Window Gadget)の代表選手であるが、その他にもウィンドウ、エントリーフィールド、スライダー、タブ、などのGUI部品もそれぞれ特有のフィードバックを持っている。
5-2. フォーカス
概念的にはボタンにやや近いが、リモコンによるテレビなどの操作や携帯電話、デジタルカメラなど多くの非ポインティングディバイス系の機器に用いられる。多くは十字方向(上下左右)に配置されたハードウェアボタンおよび決定の意味を持つボタンとで操作される。
基本的には、スクリーンに一つだけ存在する注視点(フォーカス)を十字ボタンで移動して、決定したい内容がフォーカスされたら決定ボタンを押す、という操作になる。フォーカスの表現には表2のようなものがあるが、それぞれデザインによって注意すべき点もある。表に述べた以外の留意点として、次の事に注意する。

表2:フォーカスの表現
特に色面による表現などで、二者択一の選択肢から選ぶようなときどちらが選ばれているのかわかりにくくなることがある。三択以上の時は選ばれているもの(フォーカス)が一つに対して選ばれていない物が二つ以上なので間違いは起きにくい。これは実際にユーザテストなどをすれば一定確率で間違いが生じるのですぐに判明するが、本来絶対に間違いが生じてはいけないポイントなので注意が必要である。
画面上にフォーカス移動可能なポイントが多く並べるときは、できるだけグリッド上に配置し上下左右の使用ボタンが紛らわしくならないように配慮しなければならない。携帯電話のiModeでは、ディバイスの都合上フォーカス移動を上下ボタンで行っているが、次のフォーカスが横に並ぶときなどは間違いが起きやすい。
5-3. 待ち状態の表現
基本的にはユーザを待たせない工夫を第一にすべきであるが、システムが内部処理中でどうしてもユーザの操作を受け付けられないときは、そのことをユーザに知らせる必要がある。待ち時間の長さのレベルや待ち時間の質によって、さまざまな表現がありうる。
5-3-1. スクリーンの一部やウィンドウを用いる
数秒以上の待ち時間があるときは、スクリーン全体ないし一部の領域を使って処理中であることを表現する。例としては、ファイルのコピー操作、ソフトウェアのインストール、ネットからのファイルのダウンロードなど。処理時間がある程度計算できるときは、処理の進行状況や待ち時間の目安となる表示をアニメーションなどで表現する。進展度合いを示すものは特に時間でなくても、コピーされるファイルの数などおおよその目安がわかるものであればよい。数値によるものよりアナログ的な量の情報が適している。
システム的に終了時間を決める手がかりがないときは、繰り返しのアニメーションなどを出すことも有効である。何の変化もしないスクリーンが数十秒続いたら、システムのハングアップと区別が付かなくなりユーザは大いに不安である。
5-3-2. お待たせマーク(アイコン)など
画面の定位置に処理中のマークやメッセージを表示する。きちんとユーザが気づける位置に表示することが重要であるが、待っている間にユーザが参照できる情報を隠さないことも大切である。例えば写真データの読込み中のアイコンを中央に表示すると、直下に見えている写真の一番重要な部分を隠してしまう。待っているいる間は何も操作できないとはいえ不親切である。
5-3-3. マウスカーソルによる表現
PCなどでは比較的短い待ち時間の場合に用いられる。マウスポインターはもっもとユーザの注意を引きつけているGUI部品なので、そこに待たせるメッセージを載せるというのは理にかなっている。また待たせている間はマウスが使用できないとすると、不用意にクリックさせてしまうというミスを未然に防いでいると言える。
これらの方式はバランスを考えて用いるべきである。例えば、比較的頻繁に短い時間(1〜2秒)ユーザを待たせなければならないようなシステムが、毎回ダイアログウィンドウを出すのはよくないし、あまりに長い時間マウスカーソルだけで待たせるのもバランスが悪い。
また待ち画面への切り替え自体が遅いと、印象がかえって悪くなることにも注意したい。表示処理に手間取ると、待ち時間にさらに余計な表示処理時間を加えることになる。
6. フィードバックの事例(2)
Apple Computer社は、GUIのデザインでは常に先進的な提案を行っているが、フィードバックという面でも非常に詳細で神経の行き届いた実装を行っている。ここでは同社を中心とした高度なフィードバックの例をみてみよう。
6-1. ウィンドウのオープニング
Macintoshでは、1985年のもっとも初期のバージョンからウィンドウのオープン/クローズにアニメーションを採用している。小さなアイコンが拡大してウィンドウとして開く過程を、波線でできた矩形によるアニメーションで表している。これによってアイコンとウィンドウの関係が視覚的に印象づけられる。またこのアニメーションは一様なスピードではなく、徐々にスピードが増すようなアクセラレーションがかかった動作をする。最新版のバージョンXでは、紙面で表現するのはむずかしいが、ジニー効果と呼ばれるアラジンの魔法のランプの魔神(ジニー)が現れるような表現効果でウィンドウがドック(格納場所)から現れる。また、ドックはマウスがロールオーバーするとアイコンがスムーズに拡大される。
6-2. iPod
iPodは大成功している音楽の保存再生用の機器で、基本的な機能は録音されている音楽(500曲から1万数千曲)を選び出してヘッドフォンから再生をすることである。この成功を支えている何%かは、フィードバックを含めたユニークな操作感によっていると言えるだろう。
ジャンルやアーティストなどで仕分けされているとはいえ、1万におよぶデータにアクセするのは簡単なことではないが、数cmのタッチセンサー付きのホイールによって解決している。タッチセンス自体は何のフィードバックも生じないが、2インチ程度のディスプレイへの非常にレスポンスのよいスクロール表示と、あまり目立たないが内蔵スピーカから擬似的なクリック音を出すことによって反応を機敏なものに感じさせている。また、最近の同社のローラー付きのマウスもスピーカが仕込まれており、ローラーの操作に合わせた操作音を出している。これによって本当に物理パーツが音を出している錯覚に陥る。
