عيوب التصميم التي يمكن تجنبها يمكن أن يضر موقعك

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

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

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

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

1. تباين ضعيف

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

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

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

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

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

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

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

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

2. ترميز سيء

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

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

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

3. باستخدام الفلاش

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

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

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

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

4. فيديو التشغيل التلقائي

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

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

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

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

5. التدرج اللانهائي

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

ولكن مرة أخرى ، تحكي نتائج البحث قصة. انظر هذا المثال:

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

6. إنشاء النوافذ المنبثقة أو النوافذ المنبثقة عند عدم الحاجة إليها

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

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

  • لخداع تحليلات معدل الارتداد جوجل
  • لمحاولة جعلك تملك أفكارًا ثانية إذا ارتدت

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

7. مزعج التراكبات

إنه ليس "اليوم العالمي لـ Bash TripAdvisor" (بعد) ، ولكن بما أنهم يقدمون بسخاء أمثلة لسلوك صفحة الويب البغيض ، فإنه سيبحث حقاً عن حصان هدية في الفم لتجاهل ذلك. إذن ، هذا ما عرضه موقع TripAdvisor منذ لحظة عندما كنت أضع لقطة الشاشة المنبثقة:

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

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

إنها في الغالب مسألة من الحس السليم (وهو على الأرجح سبب فشل المسوقين في ذلك)

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

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

رأس الصورة مجاملة من دان دراغومير

بوجدان رانسيا

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