ユーザーインタフェースについて雑感
プログラマの中にはシステムやアプリケーションのユーザーインタフェース（以下UI）の開発を担当したことのある方もいると思う。UIはソフトウェアの出来栄えに直結する部分であるため色々と注文をつけられやすいが、実はなぜこうであるかということを論理的に説明することがなかなか難しく、違和感を感じながらも指摘された通りに修正を行っている方も多いのではないだろうか。普段、我々がブラウザで参照するwebページのほとんどがシステム化され、またスマートフォンの台頭によりアプリケーションに触れる機会が多くなった昨今、UIの重要性はきわめて高まってきており、ただ機能を満たすように作ればそれでいいというわけにはいかなくなってきている。
そこでかなり乱雑ではあるが、私が普段からUIについて考えていることをいくつか紹介したいと思う。しごく当たり前のものから、「それは明らかに私見だろう」というものまで雑多にまとめてみたので、もしよければご覧になっていただきたい。
（以下、レビュア等の発言例とそれに対する反論）
0. 「マニュアルでしっかり説明しとかなきゃ」
UIはそれを見ただけで操作が可能なように設計すべきだ。できればマニュアルをまったく見ることなく使いこなせることが理想であり、このためUIは直感的でなければならない。直感的であるためには、誰もが持っている共通の常識基盤を利用する。つまり、普段我々が慣れ親しんでいる現実世界の存在を模することや物理法則に従うことだ。
1. 「UIはデザイナーにまかせよう」
UIの設計はデザイナーがやるべきではない。UIの設計とは、すなわち機能仕様の設計だからだ。各画面に必要な情報や画面遷移は機能設計者がまとめ、それを元にデザイナーがデザインする方法が良い。
2. 「ここにこの情報があった方が便利だよね」
地図で目的の場所を探すとき、県→市→町というように広範囲から詳細へと目を移す。UIも同じように概要から詳細へと情報の粒度の流れを作ることで、ユーザーにスムーズなブラウジングを促すことができる。トップページなどの階層の浅い画面にはサマリーのような大まかな情報、階層が深くなるにしたがってより詳細な情報を表示する。概要画面は画面当りの情報量が増えすぎないよう情報の選別を行いバランスをとる。詳細画面は情報量が多少多くても構わないが、１つの画面に同系列の情報をまとめ、なるべく異なった系統の情報を表示しないことを心がける。
3. 「ここは違う色の方がいいな」
色に意味を持たせることは直感的という観点から非常に重要である。可能であればすべてのボタン色は同じ色に統一し、すべてのハイパーリンクは同じリンク色にする。また、ボタンなどの（イベントが発生する）コントロールは、それがコントロールであることがわかるよう他と際立って異なる配色にすべきだ。状態や状況の区別にも色分けがなされていることが望ましい。配色に慣れていくほどに、ユーザーは右脳で瞬時に判断できるようになる。
4. 「今はやりのフラットデザインで」
フラットデザインは画面をシンプルにしようというコンセプト以外は受け入れられない。ボタンはボタンであることがわかるようにすべきだ。
5. 「もっとクリック減らせないの？」
かつては画面遷移を極力減らすことこそ正義だという考え持った人が結構いたが、これは誤りである。いかに情報がまとまっているか、いかに画面階層が理解しやすいかの方が断然重要である。特に画面階層の設計はユーザーの理解度に大きく影響を及ぼす。画面階層が論理的でないことは、UIの理解し難さに直結する。１クリック省けたからなんだというのだ。
6. 「押しやすいようにここ全部リンクにしちゃえばいいじゃん」
文字も画像もない、一見すると何もないような余白の部分がクリックできてはならない。また、やたらとクリッカブルな領域を広げすぎてはいけない。例えばタイトルと説明文がある場合、両方をまとめてアンカータグでくくらず、タイトルのみをリンクとする。なぜならタッチパネル式の端末においては、スライドする際に安心して指を置くことのできる領域が必要となるからだ。PCの場合においても複数のフレームが存在するページでは、当該フレームをアクティブにするという空クリックが起こりえる。
7. 「もっとこうインタラクティブにさぁ……」
クリック・タップがトリガーとならないプログラム処理の実行は極力避けるべきだ。twitterではツイートの一覧をスクロールしていくとデータの先読みが発生し、通信処理およびDOM操作が行われる。非力なマシンではこれによって端末の動作が重くなり、場合によっては無応答となってしまう。CPUはユーザーのものだ。CPUを使用する際は必ず了承を得て（クリックさせて）ほしい。もしくはCPU使用率のチェックをテスト項目に入れるべきだ。
8. 「よし、○○と名づけよう」
ネーミングが難しいからといって安易に造語を作ったり、かっこいいからといってわざわざ難解な語句を使用していはいけない。可能な限りなるべく平易な表現で誰にでもわかるような単語を使用すべきだ。
9. 「ここだけメニューとっぱらってコンテンツ領域を広げよう」
トップ画面から存在するメニューはどの画面にいっても消えてはいけない。それは端末そのものについている操作ボタンと同じように振舞うべきだ。場所を移動してはいけないし、体裁や内容が変わってもいけない。画面にスペースがなければどこかにまとめてもいいが、トグルの位置は変えてはいけない。iPhoneのホームボタンが急に消えたら困るだろう。
10. 「吹き出しとかで説明しちゃえば？」
ポップアップな吹き出しは正直うざい。マニュアルを読まないなら画面で説明しようという試み自体は理解できる。ただやはり画面はシンプルであるべきで、なるべく直感的に理解できるように努力をすべきだろう。せめて吹き出しを消すためにそこまでいって×をクリックさせないでほしい。
11. 「Bootstrapを使用しているのでUIは１つです」
レスポンシブデザインとは、UIの開発で楽ができる手法のことではない。たとえレスポンシブであったとしても、モバイルとPCできちんと情報量に差をつけるべきだ。何事にも限界はある。