ユーザーインターフェースを作るときに気をつけるべき5つのポイント

PCやケータイに限りませんが、アプリケーションの開発で、一番迷うのはユーザーインターフェースだったりします。

昨日、若いプログラマがこんなことを悩んでいました。

　「この編集ボックスはAjaxで処理した方が良いのでしょうか」

　「いや、そこは複数のユーザが同時にアクセスするかもしれないから、Ajaxだけで処理しようとするのは危険だと思うよ。泥くさいように見えても、一度サーバを経由した方が良いよ」

実際にAjaxが多様されているサイトを見渡してみても、それほど凝ったサイトはありません。
gmail、Yahoo、GoogleMapなどは全てAjaxをあくまで補助的に使っています。

やろうと思えば、Ajaxだけで普通のメールクライアントとそっくりな外観を持たせることも不可能ではありません。

しかし、そのやり方はWebブラウザに馴染まないのです。

Webブラウザというのは、全体として縦にスクロールするのが自然です。
通常のメーラーのような3ペイン方式にすると、どうしてもスクロールバーの中にスクロールバーが出てきて一見して複雑な印象を与えることになってしまいます。また、有効面積も狭くなってしまう。

実は、ゲームの開発などでも一番気を遣うのはユーザーインターフェースの部分です。
特に携帯電話などは、片手操作だけで遊べることを最大限重視します。最近の横画面ケータイが出てきてから様相は変わりつつありますが、基本は片手操作です。片手操作のゲームに慣れた状態で横画面のゲームを遊ぶと驚くほど違う体験になります。

なんでも5つのポイントにまとめるブログの法則に則り、ユーザーインターフェースを作る際に気をつけるべきポイントをまとめると

1. 新鮮は良し、斬新は避ける
   
   「斬新な」という言葉は良い意味のようですが、過ぎた斬新は悪です。
   ゲームの画面が全て前衛芸術のようだったら、とても遊べたものではありません。
   ラーメン屋に行ってスパゲティが出てきたら誰だって弱ります。
   どんなUIも「新鮮だ」と思う程度に新しい要素を減らすべきです。
   
   
2. 目の動きに沿って配置せよ
   
   たいていの日本人や欧米人は左上から右下に向かって画面を見ます。
   これは文章の流れがそのようになっているからです。
   このアイムーブ(目の動き)をベースとして、必要な情報は左上から始まって右下で終わるように配置します。
   たとえば入力ボックスの注意文などは入力ボックスの左上になければなりません。
   入力完了のボタンは、入力ボックスより右か、下になければなりません。
   そういうことです。
   
   
3. 最も頻繁に使う操作を最短時間でできるように設計する
   
   特にケータイコンテンツがそうですが、カーソルの移動量を最低限にするために、最も頻繁に使う機能から順に左上から埋めていきます。上でなにかして下でなにかして真ん中でなにかする、みたいな動きが頻繁に必要になると、そのサイトを使うのに疲れてしまいます。
   
   
4. いつでも戻れるようにする
   
   ケータイでもPCでも、ブラウザの戻るボタンでいつでも戻れるようになっています。
   個人的にはこのボタンの存在が、Webというものを一般的なものにした強力な装置なのではないかと思います。
   他のアプリケーションで明確に「戻る」ボタンを用意しているものは実はとても少ないのです。
   たとえばExcelやWord。「戻る」ボタンはありません。かわりに「編集取り消し」ボタン(Ctrl-Z)があります。けれどもこれは隠れていて見えません。
   紙と違ってコンピュータの良いところは、失敗してもすぐに前の状態に戻せるところです。
   「戻る」ボタンが常時設置されていることが、ユーザの安心感に繋がります。
   ただでさえ、ユーザにとって新しいソフトウェアというのは迷宮のようなものです。後戻りする方法がわからないのに迷宮の奥に進むのは蛮勇に過ぎるでしょう。
   ゲームソフトの場合、強制スクロールのもの以外は必ず後戻りする方法がありますし、RPGなどでは「戻る」ボタンをBボタンなどと決めてあることが多いです。
   
   
   
5. 最小限のボタンを用意する
   
   ボタンがひとつ増えればユーザが1%減ると考えることが出来ます。
   だから世界で最も多くの人が使って居るサービスはボタンがひとつしかありません。
   そう。検索エンジンです。
   Wordpressは怖いけど、mixiなら使える、という人はmixiのボタンの少なさを無意識に評価しています。
   mixiでは、メニュー項目以外のボタンは殆どないからです。上級者向けのボタンを隠しておく、というのはよく使われる手法です。こういうときにこそJavascriptはさりげない威力を発揮します。