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

ユーザーにとっては
“ユーザーインターフェイス”こそが製品そのもの

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

■はじめに

　Webクライアントの技術が進歩し、多様化するに従って、Webベースのシステムにはデスクトップアプリケーションと同等の品質を持つユーザーインターフェイスが必要となってきています。

　しかし開発の現場では、ユーザーインターフェイス（特にGUI）デザインについての専門的なスキルを持った技術者が圧倒的に不足しています。その理由は、ソフトウェア製品におけるユーザーインターフェイスの重要性が正当に理解されていないためと、ユーザーインターフェイス・デザインに関する教育機会がほとんどないためです。

　利用者の視点に立てば、ユーザーインターフェイスとは製品そのものです。いくら高度に洗練された仕組みがバックエンドにあったとしても、それが使いやすい操作画面という表現を伴っていなければ意味がありません。

　ソフトウェアのユーザーインターフェイス・デザインは、HCI（Human-Computer Interaction）と呼ばれる専門分野として欧米では盛んに研究されており、GUI に関する基本的なルールや、ユーザビリティを高めるための標準的なメソッドも普及しています。

　この「Webアプリケーションのユーザーインターフェイス」シリーズでは、GUIの基礎的な概念の確認から、ハイパーメディア（Web）に適したデザイン、設計プロセスについてのメソッド、各種UIコントロールを利用する際に考慮すべきルールなどを解説していきます。

■ユーザーインターフェイスとは

　Webアプリケーションのユーザーインターフェイスについて話をする前に、そもそもユーザーインターフェイスとは何かということを確認したいと思います。前述のとおり、ユーザーの視点に立ってみれば、ユーザーインターフェイスとは製品そのものです。なぜなら、ユーザーがあるシステムを利用しようとするとき、それは常にユーザーインターフェイスを通して行われるからです。つまり、人が道具を利用する際に接する部分、それがユーザーインターフェイスだといえます。

　例えば、イスのように比較的単純な道具の場合、そのインターフェイスとは、人が腰掛けるための座面や、移動するときに手を掛ける側面部分です。あるいは、持ち上げて運ぶときは脚の部分をつかむかもしれないので、これもまたユーザーインターフェイスといえます。このようにシンプルな道具の場合、内部的な機構と表面的なデザインが一体化しており、その素材や加工形状自体がユーザーインターフェイスの性質を決定しているのです。

図1 イスのインターフェイスはシンプル

　一方、パソコンのマウスは、ユーザーが入力作業をするための道具です。この場合も、やはり指や手の平が触れる部分がユーザーインターフェイスといえます。表面の形状や全体の重量などは、工業デザインのノウハウとともに人間工学的な見地から決定されています。

　しかし、イスの場合と大きく違うのは、その内部機構がユーザーインターフェイスと分離されていることです。ご存じのとおりマウスの内部には電子回路が組み込まれており、動かされたときの方向や距離をセンサーがとらえてパソコン本体に伝えるための信号に変換していますが、ユーザーがこういった内部機構を気にすることはほとんどありません。ユーザーにとってのマウスとは、その形や手触り、つまりユーザーインターフェイスのことなのです。

　ここまではいずれもハードウェアとしてのユーザーインターフェイスの話です。いま、私たちがデザインしようとしているのは、ディスプレイに映るグラフィックとして二次元的に表現されるソフトウェアとしてのインターフェイス、つまりGUIと呼ばれるものです。そこでは、表面上のデザインは物理的な内部機構とはまったく違う観点から構成されています。

　画面上に見えるアイコンやボタンは、人がコンピュータに命令を下すための手掛かりとして存在していますが、内部的には、目に見えない電気信号が普通の人には理解できない規則に従って処理されています。別のいい方をすれば、言語や情報処理の方法がまったく違う、人とコンピュータの間に立って、お互いがコミュニケーションできるように手助けをしているのが、ソフトウェアのユーザーインターフェイスであるといえます。

図2 人とコンピュータのコミュニケーションを助けるインターフェイス

■メンタルモデル

　GUIに接するユーザーは、画面上に表示されるボタンを見て、それを本当のボタンとして認識し、それが押すためのものであることを瞬間的に理解します。もちろん頭では、それがあくまで絵として描画されているにすぎず、物理的な機構を持っていないことは分かっていますが、枠で囲まれてベベル（明るい部分と暗い部分を作ってある領域を凸状に見せること）の掛かったものを目にすると、人は自然に普段の生活で目にする物理的なボタンとの類似性を発見し、それと同じように動くことを期待してしまうのです。GUI のパワーは、まさにこういった人間の認知的な特性を利用しているところにあります。適切な表現でGUIを提供することは、分かりやすいシステムを実現するために非常に重要なことです。

図3 押すためのものと瞬間的に理解できるボタン

　このように、人がものを見たときに、その内部構造や動きについて思い浮かべる概念上のモデルをメンタルモデルといいます。人は一般的に、実際の構造よりも単純化されたメンタルモデルを持つものです。目にする現象同士の因果関係を自分がイメージできる範囲で推測し、納得してしまうのです。この能力によって私たちは複雑な世の中を一貫性のある存在として認識できるわけです。だから使いやすいユーザーインターフェイスをデザインするには、操作と操作結果の対応をユーザーのメンタルモデルに近づける必要があります。

　例えば、初めてパソコンを触る人にファイルの移動方法を教えると、同じドライブの中では単なる移動で、ドライブ間をまたぐ場合にはコピーになるということを理解してもらうのに時間がかかります。これはコンピュータ内部の物理的な構造に依存した振る舞いであって、技術者にとっては論理的な仕様かもしれませんが、そのような事情を知らないユーザーにとっては恣意的な現象に感じられるのです。

　そもそもGUIは、現実世界の物理法則を参考にデザインされているわけですから、それに反した現象が恣意的に発生すると、システム全体のバランスを大きく崩すことになりかねません。現実世界では、ある書類を隣の部屋に持っていったらそれが突然複製されるということはないわけです。

■アフォーダンス

　もう1つ、ハードウェア、ソフトウェアにかかわらず、良いユーザーインターフェイスをデザインするための大きなヒントとなるのが、「アフォーダンス」の考え方です。

　アフォーダンスとは、あるものがその機能や使われ方を知覚的に暗示していることです。例えば、あなたが草原を歩いていて、ふと見るとひざ丈ほどの高さの切り株があったとします。ちょうど歩き疲れたところのあなたはどうするでしょうか。おそらくその切り株に腰掛けると思います。それは、切り株が座ることをアフォードしているからです。切り株は、人間が腰掛けるための道具として存在しているわけではありませんが、その高さや直径、表面の滑らかさなどから、あたかも「座ってください」と訴えているように感じるのです。前述のボタンも同様でしょう。ボタンがボタンであるためには、ボタンらしい意匠を伴っていなければなりません。つまりユーザーに対して「押せそう」に見えるデザインでなければならないのです。

　うまくユーザーをアフォードすることができれば、ユーザーインターフェイスの各要素について、いちいちその使い方を説明する必要はなくなります。幸いGUIコントールの視覚的な表現方法はかなりパターン化されていますので、プッシュボタン、メニュー、テキスト入力フィールド、ラジオボタン、チェックボックスなど、その使い方を正しく示唆することは比較的簡単です。しかし、クリックできないところがクリックできそうに見えてしまったり、ただの装飾的な要素が何らかの情報を提示しているように見えてしまったりすることはよくあるので、注意が必要です。

　一方、ドラッグ＆ドロップやダブルクリックといった連続的な操作を伴う使い方を示唆するのはなかなか難しいものです。その場合は、コントロール自体の見た目もさることながら、操作が起こされたときの視覚的フィードバックも含めて適切にデザインする必要があります。

　また、複数のコントロールが1つの画面にある場合、それぞれの役割や重要度の違いが、形や大きさによって示唆されていることも重要です。例えば、いろいろな機能を持ったボタンが、すべて同じ形と大きさで整然と並んでいると、一見無駄がなくシンプルなユーザーインターフェイスに見えますが、それぞれの操作結果を区別して予測する手掛かりがないために、使いにくいものになるでしょう。

1/2

INDEX
Webアプリケーションのユーザーインターフェイス（1）
	Page1 はじめに／ユーザーインターフェイスとは／メンタルモデル／アフォーダンス
	Page2 インタラクションデザイン／インタラクションデザインの論理性／Webアプリケーションのユーザーインターフェイス

関連記事

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