Webアプリケーションのユーザーインターフェイス[2]

ユーザーが選びやすい
フォームのカタチを考えよう

ソシオメディア　上野 学
2005/6/24

GUIの特徴

　前回「ユーザーにとっては “ユーザーインターフェイス”こそが製品そのもの」は、ユーザーインターフェイスというもののとらえ方と、それをデザインするうえでは、人とシステムとの対話であるインタラクションデザインを論理的に行わなければならないという話をしました。今回は、GUIをデザインするうえで必要な前提知識と、Webアプリケーションの課題、そしてウェブアプリケーションにおけるインタラクションの要となるフォームコントロールについて考えていきたいと思います。

■WIMPインターフェイス

　GUIは、別名「WIMPインターフェイス」とも呼ばれます。WIMPとは、ウィンドウ（W）、アイコン（I）、メニュー（M）、ポインター（P）のことで、GUIを構成する代表的な要素を表しています。これらが画面上にグラフィックとして表示され、システムの処理結果や操作の手掛かりを表現しています。またGUIでは画面への出力内容がすべてグラフィックとして描画されるので、ビットマップディスプレイが必要になります。そして、画面の中にグラフィックで表現されているオブジェクトを指し示すために、マウス、ペン、タッチパッド、といったポインティングデバイス（GID：Graphic Input Device とも呼ばれます）も必要です。これら、「WIMP」「ビットマップディスプレイ」「ポインティングデバイス」の3つがそろって初めて、GUIならではの操作性が実現されます。

■直接操作

　マウスに代表されるポインティングデバイスを使って画面内の任意の個所を指し示すという操作は、「See and Point（見てそれを指す）」と呼ばれるGUIの基本的なイディオムです。これにより、いわゆる直接操作（Direct Manipulation）が可能になります。

　直接操作とは、抽象的なコマンドによって間接的に処理対象を操作するのではなく、処理対象が具象的に見えていてそれを物理的な身体動作で直接的に操作することを意味します。概念上のファイルに対して移動コマンドを発行するのではなく、目に見えているファイルのアイコンをマウスを使って直接ドラッグすることができれば、仕事の段取りを事前に頭の中で抽象化する必要がなくなるため、多くの場合、より分かりやすい操作となります。

画面1　クリック、ドラッグ、ドロップで直接操作

　ただし直接操作といっても、画面上のアイコンを実際に手で触ることができるわけではないので、厳密には「直接操作感」といった方がよいかもしれません。またマウスの操作は、手を机の上で水平に動かすのに、そのフィードバックは少し離れたところで垂直に立ったディスプレイ内のポインタの動きとして反映されるので、若干慣れるまで時間がかかります。PDAなどでは、画面に表示されているオブジェクトをペンで直接指し示すことができるので、より直接操作感が増します。逆に同じ携帯機器でも携帯電話の画面では、ウィンドウやアイコンといったGUI的な表現が用いられているものの、ポイントするにはハードウェアのボタンを使わなければいけないことが多く、直接操作感は弱くなっています。

　直接操作感をうまく出すことが、より分かりやすいGUIおよびインタラクションデザインの原則となります。直接操作感を出すためには、次の3つの要素が必要です［About Face（Alan Cooper, 1996）］。

• 操作対象オブジェクトの視覚的表示
• 文字入力ではなく物理的操作
• 操作の瞬間的な視覚的インパクト

　つまり、操作対象がオブジェクトとしての独立性を伴って視覚的に表現されており、それをポインティングデバイスで指し示すことができ、そしてクリックやドラッグといった操作に対してリアルタイムにフィードバックが返される（例えばボタンをクリックすると同時にそれが凹む）、といったことがシステム全体で一貫性をもって実現されている必要があるのです。

■イディオム

　マウスなどによってオブジェクトを指し示すというGUIの基本的なイディオムは、そのまま、操作対象の選択という行為につながります。前回書いたように、オブジェクトが選択されると、次はコマンドの発行という操作になります。そこでは、明示的にメニューから「開く」といったコマンドを選ぶ場合もありますし、ダブルクリックやドラッグといった別のジェスチャーでコマンドを発行する場合もあります。

　この「目的語（対象物の選択）→動詞（コマンドの発行）」という対話型イディオムでは、操作が簡潔になり、可逆性が増すというメリットがあります。コマンドラインインターフェイスで用いられる「動詞（コマンドの発行）→目的語（対象物の選択）」のイディオムでは、コマンドが発行された後、システムは対象物が指定されるのを待つモードに入ります。一度モードに入ってしまうと、そこから出るタイミングはユーザーから明示されなければならない（リターンキーの押下など）ため、ユーザーは一連の操作を完了するまでの抽象的な手続きを継続的に意識していなければなりません。GUIにおける「目的語（対象物の選択）→動詞（コマンドの発行）」のイディオムでは、モードに入る必要がなく（あるいはモードから出るタイミングを明示する必要がなく）、ユーザーの心理的なストレスが軽減され、作業の中断ややり直しがしやすくなります。

■Webアプリケーションの課題

　ここまでは、従来のデスクトップアプリケーションで培われたGUIの特徴について説明しました。では、ウェブ上でGUIアプリケーションを提供する場合の課題は何でしょうか。

　まずユーザーから見て、ブラウザの中で展開するウェブアプリケーションは、従来のデスクトップアプリケーションとは違うパラダイムを持ったシステムであると認識されます。例えばデスクトップアプリケーションのパラダイムとは次のようなものです。

• オーバーラップするマルチウィンドウを行き来しながらファイルの閲覧と編集を行う。
• 洗練されたコントロールを操作して多様な入力を行う。

　これに対し、Webアプリケーションのパラダイムは次のようなものです。

• ページをナビゲーションしながらサーバにあるデータベースの閲覧と編集を行う。
• 基本的なフォームコントロールとリンクを操作して限定された入力を行う。

　この違いは、ウェブの特徴である「ハイパーテキスト・システム」と「クライアント・サーバ・モデル」の性質から来ています。

　ハイパーテキスト・システムは、ノードとリンクによって構成された非線形的な文脈を提供するドキュメントシステムであり、ユーザーのメンタルモデルは、ページ概念と空間概念で成立しています。ページは固定的な順序ではなく、リンクの選択や特定条件による検索（抽出）によって非線形的に提示されます。そのため、条件分岐しながら進むウィザード型の画面展開や、シングルウィンドウによるカード型データベースの操作と親和性が高いといえます。また、全体の規模が分からない空間の中で必要なものだけをリンクでめぐるというコンセプトは、操作対象の全体が物理的な法則にならって目に見える状態にあるというGUIのコンセプトと相反する場合があります。

画面2 必要なものだけをリンクでめぐるというコンセプト

　同時に、ウェブはクライアント・サーバ・モデルであるため、遠隔地にあるデータを呼び出しているという感覚が常にあります。保存されているデータの編集には、普通、サブミットボタンによるコマンドの送信と画面のリロードが必要になります。またブラウザに表示されるのはドキュメント（ページ）であって、ユーザーインターフェイスのコントロールは基本的にコンテンツの一部として配置されているというのも、従来のデスクトップアプリケーションに比べて不自然さがあります。ウェブコンテンツの中ではダブルクリックやドラッグ＆ドロップも使えないことがほとんどであり、限定されたインタラクションは、操作フロー全体を抽象的な手続き型に感じさせ、直接操作感を非常に弱めてしまいます。

　つまりWebアプリケーションの課題は、従来のデスクトップアプリケーションにおけるGUIの利点をできるだけ継承しながらも、ハイパー・テキストやクライアント・サーバの利点をうまく融合していくことです。ナビゲーション指向のパラダイムを整理していくためのインフォメーションアーキテクチャと呼ばれるテクニックと、インターフェイス指向のパラダイムを整理していくためのインタラクションデザインのテクニックを合わせて、最適なデザインを決定していかなければならないのです。

1/3

INDEX
Webアプリケーションのユーザーインターフェイス（2）
	Page1＜GUIの特徴＞ WIMPインターフェイス／直接操作／イディオム／Webアプリケーションの課題
	Page2＜コントロール＞ 命令コントロール／選択コントロール（制限コントロール：チェックボックス・ラジオボタン・リストボックス・ドロップダウンメニュー）
	Page3＜選択コントロールの用い方＞ 選択肢から1項目を選択する（選択肢が少ない場合・選択肢が多い場合）／選択肢から複数項目を選択する（チェックボックスを利用する・2つのリストボックスを使った取り出し方式／上流工程について

関連記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）