أساسيات تخطيط الموقع الإلكتروني

1. مقدمة:

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

إن إنشاء تخطيط (mise en page) لموقع الويب يدور حول إيجاد التوازن الصحيح بين الجماليات والوظائف. إذا كان يجب أن يكون موقعك جميلًا، فيجب أيضًا وقبل كل شيء أن يكون فعالاً. ليس لدى المستخدمين سوى القليل من الصبر مع المواقع التي تعمل بشكل سيئ أو معقدة، ولهذا السبب تحدث أعلى معدلات الارتداد (les taux de rebond) في الثواني العشرة الأولى. بالطبع، التصميم الجيد لن يؤدي دائمًا كل العمل (خاصة إذا كان المحتوى مخيبًا للآمال)، ولكن لا فائدة من جعله سببًا لمغادرة زوار موقعك...

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

2. أهداف تخطيط الموقع:

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

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

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

• صورة العلامة التجارية: يلعب التخطيط الجيد أيضًا دورًا في العلامة التجارية عن طريق استخدام المسافات والمحاذاة والقياس بشكل متسق مع البراندينغ الخاص بالشركة.

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

3. عملية إنشاء تخطيط موقع الويب:

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

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

والآن إليك خطوات إنشاء تخطيط موقع الويب:

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

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

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

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

4. التقنيات الأساسية لتخطيط موقع الويب الفعال:

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

·      الهرمية البصرية:

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

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

·      اتجاه القراءة:

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

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

·      خط التعويم:

في تصميم الويب، "خط التعويم" (ligne de flottaison) هو الخط الذي يتم عنده قطع صفحة الويب بسبب قيود حجم الشاشة. المحتوى الذي يكون مرئيًا عند تحميل الصفحة يكون أعلى هذا السطر، والمحتوى الذي يتطلب من المستخدمين التمرير لأسفل يكون أسفل هذا السطر.

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

·      أنظمة الشبكة:

الشبكة (grille) عبارة عن تخطيط يعتمد على قياسات دقيقة. وهي مكونة من محاور (المساحات المخصصة لوضع المحتوى) والمزاريب (المساحات الفارغة بين المحاور) أو بالفرنسية: gouttière.

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

·      الفراغ:

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

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

5. الأنواع الأكثر شيوعا من التخطيطات:

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

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

·      تخطيط ذو العمود الواحد:

يسمح التخطيط (mise en page) الذي يحتوي على عمود واحد، غالبًا ما يكون محاذيًا للوسط، بتنظيم المحتوى بشكل تسلسلي.

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

·      التخطيط ذو العمودين:

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

·      التخطيط ذو الأعمدة المتعددة:

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

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

·      تخطيط غير متماثل:

يقوم التخطيط غير المتماثل (Mise en page asymétrique) بترتيب العناصر المختلفة على نطاق غير متساوٍ وقربها. ولكن على الرغم من أن عدم التماثل هو نقيض الشبكة (grille)، إلا أن عدم التماثل لا يعني الفوضى.

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

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

6. الخاتمة:

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

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

-----------------------------------------------------------------------------------------------------

المقال مترجم

النص الأصلي: Les principes de base de la mise en page de site web