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

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

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

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

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

خطأ 1. استخدام خطوط صغيرة جدًا.

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

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

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

لجذب انتباه المستخدمين يجب مراعاة النقاط التالية:

كتابة عنوان أو عنوان مميز يجذب انتباه القراء.

كتابة محتوى مثير للاهتمام يشجعهم على قراءة أكثر من 28% مما تكتبه.

كتابة العنوان بخط كبير.

كتابة المحتوى بخط مناسب حتى لا يواجه المستخدمون مشاكل في قراءة المحتوى.

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

الأمثلة التالية هي أمثلة على التصميمات الاستثنائية ذات الخطوط الفريدة:

كيسميتريكس : العنوان، 35. الحاشية، 15.

 Vero : عنوان،41. مضمون متن، 18.

مدونة مساعدة الكشافة : نص داخلي، 26. موضوع النص، 19.

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

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

خطأ 2. استخدام أشرطة التمرير المتحركة.

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

وفي معظم الحالات، تكون الإجابات على الأسئلة المطروحة سلبية. يقتبس Peep Laja من Chris Goward من Widwe Funnel و Tim Ash من Site Tuners في مقال بعنوان "لا تستخدم الصور الدوارة أو أشرطة التمرير، تجاهل الرغبة في استخدامها" حول موضوع  تحويل XL :

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

اللافتات الدوارة ضارة تمامًا ويجب إزالتها فورًا يا تيم آش .

ويستشهد أيضًا بمقالتين تثبتان عدم فعالية أشرطة التمرير الدوارة:

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

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

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

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

فلماذا لا تزال العديد من مواقع الويب تستخدم أشرطة التمرير على الرغم من عدم فعاليتها؟

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

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

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

اتبع الإرشادات أدناه لإنشاء موقع على شبكة الإنترنت:

تجنب إضافة أشرطة التمرير لمجرد أن الآخرين يستخدمونها.

فكر في أفضل طريقة لنقل المعلومات ولا تنسخ بشكل أعمى ما يفعله المنافسون الآخرون.

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

فكر في هدف واحد لموقعك على الويب وركز جميع الأنشطة على هذا الهدف.

خطأ 3. استخدم الخطوط ذات التباين المنخفض.

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

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

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

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

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

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

.موقع مدونة مساعدة الكشافة

 

موقع إيفرنوت .

موقع هاري . 

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

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

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

النص باللون الأسود مع خلفية بيضاء: 70% جيد، 19% متوسط، 11% ضعيف.

نص أبيض مع خلفية سوداء: 0% جيد، 12% متوسط، 88% ضعيف.

نص أبيض مع خلفية أرجوانية: 2% جيد، 16% متوسط، 82% ضعيف.

نص أبيض بخلفية زرقاء أرجوانية: 0% جيد، 4% متوسط، 96% ضعيف.

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

استخدم دائمًا خطوطًا عالية التباين.

أيضًا، استخدم الطريقة العكسية بشكل أقل.

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

خطأ 4. استخدم نصًا بارتفاع سطر ضعيف.

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

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

والخبر السار هو أن المصممين الموهوبين يتمتعون بالذكاء ويختارون تلقائيًا ارتفاع الخط المناسب. الخبر السيئ هو أن نصف مطوري الويب لا ينتبهون لهذه النقطة ويختارون الارتفاع الخاطئ.

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

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

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

خطأ 5. طول الخط طويل جدًا.

هناك خطأ آخر يمكن ارتكابه وهو إنشاء سطور طويلة جدًا. ولكن ما هو طول الخط الأمثل؟

نشر معهد Baymard مقالاً أقر فيه أن 50 إلى 60 حرفًا في كل سطر هو الرقم المثالي وأن 75 حرفًا مقبول.

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

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

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

في المقال المذكور قامت المؤسسة المذكورة بحل هذه المشكلة من خلال وضع حد أقصى لعرض النص الخاص بها قدره 516، وبهذا الحد الأقصى تم وضع متوسط ​​65 حرفًا مع 18 خطًا في كل سطر. وبهذه الطريقة، كما ترون في الصورة أدناه، تم توفير تجربة قراءة فريدة لقراءها.

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

خطأ 6. عدم استخدام اللون المناسب لجذب الانتباه.

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

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

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

ولتفادي هذا الخطأ انتبه إلى النقاط التالية:

استخدم الألوان الزاهية لجذب الانتباه.

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

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

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

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

خطأ 7. كسر مبادئ التصميم المشتركة.

وآخر خطأ فادح يرتكبونه هو عدم اتباع مبادئ التصميم، كما   يشير ستيف كروغ في كتابه "لا تجعلني أفكر".

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

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

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

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

خاتمة.

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