أفضل تصميم لواجهة المستخدم للنماذج: مقارنة أفضل الاختيارات

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

• يتم تحديد جودة واجهة المستخدم للنموذج من خلال أربع طبقات: التخطيط والتجميع، واختيار التحكم في الإدخال، والتحقق من الصحة ومعالجة الأخطاء، وقائمة القيم/استراتيجية ربط البيانات. فضعف مستوى واحد يضعف المستويات الثلاثة الأخرى.
• يقسم نظام 4D النماذج إلى نماذج الإدخال (إدخال البيانات) ونماذج الإخراج (العرض والطباعة)، ويمكن أن يحتوي نفس الجدول على عدة نماذج من كلٍ منهما. إن اختيار النوع المناسب لكل مهمة هو قرار التصميم الأول، وليس التفاصيل.
• كائنات 4D الأصلية - مربعات الإدخال، والقوائم المنسدلة، وخانات الاختيار، ومجموعات الاختيار، وعناصر تحكم علامة التبويب، والنماذج الفرعية، ومربعات القائمة، والقوائم الهرمية - تغطي معظم احتياجات تطبيقات الأعمال بدون أدوات تابعة لجهات خارجية.
• قوائم القيم في 4D تأتي في عدة إصدارات: قوائم ثابتة، قوائم مرتبطة بحقل أو جدول، قوائم هرمية وقوائم اختيارات ملحقة بحقل. يعد اختيار الخطأ هو السبب الأكثر شيوعًا لأخطاء “القائمة المنسدلة فارغة”.
• ينتمي التحقق من الصحة إلى مكانين: قواعد مستوى الحقل (مرشحات الإدخال، الحقول المطلوبة، عناصر التحكم في النطاق) وقواعد مستوى النموذج (منطق الحقول المشتركة، حفظ عناصر التحكم). يتيح لك تقسيمها الاحتفاظ برسائل خطأ محددة.
• إمكانية الوصول وسلاسة لوحة المفاتيح ليست تحسينات اختيارية. يحدد ترتيب علامات التبويب والتسميات المتعلقة بالحقول وحالات التركيز المرئية ما إذا كان بإمكان موظفي إدخال البيانات العمل بسرعة.

ماذا يعني “تصميم واجهة المستخدم للنماذج” في الواقع في سياق قاعدة البيانات

يتضمن تصميم واجهة المستخدم للنماذج ترتيب إدخال البيانات وأسطح العرض بحيث يمكن للمستخدم إدخال البيانات الصحيحة بسرعة، مع الحد الأدنى من الأخطاء والحد الأدنى من التدريب. في سياق تصميم الويب العام، تعني العبارة بشكل عام تصميم نموذج HTML. في قاعدة البيانات أو سياق المنصات منخفضة الكود (low-code)، يعني هذا شيئًا أوسع: يرتبط النموذج بجدول أو استعلام، ويتم تعيين كل عنصر تحكم إلى حقل أو متغير، ويجب أن يكون التخطيط موجودًا في السجلات الحقيقية ذات الأسماء الطويلة والقيم الخالية والأحرف غير المتوقعة.

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

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

الطبقات الأربع لتصميم واجهة المستخدم للنموذج

الطبقة الأولى: التخطيط والتجميع

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

تتعامل عناصر التحكم في علامة التبويب وعناصر التحكم في الصفحة مع النماذج التي قد تكون طويلة جدًا. يقوم عنصر تحكم علامة التبويب بتقسيم حقول السجل عبر لوحات متعددة؛ يرى المستخدم لوحة واحدة في كل مرة ولكن السجل يظل كما هو. هذه هي الاستجابة القياسية لـ “يحتوي النموذج على 60 حقلاً” وهي عادةً أفضل من تقليل الخطوط أو التمرير.

ذات صلة: Airtable — واجهة بسيطة لجدول بيانات تقع فوق قاعدة بيانات علائقية حقيقية، مع عمليات تشغيل تلقائية وطرق عرض وواجهات قابلة للمشاركة..

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

الطبقة الثانية: اختيار التحكم في الإدخال

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

• مربعات إدخال نص مجانية للأسماء والأوصاف والمراجع — أي شيء يحتوي على مجموعة إجابات مفتوحة.
• القوائم المنسدلة عندما تكون مجموعة الإجابات مغلقة وقصيرة بما يكفي لمسحها ضوئيًا (أقل من 15 عنصرًا تقريبًا).
• مربعات التحرير والسرد عندما تكون مجموعة الإجابات مغلقة ولكنها طويلة، أو عندما يحتاج المستخدمون إلى الكتابة للتصفية.
• أزرار الاختيار عندما يكون هناك عدد قليل من الخيارات ورؤيتها كلها مرة واحدة تساعد في اتخاذ القرار.
• مربعات اختيار لمؤشرات نعم/لا مستقلة، بما في ذلك مجموعات التحديد المتعدد حيث يمكن أن تكون الإجابات المتعددة صحيحة.
• منتقيات التاريخ وعناصر التحكم في الوقت للبيانات المؤقتة، مع تنسيق التخزين الأساسي الذي تحدده قاعدة البيانات، وليس الأداة.
• مربعات القائمة والنماذج الفرعية لعلاقات واحد-إلى-متعدد: بنود الطلب، وقوائم جهات الاتصال، وتعيينات المهام.
• قوائم هرمية للبيانات على شكل شجرة مثل دليل الحسابات أو أشجار الفئات.

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

إذا كنت تتسوق: Zoho Creator — أداة إنشاء تطبيقات ذات تعليمات برمجية منخفضة يتم توصيلها بمجموعة Zoho الأوسع والأسعار لكل مستخدم وليس لكل تطبيق..

الطبقة الثالثة: التحقق من الصحة ومعالجة الأخطاء

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

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

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

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

الطبقة الرابعة: قوائم القيم وربط البيانات

قوائم القيمة هي النسيج الضام بين النماذج والبيانات. في 4D، يمكن أن تكون قائمة القيم ثابتة (يتم إدخالها مرة واحدة، واستخدامها في كل مكان)، أو مرتبطة بحقل أو جدول (بحيث تعكس البيانات المباشرة)، أو هرمية (للهياكل الشجرية)، أو مرفقة بحقل كقائمة اختيار تقيد ما يقبله هذا الحقل.

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

ذات صلة: Knack — أداة إنشاء قاعدة بيانات بدون تعليمات برمجية تستهدف البوابات والأدلة والأدوات الداخلية - بسعر ثابت بدلاً من الرسوم لكل مستخدم..

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

المقارنة: أساليب بناء النماذج للفرق الصغيرة

النهج	الأفضل لـ	نقاط القوة	المقايضات
نماذج النظام الأساسي الأصلية (مثل نماذج الإدخال/الإخراج رباعية الأبعاد)	تطبيقات الأعمال المرتبطة بمخطط علائقي	ربط الحقل المباشر، وقوائم التحقق من الصحة والقيمة المضمنة، ومخرجات الطباعة، ولا يوجد وقت تشغيل إضافي	الأسلوب المرئي عملي وليس عصريًا؛ التخصيص العميق يحتاج إلى معرفة بالمنصة
أدوات إنشاء السحب والإفلات ذات التعليمات البرمجية المنخفضة	الأدوات الداخلية، شاشات CRUD، التكرار السريع	إصدار أول سريع، يمكن لغير المطورين المساهمة	ومن الممكن أن يفلت الانضباط في نموذج البيانات؛ غالبًا ما يحتاج التحقق المعقد إلى رمز على أي حال
الواجهة الأمامية للويب مشفرة يدويًا (React، Vue، وما إلى ذلك)	منتجات تواجه العملاء مع تجربة مستخدم مخصصة	التحكم الكامل في التخطيط وإمكانية الوصول والسلوك	يمكنك إعادة إنشاء التحقق من الصحة والقوائم والطباعة والأذونات بنفسك
مكتبات المكونات وأنظمة التصميم	فرق توحيد أشكال عديدة	الاتساق عبر الشاشات، الأنماط الموثقة	لا يزال يتطلب الربط والتحقق من الصحة ومنطق القائمة الموجود أسفل
شبكات على غرار جداول البيانات	إدخال البيانات بالجملة وتحريرها	على دراية بموظفي الشؤون المالية والعمليات، وسريع في العمل الجدولي	ضعيف بالنسبة لسير عمل السجل الواحد في كل مرة والتحقق المعقد من الصحة

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

كيفية اتخاذ القرار: قائمة مرجعية للمعايير

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

اختيارنا: Claris FileMaker Pro — نظام أساسي لقاعدة البيانات الارتباطية طويل الأمد للفرق التي تحتاج إلى تطبيقات مخصصة على سطح المكتب والويب والهاتف المحمول من ملف واحد..

1. من يستخدمه وكم مرة؟ يحتاج المستخدمون العرضيون إلى إرشادات وتسميات سخية؛ يحتاج المستخدمون يوميًا إلى الكثافة واختصارات لوحة المفاتيح.
2. كم عدد الحقول وكيف يتم تجميعها؟ أقل من 15 حقلاً، لوحة واحدة. إذا تجاوز العدد 25 حقلاً، فخطط لاستخدام علامات تبويب أو الصفحات.
3. ما هي الحقول التي تعتبر مجموعات مغلقة؟ تصبح كل مجموعة مغلقة قائمة، أو مجموعة اختيار، أو مجموعة من خانات الاختيار - وليس نصًا حرًا أبدًا.
4. ما هي الحقول المطلوبة والتي لها قواعد تنسيق؟ تصبح هذه بمثابة التحقق من الصحة على مستوى الحقل.
5. ما هي القواعد التي تمتد عبر الحقول؟ تصبح هذه القواعد بمثابة التحقق من الصحة على مستوى النموذج عند الحفظ.
6. هل تتم طباعة النموذج؟ إذا كان الأمر كذلك، فقم بتصميم نموذج الإخراج بشكل متعمد بدلاً من الاعتماد على تخطيط الشاشة للطباعة المقبولة.
7. ما هو مسار لوحة المفاتيح؟ قم بتعيين ترتيب علامات التبويب بشكل صريح؛ لا تقبل الإعداد الافتراضي إذا لم يتبع تسلسل إدخال البيانات.
8. **ماذا يحدث مع القيمة الطويلة؟ ** اختبر اسم الشركة المكون من 60 حرفًا وحقل فارغ قبل الشحن.

إمكانية الوصول وتدفق لوحة المفاتيح

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

تظل إرشادات إمكانية الوصول إلى محتوى الويب W3C (WCAG) هي المعيار الذهبي للمبادئ الأساسية، وتوثق ممارسات تأليف WAI-ARIA سلوك لوحة المفاتيح المتوقع لعناصر واجهة المستخدم المركبة مثل اللوحات المبوبة ومربعات القائمة. تنفذ الأنظمة الأساسية لسطح المكتب والأنظمة الأساسية ذات التعليمات البرمجية المنخفضة طبقات إمكانية الوصول الخاصة بها، ولكن المبادئ تستمر: تسمية كل عنصر تحكم، والحفاظ على التركيز متوقعًا، وعدم الاعتماد مطلقًا على اللون فقط.

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

الأخطاء الشائعة وكيفية تجنبها

عند التفكير في تصميم واجهة المستخدم للنماذج، تجنب المخاطر التالية:

** هناك عدد كبير جدًا من الحقول على شاشة واحدة. ** يؤدي التقسيم إلى علامات تبويب أو معالجات إلى تقليل معدلات الخطأ والحمل المعرفي. التكلفة هي نقرة إضافية واحدة؛ الربح أكبر بشكل عام.

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

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

رسائل خطأ عامة. “الإدخال غير الصالح” لا يخبر المستخدم بأي شيء. “يجب أن يكون تاريخ البدء قبل تاريخ الانتهاء” يخبرهم بكل شيء.

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

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

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

الأسئلة المتداولة

ما هو أفضل تصميم لواجهة المستخدم للنماذج في تطبيق قاعدة البيانات؟

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

هل يجب أن أستخدم القوائم المنسدلة أو أزرار الاختيار؟

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

كم عدد الحقول التي يجب أن يحتوي عليها النموذج؟

تعمل لوحة النموذج الواحدة بشكل جيد مع حوالي 15 إلى 25 حقلاً؛ أبعد من ذلك، قم بتقسيم السجل إلى علامات تبويب، أو صفحات، أو باستخدام معالج متعدد الخطوات. القيد ليس تقنيًا ولكنه معرفي: يفقد المستخدمون مكانهم وما هي الحقول التي ملأوها عندما يتم تمرير النموذج إلى ما هو أبعد من شاشة واحدة.

ما الفرق بين نماذج الإدخال ونماذج الإخراج؟

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

كيف يمكنني التعامل مع التحقق دون إزعاج المستخدمين؟

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

هل أحتاج إلى نظام تصميم لنماذج الأعمال الداخلية؟

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