はじめに
良いインターフェース、インタラクションコスト（操作を通してユーザーにかかる負荷のこと）を抑えることが大切です。
改善例を載せながら、良いインターフェースの理解を深めましょう！
良いインターフェースにするためには…
画面を操作して自身の目標を達成する中で、受ける負荷やエネルギー（ストレス）が少ないほど、そのサービスは「使いやすい」と感じます。
そのため、インタラクションコストをいかに減らすことができるかが重要となります。
インタラクションコストを低減するために
インタラクションコストを低減するためには以下の 3 つのことを意識しましょう。
-
シンプルさ
余計な解釈がなく、明快なこと -
一貫性
規則性によって予測がつくこと -
共通概念
誰もが知っている文化的ルールに従うこと
シンプルさ
意図が明快であるため理解しやすいです。（単純とは少し意味合いが違います。）
シンプルであればあるほど、何が起こっているか、何が起こるのかを即座に理解でき、次にどうするかスムーズに決定することができます。
意識例としては以下のようなものです。
- 明快な文言にすること
- 分かりやすいコンポーネントを使用すること
- 幅を揃え、グルーピングすること
実例
実例を見ていきましょう。
※ ↑ 補足：環境名、スケジュール名は入力必須項目
こちらの入力フォームを見て、みなさんは何を感じるでしょうか。
・・・
・・・
さて、僕が感じる違和感を以下に記載しました。
違和感
- Placeholder の文言とラベル名が同じ
- フォーム幅がまばら
- 必須項目であるフォームに必須マークが無い
解決策
これらの違和感を改善するために、以下のような修正を加えましょう。
これによりシンプルさ（明快さ）が加わります。
- Placeholder の文言に入力例を設定する！
- フォーム幅をそろえる！
- 必須項目には必須マークを表示する！
改善された画面は以下になります。スッキリしたのがわかるでしょうか。
一貫性
一貫性が保たれたサイトは、ユーザーが操作を予測しやすくなります。
それにより、ユーザーの学習コストが抑えられる効果もあります。
意識例としては以下のようなものです。
- ボタン、アイコン、文言の統一
- 操作アクションの統一
実例
例えば、同じシステムで更新ボタンがいくつかあったとします。
そのボタンそれぞれの色が異なっていたり、アイコンが異なっていたり、、、画面によってまばらな設定だとします。
すると、ユーザーは混乱し、操作を予測しづらくなります。
またはダイアログを閉じたいときに枠外をクリックしたら閉じるのか、閉じないのかが統一されていないと、ユーザーはストレスを感じます。
同じシステムでも画面によって開発者は異なることは多いので、開発後に一度すべての画面の文言や操作感を確認して、統一するように心がけましょう。
共通概念
一般的に認知されている標準的なルールの事です。
共通概念に基づいた UI にすることで、解釈にかかる負担を小さくする効果があります。
意識例としては、以下のようなものです。
- 下線テキストはリンク
- 色のイメージや意味合い（赤は危険、黄色は注意、など）
実例 1
実例を見ていきましょう。
こちらのボタンを見て、みなさんは何を感じるでしょうか。
・・・
・・・
さて、僕が感じる違和感を以下に記載しました。
違和感
- 黄色は ”注意” のイメージ
- 実行するのに注意が必要なのか、、？
実例 2
もう一つ、実例を見ていきましょう。
こちらのボタンを見て、みなさんは何を感じるでしょうか。
・・・
・・・
さて、僕が感じる違和感を以下に記載しました。
違和感
- グレーや半透明は ”非活性” のイメージ
- 非活性？今は押せないのか？？（実際は押せる）
解決策
これらの違和感を改善するために、以下のような修正を加えましょう。
この共通概念に基づいたボタン色にすることで、ユーザーは解釈に負担をかけることなく操作することができるでしょう。
- 実行と非公開ボタンは青色にした
まとめ
インタラクションコスト、とかいう言葉は実際はどうでもいいのですが、要は
操作するときに負荷が少ないものが「使いやすい」と感じる→良いインターフェースにつながる
ということです。
ただ、設計者・開発者であればその多面を見慣れているので、負荷を感じずに操作できてしまい気づきと思います。
もし知識が無い状態で自分がこの画面を使うとしたらどう思うか、を意識するのが大事だと思います。
難しい場合は、開発に関与していない仕事仲間に触ってもらうのも良いかもしれません。
参考