التصميم ليس مجرد وحدات بكسل وأنماط. إنها السرعة والمشاعر أيضًا. تبدو بعض المنتجات سينمائية لأنها ترشدنا عبر حالة عدم اليقين والراحة والثقة والهدوء دون أن تزعجنا. هذه هي العاطفة في التدفق. يقوم آخرون بتقويض لحظاتهم الخاصة بمزحة في المكان الخطأ، أو نافذة منبثقة مفاجئة، أو انتقال سريع. هذه هي العاطفة في الصراع. هذه ليست أفكارًا خاصة بتجربة المستخدم فقط. يمكنك رؤيتهم في كل مكان في مجال الترفيه. والطريقة الأوضح للشعور بالفرق هي مقارنة كيفية تعامل الأنمي مع التحولات العاطفية مقابل كيفية تعثر أفلام Marvel وDC. سنستخدم مثالين محددين، أحدهما من Dan da Dan (سلسلة الرسوم المتحركة على Netflix) والآخر من فيلم James Gunn Superman، لتحديد المفهومين، ثم ترجمتهما إلى أنماط تصميم منتجات عملية يمكنك تطبيقها على الفور. ملاحظة: سنركز على المنتجات الرقمية، بما في ذلك التطبيقات وSaaS والويب. تدفق العاطفة (الأنمي: دان دا دان) في دان دا دان، نطاق النغمات جامح، ورعب، وكوميديا، وحنان، ومع ذلك فهو يتدفق. على سبيل المثال: في أحد الأحداث، يكون الأبطال في مهمة كوميدية غريبة تتضمن "الأعضاء التناسلية الذهبية" لإحدى الشخصيات الرئيسية (نعم، حقًا)، وفي آخر، ننجذب إلى قصة مفجعة لأم يتم اختطاف طفلها. على الورق، هذا التحول ينبغي أن يكون حادث سيارة. على الشاشة، يبدو الأمر متماسكًا ومقروءًا عاطفيًا. لماذا يعمل هذا على الشاشة؟
استمرارية المخاطر. حتى عندما تقع الكمامة، تظل أهداف الشخصيات ومخاطرها سليمة. الفكاهة تخفف التوتر بعد التوصل إلى حل صغير؛ لا ينكر التهديد. إشارات مزاجية واضحة. الموسيقى، والتأطير، والإيقاع، وردود أفعال الشخصية تلهم الشعور التالي. أنت مستعد لهذا التحول، لذا يمكنك ركوبه بدلاً من أن يتم سحبك. مرساة عاطفية واحدة. تظل العلاقات هي نجمة الشمال، لذلك لا يضيع قلب المشهد عندما تتحرك النغمة.
كيف يترجم هذا إلى تجربة المستخدم؟ المنتجات الجيدة تفعل الشيء نفسه: الاستعداد، والانتقال، والحل، بحيث يظل المستخدمون منغمسين مع تغير النغمة العاطفية.
العاطفة في الصراع (مارفل/دي سي: جيمس غان سوبرمان) يجري لويس وكلارك محادثة حميمة وصادقة، ولحظة إنسانية بطيئة، بينما في الخلفية يتم تشغيل الكمامة (وحش يتعرض للضرب بمضرب بيسبول عملاق). تسرق الكمامة التركيز عندما يطلب منك المشهد أن تشعر بشيء حقيقي. والنتيجة هي صراع نغمي يثقب المشاعر بدلاً من إطلاقها. لماذا يفشل هذا على الشاشة؟
زيادة الحمل المعرفي. ما يحدث هنا يرتبط مباشرة بنظرية الحمل المعرفي. عندما يطلب مشهد (أو واجهة) من المستخدمين معالجة إشارتين عاطفيتين متنافستين في وقت واحد، فإنه يقدم حملًا إدراكيًا غريبًا، وهو جهد عقلي لا علاقة له بالمهمة أو اللحظة نفسها. فبدلاً من التركيز على الإيقاع العاطفي، يتم تقسيم الانتباه بين الإشارات التي لا تحل بعضها البعض. في المنتجات، هذا ما يحدث عندما تتطفل الفكاهة أو العروض الترويجية أو التغييرات غير المتوقعة في واجهة المستخدم على لحظات عالية المخاطر: يضطر المستخدمون إلى تفسير النبرة والنية في نفس الوقت الذي يحاولون فيه التصرف، مما يؤدي إلى إبطاء الفهم وزيادة التوتر. إيقاعات متنافسة في نفس الوقت. تتداخل النكتة مع ذروة الإيقاع الجاد؛ يهتم الجمهور بالمفتاح بدلاً من الشعور. لا يوجد انتقال نغمي. لا يوجد انتقال يؤدي إلى العلاقة الحميمة قبل وصول الفكاهة، لذلك تبدو اللحظة مقوضة بدلاً من حلها.
كيف يترجم هذا إلى تجربة المستخدم؟ في المنتجات، هذه هي مشكلة قصاصات الورق قبل التأكيد، أو الخطأ البسيط في تدفق الأموال، أو النموذج الترويجي الذي يظهر في منتصف مهمة حرجة. يؤدي هذا أيضًا إلى زيادة العبء المعرفي: يجب على المستخدمين معالجة الفكاهة أثناء محاولتهم حل مشكلة ما، مما يبطئهم ويزيد من التوتر.
تعريفات سريعة العاطفة في التدفق: تبدو التحولات العاطفية مكتسبة، ومرسلة، وتوقيتها بحيث تحل الإيقاعات السابقة. الانغماس يحمل. العاطفة في الصراع: مفتاح متنافر (أو قطع صعب) يثقب إيقاعًا عاطفيًا حيًا. فواصل الغمر.
الآن بعد أن قمنا بتسميته: كيف يرتبط هذا بـ UX؟ كيف تشكل العواطف القدرة على تذكر المنتج لا يتذكر الناس متوسط الخبرة؛ يتذكرون القمم والنهاية. إذا كانت ذروة تدفقك هي الإحباط، أو كانت نهايتك فوضوية، فهذا هو ما يدوم. لذا قم بتصميم المنحنى العاطفي عن قصد. تعيش العواطف عبر ثلاث طبقات (من التصميم العاطفي لدون نورمان)، ويحتاج منتجك إلى مواءمتها:
الحشوية (القناة الهضمية): إشارات الانطباع الأول: الصور، الحركة، اللمس، الصوت. أمثلة: المحمل الهيكلي الثابت يهدئ أكثر من التوتر.الدوار. رنين نجاح لطيف/نقرة لمسية تتيح الفوز دون صراخ؛ التخفيف/الاتجاه المتسق يخبر العين بما تغير. السلوكية (الفعل): هل يمكنني إكمال مهمتي بسلاسة؟ الاحتكاك هنا يعني الإجهاد. أمثلة: ثلاث خطوات دفع واضحة مع تقدم يمكن التنبؤ به؛ حالات الخطأ التي تشرح ما حدث وكيفية استرداده؛ التحقق من الصحة المضمنة بدلاً من انفجارات نهاية النموذج. تأملي (المعنى): القصة التي أرويها لنفسي بعد ذلك، "هل كان هذا يستحق العناء؟ هل أثق بهذا؟" أمثلة: شاشة عرض مرتبة ("انتهى. ستحصل على X بحلول يوم الجمعة.") تعطي خاتمة؛ خلاصة صغيرة ("لقد وفرت 18 يورو هذا العام") تخلق الفخر بدون ألعاب نارية.
التفاعلات الدقيقة هي الغراء العاطفي. يحتوي كل واحد على مشغل (أضغط على "الدفع")، وقواعد (ما يفعله النظام)، وردود الفعل (التقدم والنتيجة الواضحة)، والحلقات أو الأوضاع (ماذا يحدث إذا حاول المستخدم مرة أخرى). احصل على هذه الأمور بشكل صحيح، وستؤدي انتقالاتك إلى جسر المشاعر. أخطأوا في فهمهم، وسوف يكسرون التدفق.
ترسم ورقة الإيقاع العاطفي بشكل واضح طبقات خبرة نورمان:
يعيش عدم اليقين في الطبقات السلوكية العميقة والمبكرة، حيث يعتمد المستخدمون على الإشارات الحسية (الحركة، الوضوح، ردود الفعل) لفهم ما يحدث. الوضوح موجود بقوة في الطبقة السلوكية، وهي اللحظة التي يتم فيها تثبيت نية النظام والإجراء التالي للمستخدم. التوقع هو مزيج من السلوكية (المستخدم يفعل شيئًا ما بهدف) والتأمل (يتنبأ المستخدم بالفعل بالنتيجة ويتخيل ما سيأتي بعد ذلك). الإنجاز هو قمة عاكسة، حيث يقوم المستخدم بتقييم النجاح والثقة وما إذا كانت التجربة "صحيحة". يعد الهدوء/الإغلاق انعكاسيًا في المقام الأول، حيث يساعد المستخدمين على اختتام معنى التفاعل وتحديد ما إذا كان المنتج جديرًا بالثقة ويستحق العودة إليه.
في المنتجات الحقيقية، لا يختفي هذا التسلسل عندما تسوء الأمور. الأخطاء، والكمون، والحالات المتدهورة ليست استثناءات للقوس العاطفي - بل هي جزء منه. ومن خلال عدسة سردية، تشكل هذه اللحظات عقبات في رحلة البطل. إن حالة التعافي المصممة جيدًا تعترف بالنكسة، وتوضح ما حدث، وتوجه الخطوة التالية دون إدخال ضجيج عاطفي جديد. عندما يتم التعامل مع الفشل على أنه ضربة بدلاً من تمزق، يمكن الحفاظ على التدفق العاطفي حتى تحت الضغط. أمثلة على تجربة المستخدم: العاطفة في التدفق مقابل العاطفة في الصراع العاطفة في التدفق تم إتمام عملية الدفع بشكل صحيح (نمط Stripe/Apple Pay): خطوات قصيرة، وتقدم واضح، وحالة نجاح واضحة (علامة اختيار مع لمسة ناعمة اختيارية). الذروة (النجاح) تهبط، والنهاية تعطي الإغلاق (الاستلام أو الخطوة التالية).
حالة الالتقاء (تطبيقات نقل الركاب، على سبيل المثال، Uber أو Free Now أو Bolt): تحافظ التحديثات التقدمية على التوجه وتقلل من القلق ("وصول السائق"، "على بعد دقيقتين"، "وصل"). يتحول عدم اليقين إلى وضوح، مع حركة لطيفة تجهز كل انتقال.
العاطفة في الصراع ملحوظة: نحن لا نقوم بتسمية منتجات محددة هنا - فنحن نحترم العمل الذي يقف وراءها. وبدلاً من ذلك، نعرض الأنماط التي تسبب الصراع العاطفي وكيفية إصلاحها بالضبط.
النكات في اللحظات الجادة. حالات النسخ المضحكة للخطأ فيما يتعلق بالمال/الصحة/الأمن. يتم التأكيد على المستخدمين. الفكاهة تزيد من التهيج. الاحتفال قبل القرار. قصاصات الورق أو الألعاب النارية أو الأصوات العالية قبل التأكيد. الحفلة يقاطع الذروة. قفزات الحالة الصلبة. مفاجآت مشروطة/عروض ترويجية في منتصف المهمة، وعمليات استحواذ على كامل الشاشة دون تحضير. يبدو وكأنه قطع مفاجئ أثناء إيقاع عاطفي.
ما يمكنك فعله لضمان تدفق المشاعر إليك صفحة الفكرة التي تحتوي على القالب الكامل الذي يمكنك تكراره:
قالب ورقة الإيقاع العاطفي.
1. اكتب ورقة الإيقاع العاطفي أولاً لكل تدفق أساسي (التأهيل، الدفع، التعافي)، قم بتخطيط المشاعر في كل خطوة: عدم اليقين ← الوضوح ← الترقب ← الإنجاز ← الهدوء. قم بإرفاق النسخة والحركة والتفاعلات الدقيقة بكل نبضة. (من يحمل العاطفة أين؟) 2. محاذاة النغمة مع مخاطر المهمة إنشاء مصفوفة النغمات (مستوى الخطر × الحالة). في حالة الأخطاء شديدة الخطورة، كن هادئًا وواضحًا وموجهًا نحو الحلول. احتفظ بالمرح في السياقات منخفضة المخاطر. مقتطفات القالب:
خطأ شديد الخطورة: "لم نتمكن من التحقق من هويتك. حاول مرة أخرى أو اتصل بالدعم." حالة فارغة منخفضة المخاطر: "لا يوجد شيء هنا بعد. هل تريد البدء بعينة؟"
هذا هو المكان الذي تنجرف فيه العديد من المنتجات الناضجة بهدوء إلى الصراع العاطفي. وبمرور الوقت، تضيف الفرق البهجة عن طريق العادة وليس النية. من المفيد أن نسأل أنفسنا: إذا أزلنا كل عنصر مرح أو احتفالي من هذه الخطوة، فهل سيظل التدفق يبدو إنسانيًا - أم أنه سيكون كذلك؟تلك العناصر تخفي الاحتكاك؟ التصميم العاطفي الجيد يوضح الخبرة؛ التصميم العاطفي الرائع لا يحتاج إلى زخرفة للتعويض عن الارتباك. 3. ذروة التصميم والانتهاء عن قصد قم بتصميم قمة واحدة واضحة (لحظة النجاح) ونهاية نظيفة (التأكيد وما سيحدث بعد ذلك). قياس الاستدعاء والرضا في كلا النقطتين. 4. استخدم التفاعلات الدقيقة كجسور، وليس كأضواء كاشفة
الاستعداد: تلميحات صغيرة ومتسقة للحركة قبل حدوث تغيير كبير في الحالة. التأكيد: يحصل النجاح على تسوية دقيقة، مع خروج أبطأ قليلاً ولمسي ضوئي اختياري. التعافي: يؤدي الفشل المتكرر إلى تحويل النغمة من التفاؤل إلى الدعم وتوجيه الخطوة التالية.
5. اختبار الاستمرارية العاطفية في جلسات قابلية الاستخدام، لا تسأل فقط "هل كان ذلك سهلاً؟" بدلًا من ذلك، يمكنك أن تسأل "ما هو الشعور الذي تغير هنا؟" إذا سمعت "مرتبك ← مسلي ← مرتبك"، فهذا يعني أن لديك صراعًا، وليس تدفقًا. تكرار التحولات، وليس فقط الشاشات. كيفية تجنب الانفعالات في الصراع: قائمة مرجعية سريعة الأعلام الحمراء → الإصلاحات:
النكات في اللحظات الجادة ← استبدلها بالهدوء واللغة المباشرة ومسار واضح للتعافي. الاحتفال قبل القرار ← انقل الاحتفال إلى ما بعد التأكيد؛ تخفيف حدة المهام عالية المخاطر. قفزات الحالة الصلبة ← انتقالات الإعلان المسبق؛ حافظ على اتساق الإطار؛ استخدام حركة ذات معنى للحفاظ على الاستمرارية. انحراف النغمات بين الفرق ← إرشادات مركزية للصوت والنغمات مع أمثلة لكل مستوى خطر وحالة.
هناك لحظات يكون فيها كسر التدفق العاطفي مقصودًا وضروريًا. غالبًا ما تستفيد التحذيرات الأمنية والتأكيدات القانونية والتنبيهات المتعلقة بالسلامة من التحولات اللونية المفاجئة. في هذه الحالات، يشير الاضطراب إلى أهمية ويتطلب الاهتمام. المشكلة ليست في الصراع العاطفي بحد ذاته؛ إنه صراع عرضي. عندما يختار المصممون التعطيل عمدًا، يفهم المستخدمون المخاطر بدلاً من الشعور بالصدمة. الاستنتاج التجارب العظيمة هي تجارب موجهة. يُظهر دان دا دان كيفية التحرك عبر المشاعر دون أن يفقدنا: فهو يستعد ويتحول ويحل. يُظهر مشهد سوبرمان العكس: تصطدم الكمامة بنبض القلب. افعل السابق. قم بتخطيط نبضاتك العاطفية، وقم بمواءمة النغمة مع مخاطر المهمة، ودع التفاعلات الدقيقة تربط المشاعر حتى يتذكر المستخدمون الذروة الصحيحة والنهاية الصحيحة، وليس الضربة في المنتصف.
