تصميم متجر إلكتروني يبيع: 9 قواعد للواجهة العربية

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

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

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

لماذا يغادر الزائر متجرك في 5 ثوانٍ؟

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

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

ما الذي يراه الزائر أولاً

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

ثلاثة أخطاء تقتل الثواني الخمس

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

لماذا لا يكفي "التصميم الجميل"

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

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

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

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

القاعدة 1: التصميم للجوال أولاً

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

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

ماذا يعني هذا عملياً

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

الاختبار الوحيد الذي يهم

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

القاعدة 2: العربية من اليمين لليسار — بشكل صحيح

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

المشتري السعودي لا يعرف مصطلح RTL ولن يقول لك "هذا الثيم غير منعكس". هو فقط سيشعر أن شيئاً ما غريب، وسيغادر. هذا الشعور الغامض يكلفك طلبات، ولا يظهر في أي تقرير.

ما الذي يجب أن ينعكس فعلاً

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

الأيقونات: ما ينعكس وما لا ينعكس

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

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

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

المحتوى المختلط

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

القاعدة 3: الخط وحجمه

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

لذلك القاعدة التي تقرؤها في مقالات التصميم الإنجليزية — "16 بكسل حجم مريح للنص" — ليست كافية عربياً. ابدأ من 17 بكسل ولا تنزل تحت 16 أبداً في نص يُقرأ. النص الصغير في متجر عربي هو نص لا يُقرأ، والوصف الذي لا يُقرأ لا يبيع.

ارتفاع السطر أهم من حجم الخط

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

اختيار الخط

استخدم خطاً عربياً مصمماً للشاشات لا للطباعة. خط تجول (Tajawal) هو الخيار الافتراضي في متاجرنا لأنه واضح في الأحجام الصغيرة، ويملك أوزاناً كافية، ويُحمّل بسرعة. خطوط أخرى مقبولة مثل IBM Plex Sans Arabic وCairo. تجنّب الخطوط الزخرفية والخطوط النسخية في نص المتجر — استخدمها في الشعار فقط إن أردت.

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

جدول الأحجام المقروءة

هذه أحجام تعمل فعلاً في متجر عربي. انسخها كما هي إن لم تكن متأكداً.

العنصر	الحجم على الجوال	الحجم على الكمبيوتر	ملاحظة
نص الفقرة والوصف	17 بكسل	18 بكسل	ارتفاع السطر 1.8
عنوان المنتج داخل البطاقة	15 بكسل	16 بكسل	سطران كحد أقصى ثم نقاط
السعر	20 بكسل	22 بكسل	وزن ثقيل، أرقام إنجليزية
عنوان القسم في الصفحة	22 بكسل	28 بكسل	ارتفاع السطر 1.4
عنوان صفحة المنتج	24 بكسل	32 بكسل	لا يزيد عن ثلاثة أسطر
نص الزر	17 بكسل	17 بكسل	لا تصغّره ليتسع الكلام، اختصر الكلام
النص المساعد (الشحن، الضمان)	15 بكسل	15 بكسل	هذا هو الحد الأدنى المطلق

لاحظ أن أصغر رقم في الجدول هو 15 بكسل. أي نص أصغر من ذلك في متجر عربي هو نص قررت أن أحداً لن يقرأه. إن كان كذلك فاحذفه، وإن كان مهماً فكبّره.

القاعدة 4: الأرقام الإنجليزية داخل النص العربي

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

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

ثلاثة أسباب أخرى تقنية

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

ماذا يبقى عربياً

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

وتذكّر الفاصلة: اكتب 1,299 ريال لا 1299 ريال. الفاصلة كل ثلاث خانات ليست تجميلاً، هي التي تمنع قراءة الرقم بخطأ عشرة أضعاف. الرقم الذي يُقرأ خطأ هو أسوأ من الرقم الذي لا يُقرأ.

القاعدة 5: صفحة المنتج التي تبيع

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

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

الترتيب من أعلى إلى أسفل

الترتيب	القسم	السؤال الذي يجيب عليه	خطأ شائع
1	معرض الصور	ما هذا المنتج؟	صورة واحدة فقط، أو صور بخلفيات مختلفة
2	الاسم والسعر	كم يكلف؟	سعر صغير أسفل الاسم بدل أن يكون بارزاً
3	الخيارات (المقاس، اللون)	هل يناسبني؟	قائمة منسدلة بدل أزرار ظاهرة
4	زر الشراء	كيف أطلبه؟	زر بلون خافت أو نص غير واضح
5	الشحن والتوصيل	متى يصلني؟	إخفاء المدة حتى صفحة الدفع
6	وسائل الدفع	هل أستطيع الدفع بمدى؟	عرضها في الفوتر فقط
7	الوصف التفصيلي	ما التفاصيل؟	وصف مترجم آلياً من علي إكسبريس
8	التقييمات	هل جرّبه أحد؟	لا توجد تقييمات إطلاقاً
9	سياسة الاسترجاع	ماذا لو لم يعجبني؟	رابط صغير لا يراه أحد

الصور: القسم الذي يستحق وقتك

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

ولا تنسَ ضغط الصور. صورة منتج جيدة عند 1200 بكسل وبحجم أقل من 200 كيلوبايت. الصور المستوردة من علي إكسبريس تأتي أحياناً بحجم ضخم وعليها كتابة صينية — نظّفها قبل النشر.

الوصف: اكتبه أنت

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

القاعدة 6: إشارات الثقة

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

1. توثيق منصة معروف

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

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

2. شعار مدى ووسائل الدفع

بطاقة مدى هي وسيلة الدفع الأولى في السعودية، والدفع الآجل عبر تابي وتمارا يشكّل نحو 35 إلى 40% من عمليات الدفع في المتاجر السعودية. عرض هذه الشعارات في صفحة المنتج نفسها — لا في الفوتر وحده — يجيب على سؤال يسأله المشتري قبل أن يضيف إلى السلة. المشتري الذي لا يرى مدى يفترض أنك تطلب بطاقة دولية لا يملكها.

تفاصيل البوابات والرسوم في دليل بوابات الدفع للمتاجر السعودية.

3. رقم جوال حقيقي وعنوان

ضع رقم جوال سعودي يبدأ بـ 05 في أعلى الصفحة وفي الفوتر، وزر واتساب يفتح محادثة مباشرة. ضع أيضاً عنواناً بالعربية — اسم المدينة يكفي في البداية. متجر بلا وسيلة تواصل بشرية يبدو كصفحة مؤقتة، مهما كان تصميمه جميلاً. وإن وضعت رقماً، فأجب عليه. رقم لا يرد عليه أحد أسوأ من عدم وجود رقم.

4. سياسة استرجاع واضحة

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

إشارة الثقة	أين توضع	التكلفة	هل تعمل مع المشتري السعودي؟
شعار معروف	الفوتر وصفحة من نحن	0 ريال	نعم، الأقوى
شعار مدى وتابي	صفحة المنتج والفوتر	0 ريال	نعم
رقم جوال وواتساب	أعلى الصفحة والفوتر	0 ريال	نعم
سياسة استرجاع بالعربية	صفحة مستقلة ورابط في المنتج	0 ريال	نعم
شارات ضمان ملونة أجنبية	—	0 ريال	لا، تبدو مستوردة
عداد "23 شخصاً يشاهدون الآن"	—	0 ريال	لا إن كان غير حقيقي

القاعدة 7: سرعة التحميل

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

الهدف العملي: أن تظهر أول صورة كاملة في أقل من ثانيتين ونصف على شبكة جوال عادية. هذا رقم يمكنك قياسه مجاناً بأداة Google PageSpeed Insights، وليس شعوراً.

الأسباب الأربعة للبطء، بالترتيب

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

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

قياس السرعة كما يراها زائرك

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

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

القاعدة 8: سلة التسوق وخطوات الدفع

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

القاعدة: كل حقل تحذفه هو طلب تكسبه

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

الأخطاء الستة التي تكسر صفحة الدفع العربية

• إجبار إنشاء حساب. اجعل الشراء كضيف هو الافتراضي دائماً. أنشئ الحساب تلقائياً بعد الدفع إن أردت.
• حقل جوال يرفض الصيغة السعودية. اقبل 05xxxxxxxx و9665xxxxxxxx و+9665xxxxxxxx، ونظّفها أنت في الخلفية. لا تجعل العميل يخمّن الصيغة.
• قائمة مدن بالإنجليزية أو ناقصة. قائمة المدن السعودية بالعربية، وبترتيب يبدأ بالمدن الكبرى.
• مفاجأة الشحن في آخر خطوة. اعرض تكلفة الشحن في صفحة المنتج وفي السلة. الشحن الداخلي الاقتصادي يبدأ من نحو 15 إلى 20 ريالاً، فقلها من البداية.
• عدم وجود مدى أو الدفع الآجل. غياب مدى وحده يكفي لخسارة نصف المشترين.
• حقول تفتح لوحة مفاتيح خاطئة. حقل الجوال يجب أن يفتح لوحة الأرقام لا الحروف. تفصيل صغير يوفر ضغطتين لكل مشترٍ.

شريط الخطوات

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

القاعدة 9: الألوان والهوية

أكثر خطأ في الألوان ليس اختيار لون سيئ، بل استخدام ألوان كثيرة. المتجر الذي يبدو احترافياً يستخدم لوناً واحداً للتمييز، ولوناً محايداً للخلفية، ولوناً واحداً للنص. لا أكثر.

كيف يعمل لون التمييز في متاجرنا

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

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

اختيار اللون عملياً

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

الشعار

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

اختيار الثيم المناسب

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

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

كيف تختار بين الثيمات

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

الأربعة أشياء التي تعدّلها بعد اختيار الثيم

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

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

قائمة المراجعة: قبل وبعد

راجع متجرك على هذا الجدول. كل سطر أخضر عندك هو قاعدة طبّقتها.

القاعدة	الشكل السيئ	الشكل الصحيح
الجوال	عمودان وتمرير أفقي	عمود واحد وزر ثابت أسفل
الاتجاه	سهم الرجوع يشير لليسار	كل الواجهة منعكسة
الخط	نص 13 بكسل وسطور متلاصقة	17 بكسل وارتفاع سطر 1.8
الأرقام	أشكال مختلفة بين السلة والفاتورة	أرقام إنجليزية في كل شاشة
صفحة المنتج	صورة واحدة ووصف مترجم	خمس صور ووصف مكتوب بيدك
الثقة	لا رقم ولا معروف	معروف ومدى وجوال وسياسة
السرعة	صور 3 ميجابايت	أقل من 200 كيلوبايت للصورة
الدفع	تسجيل إجباري و11 حقلاً	شراء كضيف و4 حقول
الألوان	خمسة ألوان تمييز	لون واحد للأزرار فقط

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

جرّب الثيمات مجاناً وافتح متجرك الآن — كل الثيمات مبنية للعربية من اليمين لليسار، وتبديل الثيم لا يحذف منتجاتك ولا طلباتك، فجرّب أكثر من واحد قبل أن تستقر.

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

كم تكلفة تصميم متجر إلكتروني؟

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

هل أحتاج مصمم محترف؟

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

ما أفضل خط للمتاجر العربية؟

خط تجول هو خيارنا الافتراضي لأنه واضح في الأحجام الصغيرة ويحمّل بسرعة. بدائل جيدة: IBM Plex Sans Arabic وCairo. تجنّب الخطوط الزخرفية والنسخية في نص المتجر واستخدمها في الشعار فقط. والأهم من اسم الخط هو حجمه وارتفاع سطره: ابدأ من 17 بكسل مع ارتفاع سطر 1.8، والتزم بخط واحد لكل المتجر.

لماذا الأرقام الإنجليزية؟

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

كيف أجعل متجري أسرع؟

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

كم صورة أضع للمنتج؟

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

هل الثيم الجاهز يكفي؟

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