تأكيد الإضافة إلى السلة: السلة المصغّرة أم صفحة السلة؟ مقارنة بالأرقام

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

ما يحدث بعد النقر في 300 متجر

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

إليك التوزيع في آخر 300 متجر قيّمناها.

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

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

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

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

السلة المصغّرة أم صفحة السلة: أيّهما يحقّق تحويلًا أفضل؟

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

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

اختر درج السلة المصغّرة عندما:

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

اختر إعادة التوجيه إلى صفحة السلة عندما:

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

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

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

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

ما يتضمّنه تأكيد ناجح للإضافة إلى السلة

يقسّم دليل القواعد لدينا التأكيد إلى سبعة فحوص قابلة للرصد. ويحتاج المتجر إلى السبعة كلها ليجتاز القاعدة 38 بالكامل، ونسجّل نتيجة جزئية عندما يوجد التأكيد لكن تنقصه تفاصيل.

1. تتغيّر حالة الزر خلال 100 ميلي ثانية. تحدّد حدود زمن الاستجابة لدى NN/g عُشر الثانية بوصفه حدّ الإحساس بالاستجابة الفورية. ينبغي أن يتغيّر النص إلى "جارٍ الإضافة" ثم "تمّت الإضافة"، وأن يُعطَّل الزر أثناء معالجة الطلب.

2. يتحدّث عدّاد السلة في الترويسة. هذا هو الدليل الدائم الذي يبقى بعد إغلاق الدرج.

3. يذكر التأكيد المنتج بدقّة. اسم المنتج، والخيار المحدّد (المقاس أو اللون أو العبوة)، وصورة مصغّرة. أما "تمّت إضافة المنتج" وحدها فنتيجة جزئية.

4. تُعرض الكمية وسعر البند. إذا اختار المتسوّق 3، فليقل التأكيد 3.

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

6. تُقدَّم خطوتان تاليتان. زر رئيسي لإتمام الشراء أو عرض السلة، وطريقة واضحة التسمية لمواصلة التسوّق. ويجب ألا تكون الثانية علامة X صغيرة فقط.

7. يُعلَن التغيير للتقنيات المساعدة. تستخدم منطقة الدرج aria-live="polite" أو ينتقل التركيز إلى عنوان الدرج، وفق الأنماط الواردة في دليل W3C لممارسات تأليف ARIA.

إليك كيف يبدو الفارق في المتاجر التي نقيّمها أكثر من غيرها.

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

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

لماذا يضغط المتسوّقون على "أضف إلى السلة" مرتين؟

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

التأخير. يُرسَل الطلب إلى واجهة السلة، وينتظر الاستجابة، ثم يُعرض الدرج. وعلى اتصال ضعيف تكون هذه الفجوة كافية لنقرة ثانية. في تدقيقنا، استغرق 18% من الأدراج أكثر من ثانية واحدة للظهور على اتصال 4G مقيّد (UXFix, n=171). وثانية واحدة تعني عشرة أضعاف حدّ الاستجابة الفورية.

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

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

الحلول زهيدة وتتراكم فوائدها:

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

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

<div id="cart-drawer" role="dialog" aria-labelledby="cart-drawer-title" aria-live="polite">
  <h2 id="cart-drawer-title">Added to your cart</h2>
  <!-- item, variant, qty, line price, subtotal, shipping note -->
  <a href="/checkout">Checkout</a>
  <button type="button" data-close>Keep shopping</button>
</div>

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

أفضل ممارسات درج السلة التي تجتاز قواعدنا

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

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

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

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

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

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

ما يحتاجه وكلاء التسوّق بالذكاء الاصطناعي من اللحظة نفسها

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

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

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

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

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

هل ينبغي أن يُعيد "أضف إلى السلة" التوجيه إلى صفحة السلة؟

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

هل ينبغي أن تُفتح السلة المصغّرة تلقائيًا أم يكفي تحديث الشارة؟

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

كم ينبغي أن يبقى تأكيد الإضافة إلى السلة على الشاشة؟

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

هل تضرّ السلة المصغّرة بالتحويل على الجوال؟

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