الوصول والإتاحة

ابنِ مرة واحدة، كن متاحا في كل مكان

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

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

معيار جودة، لا تفصيل تجميلي

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

حالة خطأ لا يلاحظها المستخدم هي خلل وظيفي، وليس مسألة أسلوب.

مساحات اللمس

الحد الأدنى لأي هدف قابل للمس على الجوال هو 44×44 بكسل. هذا ليس رقما تعسفيا: هو أصغر مساحة يمكن للإبهام أن يصيبها بدقة أثناء الوقوف والحركة، وهي الحالة الطبيعية لمندوب المبيعات في ميركاتو.

أزرار الستيبر (− عدد +) على بطاقة المنتج مثال حساس بالذات: هذه الأزرار تُستخدم عشرات المرات في الجلسة الواحدة، وأي تقصير في حجمها يتحول إلى احتكاك متكرر طوال اليوم.

اللون لا يحمل المعنى وحده أبدا

أي حالة أو معنى في الواجهة يُعبَّر عنه باللون بالإضافة إلى تسمية نصية، وليس باللون منفردا. البادج الأخضر بلا كلمة "مكتمل" بجانبه هو مجرد نقطة ملونة.

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

حالات المخزن مثال حاسم

التمييز بين متوفر / غير متوفر / غير مرتبط لا يعتمد على اللون فقط: يجمع اللون مع أيقونة مع تسمية نصية معا.

التباين اللوني

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

حالات التحميل واستقرار الواجهة

حالات التحميل تُبنى كهياكل عظمية (skeleton) تحاكي شكل المحتوى النهائي، وليس مؤشر دوران وحده. الهيكل العظمي يحافظ على ثبات التخطيط: لا يقفز المحتوى ولا يتحرك موضع اللمس بمجرد وصول البيانات.

حلقة التركيز المرئية

كل عنصر تفاعلي في ميركاتو يُعرَّف له حلقة تركيز مرئية بعرض 2 بكسل، بلون أساسي، بمسافة إزاحة 2 بكسل.

إدارة التركيز عند فتح الأوراق السفلية

عند فتح ورقة سفلية (bottom sheet)، ينتقل التركيز إليها فورا. عند إغلاقها، يعود التركيز إلى العنصر الذي فتحها في الأصل، لا إلى بداية الصفحة ولا إلى مكان عشوائي.

الستيبر المخصص قابل للتنقل بلوحة المفاتيح

ستيبر الكمية (− عدد +) مكوّن مخصص، لا عنصر HTML قياسي، وهذا يعني أن مسؤولية جعله قابلا للتنقل والتفعيل بلوحة المفاتيح تقع على من بناه.

لا يكفي أن يعمل باللمس فقط.

الإيماءات غير القياسية تحتاج بديلا مرئيا

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

أخطاء النماذج

رسالة الخطأ تظهر مباشرة أسفل الحقل المعني، وليس فقط في أعلى النموذج. إطار الحقل يتحول إلى الأحمر، وتسبق رسالة الخطأ أيقونة تحذير.

لا تُخفى الأخطاء أبدا داخل تنبيه عابر (toast) يختفي من تلقاء نفسه، لأن خطأ التحقق من صحة نموذج يحتاج وقتا كافيا ليُقرأ ويُصحَّح، لا ثانيتين ثم يختفي.

التسميات الصوتية بالعربية

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

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

قائمة تحقق سريعة

قبل اعتماد أي شاشة أو مكوّن، راجعه مقابل هذه الأسئلة: