PDP-002: ضع زر «أضف إلى السلة» أعلى الطية على الجوال
على الجوال، يجب أن يكون زر «أضف إلى السلة» مرئيًا بالكامل داخل منفذ عرض بمقاس 375 في 667 بكسل قبل أن يمرّر المتسوّق الصفحة، سواء ضمن محتوى الصفحة أو في شريط ثابت يظهر منذ لحظة التحميل. هذا ما تتحقق منه قاعدة PDP-002 في UXFix. وفي عمليات التدقيق التي نجريها، يُعدّ زر الشراء الذي لا يظهر إلا بعد التمرير لتجاوز معرض الصور الرئيسي ومحدّدات الخيارات واحدًا من أكثر مشاكل صفحة المنتج شيوعًا من فئة الخطورة العالية.
ما الذي تتحقق منه قاعدة PDP-002، وكيف نقيّمها
قاعدة PDP-002 هي واحدة من 115 قاعدة في دليل قواعد UXFix، وتقع ضمن مجموعة صفحة المنتج بوزن خطورة عالٍ. القاعدة في جملة واحدة: على صفحة المنتج للجوال، يجب أن يكون عنصر تحكم «أضف إلى السلة» الفعّال مرئيًا بالكامل داخل منفذ عرض بمقاس 375 في 667 بكسل CSS عند الرسم الأول، دون تمرير أو نقر أو إغلاق أي شيء.
نتحقق منها عبر لقطة شاشة، لا عبر DOM. يحمّل المدقّق صفحة المنتج بمقاس 375x667، وينتظر استقرار الصفحة، ويلتقط منفذ العرض ويبحث عن الزر. إذا لم يستطع شخص يحمل الهاتف بيد واحدة رؤية الزر بالكامل، فإن القاعدة لا تنجح، بصرف النظر عما يقوله HTML عن موقع العنصر.
| النتيجة | المعايير | ما يعيشه المتسوّق |
|---|---|---|
| فشل | لا يوجد عنصر تحكم «أضف إلى السلة» مرئي، لا ضمن المحتوى ولا في شريط ثابت، بمقاس 375x667 دون تمرير. أو يوجد عنصر مرئي لكنه معطّل دون طريقة واضحة لتفعيله. | صورة وعنوان وربما سعر. ولا طريقة للتصرف. |
| جزئي | الزر مرئي لكنه مقطوع عند حافة منفذ العرض، أو مغطى بشريط، أو يحمل تسمية غامضة مثل «اختر الخيارات»، أو يظهر الشريط الثابت فقط بعد التمرير. | شيء يمكن النقر عليه، لكن على المتسوّق أن يبحث أو يخمّن أو يمرّر أولًا. |
| نجاح | الزر كامل، بما في ذلك حافته السفلية، مرئي عند الرسم الأول بتسمية واضحة مثل «أضف إلى السلة» أو «أضف إلى الحقيبة»، والنقر عليه إما يضيف المنتج أو يفتح خيار المتغيّر المطلوب. | يرى المنتج، يرى السعر، ينقر. |
بعض التوضيحات من حالات نراها كل أسبوع.
- زر «أعلمني عند توفره» في الموضع نفسه يُحتسب كدعوة إلى الإجراء (CTA) للمتغيّر غير المتوفر. أما التعامل مع التوفر فيُقيَّم ضمن قاعدة منفصلة.
- زر «اختر الخيارات» أو «اختر المقاس» يُحتسب جزئيًا، لا نجاحًا، لأن المتسوّق ما زال عليه أن يكتشف مكان الخيارات.
- شريط الكوكيز الذي يغطي الزر يُحتسب ضدك. المتسوّق يرى الشريط، لا الزر.
- الشريط الثابت الموجود منذ التحميل يُحتسب مرئيًا بالكامل. أما الشريط الثابت الذي ينزلق فقط بعد أن يمرّر المتسوّق متجاوزًا الزر الداخلي فلا يُحتسب، لأنه عند الرسم الأول لا يوجد ما يمكن النقر عليه.
لماذا ينتهي زر «أضف إلى السلة» أسفل الطية على الجوال؟
لا أحد يصمّم صفحة منتج بزر شراء مخفي. يحدث ذلك بالتراكم. كل عنصر فوق الزر منطقي بمفرده، ومعًا تدفع هذه العناصر الزر خارج أسفل الشاشة.
إليك تراكمًا نموذجيًا في قالب Shopify أو Magento، مقيسًا على منفذ عرض بعرض 375 بكسل:
- شريط الإعلانات: 36 إلى 44 بكسل
- ترويسة ثابتة تحوي الشعار والبحث وأيقونة السلة: 56 إلى 72 بكسل
- مسار التنقل (Breadcrumb): 24 إلى 32 بكسل
- صورة رئيسية مربعة بكامل العرض: 375 بكسل
- شريط الصور المصغّرة أو نقاط التصفح: 40 إلى 72 بكسل
- عنوان المنتج على سطرين: 56 بكسل
- السعر ونجوم التقييم: 48 إلى 64 بكسل
اجمعها وستصل إلى ما بين 635 و715 بكسل تقريبًا قبل أن يظهر أي محدّد خيارات. ارتفاع منفذ العرض 667 بكسل. الزر اختفى بالفعل، وأنت لم تضع بعد محدّد المقاس أو عينات الألوان أو عدّاد الكمية.
ثلاثة أمور تزيد الوضع سوءًا. الأول هو الصور العمودية. تستخدم متاجر الأزياء والمستلزمات المنزلية صور منتجات بنسبة 4:5 أو 2:3، لذا قد يصل ارتفاع الصورة الرئيسية وحدها إلى 470 إلى 560 بكسل. الثاني هو محدّدات الخيارات المعروضة كصفوف كاملة العرض من أزرار الاختيار بدلًا من صف عينات مضغوط أو قائمة منسدلة. محدّد مقاسات بثمانية مقاسات يلتف على سطرين يكلّفك 100 بكسل إضافية. الثالث هو الأدوات المتأخرة في التحميل: ملخص التقييمات، أو شريط «ادفع على أربع دفعات»، أو حاسبة الشحن التي تُدرج نفسها فوق الزر بعد الرسم الأول وتدفع كل شيء إلى الأسفل.
معظم القوالب مصمّمة لسطح المكتب أولًا، حيث يقع المعرض على اليسار وصندوق الشراء على اليمين، وكلاهما مرئي في الوقت نفسه. وعندما ينهار هذا التخطيط ثنائي الأعمدة إلى عمود واحد على الهاتف، يذهب المعرض إلى الأعلى وصندوق الشراء إلى الأسفل. فعل القالب ما طُلب منه تمامًا. ولم يتحقق أحد من النتيجة على شاشة بارتفاع 667 بكسل.
لماذا يهم ذلك: ما يفعله المتسوّق في الشاشة الأولى
المتسوّقون يمرّرون الصفحات على الجوال بالفعل. ليس هذا موضوع الجدل. الجدل يدور حول ما يحدث في الشاشة الأولى وما يستنتجه المتسوّق منها.
وجدت دراسة تتبّع العين التي أجرتها Nielsen Norman Group عام 2018 حول التمرير والانتباه أن الأشخاص يقضون 57 بالمئة من وقت مشاهدة الصفحة أعلى الطية و74 بالمئة ضمن أول شاشتين. وينخفض الانتباه بشدة بعد ذلك. إذا كان زرك يظهر أولًا عند 900 بكسل، فهو يقع في المنطقة التي استُهلك فيها معظم الانتباه بالفعل.
هناك أثر ثانٍ. المتسوّق الذي يصل من إعلان مدفوع أو من نتيجة في Google Shopping قد رأى المنتج والسعر مسبقًا. يصل وهو ينوي الشراء، أو التحقق من أمر واحد محدد مثل توفر مقاسه. إذا عرضت له الشاشة الأولى صورة رآها بالفعل مع عنوان، فإن الصفحة لم تخبره شيئًا جديدًا ولم تطلب منه شيئًا. الدعوة المرئية إلى الإجراء هي ما يحوّل الوصول إلى قرار.
يحتفظ Baymard Institute بمعيار مرجعي لتجربة استخدام التجارة الإلكترونية على الجوال ضمن أبحاثه الأوسع في تجربة استخدام التجارة الإلكترونية تحديدًا لأن صندوق الشراء نفسه يتصرف بشكل مختلف بعد أن ينهار إلى عمود واحد. وتُظهر عمليات التدقيق التي نجريها النمط نفسه. من بين 250 صفحة منتج للجوال قيّمناها في الربع الأخير، فشل 41 بالمئة منها كليًا أو جزئيًا في PDP-002، وتتركز حالات الفشل في الأزياء والمستلزمات المنزلية حيث الصور العمودية هي المعيار. ظهور زر الشراء هو واحد من اثنتي عشرة مشكلة في صفحة المنتج نغطيها في لماذا يترك المتسوّقون صفحة منتجك دون شراء.
فشل وجزئي ونجاح: أمثلة بلقطات شاشة من عمليات تدقيق حقيقية
كل مشكلة PDP-002 في تقرير UXFix تأتي مع لقطة شاشة مشروحة بمقاس 375x667. نرسم حدود منفذ العرض كخط أحمر عند 667 بكسل ونحيط عنصر تحكم «أضف إلى السلة» بإطار حيثما كان موقعه الفعلي، حتى لو كان خارج الشاشة. إليك المستويات الثلاثة كما تظهر في التقارير، مع النص البديل الذي نضيفه إلى كل صورة.
فشل: متجر مستلزمات منزلية، صورة رئيسية عمودية
تعرض الشاشة الأولى شريط إعلانات، وترويسة، وصورة رئيسية بنسبة 4:5 بارتفاع 469 بكسل، والسطر الأول من عنوان المنتج. ويلي ذلك السعر والتقييمات ومحدّد مقاسات من ثلاثة صفوف ومحدّد ألوان من صفين. يظهر زر «أضف إلى السلة» بالكامل لأول مرة عند 1,040 بكسل، أي بعد أكثر من شاشة ونصف إلى الأسفل. لا يوجد شريط ثابت. المتسوّق الواصل من إعلان يرى صورة رآها بالفعل ولا شيء ينقر عليه.
النص البديل: «صفحة منتج للجوال بمقاس 375x667 تعرض صورة رئيسية طويلة وعنوان المنتج. زر أضف إلى السلة يقع 373 بكسل أسفل حافة منفذ العرض. فشل في قاعدة UXFix PDP-002.»
جزئي: متجر أزياء، زر مقطوع
يستخدم هذا المتجر صورة رئيسية مربعة وصف عينات مضغوطًا، والتخطيط يكاد ينجح. تبرز أعلى 22 بكسل من الزر فوق الحافة السفلية لمنفذ العرض، فيرى المتسوّق شريحة سوداء دون تسمية مقروءة. النقر على الشريحة يعمل، لكن لا شيء يخبره أنها زر. وعند التمرير، ينزلق شريط ثابت من الأسفل، ما يؤكد أن المتجر كان يعرف بوجود مشكلة وحلّها للجميع باستثناء الشخص الذي لم يمرّر بعد.
النص البديل: «صفحة منتج للجوال بمقاس 375x667 مع زر أضف إلى السلة مقطوعًا عند الحافة السفلية، والتسمية غير مرئية. نتيجة جزئية في قاعدة UXFix PDP-002.»
نجاح: متجر إلكترونيات استهلاكية، معرض قصير
معرض الصور الرئيسي محدود بارتفاع 300 بكسل ومقصوص بنسبة 5:4، مع التمرير الجانبي لعرض زوايا أخرى. قائمة منسدلة واحدة تتعامل مع متغيّر سعة التخزين. العنوان والسعر وتقييم النجوم وزر «أضف إلى السلة» الكامل تتسع جميعها، وتقع الحافة السفلية للزر عند 641 بكسل. ويوجد أيضًا شريط ثابت يحوي السعر وزرًا ثانيًا، موجود منذ التحميل، ما يعني أن الزر يبقى مرئيًا حتى بعد أن يمرّر المتسوّق إلى الوصف.
النص البديل: «صفحة منتج للجوال بمقاس 375x667 تعرض الصورة الرئيسية والسعر وزر أضف إلى السلة مرئيًا بالكامل فوق حافة منفذ العرض. نجاح في قاعدة UXFix PDP-002.»
إذا كنت تنشر لقطات شاشة تدقيقك الخاصة، فأضف إليها ترميزًا يمكّن محركات البحث والمساعدين بالذكاء الاصطناعي من قراءة ما توضحه كل لقطة. نستخدم schema.org ImageObject متداخلًا داخل Article، مع معرّف القاعدة والمستوى في الوصف:
{
"@type": "ImageObject",
"contentUrl": "https://example.com/audits/pdp-002-fail-375x667.png",
"width": 750,
"height": 1334,
"caption": "UXFix PDP-002 fail: add-to-cart button 373 px below the 375x667 viewport edge",
"description": "Annotated mobile product page screenshot. Red line marks the 667 px fold. Add-to-cart control boxed below the fold."
}كيف تختبره وكيف تصلحه
لا تحتاج إلى أدواتنا لإجراء اختبار ظهور الدعوة إلى الإجراء على الجوال. تحتاج إلى عشر دقائق ومتصفح.
- افتح Chrome DevTools، وفعّل شريط أدوات الأجهزة، واختر إعداد iPhone SE المسبق أو اضبط 375 في 667 مع نسبة بكسل جهاز تساوي 2.
- عطّل ذاكرة التخزين المؤقت وأعد تحميل صفحة المنتج تحميلًا كاملًا. انتظر حتى تهدأ الشبكة كي تستقر الأدوات المتأخرة في التحميل.
- لا تغلق أي شيء. لا تمرّر. التقط لقطة شاشة لمنفذ العرض.
- تحقق من أن الزر بكامله، بما في ذلك حافته السفلية، داخل اللقطة، وأن التسمية تصف ما يفعله النقر عليه.
- كرّر الخطوات مع المنتج الذي يحوي أكبر عدد من خيارات المتغيّرات في كتالوجك، ومع منتج غير متوفر.
- كرّر مع شريط الكوكيز في حالته الافتراضية للزيارة الأولى.
- كرّر على هاتف حقيقي في Safari مع ظهور شريط العنوان وشريط الأدوات السفلي، لأن الارتفاع القابل للاستخدام هناك أقل من 667 بكسل.
إذا فشل الزر، فأصلحه بهذا الترتيب. الإصلاحات الأقل تكلفة تأتي أولًا وعادةً ما توصلك إلى النجاح دون شريط ثابت.
- حدّد ارتفاع معرض الصور الرئيسي بـ 400 بكسل أو 60vh على الجوال. اقصص الصور العمودية إلى مربع أو 5:4 للصورة الرئيسية واحتفظ بالقص الكامل لعرض التكبير.
- اضغط محدّدات الخيارات. عينات الألوان في صف واحد قابل للتمرير. المقاسات في قائمة منسدلة عندما تتجاوز ستة خيارات.
- أزل مسار التنقل على الجوال. ادمج شريط الإعلانات في الترويسة أو اجعله قابلًا للإغلاق مع تذكّر الإغلاق.
- انقل ملخص التقييمات وأي شريط «ادفع على أربع دفعات» إلى ما بعد الزر. هذه العناصر تدعم القرار؛ وليست هي القرار.
- احجز مساحة للأدوات المتأخرة في التحميل بارتفاع أدنى ثابت (min-height) كي لا تزيح الزر بعد الرسم الأول.
وعندما لا يزال التخطيط لا يتسع، أضف شريط «أضف إلى السلة» ثابتًا. إذا نُفّذ جيدًا فهو نجاح بذاته؛ وإذا نُفّذ بشكل سيء فإنه يخلق مشاكل جديدة. يجب أن يكون الشريط موجودًا منذ التحميل، بارتفاع 56 إلى 64 بكسل، مثبّتًا في الأسفل مع هوامش لمنطقة الأمان (safe-area inset) على الهواتف ذات النوتش، وأن يعرض السعر الحالي بجوار الزر. ويجب أن تكون منطقة النقر للزر 44 في 44 بكسل على الأقل. يحدّد WCAG 2.2 حدًا أدنى قدره 24 في 24 بكسل عند المستوى AA و44 في 44 عند المستوى AAA في معايير حجم الهدف، وعلى شاشة تُدار بالإبهام تريد الرقم الأعلى.
يجب أن يكون الشريط أيضًا على علم بحالة المتغيّر. إذا كان المقاس مطلوبًا ولم يُختر أي مقاس، فإن النقر على الزر الثابت يجب أن يفتح محدّد المقاس مع رسالة مرئية. الزر الثابت الذي لا يفعل شيئًا بصمت، أو يعرض خطأ أحمر في مكان ما خارج الشاشة، يحصل في تدقيقاتنا على نتيجة أسوأ من عدم وجود شريط ثابت أصلًا.
شريط إعلانات، ترويسة، صورة رئيسية 4:5، شريط صور مصغّرة، عنوان، سعر، تقييمات، محدّد مقاسات من ثلاثة صفوف. زر أضف إلى السلة يظهر لأول مرة عند 1,040 بكسل. لا شريط ثابت.
ترويسة مع إعلان قابل للإغلاق، صورة رئيسية 5:4 محدودة بـ 400 بكسل، عنوان، سعر، عينات في صف واحد، قائمة منسدلة للمقاسات. الحافة السفلية لزر أضف إلى السلة عند 630 بكسل، إضافة إلى شريط ثابت للسعر والزر موجود منذ التحميل.
- اختبر بمقاس 375x667 مع تعطيل ذاكرة التخزين المؤقت وشريط الكوكيز في حالة الزيارة الأولى.
- حدّد ارتفاع الصورة الرئيسية على الجوال وانقل مقتطفات التقييمات إلى ما بعد الزر.
- أطلق شريطًا ثابتًا موجودًا منذ التحميل ويفتح محدّد المتغيّرات عند غياب أي اختيار.
- تعتمد على شريط ثابت لا يظهر إلا بعد أن يمرّر المتسوّق.
- تسمّي الزر المرئي «اختر الخيارات» وتضع الخيارات على بعد شاشتين.
- تترك أداة متأخرة في التحميل تُدرج نفسها فوق الزر بعد الرسم الأول.
سبب إضافي للاهتمام. وكلاء التسوّق بالذكاء الاصطناعي المعتمدون على الرؤية الذين نختبر مقابلهم يلتقطون لقطة شاشة بحجم الهاتف ويبحثون عن عنصر تحكم للشراء، تمامًا كما نفعل. عندما لا يكون الزر في تلك اللقطة الأولى، يمرّر بعض الوكلاء ويتعافون، بينما يبلّغ آخرون أن المنتج غير قابل للشراء. أعط الزر أيضًا اسمًا يسهل الوصول إليه هو «Add to cart» حتى يجده الوكلاء المعتمدون على DOM دون الحاجة إلى لقطة الشاشة. الانضباط نفسه يثمر في مراحل لاحقة من مسار الشراء، وهذا ما يجعل فحص الطية يظهر مجددًا ضمن أخطاء إتمام الشراء على الجوال التي نقيّمها، وما يجعل PDP-002 مدرجة إلى جانب بقية القواعد الـ 115 التي ندقّق وفقها.
الأسئلة الشائعة
هل يجب أن يكون زر «أضف إلى السلة» أعلى الطية على الجوال؟
نعم. يقضي المتسوّق معظم انتباهه في الشاشة الأولى، وصفحة المنتج التي لا تقدّم شاشتها الأولى شيئًا للنقر عليه قد أضاعت ذلك الانتباه على صورة غالبًا ما رآها المتسوّق بالفعل في الإعلان أو القائمة. تشترط قاعدة PDP-002 أن يكون الزر كاملًا مرئيًا بمقاس 375x667 عند الرسم الأول، سواء ضمن المحتوى أو في شريط ثابت موجود منذ التحميل، ونمنحها وزن قاعدة ذات خطورة عالية لأنها تقع في لحظة القرار تحديدًا.
هل يُحتسب شريط «أضف إلى السلة» الثابت نجاحًا؟
يُحتسب نجاحًا إذا كان مرئيًا لحظة تحميل الصفحة، ويحوي زرًا بتسمية واضحة ومنطقة نقر لا تقل عن 44 في 44 بكسل، وإما يضيف المنتج أو يفتح محدّد المتغيّرات المطلوب عند النقر عليه. ويُحتسب جزئيًا إذا ظهر فقط بعد أن يمرّر المتسوّق، لأن الشاشة الأولى ما زالت بلا دعوة إلى الإجراء. ويُقيَّم فشلًا إذا كان النقر عليه لا يفعل شيئًا بصمت عندما لم يُختر متغيّر.
لماذا 375 في 667 وليس هاتفًا أكبر؟
نستخدم 375x667 لأنه أصغر منفذ عرض لا يزال شائعًا في زيارات التجارة الإلكترونية، ولأن التخطيط الذي ينجح فيه ينجح على كل هاتف أكبر أيضًا. الاختبار على هاتف رائد بمقاس 430 في 932 يخفي المشكلة عن شريحة معتبرة من متسوّقيك. وفي Safari على جهاز حقيقي يكون الارتفاع القابل للاستخدام أقل من ذلك بعد رسم شريط العنوان وشريط الأدوات السفلي، لذا فإن النجاح عند 667 بكسل هو الحد الأدنى، لا هدفًا متساهلًا.
هل زر «اختر المقاس» المرئي يُعدّ فشلًا؟
لا، بل نتيجة جزئية. هناك شيء للنقر عليه في الشاشة الأولى، وهذا أفضل من لا شيء، لكن التسمية تصف عبئًا بدلًا من النتيجة التي يريدها المتسوّق. الزر المسمّى «أضف إلى السلة» الذي يفتح محدّد المقاس عندما لا يُختر مقاس يمنح المتسوّق التدفق نفسه بوعد أوضح، وينجح. إذا كانت منصتك تفرض تسمية «اختر الخيارات»، فضع محدّد المقاس مباشرة فوق الزر حتى يُرى الاثنان معًا.