UIの種類（１１種類＋α）
①CLI(command-line user interface)
キーボードを用いて文字列で指示を与えてコンピュータを操作するインターフェース。
CUI（Character UI)とも言われる。
例えば、OSの操作をするなら、操作が可能になるとプロンプトと呼ばれる短い記号や文字の組み合わせが画面に表示されて、人間がソフトウェアに命令などを入力しやすくしている。
具体的には、Enterキーなどで入力内容を決定すると、コンピュータ側の処理が始まり、結果がコマンドの次の行から1行または複数行に渡って出力される。
処理が終わり、再度入力可能になると、改行されて新しい行の左側にプロンプトが表示されて、コマンド入力待ちになる。
1970年代に大型コンピュータやUNIX系システムの操作環境として普及したのもあって、今でもこれらの業務用や技術者向けのコンピュータシステムではCUI環境が好まれてる。
映画とかドラマで、ハッカーみたいな人が、文字だらけのパソコンの画面に向かって「カタカタカタ、、、、パァン（Enterキー）」ってしてるアレはCLIですね。
②NUI（Natural UI)
タッチやジェスチャーなど、人間にとって自然で直感的な方法でコンピュータやソフトウェアを操作するUI。
CUIは詳しくないとムズいので、GUI(Graphical UI)という今の普通のパソコンのUIが普及した。
cdとかmv みたいなのがCUIのコマンドなのですが、こんなのを知らなくでも×ボタンを押せば画面を閉じたり、「何となく」で操作できますよね。
この考え方をさらに発展させて、パソコンのマウスみたいな専用の装置を使わずに、人間の日常の動作の延長でコンピュータに指示を与えられることを目指している。
スマホたタブレットはスクリーンを指で触れることで処理を指示できるので、ある程度NUIの概念を体現していると言える。
「テレビにカメラやセンサーをつけて手指や体全体の動きを検知して、チャンネルや音量を変えることができるんです。すごいですね！」みたいなニュースを2016年くらいにテレビで見ました。
スマートスピーカーのようなVUI(Voice UI)もNUIの一種をして分類されることがあります。
③VUI(Voice UI)
コンピュータと人間とのやり取りを音声によって行う操作方式。
「人間→コンピュータ」は声で、「コンピュータ→人間」は合成音声によって伝達する。
CUIやGUIなどは、人間が装置を手指で操作し、コンピュータが画面に文字や図像を表示して答えているが、VUIでは、音声認識を用いて発話内容を文字に置き換え、自然言語処理によって指示の内容を理解する。
最近の機械学習などの人工知能に関連する技術の飛躍的な進歩や、半導体の性能の向上によって、スマホのような一般的な情報機器でも現実的な値段で実装できるようになった。
④ジェスチャーインターフェース(gesture interface)
NUIの一種。人体の部位の動きを読み取って入力や操作を行う方式。
人体から離れた位置からカメラや空間センサーで動きを検出する方法と、加速度計などが内蔵された装置を身に付ける方式がある。
指、手、腕、足（足踏みなど）、頭部（首振り、頷きなど）、口（発音でなく開閉の動きを検知する）、まぶた（瞬きやウインク）などがよく検知の対象となる。眼球の動きを読み取る技術もあるが、ジェスチャーとは区別して「アイトラッキング」を呼ぶことが多い。
体が不自由でも瞬きだけで文字を入力できる装置など、医療への応用や、体験型のエンタメへの応用の研究が進んでいる。
Nintendo Switchのコントローラを手に持って、パンチとかして遊ぶゲームはgesture interfaceのゲームといえます。コントローラーに加速度計やジャイロスコープが内蔵されています。
昔ならWiiリモコンも。
⑤WUI(Web UI)
ソフトフェアの表示や操作をWebページやWebブラウザ（safariとかgoogle chrome）で行うこと。
WebサーバからWebページとして構成された操作画面を送信し、利用者のコンピュータ（スマホとか）上で動いているWebブラウザ（safariとかgoogle chrome）でそれを受信・表示して人間が操作する。
利用者は個別にソフトをインストールしなくてもWebブラウザさえあればすぐに利用でき、Webブラウザが動作する環境なら複数の機種やOSに対応しやすいのがメリット。
デメリットは、コンピュータ上で直にソフトフェアを操作するのと比べて、操作性や応答性（反応がいいかどうか）、機能性などが劣ることが多い。
YouTubeはブラウザで見るよりアプリで見る方がいいっていう人多いですよね。
表示内容の構成はHTMLやCSS、画像などを組み合わせて行い、入力フォームやjavaScriptなどで利用者の操作を受け付けて、サーバーに送信し処理を行うのが一般的だが、Webページの技術をほとんど使わずに、Adobe Flash（２０２０年に提供終わりましたね）やjava アプレットなどをブラウザ上で動作するソフトもあり、これは
WebサーバからWebページとして構成された操作画面を送信し、利用者のコンピュータ（スマホとか）上で動いているWebブラウザ（safariとかgoogle chrome）でそれを受信・表示して人間が操作する。
利用者は個別にソフトをインストールしなくてもWebブラウザさえあればすぐに利用でき、Webブラウザが動作する環境なら複数の機種やOSに対応しやすいのがメリット。
デメリットは、コンピュータ上で直にソフトフェアを操作するのと比べて、操作性や応答性（反応がいいかどうか）、機能性などが劣ることが多い。
YouTubeはブラウザで見るよりアプリで見る方がいいっていう人多いですよね。
表示内容の構成はHTMLやCSS、画像などを組み合わせて行い、入力フォームやjavaScriptなどで利用者の操作を受け付けて、サーバーに送信し処理を行うのが一般的だが、Webページの技術をほとんど使わずに、Adobe Flash（２０２０年に提供終わりましたね）やjava アプレット（これはあまり普及しなかったそうです）などをブラウザ上で動作させるソフトもあり、FlashのデータをWebサーバからブラウザに送信して実行する形式のシステムもあった。
⑥Touch Interface
スマホとかATMのUI。
タッチパネルとGUIを入出力に使う方式。
複数の指で操作できるUIだと、特にマルチタッチインターフェースと呼ばれる。
⑦ZUI(Zooming UI)
ユーザーが詳細を見たり全体を概観するために表示領域を拡大縮小できるグラフィティカル環境。GUIの一種。
情報要素は無限の広さを持つ仮想デスクトップに配置される。
⑧バッチインタフェース
バッチ処理（一定量のデータをまとめて処理する）で使われる対話型でないUI。
ユーザはバッチ処理したいデータをまとめて入力し、全ての処理が完了した時点で出力結果を得る。
処理が始まると、システムはさらなる入力を求めることはない。
⑨リフレクシブ・ユーザーインターフェイス
UI全体をユーザが再定義可能な方式。主に非常にリッチな（マニアックな）GUIでのみ可能。
⑩テキストUI
GUIが考案された後に名付けられたレトロニム（レトロニムとは、たとえば携帯電話が登場するとそれまでの「電話」は固定電話と呼ばれるように、新しい技術や概念と区別するために命名され直した言葉）だ。
一般的なテキスト端末で表示できる文字や記号しか画面に表示しないが、CUIとは少し違い、画面全体を使い、出力も1行ずつとは限らない。
⑪タンジブルユーザインタフェース
既存のコンピュータの概念を一新し、形のない情報を直接触れることができる（tangible/タンジブル）ようにした、より実体感のあるインターフェースである。
クリアボードはタンジブル最初期の例。透明な板に、文字や絵を描くことで、遠隔地の同じ板にもそれを表示させることができる。電話やメールなどよりも表現力豊かで、faxなどよりも簡単な機器として注目を集めた。(wikipediaより)
任天堂のアミーボとかもこれですね。
その他
・VR（オキュラスとか）
画角が広いし、立体的に見えるが、VR酔いする。
余談
筆者（２Dゲームなら数時間やっても酔わない）もオキュラスをレンタルしたことがありますが、フィールドを散策しながら敵を狙撃するFPSゲームは３０分もすれば食欲失せるレベルで結構気持ち悪くなりました。２,3時間プレイしたら（なぜプレイした）吐きそうになりました。遠くから的が流れてきて、的にパンチを当てるボクササイズゲームは３０分プレイしても酔いませんでした。まぁ疲れるので何時間もはやらないだけで、ずっとやれば酔うかも。
・AR（ポケモンGOとか）
・物理的なやつ（QRコード、バーコードとか）（タンジブルとは違う）
・ペンinterface（DSのタッチペン、appleペンシルとか）
・ブレイン・マシン・インタフェース（脳にチップを直接埋め込むやつ）
ニューラリンクって会社が取り組んでいて、2021/4には猿が実際にゲーム(Pong)をプレイした。
しかし「実験には計23匹のサルが用いられ、うち少なくとも15匹が死亡または安楽死させられている。」らしい。取り組みが続くかもわからないし、実現するとしても数十年先だろう。
ソース
UIを評価するデータ取集方法（７種類）
評価をするためにはデータ集めます。ここではデータの収集方法とそのメリット・デメリットを見てみましょう。
①アンケート（物理的な紙で）
メリット
・同時に何枚も低コストで用意できる
・全体の傾向が把握できる
・回答者がどうやって回答すればいいかが分かりやすい
デメリット
・回答に時間がかかりやすい
・回答をデータ処理するために結局コンピュータに入力するので手間がかかり、さらに入力ミスがあり得る
・記入漏れが回答を回収した後にしかチェックできない
②アンケート（コンピュータで）
計算機援用と呼ばれたりする
メリット
（紙のアンケートのメリットほぼ全部）
・記入漏れチェックが回答中にできる（「選択していない項目があります」みたいな）
・回答が楽
デメリット
・人数分の装置が必要（特に最近はスマホなど、各自の端末で回答できるようにすれば解決できる）
・UIが悪いと回答方法（操作方法）が分かりにくい
③A/Bテスト
２つのデザイン案を比較できる。
例えばTwitterのユーザーの内、半分のユーザーには青の色味を少し変えた画面が表示されるようにして、もう半分には何もしない。この結果、どちらの方が長い時間Twitterを利用するか調べる。みたいな感じ。
メリット
・低コスト
・データ収集・分析が容易
デメリット
・ユーザー数が多くないとできない
④アイトラッキングテスト
画面上を移動するユーザーの視線（眼球の動き）を追跡する。
UIの内、どの要素が見つけやすかったか・にくかったか、気を逸らすかを判断できる。見て欲しいコンテンツにユーザーを集めるにはどうすればいいのかのヒントが得られる。もちろん、眼球の動きを測定しているだけなので、本当に「見ている」とは限らない。（ぼーっとしていて他のことを考えているかもしれない）
メリット
・ページのどの要素がユーザーの目につくのかについて信頼性のある情報が得られる
デメリット
・かなり高コスト
・器具の使用に高度な専門知識が必要
⑤デザイラビリティ調査
ブランドや製品のイメージなどを定量的に測定しようとする調査。
一般的には、その製品に初めて触れる人を参加者に選ぶ。
単語のリストからデザインを説明するのにふさわしい言葉を参加者に選んでもらう。
メリット
・専門知識が必要なく、分析も簡単
・低コスト
デメリット
・母集団が大きい必要がある
⑥Webアナリティクス
ユーザーが実際に何をクリックしているか、どのメディアから来ているか、どねページから離れているかなどを調べるために用いられる。
メリット
・低コスト
・データが集めやすい
デメリット
・やや高度な専門知識が必要
⑦間接的観察
カメラなどでユーザの行動を記録する。こちらからユーザに何かしてもらうのではなく、ユーザが何かを普通に使っている状態を観察する。（自動販売機で何秒滞在するかとか）
メリット
・ユーザの自然な状態の行動のデータが取れる
・自動でデータを集められる
デメリット
・データが膨大で必要ない部分も多い
簡単な行動（滞在時間、通過人数）を記録するならプログラムがあれば楽だけど
その他
・フィールド調査
👍ユーザの文脈が理解しやすい。問題に対する認識も洗練される
👎時間（とお金）がかかる。データが膨大でノイズが多い
・実験室での観察
👍理想的な環境で詳細なデータが得られる
👎一般性に欠けることも
UIデザインに関する色々
何かをデザインして「いい感じ」「これいらないよね」みたいに議論する時に、フワッとしやすいので、離散的な判断基準を設けることで議論しやすくなることもあるでしょう。以下にそういったものになりそうな原理とかを書いてみました。
ノーマン（Norman）のインターフェースのデザイン６原理
これは、他のUIデザイン原則よりも論拠や学問的裏付けがちゃんとしているということで有名だそうです。
①Visibility（可視性）
ユーザーがパッと見て、全ての選択肢が把握でき、アクセスもしやすい。
例えば、直感的に分かる図で選択肢を示す。
②Feedback
ユーザーのアクションに対して、画面でリアクションしなければならない。
例えば、検索ボタンを押して結果が表示されるまでに、「読み込み中」を表す回転する円🔄を表示すれば、「今何かが起きている」ということがわかる。
そして、円が消えればユーザーはまた何かをすればいいのだとわわかる。
③Affordance（ものが持つ意味）
製品そのものに使い方をユーザに教えさせる。
ex. ドアの取っ手は人間に使い方（握ればいいよ）を教える。
つまり、ドアに取っ手をつければ、「製品そのものに使い方をユーザに教えさせる」ことになる。
〜〜〜以下、何か長く書いていますが、無視して④番見てもらったので大丈夫です〜〜〜
物の使い方の候補は無数にあって、人間がその中から良さげなのをピックアップしている。
知覚心理学者のジェームズ・ギブソンが「afford」という動詞をもとにした造語。（のちにドナルドノーマンが広めた）
従来は、見聞きした「情報」を脳が解釈して、情報自体に意味はないが、その後で人間が意味を見出すという捉え方が普通だった。（切り株はただ意味なくあるだけ、人間が「あ、座れそう」と思いつく）
しかしギブソンは、まず環境側にすでに意味があり、人間がそれを見つけているという捉え方を提案した。（切り株は「座れる」「ものを乗せれる」「待ち合わせ場所にできる」などの意味（アフォーダンス）を持っていて、人間が「あ、座れるじゃん」とその意味を見つける。）
ちなみに、
人間が「あ、座れるじゃん」とその意味を見つける
を言い換えると
切り株が「座る」と言う行為を人間にアフォードした
になる
「アフォード」の例文
・「ドアの取手」を見れば「押すんだな」「引くんだな」とわかるので、ドアの取手はドアの取手本来の行為（押す・引く）をアフォード（提供）している。（色々アフォーダンスがあるけど、取手をヒントにして、人間が「押すんだな」と、その意味を見つけた）
・机の高さが低かったので、「座ることもできるな」という情報を机が発信しているといえる。つまり、座るという行為がアフォードされた。
他にも例えば、ドアのデザインがちゃんとしていないと、「このドアは押すの？引くの？スライドするの？パカっと開くの？」というように、アフォードされる行為の候補が多い。
「押す」「引く」「スライドする」などのアフォーダンスがあって、（signifier（※後述）がないので）ドアが人間にその行為を正しくアフォードできないかもしれない。
見たら使い方が分かるデザインにすべき。例えば、コーヒーカップは見たら「ここに飲み物を入れて、この持ち手を持てばいいんだな」とすぐわかる。Webページなら、見たい情報にすぐにアクセスできるようにしなければならない。
ただ、やっぱ分かりにくかったので、ノーマンは「signifier」（シグニファイア）という言葉を使うようになった。やっぱプロでもこういう「ミス」はあるものなんですね。（「ヒューマンエラー？いや、デザインが悪い」と言う彼の言葉に従って、アフォーダンスという造語を多くの人間、おそらく半分以上の人間が誤解するのは造語に問題があると捉えてみました。正確には、彼は広めただけで、affordanceと言う言葉は作ったのは別の人ですが。）signifierはアフォーダンスより語義が限定的でわかりやすい。
signifierは、人間をある行為に誘導するためのサイン。
例：ドアの取手、カップの持ち手、リンゴみたいなマークの電源ボタン
上の２つの蛇口を見て、それぞれどう使えばいいか一目見てわかりますね。
元々は無数にアフォーダンスがあって、signifierのおかげで人間がどう行動すればいいか分かる、と言えます。
④Mapping
今どこにいるのかを示す。
例えば、長いページなら右側にスクロールバーが付いている。これによって、ユーザーは今ページのどの辺にいるのかがわかる。
⑤Constraints（制限）
物理的な制限で言うと、スマホの画面のサイズだ。サイズに制限があるからそこ表示する内容や表示の仕方を決めやすくなる。
他にも、ページを閲覧するには基本的に上から下にスクロールするのが一般的だ。
何でもできる様にしすぎると、逆にやりずらいです。
・mapだけでなく、文章を読むときも斜めにスクロールできるスマホはより自由な操作を実現しているはずが、多分使いにくそうですよね。
・自由研究でなく、植物の成長研究って言われたら、「とりあえず、観察日記つけるか」みたいな考えがすぐ浮かびますよね。
⑥Consistency（一貫性）
同じ操作に対しては同じ応答をすべきだ。
例えば、ピンチアウト（二本指で広げるやつ）すれば画面は拡大される。
✖︎ボタンは画面を閉じる。
これらの動作が変わって、✖︎ボタンで再読み込みとかになったらこの世が終わる。
ロゴなども一貫性が合った方がいい。
ニールセン（Nielsen）のユーザビリティ（使いやすさ・分かりやすさ）１０原則
ノーマンの６原則と主張は大体同じです。
①一貫性と標準化
サイト内で使う色や形状、操作方法には一貫性を持たせつつ、広く一般的な使い方ができるようにする。もし、ボタンが全て赤色なのに、赤色の見出しを作れば、ユーザはそれをボタンだと誤解するだろう。
標準化で言うと、一般に、コンテンツにクリックすればそのコンテンツのページに遷移するし、ユーザーはそれに慣れているので、そのように設計すべき。実際、アンドロイドでもiOSでもスマホの操作が大体同じ。
②システムの視認性を高める
ユーザーに、今どういう状態かを認識してもらう。
例えば、歩行者用の信号機は青だがもうすぐ赤になる時は点滅してユーザー（歩行者）にもうすぐ赤になることを知らせる。
③現実を参考にする
例えば、電卓アプリは実物の電卓とレイアウトなどを同じにしている。
ユーザーは電卓アプリの操作が初めてでも、今までに実物の電卓を使ったことがあればすぐに操作できる。
④ユーザーに自由と主導権を
ユーザーが自分で操作の間違いを修正できる。
どんなに操作に慣れたユーザーでもボタンを押し間違えることはある。
例えば、ラインなら「送信取り消し」ができる。
⑤エラーの発生を事前に予想
ユーザーがやりたい操作を解釈するようなシステムを作り、期待している結果を返す。
例えば、文字を打ち込むなら誤字があるはずなので、「あんぱn」と検索しても「あんぱん」と検索した場合の結果が出力される。
⑥知らなくても見ればわかるように
人は記憶を思い出す方法は２つある。
経験したことをそのまま思い出す再生記憶（「先月何した？」とか「さっきの授業どんな内容だった？」「この記事の前半どんなだっけ？」って言われても思い出しにくい）と、
見聞きした言葉などをトリガーに思い出す再認記憶（「国内旅行したことある？」「ノーマンの原則の一貫性の内容どんなだっけ？」と言われると比較的思い出しやすい）だ。
やはり後者の方が簡単に思い出せるので、アンケートなども、自由回答よりも、選択肢から選んでもらうようにした方が回答されやすい。
何もない状態から思い出しながら操作するより、用意されている情報をもとに記憶していることを思い出しながら操作する方がやりやすい。
⑦柔軟性と効率性
初心者には分かりやすく、経験者には効率よく操作できるようにする。
例えば、パソコン初心者なら検索、ページ切り替え、ブックマークに登録などの操作はアイコンをクリックすればでき、経験者ならショートカットキーで効率的に操作できる。
⑧シンプルで美しいデザイン
情報が多すぎるとユーザーに負担がかかるので、スムーズに操作し目的を達成できるように過剰な装飾を避ける。
⑨ユーザーがエラーを認識・診断・回復できるようにする
システムエラーやユーザー起因のエラーが、なぜ起きたのか視覚的に分かりやすく表示し、解決方法を具体的に明示する。例えば、Wi-Fi通信の接続が失敗してメールが送れなかったなら、「通信エラーです。接続を確認して、もう一度メールを送信してください」みたいなメッセージを表示する。
⑩ヘルプとマニュアルを用意する
ヘルプが必要ないのが一番だが。
ヘルプには簡単にアクセスでき、見つけたい内容が探しやすく、実行するための具体的な手段・方法が記載されているといい。
ユーザーがヘルプを求める状況を色々想定することが必要だ。
最近は、用意されたローカル（オフラインでも見れるやつ）のヘルプより、公式サイトもしくは民間のブログ記事をググって閲覧することが多い気はしますが、家電とか物によってはヘルプ使いますね。
個人的には紙はなくすし、かさばるので、スマホで見れるのが一番助かります。特にゴミ分別とかだと文字検索とかもできるので。さらに言うと、pdfをスマホにダウンロードだと、ダウンロードしたこと自体を忘れるので、web閲覧の方がいいですよね。
おまけ：ノーマンとの類似点と相違点
ざっくり振り返りと概要↓
ノーマン
一貫性
視認性
マッピング
アフォーダンス
フィードバック
制約
ニールセン
一貫性
効率性と柔軟性
視認性
知らなくても見ればわかる
現実を参考に
シンプルで美しいデザイン
ユーザに自由と主導権
エラーを予想
ユーザがエラーを認識・診断・回復
ヘルプとマニュアル
類似点
・類似したタスクは類似した操作で行えるようにすると、操作を覚えやすい
・内容とデザインの対応が一貫している
・前提知識がなくても製品を見ればどうすればいいかが推測できる
・そのシステムの状態が見れば分かる（「読み込み中」「ダウンロード完了」とか）
・現実の文脈を利用して機能を推測しやすくする
相違点
ニールセンの方が、ユーザのエラーに関する言及が多い。
ニールセン
・間違いをユーザが自分で修正できる（ラインの送信取り消し。undo機能）
・エラーを予想し回避（誤字のまま検索しても「もしかして？」）
・それでもエラーが起きたら、なぜそのエラーが起きたのかを視覚的に、その解決策を具体的に表示
・簡単にアクセスできるヘルプを用意（ユーザがヘルプを求める状況を色々想定する）
「誰のためのデザイン？」の紹介
「誰のためのデザイン？」はUI関係で一番有名そうな本です。
ドアを間違って押したり引いたりするのは操作ミスでなく、設計ミスだと指摘。人間中心デザインにすべき。
デザイン７原則（この本ではアプデされて７原則になってた）
１＿発見可能性：その機器で何ができるのか、機器が今どういう状態かが分かる
２＿フィードバック：機器が今どうなっていて、ユーザの行為によってどう反応したかが、完全かつ継続的にユーザが分かる必要がある
３＿概念モデル：あるモノがどう動くかの簡素な説明。発見可能性の向上に役立つ
４＿アフォーダンス：望ましい行為を導く
５＿シグニファイア（アフォーダンスと言う言葉がわかりにくいので追加されたやつ）：発見可能性を確かにする。（このボタンを押せばいんだな）ユーザにフィードバックを伝えられるように設計する（ボタンを押したら凹む）
６＿対応づけ：ユーザの行為がどういう意味を持つかを伝える。例えば、ミュートボタンを押せば、素早くミュートになり、もう一度押した時にすぐ解除されれば、ユーザはそのボタンがどのような意味を持つかが分かる。ボタンの位置も音量ボタンの近くに設置するなどの必要がある
７＿制約：物理的、論理的、意味的、文化的な制約。選択肢を狭めると解釈しやすく、行為を導ける
最後に
結構専門的な内容が多く難しかったかもしれません。
書きながら思ったのは、こういうのって知らないからできないって感じじゃなくて、知ってるけど手間がかかる系だってことです。まぁ大体のことってそうですが。
本記事も、あまり推敲していないのにUIの何たるやを書いていて恥ずかしいですが、ご容赦ください笑
コメント