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

تواصل مبيعات التجارة الإلكترونية في الولايات المتحدة بلوغ آفاق جديدة في عام 2018. وستواصل التجارة الإلكترونية في جميع أنحاء العالم تحقيق مكاسب قوية تصل إلى 2.3 تريليون دولار. ولكن ما الذي يجعل أحد مواقع التجارة الإلكترونية ينتصر على موقع آخر؟

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

فيما يلي دليل شامل لتصميم UX للتجارة الإلكترونية لإنشاء مواقع تجارة إلكترونية رائعة ، مع استكمال الأمثلة.

تصميم التجارة الإلكترونية من أجل الثقة والأمان

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

فيما يلي بعض الطرق التي من شأنها إيصال المصداقية:

• قم بتضمين لمحة عامة عن العمل:

  • قدم معلومات عامة
  • صور الأشخاص الذين يقفون وراء العمل
  • معلومات للتواصل
  • روابط لوسائل التواصل الاجتماعي
  • صفحة الأسئلة المتداولة (FAQ)

• انشر سياسات المتجر وتأكد من أنه ليس من الصعب جدًا العثور عليها:

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

اكتب بلغة واضحة وتجنب المصطلحات القانونية أو السياسة الداخلية.

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

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

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

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

فيما يلي بعض النصائح الأساسية لتصميم واجهة المستخدم:

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

أهمية التنقل في موقع التجارة الإلكترونية بدون احتكاك

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

تتضمن بعض الجوانب الرئيسية لتصميم مواقع التجارة الإلكترونية لسهولة التنقل ما يلي:

فئات المنتجات المحددة جيدًا

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

بحث منتوج

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

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

تصفية المنتجات

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

عرض سريع للمنتج

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

عروض خاصة

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

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

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

تقديم صور رائعة للمنتج

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

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

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

أعط فقط المقدار الصحيح من معلومات المنتج

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

توظيف التصميم المقنع

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

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

عرض المنتجات ذات الصلة والموصى بها

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

تصميم عربة التسوق

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

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

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

تصميم الخروج للتجارة الإلكترونية

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

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

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

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

ملخص

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

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

مزيد من القراءة على مدونة Toptal Design:

• التجارة الإلكترونية UX - استراتيجيات ومبادئ التصميم الأساسية
• التجارة الإلكترونية UX لتجربة الهاتف المحمول
• كيفية جذب متسوقي التجارة الإلكترونية من خلال تصميم تجربة المستخدم
• إعادة تصميم التجارة الإلكترونية: كيف أدت التغييرات الطفيفة إلى تحسينات رئيسية في UX