سر تصميم Killer UX: كل شيء في التفاعلات الدقيقة
نشرت: 2016-11-13التصميم يكمن في التفاصيل.
في ذلك اليوم كتبت رسالة إلى صديقة قديمة لم يكن من السهل كتابتها لأنها كانت رسالة للتعبير عن تعازيّ في فقدان والدتها. لقد تحدثنا عبر الهاتف عدة مرات في وقت سابق من الأسبوع ولكني أردت أن أرسل لها رسالة سريعة على تطبيق Facebook Messenger لإعلامها بأنني كنت أفكر بها. انتهيت من كتابة الرسالة وقررت إضافة القليل من "القلب" في النهاية.
انتهى هذا الإجراء البسيط المتمثل في النقر على القلب بالتحول إلى انفجار رائع لقلوب حمراء عائمة على شاشة هاتفي مصحوبة أيضًا ببعض المؤثرات الصوتية السخيفة. هذه اللحظة من الزمن ، رغم أنها قصيرة وعابرة ، جلبت لي بضع ثوان من الدهشة والفرح خلال وقت صعب.
هذا ما حدث لشاشتي بعد النقر على القلب الأحمر.
يمكن لهذه التفاصيل الدقيقة ، والمعروفة باسم التفاعلات الدقيقة ، أن تجعل التجربة بين المستخدم والجهاز / المنتج أكثر متعة وسهولة وفعالية وإنسانية. نحن في كثير من الأحيان لا نلاحظ هذه التفاعلات الدقيقة.
هم بارعون بذكاء وأحيانًا غير مرئيين تقريبًا ؛ ولكن يمكنهم جعل منتجًا شيئًا يحبه المستخدم ، وليس شيئًا يشعر بالفاتر تجاهه.
بمعنى آخر ، التفاعلات الدقيقة لديها القدرة على سد الفجوة بطريقة سحرية بين المستخدم والتكنولوجيا من خلال التواصل العاطفي والإنساني ، مع تشجيعهم أيضًا على الاستمرار في العودة للحصول على المزيد.
ما هي التفاعلات الدقيقة؟
تعتمد التفاعلات الدقيقة على إنجاز لحظة أو مهمة واحدة من خلال توفير تجربة مبهجة وردود فعل مفيدة للمستخدمين. هذه اللحظات الدقيقة هي ما يوجه المستخدم في النهاية خلال التدفق بطريقة بديهية وفعالة.
يعرّف دان سافير ، مؤلف كتاب "Microinteractions" ونائب رئيس Product for Mayfield Robotics ، التفاعلات الدقيقة على أنها "لحظات المنتج المحتواة التي تدور حول حالة استخدام واحدة — لها مهمة رئيسية واحدة. في كل مرة تقوم فيها بتغيير أحد الإعدادات ، أو مزامنة بياناتك أو أجهزتك ، أو ضبط تنبيه ، أو اختيار كلمة مرور ، أو تسجيل الدخول ، أو تعيين رسالة حالة ، أو اختيار شيء مفضل أو "أعجبني" ، فأنت تشارك في تفاعل دقيق. إنها موجودة في كل مكان: في الأجهزة التي نحملها ، والأجهزة في منزلنا ، والتطبيقات الموجودة على هواتفنا وأجهزة سطح المكتب لدينا ، وحتى المضمنة في البيئات التي نعيش ونعمل فيها. معظم الأجهزة وبعض التطبيقات مبنية بالكامل حول تفاعل دقيق واحد ".
وفقًا لصفير ، تعتبر التفاعلات الدقيقة مفيدة لـ:
- إنجاز مهمة واحدة ومهمة واحدة فقط.
- التفاعل مع جزء واحد من البيانات ، مثل درجة الحرارة أو تصنيف أغنية.
- التحكم في عملية جارية ، مثل مستوى صوت أغنية على Spotify
ضبط الإعداد. - عرض أو إنشاء جزء صغير من المحتوى ، مثل حالة على Facebook
تشغيل ميزة أو وظيفة أو إيقاف تشغيلها.
لماذا تُدمج التفاعلات الدقيقة في تصميماتك؟
- إنها تساعد في تشجيع المستخدمين على التفاعل مع موقعك ، سواء كان ذلك بالنقر فوق زر ، أو مشاركة المحتوى ، أو الرد على رسالة أو إشعار.
- يعطون المستخدمين ملاحظات على الفور.
- أنها تساعد المستخدمين على التنقل من خلال الموقع.
- إنها تساعد في توجيه المستخدمين خلال التدفق بطريقة سهلة وبديهية.
يصف Saffer الأجزاء الأربعة من التفاعلات الدقيقة كمحفز ، وقواعد ، وردود الفعل ، والحلقات والأوضاع. دعنا نتعمق قليلاً في ما تعنيه كل خطوة من هذه الخطوات.
اثار
المشغل هو ما يبدأ التفاعل. إنها إشارة ، مرئية أو غير ذلك ، تشجع المستخدم على اتخاذ إجراء. يمكن أن يكون المشغل هو رفرفة أيقونة لتشجيع المستخدم على النقر عليها أو النقر عليها. الزر الأزرق الذي يطفو لأسفل إلى أعلى موجز Twitter الخاص بك والذي يقول "تغريدات جديدة" مع سهم يشير لأعلى يدفعك إلى النقر فوقه لمشاهدة جميع التغريدات الجديدة التي تم نشرها منذ أن كنت بعيدًا.
بعض أفضل المشغلات هي تلك التي تتوقع بالفعل حاجة المستخدم دون الحاجة إلى ذكر احتياجاته . يتطلب هذا من المصمم أن يجمع أبحاث المستخدم والبيانات السلوكية للمساعدة في التنبؤ بما ستكون عليه احتياجات المستخدم وتصميم المحفزات وفقًا لذلك.
قواعد
المشغل يتعامل مع القواعد. تحدد هذه القواعد ما يحدث أثناء التفاعل. يجب أن يشعر المستخدم بأن القواعد طبيعية لإنجازها وأن تكون موجودة للمساعدة في تقليل الأخطاء. وخير مثال على ذلك هو أنك إذا حاولت إرسال بريد إلكتروني عبر Gmail دون إدخال سطر الموضوع ، فسيخبرك Gmail أن "بريدك الإلكتروني لا يحتوي على سطر موضوع" يسألك عما إذا كنت لا تزال ترغب في إرساله.
موصى به لك:
كيف ستحول Metaverse صناعة السيارات الهندية
ماذا يعني توفير مكافحة الربح بالنسبة للشركات الهندية الناشئة؟
كيف تساعد الشركات الناشئة في تكنولوجيا التعليم في تطوير مهارات القوى العاملة في الهند وتصبح جاهزة للمستقبل ...
الأسهم التقنية في العصر الجديد هذا الأسبوع: مشاكل Zomato مستمرة ، EaseMyTrip تنشر Stro ...
تتخذ الشركات الهندية الناشئة اختصارات في مطاردة للتمويل
منصة التسويق الرقمي Logicserve Bags INR 80 Cr Funding، Rbrands as LS Dig ...
استجابة
تستند التعليقات على القواعد وتعطي المستخدمين معلومات حول ما يحدث في تلك اللحظة من الزمن. أنا مغرم بشكل خاص بالملاحظات التي أتلقاها بشأن النماذج المصممة مع وضع المستخدم في الاعتبار. يمكن أن يكون دمج التحقق المضمن في تصميمك ضمن السياق الصحيح مفيدًا حقًا للمستخدم.
على سبيل المثال ، أثناء إدخال اسم مستخدم ، إذا رأيت علامة اختيار خضراء أعلم أنه يمكنني الانتقال لملء حقل كلمة المرور. لا يمكنني إخبارك بعدد المرات التي ملأت فيها حقول اسم المستخدم وكلمة المرور ، ثم اضغط على إرسال ، وأخبرني باللون الأحمر أن اسم المستخدم أو كلمة المرور غير صحيحة.
المشكلة في هذا الموقف هي أنه ليس لدي أي فكرة على الإطلاق عن الحقل أو الحرف غير الصحيح . إذا كان بإمكاني إجراء التغييرات الصحيحة على طول الطريق ، فهذا يجعل العملية برمتها أسهل كثيرًا. إن علامات الاختيار الخضراء الصغيرة هذه ، على الرغم من أنها قد تبدو غير مهمة ، تحدث فرقًا كبيرًا في شعور المستخدم أثناء وبعد عملية ملء النموذج ولديها القدرة على أن تؤدي إلى معدلات إكمال أعلى.
يعد نموذج الاشتراك في Twitter مثالًا رائعًا وبسيطًا على كيفية استخدام التحقق المضمن. تظهر علامات الاختيار على الجانب الأيمن من حقل النموذج عندما أكمل الإجراء. أثبتت رسالة الخطأ الحمراء أيضًا أنها مفيدة من خلال إخباري بما يجب علي فعله لإكمال النموذج بشكل صحيح.
يستخدم تطبيق السفر Hopper أيضًا التفاعلات الدقيقة بحكمة. بعد إدخال التواريخ والوجهات التي أهتم بمعرفة المزيد عنها ، يتنقل الأرنب الصغير اللطيف في الأرجاء بينما "يفكر" التطبيق ويسحب النتائج لي لعرضها. لا أحد يحب الانتظار. ومع ذلك ، فإن رؤية الأرنب وهو يقفز يجلب القليل من البهجة لتجربة الانتظار القصيرة ، مع السماح للمستخدم أيضًا بمعرفة أن شيئًا ما يحدث بالفعل وستظهر النتائج قريبًا.
الحلقات والأوضاع
تحدد الحلقات والأوضاع القواعد الفوقية الأكبر للتفاعل. إذا تم استخدام التفاعل الجزئي بشكل متكرر ، فمن المهم النظر في كيفية تغير التفاعلات وفقًا لذلك. فكر في كيفية تكيف هذا التفاعل بناءً على سلوك المستخدم. ما الفرق بين التفاعل الدقيق عند استخدامه لأول مرة مقارنة بالمرة السابعة؟
حاول إنشاء حلقات تتكيف بمرور الوقت ، مما يجعل التجربة أكثر ثراءً في كل مرة يتفاعلون معها. تعد ميزة On This Day Memories على Facebook مثالًا رائعًا على كيفية إنشاء تجارب تتكيف مع كل مرة يتم التعامل معها.
يقوم غالبية مستخدمي Facebook بفحص قنواتهم الإخبارية عدة مرات في اليوم. يمكن أن يكون لامتلاك ميزة تسحب في بعض الأحيان تحديثًا للحالة أو صورة منذ 4 سنوات تأثير عاطفي (نأمل أن يكون إيجابيًا) على المستخدم. هناك احتمال أن يكون لهذا التفاعل الجزئي تأثير سلبي. على سبيل المثال ، عرض منشور قديم يمكن أن يجعل المستخدم حزينًا أو متوترًا له عواقب سلبية غير مقصودة. أقترح أن يبحث Facebook في كيفية منع حدوث تلك التجارب السلبية.
الأشياء التي يجب وضعها في الاعتبار عند تصميم التفاعلات الدقيقة
لا تفرط في التصميم . يجب ألا تبدو التفاعلات الدقيقة غريبة أو تستغرق وقتًا طويلاً للتحميل. يجب أن تخدم غرضًا بينما تتدفق بسلاسة داخل التصميم العام الخاص بك.
في المرة الأولى التي يختبر فيها شخص ما التفاعل الجزئي ، يجب ألا يشعر بنفس الشعور عندما يستخدمه في المرة العاشرة أو المائة. اجعل التفاعلات الدقيقة قابلة للتكيف مع السياق. إذا كانت هذه هي المرة الأولى للمستخدم ، فاطلب من الأسهم المساعدة في التنقل في التطبيق. امنحهم خيار عدم إظهار هذه الرسالة مرة أخرى ، حتى لا تصبح مزعجة في المستقبل.
هذا يقودني إلى النصيحة الثالثة. لا تبدأ من لا شيء . افهم المستخدمين ودوافعهم والسياق من خلال إجراء بحث المستخدم. ستمنحك المعلومات التي تجمعها المعلومات التي تحتاجها لجعل قرارك أكثر فعالية وقابلية للاستخدام. إذا كانوا هناك للمرة العشرين ، فابحث عن دوافعهم وأهدافهم وأنشئ تفاعلات دقيقة بناءً على النتائج التي توصلت إليها.
تذكر أن الهدف هو أن تكون هذه التفاعلات دقيقة وفعالة. تأكد من أن أسلوب التفاعل الجزئي يتناسب بشكل طبيعي مع نمط تصميم الواجهة بشكل عام. يجب ألا تبدو التفاعلات في غير محلها أو مربكة ويجب أن تكون التفاعلات الدقيقة مرتبطة بالتصميم العام للتطبيق.
6 أمثلة على التفاعلات الدقيقة التي تمت بشكل صحيح
مفاجأة على كمك
سمعت أحدهم يصف ارتداء نفس القميص الناعم والمريح بأكمام طويلة لسنوات. في أحد الأيام أثناء الجري على درب مظلل تصطف على جانبيه الأشجار مرتدية نفس القميص ذي الأكمام الطويلة ، وصفت العداءة البرد وسحب القماش الإضافي ، المخصص للأيام الباردة لتغطية يديها ، لقلب القمصان فوق يديها. النسيج تحتها كشف عبارة "أنت محبوب".
تم إخفاء هذه الكلمات ، المطبوعة سرًا في مكان القماش بالضبط ، لتظهر خلال لحظات مثل هذه التي تفاجئ أولئك الذين يرتدونها بلحظة صغيرة من البهجة .
Slack Emojis
يقدم موقع Little Big Details بعض الأمثلة الرائعة على التفاعلات الدقيقة. أحد الأشياء التي يعرضونها هو عند البحث عن رمز تعبيري في Slack وعدم وجود الرموز التعبيرية التي تبحث عنها ، يُقترح رمز تعبيري "البكاء" كخيار. بدلاً من أن يتضايق المستخدم عندما لا يجد ما يريده ، فإن رمز تعبيري "البكاء" يجعله يشعر بالمرح .
جوجل المترجم
عندما تضغط على الزر "استمع" للمرة الثانية على ترجمة Google ، فإنه يكرر الترجمة بسرعة أبطأ بافتراض أنك بحاجة إلى مزيد من الوقت لفهم ما قيل.
الوضع الليلي على خرائط جوجل
لطالما أحببت كيف تتحول خلفية تطبيق خرائط Google إلى اللون الأسود وفقًا للوقت. يهدف الوضع الليلي إلى المساعدة في الرؤية الليلية والسلامة وهو تلقائي بالكامل.
اجعلني نبضي
تحقق من هذا الموقع Make Me Pulse لتجربة تفاعلية ممتعة حقًا. يساعد استخدام التفاعلات الدقيقة ( أشرطة التقدم والأصوات والألوان ) في توجيه المستخدمين خلال التدفق من خلال المشغلات والقواعد والتعليقات والحلقات.
أشرطة التمرير
حتى شريط التمرير الرمادي الصغير الموجود على الجانب الأيمن من هذه الصفحة هو مثال رائع وبسيط عن كيف يمكن أن يكون التفاعل الجزئي مفيدًا وفعالًا مما يتيح لك كقارئ معرفة مقدار المواد المتبقية لقراءة هذه المقالة.
نأمل أن تلهمك هذه المقالة لبدء دمج التفاعلات الدقيقة في تصميماتك. لديهم القدرة على تحويل تجربة المستخدمين مع التصميم الخاص بك من مجرد موافق إلى شيء لا يُنسى حقًا.
[ظهر هذا المنشور لأول مرة على Proto.io وتم نسخه بإذن.]