4.3تجربة المستخدم المتقدمة: النوافذ الداخلية والحقول الفائقة والتخطيطات
الأساسي في 30 ثانية
- النوافذ الداخلية تركّب شاشة ديناميكيًا (منطقة يتغير محتواها حسب السياق، معالج متعدد الخطوات، تبويبات تُحمّل عند الطلب)، والحقول الفائقة تجمع حقولًا قابلة لإعادة الاستخدام، والتخطيطات تقدّم عدة عروض للنافذة نفسها حسب حجم الشاشة.
- روافع أخرى لسهولة الاستخدام: المناطق المتكررة وloopers (قوائم بعرض حر)، والأشرطة/أشرطة الأدوات/القوائم السياقية، والنوافذ النمطية أو غير النمطية تُختار بوعي.
- المبدأ الموجّه: البساطة الموجّهة للاستخدام — تطبيق الإدارة يُستخدم طوال اليوم، والأولوية لسرعة الإدخال والوضوح والقابلية للتوقع؛ ولا شيء يعوّض مراقبة المستخدمين الحقيقيين.
حالة مصغّرة متسلسلة — ياسين يحدّث شاشة إدخال الطلب
ياسين، مطوّر WinDev في شركة صغيرة لتجارة المعدات الكهربائية في وهران، يتلقى شكوى متكررة: إدخال الطلب بطيء جدًا. بمراقبة مندوبة تعمل، يكتشف أن معظم الوقت يُهدر في النقرات والنوافذ. يعيد تصميم الشاشة بالأدوات المتقدمة: نافذة داخلية لمنطقة استقبال يتغير محتواها حسب السياق (بطاقة العميل / كتالوج المنتجات)، وحقل فائق لكتلة العنوان المعاد استخدامها في كل مكان، وتخطيطان — واسع لأجهزة المكتب، ومضغوط للحواسيب المحمولة — يُنتقل بينهما حسب حجم الشاشة. يضيف looper لعرض سطور الطلب في بطاقات واضحة، ويعتني بترتيب التنقل وبالإدخال بلوحة المفاتيح. يقاوم إغراء الاستعراض: تطبيق الإدارة يُستخدم طوال اليوم. ويسجّل العادة: مراقبة المستخدمين الحقيقيين تكشف ما يبطئهم فعلًا — وهو ليس أبدًا ما كنّا نظنه.
حالة مستقلة لهذا القسم: تعود في الدرس والمخطط والسكريبت وتحدي 48 ساعة للقسم 4.3.
1. النوافذ الداخلية والحقول الفائقة والتخطيطات
إلى جانب النوافذ الكلاسيكية، يوفّر WinDev أدوات لبناء واجهات غنية وقابلة للتكيف. النوافذ الداخلية تسمح بـتركيب شاشة ديناميكيًا: منطقة استقبال يتغير محتواها حسب السياق، معالج متعدد الخطوات، تبويبات تُحمّل عند الطلب. الحقول الفائقة مجموعات حقول بسلوكها، تُوضع كحقل واحد (مثل كتلة عنوان معاد استخدامها في كل مكان). التخطيطات (layouts) تمنح النافذة نفسها عدة عروض — «واسع» و«مضغوط» — يُنتقل بينها حسب حجم الشاشة أو السياق: أمر ثمين أمام تنوع الدقات.
2. الروافع الأخرى لسهولة الاستخدام
أجزاء أخرى تكمّل الواجهة. المناطق المتكررة وloopers تعرض قائمة عناصر بعرض حر (بطاقات، بطاقات تفصيلية، قوائم غنية)، أكثر مرونة من جدول كلاسيكي. الأشرطة وأشرطة الأدوات والقوائم السياقية (النقر بالزر الأيمن) تنظّم الوصول إلى الوظائف. النوافذ النمطية (التي تحجب حتى الرد) وغير النمطية تُختار بوعي: نافذة نمطية في موضع سيئ تعطّل عمل المستخدم. أضف التلميحات ومؤشرات التقدم والحركات الخفيفة.
3. البساطة الموجّهة للاستخدام
يبقى المبدأ الموجّه البساطة الموجّهة للاستخدام: تطبيق الإدارة يُستخدم طوال اليوم. الأولوية ليست التأثير البصري بل سرعة الإدخال (ترتيب تنقل سليم، كل شيء بلوحة المفاتيح، قيم افتراضية)، والوضوح، والقابلية للتوقع (الأفعال نفسها في المكان نفسه) والراحة (تباين، حجم الخط، اختصارات). لا شيء يعوّض مراقبة المستخدمين الحقيقيين: هناك نكتشف ما يبطئهم فعلًا — وهو ليس أبدًا ما كنّا نظنه.
🔎 مثال ملموس — 🔎 مثال ملموس — تركيب الشاشة وتكييفها
ثلاث أدوات متقدمة في خدمة الفعالية، كما يستخدمها ياسين:
// Fenetre interne : composer un ecran dynamique
// la zone d'accueil change de contenu selon le contexte
// (fiche client / catalogue produits) sans dupliquer l'ecran.
// Superchamp : un bloc d'adresse reutilisable, depose comme un champ unique.
// Dispositions : une meme fenetre, plusieurs presentations
// "Large" (poste de bureau) / "Compacte" (portable)
// on bascule selon la taille d'ecran ou le contexte.
// Looper : afficher les lignes de commande en vignettes lisibles.القراءة: النوافذ الداخلية والحقول الفائقة والتخطيطات تكيّف بنية الشاشة مع السياق والجهاز، دون تكرار.
الدرس: نكسب في سرعة الإدخال والوضوح — المعياران المهمان فعلًا يوميًا.
مفردات القسم
- النافذة الداخلية (التركيب)
- إلى جانب إعادة الاستخدام، تركّب شاشة ديناميكيًا: منطقة يتغير محتواها حسب السياق، معالج متعدد الخطوات، تبويبات تُحمّل عند الطلب.
مثال بسيط: ياسين يغيّر منطقة الاستقبال حسب السياق (عميل / كتالوج).
ما ليس كذلك: نافذة ثابتة تكرّر الشاشة كلها.
رد فعل: شاشة ديناميكية → النافذة الداخلية.
- الحقل الفائق
- مجموعة حقول بسلوكها، تُوضع كحقل واحد قابل لإعادة الاستخدام.
مثال بسيط: ياسين يضع حقلًا فائقًا للعنوان في عدة شاشات.
ما ليس كذلك: نسخ كل حقل يدويًا في كل نافذة.
رد فعل: كتلة قابلة لإعادة الاستخدام → الحقل الفائق.
- التخطيطات (layouts)
- يمكن للنافذة نفسها أن تملك عدة عروض (واسع، مضغوط) يُنتقل بينها حسب حجم الشاشة أو السياق.
مثال بسيط: ياسين يضع تخطيطًا للمكتب وآخر للمحمول.
ما ليس كذلك: عرض واحد مفروض على كل الشاشات.
رد فعل: التكيف مع الدقات → التخطيطات.
- المنطقة المتكررة / Looper
- عرض قائمة عناصر بعرض حر (بطاقات، بطاقات تفصيلية، قوائم غنية)، أكثر مرونة من جدول كلاسيكي.
مثال بسيط: ياسين يعرض سطور الطلب في بطاقات.
ما ليس كذلك: جدول بصفوف وأعمدة، قليل الوضوح لهذه الحاجة.
رد فعل: قائمة بعرض حر → looper.
- البساطة الموجّهة للاستخدام
- تطبيق الإدارة يُستخدم طوال اليوم: الأولوية لسرعة الإدخال والوضوح والقابلية للتوقع والراحة — لا للتأثير البصري.
مثال بسيط: ياسين يعتني بالتنقل والتباين بدلًا من الحركات.
ما ليس كذلك: حركات استعراضية تبطئ الإدخال.
رد فعل: الفعالية اليومية → البساطة الموجّهة للاستخدام.
في التطبيق — تطبيقيًا — بناء واجهة فعّالة
- استخدم النوافذ الداخلية لتركيب شاشات ديناميكية (معالجات، مناطق سياقية) وتوحيد الكتل المتكررة، كما فعل ياسين.
- ضع عدة تخطيطات إن كان لمستخدميك أحجام شاشات مختلفة جدًا، واختبر العرض على كل منها.
- اختر بوعي بين نافذة نمطية (تحجب، لقرار ضروري) وغير نمطية (تترك العمل) حسب الاستخدام الحقيقي.
- أعطِ الأولوية لسرعة الإدخال والوضوح (اختصارات لوحة المفاتيح، ترتيب التنقل، التباين)، ثم راقب مستخدمين حقيقيين لرصد ما يبطئهم.
سكريبت خطوة بخطوة — تحديث الشاشة كما فعل ياسين (5 دقائق)
1) راقب مستخدمًا حقيقيًا يُدخل طلبًا وسجّل كل حركة غير ضرورية. 2) ركّب الشاشة بنافذة داخلية: منطقة استقبال يتغير محتواها حسب السياق. 3) وحّد كتلة العنوان في حقل فائق قابل لإعادة الاستخدام. 4) ضع تخطيطًا واسعًا وآخر مضغوطًا، وانتقل حسب حجم الشاشة. 5) اعرض سطور الطلب في looper واضح. 6) اضبط ترتيب التنقل والإدخال بلوحة المفاتيح، ثم اجعل المستخدم يعيد الاختبار.
قاوم الاستعراض: المعيار الصحيح ليس «جميلًا» بل «سريع الإدخال، واضح وقابل للتوقع».
نموذج للنسخ واللصق — بطاقة الواجهة الخاصة بي
Fenetre interne : composer un ecran dynamique (zone contextuelle, assistant)
Superchamp : bloc de champs reutilisable (ex. adresse)
Dispositions : plusieurs presentations selon la taille d'ecran
Looper : listes a presentation libre (vignettes, fiches)
Modale / non modale : a choisir consciemment selon l'usage
Priorite : rapidite de saisie, lisibilite, previsibilite
Regle : observer les utilisateurs reels (pas deviner)شاشة مركّبة
ياسين يغيّر منطقة الاستقبال حسب السياق عبر نافذة داخلية.
حقل فائق للعنوان
ياسين يوحّد كتلة عنوان العميل في حقل فائق معاد استخدامه في كل مكان.
تخطيط مضغوط
ياسين ينتقل إلى تخطيط مضغوط لحواسيب المندوبين المحمولة.
looper للسطور
ياسين يعرض سطور الطلب في بطاقات واضحة داخل looper.
✓ ممارسات جيدة
- تركيب الشاشات بـالنوافذ الداخلية والحقول الفائقة.
- وضع تخطيطات حسب تنوع الشاشات.
- إعطاء الأولوية لـسرعة الإدخال والوضوح، ثم مراقبة المستخدمين.
✗ أخطاء شائعة
- تفضيل التأثير البصري على حساب الفعالية.
- تكثير النوافذ النمطية التي تحبس المستخدم.
- تخمين نقاط الاحتكاك بدلًا من المراقبة.
النقاط الأساسية
- النوافذ الداخلية (التركيب) والحقول الفائقة (إعادة الاستخدام) والتخطيطات (التكيف) تثري الواجهة.
- Loopers والقوائم والنوافذ النمطية/غير النمطية تكمل روافع سهولة الاستخدام.
- الأولوية لسرعة الإدخال والوضوح والقابلية للتوقع (البساطة الموجّهة للاستخدام).
- لا شيء يعوّض مراقبة المستخدمين الحقيقيين.
تحدي 48 ساعة — طبّقه غدًا
كما فعل ياسين، اختر شاشة إدخال متكررة في تطبيقك وراقب مستخدمًا حقيقيًا يملؤها. سجّل الحركات غير الضرورية، ثم حسّن: وحّد كتلة في حقل فائق، وركّب منطقة بـنافذة داخلية، وضع تخطيطين (واسع/مضغوط). اعتني بـترتيب التنقل والإدخال بلوحة المفاتيح. اكتب في جملة واحدة المكسب المقاس (نقرات، وقت) وما كشفته المراقبة.
- أركّب شاشات ديناميكية بالنوافذ الداخلية.
- أوحّد الكتل بالحقول الفائقة وأتكيف عبر التخطيطات.
- أعطي الأولوية للفعالية اليومية وأراقب المستخدمين الحقيقيين.
أسئلة شائعة
ما الذي يصنع واجهة جيدة لتطبيق إدارة؟
الفعالية على المدى الطويل، لا الجمالية: تطبيق الإدارة يُستخدم ساعات كل يوم، لذا سرعة الإدخال والوضوح والقابلية للتوقع وتقليل عدد الأفعال تتقدم على أي تأثير بصري. عمليًا: ترتيب تنقل سليم، وإدخال ممكن بالكامل بلوحة المفاتيح، وقيم افتراضية ذكية، وتباين كافٍ، والأفعال نفسها في المكان نفسه في كل الشاشات، وتغذية راجعة واضحة (محفوظ؟ مرفوض؟) ورسائل مفيدة. الجمالية والحركات أهم بكثير مما يُظن.
متى نستخدم نافذة نمطية بدلًا من نافذة عادية؟
استخدم نافذة نمطية عندما يجب على المستخدم الرد قبل المتابعة (اختيار ضروري، تأكيد فعل لا رجعة فيه، إدخال يحجب عملية)؛ وفضّل نافذة غير نمطية بمجرد أن يكون من المشروع أن يريد العمل في مكان آخر بالتوازي. النافذة النمطية في موضع سيئ تحبس المستخدم: إن احتاج معلومة متاحة في شاشة أخرى للرد، فعليه الإلغاء والذهاب إليها ثم إعادة كل شيء. غير النمطية تسمح بمقارنة بطاقتين أو معالجة عميل أثناء التحقق من طلب.
ما الذي يصنع واجهة جيدة لتطبيق إدارة؟