أسس ومعايير تصميم الموقع الإلكتروني الناجح

أسس ومعايير تصميم الموقع الالكتروني

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

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

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

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

أولاً: أهم المقترحات على مستوى التصميم وتفاعل الزائر

رتب عناصر الصفحة

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

حافط على التسلسل الهرمي للمكونات بصرياً Visual Hierarchy

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

·         الاهتمام بنماذج المسح البصري المختلفة (تنقل العين من اليسار إلى اليمين على هيئة حرف F أو حرف Z في المحتوى الغير العربي، وربما يكون العكس صحيح في المحتوى العربي).

·         اعتماد مبدأ التباين في الألوان.

·         الاستفادة من الاختلاف في الأحجام كما في الخطوط مثلاً بحيث يتم اعتماد مبدأ التدرج في الأحجام بين العناوين الكبيرة والنصوص العادية.

·         اعتماد مبادئ التكرار والتقارب وقانون الثلث (تقسيم الصفحة إلى 3 أعمدة).

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

استفد من المساحات البيضاء أو السلبية Negative space

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

·         خلق فواصل بين المكونات المختلفة للصفحة.

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

·         المحافظة على التسلسل البصري لعناصر الصفحة والمساعدة في التنقل بين العناصر بصورة أكثر سلاسة.

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

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

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

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

عجلة الألوان والألوان الأولية والثانوية والثلاثية وكيفي اشتقاق الألوان منها

تظهر عجلة الألوان أو دائرة الألوان أعلاه الأنواع التالية من الألوان:

1.      الألوان الأولية أو الأساسية Primary Colors (الألوان التي تحمل الرقم 1).

2.      الألوان الثانوية Secondary Colors وأي لون ثانوي هو نتيجة مزج لونين أوليين أو أساسين (الألوان التي تحمل الرقم 2).

3.      الألوان الثلاثية أو ألوان الدرجة الثالثة Tertiary Colors وأي لون ذو درجة ثالثة هو نتيجة مزج لون أساسي ولون ثانوي (الألوان التي لا تحمل أرقام).

للإستفادة من فكرة التناغم بين هذه الألوان هناك بعض النماذج المعتمدة لمزج الألوان يمكن الإعتماد عليها في اختيار ألوان الموقع في شكله النهائي، وهذا سرد للبعض من المخططات أو الأنظمة schemes:

1.      نظام الألوان التكميلي Complementary color scheme
هذا النظام يتكون من كل لونين متقابلين على عجلة الألوان

2.      نظام الألوان المتماثلة Analogous color scheme
ويمثل هذا النظام الألوان التي تقع إلى جنب بعضها البعض على عجلة الألوان

3.      نظام الألوان الثلاثية Triadic color scheme
إذا قمت برسم مثلث داخل الدائر الداخلية لعجلة الألوان فإن الألوان التي تشير إليها رؤوس المثلث الثلاثة تكون معاً نظام الألوان الثلاثية.

4.      نظام الألوان الرباعي (المربع) Square color scheme
بالمثل، فإن رسم مربع أو مستطيل داخل عجلة الألوان سينتج نظام من أربع ألوان يسمى النظام الرباعي المربع في حال استخدام المربع، أو النظام الرباعي المستطيل في تم رسم مستطيل داخل العجلة.

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

لا تتردد في استعمال الصور

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

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

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

احرص دائماً على اختيار ما يسمى بالخطوط الآمنة الخاصة بالتصميم على شبكة الإنترنت Web Safe Fonts وهي الخطوط التي يمكن عرضها على مختلف أنواع أجهزة الحاسوب وكمثال عليها خطوط جوجل Google Fonts.

هناك 3 قواعد مهمة يجب مراعاتها في اختيار الخطوط والاستفادة منها في تصميم صفحات الويب وهي:

·         عدم استخدام أكثر من ثلاثة أنواع من الخطوط في التصميم الواحد.

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

·         مراعاة المحافظة على نسق التسلسل في استخدامها.

لتوضيح هذه القواعد المختلفة يمكن مثلاً اعتماد خط رئيسي أو أولي لكتابة العناوين العرضة أو الرئيسية بالصفحة، مع استخدام الخط الثانوي لعرض النصوص والفقرات النصية بالصفحة، وأخيراً يمكن تعيين الخط الثالث مثلاً للأزرار أو دعوة الزائر لتنفيذ أعمال معينة على الصفحة Call-to-Action.

اجعل التنقل بين صفحات الموقع سهلاً

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

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

ثانياً: أهم المقترحات على مستوى الأداء

ابن موقع متجاوب Responsive website

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

اجعل سرعة تحميل الموقع من ضمن أولوياتك

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

·         استخدام الصور المضغوطة ذات الامتداد المناسب.

·         اعتماد الشبكات الخارجية CDN في تحميل بعض مكتبات الملفات الضرورية في التصميم مثل ملفات الجافا سكريبت.

·         تكون أولوية التحميل لملفات CSS على أن يتم استدعاء ملفات الجافا سكريبت في آخر الصفحة.

·         التأكد من حسن كتابة كود الموقع من الناحية البرمجية.

·         حسن استخدام ما يعرف بالتخزين المسبق أو Caching.

·         استضافة الموقع على خوادم سريعة.

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

تحديث:

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

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

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

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

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

ختاماً

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