كيفية تصميم واجهات عاطفية للتطبيقات المملة

يوجد خط متقطر من الآحاد والأصفار يختفي خلف أنبوب أصفر كبير. يخرج دب من الأنبوب بينما يبدأ مخلب مخلب في الإشارة إلى شريط أدوات متصفحي ، ويظهر عنوان يقول: "ابدأ بتدبير دبك!"

بين رعتي وظهورتي نسيت ما أردت أن أتصفحه.

نادرًا ما تثير المنتجات مثل خدمة VPN المحبة - أو أي عاطفة أخرى في هذا الشأن. إنها ليست وظيفتهم ، وليس ما تم إنشاؤه من أجله. ولكن نظرًا لأن TunnelBear يفعل ذلك ، فقد اخترت ذلك على أي شبكة افتراضية خاصة أخرى وأوصي أصدقائي به ، حتى يتمكنوا من الاستمتاع ببعض الضحك أثناء الانغماس في الروتين.

لا يستطيع البشر تحمل الملل لفترة طويلة ، ولهذا السبب غالبًا ما يتم التخلي عن المنتجات المصممة لمهام متكررة وغير مثيرة وتجمع الغبار على أجهزة الكمبيوتر والهواتف. لكن الملل ، وفقًا لعلماء النفس ، هو مجرد نقص في التحفيز ، الرغبة غير المحققة في إرضاء النشاط. فماذا لو استخدمنا الواجهة لمنحهم هذا التحفيز؟

جلست مع مصممي المنتجات هنا في MacPaw ، الذين يقضون ساعات يقظتهم في تصميم أشياء غير مثيرة جدًا مثل مكتشفات مكررة وتطبيقات تشفير ، وشاركوا خمسة أسرار لواجهة مستخدم أكثر عاطفية: التحفيز والفكاهة والرسوم المتحركة والتوضيح والتمائم.

مباريات الناس تلعب

هناك بعض الجدل الدائر حول استخدام التلعيب في واجهات المستخدم: 24 دراسة تجريبية ، على سبيل المثال ، توصلت إلى استنتاجات مختلفة حول مدى فعاليتها. ولكن مرة أخرى ، تعتمد الفعالية على ما كنت تحاول تحقيقه من خلال تصميم شارات الإنجاز اللامعة تلك.

بالنسبة للعديد من صانعي المنتجات ، بما في ذلك Akar Sumset هنا ، فإن الهدف من التلاعب هو عدم السماح للمستخدمين بالاستمتاع بحد ذاته - بل يدفعهم بلطف نحو سلوكيات معينة من خلال المتعة المذكورة. تستفيد الإنجازات والمراتب ولوحات المتصدرين من الحاجة الإنسانية الأساسية للاحترام ، وتحفز القدرة التنافسية ، ومن المفترض أنها تحث المستخدمين على فعل ما تريدهم ، مثل إحراز تقدم ، أو الاستمرار في العودة إلى التطبيق ، أو مشاركته على وسائل التواصل الاجتماعي.

يمكن أن ينجح التلعيب أو يفشل في ذلك ، ولكن ما يحققه بالتأكيد هو استجابة عاطفية. إن دماغنا مليء بالخلايا التي تتحكم في مستويات الدوبامين ، وهو أحد المواد الكيميائية العصبية الرئيسية للسعادة. عندما يحدث شيء ممتع ، تضيء هذه الخلايا العصبية وتحفز إطلاق الدوبامين في الدم ، ولكن ما هو أفضل ، إذا كان هذا الحدث اللطيف منتظمًا ويمكن التنبؤ به ، فسوف تضيء وتطلق الدوبامين قبل حدوثه. ماذا يعني ذلك بالنسبة لواجهتك؟ إن توقع شيء ممتع مثل الإنجاز التالي سيمنح المستخدمين القليل من السعادة خلال تجربتهم مع المنتج.

Gamification في UI: Gemini 2 و Duolingo

عند تصميم Gemini 2 ، الإصدار الجديد من أداة البحث عن النسخ المكررة لنظام التشغيل Mac ، واجهتنا مشكلة خطيرة في متناول اليد. كانت مراجعة وحدات الجيجابايت من الملفات مملة للغاية ، واشتكى بعض المستخدمين من أنهم استقالوا قبل الانتهاء. لذا فإن ما حاولنا تحقيقه مع نظام الإنجازات هو تكثيف الشعور بالعنصر المشطوب في قائمة المهام ، وهو الجانب الصعودي الوحيد للمهام الشاقة. كان موضوع الفضاء ، الذي تم تعيينه عن غير قصد مع اسم التطبيق واستغلاله في الواجهة ، مثاليًا للتلاعب. نشأ جمهورنا في Star Wars و Star Trek ، لذا فإن الرتب المستوحاة من الخيال العلمي ستنال إعجابهم.

في غضون أيام من الإصدار ، بدأنا في تلقي تغريدات من المستخدمين يطلبون أدلة على بيضة عيد الفصح التي من شأنها أن تفتح الإنجاز النهائي. بعد عام من الإصدار ، حصل Gemini 2 على جائزة Red Dot لتصميمه الذي يُظهر "الوضوح والعاطفة". لذا ، في حين أنه من الصعب قياس مدى تحفيز نظام الإنجاز لدينا ، فمن المؤكد أنه لم يترك الناس يشعرون بالبرد.

هناك منتج آخر نجح في فهمه - ولديه واجهة أكثر متعة رأيتها - هو Duolingo ، خدمة عبر الإنترنت وتطبيق جوال لتعلم اللغات. إن محاولة إتقان لغة أجنبية من الصفر أمر شاق ، خاصة إذا كنت أنت والكمبيوتر المحمول فقط ، دون الاطمئنان الذي يأتي مع وجود مدرس. بالنظر إلى السرعة التي يفقد بها الناس الاهتمام بمساعيهم اللغوية (التحدث من التجربة هنا) ، سيتعين على Duolingo أن يبذل قصارى جهده لإبقائك مدمنًا. وهي كذلك.

كلما أكملت درسًا سريعًا مدته 5 دقائق ، تحصل على 10 نقاط. تأخذ الدروس 30 يوما على التوالي؟ احصل على إنجاز. أكمل 20 درسًا دون أي خطأ إملائي؟ افتح قفل آخر. لكل خطوة صغيرة تخطوها ، تكافأ حواسك بأصوات منتصرة ورسومات ملونة تحفز إطلاق هذا الدوبامين الحلو والحلو. في النهاية ، تبدأ في ربط Duolingo بالشعور بالإنجاز والفخر - نوع الشعور الذي تريد العودة إليه.

إذا كنت ترغب في التعمق أكثر في أسلوب اللعب ، فإن كتاب Gabe Zichermann "Gamification حسب التصميم: تنفيذ ميكانيكا اللعبة في تطبيقات الويب والجوال" يعد طريقة رائعة للبدء.

عليك أن تمزح

قدم فيكتور يوكو حجة قوية لاستخدام الفكاهة في تصميم الويب كأداة لخلق تجارب لا تُنسى ، والتواصل مع المستخدمين ، وإبراز عملك. لكن أكبر قوة للنكات هي أنها عاطفية. في حين أننا ما زلنا لا نفهم تمامًا طبيعة الدعابة ، إلا أن هناك شيئًا واحدًا واضحًا: إنه يجعل البشر سعداء. وفقًا لأبحاث تصوير الدماغ ، تعمل الرسوم الكرتونية المضحكة على تنشيط شبكة المكافآت في الجهاز الحوفي - نفس الشبكة التي تستجيب للأكل والموسيقى والجنس والعقاقير التي تغير الحالة المزاجية. بعبارة أخرى ، فإن المزحة الجيدة تمنح الناس نوعًا من النشوة العاطفية.

هل تريد هذا النوع من رد الفعل على واجهتك؟ بالطبع بكل تأكيد. لكن الجزء الصعب هو أن الدعابة ليست ذاتية فحسب ، ولكن الطريقة التي نستجيب لها تعتمد كثيرًا على السياق. شيء واحد هو إلقاء لعبة الكلمات على شاشة الإطلاق ؛ هناك خطأ مختلف تمامًا في رسالة خطأ. وبينما يستمتع جميع البشر بالفكاهة في هذا الشكل أو ذاك ، فمن الضروري معرفة جمهورك: ما الذي يجده مضحكًا وما قد يبدو غير لائق أو فظًا أو سيئ التوقيت. لا يختلف ذلك عن فك النكات في الحياة الحقيقية.

الفكاهة في واجهة المستخدم: طقس حقيقي و Slack

يُعد تطبيق Authentic Weather أحد التطبيقات التي تثبت استخدام الفكاهة - وليس فقط كإغاثة كوميدية تكميلية ، ولكن كعرض بيع فريد. تُعد تطبيقات الطقس مثالًا رئيسيًا على المنتجات النفعية: فهي أشياء يستخدمها الناس للحصول على المعلومات ، فترة. ولكن مع تطبيق Authentic Weather ، تحصل على أكثر من ذلك بكثير. بغض النظر عن الطقس ، سيصطدم بتعليق لاذع مثل "إنه تجمد شديد" ، و "العودة إلى المنزل في الشتاء" ، والمفضل لدي الشخصي "كل شيء على ما يرام. ابحث في الخارج للحصول على مزيد من المعلومات ".

ما يحدث عند استخدام Authentic Weather هو أنك لا تفتحه فقط للتنبؤ - بل تريد أن ترى ما سيحدث بعد ذلك ، وتصبح المهمة الروتينية مثل التحقق من الطقس شيئًا نتطلع إليه في الصباح. الآن ، قد يبدو التعليق المزاجي للتطبيق ، المليء بالكلمات والازدراء ، أقل إمتاعًا لأمي. لكن لكوني من جيل الألفية الغاضب الذي أنا عليه الآن ، أجد ذلك مضحكًا ، مما يثبت نجاح الفكاهة إذا كنت تعرف جمهورك.

واجهة أخرى تضفي المتعة على الاستخدام الجيد هي واجهة Slack. بالنسبة إلى التطبيق الذي يربطه الأشخاص بحالات طوارئ العمل ، يقوم Slack بعمل قوي في خلق تجربة أكثر إنسانية ، لأسباب ليس أقلها خطه الفردي. بدءًا من شاشات التحميل وحتى اللحظات التي تنشغل فيها أخيرًا بجميع محادثاتك ، فإنها تكسر دعابة عندما لا تراها قادمة.

مع مثل هذه التركيبة السكانية المتنوعة ، فإن الفكاهة هي نجاح وفشل ، لذلك يلعب Slack بأمان مع التورية الحمقاء والمزاح اللطيف - نوع النكات التي لا تجعلك تتدحرج على الأرض تمامًا ولكن لا تزعجك أو تسيء إليك أيضًا. في أفضل سيناريو ، سيضحك المستخدم ويشترك في لقطة الشاشة في إحدى قنواته ؛ في أسوأ السيناريوهات ، سوف يلفون أعينهم.

المزيد عن الفكاهة: "تمزح فقط: استخدام الفكاهة بشكل فعال" بقلم لويس آر فرانزيني.

احصل على العالم يتحرك

تستخدم كل واجهة تقريبًا شكلاً من أشكال الرسوم المتحركة. إنها الطريقة الطبيعية للانتقال من حالة إلى أخرى. لكن الرسوم المتحركة في واجهة المستخدم يمكن أن تخدم أغراضًا أكثر بكثير من الإشارة إلى تغيير الحالة - يمكنها مساعدتك في توجيه الانتباه وإيصال ما يحدث بشكل أفضل من المرئيات الثابتة أو النسخ. تحفز الحركة كلاً من التعلم البصري والحركي ، مما يعني أنه من المرجح أن يظل المستخدمون أكثر تركيزًا ويكتشفون كيفية استخدام الشيء.

هذه كلها أسباب وجيهة لدمج الرسوم المتحركة في تصميمك ، ولكن لماذا تثير المشاعر بالضبط؟ يعتقد Simon Grozyan ، الذي عمل على تطبيقاتنا Encrypto و Gemini Photos ، أن السبب في ذلك هو أننا في العالم المادي نفسر الأشياء المتحركة على أنها حية:

لقد تعودنا على رؤية الأشياء وهي تتحرك. كل شيء من حولنا إما يتحرك أو يتغير المظهر بسبب الضوء. ثابت يساوي ميت ".

بالإضافة إلى الجودة المتوافقة والواقعية للجسم المتحرك ، تتمتع الرسوم المتحركة بقوة شيء مبهج وغير متوقع يجلب لنا متعة أكبر بكثير من شيء ممتع ولكن متوقع. لذلك ، باستخدامه في أماكن أقل اعتيادًا من التحولات ، يمكنك تحقيق ذلك التحفيز المرغوب الذي يجعل استخدام منتجك ممتعًا.

الرسوم المتحركة في واجهة المستخدم: التشفير و Shazam

Encrypto هو تطبيق Mac صغير يقوم بتشفير وفك تشفير ملفاتك حتى تتمكن من إرسالها إلى شخص ما بشكل آمن. إنها أداة لا غنى عنها لأولئك الذين يهتمون بأمن البيانات والخصوصية ، ولكن ليس نوع الأداة التي قد تشعر بالارتباط بها. ومع ذلك ، فإن Encrypto هو تطبيق MacPaw المفضل لدي بقدر ما يتعلق الأمر بالتصميم ، وذلك بفضل شريط الرسوم المتحركة على غرار Matrix الذي ينزلق فوق ملفك ويحوله إلى كيان آمن جديد. يأتي التشفير إلى الحياة ؛ لم تعد العملية مملة على جهاز الكمبيوتر الخاص بك - إنها سحر رقمي ساحر.

الرسوم المتحركة في قلب واجهة مستخدم رائعة أخرى: وهي تطبيق Shazam ، وهو تطبيق ربما يكون لديك على هاتفك. عندما تستخدم Shazam لمعرفة ما يتم تشغيله ، فإن الزر الذي تضغط عليه يبدأ في إرسال دوائر متحدة المركز إلى الخارج والداخل. هذا التشابه مع مكبر صوت نابض يجعل الواجهة ملموسة تقريبًا ومادية - كما لو كنت تفجر ألبومك المفضل على نظام صوتي قوي.

المزيد عن الرسوم المتحركة: "كيف تساعد الرسوم المتحركة الوظيفية في تحسين تجربة المستخدم".

الفن هو في كل مكان

كما يجادل Blair Culbreth ، لم يعد المصقول كافياً للواجهات. يُتوقع تصميم احترافي وأنيق ، لكن التفاصيل الشخصية والإنسانية هي التي يبتسم المستخدمون عندها ويرسلونها إلى أصدقائهم. يمكن أن يكون الفن المخصص بهذه التفاصيل.

على عكس الصور العامة ، يكون التوضيح عاطفيًا ، لأنه يتواصل أكثر من المعنى. إنه يحمل ارتباطات إيجابية مع الرسوم الكرتونية التي اعتاد كل شخص مشاهدتها عندما كان طفلاً ، ويظهر الأشياء بطريقة أكثر مرحًا وخيالية ، والأهم من ذلك أنه يحتوي على لمسة شخصية الفنان.

يقول Max Kukurudziak ، أحد مصممي المنتجات لدينا: "أعتقد أنه عندما ينشئ الفنان رسمًا توضيحيًا ، فإنه دائمًا ما يبث بعضًا من تجربته الشخصية وسياقه وقصته فيه". تبدو النظرية صحيحة - اللمسة الإنسانية هي الأكثر احتمالية لإثارة المشاعر.

رسم توضيحي في واجهة المستخدم: صور Gemini وتقويم Google

يعد تطبيق Gemini Photos أحد أحدث منتجاتنا وهو تطبيق iPhone يساعدك على مسح الصور غير الضرورية. يشبه إلى حد كبير Gemini 2 لسطح المكتب ، فهو يتضمن بعض المراجعة المملة للمستخدم ، لذلك حتى مع وجود واجهة مستخدم سهلة الاستخدام ، سنواجه صعوبة في جذب انتباههم وجعلهم يشعرون بالرضا بشكل عام.

كما هو الحال في العديد من تطبيقاتنا السابقة ، استخدمنا الرسوم المتحركة والأصوات لإحياء الواجهة ، لكن الفن المخصص أصبح هو أبرز ما يميز التجربة. كما ذكرنا سابقًا ، ثبت علميًا أن الأشياء الممتعة المدهشة تتسبب في تدفق مادة كيميائية السعادة هذه إلى دمائنا ، لذلك باستخدام الرسوم التوضيحية الغريبة في أماكن غير متوقعة ، لم نملأ شاشة فارغة فحسب - أضفنا القليل من المتعة إلى شيء آخر نشاط رتيب.

يعد تقويم Google أحد الأمثلة الأخرى على كيفية جعل الرسم التوضيحي منتجًا أكثر حبًا. حتى وقت قريب ، كان هناك اختلاف واضح بين إصدار الويب وتطبيق iOS. في حين أن الأول كان يتمتع بجاذبية جدول البيانات ، إلا أن الأخير ربح قلبي على الفور بتفاصيل قاتلة واحدة. بالنسبة للعديد من أنواع الأحداث ، ينزلق تقويم Google في الرسم الذي يوضحها ، بناءً على الكلمات الرئيسية التي يلتقطها من عناوين الأحداث. بهذه الطريقة ، تبدو خططك للأسبوع أكثر إثارة ، حتى لو كان كل ما عليك فعله هو النادي الرياضي وتحديد موعد مع طبيب الأسنان.

لكن هذا ليس أفضل شيء. أدركت أنه كلما أنشأت حدثًا جديدًا ، آمل سرًا أن يكون لتقويم Google فنًا لذلك وأشعر بسعادة حقيقية عندما يحدث ذلك. تمامًا مثل ذلك ، توقف استخدام التقويم عن كونه ضرورة وأصبح مصدرًا للعاطفة الإيجابية. ومن الواضح أن تجربة الرسم التوضيحي لم تنجح معي وحدي ، لأن Google طرحت مؤخرًا إصدار الويب من التقويم الخاص بهم باستخدام نفس الفن.

المزيد عن الرسم التوضيحي: "الرسم التوضيحي الناجح: الأساليب الاحترافية للنجاح الفني والتجاري" بقلم جريج هيوستن.

يا لها من شخصية

تم استخدام الشخصيات اللطيفة التي تنتحل شخصية المنتجات في تصميم الويب والتسويق لسنوات (فكر في رونالد ماكدونالد ورجل ميشلان). في الواجهات - ليس بنفس القدر. يمكن النظر إلى الرموز في واجهة المستخدم على أنها تدخلية ومزعجة ، خاصةً إذا كانت تشتت انتباه المستخدم عن إجراء مهم أو تعيق العرض. من الأمثلة سيئة السمعة على تعويذة خاطئة هو Clippy من Microsoft: لم يثر سوى الخوف والبغضاء (وهو بالطبع عواطف ، ولكن ليس من النوع الذي تبحث عنه).

في الوقت نفسه ، تُظهر الدراسات أن الناس يجسدون الأشياء بسهولة ، حتى لو كانت مجرد أشكال هندسية. الكائنات الحية أسهل في الارتباط بها وفهم سلوكها والشعور بها بشكل عام. علاوة على ذلك ، من السهل أن تنسب شخصية متحركة إليها ، لذا يمكنك بث خصائص منتجك من خلال تلك الشخصية - اجعلها مرحة وأحمق ، ومتحمسة ومفيدة ، أو أي شيء تريده. مع هذه الإمكانات غير المستغلة كثيرًا ، تعد التمائم مثالية للمنتجات غير العاطفية.

الحيلة هي التوقيت.

كان كليبي بغيضًا جدًا لأنه بدا غير مدعو ، وقاطع المهام غير ذات الصلة تمامًا ، وكان بشكل عام في الطريق. ولكن إذا ظهر التميمة في لحظة خمول نسبيًا - على سبيل المثال ، أكمل المستخدم مهمة للتو - فسوف يقوم بعمله المحبب.

تمائم في واجهة المستخدم: RememBear و Yelp

أطلقت شركة TunnelBear Inc. مؤخرًا أداة مساعدة أخرى لطيفة كزر (لا يقصد التورية). RememBear هو مدير كلمات المرور ، ومن المفترض ألا تكون كلمات المرور مزحة. لكن تألق رسوم الدب الكرتونية في RememBear هو أنها لا تظهر في أي مكان عندما تقوم بأشياء جادة ومهمة مثل إنشاء إدخال جديد. بدلاً من ذلك ، تحصل على عناق عندما تنتهي من المرحلة الأولى من الاشتراك في التطبيق ولم تنتقل بعد إلى المرحلة الثانية - حفظ كلمة مرورك الأولى. من خلال وضع التميمة في هذا المكان ، تجنب RememBear أن يكون في الطريق ولكنه جعلني أبتسم عندما كنت أتوقع ذلك على الأقل.

تمامًا مثل RememBear ، فإن Yelp - وهو تطبيق معروف على نطاق واسع لمراجعات المطاعم - لديه توقيت مثالي للتميمة الخاصة بهم. ظهر الهامستر المضحك لأول مرة في الجزء السفلي من إعدادات تطبيق iOS حتى يكتشفه المستخدم مثل بيضة عيد الفصح.

يقول يوني دي بول ، مدير تصميم المنتجات في Yelp: "نسعى دائمًا في Yelp إلى جعل منتجنا وعلامتنا التجارية يشعران بالمرح والبهجة". "نعكس شخصية Yelp في كل شيء بدءًا من تصميمات الملصقات الممتعة وملاحظات الإصدار المضحكة إلى مشاريع الهاكاثون الداخلية وحفلات Yelp Elite. عندما وجدنا أن صفحة إعدادات iPhone الخاصة بنا مفقودة بشكل خطير في قسم المرح ، قررنا أن نشمر عن سواعدنا ونصلحها ".

أصبح الهامستر في تطبيق iOS شركة لاحقًا ، حيث صمم الفريق فيلوسيرابتور لإصدار Android وكلب للويب. لذلك ، متى - وأينما - تستخدم Yelp ، فأنت تريد تقريبًا نفاد التوصيات ، حتى تتمكن من رؤية نسخة أخرى من الشخصية المبهجة.

إذا كنت ترغب في معرفة كيفية إنشاء التميمة الخاصة بك ، فهناك برنامج تعليمي رائع من Sirine (المعروف أيضًا باسم Miss ChatZ) على Envato Tuts +.

لنختتم الأمر ...

ليست كل المنتجات ممتعة بطبيعتها كما هي الألعاب أو تطبيقات الوسائط الاجتماعية ، ولكن حتى الأدوات المساعدة لا يجب أن تكون مجرد نفعية. غالبًا ما تصارع التطبيقات التي تتعامل مع المهام المتكررة مع الاحتفاظ بالمستخدمين: يتخلى الناس عنها لأنهم يشعرون بالملل ، والملل هو ببساطة نقص في التحفيز. باستخدام المحفزات الإيجابية مثل الفكاهة والحركة والفن الفريد وعناصر اللعبة والشخصيات ذات الصلة ، يمكننا أن نجعل المستخدمين يشعرون بطريقة مختلفة - أكثر حماسة وأقل تشتتًا وسعادة في نهاية المطاف.

قراءة متعمقة

• "التصميم العاطفي: لماذا نحب (أو نكره) الأشياء اليومية" دون نورمان
• "تصميم تفاعل مغر: إنشاء تجارب مستخدم مرحة وممتعة وفعالة (أصوات مهمة)" ، ستيفن بي أندرسون