10 نصائح لتصميم واجهة الويب الرائعة

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

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

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

يفكر التفكير الحالي في أنه يتعين على منشئي الويب تصميم تجربة المحمول أولاً ثم ضبط تجربة سطح المكتب حسب الحاجة.

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

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

1. ملاحة رأس لزجة

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

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

2. قوائم همبرغر

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

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

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

يمكنك رؤية قائمة Hamburger في الركن الأيمن العلوي من Target.com وعلى موقع ويب Target الخاص بالجوال. يمكنك أن ترى أيضا في الصورة أدناه.

3. المنظر التمرير

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

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

4. لانهائي التمرير

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

يمكنك أن ترى ميزة مماثلة على UnderArmour.com. لسوء الحظ ، يتطلب برنامج Under Armor النقر فوق الزر "تحميل المزيد" لمشاهدة محتوى إضافي. تم تجهيز بعض مواقع الويب بآلية فتح تلقائي ستظهر لك المزيد من المحتوى دون الحاجة إلى النقر.

5. زر "أضف إلى السلة" العائم

على غرار أداة Sticky Navigation ، تتيح الأزرار العائمة "Add to Cart" للمستهلكين إضافة منتجات إلى عربة التسوق الخاصة بهم بغض النظر عن مكان وجودهم في صفحة المنتج. في السابق ، كان المستخدمون يتجهون لأسفل إلى مراجعات المستخدمين وتفاصيل المنتج والعناصر الأخرى في الصفحة السفلى ، ولإضافة المنتج إلى سلة التسوق الخاصة بهم ، سيتعين عليهم التمرير مرة أخرى إلى أعلى الصفحة. الآن ، تتيح لك شركات مثل Diesel.com الاطلاع على سعر المنتج وكميته وخيارات ألوانه وصوره بالإضافة إلى زر "Add to Cart" ، بغض النظر عن مكان وجودك في صفحة المنتج.

6. استخدام قانون فتتس

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

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

7. عرض مراجعات العملاء والشهادات

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

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

8. مكتب خدمة العملاء الفعال

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

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

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

9. فتات الخبز

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

10. 360 درجة وجهات النظر

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

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