مكتب رئيس الوزراء، البحرين

نظم التصميم

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

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

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

تنسيق المكونات والقوالب

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

أسس التصميم (الطباعة ونظام الألوان)

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

تم اختيار خط Public Sans للغة الإنجليزية وخط Noto Kufi للخط العربي نظراً لارتفاعهما الكبير (الارتفاع الحرفي للأحرف الصغيرة)، مما يُحسّن سرعة القراءة بشكل ملحوظ على شاشات الهواتف المحمولة ذات الدقة المنخفضة.

كما اختيرت لوحة ألوان ذات تباين عالٍ، لضمان وضوح التنبيهات والتنقل لجميع المستخدمين، بمن فيهم ذوو الإعاقة البصرية، مع مواءمتها في الوقت ذاته مع المعايير العصرية والاحترافية للحضور الرقمي للمملكة.

إمكانية الوصول والامتثال

كانت إمكانية الوصول مطلباً أساسياً، وقد صُمم الإطار ليتوافق مع معيار WCAG 2.1 المستوى AA - المعيار العالمي لإمكانية الوصول إلى الويب - مما يوفر دعماً لآليات قراءة الشاشة والتنقل باستخدام لوحة المفاتيح فقط، ما يُمكّن الجهات الحكومية من تلبية متطلبات الشمولية القانونية والأخلاقية تلقائياً.

دعم اللغتين

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

الأداء وكفاءة واجهة المستخدم

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

دليل Figma مصدراً للموثوقية

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

مصدر GitHub وتمكين المطورين

استضفنا قاعدة الشفرة البرمجية بالكامل على GitHub لضمان تعاون شفاف، ومن خلال إتاحة إطار العمل للمطورين لإنشاء نسخة وظيفية منه (Fork) أو توسيعه، مكّنّا فرق العمل الحكومية الداخلية من تبني النظام بسرعة، حيث يضمن هذا النهج مفتوح المصدر سهولة دمج إطار العمل في أنظمة إدارة المحتوى (CMS) المختلفة أو التطبيقات المخصصة.

البنية التقنية وحزمة التقنيات

من الناحية الهندسية، اخترنا بنية مستقلة عن إطار العمل (متعددة الاستخدامات ومتوافقة مع مختلف البرامج) وقائمة على HTML5 وCSS (عبر Sass) وJavaScript. وباستخدام Bootstrap 5.3 للشبكة وjQuery للعناصر التفاعلية، وفرنا بنية تقنية قوية ومتوافقة مع معايير الصناعة، ما يضمن سهولة صيانة النظام، وتوافقه العالي مع خوادم الحكومة الحالية، وإمكانية استخدامه من قبل المطورين ذوي المهارات الأساسية في تطوير الويب.

يتوفر نظام التصميم الشامل لجميع موردي الحكومة للاطلاع عليه على موقع المشروع الوطني للبنى المؤسسية لتقنية المعلومات والاتصالات في البحرين.

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

استراتيجية تجربة المستخدم

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

تصميم واجهات المستخدم (UI)

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

تصميم وتطوير المواقع الإلكترونية

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

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