السحب والإفلات يحتاج مسارًا ثانيًا

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

لا يمنع معيار Dragging Movements في WCAG 2.2 السحب. لكنه يطلب أن تكون الوظيفة التي تستخدمه قابلة للتنفيذ أيضًا بمؤشر واحد ومن دون حركة سحب، إلا إذا كان السحب ضروريًا أو كان User Agent هو الذي يحدد السلوك. هذا التمييز مفيد في Product Design: احتفظ بالإيماءة السريعة، لكن صمّم مسارًا مكافئًا للفعل بدل التعامل مع الوصول كتصحيح متأخر للوحة المفاتيح.

يحلل هذا المقال نمطًا قابلًا لإعادة الاستخدام بالاعتماد على إرشادات W3C التي جرى التحقق منها في 30 سبتمبر 2026. مسار معرض المنتج أدناه مثال افتراضي صريح، وليس A/B Test أو نتيجة عميل أو ادعاء عن منتج يخص نور.

عرّف النتيجة قبل الإيماءة

اكتب نتيجة المستخدم كتغيير حالة: «انقل الصورة C من الموضع 4 إلى الموضع 1 واجعلها صورة الغلاف». لا تكتبها «اسحب الصورة C إلى الأعلى». تترك الصياغة الأولى مجالًا للسحب بالمؤشر وأزرار النقل وأوامر لوحة المفاتيح وقائمة المواضع أو أي Control صالح. أما الثانية فتربط متطلب المنتج بفعل حركي واحد.

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

نمذج العملية كأمر يملك هوية ثابتة للعنصر ووجهة: نقل العنصر قبل عنصر آخر أو بعده، أو تعيين موضع محدد. هذه تفصيلة هندسية لها أثر تصميمي: تصل كل طرق الإدخال إلى العملية نفسها، فلا يمكن للسحب والأزرار أن ينتجا قواعد Validation أو Analytics أو Undo مختلفة.

احتفظ بالسحب وأضف أدوات نقل ظاهرة

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

لا تخفِ البديل الوحيد داخل Tooltip لاختصار لوحة المفاتيح. قد يحتاج مستخدم لمس لديه رعشة، أو شخص يستخدم التحكم الصوتي، أو شخص على شاشة هاتف مكبرة إلى مسار الأزرار نفسه. يمكن أن تظهر الأدوات عند Focus البطاقة أو تحديدها أو داخل قائمة إجراءات، لكن أسماءها وتوفرها يجب أن يبقيا قابلين للاكتشاف. وعلى Disabled State تفسير الحد: يصبح «نقل للأعلى» غير متاح عندما يكون العنصر أولًا بالفعل.

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

حافظ على Focus بعد كل حركة

بعد النقل بلوحة المفاتيح أو الزر، أبقِ Focus على العنصر المنقول أو على الأداة المقابلة له. إذا قفز إلى بداية القائمة، أو اختفى مع DOM Node القديمة، أو انتقل إلى البطاقة التالية بصورة غير متوقعة، تصبح الحركات المتتالية ضريبة تنقل.

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

اعرض القوائم باستخدام مفاتيح ثابتة مبنية على هوية العنصر، لا على رقمه الحالي. بعد تحديث الترتيب، أعد Focus إلى Item ID نفسه وتأكد من بقائه ظاهرًا. ويجب أن يبقى مؤشر Focus مختلفًا بصريًا عن Selection وHover وDrag Preview. تتعامل إرشادات W3C لواجهة لوحة المفاتيح مع ثبات Focus وقابليته للتوقع كأساس للتفاعل، بينما يقدم معيار Focus Appearance حدًا يمكن قياسه لظهوره.

أعلن النتيجة لا كل إطار حركة

يرى مستخدم المؤشر المبصر البطاقة وهي تستقر في موضعها. ويحتاج مستخدم Screen Reader نتيجة مكافئة: «نُقلت صورة المصباح إلى الموضع 2 من 6». استخدم Status Region مهذبة حتى تصبح الرسالة متاحة برمجيًا من دون سحب Focus. تقول إرشادات Status Messages في WCAG إن التحديثات المهمة التي لا تغيّر السياق يجب أن تُعرض للتقنيات المساعدة كي تعلنها.

أعلن الأوامر المكتملة، لا كل Pixel يمر به العنصر أثناء السحب. تتحول رسائل Live Region المستمرة إلى ضوضاء وقد تتأخر عن الواجهة. تسمّي الرسالة المفيدة العنصر والموضع النهائي والعدد الكلي. وإذا رُفضت الحركة، اشرح السبب وحافظ على قابلية تنفيذ إجراء آخر.

تجنب تكرار التأكيد نفسه في عدة Live Regions. واحجز Assertive Alert للفشل العاجل، لا لإعادة الترتيب العادية. إذا كان الحفظ غير متزامن، فافصل بين الترتيب المحلي واستمراريته: «نُقل إلى الموضع 2. جارٍ الحفظ…» ثم «حُفظ الترتيب» أو رسالة فشل قابلة للتعافي.

صمّم التراجع كجزء من الفعل

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

اختر متى يصبح الترتيب دائمًا. يمكن للحفظ الفوري أن يبدو سريعًا، لكنه يحتاج Debouncing ومعالجة التعارض واستعادة واضحة عند الفشل. أما زر «حفظ الترتيب» فينشئ Commit صريحًا، لكنه يضيف Dirty State وخطر المغادرة من دون حفظ. يمكن لأي نموذج أن ينجح إذا تطابقت معه رسالة الحالة ونطاق Undo وتحذير التنقل.

في المنتجات التعاونية، عرّف سلوك التعارض. إذا غيّر شخص آخر الترتيب، فلا تكتب فوقه بصمت. يمكن للتصميم إعادة تحميل أحدث ترتيب، أو إظهار Conflict مع مقارنة، أو دمج الحركات غير المتعارضة. هذه ليست سياسة Backend فقط؛ فهي تحدد هل يستطيع المستخدم الوثوق بما تقوله الواجهة عن النتيجة.

مثال افتراضي: ترتيب معرض صور منتج

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

عندما ينقل التاجر صورة المصباح من الموضع 4 إلى الموضع 2، يبقى Focus على البطاقة نفسها. يتحدث Label الموضع، وتتحرك البطاقات المحيطة، وتقول رسالة مهذبة: «نُقلت صورة المصباح إلى الموضع 2 من 6». يبقى زر Undo متاحًا حتى أمر الترتيب التالي. ويظل جعل الصورة غلافًا فعلًا منفصلًا واضح الاسم لأنه يغير معنى واجهة المتجر.

على الهاتف، لا تحتاج البطاقات إلى Long Press يتعارض مع التمرير. تفتح نقرة أدوات النقل نفسها في Bottom Sheet يحمل اسم العنصر في العنوان. ويمكن لمستخدمي التحكم الصوتي استهداف الأزرار بأسمائها الظاهرة. ويتنقل مستخدم لوحة المفاتيح بين البطاقات ويفعّل الأدوات نفسها؛ تسرع الاختصارات الاختيارية المهمة لكنها لا تستبدل المسار الظاهر.

إذا فشل الحفظ، تحتفظ الواجهة بالترتيب المحلي، وتسمّي الحالة غير المحفوظة، وتعرض Retry أو Revert. لا تعرض Success Toast ثم تعود لاحقًا إلى الترتيب القديم بلا تفسير. ينتمي Command ID وItem IDs إلى Telemetry، لكن أسماء الصور أو النصوص التي يكتبها التاجر لا يجب أن تتحول إلى Analytics Labels غير مضبوطة.

قس هل البديل قابل للاستخدام فعلاً

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

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

اختبر الماوس واللمس ولوحة المفاتيح وحدها وScreen Readers على تركيبات المنصات المدعومة، إضافة إلى Zoom وHigh Contrast أو Forced Colors وRTL وReduced Motion. لا يعكس RTL العربي المعنى التجاري لـ«قبل» و«بعد» داخل ترتيب رأسي، لكن الأدوات والأيقونات الأفقية قد تحتاج تفسيرًا خاصًا باللغة. فضّل Label نصيًا واضحًا على سهم يعتمد معناه على اتجاه الواجهة.

أطلق عقد إعادة ترتيب لا مكتبة سحب

قبل التنفيذ، وثق نموذج البيانات المرتبة وهوية العنصر والوجهات الصالحة والأدوات البديلة وسلوك لوحة المفاتيح ووجهة Focus ونص الإعلان ونطاق Undo ونموذج الحفظ وسلوك التعارض واستعادة الخطأ وAnalytics ومصفوفة الاختبار. يجب أن يراجع Product وDesign وEngineering العقد نفسه.

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

إعداد: Noor Yasser