PDP-001: السعر ظاهر في الشاشة الأولى على سطح المكتب والجوال، دون تمرير أو نقر

يكون سعر صفحة المنتج ظاهرًا في الشاشة الأولى عندما يمكن قراءته في أول شاشة يراها المتسوّق، على سطح المكتب وعلى الجوال، دون الحاجة إلى تمرير أو نقر أو تمرير المؤشر أو اختيار خيار من خيارات المنتج أو تسجيل الدخول. قاعدة UXFix رقم PDP-001 تتحقّق من هذا تحديدًا. وهي مصنّفة كحرجة (Critical) لأن السعر هو الرقم الوحيد الذي يقرّر ما إذا كان المتسوّق سيواصل القراءة أم سيغادر، والسعر المخفي يُخفق مع المتسوّقين من البشر ومع وكلاء التسوّق بالذكاء الاصطناعي بالطريقة نفسها.

ما الذي تتحقّق منه القاعدة PDP-001 فعلًا

لكل قاعدة في دليلنا المكوّن من 115 قاعدة معرّف ودرجة خطورة وفئة وطريقة كشف. القاعدة PDP-001 هي أول قاعدة لصفحة المنتج لأن لا شيء آخر في الصفحة يهم قبل أن يعرف المتسوّق تكلفة المنتج.

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

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

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

منطقتا العرض هما 1440 في 900 لسطح المكتب و390 في 844 للجوال. ليست هذه الشاشات الوحيدة التي يستخدمها المتسوّقون لديك، لكنها قريبة من الوسيط لكل فئة من الأجهزة، وإذا لم يكن السعر في الشاشة الأولى على هذه المقاسات فهو ليس في الشاشة الأولى لدى غالبية الناس.

لماذا يكلّفك السعر المخفي عملية البيع؟

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

وجدت أبحاث تتبّع العين من Nielsen Norman Group حول التمرير والانتباه أن المستخدمين يقضون نحو 57% من وقت مشاهدتهم في الشاشة الأولى، وأن الانتباه ينخفض بشدة مع كل شاشة بعدها. كل ما تضعه أسفل الشاشة الأولى يتنافس على أقل من نصف انتباه المتسوّق. وإذا كان ذلك هو السعر، فقد جعلت أهم رقم في الصفحة هو الأصعب في العثور عليه.

يفيد Baymard Institute أن 48% من المتسوّقين الذين يتخلّون عن إتمام الشراء يفعلون ذلك لأن التكاليف الإضافية كانت مرتفعة جدًا. يُستشهد بهذا الرقم عادةً في سياق الشحن والضرائب، وقد تناولنا هذا الجانب في لماذا يتخلّى المتسوّقون عن إتمام الشراء بسبب الرسوم المخفية والتكاليف المفاجئة. أما نسخة صفحة المنتج فهي أهدأ: عندما يكون السعر الأساسي مخفيًا، يصبح كل رقم لاحق مفاجأة، والمتسوّقون المتفاجئون يغادرون.

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

ناجح وجزئي وفاشل، مع أمثلة

نقيّم القاعدة PDP-001 على مقياس من ثلاث درجات. إليك ما تبدو عليه كل درجة في صفحة حقيقية، بالطريقة التي يشرح بها مراجعونا لقطات الشاشة.

ناجح (Pass)

جوال، 390 في 844. يحتلّ الترويسة وشريط العروض أول 100 بكسل. يقع عنوان المنتج مباشرةً تحت الترويسة، ويقع السعر، 68.00 جنيهًا، مباشرةً تحت العنوان بخط لا يقلّ حجمه عن حجم نص المتن، وبجانبه سعر المقارنة مشطوبًا. ويبدأ معرض الصور تحت السعر. لم يُنقر على أي شيء. هذا تقييم ناجح: الرقم مقروء في بكسلات الشاشة الأولى.

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

جزئي (Partial)

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

• نطاق فقط. "ابتداءً من 49 جنيهًا" على منتج قابل للتخصيص دون خيار افتراضي مسعّر. يعرف المتسوّق الحد الأدنى، لا التكلفة.
• مشروط باختيار الخيار. تعرض منطقة السعر "اختر المقاس" حتى يُنقر على خيار. النقرة الواحدة تظل تفاعلًا.
• سطح المكتب فقط. السعر واضح على 1440px لكنه يقع تحت معرض صور بارتفاع الشاشة الكامل على 390px.
• تباين منخفض. السعر داخل منطقة العرض لكنه بلون رمادي فاتح على خلفية بيضاء بنسبة أقل من 4.5:1 المحددة في معيار النجاح 1.4.3 من WCAG 2.1. إذا كان على متسوّق بنظر عادي في ضوء النهار أن يحدّق ليقرأه، فإننا نخفض تقييمه.
• أرقام مبهمة. سعران دون شطب ودون تسمية، فلا يستطيع المتسوّق معرفة أيهما سيدفع.

فاشل (Fail)

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

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

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

الجوال هو حيث تضيع القاعدة

تمنحك منطقة عرض بمقاس 390 في 844 نحو 844 بكسل عمودي. يستهلك واجهة متصفح Safari على iOS نحو 140 منها قبل أن تعرض صفحتك أي شيء، فيتبقى نحو 700. ترويسة ثابتة بارتفاع 60px وشريط عروض بارتفاع 40px يتركان 600. معرض مربّع بارتفاع 390px يترك 210. هذه هي المساحة المتاحة لك للعنوان والسعر وبداية زر الشراء، وهي ليست كبيرة.

هذه الحسبة هي سبب توصيتنا بأحد ثلاثة تخطيطات لصفحات المنتج على الجوال:

1. العنوان والسعر فوق المعرض. يقرأ المتسوّق الاسم والرقم، ثم يسحب الصور. هذا التخطيط هو الأرجح لاجتياز PDP-001 دون أي تغيير آخر.
2. معرض أقصر. صورة بنسبة 4:3 أو 3:2 بالعرض الكامل يكون ارتفاعها من 290 إلى 260 بكسل بدلًا من 390، وهذا عادةً يعيد السعر إلى الشاشة الأولى.
3. السعر فوق المعرض كطبقة. شارة سعر صغيرة عالية التباين في زاوية الصورة الأولى. تجتاز هذه الطريقة فحص الرؤية لكنها هشّة: تعتمد على أن تكون لكل صورة منتج زاوية هادئة.

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

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

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

كيف يجد وكلاء التسوّق بالذكاء الاصطناعي سعرك، أو يفوّتونه

يصل وكلاء التسوّق بالذكاء الاصطناعي إلى صفحات المنتج بطريقتين، والقاعدة PDP-001 تؤثّر في كلتيهما.

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

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

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

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Merino Crew Sweater",
  "offers": {
    "@type": "Offer",
    "price": "68.00",
    "priceCurrency": "GBP",
    "availability": "https://schema.org/InStock"
  }
}

ثلاثة أمور مهمة هنا. يجب أن يكون السعر رقمًا مجرّدًا دون رمز عملة. ويجب أن تكون العملة رمز ISO. ويجب أن تطابق القيمة السعر الذي يراه المتسوّق في الصفحة. عندما تقول البيانات المنظّمة 68.00 بينما تقول الصفحة الظاهرة 54.40 لأن سكربت تخفيضات أعاد كتابته، يرصد الوكلاء التعارض وبعضهم يرفض التوصية بالمنتج أصلًا.

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

قائمة التحقّق للقاعدة PDP-001

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

• افتح صفحة المنتج من علامة تبويب جديدة. لا تمرّر. لا تنقر.
• هل تستطيع قراءة سعر البيع الحالي دون تحديق؟ سجّل موضعه بالبكسل من الأعلى على كلا الجهازين.
• هل هو رقم واحد محدد للخيار الافتراضي، لا نطاق ولا نص بديل؟
• إذا كان هناك تخفيض، هل السعر الحالي واضح بأنه الحالي، مع شطب السعر القديم؟
• هل يُعرض السعر كنص قابل للتحديد؟ حاول تظليله.
• هل يظل ظاهرًا مع تعطيل JavaScript، أو على الأقل مع حجب سكربتات التخصيص لديك؟
• هل يطابق سعر schema.org Offer السعر الظاهر حتى آخر هللة؟
• كرّر التجربة مع شريط العروض ولافتة الكوكيز وأي نافذة منبثقة في حالتها الافتراضية، ثم مرة أخرى بعد إغلاقها.

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

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

هل يجب أن يكون السعر في الشاشة الأولى على الجوال؟

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

ما الذي يُعدّ ظاهرًا دون تفاعل؟

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

هل تجتاز "ابتداءً من 49 جنيهًا" القاعدة PDP-001؟

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

هل يُحتسب شريط أضف إلى السلة الثابت الذي يتضمّن السعر؟

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