تصميم أفكار قائمة التنقل الملهمة والإلهام

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

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

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

هندسة المعلومات

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

وتشمل بنية المعلومات الميزات ، احتياجات المستخدم ، خريطة الموقع ، اختبار و wireframes. يمكنك قراءة المزيد حول بنية المعلومات في مقال بقلم كاميرون تشابمان في هندسة المعلومات 101: التقنيات وأفضل الممارسات.

باستخدام التقنيات التي تمكن المستخدم

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

لمزيد من المراجع على رشيقة تدهور جافا سكريبت, تحقق من هذه المشاركة في 10 طرق مفيدة للرجوع إلى CSS و Javascript.

استخدم مصطلحات بسيطة وسهلة الاستخدام

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

إذا احتاج المستخدم إلى النقر على رابط لمعرفة ما يؤدي إليه الرابط ، فسوف يسهم ذلك في تجربة مستخدم سيئة لزوارك.

أمثلة

المصطلحات الموجودة في قائمة التنقل في موقع Larissa Ness 'سهلة الفهم وشائعة بدرجة كافية. لن يجد المستخدمون ذلك مربكًا لأن لديهم بالفعل تجربة مع قوائم مثل هذه.

في ما يلي مثال جيد آخر على قائمة التنقل في موقع الويب النظيفة والواضحة مع المصطلحات الشائعة المستخدمة ، على csupport.

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

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

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

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

اذكر مكانك

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

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

جراحة وسائل الإعلام يستخدم لونًا أغمق كمؤشر للصفحة الفرعية المفتوحة. بسيط ولكن فعال.

استخدام اصطلاحات الويب

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

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

يمكنك معرفة المزيد حول اتفاقيات الويب هنا:

10 اتفاقيات تصميم الويب
لا تعيد اختراع عجلة تصميم الويب
تصميم مع اتفاقيات الويب

حقن التصميم يضع الشعار في الركن الأيسر العلوي الذي يناسب أحد أكثر اتفاقيات الويب استخدامًا اليوم.

آدمز الخلق يستخدم أحد أكثر اتفاقيات الويب شيوعًا - يتم وضع الشعار في الزاوية العلوية اليمنى من موقع الويب وروابط الصفحة الرئيسية.

اختباره: إشراك طرف ثالث

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

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

توفير السياق

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

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

سارة بارمنتير يستخدم تسميات توضيحية قصيرة ولطيفة أسفل التنقل الرئيسي لتوفير بعض المعلومات حول الصفحات الفرعية التي يرتبط بها التنقل الرئيسي.

أغراض كبار المسئولين الاقتصاديين

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

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

نصوص تنقل مجانية (CSS و jQuery)

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

XML Script عمودي أخبار Script باستخدام HTML و jQuery: vScroller