دليل شامل لتحسين تجربة المستخدم (UX)

• كن محددًا، ودودًا، وقابلاً للحل
• موقع الرسالة: inline تحت الحقل أو على يمينه
• استخدم لغة بسيطة ومباشرة
• لا تلوم المستخدم، وامنحه اقتراحًا
• استخدم أيقونة خطأ صغيرة + لون واضح
• تحقق لحظي (inline validation) إذا ممكن

أمثلة microcopy (عربي):

• الاسم مطلوب — اكتب اسمك كاملًا
• البريد الإلكتروني مش صحيح — حاول example@domain.com
• ضع 8 أحرف على الأقل مع رقم واحد

استخدم شبكة ثنائية/قيمة أساسية (baseline grid) — مثال عملي: قاعدة 8px

tokens: 4px, 8px, 16px, 24px, 32px, 48px

قواعد سريعة:

• بين حقول النموذج: 12–16px
• بين أقسام الصفحة: 24–48px
• بين سطرين نص (leading): 1.4–1.6 * حجم الخط
• بين عنصر وسم (label) وحقل الإدخال: 8–12px

استخدم متغيرات (spacing-1, spacing-2...) في الـDesign System لتوحيد المسافات

استخدم مقياس هرمي واضح، لا تشتت العين

مقياس مقترح (Base 16px):

• H1 (صفحة/عنوان رئيسي): 32–36px (2–2.25rem)
• H2: 24–28px (1.5–1.75rem)
• H3: 18–20px (1.125–1.25rem)
• Body / نص عام: 16px (1rem)
• Small / مساعدة: 12–14px

نصائح:

• استخدم وزن خطوط مختلف (bold للحواشي المهمة)
• لا تنس التباعد (line-height) والـcontrast
• في الشاشات الصغيرة قلّل H1 تدريجياً

• نبرة: نجاح — إيجابي وواضح. إنذار — تحذيري ومحدد
• اللون + أيقونة + نص: لا تعتمد على اللون فقط
• نجاح: "تم حفظ الإعدادات بنجاح." + زر "عرض" إذا مناسب
• إنذار: "تنبيه: رصيدك منخفض — قم بشحن الحساب خلال 3 أيام"
• رسائل مؤقتة (toasts) للنجاحات غير الحرجة
• نوافذ بسيطة (modal) للإنذارات الحرجة
• اعطِ المستخدم خيار إغلاق أو مزيد من التفاصيل

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

هيكلة النصوص:

• عناوين مفيدة (don't make me guess)
• أوامر واضحة على الأزرار: "احفظ" أفضل من "موافق"
• بدائل للأخطاء التقنية: "حصلت مشكلة أثناء الحفظ — جرّب مرة أخرى"

اختبار قابلية الفهم: خلي أحد غير المصممين يقرأ الواجهة واستنتج ماذا يعمل كل زر

• تحجيم: قدم صورًا بعدة أحجام (responsive images: srcset)
• استخدم WebP حيث أمكن
• ضغط: ضغط صور + lazy-loading للصور خارج الشاشة
• الفيديو: استخدم البث (streaming) أو تضمين من منصات CDN
• قدم poster image لمنع layout shift
• تقليل عدد الطلبات: sprites/icons font أو SVGs مضغوطة
• حافظ على LCP منخفض (<2.5s ideal)، وتجنب CLS عالي

مبدأ: الحركة لأغراض دلالة (affordance)، لا للزينة فقط

قواعد:

• زمن الحركة: 100–300ms غالبًا
• easing: استخدم منحنيات اعتدال (ease-out) لـ micro-interactions
• دعم prefer-reduced-motion: اعمل نسخة بدون حركة للمستخدمين الذين يطلبون ذلك
• استخدم أيقونات مفهومة وواضحة، تجنّب أيقونات مبهمة
• حافظ على ثبات النمط وحجمها

مثال: عند حفظ، حوّل زر "حفظ" إلى أيقونة تحميل ثم علامة صح

لماذا Design System؟

• يقلل الجهد، يسرّع التطوير، يحافظ على الاتساق

مكوّنات أساسية:

• ألوان، طوابير ألوان (palettes)
• أحجام خطوط، أزرار، حقول، بطاقات، أيقونات
• وثق القرار: متى نستخدم Primary vs Secondary button
• نظام ألوان: تأكد من تباين كافٍ (WCAG 4.5:1 للـ normal text)

• مبدأ: أهم زر (Primary) واضح وموقعه متوقع
• للواجهات العربية (RTL): ضع الـPrimary قرب نقطة بداية القراءة (عادة إلى اليمين)
• اتبع نمط المنصة (web/mobile)
• حوار/مودال: ترتيب الأزرار يجب أن يكون متسقًا
• Primary أكبر أو ملون
• ترك مسافة كافية بين Primary و Secondary لتفادي الضغط الخاطئ
• تجمع الأزرار المتعلقة ببعضها معًا بصريًا

• اشرح السبب بإيجاز: "فشل الدفع لأن بطاقة الائتمان انتهت صلاحيتها — حدّث تاريخ الانتهاء"
• قدم خطوات تالية: زر "تحديث البطاقة" أو "تواصل معنا"
• سجّل الأخطاء: وأظهر رمز مرجعي للمستخدم إذا تواصل مع الدعم (مثلاً: رقم الخطأ #2457)