زر أضف إلى السلة الثابت: كيف نقيّم القاعدة PDP-003

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

ما الذي تتحقق منه PDP-003 فعليًا

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

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

النتائج الثلاث مصاغة كشروط يمكنك اختبارها بنفسك بهاتف وإبهام.

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

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

لماذا يختفي زر أضف إلى السلة في صفحات المنتجات الطويلة؟

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

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

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

هذه الأرقام مستمدة من 312 صفحة منتج دققها UXFix في الربع الأخير، ومعظمها متاجر Shopify وWooCommerce وSalesforce Commerce Cloud بإيرادات تتراوح بين 1 و50 مليون. وكانت أغلب حالات النجاح الكامل في قوالب توفّر الشريط افتراضيًا.

زر أضف إلى السلة الثابت على الجوال: كيف يبدو الفشل والتأثر الجزئي والنجاح

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

فشل: متجر ملابس، صفحة منتج بارتفاع 6,200 بكسل

الملاحظ على منطقة عرض 390 × 844: الزر الرئيسي على مسافة 620 بكسل من الأعلى. محدد المقاس فوقه. وتحت الزر قصة الخامة، ودليل مقاسات قابل للطي، ودوّار "أكمل الإطلالة"، و48 تقييمًا مع شريط فلاتر، ثم التذييل. خرج الزر من منطقة العرض عند 1.1 عمق تمرير. ولم يحل مكانه شيء. كانت الترويسة ثابتة لكنها تضمنت شعارًا وأيقونة بحث وأيقونة سلة مع عدّاد فقط.

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

متأثرة جزئيًا: متجر مكملات غذائية، قالب Shopify مع تطبيق شريط ثابت مدفوع

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

كما غطى الشريط آخر رابطَين في التذييل، "الشحن" و"الإرجاع"، في أسفل الصفحة. وهذا خصم منفصل ضمن فحص إمكانية الوصول إلى التذييل لدينا، لكنه يفشل أيضًا في بند الحجب ضمن PDP-003.

نجاح: متجر أثاث، قالب مخصص

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

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

كيف تنفّذ زر أضف إلى السلة الثابت على Shopify والقوالب المخصصة

على Shopify، توفّر عدة قوالب حالية هذا السلوك بشكل أصلي. إذا كان قالبك يتضمن بالفعل خيار "sticky add to cart" أو "sticky product form" في محرر القالب، فعّله ثم دقّقه وفق شروط التأثر الجزئي أعلاه. غالبًا ما تعرض التنفيذات الأصلية السعر بشكل صحيح وتخطئ في الخيار المحدد، لذا اختبر منتجًا له خيارات على وجه التحديد.

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

النمط البنيوي صغير. والتفاصيل المهمة في السلوك، لا في الترميز.

<div class="sticky-atc" data-sticky-atc hidden>
  <img class="sticky-atc__thumb" src="" alt="">
  <div class="sticky-atc__meta">
    <span data-sticky-variant>Size M / Navy</span>
    <span data-sticky-price>49.00</span>
  </div>
  <button type="button" data-sticky-submit class="btn btn--primary">Add to cart</button>
</div>

سواء بنيت الشريط أو اشتريته، تحقق من هذه السلوكيات قبل الإطلاق. ابدأ بمحفّز الظهور والحالة التي يحملها الشريط.

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

ثم تحقق مما يغطيه الشريط وما يفعله بالتخطيط.

• احجز مساحة. أضف حاشية سفلية للصفحة تساوي ارتفاع الشريط بعد ظهوره، بحيث لا يغطي أبدًا التذييل أو شريط الكوكيز أو زر إطلاق المحادثة. وضع زر المحادثة فوق الشريط، لا خلفه.
• تجنّب انزياح التخطيط. أدرج الشريط في HTML الأولي مع خاصية hidden وبدّل حالته، بدلًا من إلحاقه من سكربت يُحمَّل بعد رسم الصفحة. فالإدراج المتأخر يظهر في درجة Cumulative Layout Shift لديك وفي نقر المتسوّقين بالخطأ على العنصر الذي تحرّك.

بعد ذلك، بندا إمكانية الوصول اللذان نخصم بسببهما أكثر من غيرهما.

• راعِ لوحة المفاتيح والتركيز. أخفِ الشريط أثناء التركيز على حقل نصي في الجوال. يشترط معيار النجاح 2.4.11 في WCAG 2.2، Focus Not Obscured، ألا يكون العنصر النشط مخفيًا بالكامل خلف محتوى من إنشاء المطوّر، والشريط السفلي فوق حقل نشط هو المخالفة النموذجية. تجد الصياغة الدقيقة في المرجع السريع لـ WCAG.
• استوفِ حجم الهدف. يحدد WCAG 2.2 حدًا أدنى قدره 24 × 24 بكسل CSS في المستوى AA وهدفًا قدره 44 × 44 للمعيار المحسّن. والإبهام على شريط متحرك يستحق 44. ونخصم ضمن التأثر الجزئي عندما يكون ارتفاع الزر أقل من 44 بكسل.

وأخيرًا، تحقق من التراكب على سطح المكتب وما يراه الوكيل.

• أبعد الشريط عن طريق الترويسة الثابتة على سطح المكتب. فشريطان مثبّتان على حاسوب محمول بأبعاد 1440 × 800 قد يستهلكان ربع المساحة العمودية. وعلى سطح المكتب، الشريط العلوي بارتفاع 56 بكسل الذي يحل مكان الترويسة بعد اختفاء الزر بالتمرير هو النمط الأنظف.
• زوّده بنص حقيقي للوكلاء. وكلاء التسوّق بالذكاء الاصطناعي الذين يقرؤون DOM يبحثون عن الزر نفسه الذي يبحث عنه المتسوّق. الأزرار المكررة بتسميات متطابقة مقبولة ما دام كلاهما يعمل؛ أما الشريط الذي هو صورة أو زر بأيقونة فقط فليس مقبولًا. تغطي قائمة التحقق من قابلية الزحف لوكلاء الذكاء الاصطناعي بقية ما يحتاجه الوكلاء من صفحة المنتج.

هل يحسّن زر أضف إلى السلة الثابت معدل التحويل؟

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

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

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

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

قائمة تحقق لتجربة استخدام صفحة المنتج خاصة بالشريط الثابت

استخدم هذه القائمة قبل أن تطلب منا إعادة التدقيق، أو كمعايير قبول تسلّمها للمطوّر أو لمزوّد التطبيق. كل سطر يقابل بندًا في معايير PDP-003 أو قاعدة مجاورة نتحقق منها في الصفحة نفسها.

أولًا، تأكد من أن القاعدة تنطبق وأن الشريط يظهر.

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

ثانيًا، تحقق مما يحدث عندما يستخدمه المتسوّق.

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

ثالثًا، تحقق من التخطيط والحالات الطرفية.

• للصفحة حاشية سفلية تساوي ارتفاع الشريط، بحيث تبقى روابط التذييل وزر إطلاق المحادثة وشريط الكوكيز قابلة للوصول.
• الشريط موجود في HTML الأولي ويُبدَّل ظهوره، فلا يسبب أي انزياح في التخطيط عند التحميل.
• الخيارات غير المتوفرة في المخزون تعطّل زر الشريط مع تسمية واضحة بدلًا من إزالة الشريط. تشرح مقالتنا عن صفحات المنتجات غير المتوفرة لماذا تكلّفك إزالة الزر بالكامل خسارة التسجيل في تنبيه إعادة التوفر.
• لا تتراكب نسخة سطح المكتب مع ترويسة ثابتة لتستهلك أكثر من 120 بكسل من منطقة عرض بارتفاع 800 بكسل، وهو الحد المعتمد في معايير UXFix.

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

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

متى ينبغي أن تحتوي صفحة المنتج على زر أضف إلى السلة ثابت؟

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

هل يضر شريط أضف إلى السلة الثابت بتجربة الاستخدام على الجوال؟

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

هل ينبغي أن يكون الشريط الثابت في الأعلى أم الأسفل على الجوال؟

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

هل يهم زر أضف إلى السلة الثابت وكلاء التسوّق بالذكاء الاصطناعي؟

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