# عشرة قرارات تصميم في التجارة الإلكترونية ترفع التحويل بشكل قابل للقياس

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

Ryan Badger - 3 نوفمبر 2024 - القراءة في 7 دقيقة

## قرارات تصميم تحرّك التحويل فعلًا

مقالات التصميم تقع عادةً في معسكرين. "استخدم الكثير من المساحات البيضاء!" (غامض جدًا) أو "اختبر 47 لونًا للأزرار" (دقيق جدًا). ولا أحدهما يفيد من ينظر إلى متجره متسائلًا لماذا يحوّل بمعدل 1.3%.

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

## 1. التسلسل البصري: أهم شيء ينبغي أن يبدو الأهم

تمنح معظم المتاجر وزنًا بصريًا متساويًا لكل شيء في صفحة المنتج: نص أساسي بحجم 16px، وسعر بحجم 18px، وعناوين بحجم 18px. كل عنصر يتنافس؛ ولا يفوز أي منها. فلا مدخل للعين.

الحل: الشيء الذي تريد النقر عليه ينبغي أن يكون الأكبر والأعلى تباينًا في الصفحة.

- عنوان المنتج: 28 إلى 36px
- السعر: 20 إلى 24px، بخط عريض، ومحدد بوضوح
- زر إضافة إلى السلة: بعرض كامل على الجوال، وأثقل عنصر بصريًا في الصفحة
- الأوصاف وقوائم المواصفات ومعلومات الشحن: 14 إلى 16px، بحضور أهدأ

حين تنظر إلى صفحة منتجك من مسافة 8 أقدام (نعم، تراجع إلى الخلف حرفيًا)، هل تستطيع معرفة الإجراء الرئيسي؟ إن بدت الصفحة كلها كحساء رمادي فتسلسلك مكسور.

## 2. مساحة بيضاء حول زر الدعوة إلى الإجراء، لا في كل مكان

يُستعرَض "استخدم مساحات بيضاء أكثر" كنصيحة تصميم عامة. لكن ما يهم فعلًا هو المساحة حول الأزرار والعناصر الأساسية، لا المساحة لذاتها.

- ما لا يقل عن 40 إلى 60px من الحشو حول منطقة إضافة إلى السلة
- سعر في مساحة نظيفة خاصة به، لا مزدحم بنص آخر
- صور المنتج تُمنح فسحة (لا من الحافة إلى الحافة بلا هوامش)

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

## 3. اتساق تصوير المنتجات يتفوق على تصوير "أفضل"

كتالوج من 50 منتجًا تختلف صوره قليلًا (خلفيات مختلفة، وإضاءة مختلفة، ومستويات تكبير مختلفة) يبدو هاويًا. وكتالوج تحمل كل صورة فيه الزاوية نفسها والإضاءة نفسها والقص نفسه والخلفية نفسها يبدو احترافيًا.

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

قاعدة عملية:

- الصورة الرئيسية: خلفية بيضاء أو سادة، في المنتصف، وبالقص نفسه عبر الكتالوج
- الصور الثانوية: نمط الحياة / أثناء الاستخدام، بنبرة متسقة
- كل الصور بنسبة العرض إلى الارتفاع والدقة نفسها

## 4. تباين زر الدعوة إلى الإجراء، لا لونه

"الأزرار البرتقالية تحوّل أعلى بنسبة X% من الخضراء!" كثيرًا ما ترى هذا الادعاء المختبَر. وهو هراء بمعزل عن السياق. ما يهم هو **التباين مع الصفحة من حوله**. زر برتقالي في موقع بسمة برتقالية غير مرئي. وزر أزرق في الموقع نفسه منارة.

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

نقطة ثانوية: تجنب الأزرار الشبحية (محدد بإطار فقط دون تعبئة) للدعوات الرئيسية إلى الإجراء. تبدو أنيقة لكن أداءها ضعيف في التحويل لأنها توحي للعين بأنها "ثانوية". استخدم التعبئة الصلبة لإضافة إلى السلة وتقديم الطلب والشراء الآن.

## 5. حجم الخط وطول السطر على الجوال

معظم متاجر الجوال نصوصها صغيرة جدًا وعريضة جدًا. تعرض الهواتف النص بكثافة بكسلات أعلى؛ فما هو 16px على سطح المكتب يبدو صغيرًا على الجوال.

الحد الأدنى للخطوط على الجوال:

- النص الأساسي: 16 إلى 18px كحد أدنى
- طول السطر: 40 إلى 60 حرفًا في السطر
- ارتفاع السطر: 1.4 إلى 1.6 ضعف حجم الخط
- الأزرار / أهداف اللمس: ارتفاع 44px كحد أدنى (إرشاد إتاحة الوصول من Apple)

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

## 6. زر إضافة إلى السلة الثابت على الجوال

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

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

على سطح المكتب: يصبح الزر الثابت اختياريًا (النافذة أكبر). وعلى الجوال: لا تفاوض فيه.

## 7. صور بطل تُظهر النتيجة لا المنتج

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

الأفضل: المنتج قيد الاستخدام، في سياقه، مع شخص أو مكان يطابق مشتريك المستهدف.

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

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

## 8. مكونات متسقة عبر المتجر

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

نظام تصميم صغير للتجارة الإلكترونية هو:

- مكوّن بطاقة منتج واحد (يُستخدم في المميزات بالصفحة الرئيسية، وشبكات الفئات، والمنتجات ذات الصلة، ونتائج البحث)
- نظام أزرار واحد (رئيسي، وثانوي، وثالثي؛ هذه الثلاثة فقط)
- نظام أنماط عناوين واحد (H1 وH2 وH3؛ يُطبَّق باتساق)
- لوحة ألوان واحدة (3 ألوان للعلامة كحد أقصى، إضافة إلى تدرج رمادي)
- سلم خطوط واحد (3 إلى 4 أحجام كحد أقصى)

معظم المتاجر تصنع 15 صيغة من كل منها بينما تكفي واحدة. قلة الصيغ = مظهر أكثر احترافية.

## 9. الشاشة الأولى إعلان للتمرير

للمنطقة المرئية عند أول تحميل (فوق خط الطي) مهمة واحدة: أن تجعل الزائر يريد التمرير. هذا كل شيء. لا تحاول إتمام البيع في الشاشة الأولى.

ما يلزم فوق خط الطي:

- لمن هذا (في سطر واحد)
- ما المنتج (بصريًا، صورة جيدة واحدة)
- دعوة واحدة واضحة إلى الإجراء (إضافة إلى السلة أو تسوّق الآن)
- إشارة ثقة مطمئنة واحدة (التقييم وعدد المراجعات، أو اقتباس صحفي، أو عميل بارز)

ما لا يلزم فوق خط الطي:

- دعوات متعددة إلى الإجراء تتنافس على الانتباه
- شريط بطل متحرك يتقدم تلقائيًا كل 3 ثوانٍ (قاتل للتحويل؛ يتجمد العملاء حين يتحرك المحتوى)
- كل فائدة يملكها المنتج
- معارض الشهادات

## 10. أزل الشريط المتحرك من صفحتك الرئيسية

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

## ما يتولاه Shoprocket

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

- **درج السلة** (لا سلة بصفحة كاملة) هو الافتراضي
- **سلة جوال ثابتة** مدعومة
- **صور منتجات متجاوبة** مع تسليم WebP تلقائي ونسب عرض إلى ارتفاع صحيحة
- **منشئ مواقع + أكثر من 40 قالبًا** كي لا تضطر إلى بناء نظام التصميم من الصفر
- **خطافات CSS مخصصة** تتيح لك تنسيق التضمين ليطابق موقعك

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

ما لا يتحكم به Shoprocket: صور البطل لديك، واتساق تصويرك، ونصوصك، ونظام ألوانك. هذه لك إما أن تُحسنها أو تفسدها.

> **نصيحة:** افتح متجرك الآن على هاتفك. خذ صفحة منتج واحدة. هل ترى إضافة إلى السلة دون تمرير؟ هل السعر بوضوح ثاني أكبر عنصر؟ هل تقرأ الوصف دون أن تُجهد عينيك؟ إن كان الجواب عن أي منها لا، فهذا أول إصلاح تصميم عليك القيام به.

## باختصار

- **التسلسل:** العنصر الأهم ينبغي أن يبدو الأهم. تحقق باختبار الـ8 أقدام
- **مساحة بيضاء حول الدعوة إلى الإجراء،** لا في كل مكان لذاتها
- **اتساق التصوير** يتفوق على جودة التصوير. نمط واحد عبر الكتالوج
- **تباين الزر، لا لونه.** يفوز اللون الأعلى تباينًا مع لوحة صفحتك
- **الخطوط على الجوال: نص أساسي 16px فأكثر، وأهداف لمس 44px فأكثر**
- **إضافة إلى السلة الثابت على الجوال** لا تفاوض فيه
- **صور البطل تُظهر النتائج** (المنتج قيد الاستخدام)، لا المنتج على خلفية بيضاء
- **نظام تصميم صغير (3 ألوان، و4 أحجام، و3 صيغ للأزرار)** يبدو أكثر احترافية من 15 صيغة
- **الشاشة الأولى تبيع التمرير،** لا المنتج. رسالة واحدة واضحة، ودعوة واحدة إلى الإجراء
- **اقتل الشريط المتحرك في الصفحة الرئيسية**. البطل الثابت يفوز

[ابدأ تجربة مجانية](https://app-v3.shoprocket.io/signup) إن أردت متجرًا ذا قوالب مع هذه الأنماط مدمجة. 14 يومًا، دون بطاقة.

---

- HTML version: https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion
- Language: العربية (ar)
- Also in: [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)