ＵＩ設計｜ UI八原則

Ver.261026_1

🔰 はじめに

UIやUXについて考えていると、

「これは使いやすい」
「これは気持ちいい」
「これはなんかムカつく」

と思うことがある。

では、その違いは何なのか。

ボタンの位置が悪い。
文字が読みにくい。
目的のページまで遠い。
押したのに反応したのかわからない。

個別の問題はいくらでも挙げられる。

でも、それらの問題にはもう少し根本的な共通点があるんじゃないかと思った。

そこで、日常生活で自分が「気持ちいい」と感じるものを考えてみた。

色が色相環で並んでいる。

文字が五十音順で並んでいる。

データが時系列で並んでいる。

本の背表紙だけで内容がわかる。

データ名に命名規則がある。

フォントや文字サイズが揃っている。

付箋をつけたページへすぐ移動できる。

角が丸く、手に引っかからない。

表面がサラサラしている。

スイッチがパチッと入る。

部品がカチャッとはまる。

溜めて、放つ。

吸って、吐く。

こうして並べてみると、デジタルと物理的な道具を問わず、いくつか共通する性質が見えてきた。

それを現時点で8つに分類したものを、

「 UI八原則 」

と呼ぶことにする。

⸻

🧭 秩序予測性

規則があり、次に何があるか予測できること。

五十音順、時系列、色相環、命名規則、固定されたフォーマットなど。

人間は規則を理解すると、
すべてを一つずつ確認しなくても次を予測できる。

「あの辺にあるはず」

が成立する。

逆に、
使うたびに順番が変わったり、
同じ役割のものが違う形式で表示されたりすると、
以前の経験を次の操作に利用できない。

優れたUIは、利用者に毎回ゼロから学習させない。

⸻

👁️ 視認識別性

見ただけで、それが何なのか識別できること。

本には表紙だけでなく背表紙にもタイトルがある。

箱には正面だけでなく側面や天面にも情報が書かれていることがある。

なぜなら、物はいつも正面から見えるとは限らないからだ。

UIも同じだと思う。

開かなければ内容がわからない。

押さなければ違いがわからない。

前の画面を覚えていなければ判断できない。

そうなるほど認知の負担は増える。

探せばわかるより、見ればわかる。

情報は存在しているだけではなく、必要な場面で認識できる必要がある。

⸻

🧠 判断低減性

目的とは関係のない判断を減らすこと。

どこに保存しよう。

何という名前にしよう。

どのボタンを押せばいいんだ。

これはどの分類なんだ。

人間が何かを作ったり読んだりするとき、
本来考えたいのはそんなことではない。

創作するなら創作について考えたい。

文章を読むなら文章に集中したい。

UIを操作するためだけに発生する判断は、可能な限り減らしたい。

選択肢が多いことと、自由であることは必ずしも同じではない。

⸻

✨ 洗練明瞭性

必要なものの輪郭が、
ノイズに埋もれていないこと。

・フォント
・文字サイズ
・余白
・情報の階層
・色
・形
・要素の数

これらが整理されることで、重要な情報が明瞭になる。

ここで重要なのは、情報量を少なくすることではないと思う。

大量の情報が存在していても、規則と階層が整理されていれば理解できる。

逆に情報が少なくても、重要度がわからなければ使いにくい。

情報量とノイズ量は違う。

削ることそのものが目的ではない。

必要なものが、必要な強さで見えることが重要だ。

⸻

🫧 流動快適性

行動が途中で引っかからず、滑らかに続くこと。

現実の道具なら、

・軽い
・持ちやすい
・角が引っかからない
・手触りがいい。

デジタルなら、

・画面遷移が自然
・スクロールが途切れない
・戻ったときに元いた場所が保たれている
・連続した作業を途中で分断されない

一つひとつは小さな摩擦でも、
それが何十回、何百回と繰り返されれば大きな負担になる。

良いUIは、利用者がUIそのものを意識せず流れていける。

⸻

🫰 操作応答性

操作に対して、わかりやすい反応が返ってくること。

・押した
・選んだ
・入った
・閉じた
・移動した
・保存された

現実世界では、
スイッチがパチッと動いたり、
部品がカチャッとはまったりする。

その感触によって、

「操作が完了した」

と理解できる。

デジタルでも、
色、形、動き、音、振動などによって
状態変化を伝えられる。

反応は単なる装飾ではない。

自分の行動が世界に作用したことを確認する情報でもある。

そして、
その反応自体が気持ちよければ、
操作することそのものが楽しくなる。

⸻

🐎 移動到達性

目的の場所まで、
迷わず少ない負担で到達できること。

・検索
・索引
・付箋
・ショートカット
・現在地表示
・階層構造

これらはすべて、目的地までの移動を助ける。

ただし、検索機能をつければ解決するとは限らない。

理想は、

そもそも探す必要がないこと。

どこに何があるかわかる。

よく使うものが近くにある。

一度覚えた場所が勝手に動かない。

遠くにあるなら、そこへ一気に移動する方法がある。

目的の情報へ行くだけなのに、何頭もの馬を乗り潰すようなUIにしてはいけない。

⸻

♻️ 呼吸循環性

情報や行動に、溜める・放つというリズムと循環があること。

これは他の7つとは少し性質が違うかもしれない。

・読む
・休む
・また読む
・集める
・整理する
・放つ
・入力する
・出力する
・集中する
・解放する

人間は同じ密度、同じ緊張、同じ刺激を永遠に受け続けるようにはできていない。

文章にも余白がある。

音楽にも間がある。

呼吸にも吸う時間と吐く時間がある。

UIやUXにも、時間の設計があっていい。

ずっと情報を浴びせ続けるのではなく、

人間の認知が呼吸できること。

そして、作る、蓄える、整理する、見つける、使う、また作るという循環が自然につながること。

これを「呼吸循環性」と呼ぶ。

⸻

📝 まとめ

八原則は完成していない

以上が、現時点で考えているUIUX八原則。

🧭 秩序予測性
👁️ 視認識別性
🧠 判断低減性
✨ 洗練明瞭性
🫧 流動快適性
🫰 操作応答性
🐎 移動到達性
♻️ 呼吸循環性

ただし、これは完成した理論ではない。

そもそも本当に8つなのかもわからない。

二つを統合するかもしれない。

新しい原則が増えるかもしれない。

名前も変えるかもしれない。

実際のUI、プロダクト、空間、日用品などを観察しながら、

「なぜこれは気持ちいいのか」

「なぜこれは使いにくいのか」

を分類していくための、現時点での仮説だ。

理論に現実を合わせるのではなく、

現実を観察して理論を更新する。

だから今後、使いやすいUIを見つけたら、

「これは🫰操作応答性が高い」

と言える。

クソUIを見つけたら、

「これは🧭秩序予測性と🐎移動到達性に抵触している」

と言える。

感覚だけで「なんか使いづらい」と言うより、どこで認知や行動が阻害されているのかを考えられる。

UI八原則は、UIを褒めたり取り締まったりしながら更新していく。

ロボット三原則のように始めたが、

こちらは平気で改正する。

研究中なので。

🦆💬 ガァ

( ↓関連記事はこちらから )