نصائح لتبسيط موقعك الملاحة

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

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

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

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

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

الخطوة 1: فحص التصميم الحالي

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

أولاً ، سيساعدنا على فهم سبب صعوبة التنقل الأصلي في المقام الأول. موقع الموضوع هو موقع تعليمي ، وموضوع الدروس هو لنظام معقد إلى حد ما.

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

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

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

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

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

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

إن تغيير حجمها مع الكود قبل دعم المستعرض الكامل العالمي لوظيفة CSS3 Zoom كان يعني تغيير كل شفرة JavaScript (عبر خطوط 10,000) ، والتي كانت ستكون مضيعة.

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

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

الخطوة 2: خطة تصميم جديد

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

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

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

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

الخطوة 3: تنفيذ الخطة

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

في fig 4 ، يمكنك رؤية قائمة الدروس غير الموسعة المعروضة في القائمة اليمنى.

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

هذا ما سيراه المستخدم إذا اختار درسًا من القائمة اليسرى:

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

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

الاشياء التقنية

تتضمن البرامج النصية الخارجية وأطر CSS والخطوط المستخدمة في المثال أعلاه ما يلي:

  • التمهيد v3.3.7
  • الخط رهيبة v4.7.0
  • خطوط Google: pompiere ، حفلة واحدة ، جولة varela

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

إن مُنشئ النموذج الأولي للقائمة بسيط للغاية إذا كنت تستخدم Bootstrap كإطار عمل CSS خاص بك.

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

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

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

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

نحن الآن بحاجة إلى إنشاء حاوية للاحتفاظ بعناصر القائمة.

ثم أضف عنصر التنقل ، وفي هذه الحالة لوحة "الإرشادات".

تتم معالجة انهيار العنصر بواسطة CSS وجافا سكريبت الخاصين بـ Bootstrap ، لذلك كل ما نحتاج إليه هو إضافة وظائف لتغيير محتوى العمود الأوسط عند النقر فوق عنصر (l1s1 و l1s2).

يتم التعامل مع هذه من خلال برنامج نصي خارجي ، ولكن يظهر في الشكل 12 من أجل الاكتمال.

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

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

يجب إضافة جميع العناصر بين زوج علامة القائمة ، كما هو موضح.

ستتم إضافة عنصر القائمة التالي عن طريق إدخال سطر جديد في السطر 75 ، ثم باتباع نفس الإجراء بالضبط للبند T1-L2 ، وما إلى ذلك.

بمجرد إضافة جميع العناصر (الفصول) من T1-L1 إلى T1-L6 ، سنضيف فاصل أسطر جديد ، ثم نبدأ قائمة جديدة (كفئة T2) ، باتباع نفس الإجراءات حتى تكتمل القائمة.

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

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

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

بوجدان رانسيا

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