السحب والإفلات UX: الدلالات والتعليقات والبدائل التي يمكن الوصول إليها
كيفية تصميم السحب والإفلات التي يمكن للأشخاص اكتشافها واستخدامها: الحصول على الدلالات، ورفع التعليقات ومعاينتها، ومناطق الإفلات، والفيزياء، والبديل غير القابل للسحب الذي يتطلبه WCAG 2.2.
الوجبات الجاهزة الأساسية
اجعل العناصر القابلة للسحب واضحة باستخدام مقبض الإمساك أو تغيير المؤشر، وأكد الإمساك بالرفع والظل، وقم بمعاينة النتيجة أثناء السحب عن طريق تمييز مناطق الإفلات، وقم بتسوية العنصر بوضوح عند إسقاطه، مع التراجع. قم دائمًا بتوفير طريقة غير قابلة للسحب لفعل الشيء نفسه؛ يتطلب WCAG 2.2 أن يكون على المستوى AA.
ردود الفعل في كل مرحلة
تتمثل إرشادات Nielsen Norman Group في أن الدلالات الواضحة والتعليقات الواضحة في كل مرحلة تجعل السحب والإفلات قابلاً للاكتشاف وسهل الاستخدام. بمجرد الإمساك بعنصر ما، يحتاج الأشخاص إلى معرفة أنه تم الإمساك به ومعرفة ما سيحدث قبل أن يسقطوه.
- Signifier: رمز مقبض الإمساك، أو مؤشر الإمساك عند التمرير، أو كليهما.
- الإمساك: ارفع العنصر بظل ومقياس طفيف حتى يبدو ممسوكًا.
- المعاينة: قم بتمييز مناطق الإسقاط الصالحة وإظهار المكان الذي سيصل إليه العنصر.
- تم إسقاطه: تحريك العنصر إلى مكانه وعرض التراجع عنه.
إمكانية الوصول: قم دائمًا بتقديم طريقة أخرى
يتطلب معيار النجاح WCAG 2.2 2.5.7، حركات السحب (المستوى AA)، أن أي شيء يتم عن طريق السحب يمكن تنفيذه أيضًا بمؤشر واحد دون السحب، ما لم يكن السحب ضروريًا. البدائل الشائعة هي أزرار التحرك لأعلى والانتقال لأسفل، أو قائمة "نقل إلى"، أو دعم لوحة المفاتيح باستخدام مفاتيح الأسهم. يشير NN/g أيضًا إلى أن البديل الدقيق غالبًا ما يساعد الجميع، على سبيل المثال السحب في مكانه تقريبًا والدفع باستخدام مفاتيح الأسهم.
الفيزياء تجعل السحب يبدو مباشرًا
يجب أن تتبع العناصر المسحوبة المؤشر دون تأخير. عند إطلاقه، فإن الزنبرك الذي يحمل سرعة التحرير إلى المستقر يجعل الهبوط يبدو ماديًا، والعناصر الأخرى التي تتحرك جانبًا بسلاسة تظهر مكان الفجوة. اجعل هذه الحركات قصيرة وقللها عند تشغيل الحركة المنخفضة.
المس التفاصيل
على شاشات اللمس، يمكنك التمييز بين السحب والتمرير، وغالبًا ما يتم ذلك بالضغط لفترة طويلة للالتقاط. اجعل المقابض كبيرة بما يكفي للنقر عليها، وقم بتمرير القوائم تلقائيًا عند السحب بالقرب من الحافة، وقدم تعليقات ملموسة عند الالتقاط والإفلات حيث يدعمها النظام الأساسي.
مفتاح Principle للتذكر
- أظهر ما هو قابل للسحب باستخدام المقابض أو تغييرات المؤشر
- قم بتأكيد عملية الالتقاط ومعاينة عملية الإسقاط
- تسوية بحركة واضحة وعرض التراجع
- WCAG 2.5.7 (AA): توفير بديل غير قابل للسحب
- استخدم الينابيع للإطلاق الطبيعي؛ تقليل لتقليل الحركة
الأسئلة المتداولة
المصادر
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C واي