1.UIとは
UIはUser Interface（ユーザーインタフェース）の略称です。「User」はその言葉通りユーザー（利用者）を指します。「Interface」は境界や接点の意味を持ちます。システムとシステムの間や人間と機械の間を結びつける存在です。
私達が扱うインターフェースには大きく3つ存在します。
ハードウェアインターフェース
コンピューターとその周辺機器の接続を行うインターフェースです。USBやHDMIなどの端子がこれにあたります。
画像：写真AC USBケーブル
ソフトウェアインターフェース
ソフトウェア間での通信やデータを送受信するためのインターフェースです。API（Application Programming Interface）がこれにあたります。
ユーザーインターフェース（UI）
人間と機械の間で情報をやりとりするためのインターフェースです。私達は機械やコンピューターに情報を入力したり、その入力によって返ってくる情報を受け取ったりしますが、この仕組みがUIにあたります。
UIはchot.designで多く扱う領域であり、このレッスンのタイトルにもなっています。
2.UIの歴史と現在
次にUIの歴史について紹介していきます。
CUI（キャラクターユーザーインターフェース）
キーボードからコマンドを入力することで、画面上に文字を出力する仕組みです。
当時はキーボードの入力と画面での文字表示による出力でしか操作できなかったため、扱えるユーザーは限られていました。イメージとしてはWindowsのコマンドプロンプトやMacのターミナルを思い浮かべると良いでしょう。その後、誰でもコンピューターを扱えるようにGUIというインターフェースが生まれます。
GUI（グラフィカルユーザーインターフェース）
GUIとはその名の通り、グラフィカルな画面上を操作することで情報を入力したりその結果の出力を受けたりすることのできる仕組みです。
デスクトップやウィンドウ、メニューなどはGUIによってもたらされた要素です。また、画面内に表示されるカーソルを動かすために用いるマウスが一般化したのもGUIによるものです。
Photo by Howard Bouchevereau on Unsplash https://unsplash.com/photos/RSCirJ70NDM
視覚的に操作できるようになったことで、コンピューターは多くの人に使われるようになりました。
現在、スマートフォンやタブレットを代表とするタッチインターフェースやスマートスピーカーなどの音声ユーザーインタフェース（VUI）など様々なUIが生み出されています。
Photo by Kevin Bhagat on Unsplash https://unsplash.com/photos/9TF54VdG0ws
将来、ユーザーインタフェースはさらなる進化を遂げ、それに伴い私達がデザインする領域はより広くなっていくことでしょう。
3.より良いUIを作るために
ユーザーとシステムとのコミュニケーションを円滑に行い、ユーザーに快適だと感じてもらえることがUIの健全な姿です。そのために私達はUIをデザインします。では、より良いUIをデザインするためにはどのようなことに気をつけなければいけないか、一部をご紹介します。
デザインの原則を用いる
伝えたい情報をわかりやすく正確に伝えるために必要なデザインの原則です。
chot.designではデザインの原則について学べるレッスンを用意していますので、是非読んでみてください。
ユーザビリティの原則やガイドラインを用いる
「ユーザビリティ」とは使いやすさ・使い勝手を指します。ユーザビリティを高めることはユーザーの負荷を軽減することに繋がります。
ユーザビリティの原則として、以下のような原則があります。
ヤコブ・ニールセンの10原則
詳細（英文）：https://www.nngroup.com/articles/ten-usability-heuristics/
- システム状態の視認性を高める
- 実環境に合ったシステムを構築する
- ユーザーにコントロールの主導権と自由度を与える
- 一貫性と標準化を保持する
- エラーの発生を事前に防止する
- 記憶しなくても、見ればわかるようなデザインを行う
- 柔軟性と効率性を持たせる
- 最小限で美しいデザインを施す
- ユーザーによるエラー認識、診断、回復をサポートする
- ヘルプとマニュアルを用意する
また、UIのガイドラインとしては以下のような指針が存在し、この指針を守ることでユーザーに最適なUIを提供することができます。
シュナイダーマンの8つの黄金律
詳細（英文）：https://www.cs.umd.edu/users/ben/goldenrules.html
- 一貫性を保つ
- ヘビーユーザーがショートカットを使用できるようにする
- 有益なフィードバックを提供する
- 完了を伝えるダイアログを設計する
- 単純なエラー処理を提供する
- アクションのやり直しを許可する
- 内部要因思考をサポートする
- 短期記憶の負荷を減らす
その他に、ハードウェアやOS、サービスに存在するデザインガイドラインを用いることでユーザがストレスを感じることなく操作できるUIを生み出すことができます。
例：iOS Human Interface Guideline（英文）
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
UXデザインのプロセスを取り入れる
UXについては次のレッスンで詳しく説明します。
UXデザインのプロセスを取り入れることで、ユーザーにとってより良い体験を生み出すことに繋がります。
4.まとめ
ここまでUIについて言葉の意味から歴史、そしてより良いUIを生み出すための要素を紹介しました。
次のレッスンでは「UX」について紹介します。
