ここからメインコンテンツ

ユーザビリティ・コラム

ここからメインコンテンツ

第1回 操作性・柔軟性(operatability and frexibility):主に操作フローに着目

今回と次回にわたってGUI(Graphical User Interface)デザイン・設計の中心的な要素である「時間」と「空間」について考えてみる。「時間」は操作上における時間的な流れ(操作手順)を表し、「空間」は画面の表示(レイアウトやデザインなど)を意味する。GUIの開発過程では最も重要な要素である。この2軸を早い段階で適切にデザインすることが、後々の商品の使いやすさ上のクレームの嵐を未然に防ぐための最善策と言える。今回は一番目のテーマ「時間」操作フローについて考えてみる。

なぜ操作がわからないのか!!

(見えないものを理解できるようにする) 操作を進める過程で起こる最も基本的な問題は、見えないものを理解しなければならないことにある。一画面で全ての操作が完了しないために、「いったい次にやりたいことはどこにゆけば操作できるのか?」といった、見えないところをなんとか想像しながら探さなければならないことによって引き起こされる問題である。操作手順を考える際には、まずこの見えにくいものを理解できるようにする。そして「次はここを選択すればよいのだな」と利用者がすぐに想像がつくような流れをつくることが基本である。その上で操作の効率性を併せ持つことが求められる。

目的に合わせた基本的な操作モデル

今回は代表的な3種類のモデルについて考えてみる。
現在、皆さんが日常よく目にする操作フローのタイプはいろいろな方式があるが、下に示すような方式が代表的である。仕事の種類と利用者の特性に合わせて使い分けられている。

  • (1)メニューやボタンを使った階層型の構造(モードレス型操作)
  • (2)決められた手順に従って進めるウイザード型(モード型操作)
  • (3)必要なページを適宜めくりながら操作するタブ型操作
  • (4)その他

(1)メニュー階層型操作

一番多く使われている方式である。携帯電話やタッチパネル式のコピー機など幅広く使われている。利用者が自分のやりたい目的にそって自由にメニューやボタンを選択して操作を進める方法である。一定の操作の流れ(モード)が決められていないため「モードレス方式」ともいう。自由度が高く多くの機能を扱える反面、機能のグルーピングと階層化、適切な用語などが理解しやすくなっていないと利用者は迷路に入ってしまう危険度が高い。デザイン以前にこれらの要素の整理を十分に検討しておく必要がある。---図-1.

図-1 メニュー階層型の例(複写機)

図-1 メニュー階層型の例(複写機)
必要な機能のボタンを自由に選択して設定する

(2)ウイザード型操作

利用者が実行したい目的がはっきりとしていて、明確に絞られている場合に有効な方式である。銀行のATM(現金自動預払機)や新幹線の券売機などでおなじみの一つひとつ順番に操作を進める方式である。予備知識があまり無くてもミスなく目的地に到達ができるメリットがある。
一方、熟知した後もいつも同じステップを通過する必要があり、めんどうな場合も生じる。---図-2.

図-2 ウイザード型の例(新幹線の券売機)

図-2 図-2 ウイザード型の例(新幹線の券売機)
好みの列車の座席ボタンをタッチすると次の操作画面へ自動的に遷移する

(3)タブ型操作

プリンターの印刷設定画面や住所録の見出し、カレンダーなどいろいろなところに最近多く使われだしている方式である。各画面をランダムに確認しながら、目的の機能を素早く選択・設定することができる特長がある。タブ方式の課題点は、途中段階で設定した内容が見えていないため、どこまで設定したのか常に記憶しておかなければならないことである。---図-3.

図-3 タブ型の例(文書ファイリングソフト)

図-3 図-3 ウイザード型の例(新幹線の券売機)
4つのタブを選択してリストの表示方法を切り換え確認しながら操作する

以上、代表選手を挙げたが、実際の製品においてはこれらのいくつかの組み合わせでデザイン・設計される場合が多い。図-4はタブ方式とウイザード方式の長所をうまく組み合わせた例を示す。

図-4 組み合わせの例(パソコンからの列車予約システム)

図-4 図-4 ウイザード型の例(新幹線の券売機)
基本はウイザード型でデザインされており「次へ」により順番に進める。
左側のタブは現在のステップを示しており、同時に設定済みのタブ(時
刻指定等)をクリックすると戻って変更することができるようになっている

デザイン・設計ガイドライン

  • (1)直感的操作

    • 初期画面やいくつかの画面を見ただけで直感的にどのように操作すればよいか分かる。アフォーダンス、マッピング、メタファ(これらは次回説明)を適切に利用する。利用者の先行経験(慣れている)操作手順を用いるなど。
  • (2)効率的な操作

    • 効率的に利用者が操作できるように工夫されていること。頻繁に行う操作はできる限り初期画面で設定できるように考慮する。画面上で関連性をもって操作が行われるボタン類は位置的に近接して配置される。頻繁に行う操作が画面の下側に配置されないように考慮する(Web等)。
  • (3)可制御性(controllability)

    • 利用者に操作の制御権を与えること(これは一番大切!)。入力したデータを取り消す(Undo)ことができるようにする。利用者の意図しないことを機械側が勝手に行わないこと(余計なお節介)。いつでもひとつ前のステップに安心して簡単に戻れることなど。
  • (4)柔軟性

    • ひとつの機能に対して、実現するルートを複数用意しておくこと。利用者の利用場面に応じて利用者が好きな方法を選択できるように冗長性を持たせること。メニューとショートカットキー、画面内の「+」「-」ボタン+テンキー入力の併用など。

■次回はもう一つの要素である「空間」について取り上げる。