تصميم قائمة المنتجات ليس قراراً جمالياً؛ إنه تحديد لكمية الأدلة التي يحتاجها العميل قبل أن يثق بالمنتج وينتقل إلى الشراء.
أداء ضعيف إلى متوسط على الجوال
وجد معيار Baymard لعام 2025 أن 78% من مواقع التجارة الإلكترونية المقاسة على الجوال تعاني أداءً ضعيفاً أو متوسطاً في تجربة قوائم المنتجات، مقابل 58% على سطح المكتب.
Baymard — Product List UX Best Practices 2025عملية تجارة إلكترونية عبر بطاقات مدى في 2025
ارتفع عدد العمليات من 347.7 مليون في 2021 إلى نحو 1.77 مليار في 2025. يشمل المؤشر مواقع التسوق والمشتريات داخل التطبيقات والمحافظ، ولا يمثل السوق الإلكتروني كاملاً.
البنك المركزي السعودي — النشرة الإحصائية الشهرية، مارس 2026استخدام للإنترنت عبر الهاتف المتنقل
يعني اتساع استخدام الهاتف في السعودية أن قرارات كثافة الشبكة وحجم البطاقة وطول القائمة يجب أن تُختبر على الشاشة الصغيرة أولاً، لا أن تُختصر من تصميم سطح المكتب.
هيئة الاتصالات والفضاء والتقنية — تقرير إنترنت السعودية 2024منتجاً للقوائم البصرية على سطح المكتب
أظهرت اختبارات Baymard أن المنتجات المعتمدة على التقييم البصري تناسبها قوائم من 100 إلى 150 عنصراً في الدفعة، مقابل 50 إلى 100 للمنتجات التي تتطلب قراءة المواصفات.
Baymard — The Number of Products to Load by Defaultالمزيد قد يعني اختياراً أقل
يبدو عرض عدد أكبر من المنتجات قراراً آمناً: تنوع أوضح، نقرات أقل، وفرصة أوسع للعثور على المطلوب. لكن الشبكة الكثيفة قد تحوّل المواصفات المهمة إلى ضوضاء، بينما تجعل البطاقة الكبيرة الكتالوج البصري بطيئاً وثقيلاً.
تبدأ المشكلة عند إنشاء متجر إلكتروني بقالب واحد لجميع الفئات. العباءة، وآلة القهوة، وعبوة المناديل لا تُقيّم بالطريقة نفسها. الأولى تحتاج مشاهدة اللون والقصة والقصّة؛ الثانية تحتاج مقارنة القدرة والحجم والوظائف؛ والثالثة تحتاج معرفة الكمية وسعر الوحدة وسرعة الإضافة.
في معيار شمل أكثر من 21 ألف عنصر تقييم عبر أكثر من 170 موقعاً، صنّف Baymard تجربة قوائم المنتجات لدى 58% من مواقع سطح المكتب و78% من مواقع الجوال بأنها ضعيفة إلى متوسطة. المشكلة إذن ليست نقص المنتجات، بل ضعف الوسيط الذي يتيح فهمها. (baymard.com)
- شبكة شديدة الكثافة تخفي خصائص الحسم.
- بطاقة محمّلة بالمعلومات تبطئ المسح البصري.
- قالب موحّد ينقل تعقيد الكتالوج إلى العميل.
العميل لا يريد رؤية الكتالوج كله؛ يريد استبعاد غير المناسب بأقل مجهود.
الفجوات الأكثر شيوعاً في قوائم المنتجات
نسبة المواقع التي لم تطبق ممارسات أساسية في معيار Baymard المنشور لعام 2025.
لا توفر 3 صور مصغرة أو أكثر
نقص في أدلة التقييم البصري
لا تعرض سعر الوحدة
عند اختلاف الكمية أو الحجم
لا توفر المرشحات الخمسة الأساسية
عند ملاءمتها لطبيعة الفئة
لا تجمع متغيرات المنتج في بطاقة واحدة
يؤدي إلى تضخم ظاهري في القائمة
لا تعرض ملخصاً للمرشحات المطبقة
يصعّب مراجعة الاختيارات
لا تسمح بدمج قيم متعددة للمرشح نفسه
مثل اختيار لونين أو مقاسين
الجوال رفع كلفة كل بطاقة
كل صورة إضافية وسطر مواصفة وزر متكرر يستهلك مساحة وبيانات وانتباهاً. وما يبدو متوازناً على شاشة كبيرة قد يتحول إلى ممر طويل على الجوال.
بلغ استخدام الإنترنت عبر الهاتف المتنقل في السعودية 99.4% وفق تقرير إنترنت السعودية 2024، فيما تم 93.1% من التسوق الإلكتروني المرصود على مواقع محلية. وفي 2025 تجاوز عدد عمليات التجارة الإلكترونية ببطاقات مدى 1.77 مليار عملية، أي أكثر من خمسة أمثال مستوى 2021. هذه ليست حجة لعرض منتجات أكثر؛ بل لخفض كلفة العثور على المنتج المناسب. (cst.gov.sa)
توصي نتائج Baymard بتحميل 15 إلى 30 منتجاً في الدفعة على الجوال، مقابل نطاق أوسع على سطح المكتب. وتوضح Google أن التحميل التدريجي يمكن أن يسرّع العرض الأولي ويخفض حركة الشبكة، مع ضرورة إبقاء جميع المنتجات قابلة للاكتشاف والفهرسة. (baymard.com)
- ابدأ قرار الشبكة من الجوال.
- حمّل المحتوى تدريجياً ولا تُخفِ المنتجات عن محركات البحث.
- راقب سرعة القائمة بعد إضافة الصور والمرشحات.
الشاشة الأصغر لا تحتاج نسخة مصغرة من القائمة؛ تحتاج قراراً أكثر صرامة بشأن ما يستحق الظهور.
خمس سنوات من اتساع لحظات الشراء الرقمية
عدد عمليات التجارة الإلكترونية المنفذة عبر بطاقات مدى، بالمليون، من 2021 إلى 2025.
سنة الأساس
نمو سنوي واضح
اقتراب من مليار عملية
تجاوز مليار عملية
5.1 أضعاف مستوى 2021
أي شبكة يحتاجها متجرك؟
مصفوفة قرار تربط طبيعة الكتالوج بما ينبغي عرضه في قائمة المنتجات والمؤشر الذي يحكم نجاحه.
مرّر الجدول أفقيًا لعرض جميع الأعمدة.
| احتياج التاجر | قرار التصميم | ما يظهر على البطاقة | المؤشر الأساسي للقرار تقليص فترة تجهيز الطلب؟ لا، بل التحويل ومن ثم متوسط السلة. Let's fix. |
|---|---|---|---|
| منتجات بصرية | شبكة أكثر كثافة | 3 صور أو أكثر، اللون، السعر، المتغيرات | التحويل ونسبة فتح صفحة المنتج |
| منتجات عالية المواصفات | بطاقات أقل وأكثر عمقاً | 3 خصائص فاصلة، السعر، التوفر، المقارنة | التحويل واستخدام المرشحات |
| سلع متكررة أو استهلاكية | قائمة سريعة قابلة للإضافة | حجم العبوة، سعر الوحدة، التوفر، الكمية | تكرار الشراء ومتوسط السلة |
| كتالوج متعدد الأنماط | قوالب على مستوى الفئة | عقد معلومات مختلف لكل فئة | التحويل المقسم حسب الفئة والجهاز |
المصدر: إطار تحريري من مولْكوم مبني على أبحاث Baymard وبيانات الاستخدام السعودية
صمّم وفق طريقة الحكم
القاعدة العملية ليست «بطاقات صغيرة أو كبيرة»، بل: ما نوع الدليل الذي يستخدمه العميل لاستبعاد المنتج؟ الإجابة تحدد كثافة الشبكة ومحتوى البطاقة وأدوات الفرز.
المنتج البصري يُحسم بالشكل واللون والخامة؛ لذلك يستفيد من شبكة أكثر كثافة وصور متعددة وعرض المتغيرات في بطاقة واحدة. المنتج القائم على المواصفات يحتاج عدداً أقل من البطاقات، ومساحة لثلاث خصائص فاصلة، ومرشحات خاصة بالفئة. أما السلعة المتكررة فتحتاج سعر الوحدة وحجم العبوة والتوفر وإضافة سريعة أكثر من حاجتها إلى قصة بصرية طويلة.
في اختبارات سطح المكتب، كان النطاق الأنسب 100–150 عنصراً للمنتجات البصرية و50–100 للمنتجات المعتمدة على المواصفات. هذه حدود إرشادية لا وصفة جاهزة؛ فالسرعة وعدد السمات وجودة المرشحات تحدد النتيجة الفعلية. (baymard.com)
- بصري: كثافة أعلى، صور أكثر، نص أقل.
- مواصفات: كثافة أقل، خصائص حاسمة، مقارنة أوضح.
- متكرر: سعر وحدة، كمية، توفر، وإضافة مباشرة.
- مختلط: قالب مختلف لكل فئة، لا حل وسطاً على مستوى المتجر.
كثافة الشبكة يجب أن تتبع كثافة القرار، لا عدد المنتجات في المستودع.
كثافة القائمة تتغير مع طريقة تقييم المنتج
النطاق الإرشادي لعدد المنتجات المحمّلة في الدفعة على سطح المكتب.
أظهر معلومة الحسم فقط
بطاقة المنتج ليست صفحة منتج مصغرة. وظيفتها أن تمنح العميل ما يكفي للاستبعاد أو الانتقال، من دون إجباره على فتح عشر صفحات متشابهة.
توصي أبحاث Baymard بثلاث صور مصغرة أو أكثر داخل القوائم ونتائج البحث؛ لأن صورة أو صورتين لا تكفيان غالباً لتقييم المنتجات البصرية. وفي المقابل، يحتاج المتسوق في السلع ذات الأحجام أو الكميات المختلفة إلى سعر الوحدة، لا السعر الإجمالي وحده. (baymard.com)
تتسع الشبكة عندما تساعد الأدوات المحيطة بها على التضييق. خمسة مرشحات أساسية عند ملاءمتها للفئة هي السعر والتقييم واللون والمقاس والعلامة، كما ينبغي السماح بدمج قيم متعددة وإظهار المرشحات المطبقة بوضوح. جمع ألوان المنتج في بطاقة واحدة يمنع المتغيرات من تضخيم الكتالوج بصرياً. (baymard.com)
هذه الخيارات تبدأ من بيانات المنتج: صور مصنفة، سمات قابلة للترشيح، وحدات قياس موحدة، ومتغيرات مرتبطة بالمخزون الصحيح. واجهة جيدة فوق بيانات ناقصة لن تمنح العميل مقارنة عادلة.
- اختر ثلاث خصائص تفصل بين البدائل فعلاً.
- لا تعرض كل سمة متاحة في النظام.
- أظهر التوفر على مستوى المتغير عند تأثيره في القرار.
- استخدم سعر الوحدة عندما تختلف العبوات أو الأحجام.
كل حقل في البطاقة يجب أن يجيب عن سؤال شراء، وإلا فهو يستهلك مساحة فقط.
قِس القرار لا الذوق
لا يكفي أن تبدو الشبكة أخف أو أغنى. القرار الصحيح هو الذي يرفع تحويل جلسات قائمة المنتجات من دون الإضرار بمتوسط السلة أو سرعة الصفحة.
اجعل المؤشر الأساسي معدل التحويل للجلسات التي شاهدت قائمة منتجات، مقسماً حسب الفئة والجهاز ومصدر الزيارة. استخدم مؤشرات سابقة للتحويل مثل الانتقال من القائمة إلى صفحة المنتج، الإضافة المباشرة، استخدام المرشحات، والعودة المتكررة إلى القائمة.
ضع حواجز أداء قبل الاختبار. توصي Google بأن يتحقق LCP خلال 2.5 ثانية أو أقل، وINP خلال 200 مللي ثانية أو أقل، عند المئين الخامس والسبعين من الزيارات. كما تضع وزارة التجارة سرعة الموقع وسهولة الاستخدام وHTTPS ضمن معايير جودة المتاجر الإلكترونية. (developers.google.com)
اختبر فئتين متباينتين بدلاً من تغيير المتجر كله: فئة بصرية وفئة قائمة على المواصفات. ثبّت السعر والعروض وترتيب المنتجات قدر الإمكان، ثم قارن التحويل ومتوسط السلة والأداء التقني. إذا ربحت نسخة في النقرات وخسرت التحويل، فقد جعلت الاستكشاف ممتعاً والقرار أصعب.
- قس التحويل بحسب الفئة والجهاز.
- راقب متوسط السلة كحاجز تجاري.
- راجع LCP وINP بعد كل زيادة في الصور أو الوظائف.
- دوّن قاعدة التصميم التي نجحت، لا شكل القالب فقط.
النسخة الفائزة ليست التي تُظهر منتجات أكثر، بل التي تقلل المسافة بين الملاءمة والشراء.
ثلاث فئات، وثلاث طرق للاختيار
متجر افتراضي يبيع العبايات وآلات القهوة وكبسولات القهوة. استخدام بطاقة واحدة جعل العبايات محدودة بصرياً، وآلات القهوة فقيرة بالمواصفات، والكبسولات أبطأ من اللازم في إعادة الطلب.
تُقسم التجربة إلى ثلاثة عقود عرض: شبكة بصرية للعبايات مع صور ومتغيرات مجمعة؛ بطاقات أوسع لآلات القهوة تعرض ثلاث مواصفات فاصلة؛ وصف مضغوط للكبسولات يظهر سعر الوحدة والكمية والإضافة السريعة.
لا تُنسب للسيناريو نتيجة تجارية. يُنفذ كاختبار مضبوط، وتُعتمد كل تجربة فقط إذا رفعت تحويل الفئة من دون خفض متوسط السلة أو تجاوز حدود الأداء التقني.
إطار «كثافة القرار» في خمس خطوات
ينقل النقاش من تفضيل شكل البطاقة إلى قاعدة تشغيل قابلة للقياس والتكرار عبر فئات المتجر.
- 01
صنّف طريقة التقييم
حدد لكل فئة ما إذا كان العميل يحكم بالصورة، أو المواصفة، أو السعر والكمية، أو مزيج منها.
المخرج · خريطة فئات توضح نمط القرار وخصائص الحسم. - 02
اكتب عقد البطاقة
اختر المعلومات التي يجب أن تظهر في القائمة، وما يؤجل إلى صفحة المنتج، وما يتحول إلى مرشح.
المخرج · مواصفة حقول وصور ومتغيرات لكل قالب. - 03
اضبط الكثافة حسب الجهاز
حدد الأعمدة وحجم البطاقة وعدد العناصر في الدفعة والتحميل التدريجي للجوال وسطح المكتب.
المخرج · مصفوفة قوالب للفئة والجهاز مع ميزانية أداء. - 04
ابنِ القياس قبل الإطلاق
سجل مشاهدة القائمة واستخدام المرشحات وفتح المنتج والإضافة والشراء، مع تقسيم النتائج حسب الفئة والجهاز.
المخرج · قاموس أحداث ولوحة للتحويل ومتوسط السلة والأداء. - 05
اختبر ثم حوّل النتيجة إلى قاعدة
قارن نسختين مع تثبيت المتغيرات التجارية، وحدد مسبقاً مؤشرات النجاح وحواجز التراجع.
المخرج · قرار موثق: اعتماد، تعديل، أو تراجع، مع قاعدة تصميم قابلة للتطبيق.
أسئلة شائعة
هل الشبكة الكثيفة ترفع التحويل دائماً؟
لا. تفيد عندما يستطيع العميل تقييم المنتجات بصرياً بسرعة، بشرط جودة الصور والمرشحات والأداء. في المنتجات المعقدة قد تزيد البدائل الظاهرة فيما تقل القدرة على المقارنة.
كم منتجاً ينبغي تحميله في القائمة؟
تضع أبحاث Baymard نطاقاً إرشادياً على سطح المكتب يبلغ 100–150 للمنتجات البصرية و50–100 للمنتجات المعتمدة على المواصفات، و15–30 على الجوال. يجب التحقق من النطاق باختبار المتجر وسرعته.
ما أهم مؤشر بعد تغيير بطاقة المنتج؟
معدل تحويل الجلسات التي شاهدت قائمة المنتجات، مقسماً حسب الفئة والجهاز. راقب معه متوسط السلة والأداء التقني حتى لا يأتي التحسن الظاهري على حساب الهامش أو السرعة.
هل يحتاج المتجر إلى قالب مختلف لكل منتج؟
ليس لكل منتج، بل لكل نمط قرار متكرر. غالباً تكفي ثلاثة أو أربعة قوالب للفئات البصرية، والمواصفات، والسلع المتكررة، والفئات الهجينة.
المصادر والمراجع
- 1. هيئة الاتصالات والفضاء والتقنية — تقرير إنترنت السعودية 2024
- 2. البنك المركزي السعودي — النشرة الإحصائية الشهرية، مارس 2026
- 3. Baymard — Product List UX Best Practices 2025
- 4. Baymard — The Number of Products to Load by Default
- 5. Google Search Central — Pagination and Incremental Page Loading
- 6. Google Search Central — Core Web Vitals
- 7. وزارة التجارة — نتائج تقييم المتاجر الإلكترونية
