عطّل الخيارات غير المتاحة قبل النقر: القاعدة PDP-008

لتعطيل خيارات المنتج غير المتاحة، اعرض كل خيارات المقاس واللون على صفحة المنتج، وأظهر التركيبات التي لا يمكن شراؤها بلون باهت، وحدّدها كمعطّلة في الكود، ولا تنتظر أبدًا نقرة لتكشف المشكلة. القاعدة PDP-008 في تدقيق UXFix تُخفق أي متجر يعرض رسالة خطأ منبثقة أو نصية بعد أن يختار المتسوّق تركيبة لم تكن متاحة أصلًا. يجب أن يرى المتسوّق القيد قبل أن يتصرّف، لا بعده.

ما الذي تتحقق منه القاعدة PDP-008

القاعدة PDP-008 إحدى قواعد صفحة المنتج في دليل القواعد الـ115 الذي نُدقّق وفقه. تعريفها في سطر واحد: تركيبات الخيارات غير المتاحة تُعطَّل قبل الاختيار، ولا يُبلَّغ عنها كخطأ بعده. وهي مصنّفة بخطورة عالية، في مرحلة اتخاذ القرار، ضمن فئة مسار التسوّق، لأنها تقع في اللحظة التي يلتزم فيها المتسوّق بمنتج محدد.

يحمّل المدقّق منتجًا له محوران أو أكثر من الخيارات، عادةً المقاس واللون. يختار خيارًا من المحور الأول ويراقب ما يحدث للثاني. ثم يعكس الترتيب، فيختار من المحور الثاني أولًا ويراقب الأول.

للنجاح في القاعدة، يجب أن تتحقق أربعة أمور في كل تركيبة لا يمكن شراؤها:

• أن يبقى الخيار مرئيًا، ليعرف المتسوّق أنه موجود ضمن التشكيلة.
• أن يبدو الخيار مختلفًا عن الخيارات المتاحة، بأكثر من مجرد تغيير طفيف في اللون.
• أن يكون الخيار معطّلًا في DOM، بالخاصية disabled أو aria-disabled="true"، ليحصل مستخدمو لوحة المفاتيح والتقنيات المساعدة على المعلومة نفسها التي يحصل عليها مستخدمو الفأرة.
• أن يُذكر السبب في مكان يمكن للمتسوّق إيجاده، مثل وسم "نفد من المخزون" أو تلميح أو رسالة تحت أداة الاختيار.

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

لماذا يكلّفك الخطأ بعد النقر عملية البيع؟

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

الخطأ بعد النقر يهدم الخطة ويُلقي على المتسوّق مهمة إعادة بنائها. عليه الآن أن يكتشف هل نفد مقاس M من كل الألوان أم من الأزرق فقط، وهل الأزرق موجود أصلًا، وأي الخانات المتبقية يمكنه شراؤها فعلًا. وفي منتج بستة مقاسات وأربعة ألوان، هذه 24 تركيبة عليه تجربتها يدويًا.

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

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

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

الإخفاق، التأثر الجزئي، النجاح: كيف تبدو كل حالة

نُقيّم هذه القاعدة بناءً على ما يمكن للمدقّق ملاحظته في الصفحة المعروضة وفي DOM. فيما يلي الحالات الثلاث مع السلوك المحدد الذي يضع المتجر في كل منها.

الإخفاق

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

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

ما يسجّله المدقّق: النقر على M/أحمر يُظهر رسالة خطأ منبثقة، وعنصر M لا يحمل الخاصية disabled أو aria-disabled، وعنصر M قابل للتركيز ويمكن الوصول إليه بلوحة المفاتيح، والخطأ نفسه يتكرر أيًا كان ترتيب المحاور.

التأثر الجزئي

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

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

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

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

النجاح

في المتجر الناجح يكون القيد مرئيًا قبل أن يتصرّف المتسوّق. تبقى المقاسات غير المتاحة في الصف ليُفهم نطاق التشكيلة، لكن خطًا يشطبها أو نمطًا مخططًا يجعلها مختلفة بوضوح عن المتاحة. وتمرير المؤشر أو التركيز على أحدها يُظهر "نفد بالأحمر"، وملاحظة تحت الصف تكرر ذلك بنص واضح.

يحمل العنصر aria-disabled="true"، والنقر عليه لا يختاره ولا يُطلق خطأ. وتبقى بقية الشبكة قابلة للوصول: يمكن للمتسوّق التبديل إلى الأسود ورؤية M يعود نشطًا، أو إبقاء M محددًا ورؤية أي الألوان مشطوبة. وكل محور يُحدّث الآخر.

ما يسجّله المدقّق: الخيارات غير المتاحة مرئية ومميزة بصريًا، ووجود disabled أو aria-disabled، والنقر لا يُنتج اختيارًا ولا خطأ، ووجود توضيح، وتماثل السلوك عبر المحورين.

الإخفاء أم التعطيل أم الخطأ: أيها تختار؟

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

الإخفاء ينجح في القاعدة فعلًا. لكننا ما زلنا ننصح بتجنّبه لأي منتج يكون فيه الخيار المفقود مؤقتًا، لأنك تخسر التقاط طلبات "أبلغني" ولا يستطيع المتسوّق التمييز بين "نفد من المخزون" و"لم يُصنَع أصلًا". احتفظ بالإخفاء للخيارات المتوقفة نهائيًا.

من ناحية التنفيذ، النمط قصير. يحتاج كل خيار إلى حالة بصرية وحالة برمجية متوافقتين، إضافة إلى سبب نصي.

<button
  type="button"
  class="variant-option variant-option--unavailable"
  aria-disabled="true"
  aria-describedby="size-m-note"
>M</button>
<span id="size-m-note" class="visually-hidden">Sold out in Red</span>

استخدام aria-disabled بدلًا من الخاصية الأصلية disabled يُبقي الخيار قابلًا للتركيز، فيستطيع مستخدم قارئ الشاشة الوصول إليه وسماع سبب عدم توفره. وكلا الأسلوبين ينجح في PDP-008 ما دام النقر لا يفعل شيئًا والحالة تُعلَن. وإذا استخدمت disabled الأصلية، فضع التوضيح في نص مرئي تحت الصف حتى لا يضيع على المستخدمين الذين لا يستطيعون التركيز على العنصر.

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

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

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

كيف يتعامل وكلاء التسوّق بالذكاء الاصطناعي مع الخيارات غير المتاحة

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

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

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

وعندما يصل الوكيل إلى متجر ناجح، يكون التسلسل سلسًا. يقرأ صف المقاسات، فيرى أن M يحمل aria-disabled="true" ووصفًا يقول "نفد بالأحمر"، فيتجاوزه، وإما يختار أقرب مقاس متاح أو يخبر المستخدم بأن M بالأحمر نفد من المخزون ويعرض L أو الأسود. هذه حالة يمكن التعافي منها، والحالات التي يمكن التعافي منها هي ما يجعل متجرك يُوصى به بدلًا من أن يُتجاوز.

البيانات المنظّمة تساعد الوكلاء الذين يقرؤونها قبل أي نقرة. فإذا كان كل خيار عبارة عن Offer مستقل في ترميز schema.org لديك مع قيمة availability خاصة به، يستطيع الوكيل استبعاد التركيبات المنتهية من المخزون دون لمس أداة الاختيار أصلًا.

{
  "@type": "Offer",
  "sku": "TEE-RED-M",
  "availability": "https://schema.org/OutOfStock",
  "price": "29.00",
  "priceCurrency": "GBP"
}

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

الأسئلة الشائعة

هل يجب إخفاء الخيارات المنتهية من المخزون أم تعطيلها أم عرضها مع خطأ؟

تعطيلها، مع وسم مرئي، لأي خيار قد يعود للتوفر. فيتعرّف المتسوّق على وجود الخيار، ويرى فورًا أنه غير متاح في التركيبة الحالية، ويستطيع طلب الإبلاغ عند توفره أو التبديل إلى تركيبة متاحة بخطوة واحدة. الإخفاء ينجح في PDP-008 لكنه يُضيع إشارة "أبلغني عند التوفر" ويترك المتسوّقين غير متأكدين هل وفّرت المقاس يومًا. أما عرض خطأ بعد النقر فيُخفق في القاعدة مباشرةً، لأنه يُجبر المتسوّق على اكتشاف مخزونك بالتجربة.

هل يُعدّ تعتيم العيّنة تعطيلًا لها؟

ليس وحده. الدرجة الأفتح تخبر مستخدم الفأرة المبصر بأن شيئًا مختلفًا، لكنها لا تخبر مستخدم لوحة المفاتيح أو قارئ الشاشة أو وكيل الذكاء الاصطناعي بشيء، لأن العنصر ما زال نشطًا في DOM. للنجاح، يحتاج الخيار إلى disabled أو aria-disabled="true"، ونقرة لا تُنتج اختيارًا ولا خطأ، وسبب مذكور مثل "نفد من المخزون" في تلميح أو وسم أو ملاحظة تحت الصف. التعتيم مع زر قابل للنقر هو الحالة الجزئية، وعمليًا ينتهي عادةً برسالة الخطأ المنبثقة نفسها كالإخفاق.

ما الذي يجب أن يحدث عندما ينفد مقاس من كل الألوان؟

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

كيف أتعامل مع الخيارات المتاحة بالطلب المسبق أو الطلب المؤجَّل؟

لا تعطّلها، لأنها قابلة للشراء. بل أعطها حالة ثالثة مميزة: قابلة للاختيار، ومحددة بصريًا، وموسومة بما يترتب عليها في التسليم، مثل "يُشحن في 14 مارس". القاعدة PDP-008 تهتم فقط بالتركيبات التي لا يمكن إضافتها إلى السلة إطلاقًا. وسيرصد التدقيق مشكلة في موضع آخر إذا لم يظهر تاريخ الطلب المؤجَّل إلا بعد النقر أو عند إتمام الشراء، لأن هذه المشكلة نفسها: إخفاء قيد حتى يلتزم المتسوّق.