インタフェースデザインのお約束のまとめとそこから得られた人間の行動原理を考察してみた
『インタフェースデザインのお約束』を読みました。本noteでは101の中から重要だと判断したところ14個をピックアップしてまとめてみました。
判断軸としては、できるだけ原理原則的な、他のことにも応用が効く考えを中心にピックアップしました。
人間の本質・原理原則的ことをおさらいしたい方はどうぞお読みください。
## 13：動詞は受動態よりも能動態で
受動態よりも能動態の方が、直接的で、ユーザーが理解する処理速度が早い。
例：
・明日新機能がリリースされます。（受動態）
・明日新機能をリリースします。（能動態）
原理原則：
テキストは簡潔に。
## 22：ボタンにはボタンらしい体裁を
フラットデザインになり、インタラクティブな要素がわかりづらくなった。そのためユーザーは何かをするために、一瞬手を止め、再確認せざるを得なくなった。
しかし、それがどういった機能なのか、知るために時間を費やしたいと思うユーザーはいない。
そこで視覚的なシグニファイア（手がかり）のあるボタンを採用することを推奨する。
テクスチャやシャドウがかかった視覚的なシグニファイアのボタンの方が、ないもの（フラットデザイン寄り）よりユーザーテストの結果、常に上とのこと。
考察としては、実生活に基づいたUIなら馴染み深く直感的にわかるため。実生活のボタンは、出っ張っているなどいかにも押せそうな見た目をしている。※Human Interface Guidelinesにも記載あり
例（P42を参考にデザイン）
原理原則：
- UIを理解するために時間を費やしたいと思うユーザーはいない、無意識に（直感的に）操作したい
- 現実世界の体験に近いUIなら直感的に操作できる※今回の例のボタンに限らず
## 23：ボタンは機能ごとにまとめ、選択しやすい大きさに
ボタンは選択しやすい大きさにすること。そのために、フィッツの法則を意識するとよい。
フィッツの法則について。ターゲット到達までの所要時間は、距離と大きさで決まる。そしてこの法則では、ターゲットの距離まで短いほど所要時間が小さくなる、ターゲットの大きさが大きいほど到達までの所要時間が小さくなることを証明している。
また誤クリックを防ぐために、ボタンとボタンの距離を適度にあけること。
例：（P44を参考にデザイン）
原理原則：
- フィッツの法則（ターゲットの距離まで短いほど所要時間が小さくなる、ターゲットの大きさが大きいほど到達までの所要時間が小さくなる）
## 24：ボタン全体をクリック可能にせよ
たまにボタン全体ではなく、ボタン内のテキスト部分のみクリックが可能なボタンを見かけるとのこと。
ユーザーは最初少しずれていることに気づかず、クリックしたんだけど...と戸惑ってしまう。つまり、一度考えさせ、無意識的・直感的に操作できないUIになっている。
そのため、ボタン全体をクリック可能にすること。他にも、ホバーすると「指差しポインターになる」や「ボタンの色が変わる」、「1ピクセル沈む」などクリック・タップに対するフィードバックを提供すること。
原理原則：
ユーザーのアクションにフィードバックを返すことで、ユーザーのアクションに不安をなくす、つまり無意識的・直感的的に操作ができる。 ※今回の例のボタンに限らず
## 32：選択肢が2,3個しかないときにドロップダウンメニューを使うな
ドロップダウンメニューは、クリック・タップすると選択肢を提示するコンポーネント。しかしデメリットとして、選択するのに、クリックし開くという1アクション手間がかかる。
そのため選択肢が2,3個しかないときにドロップダウンメニューを使わないことを推奨。代替策としてラジオボタンやスライダーなどで使えるか検討すること。
また個数に関係なく、選択肢の並び順に注意。番号順やアルファベット順などユーザーにとって分かりやすいものにすること。
原理原則：
並び順をユーザーが予測できるようにする。なぜならば一個一個確認することがフラストレーションが溜まる。
## 33：選択肢は多くしすぎるな
人間が短期的に記憶できる数は「7±2」と言われている。このことから、選択肢の項目が多いとユーザーは記憶できず、例えば7~8個目くらいを読み進めると、1番目を忘れることがある。つまり1番目の選択肢を見直さないといけなく、直感的に操作できない。
原理原則：
人間が短期的に記憶できる数は「7±2」=マジカルナンバー。
※書籍には記載なかったが「7±2」は旧来のもので、近年では「4±1」と言われている
## 34：リンクはリンクらしい体裁にせよ
結論、リンクなら下線を引くべき。
青い文字に青い下線の書式は廃れ、ホバー時にハイライトを表示させるは理想的ではない。
どんな挙動するか確かめるためにクリックしないといけないUIはだめ。
原理原則：
挙動をユーザーに確認させてはいけない、不満を持つ
※「22：ボタンにはボタンらしい体裁を」のUIを理解するために時間を費やしたいと思うユーザーはいない、無意識に（直感的に）操作したいと同じ。
## 62：ユーザージャーニーには明確な「始まり」「中間部」「終わり」を
どのジャーニーでも、ジャーニーが始まったこと・ある時点で終わること・終わったことをユーザーに告げる必要がある。
昔から、ユーザーがあれ保存されたのか？されなかったのかと困ることが見受けられており、フィードバックを提供すること。
例：「メッセージは送信されました」「変更内容は保存されました」など
原理原則：
フィードバックをすることで無意識的な体験を提供。
※「24：ボタン全体をクリック可能にせよ」のユーザーのアクションにフィードバックを返すことで、ユーザーのアクションに不安をなくすと同じ。
## 63：どのジャーニーでも常に現在位置をユーザーに明示せよ
あなたのプロダクトを初めて使うときが部分的もしくはまったく理解していない。現在位置もそのうちの一つで、そのために手がかりを見せる必要がある。
道しるべを提示することで、階層の感覚を掴み、ユーザーは「主導権を握っている感覚」が強まる。
例：
- プログレスインジケーター
- パンくずリスト
- ユーザーの作完了を示すインジケーター
- 作業の現状と次に起こることを言葉で説明
原理原則：
ユーザーが主導権を握っているという感覚をもたせること（=ストレスフリー）※階層の把握以外にも応用できる
## 71：言葉で説明するのではなく見せろ
プロダクトの使い方を実際に見せる方が、言葉で説明するよりも常に効果が大きい。
背景としては、ユーザーはテキストを読んでくれないため。
実際に見せる（=デモ動画）が最適と言われている。しかし、終わりまで視聴するのはしんどかったり、すでに熟知している人がいたりするので、スキップできる導線をセットで用意すること。
原理原則：
ユーザーは説明文・テキストをめったに読んでくれない
## 82：起動画面で自社のミッション・ビジョンを宣伝するな
ユーザーは、あなたのビジョンなどに関心がなく、アプリを起動し、したい作業をやりたいだけ。
なので起動画面で自社を宣伝をしてはいけない。※Human Interface Guidelinesにも記載あり
またそのためにUIは素早く読み込ませないといけない。
原理原則：
ユーザーは素早く作業したい。あなたのスローガンに関心なんてない。ユーザーはアプリを起動し、作業をやりたいだけ。
## 93：気の利いたデフォルト設定でユーザーの作業負担を軽減せよ
利用頻度の高いユーザージャーニーを見極め、大多数ユーザーに最適なデフォルト設定を行う。
デフォルト設定とは、例えば検索のソート条件など。他にもアパレルECサイトだとレディースをデフォルトで設定されていたりする。
デフォルト設定の発見方法は利用データの分析結果から発見する。たいていこの種の調査には「80:20の法則」「パレートの法則」が当てはまることが多い。
原理原則：
「80:20の法則」「パレートの法則」※例えば売上の8割は2割の社員が作るといったように集団の何か指標が一部の構成員に集中する法則。
## 94：UIデザインではベストプラクティスの採用は盗用にならない
ユーザーにとって嬉しいのはあなたのサイトが他のサイトと同じように動作すること。ユーザーが大半の時間を費やしているのは、あなたのプロダクトではなく、他のサイトやプロダクトである。※真理だと思う
そのため確立・定着されたパターンを使うように心がけなければいけない。
例：
- リンクはリンクらしい、ボタンはボタンらしい
- 保存や送信が容易にできる
原理原則：
ユーザーにとって嬉しいのはあなたのサイトが他のサイトと同じように動作すること。つまり無意識的に操作できること。
## 101：ユーザーテストでは本物のユーザーを対象にせよ
筆者は重要性を強調するために、このルールを意図的に最後にしていたためピックアップ。
ユーザーテストは実際のユーザーで試すこと。ユーザー理解でも役立つ。ユーザーの真の目標や達成したいこと、プロダクトの強み弱みなど理解できる。
またユーザーテストはどの段階で始めても早すぎはしない。そして人数は10人未満でよい。
※5人のユーザーテストを1回行うだけで問題の85%を発見できる研究結果がある
リリースしてからユーザーに聞けばよいは通用しない。なぜならユーザーは課題を教えてくれず、何も言わずに離脱するから。※重要
※原理原則はなし
## 振り返り
以上、原理原則なことに絞ってまとめました。
他にもリンクテキストは「ここをクリック」にしてはいけないやページネーションは現在のページとその前後、最初と最後のページを表示するなど、ルール的なことが勉強になりました。
定期的に読み返したい書籍になりました。定期的にリマインダーを設定して読み返します。
この記事が気に入ったらサポートをしてみませんか？