نعم، يمكنك التعرف أكثر عن نظام التصميم من خلال هذا الفيديو التعريفي أو بزيارة عن نظام تصميم المواقع الإلكترونية 2.0.
الأسئلة المتكررة
تم بناء «نظام تصميم المواقع الإلكترونية» لمساعدة جهات الحكومة الاتحادية لدولة الإمارات العربية المتحدة على توفير تجارب متسقة للمستخدم عبر منصاتها الإلكترونية، وفيما يلي الأسئلة الأكثر تكررًا وإجاباتها للمساعدة على توفير تجارب بتلك المواصفات.
يعد الغرض الرئيسي من نظام التصميم هو توفير تجربة متسقة، حيث تم إنشاء جميع مكوناته وعناصره بناء على الأبحاث واختبارات إمكانية الوصول.
على وزارات دولة الإمارات العربية المتحدة استخدام المكونات والأقسام كما هي، دون أي تعديل على الإطلاق، وتتاح لجهات الحكومة الاتحادية إمكانية عمل تغييرات محدودة كألوان العناصر والأقسام بما يتماشى مع الألوان الخاصة بالجهة. ولذا، على الوزارات والجهات الاتحادية تجنب تعديل المكونات الأساسية والأقسام والامتثال للإرشادات والهيكل بأقصى قدر ممكن.
وينصح باستخدام نظام التصميم في إنشاء مواقع المبادرات وغيرها من الأنشطة الداعمة، إلا أن ذلك ليس إلزاميًا.
نعم، بل يوصى باستخدام نظام التصميم وجميع المكونات الأساسية لإنشاء بوابات الخدمات وغيرها من البوابات الداخلية الموجهة للمستخدم.
وقد تم وضع ذلك في الاعتبار عند تصميم بعض الأقسام والعناصر وإنشائها، وخاصة كما في قسم تسجيل الدخول الذي يرشد الجهة إلى كيفية التنفيذ الفعال لعمليتي تسجيل الدخول وإنشاء الحسابات التي تُعد الهوية الرقمية بها وسيلة التحقق الرئيسية.
أما عن خدماتها، فإن بوابات الخدمات توفر أساسًا إمكانية إرسال النماذج وعرض حالة الخدمات المطبّقة، كما تم أيضًا وضع المخططات التي تهدف إلى تنفيذ نظام التصميم بمنصات أخرى غير المواقع المخصصة لآخر مستخدم user-facing websites.
يعد نهج "الجوال أولًا" عاملًا يجب وضعه في الاعتبار عند تصميم مواقع الويب للجوال وتحديد عرض جهاز المستخدم، كما في «نظام تصميم المواقع الإلكترونية» لدولة الإمارات العربية المتحدة الذي يتبع النهج بإعدادات CSS.
ويعني ذلك أنه عند تصميم الواجهات الأمامية وبرمجتها لمواقع الويب، فإنه يجب أولًا الوضع في الاعتبار مخططات الجوال وتنفيذ تغييرات تدريجية إلى العناصر لتحديد مدى تكيفها مع الشاشات الكبيرة، كما يجب على الجهة تجنب اعتماد المخططات التي لا تضع تصورًا للجوال.
بمعنى آخر، فإنه يجب أولًا التأكد من أن تجربة المستخدم تستوعب أحجام الشاشات المختلفة لأجهزة الجوال، كما يجب أن تضع قراراتك حول الموقع كالمحتوى والأصول، كالصور، ومخطط الموقع من منظور الجوال أولاً.
وفيما يلي بعض المقالات للمساعدة على فهم المذهب بشكل أفضل:
يُفضل أن يكون الفريق الداخلي للجهة ملمًا بتفاصيل الدليل الإرشادي لنظام التصميم وقواعده.
ويجب أيضًا أن يلعبوا دورًا هامًا في مرحلة التخطيط واتخاذ القرارات، بأن تستند حول كيفية إنشاء التصميمات والمحتوى والتخطيطات بما يتوافق مع الدليل الإرشادي، وأن يكونوا هم مسؤولي المنتج الرقمي وأن يضمنوا أن النتيجة النهائية تراعي الاتساق ومبادئ إمكانية الوصول.
ومن الضروري أيضًا التركيز على إنشاء المحتوى كخطوة أولى وأن يتضمن «موجز التصميم» ما لا يقل عن 50٪ من النص الذي تمت الموافقة عليه للموقع.
وينصح أيضًا بإعطاء اهتمام كبير لعملية التطوير والتأكد من أن تطوير الموقع يتوافق مع معايير التصميم.
ويمكن استخدام معييار التقييم عند الحاجة إلى وضع أهداف إنشاء المواقع الإلكترونية التي تراعي الاتساق وإمكانية الوصول.
على الجهة الإلمام بكافة جوانب الدليل الإرشادي، مع التركيز على اللون وإمكانية الوصول وتخطيط الواجهات ودليل الخط، وتقييم المحتوى كما هو موضح في الدليل الإرشادي للمحتوى.
ولمساعدة الجهات في التقييم الذاتي، قامت هيئة تنظيم الاتصالات والحكومة الرقمية TDRA بإعداد قائمة من متطلبات معايير التقييم.
- إذا واجهتك أي مشكلة بنظام التصميم، يرجى الإبلاغ عنها من خلال صفحة GitHub issues للمشكلات الفنية.
- ولتبادل الآراء أو طرح الأسئلة على أفراد مجتمع نظام التصميم، يرجى زيارة صفحتنا GitHub community.
- وللمزيد من المعلومات، يمكنك أيضًا التواصل معنا على designsystem@tdra.gov.ae
يُعد التمرير من الخواص الأساسية بالمواقع الإلكترونية، على عكس "العودة إلى الأعلى" الذي يعد خيارًا، والذي يمكن إضافته إذا لزم الأمر، ومع ذلك يجب أن يتبع أي عنصر لاصق sticky element للأجهزة المحمولة إرشادات إتاحة محتوى الويب WCAG 2.2 للعناصر الطافية حيث لا يمكن لعنصر طافٍ أن يعطل عنصر آخر تفاعلي أسفله.
ويُوصى بظهور أيقونة التمرير إلى الأعلى فقط عند ظهور التذييل بالشاشة لإعطاء الخيار للمستخدم للانتقال إلى أعلى الصفحة.
يجب على الجهة وضع بانر تحميل تطبيقات الجوال أعلى التذييل، ولكن لها حق اختيار وضعه بجميع صفحات الموقع أو على صفحات معينة أو بالصفحة الرئيسية فقط.
يجب أن تضيف أي معلومات أو محتوى بالموقع قيمة لزواره، الأمر الذي قد لا يتم بعرض عدد الزيارات للمستخدم.
تُلزم الجهة بجمع التحليلات والبيانات حول زيارات الموقع وصفحاته باستخدام أدوات التحليل، كما يمكن لها عند الرغبة أن تختار إنشاء عرض مرئي للبيانات بقسم البيانات المفتوحة.
ويمكن للجهة إضافة عدد زيارات الموقع إذا تبين لها ضرورة ذلك. وفي هذه الحالة، يمكنها إضافته أسفل رقم التواصل في التذييل وإضافة أسبابها بمعايير التقييم.
يجب أن تتبع الصفحة الرئيسية الصيغة التالية:
- العنوان والتنقل، بما يتوافق مع كل قسم
- القسم الرئيسي أعلى الصفحة
- قسم الخدمات
- قسم المبادرات
- قسم الأخبار
وما يقع بين قسم الأخبار والتذييل يعد اختياريًا
وكما ذكرنا مسبقًا، فإنه يجب الوضع في الاعتبار سرعة تحميل الصفحة وما سيكون ذو قيمة للمستخدم عند اتخاذ القرارات المتعلقة بالموقع، فعلى سبيل المثال، فإن إضافة منشورات التواصل الاجتماعي بالصفحة الرئيسية لا يضيف أي قيمة بل يشتت المستخدم بعيدًا عن الصفحة لأن الهدف من وسائل التواصل هو توجيه المستخدمين إلى موقعك وليس العكس.
لديك الحق في كيفية وصف تفاصيل الخدمة والخطوات والشروط على النحو المطلوب على أن تراعي إضافة المحتوى المناسب الذي يوضح الشروط.
واحرص على توضيح تفاصيل الخدمة باستفاضة من خلال النمط التالي:
- تفاصيل الخدمة بحد أدنى 100 كلمة
- إجراءات الخدمة المتوقعة
- الشروط والمتطلبات
- الأسئلة الشائعة (إن وجدت)
- سمات الخدمة
ويمكنك استخدام أي مكون من نظام التصميم لبناء محتوى صفحة الخدمات بما يساعد في توصيل المعلومات للمستخدم بدقة.
بإمكانك إضافة أي حقول مطلوبة إلى النموذج وطلب أي بيانات أساسية في نموذج التواصل.
يعد الغرض من قوالب نظام التصميم هو تسليط الضوء على أهمية النموذج كمكون إلزامي، حيث يمثل عنصرًا بديلًا إلى حد كبير، وقد يختلف محتوى النموذج من جهة إلى أخرى، وبذلك يجب ضمان تطبيق عناصره، كعناصر الاختيار، مثل مربعات الاختيار، أو النصوص، وفقًا لنظام التصميم.
للجهة حرية الاختيار إضافة المزيد من المعلومات إلى الصفحة، ويشتمل نظام التصميم على توجيهات حول كيفية إدارة المحتوى وتخطيط الواجهات وإمكانية الوصول، والتي يمكن للجهة الرجوع إليها لإضافة العناصر ذات الصلة.
للجهة الحرية في إضافة مثل هذه الخصائص إذا كانت قادرة على تعزيز التجربة وتوفير المعلومات عنها. وطالما تم اتباع قواعد كتابة المحتوى وإمكانية الوصول وتخطيط الواجهات، فإن للجهة أيضًا حق اختيار عرض النموذج في نافذة منبثقة modal أو على صفحة مستقلة.
وفقًا لإرشادات تخطيط الواجهات، فإن نظام التصميم يتبع مذهب الجوال أولًا، ولذلك يجب التأكد أولًا من أن النموذج يعمل بفعالية وسلاسة ودقة على الجوال أولاً.
تعد أهداف التنمية المستدامة، كما تعرف على موقع الأمم المتحدة، عاملًا رئيسيًا يجب عرضه على الموقع الإلكتروني. ويُوصى بشدة تخصيص صفحة داخل هيكل المعلومات الخاص بموقع الجهة حول الاستدامة ووصف كيفية تطبيقها للأهداف بشكل عام، سواء بشكل رقمي أو غير رقمي، وإنشاء محتوى لشرح كيفية مساهمة العناصر الرقمية في تحقيق هذه الأهداف من خلال المهام الفرعية.
ويعد عرض الخدمات أو المبادرات التي تساهم في تحقيق هذا الهدف أمرًا اختياريًا، حيث يمكنك اختيار أن تضيف محتوى حول الصفحة المخصصة لذلك أو ربطه بالمحتوى الذي تم إضافته عن الاستدامة.
ويعد وضع خرائط التعاطف ودراسات تجربة المستخدم من ضمن أهم الخطوات في تحديد استراتيجية وضع المحتوى، ولدينا مقال تم نشره حول رسم الخرائط العاطفية، والذي قد يستخدم كعامل إرشادي لعرض المحتوى المناسب للمستخدم بشكل أفضل.
يتبع نظام التصميم اتجاه التصميم للجوال أولًا، وبالتالي، يتوقع أن يتم تنفيذ مخططات الواجهات الأولية واختبارات المحتوى على أساس الجوال أولاً. وعند تصميم موقع الجهة، فإنه يجب على نظام التصميم التوجه نحو إنشاء تخطيطات للجوال تعزز قابلية الاستخدام.
وتعد كل خصائص التصميم المتجاوب جزءًا من العناصر والأقسام بنظام التصميم، كما تحتوي إرشادات تخطيط الواجهات ودليل الخط على شرح مفصل عن كيفية الاستفادة من خاصية الاستجابة بالمواقع.
وقد بُني نظام التصميم ليكون متجاوبًا ومدعمًا للاستخدام على الجوال.
تحدد إرشادات الأيقونات مجموعة الألوان المتاح استخدامها والنصائح حول أفضل الطرق لوضعها على الموقع. ومن الضروري أيضًا استخدام معرض الأيقونات، ولكن في حال لم تجد الأيقونة المناسبة، فعليك تصميمها بما يتوافق مع المبادئ الإرشادية بملف نظام التصميم بفيجما.
على الجهة الإلمام بمصطلحات «مؤشر عرض أكبر جزء من المحتوى LCP» و«مؤشر أول محتوى مرئي FCP» و«زمن وصول أول بايت tTTFB» لتتمكن من تحديد مؤشر سرعة الصفحة. وتوصي جوجل بأن يقل مؤشر عرض أكبر جزء من المحتوى (LCP) عن 2.5 ثانية، أما نظام التصميم الخاص بالإمارات العربية المتحدة، فينص على ألا يتجاوز الثانيتين.
وللمزيد من المعلومات حول وقت التحميل ومتطلبات سرعة الصفحة، يرجى الاطلاع على الرابطين التاليين:
للتوضيح أولاً، يعد الإصدار الحالي لإرشادات إتاحة محتوى الويب WCAG هو الإصدار رقم 2.3، وبالتالي يجب أن يتم الامتثال لأي جانب من جوانب إمكانية الوصول على الويب بما يتوافق مع إرشادات إتاحة محتوى الويب WCAG 2.2 كحد أدنى.
وبالرغم من عدم وجود حاجة إلى المستوى AAA، إلا أنه يشترط على كل جهة تطبيق المستوى AA، حيث يؤدي عدم اختبارها له إلى عدم امتثالها لنظام التصميم. وقد تم اختبار مكونات نظام التصميم وفقًا لمعايير المستوى AA المذكورة بإرشادات إتاحة محتوى الويب WCAG 2.2.
ولا يعد تباين الألوان العامل الوحيد الذي يجب مراعاته للامتثال لمعايير AA التي تتطلب ما يلي، على سبيل المثال لا الحصر:
- ألا يقل حجم الرموز عن 32 × 32 بواجهات الويب (لا الجوال)
- ألا تقل مساحة جميع العناصر التفاعلية عن 44 × 44 بكسل في CSS
- إتاحة جميع المعلومات المدخلة مسبقًا عند إدخال المستخدم لبيانات النموذج من خلال خاصية الملء التلقائي أو التحدي
- ضرورة توفير ترجمات للمحتوى الصوتي الحي بالوسائط المتزامنة
ويهدف المثال أعلاه إلى تسليط الضوء حول ضرورة تحقيق المعايير المختلفة للنجاح وتحقيق التباين في الألوان للامتثال إلى معايير المستوى AA.
يتبع نظام التصميم اتجاه التصميم للجوال أولًا، وبالتالي، يتوقع أن يتم تنفيذ مخططات الواجهات الأولية واختبارات المحتوى على أساس الجوال أولاً. وعند تصميم موقع الجهة، فإنه يجب على نظام التصميم التوجه نحو إنشاء تخطيطات للجوال تعزز قابلية الاستخدام.
وتعد كل خصائص التصميم المتجاوب جزءًا من العناصر والأقسام بنظام التصميم، كما تحتوي إرشادات تخطيط الواجهات ودليل الخط على شرح مفصل عن كيفية الاستفادة من خاصية الاستجابة بالمواقع.
وقد بُني نظام التصميم ليكون متجاوبًا ومدعمًا للاستخدام على الجوال.
يشمل الدليل الإرشادي مجموعة من الألوان التي يمكن استخدامها للمواقع الإلكترونية. وبالتالي، فإنه لا يسمح لوزارات الإمارات العربية المتحدة بعمل أي تغييرات باستخدامات الألوان.
ويمكن لجهات الحكومة الاتحادية للإمارات العربية المتحدة بتحديد اللون الرئيسي وفقًا لحاجتها باستخدام عينة ألوان تحتوي على نفس مستوى رموز hex كما في لون ذهبي الإمارات UAE-Gold، مما يساعد على دقة التنفيذ.
ولمراعاة الاتساق، ينصح بالاقتصار على استخدام الألوان المذكورة بالإرشادات الخاصة بالألوان فقط.
يحتوي معرض الأيقونات على أكثر من 1,248 أيقونة، تتوفر كل واحدة منها بـ6 أنواع مختلفة، وهو معرض واسع يضم الكثير من الأيقونات المفيدة.
وإن كنت لا تزال في حاجة إلى رمز معين ليس متوفرًا بمعرض الأيقونات، فيُوصى بتصميم هذا الرمز وفقًا لإرشادات الأيقونات الموجودة بملف فيجما لنظام التصميم، حيث يجب تصميم كل رمز مخصص بنفس الارتفاع والعرض.
يمكنك بالطبع إضافة هذه الخاصية، ولكن عليك تحديد كيفية حفظ مثل عناصر التحديد تلك وكيفية عرضها للمستخدم. وإذا كان الخيار لحفظ الخدمة كمفضلة يعتمد على استخدام ملفات تعريف الارتباط في المتصفح، فعليك التأكد من ذكر هذا في سياسة الخصوصية وملفات تعريف الارتباط.
وقد ترغب أيضًا في النظر في كيفية تحويل المفضلات المحفوظة مسبقًا إلى سجل دائم عند دخول المستخدم إلى حسابه.
يمكن للتنبيهات أن تكون «قابلة للتجاهل» ويمكنها أن تكون «ثابتة».
وتشير التنبيهات الثابتة إلى السياقات التي يرغب فيها الموقع في التأكد من أنها مرئية باستمرار للمستخدم.
أما التنبيهات القابلة للتجاهل فتعد من أفضل الممارسات لتجربة المستخدم، حيث تعطي للمستخدم خيار إغلاق التنبيه، والذي يشير إغلاق في حد ذاته إلى رؤية المستخدم له وللرسالة التي يعرضها.
وإذا كان عرض التنبيه محوريًا ويجب أن يظل مرئيًا باستمرار للمستخدم، فيجب عدم تصنيفه كتنبيه قابل للتجاهل.
تعد هذه توصية أكثر من كونها قاعدة، حيث تستند قياس معايير التقييم إلى قياس سرعة الصفحة و«مؤشر عرض أكبر جزء من المحتوى LCP» و«مؤشر أول محتوى مرئي FCP»، فإذا حقق موقع الويب ما يوصي به نظام التصميم لعرض أكبر جزء من المحتوى LCP وأول محتوى مرئي FCP بوجود 5 عناصر في المنزلق (slider)، فلك حرية إضافتها، إلا أن نظام التصميم يوصي بشكل عام بعدم وضع أكثر من 3 عناصر في بانر الصفحة الرئيسية.
يذكر نظام التصميم مفهوم «التدهور التدريجي»، كما يشرح مفهوم «التصميمات المتجاوبة».
ولذلك، يجب التأكيد على أن درجة دقة الشاشة التي يوصى بها لا تعد عاملًا لأنه يستلزم تجاوب موقعك مع كافة درجات الدقة، حيث يجب وضع فواصل للشاشة لكافة الأجهزة واختيار (بناءً على تحليلاتك وبياناتك) درجة الدقة الخاصة بإطار CSS بموقعك. وتوضح الإرشادات الخاصة بتخطيط الواجهات كيفية عمل ذلك.
وفيما يتعلق بدعم المتصفح، فينصح بالاطلاع على صفحة دعم المتصفح لمعرفة آلية التنفيذ واستخدام التدهور التدريجي. وستحدد ما لديك من بيانات تحليلية عن أكثر المتصفحات استخدامًا مع موقعك، إلا أنه لا يزال عليك توفير الدعم لجميع المتصفحات التي تتطابق مع المعايير المذكورة بصفحة «دعم المتصفح». وعند تعذر تطبيق التدهور التدريجي، فيجب في هذه الحالة تنبيه المستخدم بعدم التوافق في الاستخدام.
يتوفر عنصر التصفية ضمن نظام التصميم، ويمكن الاطلاع على بعض من أمثلته بهذه الصفحة.
ويعد الغرض من الأقسام هو توفير أمثلة على أفضل استخدامات الموقع، وللجهة حق اختيار عوامل التصفية على أن تكون ذات صلة بنتائج البحث وبمتطلباتها كجهة.
وطالما أن العنصر يتبع متطلبات التصميم للعناصر مثل حقول النص والقوائم المنسدلة ومربعات وأزرار الاختيار وغيرها، فيمكن للجهة إضافة عوامل تصفية تساعد على تعزيز تجربة المستخدم.
يوفر نظام التصميم أمثلة على حالات الاستخدام الشائعة، فإذا تطلب مخطط تصميمك إضافة خاصية تحميل أنواع مختلفة من الملفات، فيمكنك في هذه الحالة إجراء التعديلات على القوالب.
ومع ذلك، عليك التأكد من استخدام نمط للعنصر كما هو موضح، فإذا اخترت مثلًا أن تسمح للمستخدم بتحديد «النوع» كقائمة منسدلة، فاستخدم في هذه الحالة عنصر «التحديد» من نظام التصميم. ومن ناحية أخرى، إذا كنت ترغب في السماح للمستخدم بالتحميل عن طريق اختيار زر به أيقونة، فاستخدم في هذه الحالة أيقونات من معرض الأيقونات.
تشير الإرشادات إلى أهمية أكبر جزء من المحتوى وأول محتوى مرئي، فعندما تحتوي الصفحة على عنصر شريط البانر الذي يشمل أكثر من صورة، يتم اعتباره العنصر الأكبر، مما يؤثر على أول محتوى مرئي يظهر بالموقع.
وتوصي الإرشادات أيضًا باستخدام صور رأسية كبيرة لا تزيد على 3، فإذا أضفت بإضافة 3 صور، فإنه يجب تحميلها بشكل مؤجل وتنشيط التمرير التلقائي بعد تحميل الصفحة، مما يعني توافق كل من أكبر جزء من المحتوى LCP وأول محتوى مرئي FCP مع متطلبات التقييم.
علاوةً على ذلك، إضافة ميزة الإيقاف فعليًا تعتبر إجراءً. إذا أظهرت دراسات تجربة المستخدم لموقعك الإلكتروني أنها تعتبر حلاً أفضل، فيمكنك إضافتها. على العموم، يُعتبر "إيقاف عند التحويم" منهجًا أفضل لإيقاف شريط التمرير بدلاً من الاعتماد بشكل صريح على فعل الإيقاف من قبل المستخدم.
بالتأكيد، لا نوصي بسمات الموقع. يجب أن يكون موقع الويب متسقًا - وهذا هو هدف نظام التصميم. كما أننا نوصي بأن جولة الافتراضية ليست خيارًا للإعدادات. إنها ميزة يمكنك عرضها للمستخدم ضمن عناصر التنقل التي تكون الأكثر ملاءمة للموضوع.
إضافة أيقونة الإعدادات - يعني أنك ترغب في تخصيص بعض الإعدادات التي تكون ذات صلة لهذا المستخدم. في الواقع، يجب أن تكون هذه الإعدادات متاحة بمجرد تسجيل المستخدم دخوله - حتى تتمكن من حفظ هذه الإعدادات كتفضيلات نحو حساب المستخدم وتحميلها في كل مرة للمستخدم. بالإضافة إلى ذلك، يمكنك حفظ هذه التفضيلات للمستخدمين الذين لم يقوموا بتسجيل الدخول في التخزين المحلي أو ملفات تعريف الارتباط. من المهم أيضًا أن تنظر في إعدادات الخصوصية التي قد يقوم المستخدم بتطبيقها لقبول ملفات تعريف الارتباط.
في جميع الحالات، يجب إدارة توفير قدرة المستخدم على تخصيص ميزات الوصول من خلال التحقق أولاً، وتوفير واجهة للمستخدم لتعزيز الخبرة بشكل أكبر.
سابق
الأدوات والأصول
التالي
الأسئلة المتكررة
