معايير ونصائح تصميم المواقع

معايير تصميم المواقع لعام 2017 – أفضل 10 ممارسات في أفضل 50 موقع

يتبع مصممو المواقع مجموعة من القواعد لينال تصميمهم إعجاب المستخدم. هذه المعايير تضمن الجودة وبساطة التصميم وسهولة الاستخدام.

لقد قمنا بعمل قائمة ب 10 مكونات في التصميم وتحققنا من تواجدها في أفضل 50 موقع عالمي، وصنفناهم على هذا الاساس:

  1. مكون معياري: موجود في %80 وأكثر
  2. مكون شائع: موجود في 50% إلى 79% من المواقع
  3. مكون محتمل: موجود في 49% أو أقل.

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

1- شعار الموقع في أعلى يسار الموقع.

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

عندما نتحدث عن المواقع العربية، فسيكون مكان اللوجو في الجزء العلوي ناحية اليمين بدلا من اليسار.

2- زر أو لينك التواصل في الجزء العلوي ناحية اليمين.

مكان رابط اتصل بنا

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

وبالمثل عندما نتحدث عن المواقع العربية، سيكون الشعار في اليمين ورابط التواصل في اليسار.

هذا المكان جيد لرابط التواصل.

3- شريط الصفحات أو ال navbar في الأعلى بعرض الموقع.

مكان القائمة الافقية

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

4- slideshow في الصفحة الرئيسية.

مكان السلايدر

32% من المواقع لديها سلايدر أو المعروف ب carousel، وهو عبارة عن عرض شرائح تحتوي على صور وروابط، في الصفحة الرئيسية.

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

5- رسالة الموقع أعلى الصفحة الرئيسية.

مكان رسالة الموقع

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

6- طلب اجراء call to action

مكان call to action

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

7- خاصية البحث موجودة في الهيدر header

مكان خاصية البحث

54% من المواقع لديها مربع بحث في الجزأ العلوي header، نصف المواقع التي تهتم بالتسويق لا تحتوي على هذه الخاصية.

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

8- مربع التسجيل أو الاشتراك في ذيل الصفحة footer

مكان زر التسجيل

24% من المواقع تسمح للزائر التسجيل أو المتابعة بالبريد الالكتروني في الفوتر.

فذيل الصحفة من الأماكن الشائعة لجمع البريد الالكتروني من الزوار.

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

9- روابط أو أيقونات التواصل الاجتماعي في الأسفل footer

مكان ازرار التواصل الاجتماعي

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

10- التصميم المتجاوب

اعتمد التصميم المتجاوب في موقعك

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

هيا نعيد تجميع ما تعلمناه.

هذه الصورة تلخص ما كنا نتحدث عنه..

معايير ونصائح تصميم المواقع

قد يكون التصميم المختلف ضرورة.

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

المكونات الشائعة تشمل: جزء طلب الاجراء أو call to action، صندوق أو أداة البحث في الموقع، أيقونات التواصل الاجتماعي في الفوتر، والتصميم المتجاوب.

نصائح مجربة لمصممين المواقع.

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

لماذا تصمم موقع مختلف؟

إذا كان من المتوقع تواجد عنصر معين في الموقع في مكان معين، إذن ضعه في ذلك المكان.

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

  1. الطابع المميز للموقع أو البراند الخاص بك Brand Standards
    الألوان، وطريقة دمجها مع بعضها يجب أن تكون محددة وواضحة لكل موقع. يجب أن يكون لديك معيار واضح في هذا الشأن ترجع إليه.
  2. أساسيات الكود القياسية Coding Standards
    يجب أن تكتب كود موقعك بطريقة معينة حسب المتفق عليه من خبراء الويب لكي تضمن عمله بالشكل السليم على جميع المتصفحات. للاطلاع على تلك المعايير.
  3. معايير سلامة الوصول لمحتوى موقعك Accessibility Standards
    من حق الزائر أن يصل بسهولة للمعلومات الواردة في موقعك. اتبع هذه المعايير لضمان سهولة الوصول للمعلومات في موقعك لأي أحد.

نصيحة.

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

إذن هل تلتزم بتلك المعايير في تصميماتك أو في موقعك؟ هل لديك شيء تضيفه؟ يسعدني أن أرى تعليقك هنا.

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

المصادر: 1

بقلم: محمد عبدالجليل

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

One thought on “معايير تصميم المواقع لعام 2017 – أفضل 10 ممارسات في أفضل 50 موقع

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *