هل تعلم أن 75٪ من مصداقية موقع الويب الخاص بك تنسب إلى تصميمه ؟ قد يرى الزوار أن شركتك أقل جدارة بالثقة إذا كان هناك العديد من أخطاء تصميم موقع الويب. سواء كنت تبني موقعًا من الألف إلى الياء أو تقوم بتحديث موقعك الحالي ، فإن تجنب هذه الأخطاء سيسمح لعملك بالتميز عبر الإنترنت للأسباب الصحيحة.
في هذا المنشور ، ستسمع من خمسة شاركوا رؤى حول أخطاء تصميم مواقع الويب الأكثر شيوعًا . ستتعلم أيضًا طرقًا قابلة للتنفيذ لإصلاح هذه الأخطاء أو تجنبها تمامًا.
8 أخطاء شائعة في تصميم الويب
- عدم إعطاء الأولوية لإمكانية الوصول.
- نسيان أهمية التصميم سريع الاستجابة.
- المساومة على تجربة المستخدم من أجل الجماليات.
- لا تستثمر في التخصيص.
- استخدام الميزات التي لا تقوم بالتحويل.
- وجود نقص في التسلسل الهرمي.
- وجود تنقل غير واضح.
- عدم التواصل بشكل فعال لغرض عملك.
1. عدم إعطاء الأولوية لإمكانية الوصول.
يعتبر التعامل مع إمكانية الوصول كفكرة لاحقة هو الخطأ الأول في تصميم موقع الويب الذي يمكن أن ترتكبه. وفقًا لماريا كيلي ، مديرة تطوير الويب ، إليك الأخطاء الأربعة الأساسية المتعلقة بإمكانية الوصول:
- تباين غير كافٍ للألوان
- نص بديل مفقود أو غير مناسب للصور أو الرسومات
- مؤشرات التركيز المرئي غير كافية أو مفقودة
- تجاهل الأسماء أو التسميات التي يمكن الوصول إليها
دعونا نتعمق في كل من هذه.
تباين ألوان غير كافٍ
تباين الألوان هو خطأ في الوصول غالبًا ما يتم تجاهله. في كثير من الأحيان ، يحدث هذا الخطأ لأن الشركات تنشئ مواقع ويب تتميز بلوحة ألوان علامتها التجارية – والتي لا يتم إنشاؤها عادةً مع وضع تصميم يسهل الوصول إليه في الاعتبار.
“عندما تفتقر مجموعة الألوان المستخدمة على موقع ويب إلى تباين كافٍ بين ألوان الخلفية والألوان الأمامية ، قد يصعب إدراك النصوص والأيقونات ، خاصةً لمن يعانون من إعاقات بصرية مثل عمى الألوان ،” يشارك كيلي. “وفقًا للتقرير السنوي لعام 2022 WebAIM Million ، تم العثور على مشكلات تباين الألوان في أكثر من 80٪ من الصفحات الرئيسية!”
نص بديل مفقود أو غير مناسب
يعتمد زوار الموقع الذين يستخدمون برامج قراءة الشاشة على النص البديل للصورة لوصف ما تنقله الصورة أو الرسم. إذا كانت الصورة مفقودة أو لا تصف الصورة بشكل كافٍ ، فأنت تعزل القراء الذين يحتاجون إليها للاطلاع على موقعك.
“الصور جزء من محتوى موقع الويب الخاص بك ، لذلك من المهم أن تفكر فيها بنفس الطريقة التي تفكر بها في نسخة موقع الويب التقليدية: ما المعلومات التي يتم نقلها من خلال تضمين الصورة على صفحتك؟ تأكد من أن النص البديل الذي تستخدمه ينقل نفس المعنى ، “يقول كيلي.
مؤشرات التركيز المرئي غير كافية أو مفقودة
بدون مؤشرات التركيز المرئي ، لن يتمكن الزوار من تجربة موقعك بأقصى إمكاناته. “تظهر مؤشرات التركيز عمومًا كمخططات تفصيلية حول المكونات التفاعلية مثل الروابط والأزرار” ، يشارك كيلي. “من المهم أن يكون هناك مؤشر مرئي واضح للعنصر في الصفحة الذي يركز عليه حاليًا حتى يعرف المستخدمون الذين يتنقلون باستخدام لوحة المفاتيح ويمكنهم رؤية الشاشة مكان وجودهم بالضبط على الصفحة وما يمكن توقعه عند تفاعلهم مع العنصر النشط. ”
التغاضي عن الأسماء أو التسميات التي يمكن الوصول إليها
إذا كان موقعك ينقل المعلومات بشكل مرئي ، فكن على دراية بمن يستخدمون التقنيات المساعدة. يقول كيلي: “عند تصميم الصفحات والمكونات حيث يتم نقل المعلومات بشكل مرئي ، يجب نقل نفس المعلومات باستخدام ملصقات يمكن الوصول إليها للتكنولوجيا المساعدة”.
“على سبيل المثال ، هناك اتجاه شائع في تصميم الويب وهو مكونات البطاقة التي يظهر بها زر أو رابط” قراءة المزيد “أسفل كل بطاقة. يتم نقل المعلومات المتعلقة بالعنصر المرتبط بكل زر بشكل مرئي من خلال التصميم ، ولكن بالنسبة لقارئات الشاشة ، يصعب تمييز هذه الأزرار بشكل عام إذا كانت تفتقد إلى تسميات يمكن الوصول إليها مع التفاصيل ذات الصلة ، على سبيل المثال ، “قراءة المزيد حول مركز التسويق. ”
2. نسيان أهمية التصميم سريع الاستجابة.
في الربع الثاني من عام 2022 ، شكلت الأجهزة المحمولة أكثر من 58٪ من حركة مرور مواقع الويب العالمية – والتي لا تتضمن حتى الأجهزة اللوحية. إذا لم يكن موقع الويب الخاص بك سهل التنقل على الهاتف المحمول كما هو الحال على سطح المكتب ، فإنك تخاطر بإحباط الزوار وزيادة معدل الارتداد .
“يقوم المستخدمون الآن ، أكثر من أي وقت مضى ، بزيارة مواقع الويب من أجهزة متعددة ؛ الهواتف أو الأجهزة اللوحية أو أجهزة الكمبيوتر المحمولة أو حتى أجهزة التلفزيون. إذا كان المحتوى الخاص بنا يبدو سيئًا على أي منها ، فسيفقد الزائرون الثقة وينقرون / ينقرون بعيدًا عن الموقع ، “يشارك خوان مانويل ديفيا بينزون ، مساعد التصميم الرئيسي . “عصر نقاط التوقف هو الآن!”
وفقًا لشون لاندري ، مصمم المنتج الرئيسي، هناك سبب لحدوث ذلك. غالبًا ما يتم إنشاء مواقع الويب باستخدام أدوات في مستعرض ويب سطح المكتب. أحد الأخطاء الشائعة هو افتراض أن عملائك سيشاهدون موقعك بتنسيق سطح المكتب ويتجاهلون مراعاة مستخدمي الجوال “.
3. المساومة على تجربة المستخدم من أجل الجماليات.
أحد أخطاء تصميم مواقع الويب التي اكتسبت زخمًا خلال السنوات القليلة الماضية هو إعطاء الأولوية للجماليات على الوظيفة. نظرًا لأن الإنترنت نما مشبعًا بالموضوع “مع الانفجار الهائل للوسائط الجديدة والتصميم على مر السنين ، يعد التميز أمرًا ضروريًا تقريبًا لتحقيق النجاح. لسوء الحظ ، انتهى هذا الأمر بانفجار الاستخدام المفرط لعناصر التصميم والرسومات التي ترفع حواس المستخدمين ولكنها تفتقر أو تشعر بأنها منفصلة عن الغرض الحقيقي من موقع الويب ”
وفقًا لمارتينيز ، فإن هذا يظهر في عدة أشكال “… من اتجاهات التصميم التي تخفف من عرض قيمة العلامات التجارية إلى الاستخدام المفرط للرسوم المتحركة والمحتوى والرسومات الثقيلة التي تعزز الجماليات ولكنها تصبح عديمة الفائدة. هذا لا يعني أنه يجب اعتماد أسلوب الحد الأدنى أو الحكمة الجديدة ؛ يتعلق الأمر بالتوازن وكيف يدعم النموذج الوظيفة “.
4. عدم الاستثمار في التخصيص.
أثناء السير في وسط المدينة ، تتجول بجوار متجر لبيع الملابس به نافذة عرض إبداعية جذابة بصريًا. تتميز بمجموعة متنوعة من الملابس المعروضة للبيع وتحكي قصة بخلفية ونسخة جذابة. بعد ذلك ، تمشي بجوار متجر به قطع قليلة من الملابس على عارضات أزياء في النافذة – لا شيء يلفت انتباهك.
فكر في موقع الويب الخاص بك كواجهة متجر على الإنترنت لشركتك. يجب أن تعكس علامتك التجارية وتشعر بأن شركتك فريدة من نوعها. أحد أهم أخطاء تصميم مواقع الويب هو اختيار قالب قاطع ملفات تعريف الارتباط وليس تخصيصه.
على سبيل المثال ، يمكن أن يؤدي التقصير إلى راية البطل القياسية إلى أن تكون عكسية. يقول Lindsay Derby ، كبير مصممي المنتجات : “لقد رأيناها جميعًا – الصورة كاملة العرض أسفل التنقل مباشرةً مع نص أبيض أو أسود وزر في الأعلى”.
“الصورة إما فاتحة جدًا أو مظلمة جدًا أو تم اقتصاصها بطريقة ذكية لجعل النص مقروءًا. هناك عدة أسباب تجعلني أعتقد أن هذا خطأ. الأول هو أنه شائع لدرجة أنه أصبح معقدًا ومملًا. ما كان قرارًا تصميميًا لافتًا للنظر في السابق أصبح رتيبًا الآن “.
5. استخدام الميزات التي لا تقوم بالتحويل.
خطأ شائع آخر هو استخدام ميزات غير فعالة. بغض النظر عن مدى جاذبية عنصر ما ، تذكر أن الأولوية الرئيسية هي فعالية موقع الويب الخاص بك. “خطأ شائع آخر هو الاعتماد على التدوير الدوارة لعرض أجزاء متعددة من المحتوى على نفس المستوى ،” يشارك ديربي.
“تم إجراء عدد لا يحصى من الأبحاث للإشارة إلى أن المستخدمين لا يتفاعلون غالبًا مع الدوارات ، لا سيما على الجوّال حيث تكون تكلفة التفاعل عالية.”
6. عدم وجود التسلسل الهرمي.
هل سبق لك زيارة موقع ويب ووجدت نفسك غير متأكد من المكان الذي يجب أن تركز فيه انتباهك؟ إذا كان الأمر كذلك ، فمن المحتمل أنك وصلت إلى موقع يشتمل على نقص في التسلسل الهرمي. يقول لاندري: “تمامًا مثل كيفية استخدام إحدى الصحف للعناوين الرئيسية والعناوين الفرعية للإشارة إلى الأهمية ، يجب أن يكون كذلك أسلوب طباعة موقع الويب الخاص بك”.
الحصول على طلب على موقع الويب الخاص بك له جاذبية جمالية ، ولكنه عملي أيضًا. يقول مارتينيز: “تنظيم عناصر موقع الويب … امنح موقعك بنية متماسكة تدفع المستخدمين إلى إكمال الإجراءات الواضحة ، وتحقيق الهدف الأساسي ، وبالتالي إنشاء تجربة سلسة”.
إصلاح هذا ليس بالأمر السهل ، خاصة عندما يكون لشركتك جمهور عريض بأهداف مختلفة. ومع ذلك ، وفقًا لمارتينيز ، سيكون من الأفضل أن تفعل ذلك لأن هذه المشكلة يمكن أن تؤثر بشكل كبير على كيفية تجربة المستخدمين لموقعك. “الافتقار إلى التسلسل الهرمي يضلل المستخدمين ويمنعهم من الوصول إلى أهدافهم” ، كما قال.
7. وجود ملاحة غير واضحة.
يمكن أن يقلل التنقل الواضح من الاحتكاك الذي يواجهه الزائرون عندما يهبطون على موقعك ، وهذا هو السبب في أن التنقل غير الواضح يعد بمثابة مأزق. “نظرًا لأن المزيد والمزيد من الأنشطة التجارية تتفرع إلى العالم الرقمي ، يصبح المحتوى على موقع الويب أكثر ازدحامًا وتعقيدًا ، وسيضمن التنقل الواضح والاتساق عبر نقاط الاتصال المتعددة ورحلات المستخدم انتقالًا سلسًا من الزائر الأول إلى المدافع” ، تشارك Devia Pinzon .
8. عدم التواصل بشكل فعال لغرض عملك.
عندما يهبط الزوار على موقع الويب الخاص بك ، يجب أن يكونوا قادرين على الحصول على صورة واضحة لما تفعله شركتك. وإذا كانت هذه الصورة ضبابية بعض الشيء؟ لقد خمنت ذلك – قد يهجر الزوار موقعك.
يقول لاندري: “أول شيء يفعله زائر الموقع عند تحميل موقعك هو تحديد ما إذا كان قد وصل إلى الوجهة الصحيحة”. “هل يوضح موقعك في الجزء المرئي من الصفحة المنتج أو الخدمة التي يقدمها؟”
يجب أن يعزز موقع الويب الخاص بك مصداقية عملك. إذا لم يتم توصيل الغرض من عملك وتأكيد الزائرين على أنهم في المكان الصحيح ، فمن المحتمل أن يتم إعادة تصميم موقع الويب.
كيفية إصلاح أخطاء تصميم مواقع الويب الشائعة
الآن بعد أن مررنا بأخطاء تصميم مواقع الويب الأكثر شيوعًا ، دعنا نناقش كيفية معالجة إصلاحها. لا تقلق: الوعي نصف المعركة. الآن بعد أن عرفت ما يجب تجنبه ، يمكنك البدء في إنشاء موقع يتميز بأفضل ممارسات تصميم موقع الويب.
1. اجعل إمكانية الوصول على رأس أولوياتك.
يقول كيلي: “تعني إمكانية الوصول إلى الويب جعل مواقع الويب والمعلومات المتعلقة بها في متناول الجميع ، لذلك من المهم للغاية أن تكون صحيحًا عند تصميم مواقع الويب”. “عندما نرتكب هذه الأخطاء الشائعة في إمكانية الوصول في تصميمات مواقع الويب ، فإننا نخلق حواجز قابلية الاستخدام لملايين الأشخاص الذين يعانون من شكل من أشكال الإعاقة. حتى إذا كان موقعك يبدو رائعًا ، إذا كان محتوى أو إجراءات معينة لا يمكن الوصول إليها من قبل شريحة من الزوار ، فإنه لا يلبي إمكاناته الكاملة لتلبية أهدافك واحتياجات عملك “.
فيما يلي بعض الطرق القابلة للتنفيذ لإصلاح مشكلات إمكانية الوصول إلى التصميم.
قم بإنشاء شخصيات المستخدم لتناسب احتياجات المستخدم المختلفة
التأكد من أن شخصياتك شاملة وإمكانية الوصول في نسيج تصميم موقعك. “فكر في إمكانية الوصول مبكرًا وفي كثير من الأحيان. عند تصميم مواقع الويب ، غالبًا ما تكون إحدى الخطوات الأولى هي إنشاء “شخصيات” مستخدمين تساعد في ضمان أن يلبي الموقع مجموعة متنوعة من احتياجات المستخدمين “، كما يقول كيلي. “التأكد من أن شخصياتك تشمل مجموعة متنوعة من القدرات هي إحدى الطرق لضمان أنك ستأخذ في الاعتبار إمكانية الوصول في جميع مراحل المشروع.”
ثقف نفسك حول أفضل الممارسات المتعلقة بإمكانية الوصول
تعرف على المزيد حول أفضل ممارسات إمكانية الوصول حتى تكون في قمة اهتماماتك عند العمل في مشاريعك. “هناك الكثير من الموارد وقوائم المراجعة والإرشادات حول كيفية تصميم مواقع الويب وبنائها واختبارها لإمكانية الوصول ” ، يشارك كيلي. يمكنك البدء بالاطلاع على قائمة التحقق الخاصة بنا لإنشاء موقع يمكن الوصول إليه .
2. تأكد من أن موقع الويب الخاص بك يتميز بتصميم متجاوب.
مع تصميم الويب سريع الاستجابة ، يمكنك أن تطمئن إلى أنه بغض النظر عن كيفية وصول الزوار إلى موقعك ، فسيتمتعون بتجربة سلسة. لحسن الحظ ، فإن إنشاء موقع ويب سريع الاستجابة ليس بالأمر الصعب كما يبدو – وإذا كنت تستخدم نظامًا لإدارة المحتوى ، فيمكنك حتى استخدام قوالب متوافقة مع الأجهزة المحمولة بالفعل.
تقول Devia Pinzon: “فكر في أهم معلومة تريد أن يأخذها زوارك بعيدًا عن الصفحة ، ثم فكر في الشكل الذي ستبدو عليه على أكبر وأصغر شاشة ممكنة”. “هدفك هو التأكد من أنه بغض النظر عن الجهاز ، سيكون لدى الزوار نفس فهم المحتوى الخاص بك.”
بمجرد إنشاء نسخة الهاتف المحمول من موقعك ، لم تنته مهمتك بعد . يذكر لاندري أنه “تأكد دائمًا من اختبار موقعك على هاتفك”. قد يؤدي اختبار الموقع إلى اكتشاف مواطن الخلل التي لم تلاحظها من قبل.
إذا كان بإمكانك استخدام بعض الإلهام ، فقد جمعنا 21 من أفضل الأمثلة لتصميم مواقع الويب للجوال .
3. وازن بين المظهر الجمالي وتجربة المستخدم السلسة.
نحن نعلم ما يحدث عندما يضع موقع الويب الجماليات في المرتبة الأولى والوظيفة في المرتبة الثانية. على موقع ويب ناجح ، من الممكن الموازنة بين المظهر المرئي وتجربة المستخدم السلسة التي تتيح للزوار التنقل عبر الصفحات والعثور على ما يبحثون عنه.
تحقيق ذلك ، وفقًا لمارتينيز ، يعود أساسًا إلى التواصل الفعال بين الفريق والمواءمة. “يجب أن تظل فرق التصميم وفية للاستراتيجية ، مما يضمن أن التصميم يدعم أهداف المستخدمين الرئيسية وأن هناك توافقًا جيدًا مع فرق التطوير والمحتوى وتحسين محركات البحث ،” يشارك Martinez.
4. كن مقصودًا بشأن تصميم الموقع ، ولا تخف من الإبداع.
فقط لأنك ترى الكثير من مواقع الويب بتصميم أو تخطيط معين لا يعني أن موقعك يجب أن يكون كذلك. “اعط بعض التفكير الحقيقي المتعمد لما يجب وضعه في هذا المكان ذي القيمة العالية ،” يشارك دربي حول المنطقة الواقعة أسفل الملاحة.
طرح أسئلة على نفسك حول نواياك بشأن المساحة هي طريقة أخرى فعالة لفهم ما يناسبها بشكل أفضل. “هل الصور ذات مغزى أم مجرد ديكور؟ هل التصميم مصمم بطريقة تشجع المستخدم على القراءة أو اتخاذ إجراء؟ هل هناك شيء مثير للاهتمام قد يلفت انتباههم لبضع ثوان؟
على غرار تأثير عمى اللافتات مع الإعلانات ، بدأ المستخدمون في تخطي أقسام البطل الكبيرة هذه مباشرةً لصالح محاولة الغوص في المحتوى الفعلي ذي المعنى أدناه. هذه فرصة ضائعة لمصممي الويب والمسوقين الذين غالبًا ما يضعون عبارات الحث على اتخاذ إجراء الأكثر قيمة في شعار البطل “.
بدلاً من ذلك ، قد تقرر تبديل تخطيط موقعك بالكامل ، بحيث لا يعرض صورة أسفل التنقل. أكثر من 70٪ من الشركات تستثمر في التصميم للمساعدة في تمييز شركاتها عن المنافسين ، لذلك لا تخف من القيام بشيء لا يفعله أي شخص آخر في مجال عملك.
5. لا تدفن المعلومات الخاصة بالميزات التي لا يتم تحويلها.
إذا كنت تعلم أن الميزة لا تتحول أو أن الزائرين يتألقون عليها ، فتأكد من عدم دفن المعلومات المهمة عنها. (أو الأفضل من ذلك ، ألغِه تمامًا.) إذا كان موقع شركتك على الويب يحتوي على دائرة ، فتأكد من أنك تضع في اعتبارك أفضل الممارسات.
يقول ديربي: “هناك عدد قليل من الأشياء التي يمكن تحسينها بشأن تجربة العرض الدائري ، وهي استخدام عناصر تحكم مرئية للغاية ، والحد من عدد الشرائح ، ووضع أهم جزء من المعلومات أولاً”. “لا يجب إخفاء أي شيء بالغ الأهمية بعد الشريحة الأولى ، لذلك من المؤكد أن المستخدم سيحصل على تجربة كاملة إذا لم يتفاعل مع المكون.”
6. تأكد من أن موقعك يحتوي على تسلسل هرمي.
بدون تسلسل هرمي ، يكون موقع الويب الخاص بك مربكًا ومربكًا ويصعب هضمه. ومع ذلك ، من خلال التسلسل الهرمي ، يفهم الزائرون بوضوح أين ينظرون وماذا يقرؤون. لحسن الحظ ، هناك بعض الحلول السريعة التي يمكنك إجراؤها لتنفيذ التسلسل الهرمي على موقع الويب الخاص بك. للحصول على بعض الأفكار ، يجب عليك البحث عن بعض خدمات تصميم مواقع الويب المتخصصة في هندسة التسلسل الهرمي في تصميم الويب الحديث.
يقول لاندري: “تأكد من استخدام علامات عناوين HTML وأحجامها لإبلاغ المستخدمين بالأهمية النسبية لكل سطر من النص”.
يضيف مارتينيز ، “لتجنب هذه الأخطاء ، من الضروري الانتباه إلى هذه السمات الرئيسية الثلاث: المقياس (باستخدام اختلافات الحجم) ، والتوازن (توزيع العناصر المرئية) ، والتكوين (العناصر المنظمة). تطبيق مبادئ الجشطالت ، وخاصة القرب ، لتكوين بنية متماسكة “.
7. تأكد من سهولة التنقل في موقعك.
إذا كان موقعك يحتوي على تنقلات خلل ، فقد ترى ذلك ينعكس في معدل الارتداد لموقعك. فكر في التنقل الفعال باعتباره أمرًا ضروريًا للحصول على تجربة مستخدم سلسة.
يقول مارتينيز: “يضمن التنقل السهل تجربة مستخدم سلسة ويدعم رحلة المستخدم مما يوفر اكتشافًا سهلاً للمعلومات أو وسيلة للعودة إلى نقطة معينة”. “لضمان ذلك ، يجب على الفرق تحديد مستويات التنقل (من الناحية المثالية لا تزيد عن ثلاثة مستويات) وكيف ترتبط الصفحات على المستويات المختلفة بمستوى الوالدين. أيضًا ، تحقق من صحة التصنيف الصحيح ليسهل على أي مستخدم فهم والتأكد من أن التنقل يعمل على أحجام شاشة مختلفة ، حيث يمكن أن يتصرفوا بشكل مختلف. ”
8. تأكد من نقل الغرض من عملك من خلال التصميم والنسخ.
ستستخدم نسخة مقنعة وعناصر بصرية لتحقيق ذلك. قبل أن تبدأ ، اسأل نفسك ما هو الغرض من موقع الويب الخاص بك. هل تقوم بإنشاء موقع للتجارة الإلكترونية حيث يمكن للزوار شراء عناصر من شركتك؟ أم أن الهدف الأساسي لموقعك على الويب هو إبلاغ الخدمات التي يقدمها فريقك؟ كن واضحًا بشأن مهمة موقع الويب الخاص بك. يجب أن تساهم كل ميزة وكل نسخة تضيفها إلى الموقع في تحقيق هذا الغرض. قد تحتاج إلى استخدام خدمات تكنولوجيا المعلومات لعملك لزيادة مشاركة جمهورك.
تجنب أخطاء تصميم مواقع الويب الشائعة لتعزيز مصداقية الموقع
من خلال تجنب أخطاء تصميم مواقع الويب الشائعة ، ستعزز مصداقية موقعك وتقدم للزائرين تجربة سيرغبون في العودة إليها.
يقول مارتينيز: “تصميم الويب هو رياضة جماعية ويتطلب نهجًا دائريًا يضمن التوافق الجيد بين الفرق وأصحاب المصلحة ومعرفة المستخدم”. “لا توجد طريقة أفضل من الاختبار والتكرار ، بما في ذلك بحث المستخدم واختبار قابلية الاستخدام ، للتأكد من أن موقع الويب الخاص بك يتحرك في الاتجاه الصحيح.”
لا تعليق