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

「戻る」で入力データが消えてしまうフォームはいらない
「寛容性とユーザーコントロール」

ソシオメディア　上野 学
2005/12/22

　

WebアプリケーションのUIデザイン

　ここで、デスクトップアプリケーションに対するWebアプリケーションのメリットとデメリットを、ユーザーインターフェイス・デザインの視点から整理してみましょう。

メリット

○リアルタイムのデータにアクセスできる
　Webアプリケーションでは、株価やチケットの予約状況などをリアルタイムに見ながら取引や申し込みといった手続きを行うことができます。即時性はオンラインサービスの大きな利点であり、販売店の在庫管理や決済などのシステムはいまやそのために総合的な発展を遂げています。つまりWebアプリケーションのユーザーインターフェイスは、情報の検索性を重視してデザインされなければなりません。

○公開が容易
　Webアプリケーションはソフトウェアの物理的な流通を必要としないため、利用者はインストール作業やアップデートなどの作業をする必要がありません。また、Webアプリケーションの提供者は、CD-ROMのプレスや発送などをする必要がなく、常に最新バージョンのプログラムを利用してもらうことができます。つまりWebアプリケーションのユーザーインターフェイスは、見た目の変更や機能の追加がしやすいようにデザインされなければなりません。

○どこからでも利用できる
　Webアプリケーションは、ウェブブラウザーとインターネットへの接続環境があれば、どこからでも利用することが可能です。利用者ごとの環境設定はオンラインで一元管理されているため、ログインすることでいつでも再現することができます。利用するコンピュータが特定されていない人や、1台のコンピュータを複数人で共用している人には大きな利点となります。またWebはHTMLをはじめとしたオープンな技術で作られます。データ処理は基本的にサーバ側で行われるため、利用者のOSやウェブブラウザーの種類に依存しないサービスを提供することができます。1つのプログラムで多くの利用環境に対応できるということは、大幅な開発負荷の軽減につながります。つまりWebアプリケーションは、さまざまな閲覧環境で互換性が保たれるような柔軟性をもってデザインされなければなりません。

デメリット

○不十分なインタラクション表現
　洗練されたデスクトップアプリケーションのインタラクションに比べ、Webアプリケーションでは、ダブルクリック、ドラッグ＆ドロップ、フローティングパレットやツールパレットの利用、モーダルダイアログの利用、といったインタラクションを扱うのが苦手であり、GUIとして十分に振る舞うことができません。これは、本来HTMLがユーザーインターフェイスではなくドキュメントを表現するために作られたものであるということが理由としてあげられますが、ブラウザー側の問題も多く、テキスト入力中などに間違ってウィンドウを閉じると何の警告もなしに入力した情報が失われてしまうといったことが起きます。つまりWebアプリケーションでは、限定されたインタラクションのパターンを使って、しかもハイパーメディアとしてのドキュメント表現も同時に行いつつ、できるだけ安定した振る舞いでユーザーのミスを補うようにデザインされなければなりません。

○やりとりが煩わしい
　Webアプリケーションでは、ユーザーが入力や選択した内容が1画面ごとにサーバに送信され、それに対してサーバが新しい画面をウェブブラウザーに返すので、画面遷移のたびに待ち時間が発生します。これはサーバの性能や通信回線の状況にも依存しますが、デスクトップアプリケーションと比べると、1つの操作に対するフィードバックの速度は大抵遅くなります。またユーザーの操作に従ってリアルタイムにフィードバックを返すというGUIらしさが損なわれています。この点については、最近のリッチクライアント技術によって大きく改善されつつありますが、ユーザーインターフェイス構築用の安定した、汎用性の高い API として利用できる技術はまだ多くありません。つまりWebアプリケーションでは、紙芝居のように順次的に進むウィザード式の画面遷移の中に、ユーザーのタスクに対応したさまざまなインタラクションを実現しなければなりません。

○見た目に関する一貫性の欠如
　Webアプリケーションは、利用者のOS、ウェブブラウザー、ディスプレイ解像度と色数、ウィンドウの大きさ、環境設定などによって、ユーザーインターフェイスの見た目が変化してしまいます。これはクロスプラットフォームを前提としたインターネットのメリットと裏表の問題です。つまりWebアプリケーションのユーザーインターフェイスは、最適化された見た目を固定的に提供するものではなく、画面構成要素を論理的にマークアップし、その構造に対応させた CSS で相対的にプレゼンテーションを定義するという、新しいグラフィックデザインの方法論を必要としているのです。

2/5

INDEX
Webアプリケーションのユーザーインターフェイス（6）
	Page1＜対話型システムの設計原則＞
	Page2＜WebアプリケーションのUIデザイン／メリット（リアルタイムのデータにアクセスできる／公開が容易）／どこからでも利用できる／デメリット（不十分なインタラクション表現／やりとりが煩わしい／見た目に関する一貫性の欠如）＞
	Page3＜経験則その2：寛容性とユーザーコントロール／できるだけすべての操作を可逆的にする＞
	Page4＜ユーザーが自分のペースで作業できるようにする／コントロールを作業の流れに合わせて配置するユーザーの意思を優先する＞
	Page5＜UIからゲーム性を排除し、簡単なマウス操作で利用できるようにする／ユーザーを信頼する＞

関連記事

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