هل كل الاتجاهات تستحق العناء؟ أشهر 5 أخطاء في UX يصنعها مصممو الويب

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

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

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

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

لنلقِ نظرة على بعض أخطاء تجربة المستخدم الشائعة.

خطأ UX الشائع في تصميم الويب رقم 1: الرؤوس الكبيرة والثابتة

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

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

قد يكون رأس التنقل اللاصق كبيرًا جدًا لتوفير الراحة

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

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

فيما يلي مثال على رأس ثابت طويل: صفحة الملف الشخصي للاعب ATP على Roger Federer.

يبلغ ارتفاع الرأس اللاصق لهذا الموقع أكثر من 180 بكسل! يمثل هذا أكثر من 30٪ من ارتفاع الصفحة بالكامل في بعض أجهزة الكمبيوتر المحمولة: تجربة مستخدم سيئة يمكن تجنبها.

عدم النظر في مشكلة UX لرأس التنقل الثابت على الهاتف المحمول

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

يحتوي موقع Coffee with a Cop أيضًا على رأس ثابت ، ولكنه أصغر بكثير - أقل من 80 بكسل في الطول.

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

خطأ UX الشائع في تصميم الويب رقم 2: الخطوط الرفيعة والخفيفة

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

الهدف من كل النص على موقع الويب هو أن يكون مقروءًا ، ويمكن أن تؤثر الكتابة الرفيعة بشكل خطير على قابلية القراءة. لن يشاهد جميع الزوار موقعًا على شاشة تعرض نوعًا رقيقًا جيدًا. بعض أنواع الضوء صعبة القراءة على iPhone أو iPad مع شاشة Retina.

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

إرشادات واجهة Apple البشرية

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

فيما يلي بعض أخطاء UX الشائعة التي يجب مراعاتها قبل استخدام النوع الرفيع:

استخدام الخطوط الرفيعة والخفيفة لأنها عصرية

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

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

وهو ما يقودنا إلى خطأ UX الشائع التالي:

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

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

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

خطأ UX الشائع في تصميم الويب رقم 3: نص منخفض التباين

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

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

تباين منخفض في النص الأساسي

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

عدم اختبار تباين النص

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

خطأ UX الشائع في تصميم الويب رقم 4: اختطاف التمرير

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

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

لم يتم الاختبار مع مستخدمي العالم الحقيقي

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

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

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

خطأ UX الشائع في تصميم الويب رقم 5: الدوارات

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

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

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

السهام السابقة والتالية ذات قابلية اكتشاف منخفضة

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

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

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

خاتمة

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

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

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

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

• تصميم سريع الاستجابة - أفضل الممارسات والاعتبارات
• الاقتراب من عملية تصميم موقع الويب من المتصفح
• البرمجة للمصممين - إلى أي مدى يجب أن نعرف؟
• أفضل ممارسات تصميم واجهة المستخدم والأخطاء الشائعة