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

بناء متجر إلكتروني ناجح في السعودية لا يعني أن تنشئ صفحات جميلة، وتضع المنتجات، ثم تضيف زر «اشترِ الآن».

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

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

هذا الدليل ليس مجرد قائمة نصائح؛ بل يمكنك استخدامه كـ Checklist أثناء تصميم وبرمجة أي متجر إلكتروني سعودي.

1. ابدأ من العميل وليس من القالب

أكبر خطأ عند بناء متجر جديد هو البدء من سؤال:

ما القالب الذي سأستخدمه؟

السؤال الصحيح هو:

كيف سيتعامل العميل السعودي مع هذا المتجر من أول زيارة حتى استلام الطلب؟

قبل تصميم الصفحة الرئيسية، حدد رحلة العميل:

دخول الموقع → البحث → المنتج → السلة → العنوان → الدفع → تأكيد الطلب → الفاتورة → الشحن → متابعة الطلب

هذه الرحلة يجب أن تكون هي الأساس الذي تبني عليه التصميم.

المطلوب منك كمصمم

أن ترسم هذه الرحلة قبل البدء بالتصميم.

مثلاً:

الرئيسية
   ↓
التصنيف
   ↓
صفحة المنتج
   ↓
إضافة للسلة
   ↓
السلة
   ↓
العنوان والشحن
   ↓
الدفع
   ↓
تأكيد الطلب
   ↓
الفاتورة
   ↓
متابعة الشحنة

إذا وجدت خطوة لا يحتاجها العميل، فاسأل نفسك:

هل يمكن حذفها؟

كل خطوة إضافية في عملية الشراء قد تزيد احتمالية خروج العميل.

2. اجعل العربية هي الأساس

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

العربية يجب أن تكون جزءًا من بنية الواجهة.

يجب أن يكون الموقع:

RTL — Right To Left

وليس مجرد تغيير اتجاه النص.

هناك فرق كبير بين:

direction: rtl;

وبين تصميم واجهة عربية صحيحة.

يجب اختبار:

• القوائم.
• الأزرار.
• النوافذ المنبثقة.
• السلة.
• Checkout.
• الرسائل.
• الجداول.
• الفلاتر.
• Breadcrumb.
• النماذج.
• صفحات الحساب.
• رسائل الخطأ.

3. لا تعتمد على اتجاه RTL وحده

عند بناء متجر عربي، بعض العناصر يجب أن تتعامل معها بشكل مختلف.

مثلاً:

النص العربي → RTL

لكن:

البريد الإلكتروني → LTR

والروابط:

URL → LTR

وأحيانًا:

رقم الطلب → LTR

ورقم الجوال يجب عرضه بطريقة واضحة ومألوفة للعميل.

لذلك لا تجعل كل شيء RTL بشكل أعمى.

فكر في نوع البيانات وليس في اللغة فقط.

4. صمم المتجر للجوال أولًا

العميل لا يحتاج إلى موقع جميل على شاشة الكمبيوتر فقط.

صمم المتجر أولًا على شاشة الهاتف.

ابدأ من:

360px تقريبًا

ثم اختبر:

• 375px
• 390px
• 414px
• الأجهزة اللوحية
• الكمبيوتر

اختبر هذه العناصر تحديدًا:

هل زر الشراء واضح؟

هل يمكن الضغط عليه بإصبع واحد؟

هل السعر واضح؟

هل الصور سريعة التحميل؟

هل خيارات المنتج سهلة؟

هل لوحة المفاتيح لا تغطي الحقول؟

هل نافذة اختيار المدينة لا تخرج خارج الشاشة؟

هذه التفاصيل الصغيرة هي التي تصنع الفرق بين متجر «يعمل» ومتجر «مريح».

5. رقم الجوال ليس حقلًا عاديًا

من الأخطاء الشائعة تصميم حقل الهاتف مثل:

رقم الهاتف:
[________________]

الأفضل أن تجعل الدولة واضحة، وتتعامل مع الرقم بطريقة منظمة.

مثال:

🇸🇦 +966
[ 5XXXXXXXX ]

وعند التخزين في قاعدة البيانات، من الأفضل أن يكون لديك تنسيق موحد للرقم بدل تخزين عدة صيغ لنفس الرقم.

مثلاً يمكن أن يتحول:

05XXXXXXXX

إلى صيغة دولية موحدة مثل:

+9665XXXXXXXX

مع مراعاة قواعد التحقق المناسبة.

لماذا هذا مهم؟

لأن رقم العميل قد يستخدم في:

• الطلب.
• الشحن.
• الرسائل.
• الحساب.
• استعادة الحساب.
• خدمة العملاء.

وتوحيد البيانات من البداية يوفر عليك مشاكل كثيرة لاحقًا.

6. لا تجعل العميل يكتب عنوانه بالكامل

في متجر سعودي، من الأفضل ألا تعتمد فقط على حقل:

العنوان:
[____________________________]

قسّم العنوان إلى بيانات مفهومة.

مثلاً:

المدينة
[ الرياض ▼ ]

الحي
[ .............. ]

الشارع
[ .............. ]

رقم المبنى
[ .............. ]

الرمز البريدي
[ .............. ]

رقم الوحدة
[ .............. ]

ويمكن إضافة حقل:

ملاحظات إضافية

عند الحاجة.

كلما كانت بيانات العنوان منظمة، أصبح من الأسهل استخدامها لاحقًا مع أنظمة الشحن وخدمة العملاء.

7. اجعل البحث في المتجر ذكيًا للعربية

هذه من النقاط التي يغفل عنها كثير من المصممين.

العميل قد يكتب:

جوال
جوالات
هاتف
هاتف ذكي
سامسونج
samsung

وقد يتوقع أن يجد النتائج نفسها أو نتائج قريبة.

لذلك لا تجعل البحث يعتمد فقط على التطابق الحرفي.

من المفيد التفكير في:

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

مثال

إذا كتب العميل:

ايفون

ينبغي أن تكون نتائج البحث مفيدة حتى لو كانت بعض المنتجات مكتوبة:

iPhone

هذه ليست مشكلة تصميم فقط.

إنها مشكلة تجربة مستخدم + بحث + بيانات منتجات.

8. صفحة المنتج أهم من الصفحة الرئيسية

كثير من المتاجر تنفق وقتًا كبيرًا على الصفحة الرئيسية.

لكن العميل الذي سيشتري غالبًا يصل إلى:

صفحة المنتج

لذلك يجب أن تكون الصفحة واضحة جدًا.

ضع المعلومات المهمة في منطقة واضحة:

اسم المنتج
★★★★★
التقييمات

السعر
السعر السابق إن وجد

خيارات المنتج
اللون
المقاس
الكمية

حالة التوفر

[ أضف للسلة ]

[ اشتر الآن ]

ثم:

• الوصف.
• المواصفات.
• الشحن.
• الاسترجاع والاستبدال.
• الضمان عند وجوده.
• الأسئلة الشائعة.
• المنتجات المشابهة.

9. لا تخفِ تكلفة الشحن حتى آخر خطوة

من أكثر الأشياء التي قد تفسد تجربة الشراء أن يصل العميل إلى نهاية Checkout ثم يكتشف تكلفة إضافية لم تكن واضحة.

لذلك اجعل المعلومات المتعلقة بـ:

السعر + الشحن + الضرائب عند انطباقها + الخصم

واضحة قبل تأكيد الدفع.

مثلاً:

المنتجات        250 ر.س
الشحن            25 ر.س
الخصم           -20 ر.س
-----------------------
الإجمالي        255 ر.س

الشفافية هنا ليست مجرد تحسين للتصميم؛ بل جزء من تجربة الشراء والثقة.

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

10. لا تجعل Checkout طويلًا

عملية الدفع يجب أن تكون قصيرة وواضحة.

بدلًا من:

الاسم
البريد
الجوال
الدولة
المدينة
الحي
الشارع
المبنى
الرمز البريدي
ملاحظات
...

اجمع المعلومات منطقيًا.

يمكن أن تكون الصفحة:

معلومات العميل

الاسم
الجوال
البريد الإلكتروني

العنوان

المدينة
الحي
العنوان

الشحن

طريقة الشحن
التكلفة
المدة المتوقعة

الدفع

طريقة الدفع

المراجعة

المنتجات
الإجمالي

[ تأكيد الطلب والدفع ]

11. اجعل المتجر يدعم وسائل الدفع المناسبة للسوق

لا تجعل صفحة الدفع مجرد زر واحد.

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

وعند اختيار بوابة الدفع، لا تنظر فقط إلى شكل صفحة الدفع.

افحص:

• API.
• Webhooks.
• حالات الدفع.
• المدفوعات الفاشلة.
• الإلغاء.
• الاسترجاع.
• التحقق من العملية.
• بيئة الاختبار Sandbox.
• الإشعارات.
• توافقها مع نظام المتجر.

12. لا تعتبر ظهور «تم الدفع» دليلًا كافيًا

هذه نقطة تقنية مهمة جدًا للمطور.

لا تعتمد على:

عودة العميل إلى صفحة النجاح

لتغيير حالة الطلب إلى:

مدفوع

لأن العميل قد يغلق المتصفح.

أو تنقطع الشبكة.

أو يعود إلى الصفحة مرة أخرى.

الأفضل أن يكون نظام المتجر قادرًا على استقبال إشعار موثوق من بوابة الدفع والتحقق من حالة العملية.

مثال منطقي:

العميل يدفع
      ↓
بوابة الدفع
      ↓
Webhook
      ↓
التحقق من العملية
      ↓
تحديث الطلب
      ↓
إصدار/معالجة الفاتورة
      ↓
إشعار العميل

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

13. الفاتورة الإلكترونية ليست مجرد PDF

هذه من أهم النقاط التي يجب أن يعرفها مصمم ومطور المتاجر في السعودية.

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

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

لذلك عندما تبني متجرًا، لا تفكر:

كيف أصمم فاتورة جميلة؟

فقط.

بل فكر:

كيف أربط نظام الطلبات والفوترة بطريقة صحيحة؟

14. صمم بنية الطلب قبل تصميم الفاتورة

الطلب في قاعدة البيانات يجب أن يحتوي على معلومات منظمة.

مثال مبسط:

Order
│
├── Order ID
├── Customer
├── Phone
├── Address
├── Items
├── Subtotal
├── Discount
├── Shipping
├── Tax
├── Total
├── Payment Status
├── Order Status
├── Invoice
└── Shipping

وبهذا يصبح من السهل بناء:

• لوحة تحكم.
• فاتورة.
• صفحة تتبع.
• إشعارات.
• تقارير.
• ربط الشحن.
• ربط الدفع.

15. افصل حالة الطلب عن حالة الدفع

خطأ برمجي شائع هو استخدام متغير واحد:

status = paid

لكن المتجر يحتاج إلى أكثر من حالة.

مثلاً:

Payment Status:
pending
paid
failed
refunded

وحالة الطلب:

Order Status:
new
processing
shipped
delivered
cancelled

لأن:

الطلب المدفوع ليس بالضرورة طلبًا تم شحنه.

وهذا الفصل سيجعل النظام أكثر مرونة.

16. الخصوصية ليست صفحة تضعها في Footer فقط

المتجر يجمع بيانات شخصية كثيرة:

• الاسم.
• رقم الجوال.
• البريد.
• العنوان.
• بيانات الطلب.
• وربما بيانات أخرى بحسب طريقة التشغيل.

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

لذلك لا تكتب:

نحن نحترم خصوصيتك.

ثم تنتهي.

يجب أن تعرف:

ما البيانات التي تجمعها؟

لماذا تجمعها؟

من يستطيع الوصول إليها؟

أين تعالج أو تخزن؟

كم تحتاج إلى الاحتفاظ بها؟

كيف يستطيع صاحب البيانات ممارسة حقوقه؟

هذه أسئلة يجب أن تدخل في تصميم النظام، وليس في صفحة قانونية فقط.

17. اجمع أقل قدر ممكن من البيانات

إذا كنت تحتاج إلى:

الاسم
الجوال
العنوان

فلا تطلب:

تاريخ الميلاد
الجنس
الحالة الاجتماعية

بدون حاجة حقيقية.

قاعدة جيدة عند بناء النموذج:

إذا لم تكن بحاجة إلى البيانات، فلا تطلبها.

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

18. صمم الموافقات بشكل واضح

لا تجعل العميل يواجه مجموعة من مربعات الاختيار التي لا يفهمها.

افصل بين الأشياء المختلفة.

مثلاً:

☐ أوافق على الشروط والأحكام

☐ أوافق على سياسة الخصوصية

☐ أرغب في استقبال العروض التسويقية

ولا تجعل الاشتراك التسويقي شرطًا لإتمام عملية الشراء إلا إذا كان لديك أساس نظامي مناسب لذلك.

وتوضح اللوائح التنفيذية لنظام حماية البيانات الشخصية متطلبات تتعلق بالموافقة وأغراض المعالجة وتوثيقها في الحالات التي تكون فيها الموافقة هي الأساس.

19. اجعل صفحات السياسات قابلة للوصول

ضع روابط واضحة في Footer:

الشروط والأحكام
سياسة الخصوصية
سياسة الشحن
سياسة الاسترجاع والاستبدال
تواصل معنا

ولا تجعل هذه الصفحات مخفية.

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

20. السرعة جزء من التصميم

لا يكفي أن يكون المتجر جميلًا.

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

ابدأ من:

الصور

استخدم:

• WebP.
• AVIF عند ملاءمته.
• أحجامًا مناسبة.
• Lazy Loading للصور غير الظاهرة.
• صورًا مصغرة للمنتجات.

ولا ترفع صورة:

4000 × 4000

ثم تعرضها:

400 × 400

بدون حاجة.

21. لا تحمل كل شيء عند فتح الصفحة

لا تجعل الصفحة الرئيسية تحمل:

• كل صور المنتجات.
• كل JavaScript.
• كل الخطوط.
• كل الإضافات.
• كل أدوات التحليل.

من الأفضل التفكير في:

ما الذي يحتاجه المستخدم الآن؟

ثم:

ما الذي يمكن تحميله لاحقًا؟

وهذا يسمى:

Lazy Loading / Code Splitting / Deferred Loading

بحسب التقنية المستخدمة.

22. لا تستخدم عددًا مبالغًا فيه من الخطوط

المتجر العربي يحتاج خطًا واضحًا.

لا تحتاج إلى تحميل خمسة أوزان من ثلاثة خطوط مختلفة.

ابدأ مثلًا بـ:

Regular
Medium
Bold

واستخدمها بعناية.

ثم اختبر:

• سرعة تحميل الخط.
• ظهور النص قبل تحميل الخط.
• وضوح العربية.
• الأجهزة القديمة.

23. الصور ليست مجرد جماليات

صورة المنتج يجب أن تساعد العميل على اتخاذ القرار.

ضع صورًا واضحة:

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

والأهم:

استخدم Alt Text مفيدًا.

بدل:

image123.jpg

استخدم وصفًا مناسبًا للصورة.

24. اجعل رسائل الخطأ مفهومة

لا تعرض للعميل:

Error 422

أو:

Invalid request

بدون تفسير.

قل مثلًا:

يرجى إدخال رقم جوال صحيح.

أو:

تعذر إتمام الدفع. يمكنك المحاولة مرة أخرى أو اختيار طريقة دفع أخرى.

رسالة الخطأ يجب أن تجيب عن ثلاثة أسئلة:

ماذا حدث؟

لماذا؟

ماذا أفعل الآن؟

25. صمم حالات المتجر كلها وليس الحالة المثالية فقط

المصمم الجيد لا يصمم:

Product Available

فقط.

بل يصمم:

Available
Out of Stock
Low Stock
Coming Soon
Disabled
Loading
Error
Discount
Expired

والأمر نفسه للسلة والدفع.

السلة مثلًا:

سلة فارغة
↓
سلة تحتوي منتجات
↓
منتج نفد أثناء الطلب
↓
تغير السعر
↓
تغير الكمية
↓
انتهاء الخصم

هذه الحالات هي التي تكشف جودة النظام الحقيقي.

26. اجعل المتجر جاهزًا للربط مع الخدمات الخارجية

من الخطأ بناء المتجر بطريقة تجعله مرتبطًا مباشرة بكل خدمة.

فكر في طبقة تكامل:

المتجر
   │
   ├── Payment Gateway
   ├── Shipping
   ├── E-Invoicing
   ├── SMS
   ├── Email
   └── Analytics

بهذه الطريقة تستطيع تغيير مزود خدمة دون إعادة بناء المتجر بالكامل.

27. استخدم Webhooks بدل الاعتماد على المتصفح

الخدمات الخارجية مثل الدفع والشحن يمكن أن ترسل تحديثات إلى متجرك.

مثال:

Payment Gateway
      ↓
Webhook
      ↓
/api/webhooks/payment
      ↓
Verify Signature
      ↓
Update Order

لكن لا تقبل أي Webhook مباشرة.

يجب التحقق من:

• التوقيع.
• المصدر.
• رقم العملية.
• حالة العملية.
• عدم تكرار الحدث.

28. تعامل مع Webhooks بطريقة Idempotent

هذه كلمة تقنية مهمة جدًا للمطور.

قد ترسل خدمة الدفع نفس الحدث أكثر من مرة.

لذلك يجب ألا يؤدي وصول الحدث مرتين إلى:

إصدار فاتورتين

أو:

إرسال الطلب مرتين

أو:

خصم المخزون مرتين

استخدم معرفًا فريدًا للحدث أو العملية وتأكد من أنك تعاملت معه سابقًا.

29. الأمان يبدأ من لوحة التحكم

لا تركز فقط على واجهة العميل.

لوحة الإدارة تحتوي على بيانات أكثر حساسية.

لذلك فكر في:

• كلمات مرور قوية.
• 2FA عندما يكون مناسبًا.
• صلاحيات المستخدمين.
• سجل العمليات.
• حماية API.
• انتهاء الجلسات.
• حماية CSRF بحسب البنية.
• التحقق من المدخلات.
• منع رفع الملفات الخطرة.
• تحديث النظام والإضافات.

30. لا تخزن بيانات البطاقات بنفسك

إذا كنت تستخدم بوابة دفع، فلا تجعل متجرك يتعامل مباشرة مع بيانات البطاقات إلا إذا كان نموذج العمل والبنية والمتطلبات التنظيمية تبرر ذلك.

الأفضل عادةً أن تستخدم حلول الدفع المخصصة والآمنة التي يوفرها مزود الدفع.

بهذا تقلل من تعقيد النظام والمخاطر المرتبطة بالتعامل المباشر مع بيانات الدفع.

31. اجعل SEO جزءًا من بناء المتجر

لا تنتظر حتى ينتهي المتجر لتبدأ SEO.

من البداية اهتم بـ:

URL
Title
Meta Description
Canonical
Sitemap
Robots
Structured Data
Breadcrumb
Product Schema

وخصوصًا المنتجات.

صفحة المنتج يجب أن تكون صفحة يمكن لمحرك البحث فهمها، وليس مجرد صورة وسعر.

32. لا تحذف المنتج فورًا إذا انتهى

إذا انتهى المنتج، لا يعني ذلك أن عليك حذف الصفحة.

قد تكون الصفحة:

• موجودة في Google.
• لها روابط خارجية.
• محفوظة لدى العملاء.
• مرتبطة بحملات.
• لها تاريخ ومراجعات.

بدل الحذف العشوائي، حدد السيناريو المناسب:

المنتج سيعود
→ أبقِ الصفحة وأظهر "غير متوفر"

المنتج انتهى نهائيًا
→ وجه المستخدم إلى بديل مناسب عند الحاجة

المنتج استبدل بإصدار جديد
→ استخدم التحويل المناسب إذا كان منطقيًا

33. لا تنسَ اللغة الإنجليزية إذا كان الجمهور يحتاجها

إذا كان المتجر يستهدف جمهورًا متعدد اللغات، فلا تجعل الترجمة مجرد:

Translate Button

صمم بنية الموقع من البداية لتدعم:

/ar/
 /en/

أو البنية المناسبة لمنصتك.

وخطط للترجمة في:

• المنتجات.
• التصنيفات.
• الفلاتر.
• Checkout.
• رسائل النظام.
• البريد.
• SEO.
• البيانات المنظمة.

34. أنشئ لوحة تحكم تفهم صاحب المتجر

صاحب المتجر لا يريد أن يرى قاعدة بيانات.

يريد أن يعرف:

مبيعات اليوم
عدد الطلبات
الطلبات الجديدة
الطلبات غير المدفوعة
المنتجات قليلة المخزون
المنتجات الأكثر مبيعًا
الطلبات التي تحتاج إجراء

ابدأ لوحة التحكم من هذه الأسئلة.

35. أضف سجلًا للأحداث المهمة

من المفيد أن يعرف صاحب المتجر:

تم إنشاء الطلب
تم الدفع
تم تغيير حالة الطلب
تم تعديل السعر
تم تعديل المخزون
تم إلغاء الطلب
تم إنشاء الفاتورة
تم إرسال الطلب للشحن

مع تسجيل:

من قام بالعملية؟
متى؟
ماذا تغير؟

هذا مفيد جدًا عند حدوث مشكلة.

36. اختبر المتجر كأنك عميل سعودي

قبل إطلاق المتجر، نفذ اختبارًا حقيقيًا.

خذ هاتفًا.

وادخل إلى الموقع لأول مرة.

لا تستخدم حساب المدير.

نفذ عملية:

البحث
↓
اختيار منتج
↓
إضافة للسلة
↓
تعديل الكمية
↓
إدخال الجوال
↓
العنوان
↓
الشحن
↓
الدفع
↓
استلام التأكيد

وسجل كل شيء جعلك تتوقف أو تفكر:

ماذا أفعل الآن؟

كل نقطة تردد هي فرصة للتحسين.

37. قائمة اختبار قبل إطلاق أي متجر سعودي

استخدم القائمة التالية مع كل مشروع:

التصميم

•  التصميم RTL صحيح.
•  الموقع متجاوب.
•  الأزرار مناسبة للجوال.
•  الخط العربي واضح.
•  الصور محسنة.
•  حالات الخطأ مصممة.
•  حالات Loading مصممة.
•  حالة Empty State مصممة.

المنتجات

•  الاسم واضح.
•  السعر واضح.
•  التوفر واضح.
•  الخيارات تعمل.
•  الصور محسنة.
•  الوصف والمواصفات واضحة.
•  المنتجات غير المتوفرة لها حالة مناسبة.

Checkout

•  الجوال يعمل.
•  العنوان واضح.
•  الشحن واضح.
•  الإجمالي واضح.
•  وسائل الدفع تعمل.
•  فشل الدفع له سيناريو واضح.
•  إعادة المحاولة لا تنشئ طلبًا مكررًا.

الطلبات

•  Payment Status منفصل عن Order Status.
•  Webhooks تعمل.
•  الأحداث المتكررة لا تسبب عمليات مكررة.
•  المخزون يتحدث بطريقة صحيحة.
•  الفاتورة مرتبطة بالطلب.

الخصوصية

•  سياسة الخصوصية موجودة.
•  الشروط والأحكام موجودة.
•  سياسة الشحن واضحة.
•  سياسة الاسترجاع واضحة.
•  البيانات التي يجمعها المتجر معروفة.
•  صلاحيات الوصول للبيانات محددة.

السعودية

•  العملة ريال سعودي عند استهداف السوق المحلي.
•  تجربة الجوال مناسبة.
•  العربية صحيحة.
•  رقم الجوال يعالج بشكل مناسب.
•  العنوان منظم.
•  الفوترة الإلكترونية مدمجة وفق متطلبات النشاط والحالة النظامية.
•  وسائل الدفع مناسبة للسوق المستهدف.
•  مراجعة متطلبات وزارة التجارة تمت.

38. البنية التي أنصح بها كمصمم ومتاجر

إذا كنت ستبني متجرًا سعوديًا من الصفر، فكر فيه بهذه الصورة:

                 ┌──────────────┐
                 │    العميل    │
                 └──────┬───────┘
                        │
                        ▼
              ┌──────────────────┐
              │  واجهة المتجر    │
              │ RTL / Responsive │
              └────────┬─────────┘
                       │
          ┌────────────┼────────────┐
          ▼            ▼            ▼
      المنتجات       السلة       الحساب
          │            │            │
          └────────────┼────────────┘
                       ▼
                  Checkout
                       │
          ┌────────────┼────────────┐
          ▼            ▼            ▼
       الدفع        الشحن       الفوترة
          │            │            │
          └────────────┼────────────┘
                       ▼
                 Order System
                       │
          ┌────────────┼────────────┐
          ▼            ▼            ▼
       العميل       الإدارة      التحليلات

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

39. ما الذي يجب أن تنفذه فعليًا في مشروعك؟

ابدأ بهذا الترتيب:

المرحلة الأولى — UX

صمم:

الرئيسية
التصنيفات
البحث
صفحة المنتج
السلة
Checkout
تأكيد الطلب
الحساب

المرحلة الثانية — البيانات

أنشئ:

Users
Products
Categories
Orders
Order Items
Payments
Addresses
Coupons
Invoices
Shipping

المرحلة الثالثة — التكامل

اربط:

Payment
Shipping
E-Invoicing
Email
SMS
Analytics

المرحلة الرابعة — الحماية

أضف:

Authentication
Authorization
Validation
Rate Limiting
Logs
Backups
Webhook Security

المرحلة الخامسة — الأداء

اختبر:

Mobile
Desktop
Slow Network
Large Images
Many Products
Large Cart
Concurrent Users

المرحلة السادسة — الإطلاق

قبل إطلاق المتجر:

Test Order
Test Payment
Test Failed Payment
Test Refund
Test Cancellation
Test Invoice
Test Shipping
Test Email
Test Mobile
Test Privacy
Test SEO

الخلاصة

المتجر السعودي الجيد ليس متجرًا مترجمًا إلى العربية.

إنه متجر مصمم من البداية ليفهم طريقة استخدام العميل السعودي.

ابدأ من الجوال.

اجعل العربية أصلية في التصميم.

اجعل البحث يفهم اللغة.

اجعل العنوان منظمًا.

اجعل الدفع واضحًا.

افصل حالة الدفع عن حالة الطلب.

تعامل مع Webhooks بطريقة صحيحة.

اربط الفوترة الإلكترونية وفق المتطلبات المعمول بها.

لا تجمع بيانات لا تحتاجها.

اجعل سياسة الخصوصية واضحة.

صمم حالات الخطأ والنفاد والتحميل.

ثم اختبر المتجر بنفسك كعميل حقيقي.

وأهم قاعدة:

لا تصمم متجرًا لكي يبدو جميلًا فقط؛ صممه لكي يعمل بشكل صحيح عندما يبدأ العميل بالشراء.

وهنا يظهر الفرق بين مصمم ينشئ صفحات، ومصمم يبني تجربة تجارة إلكترونية متكاملة.

مراجع رسمية للمطور

يمكن الرجوع إلى دليل وزارة التجارة الخاص بنظام التجارة الإلكترونية والأدلة المتعلقة بالمتاجر الإلكترونية عند مراجعة المتطلبات الخاصة بالمتجر.

كما توفر هيئة الزكاة والضريبة والجمارك دليلًا تقنيًا مبسطًا للفوترة الإلكترونية، يتضمن متطلبات الفاتورة والبيانات والجوانب التقنية والأمنية.

وتوفر الهيئة كذلك مواصفات الفاتورة الإلكترونية وقاموس البيانات والمعايير التقنية الخاصة بها.

أما فيما يتعلق بالبيانات الشخصية، فتتوفر لدى سدايا إرشادات رسمية لإعداد وتطوير سياسة الخصوصية ومتطلبات نظام حماية البيانات الشخصية.