فكرة التصميم
تقوم فلسفة التصميم في نظام إدارة وطباعة بطاقات الموظفين على مبدأ الوضوح الوظيفي والبساطة البصرية، حيث تهدف الواجهة إلى تقليل الحمل المعرفي على المستخدم وتوجيهه نحو إتمام المهام الأساسية من البحث والإدخال والطباعة بأقل عدد من النقرات. يتم تنظيم عناصر التحكم والمحتوى وفق تسلسل بصري منطقي يتوافق مع اتجاه القراءة من اليمين إلى اليسار في الواجهة العربية، مع ضمان انعكاس كامل للتخطيط عند التبديل إلى اللغة الإنجليزية دون الحاجة إلى إعادة تحميل الصفحة، بما يضمن تجربة استخدام سلسة وموحدة. يعتمد النظام على نظام ألوان هادئ ومهني يعكس الهوية البصرية للمؤسسة، مع استخدام لون مميز للتحذيرات والعمليات الحساسة مثل حذف البيانات أو انتهاء صلاحية البطاقات، مما يعزز القدرة على قراءة المعلومات بسرعة ودقة. كما صُممت الواجهة لتكون متجاوبة بالكامل، حيث تتكيف عناصر الجدول والنماذج تلقائيًا مع أبعاد شاشات أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف الذكية، مع الحفاظ على قابلية الاستخدام عبر لوحة المفاتيح وأدوات قراءة الشاشة لدعم الموظفين ذوي الاحتياجات الخاصة. يركز التصميم على تسريع عمليات البحث والفلترة في شاشة إدارة الموظفين، وتوفير مساحة كافية في شاشة معاينة البطاقة لعرض التفاصيل الدقيقة ورمز الاستجابة السريعة QR Code بوضوح تام قبل الطباعة، مما يعكس اهتمام النظام بالدقة والموثوقية في بيئة العمل اليومية.
الشاشات
- SCR-01شاشة تسجيل الدخول: تعرض حقولًا لإدخال اسم المستخدم وكلمة المرور، مع تفعيل خيار المصادقة الثنائية إلزاميًا عند اختيار دور مدير النظام، وتوفر زرًا للتبديل بين اللغتين العربية والإنجليزية.
- SCR-02الشاشة الرئيسية Dashboard: تعرض مؤشرات أداء حية تشمل إجمالي عدد الموظفين، والموظفين النشطين، والبطاقات المنتهية، والبطاقات التي ستنتهي قريبًا، مع أزرار تنقل سريعة نحو الشاشات الفرعية.
- SCR-03شاشة إدارة الموظفين: تعرض جدولًا تفصيليًا قابلاً للبحث والفلترة حسب الإدارة وحالة الموظف، مع أزرار لإجراءات التعديل والحذف والطباعة، وحقول إدخال مخصصة لإضافة بيانات موظف جديد.
- SCR-04شاشة إضافة موظف: تعرض نموذجًا يحتوي على حقول الرقم الوظيفي والأسماء والمسمى الوظيفي والإدارة والبريد الإلكتروني ورقم الجوال والتواريخ والصورة الشخصية وحالة الموظف، مع زر حفظ البيانات في قاعدة البيانات المركزية.
- SCR-05شاشة تعديل بيانات الموظف: تعرض نموذجًا مملوءًا مسبقًا ببيانات الموظف المستهدف، مع إمكانية تعديل الحقول وحفظ التغييرات، ونافذة تأكيد قبل تنفيذ عملية الحذف.
- SCR-06شاشة معاينة البطاقة: تعرض تصميم البطاقة المولدة تلقائيًا مع الصورة الشخصية والاسم والرقم الوظيفي والمسمى الوظيفي والإدارة وتاريخ الانتهاء ورمز الاستجابة السريعة QR Code، مع أزرار للطباعة وتحميل PDF.
- SCR-07شاشة إدارة قوالب البطاقات: تتيح لمدير النظام اختيار التصميم المعتمد وتحديد العناصر التي تظهر على البطاقة، مع إمكانية إنشاء قوالب جديدة أو تعديل القائمة الحالية.
- SCR-08شاشة إدارة المستخدمين والصلاحيات: مخصصة لمدير النظام فقط، وتتيح إنشاء حسابات جديدة وتحديد أدوار المستخدمين (مدير أو عادي) وإدارة صلاحيات الوصول للبيانات والوظائف.
- SCR-09شاشة سجل العمليات والتدقيق: تعرض قائمة زمنية بالعمليات الحساسة (إضافة، تعديل، حذف، طباعة) مع اسم المستخدم والتاريخ والوقت، مع أزرار لتصدير السجلات بصيغة CSV أو PDF.
- SCR-10شاشة التحقق من صحة البطاقة: تستقبل بيانات رمز الاستجابة السريعة QR Code المسحوب، وتعرض حالة صحة البطاقة (سارية أو منتهية أو غير موجودة) مع البيانات المرتبطة بالرقم الوظيفي.
رحلات المستخدم
تبدأ رحلة المستخدم من شاشة تسجيل الدخول SCR-01، حيث يُدخل بيانات الاعتماد، وعند اختيار دور مدير النظام تُفعّل المصادقة الثنائية تلقائيًا، ثم ينتقل إلى الشاشة الرئيسية Dashboard SCR-02 التي تعرض مؤشرات الأداء الحية. من هذه الشاشة، يمكن للمستخدم العادي الانتقال مباشرة إلى شاشة إدارة الموظفين SCR-03 للبحث في الجدول أو الفلترة حسب الإدارة والحالة، بينما يمتلك مدير النظام صلاحية الوصول إلى شاشة إدارة المستخدمين SCR-08 وشاشة قوالب البطاقات SCR-07. عند الرغبة في إضافة موظف جديد، ينتقل المستخدم من شاشة إدارة الموظفين إلى شاشة إضافة موظف SCR-04، حيث يملأ الحقول المطلوبة ويحفظ البيانات، مما يؤدي إلى توليد بطاقة الموظف تلقائيًا وفق القالب المعتمد. بعد الحفظ، ينتقل المستخدم إلى شاشة معاينة البطاقة SCR-06 للتحقق من دقة البيانات والتصميم، ثم يختار بين الطباعة الفردية أو الجماعية أو تحميل نسخة PDF. في حال الحاجة إلى تعديل بيانات موظف موجود، يُفتح نموذج التعديل في شاشة SCR-05، وبعد الحفظ تُحدَّث البطاقة تلقائيًا. أما عند حذف موظف، فتظهر نافذة تأكيد قبل التنفيذ، وتُسجل العملية في سجل التدقيق SCR-09. يمكن لمدير النظام أيضًا الانتقال إلى شاشة سجل العمليات SCR-09 لمراجعة الإجراءات الحساسة وتصديرها، أو إلى شاشة التحقق SCR-10 للتحقق من صحة البطاقات عبر مسح رمز QR Code. جميع هذه المسارات تُسجل في قاعدة البيانات مع توثيق اسم المستخدم والتاريخ والوقت، مع ضمان أن الواجهة تتكيف مع اللغة المختارة (العربية أو الإنجليزية) وتجاوبها مع مختلف الأجهزة دون إعادة تحميل.
مكونات الواجهة
تتبنى الواجهة البصرية للنظام مجموعة من المكونات المشتركة الموحدة التي تضمن اتساق التجربة عبر جميع الشاشات، مع مراعاة صارمة لمبدأ الكتابة من اليمين إلى اليسار في اللغة العربية، ومن اليسار إلى اليمين في الإنجليزية، دون الحاجة لإعادة تحميل الصفحة عند التبديل بين اللغتين وفقاً لمتطلب NFR-04. يتصدر هذه المكونات شريط التنقل العلوي الذي يعرض شعار المؤسسة واسم النظام، مع زر التبديل اللغوي الذي يحافظ على اتجاه العناصر النصية والأيقونات بشكل صحيح، وقائمة المستخدم المنسدلة التي تعرض الصلاحيات المتاحة. تعتمد النماذج الإدخالية، مثل نموذج إضافة الموظف في SCR-04، على حقول نصية تدعم التحقق الفوري من صحة البيانات، مع تمييز الحقول الإلزامية بخطوط واضحة، وتوفر حقول التاريخ منتقياً مخصصاً يتوافق مع التقويم الهجري والميلادي حسب إعدادات المؤسسة، كما تدعم حقل الصورة الشخصية السحب والإفلات مع معاينة فورية. يتم تصميم الجداول، كما في شاشة إدارة الموظفين SCR-03، لتدعم التمرير الأفقي على الشاشات الصغيرة مع تثبيت العمود الأول، وتتيح الفرز والبحث الحي مع فلترة حسب الإدارة والحالة، وتعرض أزرار الإجراءات (تعديل، حذف، طباعة) بشكل مدمج في كل صف لضمان سهولة الوصول. تعتمد آلية الإشعارات على نظام تنبيهات منبثقة في الزاوية العلوية المعاكسة لاتجاه القراءة، تعرض حالة نجاح أو فشل العمليات الحساسة، مع إمكانية إغلاقها يدوياً أو اختفاءها تلقائياً بعد خمس ثوانٍ. لضمان إمكانية الوصول، تلتزم جميع المكونات بمعايير WCAG 2.1، حيث تدعم التنقل الكامل عبر لوحة المفاتيح مع مؤشر تركيز واضح، وتوفر نصاً بديلاً (Alt Text) لجميع الصور والأيقونات، وتستخدم تبايناً لائياً لا يقل عن 4.5:1 بين النص والخلفية، مع حجم خط أساسي لا يقل عن 16 بكسل لضمان القراءة السهلة على مختلف الأجهزة المكتبية واللوحية والذكية وفقاً لمتطلب NFR-05.