صغرت لوحة المكتب لتدخل شاشة الهاتف، فاختفت أعمدة وبقي زر الاعتماد. لكن المشرفة لم تعد ترى موعد الطلب بجوار حالته، ولا تعرف أي سجل ستغيره بعد التصفية. التصميم المتجاوب يحتاج الحفاظ على قرار المستخدم وسياق فعله، لا مجرد احتواء المكونات داخل عرض أصغر.
اكتب ما يحتاج الموظف أن يعرفه معًا
في مثال افتراضي، تراجع مشرفة تجهيز قاعات طلبًا طويل الاسم وموعده وحالته، ثم تتخذ إجراءً مخولًا من هاتف. لا نصف نظام عميل أو جلسة اختبار نُفذت. السؤال التصميمي هو أي معلومات يجب أن تبقى متاحة معًا كي تميز المشرفة الطلب وتفهم الإجراء قبل تنفيذه.
رتب المهام بحسب الاستخدام المقصود، ثم اربط كل مهمة بحقول قرارها. قد تقبل نقل ملاحظة طويلة إلى تفصيل، لكن إخفاء اسم السجل أو حالته قد يغير معنى زر بجواره. لا تجعل عدد الأعمدة المخفية معيار نجاح؛ اطلب تفسيرًا لكل نقل أو اختصار وأثره على المهمة.
موجز من المهمة إلى العرض
أرسل إلى المصمم الورقة التالية مع محتوى تمثيلي، لا صورة لوحة فارغة. المطلوب تجربة بيانات طويلة ومختلطة وأسماء متشابهة وحالة انتظار أو رفض، حتى لا يعتمد الشكل المختار على نص قصير مثالي لا يشبه العمل اليومي.
| الخانة | سؤال الموجز | مثال الدليل |
|---|---|---|
| قرار المستخدم | ماذا يحتاج أن يعرف قبل الفعل؟ | هوية الطلب وموعده وحالته واضحة |
| علاقة المعلومات | ما الذي يجب أن يقرأ معًا؟ | الحقول المطلوبة لا تفقد ارتباطها |
| الإجراء | كيف يعرف السجل المقصود وحدود الفعل؟ | سياق معلوم قبل الاعتماد وبعده |
| العودة | ماذا يبقى بعد فتح تفصيل أو تغيير مرشح؟ | موقع وسياق يمكن فهمهما مجددًا |
حدد ما سيبقى في القائمة وما يفتح في شاشة تفصيل، مع سبب الاختيار. وإذا كانت المقارنة بين سجلات متعددة هي المهمة، فقد تحتاج رؤية العلاقات بينها؛ تحويل كل صف إلى بطاقة منفصلة قد يجعل المقارنة أصعب رغم جمال البطاقة وحدها.
الجدول ليس ممنوعًا على الهاتف
تشرح وثيقة W3C لفهم Reflow تقديم المحتوى دون فقد معلومات أو وظيفة عند العرض المحدد، مع استثناء لأجزاء تحتاج تخطيطًا ثنائي الأبعاد مثل جداول البيانات. لا يعني الاستثناء إعفاء الصفحة كلها أو تبرير حذف حقول لا يستطيع المستخدم الوصول إليها.
اطلب مقارنة مناسبة للمهمة بين جدول قابل للاستخدام داخل مساحة واضحة وعرض تفصيلي أو تقسيم آخر. لا تفرض البطاقات أو التمرير الأفقي لكل حالة. حتى داخل جدول، يظل النص والعنوان وعلاقة الخلية بحاجة إلى وضوح، ويحتاج المستخدم معرفة أن جزءًا آخر من البيانات متاح.
مساحة الفعل ليست شكل الأيقونة فقط
قد تتجاور أيقونتا عرض وحذف أو اعتماد ورفض، فيصبح تفعيل الهدف المجاور احتمالًا ينبغي اختباره. تشرح وثيقة Target Size الحد الأدنى لأهداف المؤشر مع استثناءات كالتباعد والبديل. استخدمها لسؤال المصمم عن سهولة الاستهداف، لا كرقم سحري يضمن سهولة كل واجهة.
في المثال، اطلب تسمية الفعل ومعرفة الطلب الذي يخصه قبل التأكيد، مع سلوك واضح عند التعذر أو انتظار الرد. هذه متطلبات مهمة تحتاج تطبيقًا واختبارًا مناسبين؛ وجود زر كبير في نموذج صور لا يثبت أن التطبيق المنفذ يدعم كل طريقة إدخال أو إتاحة.
اختبر المهمة بعد تغيير طريقة العرض
جهز طلبين متشابهين مختلفين في الموعد أو الحالة، واطلب العثور على المقصود وفتح تفاصيله والعودة واتخاذ الإجراء المسموح. ثم غير المرشح وراجع هل بقي السياق مفهومًا. يصمم المختص المهمة دون إعطاء المستخدم اسم الزر الذي يجب ضغطه كحل جاهز.
أضف تكبير النص ومحتوى عربيًا وإنجليزيًا ورمزًا أو رقمًا مختلطًا ضمن ما يستطيع النموذج تمثيله. سجّل حدود الدليل: نجاح نموذج قابل للنقر لا يثبت تلقائيًا لوحة مفاتيح أو قارئ شاشة أو سلوك متصفح لم ينفذ. لا يقدم هذا المقال شهادة WCAG أو بحث مستخدمين أُجري.
يساعد اختيار البروتوتايب على تحديد المخرج المناسب للسؤال. وعند مناقشة تصميم UI/UX مع نكست ويف، أرفق خريطة المهمة والحقول والفعل والعودة حتى يشتري فريقك تصميمًا يحافظ على العمل الذي يريد إنجازه من الهاتف.
حدود الاستناد
قُرئت وثيقتا W3C التفسيريتان عن إعادة التدفق وحجم الهدف في 4 نوفمبر 2026، لا كامل المعايير. إعداد بمساعدة الذكاء الاصطناعي مع مراجعة المعلومات والترجمة.