デザインはピクセルやパターンだけではありません。ペースや感情も重要です。一部の製品は、私たちを引っ張ることなく、不安、安堵、自信、平静へと導き、映画のように感じられます。それが感情のフローです。間違った場所でジョークを言ったり、突然ポップアップしたり、飛び跳ねたりして、自分の瞬間を台無しにしてしまう人もいます。それが葛藤の中の感情です。 これらは UX のみのアイデアではありません。エンターテインメントのあらゆるところでそれらを目にすることができます。そして、違いを最も明確に感じる方法は、アニメが感情の変化にどのように対処するのか、そしてマーベル映画やDC映画がどのようにつまずくのかを比較することです。ダン・ダ・ダン (Netflix のアニメ シリーズ) とジェームズ・ガン監督の映画『スーパーマン』の 2 つの具体例を使用して 2 つの概念を定義し、すぐに適用できる実用的な製品設計パターンに変換します。 注: アプリ、SaaS、Web などのデジタル製品に焦点を当てます。 Emotion In Flow (アニメ：ダン・ダ・ダン) 『ダン・ダ・ダン』では、その音域はワイルド、ホラー、コメディ、優しさでありながらも流れています。 例: あるアークでは、主人公たちは主人公の 1 人の「黄金の性器」 (はい、本当に) を巡る奇妙でコメディーな冒険をしていますが、別のアークでは、子供が誘拐された母親の悲痛な物語に私たちは引き込まれます。理論上、その変化は自動車事故に相当するはずです。画面上では、一貫性があり、感情的に読みやすくなります。 なぜこれが画面上で機能するのでしょうか?
賭けの継続。ギャグが成功しても、登場人物の目的と危険はそのまま残ります。ユーモアは、小さな解決策の後に緊張を和らげます。脅威を否定するものではありません。 明確な気分の手がかり。音楽、フレーミング、ペース、キャラクターの反応が次の感情を伝えます。あなたはシフトに向けて準備が整っているので、引っ張られるのではなく、それに乗っていきます。 感情のアンカーは 1 つです。関係は北極星であり続けるため、トーンが動いてもシーンの中心が失われることはありません。
これはUXにどのように変換されるのでしょうか? 優れた製品も同様に、準備、移行、解決を行うため、ユーザーは感情のトーンが変化しても没頭し続けることができます。
葛藤する感情 (マーベル/DC: ジェームズ・ガンのスーパーマン) ロイスとクラークは心のこもった親密な会話、ゆっくりとした人間的な瞬間を過ごしていますが、その背景ではランニング ギャグ (モンスターが巨大な野球バットで殴られる) が繰り広げられています。何か現実的なものを感じてほしいという場面で、ギャグが集中力を奪います。その結果、感情を解放するのではなく、穴をあけてしまうような音の衝突が生じます。 これが画面上で失敗するのはなぜですか?
認知負荷の増加。ここで起こっていることは、認知負荷理論に直接対応します。シーン (またはインターフェイス) がユーザーに 2 つの競合する感情信号を同時に処理するように要求すると、無関係な認知負荷、つまりタスクや瞬間自体とは何の関係もない精神的労力が発生します。感情的なビートに焦点を当てるのではなく、互いに解決しない信号に注意が分散されます。製品では、ユーモア、プロモーション、または予期せぬ UI の変更が一か八かの瞬間に侵入すると、これが起こります。ユーザーは、行動しようとしていると同時に口調や意図を解釈することを強いられるため、理解が遅れ、ストレスが増大します。 同時にビートを競う。シリアスなビートのクライマックスにジョークが重なる。観客は感情よりもスイッチに注目します。 トーンの引き継ぎはありません。ユーモアが現れる前に親密さをもたらすトランジションがないため、その瞬間は解決されるというよりもむしろ損なわれているように感じられます。
これはUXにどのように変換されるのでしょうか? 製品の場合、これは確認前の紙吹雪の問題、資金の流れにおける生意気なエラー、または重要なタスクの真っ只中に表示されるプロモーション モードです。これにより、認知負荷も急増します。ユーザーは問題を解決しようとしながらユーモアを処理しなければならないため、作業が遅くなり、ストレスが増大します。
簡単な定義 フローの中の感情感情の変化は、獲得され、伝えられ、タイミングが決められているように感じられるため、以前のビートを解決します。没入感が持続します。感情の葛藤生きた感情的なビートを打ち抜く耳障りなスイッチ (またはハード カット)。イマージョンブレイク。
名前を付けたところで、これは UX にどのように関係するのでしょうか? 感情が製品の記憶にどのように影響するか 人は経験の平均値を覚えていません。彼らはピークとエンディングを覚えています。フローのピークがフラストレーションだったり、結末が雑だったりすると、それが心に残ります。したがって、感情曲線を意図的に設計します。 感情は 3 つの層にわたって存在し (ドン ノーマンの Emotional Design より)、製品ではそれらを整列させる必要があります。
内臓 (腸): 第一印象シグナル: ビジュアル、動き、触覚、音。例: 安定したスケルトン ローダーは、神経質な状態よりも落ち着かせます。スピナー。穏やかな成功チャイム/触覚タップにより、叫ばずに勝利が決まります。一貫したイージング/方向により、何が変化したかが目に伝わります。 行動（実行）：タスクをスムーズに完了できますか？ここでの摩擦とはストレスを意味します。例: 進捗が予測可能な 3 つの明確な支払いステップ。何が起こったのか、そしてどのように回復するのかを説明するエラー状態。フォーム末尾の爆発の代わりにインライン検証。 内省的 (意味): 「それは価値がありましたか? これを信じますか?」という後で自分に言い聞かせる物語 例: きちんとしたまとめ画面 (「完了しました。金曜日までに X が届きます。」) が終わりを告げます。ちょっとした要約 (「今年は 18 ユーロ節約できましたね」) だけで、花火がなくても誇りが生まれます。
マイクロインタラクションは感情的な接着剤です。それぞれにトリガー ([支払い] をタップ)、ルール (システムの動作)、フィードバック (進捗状況と明確な結果)、ループまたはモード (ユーザーが再試行するとどうなるか) があります。これらを正しく理解すれば、トランジションで感情の橋渡しができます。間違えると流れが壊れてしまいます。
感情的なビートシートは、ノーマンの経験の層にきれいにマッピングされています。
不確実性は内臓層と初期行動層に存在しており、ユーザーは何が起こっているのかを理解するために感覚的な手がかり (動き、明瞭さ、フィードバック) に依存しています。 明確さは行動層にしっかりとあり、システムの意図とユーザーの次のアクションが所定の位置に固定される瞬間です。 期待は、行動的 (ユーザーが目的を持って何かをしている) と反射的 (ユーザーがすでに結果を予測し、次に何が起こるかを想像している) を組み合わせたものです。 達成度は、ユーザーが成功、信頼、エクスペリエンスが「正しく感じられた」かどうかを評価する内省的なピークです。 Calm/Closure は主に内省的であり、ユーザーがインタラクションの意味を要約し、製品が信頼でき、戻ってくる価値があるかどうかを判断するのに役立ちます。
実際の製品では、問題が発生してもこのシーケンスは消えません。エラー、遅延、劣化した状態は、感情的な弧の例外ではなく、感情的な弧の一部です。物語のレンズを通して見ると、これらの瞬間は主人公の旅の障害になります。適切に設計された回復状態では、挫折を認識し、何が起こったのかを明確にし、新たな感情的なノイズを引き起こすことなく次のステップに進みます。失敗を断裂ではなく鼓動として扱うと、ストレス下でも感情の流れを保つことができます。 UX の例: 流れている感情と対立している感情 感情の流れ チェックアウトは正しく完了しました (Stripe/Apple Pay スタイル): 短い手順、明確な進捗状況、鮮明な成功状態 (オプションのソフト触覚付きのチェックマーク)。頂点 (成功) が到達し、終わりは終結 (受信または次のステップ) を示します。
乗車ステータス (配車アプリ、Uber、Free Now、Bolt など): 段階的な更新により方向性が維持され、不安が軽減されます (「ドライバーが到着」、「あと 2 分」、「到着」)。不確かさは明晰さに変わり、穏やかな動きがそれぞれの移行を準備します。
葛藤する感情 注: ここでは特定の製品の名前を指定しません。私たちはその製品の背後にある取り組みを尊重しています。代わりに、感情的な衝突を引き起こすパターンと、それを正確に修正する方法を示しています。
深刻な場面でのジョーク。お金/健康/セキュリティのための生意気なコピー・イン・エラーの状態。ユーザーはストレスを感じています。ユーモアはイライラを増幅させます。 決議前の祝賀会。確認前の紙吹雪、花火、または大音響。パーティーはクライマックスを中断します。 ハードステートジャンプ。タスク中のサプライズモーダル/プロモーション、準備なしのフルスクリーンテイクオーバー。感情的なビートの途中で突然カットされたように感じます。
感情を確実にフローさせるためにできること 以下は、複製できる完全なテンプレートを含む Notion ページです。
感情的なビートシートのテンプレート。
1. 最初に感情的なビートシートを書く コアフロー (オンボーディング、支払い、回復) ごとに、ステップごとに感情をマップします: 不確実性 → 明確さ → 期待 → 達成感 → 落ち着き。各ビートにコピー、モーション、マイクロインタラクションを追加します。 (感情は誰がどこに運ぶ?) 2. トーンをタスクのリスクに合わせて調整する トーンマトリクス（リスクレベル×状態）を作成します。リスクの高いエラーの場合は、落ち着いて、淡々と、解決策を考えてください。遊び心はリスクの低い状況に留めてください。 テンプレートのスニペット:
高リスクエラー: 「ID を確認できませんでした。もう一度試すか、サポートにお問い合わせください。」 低リスクの空の状態: 「まだ何もありません。サンプルから始めますか?」
ここで、多くの成熟した製品が感情的な葛藤を静かに漂わせます。時間の経過とともに、チームは意図ではなく習慣によって喜びを増やします。 有用なセルフチェックは、次のように尋ねることです。このステップからすべての遊び心やお祝いの要素を削除したとしても、その流れはまだ人間味を感じますか、それとも人間味を感じますか?摩擦を隠す要素は？ 優れた感情デザインは経験を明確にします。優れた感情的なデザインには、混乱を補うための装飾は必要ありません。 3. ピークとエンドを意図的に設計する 明確なピーク (成功の瞬間) と明確な終わり (確認と次に何が起こるか) を 1 つ設計します。両方のポイントで再現率と満足度を測定します。 4. マイクロインタラクションをスポットライトではなくブリッジとして使用する
準備: 状態が大きく変化する前に、小さく一貫したモーションのヒントを表示します。 確認: 成功すると、イーズアウトがわずかに遅くなり、オプションで軽い触覚が得られ、微妙な落ち着きが得られます。 回復: 失敗を繰り返すと、調子が楽観的なものから協力的なものにうまく変化し、次のステップに進みます。
5. 感情の連続性をテストする ユーザビリティセッションでは、単に「簡単でしたか？」と尋ねないでください。代わりに、「ここでどんな気持ちが変わりましたか?」と尋ねることができます。 「混乱→面白→混乱」と聞こえたら、流れではなく葛藤が生じています。画面だけでなく遷移を繰り返します。 対立時の感情を避ける方法: 簡単なチェックリスト 危険信号 → 修正:
深刻な場面でのジョーク → 穏やかで率直な言葉に置き換え、明確な回復の道を導きます。 解決前のお祝い → 確認後にお祝いを移す。リスクの高い作業ではトーンダウンしてください。 ハード ステート ジャンプ → 遷移を事前にアナウンスします。フレームの一貫性を保つ。連続性を保つために意味のある動きを使用します。 チーム間のトーンドリフト → リスクレベルおよび状態ごとの例を含む音声とトーンのガイドラインを一元化します。
感情の流れを断つことが意図的で必要な瞬間があります。セキュリティ警告、法的確認、および安全性が重要な警告は、多くの場合、突然の音色の変化によって恩恵を受けます。このような場合、混乱は重要性を示し、注意を必要とします。問題は感情的な対立そのものではありません。それは偶然の衝突です。デザイナーが意図的に破壊を選択すると、ユーザーはむち打ち症を感じるのではなく、リスクを理解します。 結論 素晴らしい体験は方向性のある体験です。 『ダン・ダ・ダン』は、私たちを失うことなく感情を乗り越える方法を示しています。準備し、移行し、解決します。スーパーマンのシーンでは、その逆が描かれています。ギャグとハートフルなビートが衝突しています。 前者を実行してください。感情のビートをマッピングし、トーンをタスクのリスクに合わせ、マイクロインタラクションで感情の橋渡しをすることで、ユーザーが真ん中のむち打ちではなく、正しいピークと正しい終わりを覚えられるようにします。
