تصميم صفحة المنتج: 12 عنصراً تحوّل المتصفح إلى مشترٍ
تصميم صفحة المنتج هو المكان الذي يكسب فيه المتجر ماله أو يسرّبه في صمت. صممت أكثر من ألف متجر على سلة وزد ووردبريس وأوبن كارت وشوبيفاي وإيزي أوردر، والنمط نفسه يتكرر أمامي في كل مرة: ثلاثة أسابيع تُنفَق على الصفحة الرئيسية، وبعد ظهيرة واحدة على الصفحة التي تستقبل الطلب فعلاً.
الصفحة الرئيسية تُعرّف بك، وصفحة القسم تضيّق الخيارات، أما صفحة المنتج فهي الشاشة الوحيدة التي يتخذ عندها أحدهم قراراً. وهذه هي العناصر الاثنا عشر التي أضعها فيها، مرتّبة بالترتيب الذي يقابلها به المتسوق.
ما الذي يجب أن يفعله تصميم صفحة المنتج فعلاً
صفحة المنتج ليست كتيّباً دعائياً، بل مقابلة قصيرة تصل أسئلتها بالترتيب نفسه في كل مرة: هل هذا ما كنت أبحث عنه؟ وكيف يبدو على حقيقته؟ وكم يكلّفني بكل شيء؟ وأي خيار أختار؟ ومتى يصل؟ وماذا لو جاء خطأ؟ وهل أستطيع أن أسأل أحداً قبل أن أدفع؟
أجِب عن هذه الأسئلة بهذا التسلسل، وستذوب معظم مشكلات التحويل من تلقاء نفسها. وفي المتاجر التي أصممها لمصر والخليج يصل معظم الزوار من الهاتف، وكثير منهم يهبط مباشرة من إعلان على إنستجرام أو سناب شات إلى صفحة المنتج — أي أنها غالباً أول صفحة يراها أحد من متجرك كله، فعليها أن تؤدي دور الصفحة الرئيسية أيضاً.
العناصر الاثنا عشر في تصميم صفحة المنتج الذي يبيع
1. معرض الصور — وتكبير يعمل فعلاً
على الإنترنت الصورة هي المنتج، فمعرض الصور وحده يحمل التجربة المادية كاملة. اطلب خمس لقطات على الأقل: المنتج من الأمام، وحجمه بجانب شيء مألوف، وملمسه من قرب، وما بداخل العلبة، ثم المنتج أثناء الاستخدام. وحافظ على خلفية واحدة وقصّ واحد عبر الكتالوج كله — فالشبكة التي تجلس فيها كل صورة بشكل مختلف تبدو غير جادة قبل أن يُقرأ فيها حرف واحد. استخدم تكبير لايت بوكس على الشاشات الكبيرة، وتأكد أن التكبير بالإصبعين ما زال يعمل على الموبايل، وصوّر بالوضع الرأسي حتى تملأ الصورة شاشة الهاتف.
2. كتلة القرار قبل أول تمرير
كل ما يظهر على الهاتف قبل أول تمرير: صورة واحدة، والعنوان، والسعر، وإشارة إلى أن هناك خيارات في الأسفل. فإن لم يستطع المتسوق أن يعرف من تلك الشاشة ما هذا المنتج وكم يكلّف تقريباً، فلن يبدأ التمرير من الأصل. انقل لافتات الشحن ومسار التنقل وشرائط الإعلانات وأيقونات التواصل إلى ما تحتها — كن قاسياً في الأعلى وكريماً فيما دونه.
3. العنوان والوصف القصير
تفشل العناوين عادةً في اتجاه من اثنين: كود مورّد جافّ، أو فقرة محشوّة بالكلمات المفتاحية. اكتب نوع المنتج ثم الخاصية الأهم ثم الخيار، قصيراً بما يكفي ألا يلتفّ إلى ثلاثة أسطر على الهاتف. وتحته ضع سطر وصف واحداً — من ثماني إلى خمس عشرة كلمة تقول لمن صُنع هذا المنتج. واستخدم الكلمات التي ينطقها العملاء أنفسهم، لأنها الكلمات ذاتها التي يكتبونها في شريط البحث عندك.
4. وضوح السعر والعرض
كلما أخبرني تاجر أن الناس يضيفون إلى السلة ثم يختفون، كان أول ما أفحصه هو ما إذا كان الرقم المكتوب في صفحة المنتج هو نفسه الرقم الظاهر في السلة. اعرض سعراً واحداً مهيمناً؛ ويجلس الخصم بجانبه أصغر ومشطوباً، ولا يكون أبداً أكبر من السعر الذي تتقاضاه فعلاً. واذكر صراحةً إن كانت الضريبة مشمولة — المتسوق السعودي يبحث عن هذا السطر تحديداً — واكتب حدّ الشحن المجاني هنا بدل أن تحتفظ بالمفاجأة حتى صفحة الدفع. وتخلَّ عن عدّادات العدّ التنازلي التي تعود إلى نقطة البداية مع كل تحديث للصفحة؛ فهي تكلّفك من الثقة أكثر مما تشتريه لك.
5. اختيار خيارات المنتج بلا طرق مسدودة
هنا تنكسر معظم الصفحات: يختار المتسوق لوناً ثم مقاساً، ولا يكون التركيب موجوداً أصلاً، فلا تشتكي الواجهة إلا عند الزر. اعرض الخيارات كعيّنات مرئية بدل القائمة المنسدلة ما دامت أقل من ثمانية تقريباً، وأعطِ كل لون عيّنة واسماً معاً، لأن أسماء الألوان لا تنتقل جيداً بين العربية والإنجليزية. وبمجرد اختيار الخيار الأول، عطّل التركيبات المستحيلة بدل أن تعترض عليها لاحقاً. بدّل الصورة الرئيسية مع تغيّر اللون، وحدّث السعر حين يغيّره المقاس، ولا تجعل زر الإضافة إلى السلة قابلاً للضغط قبل أن يُختار خيار إلزامي.
6. المخزون وتوقّع موعد التوصيل
سؤال «متى يصل؟» يُطرح في الثانية التي تسبق الضغط على الزر، وإذا ظلت الصفحة صامتة فإما أن يراسلك المتسوق أو يغادر. ضع سطراً واحداً بجوار الزر: حالة المخزون، ومدة التوصيل بالأيام حسب المنطقة — المدن الرئيسية، وبقية الدولة، ثم باقي دول الخليج. التجار يقاومون الالتزام برقم، لكن مدى زمنياً صادقاً ومتحفظاً يطمئن حيث يقلق الصمت — ويوفّر عليك رسائل «أين طلبي؟» لاحقاً. واحتفظ بعبارة «بقي عدد قليل» للحظة التي تكون فيها صحيحة.
7. زر الإضافة إلى السلة نفسه
زر أساسي واحد، بعرض الشاشة كاملاً على الموبايل، مكتوب عليه ما سيحدث فعلاً — لا «إرسال»، ولا أيقونة عربة وحيدة بلا كلمة. ويجب أن يكون أعلى عنصر تبايناً على الشاشة، وهذا يعني أن لون علامتك لا يمكن أن يكون مشغولاً في ستة مكوّنات أخرى في الوقت نفسه. وامنحه حالة ضغط وحالة تحميل حقيقيتين: على اتصال ضعيف، الزر الذي لا يردّ يُضغط أربع مرات. وإن وضعت «اشترِ الآن» بجانبه، فاجعل أحدهما مهيمناً بوضوح.
8. إشارات الثقة لمتسوّق الخليج
عند هذه النقطة يكون المتسوق قد توقّف عن تقييم المنتج وبدأ يقيّمك أنت. وأربعة أشياء تحسم الأمر، وكلها تنتمي إلى هذه الصفحة لا إلى تذييل الموقع.
- علامات الدفع التي تقبلها فعلاً — البطاقات ومدى وآبل باي وأي خيارات تقسيط تدعمها منصتك. شعارات حقيقية فقط؛ فشارة عامة مكتوب عليها «دفع آمن» لا تقنع أحداً.
- سطر واحد عن الاسترجاع والاستبدال، بعدد الأيام مكتوباً، وموصول بالسياسة الكاملة.
- الدفع عند الاستلام، مذكوراً بوضوح إن كنت تتيحه. فبالنسبة لمشترٍ يشتري منك لأول مرة، هو القرار كله في كثير من الأحيان.
- رابط واتساب على بُعد إبهام من السعر. الناس هنا يريدون أن يسألوا إنساناً قبل أن يدفعوا، وفي خبرتي يكسب المتجر الذي يردّ بسرعة الطلبَ الذي يخسره متجر أجمل منه لكنه صامت.
والثقة بصرية أيضاً، ولهذا أبني عادةً المتجر والهوية معاً — وهي عملية شرحتها بالتفصيل في الهوية البصرية للتجارة الإلكترونية.
9. الوصف الطويل وجدول المواصفات
الوصف موجّه إلى المتسوق الذي كاد يقتنع، وهو يبحث إما عن سبب يقول به «نعم» أو عن التفصيلة التي تُسقط المنتج من حسابه. قسّمه إلى جزأين: وصف قصير سهل المسح بالعين يتناول الفائدة وطريقة الاستخدام وما تتضمنه العلبة، ثم جدول مواصفات للأبعاد والوزن والخامة والمكوّنات أو الضمان. الجداول تُقرأ، أما الفقرات فتُمسح بالعين مروراً. واكتب النص العربي بالعربية بدل أن تترجم الإنجليزي، وتحقق من أن الوحدات وأرقام الموديلات لا تنقلب حين ينعكس التخطيط — وهو خلل موجود ضمن قائمة أخطاء التصميم بالـRTL. ولا تُخفِ المواصفات أبداً خلف لوحة مكتوب عليها «المزيد».
10. التقييمات والدليل الاجتماعي، بأمانة
المتسوقون يثقون بالمتسوقين الآخرين، وهم بارعون على نحو غير عادي في كشف قسم تقييمات مزيّف؛ فصفحة مليئة بتعليقات خمس نجوم متطابقة وسليمة نحوياً تجرّ معها كل ما حولها إلى أسفل. اعرض التقييمات التي لديك فعلاً، بتواريخها — وإن كانت ثلاثة فاعرض ثلاثة. وصور العملاء تساوي أكثر من جملهم، والردّ العلني على التقييم الناقد يبني مصداقية أكبر من عشرين مجاملة مجهولة. وإن لم يكن لديك أي تقييم بعد، فاستخدم بديلاً صادقاً مثل معرض لمنشورات عملاء حقيقيين.
11. البيع المتقاطع والمنتجات المرتبطة
المنتجات المرتبطة تقدّم بديلاً إن لم يكن هذا المنتج مناسباً تماماً، وترفع قيمة السلة إن كان مناسباً. ضعها أسفل كتلة القرار، لا داخلها أبداً — فلا شيء فوق الزر ينبغي أن ينافس الزر. واستخدم شريطين منفصلين: «أكمل المجموعة» للمنتجات المكمّلة حقاً، و«قد يعجبك أيضاً» للبدائل في نطاق السعر نفسه. ثم راجع ما ترشّحه منصتك افتراضياً؛ فأنا أجد بانتظام ساعة رجالية مقترحة أسفل سيروم للوجه.
12. شريط الشراء الثابت على الموبايل
صفحة المنتج الجيدة طويلة، فحين ينتهي أحدهم من قراءة المواصفات والتقييمات يكون الزر قد ابتعد كثيراً خارج الشاشة، والعودة بالتمرير إلى الأعلى دعوة مفتوحة لإعادة التفكير. والشريط الرفيع المثبّت أسفل شاشة الهاتف يحلّ هذا. أظهره فقط بعد أن يخرج الزر الأساسي من مجال الرؤية، وضع بداخله السعر الحالي والخيار الذي اختاره المتسوق. وإن لم يُختر شيء بعد، فالضغط عليه يجب أن يفتح قائمة الخيارات لا أن يطلق رسالة خطأ. أبقِه رفيعاً، وتأكد أنه لا يجلس فوق أيقونة المحادثة عندك.
«لا شيء فوق زر الإضافة إلى
السلة ينبغي أن ينافس زر
الإضافة إلى السلة.»
ما الذي يجب حذفه من صفحة منتج المتجر الإلكتروني
معظم الصفحات التي يُطلب مني إصلاحها لا تحتاج إلى المزيد، بل إلى الأقل. وهذه أول ما أحذفه منها:
- عارض الصور ذاتي الدوران داخل كتلة القرار — فهو يحرّك الشيء نفسه الذي يفحصه المتسوق في تلك اللحظة.
- نوافذ الخصم المنبثقة. الزائر أظهر نيّته بالفعل؛ والنافذة المنبثقة تقاطع قراراً بدل أن تبدأه.
- حكاية العلامة التجارية أعلى الصفحة. قصتك تستحق صفحة «نبذة عنا»، لا أن تكون حاجزاً أمام السعر.
- أيقونات السوشيال ميديا بجوار الزر. لقد دفعت لتجلب هذا الشخص إلى هنا؛ فلا تركّب باباً يعيده إلى إنستجرام بجانب الخزينة.
- خمس دعوات لإجراء بالوزن البصري نفسه، وفيديو يعمل تلقائياً بالصوت.
- البقايا المنسيّة: رابط جدول مقاسات لا يؤدي إلى شيء، وأداة تعلن «0 تقييم»، وتبويب ما زال مكتوباً عليه «قريباً».
قائمة تحقق لتصميم صفحة منتجك
افتح أكثر منتجاتك مبيعاً على هاتفك أنت، وامشِ على هذه القائمة بصدق.
- خمس صور أو أكثر، بقصّ موحّد، والتكبير يعمل على الهاتف وعلى سطح المكتب.
- العنوان والسعر وبداية الخيارات ظاهرة قبل أول تمرير.
- سعر واحد مهيمن، مع ذكر الضريبة وحالة الشحن بالكلمات لا بالتلميح.
- عيّنات مرئية للخيارات، والتركيبات المستحيلة معطّلة لا مرفوضة عند الزر.
- الصورة الرئيسية والسعر يُحدَّثان في اللحظة التي يتغيّر فيها الخيار.
- حالة المخزون ومدة التوصيل مكتوبتان بجوار الزر مباشرة.
- زر إضافة إلى السلة أساسي واحد، بحالة ضغط وحالة تحميل حقيقيتين.
- علامات الدفع، وسطر الاسترجاع، والدفع عند الاستلام، ورابط واتساب.
- وصف قصير مع جدول مواصفات حقيقي، مكتوب بالعربية أصلاً لا مترجماً.
- تقييمات صادقة بتواريخها، أو بديل صادق عنها.
- منتجات مرتبطة أسفل كتلة القرار، في شريطين منفصلين.
- شريط شراء ثابت على الموبايل يعكس الخيار الذي اختاره المتسوق.
من أين تبدأ
إن كان كتالوجك كبيراً فلا تُعِد تصميم كل الصفحات دفعة واحدة. أعِد بناء أكثر منتجاتك مبيعاً وفق قائمة التحقق، وعِش معه أسبوعين، ثم اجعل النسخة الفائزة قالباً لبقية المنتجات. والأسلوب نفسه لا يتغير على متجر سلة أو على زد أو على ووكومرس — كل ما يتغير هو محرّر القالب، وقد قارنت بينها في سلة أم زد أم شوبيفاي أم ووردبريس.
ثم أجرِ الاختبار الذي لا تُغني عنه أي مراجعة تصميم: افتح متجرك على هاتفك أنت، ببيانات الجوال لا بالواي فاي، واشترِ شيئاً منه. كل ثغرة في الصفحة ستكشف عن نفسها خلال تلك الدقيقتين.
أتريد عيناً ثانية على صفحتك؟ أرسل لي رابط صفحة منتجك وسأخبرك بما كنت سأغيّره أولاً — راسلني على واتساب. ويمكنك أيضاً تصفّح المتاجر التي صممتها في صفحة أعمالي، أو أخبرني بما تحتاجه.
اقرأ بعدها