Muhit: ما الذي يجعل الواجهة متّسقة؟

عن نظام تصميم يبدأ بالألوان والمكوّنات ويمتد إلى السلوك والسياق والثقة.

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

قلّما نصف هذا التوقّع بأنه جزء من التصميم. ومع ذلك، يتشكّل هنا جانب مهم من علاقتنا بالواجهة: ماذا سيحدث استجابةً لما نفعله؟ ماذا سيتذكّر النظام؟ وكيف سنعرف أن عمليةً ما لم تكتمل؟

كان هذا هو السؤال الذي شغلني أثناء العمل على Muhit: كيف يمكن للأجزاء المختلفة في الواجهة أن تقدّم للمستخدم سلوكاً مشتركاً؟

من أين يبدأ الاتساق؟

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

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

في واجهة كهذه، يضطر المستخدم إلى تعلّم السلوك من جديد حتى لو كان يعرف المظهر.

بدأت Muhit بفكرة تحويل الأجزاء التي نشأت خلال العمل على واجهات Nevmos إلى مكتبة مستقلة. وقد تطلّب فصلها التساؤل عن القرارات التي تخصّ منتجاً بعينه، وتلك التي يمكن نقلها إلى أعمال أخرى.

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

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

لغة مشتركة في ظروف مختلفة

ليس من الضروري أن تبدو هذه البيئة بالشكل نفسه في كل مشروع.

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

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

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

ويظهر اختبار مشابه في الحالات المختلفة للصفحة.

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

«لا توجد سجلات بعد» و«تعذّر تحميل السجلات» حالتان مختلفتان. وقد تختلف الخطوة التالية للمستخدم أيضاً. في الأولى، قد يكون إنشاء سجل جديد مناسباً؛ وفي الثانية، قد تلزم إعادة المحاولة.

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

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

أن تفي الواجهة بوعدها

يجد هذا النهج معناه أيضاً عندما يقترح الوكلاء واجهات.

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

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

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

هنا تتجمّع الفكرة التي توجّه تصميم Muhit بالنسبة إليّ: ينبغي أن يتوافق وعد الواجهة مع ما يفعله النظام بالفعل.

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

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

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

أطوّر Muhit بوصفها بيئة تستطيع فيها أعمال مختلفة أن تجد مكاناً داخل هذه اللغة، مع احتفاظ كل منها بطابعها الخاص.

---

أشكال مختلفة وإيقاع مشترك. أُنتج رسم الغلاف بالذكاء الاصطناعي لهذا المقال.

المصادر: الكود المصدري لـ Muhit · وثائق Muhit 0.15.0

مقال ذو صلة: ماذا تتيح لغة بصرية محدودة؟

مفاهيم الأطلس: التصميم · البرمجيات · السياق · الأنظمة