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

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

ما هو الملاحة؟

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

هي احتمالات ، كلاهما.

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

70percentpure

موقع 70percentpure يتميز التنقل البسيط على حد سواء الرأسي والأفقي.

1) وضع اللمسات الأخيرة على IA الخاص بك أولا

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

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

إليك بعض الأشياء التي يمكنك أن تسأل نفسك عنها للمساعدة في إعداد مخططك ، وتبريره للعميل:

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

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

2) KISS: حافظ على بساطة ، في بعض الأحيان

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

بلومبرغ

بلومبرغ في الملاحة بسيطة تكذب تعقيد المعلومات على موقعهم.

ومع ذلك ، يمكن أن تكون البساطة خادعة. قد تعمق أكثر وقد تكتشف أن ما هو في الواقع معقد تمامًا تم تعبئته بطريقة ذكية بطريقة تبدو بسيطة. هذا هو IA في العمل.

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

مايكروسوفت

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

microsoft2

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

3) اختيار الاتجاه بعناية

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

كوة

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

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

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

جاك جونز

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

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

سكواريبوشر

القواعد تتغير

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

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

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