記事目次
まるでブームの様に、UIが着目されています。そして、多くの人がUIのノウハウを身に付けるために努力を重ねていると言って良いでしょう。
そんな中で、Pinterestなどを使ってUIの参考画像を閲覧したり、UIの秀逸サイトを「UIトレース」と言われる習作に取り組んだり、そのデザイン表現に興味が集中していますね。
しかし、どんなにデザイン表現を勉強したところで、UIの本質というのは「見た目の世界」だけには収まらないほど奥深いものがあります。
今回は、「そもそもUIってなんですか?」というところから、見た目だけに留まらない「UIのもっと本質的な部分」をご紹介しましょう!
インタフェースとは、ユーザーとコンピュータを繋ぐもの
まず、「UI」とは「ユーザーインタフェース」の略ですが、では、インタフェースってなんでしょうか?
普通に日常的にインタフェースってことばを使っていますが、あえて説明しろと言われても、なかなかひと言では説明しにくいですよね。
英語の辞書で調べてみると、「界面」や「接触面」「中間面」などと、意味不明な訳語が並んでいます。
はて、どういうこと???
UI(ユーザーインタフェース)なるものが、初めて世に認知されたのは1970年代まで遡りますが、たかだかまだ50年の若造です。
そして、ヒューマンインタフェースやマンマシンインタフェースと言われるインタフェースでくくられる前で考えると、電話交換機の時代まで遡って、それは18世紀のことになります。
いずれにせよ、コンピュータや機械に対して、
1. 人間がやりたいことを命令する
2. コンピュータや機械がその命令を受け入れたのか?を表示する
3. 実行可能なのか?実行中なのか?を逐次表示する
4. トラブルが発生中の場合は何も表示されなかったり、その状況を表示する
といったように、お互いの「意志」や「状態」を明確にするためのコミュニケーション手段として、インタフェースがあると考えるのが最もわかりやすいでしょう。
現在のコンピュータを例にして言えば、その命令はマウスとキーボード、またはマイク(音声)を使用し、コンピュータ側は現在の状態をモニター(画面)や、ランプやメーター、またはスピーカー(音)で返してきますね。
これが、テレビや電話、クルマであれば、リモコン、ダイヤル、ボタン、スイッチ、ハンドル、ペダル・・・という器具を使うというあんばいです。
時代は文字からグラフィックによるインタフェースへ
こうした進化の中で、いち早くコンピュータの小型化に取り組んでいたIBMに搭載されたOS(オペレーティングシステム)に採用されたのが、このことで莫大な資産を築き上げたマイクロソフト社のMS-DOSです。
このシステムでは、キーボードにより命令文を入力することでコンピュータを動かしますが、これをキャラクターユーザーインタフェース(CUI)と言います。
すべてコンピュータが理解できる用語を使用するので、熟練度が高くないとコンピュータを扱うことができませんでした。
これに対して、アップルがApple IIというコンピュータを発売した2年後のある日、Xerox社のパロアルト研究所をスティーブ・ジョブズが見学に訪問しました。
世界初のマウスを使い、グラフィカルな画面を操作するワームというマシンの性能に目を付けたスティーブ・ジョブズによって、初代Macintoshのインタフェースとして、世界で初めてマウスを使ったパーソナルコンピュータが誕生。
これによってまったく知識のない子どもでも直感的にコンピュータを操作できる環境が整いました。それが、グラフィカルユーザーインタフェース(GUI)です。
我々が、日常的に口にする「UI」というのは、まさにこの「GUI」を指しています。
UIデザインは、デザインであるようでデザインではない!
冒頭でもお話ししたとおり、普通にUIデザインといえば、ボタンの表現方法だとかフォームの作り方だとか、ローテーションバナーの動かし方だとか、ハンバーガーメニューの演出やメニューの格納方法だとか、他社のデザインを参考にされている方も多いことでしょう。
そして、「あ、この表現はおもしろいね!」「カッコイイからアレンジしよう」などと、アイデアやイマジネーションを膨らませていることでしょう。
しかし、ちょっと待ってください!
今、みなさんが見ているそのUIデザインは、表面的な「事象(結果)」であって、その機能に至るプロセスや要因、目的や手段など、目に見えていないことがたくさん隠れているということにお気づきですか?
まさに、その「目に見えていない部分」のさまざまな戦略や情報価値は、表面的なデザインだけでは確認することはできませんが、推測は可能なので、その点でその部分も含めて参考にすることは大いに重要なことなのでオススメします。
しかし、インタフェース設計における情報デザインに最も大切なことは、その見た目や派手さ、主観的な趣味・嗜好に沿うか沿わないかではありません。
大切なことは、使いやすいか?わかりやすいか?間違えにくいか?ストレスを感じないか?なのです。
人間が過去に実証してきた、膨大な量の「立証された統計データ」を参考にしない手はない!
●人間がどんな時に情報を見つけやすいのか?
●どんな状態だと情報を見落としやすいのか?
●どんな表現方法を使うと間違いが起きにくいのか?
これまで学問として研究されてきた、「認知心理学」「人間工学」「人間行動学」などの中に、WEBサイトにおける情報デザインに役立つ情報が多々あり、そういった過去に蓄積された統計情報を参考にすることで、無用なデザイン表現やムダな要素に惑わされたり、堂々巡りすることなく効率的で確実性の高いサイト内誘導導線を表現できると言えるでしょう。
そう考えれば「どんな表現方法が良いか?」の前に、どんな組み合わせが適切なのかという統計的知識を持っておくことが大切ではないかと、強くオススメする次第です!
その上で、
1. 既存のデザインの問題点や実現できていなかった課題を抽出し、
2. その改善策や改善方法を吟味した上で情報デザインを設計・構築し、
3. それを元にデザイン表現で包んで上げる
利用環境や利用条件を考慮すると、デザインは必然的に変わる!
一見すると、同じようなものでも実は、用途や目的によってまったく異なるデザインになることは日常の中にも大量にあふれています。
例えば、電話と電卓。同じ10キーを使うのに配列が違いますよね。
いっそのこと合わせてくれればミスタッチしないのにと、嘆きの声が聞こえてきそうですが、そもそも別々に進化してきた電話と電卓は、やはり配列が違うのには理由があります。
特に電卓は、カシオ計算機が卓上計算機の開発を果たしたころからこの配列なのですが、数字の「5」をホームポジションとして指を10キーの上に置いてキーを叩く際、「0」「1」「.」「=」「+」などは利用頻度が高いため、もっとも打ちやすい位置に配置することが理想であることから、下から数字が並べられています。
一方電話の場合は、もともと電話はダイヤル式からプッシュ式に進化した際に、TU-T(国際電気通信連合の中の電気通信標準化部門)の勧告によって決められたものですが、電話は「1」がもっとも短い回転で「0」がもっとも長い回転をするようにダイヤル式では作られていました。
また、人間は文字の固まりを見る際左上から見始める習性があることから、左上に「1」を配置し、「0」で終わるように下に向かって並べられています。
デザインは、常にその用途や目的、環境に基づいて基準が作られ、表層のデコレーションやコーディネートは二の次であるということがわかると思います。