(前回Tablet PCを取り上げたついでに)現在のWebサイトは、マウスやカーソルキーなどといった間接操作デバイスによって操作されることを前提にし過ぎているように思えるのです。これだけでは意味が分からない方がほとんどだと思いますので、ヒントを1つ。直接操作しか存在しない銀行ATMと多くのWebサイトの違いは、一体どこにあるのでしょうか?

その違いは、クリック対象オブジェクト間の間隔、つまり誤操作を防止するための考えかたにあります。Webサイトでは誤ったオブジェクトをクリックしても、復帰が比較的容易であることに加えて、現在選択しているオブジェクトをロールオーバーで明示していることが多いため、(不適切なラベリングによる誤認を除いて)誤った箇所をクリックするという操作をしにくいのです。つまり、「選択(ポイント)→決定(クリック)」という間接操作の利点が出ている訳です。

これに対して「選択=決定」という直接操作を前提とするATMには、「選択されているオブジェクトのロールオーバー」などという観念は存在しませんから、押し間違えのないようにオブジェクトの配置間隔にはかなり神経を使います。ATMでは操作デバイスが指(笑)なので、間隔を広めに確保しておかないと誤操作を誘発するという事情もありますが、実は他にも原因があります。

直接操作を行うデバイスの表示エリアにはタッチ検出用のシート(PC Watchの記事によるとTablet PCでは背面配置のようですが)に加えてガラスなどでデバイス表面を保護するのが常ですから、どうしてもユーザーが視線で把握するオブジェクトの位置と、実際にデバイスに触れる位置(デバイス側で認識される位置)にズレが生じることになります。直接操作系の機器ではこのような視差による誤操作対策が非常に重要であり、そのためにもオブジェクトの配置間隔に十分注意を払う必要があるのです。

ここで話を元に戻すと、現在のWebサイトのデザインは、間接操作系のデザインに振れ過ぎているように思えます。特にFlashに多用しているサイトに顕著ですが、ロールオーバーなしでは成立しないナビゲーションがあまりに多すぎませんか? もちろんロールオーバーを捨てろとは言いませんが、TabletPCをはじめとする直接操作系のデバイスが今後増加するならば、この辺の問題に真剣に対処せざるを得なくなるでしょう。(直接操作を主体とする)組み込み機器のフロントエンド標準UIの地位をFlashMXが狙っていることも考えると、特にFlash使いの方々にこの辺の事情を頭に入れておいて頂きたいところです。

このコーナーにしては異常に長くなってしまいましたが、直接操作系UIデザインの感覚がWebデザインにも活かされるべきでは?というお話でした。

The 1140px CSS Grid System · Fluid down to mobile