UXデザインにおける認知的摩擦の良し悪し
UX（ユーザーエクスペリエンス）の向上のために 認知的摩擦 を取り入れるのは矛盾しているように聞こえますが、適切な状況下ではプラスの効果をもたらすことができます。ユーザーを保護し、誤ってタスクを完了させないようにするには「摩擦」が実は不可欠なのです。
ユーザーがデジタル製品やデザインパターンに慣れれば慣れるほど、手が勝手に動作するようになり、エラーや取り返しのつかない行動につながる可能性が高くなります。認知的摩擦 は、こうした問題を回避し、UXを向上させるための戦略です。
世界最先端のエンドツーエンドのデザインツールで、複雑なユーザビリティの問題を解決し、顧客に愛されるデジタル体験を作りませんか。無料トライアルにサインアップして、UXPinがあなたのUXワークフローをどのように向上させるかをぜひご覧ください。
認知的摩擦 とは
UXにおける認知的摩擦とは、ユーザーインターフェースや機能が、ユーザーに立ち止まって考えさせて認知的負荷を上げることを指し、機能が直感的でない場合や、想定通りに機能しない場合もこれに含まれます。
このような「障害」は、ユーザーのタスク完了を妨げ、フラストレーションを引き起こし、最終的に製品の放棄とコンバージョンの減少につながります。
UXデザイナーは、こうしたシナリオを回避し、シームレスで中断されないユーザー体験を実現することでそのような意思決定を減らし、ユーザーを可能な限り効率的に最終目標に到達させるように教えられています。
UXデザイン におけるユーザーの摩擦６種
UXデザイン におけるユーザーの摩擦を主に6つのタイプに分類しました：
- UI摩擦：乱雑なユーザーインターフェースと誤ったデザインパターンの使用
- インタラクションの摩擦：UI要素が直感的でなく、思うように機能しない
- 言葉の摩擦：間違った言葉の選択と不十分な指示
- 入力の摩擦：フォームの入力に問題がある
- ナビゲーションの摩擦：貧弱なナビゲーション、不要な手順、リンク切れ、など
- システム摩擦：ロード時間の低下、クラッシュ、その他のパフォーマンスに関する問題
認知的摩擦 の識別法
摩擦を引き起こすユーザビリティのよくある問題を特定するのにUX監査に取り入れるべき方法として、ヤコブ・ニールセン氏のインタラクションデザインのためのユーザビリティ10原則を使うといいです。
この原則には、次のようなものがあります：
- システムの状態の可視化
- システムと実世界のマッチング
- ユーザーの制御と自由度
- 一貫性と標準
- エラーの防止
- 「想起」ではなく「認識」
- 使用における柔軟性と効率性
- 美観と最小限のデザイン
- ユーザーのエラーの認識、診断、回復の支援
- ヘルプと文書化
さらに読む： UX監査 〜知っておくべきこと・メリット・チェックリスト〜
認知的摩擦 の事例
ここでは、デザインの決定が認知的摩擦を引き起こす、よくある3つの事例をご紹介します。
例1. リンク切れ
リンク切れ（ハイパーリンク先のページに接続できない）は、通常、認知的摩擦を引き起こします。ユーザーは特定の機能に移動しているつもりでも、リンクが機能していなかったり、別の場所に移動してしまったりします。その上戻ってくる方法がなかったり、タスクを繰り返さなければならない場合、フラストレーションはさらに高まります。
例2. 機能の非表示
企業によって、ユーザーによる有料プランのダウングレードやアカウントの完全削除ができにくくなっていることは珍しくありません。これは、ユーザーがダウングレードや解約を諦めて購読を継続することを期待してのことですが、隠された機能を探すのは時間がかかり、フラストレーションがたまるので、製品やブランドに対する不信感につながります。
例3. 不要な手順
企業はしばしば過剰なデータを集めたり、タスクのために不要な手順を作ったりします。このようなインタラクションが追加されることにより、ユーザーはタスクやフォームの入力に必要以上の時間を費やすことになります。
たとえば、eコマースのチェックアウトフォームで顧客の年齢や性別、所得階層を尋ねることは、今後のマーケティング施策に役立つかもしれませんが、押し付けがましく、摩擦の原因になります。また、アコーディオンメニューや確認画面、ドロップダウンメニューなどのインタラクティブなUI要素を誤って使うと、不要な手順やインタラクションが追加されてしまいます。
認知的摩擦がいい方に働く時
ここでは、UXデザイナーが意図的に摩擦を生み出し、UXを向上させる4つの事例をご紹介します。
二要素認証（2FA）
二要素認証（2FA）は、デザイナーがサイバーセキュリティの向上のために摩擦を作り出した素晴らしい例です。2FAは、ユーザーのログインや銀行決済などの重要な機能の確認に余分な手順を追加し、承認されたユーザー以外によるこのタスクの完了のリスクを減らします。
多くの製品では、Google Authenticatorなどのアプリや、ユーザーのメールや携帯電話に送信されるOTP（One-Time-Pin/Passsword）が使われており、ユーザーは6桁のコードを入力して認証を完了させる必要があります。
2FAは、手順を追加で作ってしまいますが、その分リスクの高い製品やタスクの安全は確保されます。
確認ダイアログ
デザイナーは、UIダイアログやモーダルを使って、何かの削除や、未保存のコンテンツがあるページからの移動などの重要な非可逆的アクションを、たとえば、「このプロジェクトを本当に削除しますか？」などで確認することがよくあります。
このダイアログを面倒くさいと感じる人もいますが、何時間もかけて作ったプロジェクトを誤って削除してしまうことを防げば、すぐに納得してもらえますよ。
場合によっては、UXデザイナーは、確認のために［DELETE］と入力したり、ミスを防ぐためにモーダル内に追加の手順を作成します。このように摩擦を加えることで、ユーザーは自分が何をしているのか手を止めて考えなければならず、誰かが重要な非可逆的アクションを無意識に完了するのを防ぐことができるのです。
ユーザーとタスクの検証
多くの製品では、ユーザーが指定されたメールアドレスや携帯電話番号にアクセスできることを確認するために、検証システムが使用されています。この例では、ユーザーはUXPinのサインアップフォームのプロトタイプから、自分のメールアドレスを確認するよう求められています。
デザイナーは、ユーザーがアカウントの重要な変更を行ったかどうかを確認するためにも摩擦を利用します。例えばNetflixは、ユーザーが携帯電話の番号を変更した後にメールが送信され、ユーザーは、変更を反映させるために「電話を確認する」をクリックしなければいけません。このように、摩擦を利用することで、アカウント情報の不正な変更を防ぐことができるのです。
システムロード
多くのデジタル製品やウェブサイトでは、システムのロード中や作業中に、ロードアイコンやその他のマイクロインタラクションによる摩擦を利用しており、システムがビジー状態である間、ユーザーに待つようにこれで伝えます。
UXデザイナーは、このようなマイクロインタラクションを絶対必要なときだけ使い、決して数秒以上続かせないことが重要です。なので、もし自身の製品がタスクの処理に5秒以上かかるようであれば、エンジニアと一緒にパフォーマンスの最適化を行う必要があるかもしれません。
認知的摩擦がよくない方に働く時（及びその改善策）
認知的摩擦は通常はよくないものであり、このような問題を特定して解決策を見出すのがUXデザイナーの仕事になります。ここでは、よくない方向に働く認知的摩擦のよくある例４つと、それの低減または排除法をご紹介します。
デザインの不整合
デザインの一貫性は、UXデザインに不可欠な要素であり、デザインに一貫性を持たせることで、ユーザーインターフェースやインタラクションをより予測しやすくし、使いやすくすることができます。
デザインが統一していないと、ユーザビリティとアクセシビリティの問題を引き起こす「摩擦」を生み出します。例えば、サインアップの手順で、次に進むために【緑】のボタンを使い、あるUIではランダムに【赤】を使った場合、ユーザーは「この赤いボタンが緑と同じアクションを実行するのか」どうか、手を止めて考えなければいけなくなります。
そこで、デザインの一貫性を向上させるのに信頼できる方法として「デザインシステムまたはUIキットの作成」があります。製品チームが承認されたコンポーネントの同じライブラリを使用すると、エラーが少なくなり、デザイナーは自分で考える（摩擦）必要がなくなるのです。
多すぎる手順
デザイナーは、タスクの重要性に関係なく、すべての手順を摩擦のポイントとして考えなければなりません。UXチームは、カスタマージャーニーを理解して改善すべき点を特定するのに、ユーザビリティテストやユーザーインタビューを行うといいでしょう。
このような改善は、UIコンポーネントや入力フィールドを最適化することで、手順を削除するのではなく、アクションを減らすことで実現できる場合があります。例えば、商品のサイズオプションは、【ドロップダウン】と【ボタン】のどちらを使うのが良いでしょうか？
以下の例では、ドロップダウンを使用しているため、ユーザーはサイズを選択するためにクリックやタップを2回しなければならず、これはモバイル機器や手先の細かい作業に問題があるユーザーにとっては特に難しいものになります。
2つ目の例では、デザイナーがボタンを使うことで、ユーザーはクリックやタップを1回するだけで選択できるようになっています。異なるプロセスで同じ結果が得られ、手順が1つ減り、摩擦が減りましたね。
この例は小さな変化に見えるかもしれませんが、同様の改善点を見つけることで、全体の摩擦が減り、ユーザーはより速やかに目的地に到達できるようになります。
不慣れなパターン
デザイナーは、国際的に認知されたデザインパターンを用いて、ユーザビリティの根本的な問題を解決します。たとえば、誰もがハンバーガーアイコンで主要なナビゲーションを開くことを想定していますが、ハンバーガーから別の機能や別のアイコンを起動させると、混乱や摩擦が生じてしまいます。
こういったパターンは，ユーザーがシステムの使い方を学ばなければならないような複雑な製品では不可欠であり、もし新しいUIパターンの使い方も学ばなければならないとしたら、学習曲線がさらに追加され、 認知的摩擦 がより大きくなってしまいます。
コミュニケーション不足
デザイナーは、文字、色、視覚的階層、UI要素、画像、動画などを通じて、ユーザーとコミュニケーションをとります。ユーザーのニーズやコンテンツの把握の仕方を理解することは、効果的なコミュニケーションと摩擦の低減に欠かせません。
その素晴らしい例として、 UXPinがドキュメントでユーザーとコミュニケーションをとるのに以下のように複数の要素を用いる点があります。
