الأساسيات
حالات التفاعل
كل عنصر تفاعلي في ميركاتو يحمل حالة محددة للسكون والتفاعل وكل ما بينهما.
لمحة عامة
أي أن لكل حالة شكلا محددا: حالة السكون، وحالة التفاعل، وحالة التعطل أو الانتظار أو الفراغ. لا حالة صامتة، ولا حالة تُترك للتخمين.
المستخدم يسأل سؤالا ضمنيا واحدا طوال الوقت: ماذا يحدث الآن، وهل يمكنني الاعتماد على ما أراه؟
كل حالة تفاعل هي إجابة على هذا السؤال. حين تُهمل حالة واحدة، يفقد المستخدم ثقته بالواجهة كاملة، لا بذلك العنصر وحده.
حالة الراحة؛ ألوان وحدود من الرموز مباشرة.
للويب فقط؛ تلوين خفيف ومؤشر يد.
تلوين أساسي أو ظل غاطس، يؤكد أن اللمسة سُجّلت.
حلقة أساسية 2px بإزاحة 2px، لا تُخفى أبدا.
شفافية 40%، بلا تفاعل، بلا تلميح فارغ.
هيكل عظمي بشكل المحتوى، لا دوامة عائمة.
حد أحمر، رسالة أسفل الحقل، لا إشعار عابر أبدا.
توجيه مصمَّم، مختبر عند صفر وواحد ومئة نتيجة.
القاعدة التي تحكم كل الحالات في ميركاتو واحدة: الحالة ظاهرة دائما. حالة الطلب مرئية على البطاقة، وفي التفاصيل، وفي الإحصاءات، دون استثناء.
هذا ليس تفضيلا بصريا، بل شرط ثقة. المندوب والموظف في ميركاتو يتخذان قرارات تشغيلية بناء على ما يريانه، وأي غموض في الحالة يتحول مباشرة إلى خطأ تشغيلي في الميدان.
القاعدة الحاكمة
الحالة الافتراضية
لا تفاعل جارٍ، ولا انتظار، ولا خطأ: هذه هي الحالة التي يقضي فيها المستخدم معظم وقته.
لذلك يجب أن تحمل أوضح قراءة وأقوى تباين في النظام، لا أضعفه.
الألوان والحدود والظلال في الحالة الافتراضية تُبنى من رموز التصميم مباشرة، اللون الأساسي، حدود الشعرة، سطح البطاقة، لا من قيم مخصصة تُخترع لكل شاشة على حدة.
الحالة الافتراضية لا تعني الحالة الوحيدة الموثقة.
عنصر يُصمَّم بحالته الافتراضية فقط، وتُترك بقية حالاته لتُخترع أثناء البرمجة، هو عنصر غير جاهز، مهما بدا مصقولا في الواجهة الساكنة.
التحويم (الويب)
حين يمر المؤشر فوق عنصر تفاعلي، يظهر تلوين خفيف للخلفية ويتحول شكل المؤشر إلى مؤشر اليد.
هذا موجود على الويب فقط، ولا مقابل له على اللمس.
التحويم إشارة استكشاف لا إشارة التزام: يخبر المستخدم أن هذا العنصر قابل للنقر، دون أن يغيّر أي بيانات أو حالة فعلية في النظام.
- استخدم تلوينا خفيفا للخلفية يتوافق مع لون العنصر الأساسي
- بدّل شكل المؤشر إلى يد فوق أي عنصر قابل للنقر، دون استثناء
- لا تحرّك العنصر أو تغيّر حجمه عند التحويم، فهذا يزعزع القراءة
- لا تعتمد على التحويم لكشف معلومة ضرورية، فهي غير متاحة على اللمس أصلا
نشِط / مضغوط
لحظة الضغط الفعلي على عنصر تحمل أوضح استجابة بصرية في كل النظام: تلوين باللون الأساسي أو ظل داخلي غاطس.
هذه الحالة تمنح المستخدم تأكيدا فوريا أن لمسته سُجّلت، قبل أن تصل نتيجة الإجراء من الشبكة أو من منطق الشاشة. التأكيد البصري لا ينتظر التأكيد التشغيلي.
المثال المرجعي: عداد الكمية
التركيز
حلقة التركيز جزء من الوصولية، وليست زخرفة قابلة للحذف عند التسليم. حلقة مرئية بسماكة 2px بلون أساسي (#1B79F5)، بإزاحة مقدارها 2px عن حافة العنصر.
حلقة التركيز لا تُخفى أبدا عن أي عنصر تفاعلي، حتى حين تبدو غير متناسقة بصريا مع تصميم الشاشة، لأن إخفاءها يحرم مستخدم لوحة المفاتيح من أي وسيلة لمعرفة مكانه الحالي.
ترتيب التركيز واتجاه القراءة
التركيز يتبع ترتيب القراءة المنطقي من اليمين إلى اليسار، مطابقا للتخطيط المرئي الفعلي للشاشة: عنصر بعد عنصر بالترتيب الذي يراه المستخدم، لا بالترتيب الذي كُتب به الكود.
أي تعارض بين الاثنين يُصحَّح في التخطيط، لا يُترك للمستخدم ليكتشفه.
إدارة التركيز عند الأوراق السفلية
حين تُفتح ورقة سفلية، ينتقل التركيز إليها فورا. حين تُغلق، يعود التركيز إلى العنصر الذي فتحها.
هذا الانتقال ذهابا وإيابا ليس تفصيلا تقنيا هامشيا، بل ما يمنع مستخدم لوحة المفاتيح أو قارئ الشاشة من الضياع بين طبقات الواجهة المتراكبة.
معطّل
العنصر المعطل يظهر بشفافية 40%، بلا أي استجابة للمس أو النقر أو التحويم.
لا يحمل تلميحا افتراضيا إلا حين يضيف التلميح معلومة تساعد المستخدم فعلا على الفهم، لا حين يكتفي بتكرار كلمة 'معطل' دون تفسير.
- عطّل زر الإرسال بعد تشغيل التحقق، لا قبل أن يبدأ المستخدم بالتعبئة أصلا
- اشرح سبب التعطيل قريبا من العنصر نفسه حين لا يكون السبب واضحا من السياق
- لا تعطّل شاشة كاملة كحل سريع بدل تصميم حالة تحميل جزئية
- لا تترك عنصرا معطلا دون أي تفسير حين يتوقع المستخدم منطقيا أن يعمل
التحميل
واقع الشبكة في بغداد لا يسمح بافتراض اتصال سريع أو مستقر. أي شاشة تحتاج بيانات من أكثر من مصدر تجلبها في طلب واحد مجمّع.
سلسلة طلبات متتالية قد تنتهي كل واحدة منها بمهلة انتظار قبل أن تكتمل الشاشة أصلا.
الحالة الافتراضية للتحميل في ميركاتو هي هيكل عظمي يطابق شكل المحتوى القادم، لا دوامة تحميل عائمة تزيح المحتوى الفعلي بعد وصوله وتكسر استقرار التخطيط.
واجهة متفائلة على الشبكات البطيئة
ليست كل الإجراءات تستحق درجة الحذر ذاتها. الإجراءات الآمنة والقابلة للتراجع تُطبَّق فورا في الواجهة دون انتظار تأكيد الخادم، إلغاء طلبية بحالة 'جديد' مثلا يحدث فورا لأنه لا يزال قابلا للتراجع في هذه المرحلة.
أما الإجراءات الحساسة أو التي يتعذر التراجع عنها فتنتظر التأكيد وتُظهر تحذيرا صريحا قبل التنفيذ. الاحتكاك في ميركاتو مقصود ومتفاوت، يُستخدم فقط حين يحمي المستخدم من ضرر حقيقي، لا كإجراء افتراضي مطبَّق في كل مكان بلا تمييز.
- طبّق التحديث في الواجهة فورا للإجراءات القابلة للتراجع، ووفّر مسار تراجع إن فشل الخادم لاحقا
- استخدم هياكل عظمية بأبعاد مطابقة للمحتوى الفعلي كي لا تتزحزح الصفحة عند وصول البيانات
- لا تُظهر دوامة تحميل عامة تُخفي حالة الطلب الحالية، الحالة تبقى ظاهرة حتى أثناء التحميل
- لا ترسل طلبات متسلسلة لجلب بيانات شاشة واحدة، اجمعها في طلب واحد مجمّع
الخطأ
حدود الحقل تتحول إلى الأحمر (#D72C0D أو ما يعادله)، وتظهر رسالة الخطأ مباشرة أسفل الحقل بنص أحمر تسبقها أيقونة تحذير.
رسالة خطأ التحقق في نموذج لا تُخفى أبدا داخل إشعار عابر يختفي من تلقاء نفسه، لأن المستخدم قد يفوّت الإشعار قبل أن يفهم أي حقل يحتاج تصحيحا.
تحديد لا تعميم
رسالة الخطأ تذكر الرقم أو السبب الدقيق، لا وصفا عاما. ثلاثة أمثلة من ميركاتو:
تجاوز سقف البونص يُقفل الإرسال برسالة تذكر مقدار التجاوز بالضبط، لا "حدث خطأ ما".
إن قيّد مخزن عرض السعر، تظهر عبارة "السعر غير متاح" بدل حقل فارغ أو صفر قد يُقرأ خطأ كأنه سعر فعلي.
إلغاء طلبية يعرض مسبقا ما سيحدث بالتحديد، "سيتم إلغاء طلبية فرعية واحدة من مخزن كذا"، لا تحذيرا عاما لا يحدد شيئا.
- ضع رسالة الخطأ ملاصقة للحقل المعني مباشرة، لا في أعلى النموذج فقط
- اذكر الرقم أو الشرط الدقيق الذي فشل، لا وصفا عاما لا يقود إلى إصلاح
- لا تعرض خطأ نموذج داخل إشعار عابر يختفي تلقائيا خلال ثوانٍ
- لا تكتفِ بلون أحمر بلا نص مرافق، اللون وحده لا ينقل الخطأ لمن لا يميّزه
الفراغ
حين لا توجد نتائج، تُوجَّه الشاشة المستخدم إلى ما يفعله بعد ذلك، بدل عرض مساحة بيضاء صامتة.
الحالة الفارغة مصمَّمة، وليست سطرا شرطيا يُترك للكود.
مكوّن "لا نتائج" نفسه يتكرر بلا تغيير عبر البحث وقوائم الطلبيات وقوائم المنتجات: نفس البنية، نفس النبرة، ونفس دعوة العمل حين تنطبق.
كل شاشة تُختبر عند صفر نتائج، وعند نتيجة واحدة، وعند مئة نتيجة. الحالات الثلاث تكشف أخطاء مختلفة تماما:
الصفر يكشف غياب توجيه للمستخدم.
الواحد يكشف تخطيطات صُممت فقط لقوائم طويلة فانكسرت مع عنصر منفرد.
المئة تكشف بطاقات لم تُختبر تحت الكثافة الفعلية.
قائمة تحقق سريعة
قبل اعتماد أي عنصر تفاعلي جديد، راجعه مقابل حالاته الثماني: