ملاحظات حقيقية في الواجهة

1) ما هو «التعليقات الحقيقية»

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

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

2) أنواع التعليقات

فورية (≤100 -200 مللي ثانية): تحوم/تركيز/حالة مضغوطة، وتسليط الضوء على العناصر النشطة.
Short (≤1 s): spinners/skeletons، micro-confermations، «Saved».
التقدم المحرز (ثوان - دقائق): تحديد/مؤشرات غير محددة، اتفاق إيتا/خطوات.
التأكيدات: «جاهز» واضح + مرجع النتائج/التراجع.
التحذيرات: منع الضرر (قبل الإرسال) بلطف.
الأخطاء: اشرح «الخطأ الذي حدث» و «كيفية إصلاحه».
حالة النظام: عبر الإنترنت/خارج الإنترنت، التزامن، النزاعات.
ملاحظات المحتوى: تسليط الضوء على التغييرات ومقارنة الإصدارات والشارة الجديدة.

3) مبادئ التغذية المرتدة عالية الجودة

1. التوقيت:

microsignal على الفور ؛ عمليات طويلة الأجل - مع إحراز تقدم.

2. ملزمة بالسياق:

بجانب النشاط/المجال لا تختبئ في لافتة مشتركة.

3. الخصوصية والعمل:

"كلمة المرور قصيرة جدًا (الحد الأدنى 8). إصلاح ذلك ؟" بدلا من «خطأ 400».

4. العكس:

التراجع/إعادة عند إشعار التغيير.

5. إمكانية التنبؤ:

نفس أنماط النجاح/الخطأ في جميع أنحاء المنتج.

6. التوافر:

التباين، ليس فقط اللون، ARIA مباشر، التحكم في التركيز.

7. توفير الانتباه:

الحد الأدنى من الإشارات الكافية ؛ بدون نماذج غير ضرورية و «صراخ».

4) أنماط التعليقات «الحية»

4. 1 الحالات المرئية للعناصر

التحليق/التركيز/الضغط/الإعاقة - التسلسل الهرمي المرئي.
الزر → «التحميل» عند النقر عليه (لا يمكن النقر عليه مرة أخرى).

4. 2 التحقق الداخلي (الحق في الحقول)

التحقق من التركيب عند فقدان التركيز أو توقف الإدخال (debounce 300-500 ms).
رسالة تحت الحقل، أيقونة الحالة، مثال/قناع («+ 38 (0XX) XXX-XX-XX»).
اطلب: منع أولاً، ثم تصحيح.

4. 3 هياكل عظمية и دول فارغة

الهياكل العظمية بدلاً من محتوى «القفز».
حالات فارغة مع تعليمات/بيانات تجريبية و CTA.

4. 4 واجهة مستخدم متفائلة (مع التراجع)

نعرض النتيجة على الفور، ونرسلها إلى الخادم بالتوازي.
في حالة الفشل - التراجع الناعم + السبب الواضح + «تكرار».
هناك حاجة إلى تراجع السجلات والمقاييس.

4. 5 Autosave والمؤشرات

"حفظ 18: 42 "/" التزامن... "/" غير متصل: نسخة محلية "

الصراعات: أظهر تغييرات في النسخة/الدمج.

4. 6 إشعارات وصندوق الوارد

الأحداث المهمة هي نخب غير مزعج لمدة 3-5 ثوانٍ مع زر عمل.
لمهام الخلفية - مركز الإخطار/التاريخ.

5) الأخطاء: التصنيف والإجابات

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

أخطاء Microcopyright: لفترة وجيزة، بالعامية، بدون رمز وذنب المستخدم.

6) العمليات الطويلة وقوائم الانتظار

تحديد التقدم المحرز: الحجم المعروف - بيان النسب المئوية/الخطوات.
غير محدد: غير معروف - تموج + تصنيف «عادة 5-10 ث».
المهام الأساسية: الحالة في قائمة المهام + الدفع/الخبز المحمص جاهز.
الإلغاء/التوقف: عند الاقتضاء - إلزامي.
تكوين التقدم: خطوات عديدة → خطوات مصغرة («الخطوة 2/4: التحقق...»).

7) خارج الإنترنت، الثغرات والنزاعات

أبلغ: شارة "Offline"، "Connect'....
التخزين المؤقت المحلي: العمل بدون شبكة ؛ أرسل قائمة الانتظار.
تعارض الإصدار: معاينة الاختلاف أو الاختيار أو استراتيجية الدمج.
المهلة: «فشلت في 30 ثانية - هل سنحاول مرة أخرى ؟» + «تقرير لاحقًا».

8) إمكانية الوصول والإدماج

مناطق ARIA الحية: «aria-live =» مهذب/حازم «» للنخب/الأخطاء.
إدارة التركيز: عن طريق الخطأ - التركيز على الميدان ؛ بالنجاح - إلى النتيجة.
ليس فقط اللون: أيقونة/نص/نمط.
تفضيلات الحركة: الاحترام «يفضل الحركة المخفضة».
الصوت/اللمس (الجوال): اللمسات الناعمة، خيار التعطيل.

9) مقاييس جودة التغذية المرتدة

TTF (وقت التغذية الراجعة) - الوقت قبل الإشارة الأولى بعد الإجراء.
معدل الخطأ/معدل التصحيح - النسبة المئوية للأخطاء التي تم تصحيحها بنجاح في ≤N ثانية.
Rage-Clicks/Dead-Ends: نقرات متعددة على المناطق غير النشطة.
معدل التراجع (متفائل): النسبة المئوية للتراجع وأسبابها.
تم الاعتراف بالنجاح: النسبة المئوية للتأكيدات الصريحة «الجاهزة».
إشارات الدعم: شكاوى من أخطاء غير مفهومة/حالة مفقودة.
إنجاز المهام/TTFV: تأثير التعليقات على إكمال المهمة والقيمة الأولى.

10) الأجهزة والمناسبات

ui_action {type, target_id, context}
ui_feedback_shown {type: success    warning    error    progress, target_id, latency_ms}
ui_error {category: validation    business    network    system, field, code, retriable}
sync_state {online    offline    syncing, queued_ops, conflicts}
optimistic_tx {entity, op, committed    rolled_back, reason}

السمات: الجزء، الجهاز، القناة، التطبيق/الإصدار البناء.

11) القوائم المرجعية

11. 1 التصميم

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

11. 2 المحتوى/المجهريات

• باختصار، بشأن القضية، بدون مصطلحات فنية.
• لا تلوم المستخدم ؛ يقترح مسار الإصلاح.
• أنماط ثابتة (محفوظة، فاشلة - إعادة تجربة).

11. 3 تقنية

• الخصوصية/انقر فوق التفريغ على CTA.
• قم بإلغاء/إعادة إرسال، ووقت، واسترجاع مع التراجع.
• سجلات TTF والأخطاء والتراجع وطابور غير متصل بالإنترنت.
• الاختبارات مع ضعف الشبكة/الاستجابة الطويلة/النزاعات.

12) أمثلة على حقوق التأليف والنشر الصغيرة

• "حفظ 7:05 مساءً هل تريد فتح البطاقة →

• «كلمة المرور قصيرة جدًا - 8 أحرف على الأقل».

• "فقدت الاتصالات. تم حفظ التغييرات الخاصة بك محليا. هل تريد إعادة الإرجاع ؟"

• "معالجة الملف (الخطوة 2/3)... عادة ما يستغرق ما يصل إلى 30 ثانية. إلغاء"

• "هناك نسخة جديدة من هذه الوثيقة. مقارنة واختيار التغييرات"

• "فشل في تطبيق التغيير. أعاد الأول. أكرر ؟"

13) قبل/بعد الحالات

النموذج بدون مطالبات → المصادقة الداخلية

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

التحميل الطويل → الهيكل العظمي + التقدم

قبل: شاشة فارغة مع دوار ؛ نقرات الغضب.
بعد: الهياكل العظمية، التقدم الحتمي، الانسحاب - تراجع Rage-Clicks.

التزام «الهدوء» → نجاح واضح + الخطوة التالية

من قبل: المستخدم غير متأكد، انقر مرة أخرى.
بعد: رابط محفوظ + مفتوح - عدد أقل من التكرارات والأخطاء.

شبكة غير مستقرة → قائمة انتظار غير متصلة بالإنترنت

قبل: فقدان البيانات.
بعد: النسخ الاحتياطي المحلي، والإرسال المتكرر، وشارة الحالة - زيادة الثقة.

14) عملية التنفيذ

1. خريطة الخطوة والخطأ: أين يلزم الحصول على تعليقات وما هو النوع.
2. نماذج التغذية المرتدة: النجاح/الخطأ/التقدم/عدم الاتصال - مجموعة واحدة.
3. النموذج الأولي والاختبارات: ازدياد التأخير بشكل مصطنع ؛ التحقق من التوافر.
4. الأجهزة: الأحداث، TTF، التراجع، نقرات الغضب.
5. التجارب: A/B على التركيبات والأنماط (inline vs post-submission).
6. طرح العلم والحوادث بأثر رجعي.

15) موجز

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