طرق لتحسين تجربة المستخدم لموقع التجارة الإلكترونية على الأجهزة المحمولة

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

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

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

1. حاول تصميم موقع الجوال أولاً (على سبيل المثال ، قبل تصميم موقع سطح المكتب)

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

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

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

2. إعادة توجيه موقع الجوال تلقائيًا ، ويجب تحسين الصفحات على الجوّال

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

لمواكبة ذلك ، يجب تحسين موقع التجارة الإلكترونية لجميع الأجهزة. قدِّم تجربة جوّال أفضل من خلال موقع جوّال محسّن ، أي موقع جوّال كامل الاستجابة.

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

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

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

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

3. تصميم متسق عبر منصات مختلفة للحصول على تجربة مستخدم أكثر سلاسة

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

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

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

يمكنك تجنب هذه المشكلة. فيما يلي بعض التوصيات:

أ. الهوية المرئية

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

ب. الايقونية متسقة

يجب أن تمثل رموز التطبيقات والويب نفس الوظيفة

جيم - الصياغة

يجب أن تكون أسماء الأزرار والروابط وخيارات القائمة هي نفسها على كل من موقع الويب للجوال وسطح المكتب

D. التفاعلات والتدفق

يجب أن تكون عملية التنقل لكل ميزة هي نفسها (على سبيل المثال ، البحث عن منتج أو طريقة الدفع)

هـ- التنسيق بين المصممين والمطورين والمختبرين

يجب أن يكون لدى كل فرد في الفريق فهم مماثل لكل ميزة يتم نشرها.

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

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

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

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

• كم عدد المستخدمين الذين زاروا الموقع من مجتمع Android أو iOS؟
• ما نسبة الزوار الذين يستخدمون أجهزة ذات شاشة منخفضة الدقة؟
• هل هناك اختلاف في عدد زيارات الصفحة من المستخدمين الذين يستخدمون أحدث إصدار من Android والإصدار الذي يبلغ عامين؟
• ما هي المدة التي يقضيها مستخدمو الأجهزة المحمولة التي تعمل بنظام iOS في المتجر مقارنةً بمستخدمي Android؟
• ما نوع الاتصال الذي تم استخدامه؟ واي فاي أو بيانات الجوال؟

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

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

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

5. اختبر إصدارات الجوال من موقعك

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

أ. متوافق مع الجوّال من Google

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

• نص صغير جدا للقراءة
• منفذ العرض غير معين
• العناصر القابلة للنقر قريبة جدًا من بعضها
• يستخدم مكونات إضافية غير متوافقة. "

موبيليتيست. أنا

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

6. جعل تخطيطات تصميم مرنة وسلسلة

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

• كثافة منخفضة (ldpi)
• كثافة متوسطة (mdpi)
• كثافة عالية (hdpi)
• xhdpi (كثافة عالية جدًا)
• xxhdpi (كثافة عالية جدًا للغاية)
• xxxhdpi (كثافة عالية جدًا إضافية إضافية)

فيما يلي بعض المصطلحات البسيطة المتعلقة بالكثافة

قرار

عدد البكسل على الشاشة

بكسل مستقل عن الكثافة (DP)

تحدد وحدة البكسل الافتراضية تخطيط واجهة المستخدم. تعبر DP عن أبعاد التخطيط أو الموضع بطريقة مستقلة عن الكثافة. تعادل DP 1 بكسل مادي على شاشة 160 نقطة في البوصة.

حجم الشاشة

يتم قياس حجم الشاشة حسب الطول القطري للشاشة.

د- كثافة الشاشة

كمية البيكسلات داخل المنطقة المادية للشاشة ، وعادة ما يتم تمثيلها بنقاط في البوصة.

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

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

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

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

بعض الأمثلة على عناوين URL التي تم إنشاؤها هي

• www.website.com (وصول سطح المكتب)
• m.website.com (الوصول للجوال)
• www.website.com (إصدار أخف باستخدام HTML أساسي) (الوصول إلى الهاتف العادي)

8. استخدم “viewport Meta Tag” لملاءمة الصفحات لشاشات الجوال

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

كيف تأخذ Viewport في الحساب؟

يمكنك استخدام علامة CSS تسمى "العلامة الوصفية لإطار العرض" ، والتي يتم تضمينها في مواصفات CSS Device Adaptation.
تحتوي هذه العلامة على الصيغة التالية: <meta name = “viewport” content = “width = device-width, initial-scale =1”>

9. أثناء بدء تصميم الجوال ، حدد موقع الويب "الأساسي".

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

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

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

• تسجيل الدخول والتسجيل
• بحث منتوج
• قائمة المنتجات
• أضف إلى السلة
• الدفع

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

10. استخدم نماذج بسيطة وحقول الإدخال

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

كيفية تحسين النموذج للأجهزة المحمولة؟

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

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

تغليف

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