تجربة مستخدم أفضل من خلال التفاعلات الدقيقة

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

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

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

فوائد التفاعلات الدقيقة

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

التفاصيل ليست التفاصيل. هم يصنعون التصميم.

بعض الفوائد الرئيسية لدمج التفاعلات الدقيقة في المنتج هي:

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

أفضل ممارسات تصميم التفاعل الجزئي

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

تحديد وفهم مشكلة المستخدم

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

حافظ على التفاعلات الدقيقة طبيعية

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

اختبار وتكرار النتائج من اختبار المستخدم

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

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

اتبع هيكل Microinteractions

وفقًا لـ Dan Saffer ، كبير مصممي المنتجات في Twitter ومؤلف كتاب "Microinteractions: Designing with Details" ، هناك أربعة أجزاء من التفاعل الجزئي.

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

تفكيك تصميم التفاعل الدقيق

لإظهار عملية التفكير وراء تصميم التفاعلات الدقيقة ، دعنا نفكك تفاعلًا دقيقًا بواسطة Google: تفاعل دقيق لاقتراح اسم الملف في محرر مستندات Google.

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

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

مشكلة المستخدم

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

حل جوجل

يتعامل محرر مستندات Google مع هذا بطريقتين ، بناءً على اختيارات المستخدم: 1) يمكن للمستخدمين النقر فوق حقل الاسم وتغيير اسم المستند على الفور قبل كتابة أي محتوى ، وتغيير "مستند بدون عنوان" إلى الاسم الذي يختارونه ، أو 2 ) بمجرد أن يكتب المستخدم السطر الأول من النص ، يملأ Google ذلك تلقائيًا كاسم المستند. يمكن للمستخدم الاحتفاظ بهذا كما هو أو تغييره.

دعنا نفحص التفاصيل:

محفزات

قد يكون هناك عدد قليل من المشغلات المحتملة لتسمية المستند ، باستخدام ملف> حفظ باسم وظيفة القائمة ، أو الضغط على cmd + s على جهاز Mac ( ctrl + s في Windows) على لوحة المفاتيح كما هو الحال في تطبيقات سطح المكتب. لكن لا يستفيد أي منها من الطبيعة التفاعلية للويب ، ولا يعزز تدفق المستخدم بشكل خاص.

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

قواعد

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

ردود الفعل

يعد تغيير لون حدود حقل الإدخال نمطًا شائعًا للتفاعل ، وهو ما يستخدمه محرر مستندات Google هنا لمنح المستخدم ملاحظات فورية.

الحلقات والأوضاع

نجح المستخدم في إنشاء اسم المستند ويظل المشغل في مكانه مع اختلاف رئيسي واحد: تمت تسمية المستند الآن.

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

نتيجة

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

التفاعلات الدقيقة في العمل: أمثلة من العالم الحقيقي

إعادة ترتيب قائمة المهام

تساعد تذكيرات Apple iOS المستخدمين على البقاء منظمين والتخلص من عدة خطوات من خلال السماح لهم بالنقر مع الاستمرار وسحب عنصر قائمة لتغيير مكانه في ترتيب القائمة.

الرد على منشورات وسائل التواصل الاجتماعي

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

إبراز النص ذي العلامات التجارية

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

تقاسم موقعك

يفترض Google Hangouts أن إحدى المرات التي قد يرغب فيها المستخدم في مشاركة موقعه تكون عندما يرسل شخص ما رسالة نصية "أين أنت؟"

عندما يعرض المستخدم هذه الرسالة ، يظهر زر "مشاركة موقعك" كخيار سياقي. يمكنهم بعد ذلك النقر فوق هذا الزر لإرسال خريطة موقعهم تلقائيًا إلى المستخدم الآخر.

التمرير سريعًا للاختيار

يمكن استخدام Microinteractions للإجابة على أسئلة بسيطة بنعم أو لا في التطبيق. يقوم Tinder بهذا من خلال قيام المستخدم بالتمرير إلى اليسار أو اليمين (لا / نعم) اعتمادًا على ما إذا كانوا يحبون المطابقة المحتملة أم لا.

توسيع البحث

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

سرعة إضافة معلومات الاتصال الخاصة بصديق

يبسط SeatGeek عملية ملء النموذج عن طريق ملء المعلومات تلقائيًا من جهات اتصال المستخدم بضغطة زر "إضافة من جهات الاتصال".

تعرف على المزيد حول التفاعلات الدقيقة

تعد التفاعلات الصغيرة جزءًا أساسيًا من تحسين تجربة المستخدم ، وهناك العديد من الموارد المتاحة لمعرفة المزيد عنها ، وبعضها مدرج أدناه.

لمعرفة المزيد حول التفاعلات الدقيقة بشكل عام ، قم بزيارة Microinteractions ، وهو موقع الويب الذي تم إنشاؤه كمرافق للكتاب المذكور سابقًا "Microinteractions: Designing with Details" للكاتب دان سافير. على الموقع ، هناك تفسيرات مفصلة للتفاعلات الدقيقة بالإضافة إلى معلومات حول أصل التفاعلات الدقيقة المعروفة ، مثل التصحيح التلقائي والإكمال التلقائي والقص واللصق. الفصل الأول من الكتاب متاح أيضًا للتنزيل مجانًا.

لإلهام التفاعل الجزئي ، تفضل بزيارة Little Big Details ، وهي مجموعة منظمة من التفاعلات الدقيقة في المنتجات الرقمية. يعرض أمثلة لكيفية تنفيذ شركات مثل Apple و Trello و Stack Overflow للتفاعلات الدقيقة والرسوم المتحركة لواجهة المستخدم.

لمعرفة كيفية إنشاء تفاعلات دقيقة في Framer ، اقرأ Toptal Designer ، مقالة Wojciech Dobry ، دروس Framer: 7 تفاعلات دقيقة بسيطة لتحسين نماذجك الأولية.

اسمحوا لنا أن نعرف ما هو رأيك! يرجى ترك أفكارك وتعليقاتك وملاحظاتك أدناه.

• • •

مزيد من القراءة على مدونة Toptal Design:

• مبادئ التصميم وأهميتها
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• استكشاف مبادئ تصميم الجشطالت
• Adobe XD مقابل Sketch - ما أداة UX المناسبة لك؟
• أفضل 10 تسليمات لتجربة المستخدم يستخدمها كبار المصممين