لوحة المتصدرين

سنتحدث عن تصميم موقع إلكتروني بشكل عام في هذا المقال، ولكن يجب أن نوضح أن مجال بناء المواقع الإلكترونية يتفرع إلى فرعين أساسيين هما تصميم المواقع وتطويرها، فتصميم المواقع يختص بترتيب العناصر المرئية واختيارها وتخطيط سلوك المستخدم وتجربته من حيث طريقة تفاعله مع الموقع وكيفية استقباله لرسالته التي أنشئ من أجلها، أما تطوير المواقع فيختص بتحويل تلك التصاميم المرئية إلى أكواد وشيفرات برمجية يخرج منها منتجات جاهزة للإطلاق. ورغم تشعبات هذا المجال التي تتزايد كل حين إلا أن أغلب حديث العملاء عند الرغبة في تصميم مواقع لهم سيدور حول التصميم المرئي للعناصر والنماذج وترتيبها على الشاشة، وكيفية ظهور الموقع على الشاشات المختلفة سواء كانت حواسيب أو هواتف أو غيرها، وطريقة تفاعل المستخدم مع عناصر الموقع. خطوات تصميم موقع إلكتروني وبنائه نلاحظ أننا ذكرنا نوعين من أنواع تصميم المواقع في الفقرة السابقة، وهما التصميم المرئي وتصميم تجربة الاستخدام، وهما يشبهان الهندسة المعمارية للمباني حيث يرى المستخدم آثارهما مباشرة عند تفاعله مع الموقع من حيث تنسيق الواجهة وترتيب العناصر وتناسق الألوان والتفاعلات الموجودة فيها. كذلك فإن هذين النوعين من التصميم هما أول مرحلتين من مراحل تصميم مواقع الإنترنت أو التطبيقات الموجهة للهواتف أو غيرها من الأجهزة، ثم يأتي بعدهما تطوير الواجهات سواء الأمامية أو الخلفية. 1. تصميم تجربة الاستخدام يختص مصمم تجربة الاستخدام User Experience (UX) بدراسة الفئات المستهدفة من الموقع، وحالاتهم الصحية والنفسية وأعمارهم وجنسياتهم، وذلك من خلال بحوث عميقة لطبيعة نشاط العميل والموقع والأهداف التي يجب أن يحققها الموقع أو التطبيق المراد إنشاؤه، من أجل توجيه انتباه المستخدم إلى العناصر التي يريد له صاحب الموقع أن يهتم بها أو يراها، إضافة إلى تخطيط تجربة استخدامه عمومًا داخل الموقع. وتظهر أهمية هذا المجال عند تصميم مواقع طبية مثلَا لا تراعي فئات المستخدمين التي لديها مشاكل في النظر أو القراءة أو السمع، فلا يراعي تهيئة الموقع لتلك الفئات من المستخدمين، فهل تتخيل موقعًا لمستشفى للأطراف الصناعية فيه الكثير من الحقول التي على المستخدم ملؤها في استمارة حجز موعد في مستشفى؟ ويضع مصمم تجربة الاستخدام الخريطة التأسيسية للموقع، وكيف يجب أن يكون التصميم المرئي للواجهة، وترتيب كل قسم رئيسي وفرعي فيه، وعدد النقرات التي ينقر عليها المستخدم للوصول إلى العناصر الهامة في الموقع، والألوان التي يجب استخدامها، وأحجام الأزرار والعناصر، وهكذا. 2. تصميم واجهة المستخدم يأتي مصمم واجهة المستخدم User Interface (UI)‎ ليعمل على هذه النسخة التي أخرجها مصمم تجربة الاستخدام مسترشدًا بها، فيصمم الواجهة النهائية التي يراها المستخدم من قوائم وأزرار وألوان وغيرها وفق مبادئ تصميمية تحقق أهداف تجربة الاستخدام. قد يتخصص مصمم الواجهات المرئية في تصميم العناصر المرئية فقط إذا كان يعمل في شركة كبيرة وفي فريق تصميم كبير، لكن الغالب أنه يتجاوز هذه المرحلة إلى تصميم مواقع الإنترنت بحيث تكون تفاعلية، تستطيع بقية الفرق أن يتفاعلوا معها ليعرفوا الأثر المطلوب تنفيذه عند النقر على أحد الأزرار، أو كي يستطيع العميل أن يرى نسخة شبه حية من الموقع قبل البدء في تطويره وبنائه. 3. تطوير واجهة المستخدم بعد تمام مرحلة تصميم المواقع أو التطبيقات بحيث يكون لدينا نسخة مرئية جاهزة منها، ينتقل العمل إلى مطور الواجهات الأمامية Front End Development الذي يعمل على برمجة هذه الواجهات لتتحول من مجرد تصميمات إلى نسخة حية من الموقع يستطيع العميل أن يتفاعل معها بنفس كيفية تفاعل المستخدم النهائي معها. ويستخدم لغات وصفية مثل HTML وبرمجية مثل جافاسكربت لإتمام عمله، إضافة إلى أطر عمل Frameworks لئلا يعيد اختراع العجلة من الصفر في المهام المكررة. ومطور الواجهات الأمامية هو المسؤول عن إنشاء التأثيرات المرئية للأزرار والقوائم والانتقالات في الصفحة الواحدة وبين الصفحات. 4. تطوير الواجهة الخلفية ينشئ مطور الواجهة الخلفية قواعد البيانات التي تلتقط بيانات المستخدم من نماذج التسجيل وبيانات وصور وغيرها لتخزينها وتصنيفها ثم جلبها للمستخدم عند الحاجة، وكذلك الخوادم التي تكون عليها المواقع نفسها وقواعد بياناتها. وتختلف أهداف المطورين عن المصممين في أنهم يولون أهمية كبيرة لسرعة تحميل الموقع والعناصر التي فيه، وكذلك كفاءة التشغيل للخوادم لئلا تكون عرضة للاختراق أو التعطل، على عكس المصممين الذين يهتمون بتفاعلات المستخدم مع الواجهة اﻷمامية، وسهولة فهمه للمطلوب من الموقع أو التطبيق، وسرعة وصوله للمعلومات التي يحتاج إليها بأقل عدد من النقرات والإجراءات. الأدوات المستخدمة في تصميم موقع يشترك مصمم تجربة الاستخدام ومصمم الواجهات المرئية في بعض البرامج التي يستخدمونها في تصميم المواقع، لكن توجد بعض البرامج والأدوات التي ينفرد بها كل منهما، وفيما يلي أشهر تلك البرامج. Adobe XD يُستخدم برنامج Adobe XD من حزمة أدوبي لإنشاء نماذج أولية للمواقع والتطبيقات إما ثابتة أو تفاعلية، إضافة إلى مزية التعاون بين المصممين على نفس التصميم. Figma يسمح برنامج Figma ببناء نماذج أولية أيضًا للمواقع والتطبيقات واختبار قابلية استخدامها -وهو أمر ضروري لمصممي تجربة الاستخدام-، وهو أيضًا بيئة تفاعلية يستطيع فيها المصممون التعاون في العمل على نفس المشروع في نفس الوقت -مثل العمل المشترك على تطبيقات جوجل السحابية-، مما يعني أنه ليس تطبيقًا مستقلًا وإنما يعمل داخل المتصفح. ‎FlowMapp - Octopus‎ هذان التطبيقان يعملان في المتصفح أيضًا، ويُستخدمان في إنشاء خريطة تدفق Flow map لسلوك المستخدمين في التطبيقات، وكذلك مخططات التطبيقات وخرائط المواقع، كي تكون واضحة لبقية فرق العمل من مصممي الواجهات المرئية والمطورين، مما يعني أن هاتين اﻷداتين لمصممي تجربة الاستخدام خاصة. ‎Balsamiq‎ تُستخدم هذه الأداة لإنشاء إطارات سلكية Wireframes للموقع أو التطبيق، وهي كذلك لمصممي تجربة الاستخدام، حيث يستخدمونها لإنشاء تصميمات بسيطة لعناصر وتقسيمات الموقع أو التطبيق دون تشتيت بقية فرق العمل بتفاصيل العناصر من نصوص وأيقونات وألوان وغيرها. Adobe Ai أبقينا هذا البرنامج إلى نهاية القائمة ربما لإمكانياته الكبيرة، حيث يمكن تنفيذ أغلب مهام البرامج والأدوات السابقة فيه، وهو أقدم هذه الأدوات في سوق التصميم وأشملها، وكذلك أشهرها بين مصممي تجربة الاستخدام والواجهات المرئية على حد سواء. اللغات المستخدمة في تطوير المواقع نأتي إلى اللغات التي يستخدمها المطورون لتحويل التصميمات المرئية إلى تطبيقات حية جاهزة للإطلاق في السوق، وسنبدأ بمطوري الواجهات الأمامية أولًا ثم ننتقل إلى الواجهة الخلفية. HTML لا تُعد لغة HTML لغة برمجة وإنما هي لغة توصيفية تُستخدم لإنشاء هيكل واضح لصفحات الويب، فهي التي تحدد أن هذا النص عنوان وذاك نص عادي، وهذه قائمة غير مرتبة، وبالمثل تحدد بقية العناصر من روابط تشعبية وصور وأقسام في الصفحة وغيرها. لعل HTML هي أبسط اللغات في تعلمها إذ قد لا تستغرق بضعة أيام لفهم أساسياتها ومن ثم البناء بها أو الانتقال إلى بقية اللغات. CSS لغة CSS هي لغة تنسيق تضفي بعض مظاهر الحياة على صفحات الويب مع توحيد مظهر تلك الصفحات في نفس الوقت، وكذلك تُستخدم لإنشاء تصميمات متجاوبة responsive للمستخدمين لتناسب الأجهزة التي يتصفحون منها سواء كانت هواتف محمولة أو حواسيب لوحية أو حتى أجهزة سطح المكتب. تكمن فائدتها الأساسية في أن شيفرتها توضع في ملف منفصل عن HTML، ثم تُكتب فيها القوانين العامة لتصميم الموقع، مثل تنسيق العناوين الرئيسية وألوانها وحجم خطوطها، حتى إذا أردنا تغيير ذلك التنسيق لجميع العناوين غيرناه مرة واحدة في ملف CSS، بدلًا من تغييره في كل صفحة على حدة، وهكذا في بقية عناصر الصفحات من تنسيق الأزرار والألوان ومحاذاة النصوص مثلًا. جافاسكربت Javascript تأتي لغة جافاسكربت لتكمل أغلب الجوانب التي تبقى في عملية تطوير الويب سواء للواجهة الأمامية أو الخلفية، سواء باللغة نفسها أو بأطر العمل frameworks التي بُنيت عليها، فهي لغة برمجة أصيلة -ليست وصفية مثل HTML- تُستخدم لإنشاء تفاعلات من الموقع مع إجراءات المستخدم، إما باستخدام جافاسكربت نفسها أو أحد أطر العمل المشهورة التي بُنيت عليها، مثل أنجولر Angular و jQuery و Vue.js. وتُستخدم بعض أطر العمل تلك لبناء خدمات وتطبيقات تعمل في الواجهة الخلفية أيضًا للمواقع، مثل أنجولر Angular و Vue.js، إضافة إلى أطر عمل مثل Next.js. لغات أخرى يمكن استخدام العديد من لغات البرمجة وأطر العمل لتصميم مواقع الإنترنت وتطويرها، فمثلًا يُستخدم إطار العمل جانغو Django المكتوب بلغة بايثون لكتابة تطبيقات للويب، وكذلك إطار العمل Ruby-on-rails المكتوب بلغة روبي Ruby، وهكذا، فلم يعد الأمر مقصورًا على لغة جافاسكربت وحدها لإتمام عملية بناء الموقع. ويتوقف قرار اللغة المستخدمة في بناء الموقع وكذلك إطار العمل على طبيعة المشروع المطلوب والعميل والبيئة التي سيعمل فيها والتطورات المستقبلية له، لكن تظل جافاسكربت هي اللغة اﻷشهر المستخدمة في تطوير واجهات الويب أو الواجهات الأمامية لمواقع الإنترنت. الأدوات المستخدمة في تطوير الواجهات الأمامية يحتاج مطورو المواقع الإلكترونية إلى بيئات أو أدوات يستخدمونها لكتابة شيفراتهم البرمجية، وبيئات أخرى لاختبارها، وفيما يلي أمثلة لأهم هذه الأدوات. المحررات النصية Text Editors وهي برامج كتابة نصوص بسيطة مثل Notepad، لكنها تكون موجهة للمبرمجين والمطورين، فتتميز بتمييز النصوص بصريًا وفقًا لنوعها ليسهل قراءتها، وكذلك الإكمال التلقائي للنصوص، وغيرها من المزايا المخصصة لتطوير المواقع والتطبيقات، وأشهر هذه المحررات ما يلي: ‎Vim‎ ‎Emacs‎ ‎Notepad++‎‎ ‎Sublime Text‎ بيئات التطوير المتكاملة IDEs تختلف بيئة التطوير عن المحرر النصي العادي في أنها أشمل وأكثر تكاملًا، فإضافة إلى المحرر النصي فإنها تحتوي على مصرِّف compiler و منقِّح debugger وأداة لبناء واجهات المستخدم المرئية، كما تدعم عدة لغات أحيانًا مثل بايثون و PHP وروبي Ruby و جافاسكربت وغيرها. فيما يلي أهم بيئات التطوير المستخدمة في تطوير المواقع: ‎Visual Studio Code‎ ‎IntelliJ IDEA‎ ‎Aptana Studio 3‎ ‎Eclipse‎ ‎NetBeans‎ ‎Webstorm‎ خاتمة مواقع الإنترنت هي المقرات الافتراضية للشركات والمؤسسات، وهي عنصر لابد منه في العلامة التجارية لأي كيان له نشاط على الويب أو على الأرض، سواء كان ذلك شركة أو مؤسسة أو حتى فردًا مستقلًا. وترغب هذه الكيانات بإنشاء مواقع لها لبيع منتجاتها أو الترويج لأنشطتها والتعريف بها، أو توجيه جمهورها إلى استخدام تطبيقات مخصصة للهواتف، أو حتى لمجرد حجز خدماتها والتواصل من خلالها، إضافة إلى أن وجود موقع إنترنت يرفع كثيرًا من سمعتها لدى محركات البحث، مما يعني تصدرًا لنتائج البحث وشهرة أكثر. وقد ذكرنا في بداية المقال أن العملاء يولون أهمية خاصة لتصميم الموقع الذي يريدون له أن يعكس هويتهم التي تمثلهم، وتحمل روح المؤسسة أو الشركة من حيث جدية التصميم أو حداثته أو غير ذلك، وكذلك مناسبته للفئات المستهدفة منه. وعلى ذلك ينبغي أن يطلع المصمم -إلى جانب إلمامه بالجوانب الفنية الخاصة بعمله- على أصول إدارة المنتجات الرقمية، خاصة إن كان يوظف مطورين آخرين للعمل معه أو كان يدير فريق تصميم، وكذلك على أسس التعامل مع العملاء ليفهم احتياجاتهم ويوصل لهم رأيه المهني بالطريقة المثلى. إقرأ أيضا تعلم أساسيات البرمجة تعلم البرمجة كيف تتعلم البرمجة: نصائح وأدوات لرحلتك في عالم البرمجة برمجة مواقع الويب: دليلك المختصر مبادئ تصميم واجهة المستخدم UI الجيدة قواعد تصميم واجهة المستخدم

موضوع هذا المقال معني بإدراك العين للتصميمات، فعندما نتعلم كيفية إدراك العين البشرية ستتحسن قدرتنا على ترتيب عناصر التصميم بفاعلية أكبر. يخضع محتوى تنسيق أي صفحة رقمية لتسلسل محدد، إذ توجد الترويسات Headers أعلى النص الأساسي، بينما توجد القوائم على الشاشة في الأعلى أو الأسفل أو اليمين أو اليسار عادةً. يحاول المصممون تنظيم المحتوى بحيث تكون الأولوية لظهور الجزء الأهم من أي صفحة أولًا، ثم يُدرجون باقي المحتوى مرتبًا من الأكثر إلى الأقل أهمية. يُقصد بالتسلسل Hierarchy ترتيب المحتوى وفق الأهمية. ويُستخدم أيضًا لإبراز العلاقة بين أجزاء المحتوى عند وجودها. يحدد المستخدمون التسلسل المرئي Visual Hierarchy للتطبيق أو الموقع الإلكتروني، إذ تُعطى الأولوية للعنصر الذي يجذب العين أولًا، ثم يأتي كل عنصر يجذب الانتباه بشكل ثانوي للعنصر السابق له. مبادئ التسلسل تتلقى الحواسيب المعلومات على شكل بيانات، بينما تتلقاها العين البشرية مرئيًا، وبالتالي نخضع للميول الفطرية لأعيننا البشرية. قد تتذكر المواد التي كنا نقرأها في الطفولة وما تحويه من صور كثيرة وكتابة بخطوط كبيرة. كنا نفهمها سواء كانت قصصًا مصورة أو دفاتر تلوين أو قصصًا قصيرة، وذلك لفهمنا الرسوم التوضيحية وتتبعنا تسلسل الأحداث مع الاستعانة بالنصوص البسيطة سهلة القراءة. يتأثر إدراكنا للمعلومات بعدة عوامل تسهم في كيفية ترتيب تسلسل المحتوى ضمن التنسيق Layout. لخص جونز Jones عام 2011 العوامل المؤثرة على التسلسل بالتالي: الحجم يزداد جذب العنصر للانتباه بزيادة حجمه بالنسبة للعناصر الأصغر. تذكر عناوين الصحف، تكتب الصحف العنوان بخط كبير للإشارة إلى محتوى باقي النص المكتوب بخط أصغر، إذا كان النص لخبر عاجل مثلًا ستتجه عينك إلى العنوان مباشرةً، لاحظ كيف يبرز العنوان ويدفعك لمعرفة المزيد حوله. اللون تجذب الألوان الزاهية الانتباه أكثر من الألوان الباهتة غالبًا. نستخدم جمعيًا أقلام التمييز لتحديد بعض الأفكار أثناء الدراسة من مفكرة مطبوعة بالأبيض والأسود. يبرز اللون الأصفر أكثر من الأبيض لأنه أكثر إشراقًا وإشباعًا، ثم تجذب الألوان الأغمق انتباه العين بعد الألوان الزاهية، ثم الدرجات الأفتح، لأنها تبدو بعيدة وباهتة. أما الألوان الأقل جذبًا للانتباه فهي الدرجات الرمادية والباهتة من الألوان. تخيّل مثلًا أنك تمشي في يوم ضبابي وتحاول العثور على أصدقائك، يرتدي أحدهم سترة واقية واضحة، ستلاحظه أولًا، ثم ستجد صديقك الذي يرتدي معطفًا مطريًا خمريًا تاليًا. وسيصعب إيجاد صاحبة المعطف الطويل الفاتح. وقد لا تلاحظ وجود صديقكم الرابع بينما هو يقف بجانبكم لأنه لسوء الحظ يرتدي سترة رمادية اللون مع بنطال رياضي باللون ذاته. التباين تجذب الألوان المتباينة جيّدًا الانتباه أكثر من الألوان قليلة التباين. يساعدك التباين على إبراز العناصر الأهم في تصميمك. كل شيء نسبي، تخيل أنك تريد إنشاء تصميم مبني على خطة مهندس معماري للمجمعات السكنية العالية، إذ ترغب بعرض المباني المضاءة وجيدة التهوية وصديقة البيئة فوق سطح الأرض، ولكنك ترغب أيضًا بعرض الأساسات العميقة المتينة وموقف السيارات الموجود تحت الأرض. عند تقسيم تصميمك بهذا الأسلوب ستلفت الأنظار إلى ميزات المعيشة المبهجة للشقق الموجودة بجانب الغابة. هكذا يكون تصميم الجزء السفلي (التذييل Footer) حيث تظهر فائدة البنية وأمانها ويحفز التسلسل تفاعل المستخدم. المحاذاة تنظم المُحاذاة عناصر التصميم. يحدد وضع المحتوى أولًا ثم عمود الشريط الجانبي الأولوية للقارئ. نتوقع أن نجد المعلومات المهمة مثل أزرار تسجيل الدخول في الزاوية العلوية اليُسرى من الصفحة، وينطبق الكلام السابق على المجلات أيضًا. عندما نبحث عن جملة مقتبسة من مقابلة مثلًا، إذ يريد الكاتب تسليط الضوء على كلام المُتحدث، يكون للاقتباس تسلسل مرئي يجذب انتباهنا أولًا لأنه مكتوب بخط أكبر وخارج عن محاذاة باقي النص. التكرار تمنح أساليب التكرار المشاهد إحساسًا بارتباط أجزاء المحتوى. عند تغيير الأسلوب الرتيب لنص مكتوب إلى نص باللون الأحمر سيصرف النص المميز الانتباه إليه عن المحيط المألوف. تعد الارتباطات التشعبية Hyperlinks مثالًا آخر؛ عندما تزور صفحة تحوي الكثير من الكلمات المكتوبة باللون الأزرق وتحتها خط، تعلم مباشرةً أنها مُتجاوبة ويمكنك النقر عليها للانتقال إلى صفحات أخرى. التقارب يدل قرب عناصر التصميم من بعضها على ارتباطها. يمكننا فصل عناصر القائمة بمسافة فارغة، ويمكن تقريب العناوين من أول فقرة من المعلومات، يوضح هذا التقارب أن عناصر القائمة منفصلة رغم ارتباطها نسبيًا وأن العناوين مرتبطة بالمحتوى التالي لها. المساحة البيضاء يمكنك استغلال المساحات حول المحتوى لجذب الانتباه إلى أجزاء محددة منه، لا يُشترط أن تكون المساحة البيضاء بيضاء وقد تأخذ أي لون. تخيل الجهد الذي يمكن أن توفّره عليك. لهذه المسافات وظيفتان فهي تسهّل على العين استقبال المعلومات، وتترك لها مجالًا للتركيز على كل جزء من المعلومات مثلًا على كل فقرة. البنية والأسلوب يساعد استخدام البُنى والأساليب في ترتيب أهمية المحتوى أيضًا. فهي تعطي مظهرًا عامًا للتصميم تمامًا كالخطوط. تخيل العمل على مشروعين حيث يريد وكيلا سفر صفحتي هبوط لنشر عروض منتجعاتهما. يملك أحد المُنتجعين طابع الشاطئ وللآخر طابع البُحيرة. نعرض في منتجع الشاطئ خلفية لصورة مقربة للماء الصافي أعلى الرمال البيضاء الجميلة، كانت النتيجة مُرضية، إلا أننا حين حاولنا تكرار الأسلوب السابق مع مُنتجع البُحيرة ظهرت كثير من الحصى والحجارة الكبيرة الداكنة من خلال المياه الزجاجية الصافية وكانت هذه الُبنية مُشتتة لاحتوائها على تفاصيل أكثر من بنية الرمال الناعمة. تؤكد تقارير كوبنهاجن تزايد المصممين ولا سيما مصممي المواقع المدركين لأهمية إشراك المستخدمين مباشرة. يؤدي الاطلاع البسيط على علم النفس الغرض. أنماط التسلسل المرئي توجد أنماط شائعة للتسلسل المرئي سواء في الصفحات المطبوعة أو الرقمية. تستند هذه الأنماط إلى حركات العين الفطرية عند النظر إلى صفحة جديدة. تُقرأ اللغة الإنجليزية مثلًا من اليسار إلى اليمين، وبالتالي لقرّائها نمط معين لمسح صفحة تحوي نصًا، بينما لقرّاء اللغة العربية نمط مختلف لأن اللغة العربية تُقرأ من اليمين إلى اليسار. من المهم فهم معالجة المستخدمين للمعلومات قبل اعتماد نمط التسلسل المرئي. سنطرح تاليًا أسلوبين شائعين للقراءة باللغة الإنجليزية من اليسار إلى اليمين. النمط Z يُستخدم النمط Z للمسح البصري بكثرة في مواقع الإنترنت التي تحوي نصوصًا قليلة مثل مواقع الإعلانات المصغرة للخدمات أو المنتجات دون إدراج معلومات كثيرة. يرى المستخدم أن نصوص الصفحة قليلة وتبدأ عينه بمسحها من أعلى اليسار أفقيًا حتى أعلى اليمين ثم تُلقي نظرة سريعة على المحتوى بشكل مائل إلى أسفل اليسار قبل الانتقال أفقيًا إلى أسفل اليمين. يمكنك الاستفادة من هذا النمط عندما تضع المعلومات الأهم على امتداد الخط Z الذي تتبعه العين أثناء مشاهدة الصفحة، أي لديك أربع نقاط مرتبطة بثلاثة خطوط تشكل حرف Z. النمط F يستخدم المصممون النمط F عادة في المواقع التي تحوي نصوص كثيرة أو مقاطع فيديو. يمسح المستخدمون المحتوى وفقًا للنمط F من اليسار إلى اليمين على طول الجزء العلوي، ثم يعودون لمسح الجانب الأيسر من أعلى الصفحة إلى الأسفل بحثًا عن عناصر مرئية للمعلومات المطلوبة ثم يُكملون المسح من اليسار إلى اليمين بعد أن يجدوا العنصر الذي يبحثون عنه، ويكررون العملية السابقة حتى يصلوا إلى نهاية الصفحة. وطبعًا نقلب حرف F أفقيًا ونتابع من اليمين إلى اليسار في حالة المواقع العربية. ينتج عن المسح وفق هذا النمط مخطط يشبه الحرف F، كالموضح في الصورة الموجودة في بداية المقال. يمكن استخدام النمطين Z وF في صفحات موقع إلكتروني واحد. قد تصمم صفحة رئيسية واضحة موافقة للنمط Z، ثم يمكنك عرض المزيد من البيانات وفق النمط F عندما يتعمق المستخدم ضمن الموقع. الخلاصة يمنحنا التسلسل المرئي ترتيبًا لتسهيل فهم التصميم. نريد ترتيب الترويسات والقوائم وفقًا لأهميتها حيث نحدد ما يريده المستخدمون وإلى ماذا نريد توجيههم. يعالج المستخدمون المعلومات بصريًا، ويدركون العناصر وفق ترتيب المصمم لأولويتها باستخدامه: الحجم: تجذب العناصر الأكبر الانتباه أولًا. اللون: تجذب الألوان الزاهية الانتباه قبل الألوان الباهتة. التباين: تجذب الاختلافات الواضحة بين العناصر الانتباه إلى العنصر الأكثر إشراقًا. المحاذاة: يتوقع المستخدمون إيجاد عناصر معينة في أماكنها المُعتادة. التكرار: تجذب العناصر المُكررة انتباه المستخدم مثل الأجزاء الملونة من النص. التقارب: يشير تقريب العناصر المرتبطة من بعضها إلى وجود علاقة بينها، مثل وضع العنوان بجانب النص المرتبط به. المساحة البيضاء: إن إضافة مسافات فارغة حول العناصر يميزها إلى مجموعات منفصلة من المعلومات. البنية والأسلوب: يجذب استخدام البنى Textures والأساليب Styles الأنظار كما يضيف طابعًا على التصميم. تُقرأ التصاميم في العالم الغربي وفق نمطين للتسلسل المرئي: النمط Z: يميل المستخدمون لمسح التصاميم التي لا تحوي الكثير من التفاصيل من أعلى اليسار إلى أعلى اليمين، ثم ينتقلون وفق خط مائل إلى أسفل اليسار ثم أفقيًا إلى أسفل اليمين. النمط F: نمسح التصاميم الحاوية على نصوص كثيرة بدءًا بالأعلى من اليسار إلى اليمين، ثم من اليسار إلى الأسفل بحثًا عن المعلومات التي نرغب بمعرفتها. ثم عند مصادفتها نكمل المسح من اليسار إلى اليمين. يمكنك الاعتماد على عين المستخدم واستخدام هذه الأنماط لزيادة تأثير تصميماتك. خذ كل العوامل السابقة بالحسبان أثناء التخطيط لتصميمك. قد تقرر استخدام عدة أنماط معًا، بما في ذلك دمج النمطين Z وF. تذكر أنك توجه تصميمك للمستخدمين، وفقًا لجهازهم المستخدم والتصميم الذي قد يرغبون برؤيته على الإنترنت. ترجمة -وبتصرّف- للمقال Visual Hierarchy: Organizing content to follow natural eye movement patterns لصاحبه Mads Soegaard. اقرأ أيضًا تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساسيات التصميم المرئي مبادئ التصميم المرئي في تصميم واجهة المستخدم لماذا يحتاج كل تصميم إلى ثلاثة مستويات من التسلسل في تنسيق النصوص مبادئ علم النفس التي تساعد على تحسين تصميم موقعك الإلكتروني