右下キャンセルで腹が立った話から、人間の直感を裏切らない設計を考える
あるレジ操作の体験画面を触っていたら、右下にキャンセル系のボタンがあった。
反射的に別の操作だと思って押しかけ、一度まちがえた。
腹が立った。
ここで大事なのは、「右下にキャンセルを置くな」という宗教を作ることではない。OSや製品ごとに慣習は違うし、右側にキャンセルがあるだけで即失格ではない。
本当に問題なのは、人がそれまでの経験から予測する動きと、実際のUIの動きがズレることだ。
UIは説明書を読んでから触るものではない。人は過去に触ったレジ、スマホ、Web、アプリ、リモコン、エレベーター、券売機の経験を勝手に持ち込む。そこを裏切ると、「考えれば分かるUI」でも「反射では間違えるUI」になる。
そして日常の操作ミスの多くは、じっくり考えた末の誤答ではなく、急いでいた、慣れていた、似たボタンが隣にあった、という一瞬の事故だ。
この記事では、レジのキャンセルボタンから始めて、記事サイトの自己監査まで広げながら、人に親切なUI/UXとは何かを研究ベースで整理する。
結論から言うと、親切さは説明文の量ではない。
予測を裏切らない。間違いにくい。間違えても戻れる。今いらない選択肢を押しつけない。
これがかなり大きい。
0. 30秒版――「ユーザーが間違えた」ではなく「間違えやすく作っていないか」を見る
人に親切なUIは、だいたい次の順で考える。
- 同じ言葉は同じことをする。
- よく使う操作は、見慣れた位置・見慣れた形に寄せる。
- 結果が大きく違う操作を、似た見た目で隣接させない。
- 危険な操作ほど、戻せるようにするか、実行前に結果を具体的に示す。
- タップ先は十分に大きく、隣の操作と離す。
- 高度な機能は消さなくていい。ただし最初から全部見せない。
- 選択肢は数だけで悪者にしない。比較が難しい場面ほど絞る。
- 実際の「押してすぐ戻る」「逆操作ですぐ直す」を観測して改善する。
つまり、UIはユーザーに試験を出す場所ではない。
「このボタンの意味、分かるかな？」ではなく、考えなくてもだいたい当たるようにする。
1. 「直感的」は魔法ではない。だいたい過去の経験の再利用である
人は画面を見るたび、頭の中で「この仕組みはたぶんこう動く」という予測モデルを作る。UXではこれをメンタルモデルと呼ぶ。
たとえば、
- 虫眼鏡なら検索
- 左向き矢印なら戻る
- ゴミ箱なら削除
- 再生三角なら再生
- 下向き矢印なら展開
といった予測は、ほとんどの人がその場で論理的に証明しているわけではない。過去の製品から借りている。
だから「独自性」を出そうとして、検索を星形アイコンにしたり、閉じるを謎の円にしたりすると、デザイナーには新鮮でも利用者にはクイズになる。
NN/gのユーザビリティ原則でも、現実世界や既存慣習との対応、製品内外の一貫性が重視されている。
空間的な対応も重要だ。刺激と反応の位置が噛み合わない課題では、対応する場合より誤りが増えることが研究されている。
だから、レジで「進む」「確定」「支払う」が右下に集まりやすい経験を持つ人に、同じ強さ・同じ場所でキャンセルを出すと、意味を読む前に手が動くことがある。
ここでの設計原則は単純だ。
ユーザーの経験をリセットさせない。
新しいことを覚えてもらう価値が本当にある部分だけ新しくし、それ以外は既存の文法を借りる。
2. 「ミス」と「うっかり」は違う。うっかりを説教で直そうとしない
UIの失敗は大きく二つに分けて考えると分かりやすい。
一つは、仕組みを勘違いして間違えること。
もう一つは、意味は分かっているのに手が滑ること。
NN/gは前者をmistake、後者をslipとして整理している。
たとえば、
「削除だと思わず押した」は理解の問題かもしれない。
「削除だと知っているが、保存の隣だったので反射的に押した」はslipに近い。
後者に対して、
「ちゃんとラベルを読んでください」
は弱い。
人間が毎回100%注意する前提なら、そもそもUI設計の仕事がかなり消える。
特に危険なのが、結果の重い操作と軽い操作が近いケースだ。保存と破棄、送信とキャンセル、10秒送りと別記事への遷移などだ。
NN/gも、破壊的操作と確定操作を近くに置くと、急いでいる人や反復操作中の人が取り違えやすいと指摘している。
結果が違うなら、見た目・位置・間隔も違わせる。
それだけで「注意してね」より強い。
3. 危険な操作は「確認を増やす」より「戻せる」を先に考える
削除、解約、全消去、破棄。
こういう操作を見ると、すぐ「確認ダイアログを出そう」と考えたくなる。
でも確認は万能ではない。
毎回「本当にいいですか？」を出すと、人は読むのをやめて条件反射で「はい」を押す。NN/gも、確認ダイアログは深刻で戻せない操作に絞り、結果を具体的に書き、できるならUndoを用意することを勧めている。
つまり、
「本当に削除しますか？ はい／いいえ」
より、
「この3件を削除します。30日間は元に戻せます」 「3件を削除」 「残す」
の方が意味が見える。
親切なUIは「ミスをゼロにする」より、ミスの損失を小さくする。
人はいつか押し間違える。だから失敗しても崖から落ちないガードレールを作る。
4. ボタンは大きさだけでなく、隣との距離まで設計する
WCAG 2.2のTarget Size (Minimum)は、ポインタ操作のターゲットを原則24×24 CSSピクセル以上にするか、十分な間隔を確保することを求めている。
しかもW3Cの説明例はかなり直球である。
「Submitを押すつもりでCancelを押してしまう」。
まさにそれである。
さらにEnhancedでは44×44 CSSピクセルが示され、Appleも一般的なボタンのヒット領域として44×44ポイント以上を案内している。
ただし、ここで「全部44にすれば解決」とするのも雑だ。
重要なのは、
- サイズ
- 間隔
- 結果の重大さ
- 使用頻度
- 画面端かどうか
- 似た操作が近くにあるか
の組み合わせだ。
「戻る」「削除」「次へ」が全部大きくても、同じ色・同じ形で密集していれば、まだ事故る。
5. 「機能がある」と「今この瞬間に見せる」は別問題
高機能なサービスほど、全部の機能を見せたくなる。
聴く。 速読。 ブックマーク。 プレイリスト。 章移動。 前の記事。 次の記事。 学習表示。 設定。 オフライン保存。
全部便利。
しかし、全部を初期画面に出すと、便利機能の展示会になる。
ここで効くのが段階的開示である。最初は頻繁に使う少数の機能を見せ、必要な人だけ詳細を開く。NN/gはこれを、学習しやすさ・効率・エラー率の改善につながる設計として説明している。
要するに、
「消すな。でも畳め。」
である。
全部載せラーメンは食べたい日に頼めばいい。水を飲みに来た人のコップに、最初からチャーシューと煮卵を沈める必要はない。
6. 選択肢は多いほど悪い？――そこまで単純ではない
UIの話ではすぐ「選択肢を減らせ」「Hickの法則だ」と言われる。
確かに、Hickの法則は選択肢や不確実性と反応時間の関係を扱い、HCIでも重要な基本則として参照されている。
ただしレビューでは、刺激と反応の対応、練習、非常に大きな選択集合などで単純式から外れることも整理されている。
選択過多も同じだ。
2010年のメタ分析では平均効果はほぼゼロで、研究ごとの差が大きかった。
その後の2015年メタ分析では、選択集合の複雑さ、判断課題の難しさ、好みの不確実性、努力を減らしたい目的などが、選択過多を強める条件として整理された。
だから、
「候補が10個あるから悪い」
ではない。
「違いが分かりにくい10個を、疲れた人に、今すぐ比較して決めろと出す」
と悪化しやすい。
記事サイトなら、1000本の記事を持っていていい。
問題は、読了直後に1000本から選ばせることだ。
裏では大量、表ではその瞬間に必要な少数。
これが親切である。
7. 自作の記事サイトを監査したら、普通に自分も罠を作っていた
この考え方をある記事サイトのUIに当てると、監査時点でいくつか分かりやすい候補が出た。
7-1. タイトルの単語だけで、別の行動導線を出してしまう
AI開発の体験記事に「引っ越し」という言葉が入っていたため、本文の前に「引っ越した人向けの次の手順」が出る。
機械にはキーワード一致。
人間には「いや、この記事の主題そこじゃない」。
これは、機能として正しく動いているのに意味として間違っている例だ。
7-2. プレイヤーに「10秒」「章」「別記事」が横一列
再生ボタンの左右に、
前の記事 前の章 10秒戻る 再生 10秒進む 次の章 次の記事
が並ぶ。
全部矢印系だが、押した結果の大きさが違いすぎる。
10秒進みたかっただけなのに別記事へ飛ぶなら、レジのキャンセルと同じ種類の事故になる。
局所移動とページ遷移は操作帯を分けた方がいい。
7-3. 同じ「記事を検索」が別の場所へ行く
同じラベルなのに、ある場所では検索ページ、別の場所ではトップ内検索へ飛ぶ。
一度覚えた意味を毎回再計算させることになる。
7-4. 本文より先に長大な目次
長文記事に目次は有用だ。
でも17項目を本文前で全部見せれば、「読む」の前に「17個から選ぶ」が発生する。
最初は主要見出しだけ、詳細は展開、でもいい。
7-5. 検索したら「全部聴く」が一番強いボタン
検索者の標準行動は、多くの場合「候補を見て1本開く」。
「全結果を連続で聴く」は面白い高度機能だが、最初から黒いPrimary CTAにすると、主タスクと特殊機能の階層が逆転する。
7-6. 記事末尾におすすめ、ランキング、検索、ニュースレター、作者情報
全部必要でも、一度に全部出す必要はない。
読了直後の第一候補は「近い記事をもう1本」。
その後に「もっと探す」「登録する」「作者を見る」と段階を作る方が判断しやすい。
7-7. 通知の登録と解除が同じ強さで近い
「通知する」と「通知を解除する」は逆方向の操作だ。
結果が逆なら、視覚的階層と距離も分けた方がいい。
この監査の面白いところは、UXを考えて作っていても、自分で普通に罠を埋めることだ。
デザイナーも人間なので、「機能を知っている人の目」で見ると、初見の誤解が見えにくい。
8. 広告は悪ではない。ただし「読む」を乗っ取らない
広告があるだけで悪いUIになるわけではない。
運営には収益が必要だし、広告を見たい人もいる。
問題は注意の奪い方だ。
Webページでの視線研究では、広告の距離やアニメーションが視線行動に影響し、特に理解を目的とする読書のように認知資源を使う課題では、広告が処理を邪魔しうることが報告されている。
だから記事ページでは、
- 本文へ到達する前に広告・目次・プレイヤー・登録CTAを積み上げない
- 本文に近すぎる広告を避ける
- 空広告枠を長く残さない
- 誤クリックしやすい距離にリンクを置かない
といった「読書の予算」を持つとよい。
広告か読者か、の二択ではない。
読者が何をしに来たページなのかを最優先にするだけである。
9. 人に親切なUI/UXのQCチェック
新しい画面を作るとき、次を順番に見る。
予測
- 同じラベルは同じ結果になるか。
- アイコンは一般的な意味からズレていないか。
- 画面の左右・上下の配置が既存慣習と不必要に逆転していないか。
- 初見の人が、押す前に結果をだいたい予測できるか。
誤操作
- 逆の意味を持つ操作が隣接していないか。
- 破壊的操作がPrimary CTAと同じ強さになっていないか。
- 押し間違えたら戻せるか。
- 確認を出すなら「何が起こるか」が具体的か。
指とポインタ
- 重要な操作は十分に大きいか。
- 小さいターゲット同士が密集していないか。
- 画面端や片手操作で押しにくくないか。
情報量
- 今やる主タスクが一つ見えるか。
- 高度機能を最初から全部並べていないか。
- 目次・フィルタ・おすすめは、必要なら展開できるか。
- 「候補を減らす」のではなく「最初に比較させる数」を管理できているか。
一貫性
- 同じ製品内で同じ操作が同じ見た目か。
- 他の一般的な製品で身についた期待を、理由なく壊していないか。
これを通しても迷うなら、設計者会議を長くするより、実際の人に触ってもらう方が早い。
10. 本当のUX改善は「間違えた直後」を見る
クリック率だけを見ると、強く目立つボタンが勝ちやすい。
でも、人に親切かどうかは「押されたか」だけでは分からない。
見ると面白いのは、たとえば次だ。
- 押した数秒後に戻る
- ONにした直後にOFFにする
- 別ページへ飛んですぐ戻る
- 同じ場所を何度も連打する
- エラー後に離脱する
- 一度間違えた後、二回目は正しく完了できる
- 本文を読みに来たのに、本文到達まで長時間かかる
こうした「訂正行動」は、UIが人間の予測とズレた可能性を示す。
もちろん、即戻りが全部誤操作とは限らない。
だから個人を追跡して断定するのではなく、匿名・集計レベルで傾向を見る。
おすすめの閉ループは、
仮説 → 小さく変更 → 誤操作の代理指標を見る → 改善なら維持 → 悪化なら戻す
である。
デザイナーの自信より、人間の実際の動きの方が強い。
11. 結論――親切とは「説明を増やすこと」ではなく「人間を罠にかけないこと」
良いUIを見ると、人はあまり感動しない。
普通に押せる。 普通に戻れる。 普通に見つかる。
それだけで終わる。
逆に、悪いUIは一回の誤操作で強烈に存在を主張する。
「なんでそこにキャンセル置いた？」
UIが主役になった瞬間である。
理想は、機械の都合を人間に覚えさせるのではなく、人間がすでに持っている予測へ機械が寄ること。
機能を消す必要はない。 高度なこともできていい。 広告も置いていい。 記事も1000本あっていい。
ただし、その瞬間に必要なものを前へ出し、逆の操作を離し、結果の大きさを見た目に反映し、失敗しても戻せるようにする。
人に親切なUI/UXとは、人間を賢く使わせる設計ではない。人間が普通に動いても事故りにくい設計である。
Sources / 研究・設計根拠
- Nielsen Norman Group, “10 Usability Heuristics for User Interface Design” https://www.nngroup.com/articles/ten-usability-heuristics/
- Nielsen Norman Group, “Mental Models” https://www.nngroup.com/articles/mental-models/
- W3C WAI, WCAG 2.2 “Target Size (Minimum)” https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
- W3C WAI, WCAG 2.2 “Target Size (Enhanced)” https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced
- Apple Human Interface Guidelines, “Buttons” https://developer.apple.com/design/human-interface-guidelines/buttons
- Proctor & Schneider (2018), “Hick's law for choice reaction time: A review” https://pubmed.ncbi.nlm.nih.gov/28434379/
- Christ et al. (2000), spatial stimulus-response compatibility and errors https://pubmed.ncbi.nlm.nih.gov/10686363/
- Chernev, Böckenholt & Goodman (2015), “Choice overload: A conceptual review and meta-analysis” https://doi.org/10.1016/j.jcps.2014.08.002
- Scheibehenne, Greifeneder & Todd (2010), “Can There Ever Be Too Many Options?” https://doi.org/10.1086/651235
- Nielsen Norman Group, “Progressive Disclosure” https://www.nngroup.com/articles/progressive-disclosure/
- Nielsen Norman Group, “Top 10 Application-Design Mistakes” https://www.nngroup.com/articles/top-10-application-design-mistakes/
- Hervet et al., online advertising, visual attention and reading https://pmc.ncbi.nlm.nih.gov/articles/PMC3955900/
- Nielsen Norman Group, “Confirmation Dialogs Can Prevent User Errors — If Not Overused” https://www.nngroup.com/articles/confirmation-dialog/
