5 نصائح لتجربة المستخدم على الأجهزة المحمولة يجب على كل مصمم اتباعها

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

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

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

ركز على التباعد بين عناصر التصميم

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

من الأخطاء الشائعة المتعلقة بقابلية الاستخدام على الأجهزة المحمولة في Google Search Console أن "العناصر القابلة للنقر قريبة جدًا من بعضها البعض".

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

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

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

لذلك ، تحتاج إلى تصميم مساحة كافية بين الأزرار والعناصر ، حتى لا يشعر الزائر بتجربة جوّال محبطة.

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

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

تأكد من سهولة قراءة النص والخط

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

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

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

في تصميماتك ، يمكنك أيضًا زيادة ارتفاع السطر بين سطور النص لتعزيز إمكانية قراءة الصفحة.

بمجرد أن تقرر الخط والحجم ، تحتاج أيضًا إلى مراعاة نسب تباين الألوان.

نظرًا لأن الزائرين قد يكونون في الداخل أو في الهواء الطلق أو في إضاءة ضعيفة ، فمن المهم اتباع معايير التباين بين ألوان الخلفية والمقدمة.

يلعب هذا أيضًا دورًا في إمكانية الوصول وإنشاء موقع ويب متوافق مع ADA. وفقًا لمعايير WCAG 2.1 ، يوصى بنسبة تباين لا تقل عن 4.5: 1 للنص العادي و 3: 1 للنص الكبير.

تأكد من أن تحوم الماوسات والرسوم المتحركة تتبع أفضل الممارسات

تتضمن معظم تصميمات الويب اليوم بعض الرسوم المتحركة الدقيقة والمكونات التفاعلية ؛ إنه طلب شائع من العملاء في عملية إعادة التصميم.

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

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

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

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

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

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

تخطيط التنسيب للنوافذ المنبثقة وعناصر الطرف الثالث

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

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

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

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

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

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

إعادة النظر في تصميم النموذج ووضعه

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

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

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

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

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

خاتمة

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

التالي: قم ببناء مجموعة مهارات تصميم الويب الخاصة بك من خلال الدورات التدريبية المفيدة عبر الإنترنت!

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

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