كيف تصمم متجر سلة يبيع فعلاً
تصميم متجر سلة ليس اختياراً لقالب. إنه سلسلة قرارات حول ما يحتاج المتسوق السعودي أو الخليجي أن يراه قبل أن يأتمنك على دفعة — وما الذي تحذفه حتى يتمكن من رؤيته فعلاً. صممت مئات المتاجر على سلة، ولاحظت أن المتاجر التي تبيع نادراً ما تكون هي صاحبة أكبر عدد من الأقسام في الصفحة الرئيسية.
سلة كريمة منذ اللحظة الأولى: متجر يعمل ومستضاف وعربي أولاً من اليوم الأول. أما المسافة بين متجر يعمل ومتجر يبيع، فهي الجزء الذي لا يسلّمك إياه أحد.
من أين يبدأ تصميم متجر سلة: ما تمنحه لك المنصة أصلاً
كن صريحاً بشأن ما الذي تخصّصه بالضبط. منصة سلة (Salla) تتكفل بالفعل بالاستضافة والكتالوج ووسائل الدفع المحلية والشحن والفوترة الضريبية، وبلوحة تحكم عربية يستطيع عميلك إدارتها وحده، ومتجر تطبيقات يغطي ما تبقى. أنت لا تبني متجراً، بل تصوغ متجراً يعمل بالفعل.
ولهذا تحديداً تقصّر القوالب الافتراضية — فهي مصنوعة لتكون آمنة، لا لتكون متجرك أنت.
-
صُممت لتبدو مقبولة مع أي كتالوج، ما يعني أنها ليست مضبوطة على أي كتالوج بعينه.
-
الصفحة الرئيسية المبدئية ترصّ كل قسم متاح بالترتيب الذي كتبه مصمم القالب، فلا شيء له أولوية وكل شيء يزاحم غيره.
-
قوالب المنتج تفترض منتجاً بسيطاً. أعطها ستة خيارات وجدول مقاسات وسترى الترنّح بعينك.
وإن كنت لا تزال تختار منصة بدل أن تخصّص واحدة، فاقرأ أولاً مقارنتي بين سلة وزد وشوبيفاي ووردبريس — الاختيار مرتين أغلى من التصميم مرتين.
تخصيص قالب سلة: ابدأ بالحذف
محرّر سلة يتيح لك إعادة ترتيب الأقسام وإخفاءها وتغيير مظهرها دون لمس سطر برمجي واحد، وقالب Twilight يفتح الباب أمام المطوّر ليذهب أبعد. في الحالتين، الجولة الأولى ينبغي أن تكون طرحاً لا جمعاً: أخفِ كل قسم لا تستطيع تبريره بجملة واحدة، ثم ابنِ من جديد صعوداً بالأربعة أو الخمسة التي تستحق مكانها.
أقسام الصفحة الرئيسية التي تستحق مكانها فعلاً
الصفحة الرئيسية ليست كتيّب تعريف. مهمتها الوحيدة أن تنقل الزائر إلى قسم أو صفحة منتج بأسرع ما يمكن. وهذه هي الأقسام التي أُبقي عليها في كل متجر تقريباً:
-
بانر رئيسي واحد. رسالة واحدة وعرض واحد وزر واحد. البانر الثابت يتفوق على السلايدر، لأن البانر الثابت هو دائماً البانر الذي اخترته أنت.
-
مداخل الأقسام. من أربع إلى ثماني بطاقات بأسماء حقيقية وصور حقيقية — لا أيقونات عامة.
-
الأكثر مبيعاً. المتسوق الذي لا يعرف ما يريد سيقبل ترشيحاً، وهذا أرخص ترشيح يمكنك تقديمه.
-
شريط التوصيل والإرجاع. كم يستغرق الشحن، وكم يكلّف، وهل الدفع عند الاستلام متاح، وكيف يصل العميل إلى إنسان يكلّمه.
أما ما يطلبه التجّار باستمرار ولا يصل إليه أحد بالتمرير فهو: البانر المتحرك بخمس شرائح؛ وشبكة «لماذا تختارنا» التي تَعِد بشحن سريع ودفع آمن وجودة عالية (وكل متجر على الإنترنت يدّعي الثلاثة)؛ وخلاصة سوشيال ميديا بطيئة تسحب الزيارات بعيداً؛ وصندوق النشرة البريدية الموضوع قبل أن يرى الزائر منتجاً واحداً.
وإن كانت الصفحة الرئيسية ما زالت تستعير ألوانها من العرض التجريبي للقالب، فالمشكلة أعلى من التخطيط — ابدأ من الهوية، وقد تناولتها في من الشعار إلى التغليف.
«الصفحة الرئيسية ليست كتيّب تعريف.
إنها لافتة إرشادية — وإن لم توصل
المتسوق إلى صفحة منتج بنقرة واحدة،
فهي زينة.»
بنية الأقسام: صمّم لكتالوج سيتضاعف ثلاث مرات
معظم المتاجر التي أفتحها تنطلق بعشرين منتجاً وتخطط لمئتين. والتنقّل المبني لعشرين ينهار عند المئتين، وإعادة بنائه لاحقاً تعني روابط مكسورة وعميلاً عائداً لا يعثر على ما اشتراه المرة الماضية.
-
سمِّ الأقسام بلغة العملاء، لا بلغة فواتير مورّدك.
-
مستويان للتنقّل كحد أقصى. وكل ما تريد جعله مستوى ثالثاً هو فلتر، لا قسم.
-
امنح كل قسم سطر تعريف قصيراً وصورة. الشبكة بلا عنوان لا تخبر المتسوق بشيء عن المكان الذي وصل إليه.
-
ابنِ الفلاتر قبل أن تحتاجها — السعر والمقاس واللون والعلامة والتوفّر — ورتّب حسب الأكثر مبيعاً لا حسب الأحدث.
-
لا تُطلق أبداً قسماً جامعاً باسم «منتجات» — هناك تحديداً يموت العرض التجاري.
-
أضف مجموعة ثانية من التصنيفات مبنية على المناسبات أو المشكلات — هدايا، رمضان، بشرة حساسة — فوق الكتالوج نفسه. فالناس يتسوّقون بحسب الموقف أكثر مما يتسوّقون بحسب القسم.
يمكنك رؤية هذا في المتاجر المعروضة في صفحة أعمالي: ففي المتاجر متعددة الأقسام، كان لا بد من تصميم نظام التنقّل قبل أن تُرسم الصفحة الرئيسية أصلاً.
صفحة المنتج: ما يتحقق منه المتسوق الخليجي قبل «أضف إلى السلة»
هنا إمّا أن يسدّد المتجر على سلة تكلفته، وإمّا أن يسرّب عملاءه بهدوء. المشتري القادم من إعلان على سناب شات يمرّ على قائمة تحقّق ذهنية قصيرة، وكل بند بلا إجابة سببٌ كافٍ لإغلاق التبويب.
الصور
من خمس إلى سبع صور لكل منتج: لقطة نظيفة للعبوة، وواحدة أثناء الاستخدام، وواحدة تُظهر الحجم بمقارنته بشيء مألوف، وللمنتجات التي تُؤكل أو تُوضع على البشرة صورة واضحة لظهر العبوة. وحافظ على القصّ والخلفية والإضاءة نفسها في الكتالوج كله، وإلا قُرئت الشبكة كسوق يجمع غرباء.
الخيارات والمقاسات
اعرض الألوان كعيّنات والمقاسات كأزرار، لا كقائمة منسدلة تخفي حجم الاختيار الذي تقدّمه. وأبقِ الخيارات النافدة ظاهرة ومعطّلة: الغياب يبدو كخلل تقني، أما المقاس الباهت فيبدو كمتجر مزدحم. وانشر جدول مقاسات حقيقياً بالسنتيمتر وبالعربية، فـ«مقاس ستاندرد» ليس مقاساً.
التوصيل والسعر والثقة
-
اذكر كم يوماً يستغرق التوصيل إلى مدينة المتسوق. «شحن سريع» ليست معلومة.
-
وضّح هل السعر شامل ضريبة القيمة المضافة وكم سيضيف الشحن — قبل السلة لا داخلها.
-
ضع سياسة الإرجاع في جملة واحدة أسفل زر الإضافة إلى السلة، لا على بُعد ثلاث نقرات في صفحة داخل الفوتر.
-
اعرض وسائل الدفع كشعارات — مدى وApple Pay والبطاقة والدفع عند الاستلام والتقسيط. المتسوق الخليجي يبحث عنها بعينه كما يبحث عن السعر تماماً.
-
امنحه طريقة للسؤال دون أن يغادر: زر واتساب في صفحة المنتج يجيب عن الاعتراض الذي فاتَ نصّك.
وقد فكّكت هذه الصفحة عنصراً عنصراً في تصميم صفحة المنتج: 12 عنصراً تحوّل المتصفح إلى مشترٍ — وهي الصفحة الوحيدة التي تستحق أن تبالغ في الاستثمار فيها.
الدفع: كم خطوة يمكنك حقاً الاكتفاء بها
سلة تتولّى معظم آليات الدفع، وهذه نعمة. ما تملكه أنت هو حجم ما تطلبه — وهنا بالضبط يقع الضرر.
اطلب اسماً ورقم جوال ومدينة وعنواناً بموقع على الخريطة. هذا طلب مكتمل. ولا تطلب أبداً في عملية شراء أولى:
-
حساباً مسجّلاً قبل الدفع. الشراء كزائر موجود لسبب وجيه.
-
رقم هوية أو تاريخ ميلاد أو رقم هاتف ثانٍ.
-
سؤال «كيف سمعت عنا؟» كحقل إلزامي.
-
صندوق كوبون منسّق ليكون أبرز عنصر في الصفحة. إنه يرسل الناس للبحث عن كود لن يجدوه، وكثير منهم لا يعود.
وفي صفحة السلة: دع الناس يغيّرون الكمية دون إعادة تحميل كاملة، واعرض تكلفة الشحن قبل الخطوة الأخيرة. فالتكلفة التي تظهر في النهاية هي أضمن طريقة لخسارة طلب كنت قد ربحته بالفعل.
تصميم متجر سلة للموبايل أولاً يعني التصميم للإبهام
تكاد كل زيارات سلة التي تابعتها تصل من الهاتف، غالباً من إنستجرام أو سناب شات أو تيك توك. لذلك فإطار الهاتف هو التصميم، أما سطح المكتب فهو النسخة المكيَّفة عنه.
-
ضع الإجراءات الأساسية في النصف السفلي من الشاشة. ففي هاتف كبير، الزاويتان العلويتان أصعب مكان يضطر الإبهام للوصول إليه.
-
دع شريطاً ثابتاً يحمل السعر وزر الإضافة إلى السلة يرافق المتسوق وهو ينزل في صفحة المنتج.
-
امنح مناطق اللمس حجماً ومسافات حقيقية. العيّنات المرصوصة كتفاً بكتف تُنتج اختيارات خاطئة، والاختيارات الخاطئة تتحوّل إلى مرتجعات.
-
لا تدمج النص داخل صورة البانر أبداً. فهو ينكسر على الشاشات الضيقة، ولا يمكن ترجمته، ومحركات البحث لا تقرأ منه حرفاً واحداً.
-
أبقِ البحث ظاهراً في الهيدر، لا مخبأً خلف أيقونة، بمجرد أن يتجاوز الكتالوج بضع عشرات من المنتجات.
ثم اختبر كما سيختبر عميلك: هاتف أندرويد متوسط الفئة، بيد واحدة، وعلى بيانات الجوال — لا على شاشة سبع وعشرين بوصة في غرفة مظلمة.
الخط العربي واتجاه RTL داخل قوالب سلة
سلة عربية أولاً، لكن معظم القوالب لا تزال ترث مقياس خطوط مصمّماً للنص اللاتيني ثم تصبّ العربية فيه. والنتيجة صحيحة تقنياً من اليمين لليسار، وخاطئة بصرياً.
-
امنح العربية ارتفاع سطر أكبر مما تمنحه للإنجليزية. فنص المتن العربي يتنفّس عند 1.7 إلى 1.9 تقريباً.
-
اختر عائلة خط عربية واحدة تأتي بأوزان حقيقية واستخدم تلك الأوزان. فالتعريض الوهمي يثخّن الحروف ويفسد وصلاتها.
-
لا تباعد بين الحروف العربية ولا تطبّق عليها تنسيق الأحرف الكبيرة. فلا وجود لأي منهما في الخط العربي، وكلاهما يكسره.
-
اعكس التخطيط والأيقونات الاتجاهية وخطوات التقدّم وأسهم السلايدر. ولا تعكس الشعارات ولا صور المنتجات ولا الأرقام.
-
غلّف المقاطع اللاتينية — أسماء العلامات وأكواد المنتجات وأرقام الهواتف — باتجاهها الخاص حتى تكفّ عن التشوّش داخل الجملة.
وقد جمعت أكثر ما أصادفه منها في التصميم العربي RTL: 9 أخطاء تكلّف متاجر الخليج مبيعات، وكلها تقريباً تظهر داخل قالب سلة جاهز.
قائمة تحقق قبل إطلاق تصميم متجر سلة
هذه هي القائمة التي أمرّ عليها قبل أن يصبح المتجر مباشراً؛ إنها تلتقط ما كان العميل سيجده أولاً لولاها.
-
كل منتج له خمس صور على الأقل بالقصّ والخلفية نفسها.
-
كل قسم يحمل اسماً ينطق به العميل بصوته، ولا قسم فارغ.
-
الصفحة الرئيسية جُرّبت بعرض 360 بكسل والبانر يُقرأ فيها دون تكبير.
-
زر الإضافة إلى السلة في متناول إبهام واحد في كل صفحة منتج.
-
مدة الشحن وتكلفته ظاهرتان قبل أن تبدأ خطوات الدفع.
-
سياسة الإرجاع موجودة كجملة واحدة في صفحة المنتج.
-
كل رسالة خطأ في النماذج مكتوبة بالعربية وموضوعة بجوار الحقل الذي تخصّه.
-
البحث يعيد نتيجة مفيدة مع الأخطاء الإملائية الشائعة ومع أسماء العلامات الإنجليزية المكتوبة بحروف عربية.
-
وسيلة التواصل مع المتجر — رقم واتساب وساعات العمل — على بُعد نقرة واحدة من أي مكان.
-
شخص لم يرَ المتجر من قبل يُكمل عملية شراء على هاتفه هو، بينما تراقب أنت ولا تقول شيئاً على الإطلاق.
أطلقه، ثم راقب شخصاً يستخدمه
تصميم متجر سلة الجيد ضبطُ نفسٍ في معظمه: أقسام أقل وحقول أقل وأسئلة أقل بين المتسوق وبين ما جاء من أجله. والبند الأخير في تلك القائمة هو الذي يعلّمك أكثر من غيره.
وإن كان متجرك على سلة يبدو جيداً لكنه لا يبيع، أرسل لي الرابط وأخبرني بما تبيعه — راسلني على واتساب وسأخبرك بما كنت سأغيّره أولاً. ويمكنك أيضاً الاطلاع على كيف أحدّد نطاق مشروع متجر أو استخدام صفحة التواصل.