1. اختر مهمة الصفحة قبل اختيار التخطيط
ابدأ بالصفحات التي تحمل مهمة للعميل أو للعمل: صفحات الخدمة، صفحات المنتج، نماذج العملاء المحتملين، الحجز، دخول الحساب، عربة التسوق، والمساعدة. اكتب بيان إكمال واحد لكل منها، مثل: “يمكن للزائر لأول مرة فهم هذه الخدمة، رؤية الدليل ذي الصلة، وطلب الاتصال.” إذا كانت الصفحة لها أكثر من مهمة، قرر أيها يظهر أولاً.
سرد محتواها كجوهرية أو داعمة أو اختيارية. الجوهرية لا تعني مختصرة؛ قد يحتاج الزائر إلى سياق سعر، شروط الأهلية، تفاصيل التسليم، أو معلومات مقارنة. امنح ذلك المحتوى مسارًا واضحًا في التصميم الضيق. توصي Google بمحتوى رئيسي مكافئ على الجوال وسطح المكتب، مع السماح لعرض مختلف مثل علامات التبويب أو الطيّات (tabs أو accordions).
عند عرض ضيق، يجب أن يكون زميل قادرًا على قول ما تقدمه الصفحة، من تفيده، وما الإجراء المعنوي التالي.
2. اجعل القاعدة الضيقة مكتملة
ابدأ بمسار أحادي العمود عملي بدلاً من تصغير تخطيط سطح المكتب. استخدم حاويات مرنة، دع النص يلتف، وتضمّن إعداد viewport الذي يتيح للمتصفح ضبط التخطيط على عرض الجهاز. لا تمنع التكبير. تحقق أن القوائم، الإشعارات، الصور، المضمّنات، وأخطاء النماذج تبقى داخل نافذة العرض؛ عادةً ما يكون التمرير الأفقي على مستوى الصفحة غير المقصود عيبًا.
استخدم 320 CSS pixels كفحص إعادة تدفق صارم لمحتوى القراءة والمهام العادية. تصف WCAG 2.2 عرض المحتوى العمودي عند هذا العرض دون فقدان معلومات أو وظائف أو الحاجة إلى تمرير ثنائي الاتجاه. قد تحتاج خريطة أو رسم بياني أو جدول بيانات إلى منطقة تمرير خاصة بها، لكن هذا لا يبرر جعل الصفحة المحيطة تمرّر أفقياً.
كيّف الصور مع الحاوية ووفّر أبعادًا حتى يستطيع المتصفح حجز المساحة قبل تحميلها.
3. أضف تحسينات دون جعل المسار الأساسي هشًا
التحسين التدريجي يعني أن المحتوى والوظائف الأساسية تعمل كأساس، بينما تتلقى المتصفحات القادرة والشاشات الأكبر إضافات. يجب ألا تعتمد العنوان، تفاصيل المنتج، تسميات النموذج، شرح السعر، ومسار الإرسال على الحركة، التحويم، أو سكربت يُحمّل متأخرًا. يمكن للتخطيط الأوسع إضافة لوحة مقارنة أو تنقّل ثابت أو فلاتر أغنى دون أن يجعل القاعدة الأساسية ناقصة.
اطلب من المنفّذ إضافة نقطة توقف (breakpoint) عندما يصبح المحتوى مزدحمًا أو مضيّعًا للمساحة، لا لأن اسم جهاز محدد يظهر في قائمة. نقطة التوقف ببساطة هي المكان الذي يتغير فيه قاعدة التخطيط. لا تستخدم التخطيطات الضيقة لإزالة نص المساعدة أو شروط السياسات أو المراجعات أو البيانات الوصفية المهمة أو التفاصيل المهيكلة المهمة بصمت.
اعرض صورة وأوصافًا أساسية للمعرض أولًا، ثم أضف تكبيرًا أو عناصر السحب (swipe) عندما تتوفر سكربتاتها.
4. صمّم عناصر التحكم للمس والوضوح وإمكانية الاسترداد
يعني تصميم الانسجام مع اللمس تصميمًا للأيادي بدل مؤشر الفأرة الدقيق. أعط الأزرار، مربعات الاختيار، أيقونات الإغلاق، محددات الكمية، وخيارات النماذج حجمًا وفرزًا كافيين لتقليل النقرات الخاطئة. علّم الأيقونات عندما لا يكون معناها واضحًا. لا تجعل التحويم هو الوسيلة الوحيدة لكشف السعر أو القائمة الفرعية أو الشرح أو الإجراء.
تتضمن WCAG 2.2 معيار مستوى AA لحجم الهدف لا يقل عن 24 في 24 CSS pixels لأهداف المؤشرات، مع استثناءات مذكورة تشمل التباعد والروابط المضمنة. اعتبر ذلك مرجعًا أدنى، لا ضمانًا للراحة. الأفعال الحرجة تستحق تسميات واضحة، تباعد سخي، وخطوة تأكيد قابلة للعكس. اطلب مراجعة وصول مؤهلة للمسارات عالية المخاطر أو لمطالبات المطابقة الرسمية.
حافظ على ظهور التسميات، أظهر ملاحظات تحقق قابلة للاستخدام، واحتفظ بالقيم المُدخلة بعد الخطأ.
5. عامل الوسائط والمضمّنات كجزء من رحلة الزائر
قرر ما إذا كانت كل صورة استعلامية أو إقناعية أو زخرفية. تحتاج الصورة الإخبارية إلى بديل نصي مناسب وقصّة للعرض الضيق تحافظ على التفاصيل الضرورية. تتيح خيارات الصور الاستجابية (responsive image options) للمتصفحات اختيار المورد المناسب بدل إجبار كل زائر على تنزيل أكبر ملف سطح مكتب. لا تدع صورة البطل (hero image) أو الفيديو يطمس غرض الصفحة والإجراء الرئيسي.
أجرِ جردًا للخرائط، الدردشة، الفيديو، الدفع، الجدولة، موافقات الخصوصية، وعناصر مراجعات الطرف الثالث. على شاشة ضيقة، تحقق من حالة التحميل، حجم عناصر التحكم، التخطيط المحدود، ومسار بديل عملي. بالنسبة للدفع أو الهوية أو تدفقات البيانات المنظمة والضابطة، شارك مراجعين مؤهلين للأمن والخصوصية والامتثال؛ الاختبار البصري ليس تقييمًا أمنيًا.
سجّل كل مكوّن خارجي، مالكه، وظيفته التجارية، والمسار البديل الموافق عليه إذا كان بطيئًا أو معطلاً.
6. اختبر مسارات المهام قبل الإصدار وخطط المعالجة
استخدم وضع الاستجابة في المتصفح مبكرًا لفحص العروض الضيقة والمتوسطة والعريضة. يمكن لـ Chrome Device Mode تقريب نافذة العرض، اللمس، الاتجاه، الشبكة، وظروف وحدة المعالجة، لكن توثّق Chrome أنه تقريب لا تنفيذ على جهاز حقيقي. أتمّم المسارات الحرجة على هواتف فعلية والمتصفحات ذات الصلة عندما تستطيع.
اختبر مهمة، لا مجرد صورة شاشة: التحميل البارد، التنقل، إرسال نموذج غير صالح وصالح، تغيير الاتجاه، التكبير، والعودة من شاشة طرف ثالث. سجّل عنوان URL، المتصفح أو الجهاز، المهمة، النتيجة المتوقعة، المالك، وقرار التراجع. بالنسبة للتغييرات الكبيرة في القوالب أو الخروج أو نظام إدارة المحتوى أو التبعيات، جهز الإصدار وكن مستعدًا لاستعادة المسار السابق بدل الارتجال تحت الضغط.
لا تُوافق إلا بعد أن تعمل المهمة الحرجة، وعناصر التحكم قابلة للاستخدام، ولا يوجد تمرير أفقي على مستوى الصفحة، ولدى التبعيات الرئيسية مسار بديل.