التنقل فى موقع الويب والقوائم [الأنواع وأهم الأمثلة]

يعد التنقل الجيد أحد أهم ميزات موقع الويب. ونحن لا نقول ذلك فقط – هناك أبحاث تدعمه.

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

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

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

ما هو التنقل في الموقع؟

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

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

ما هي قائمة التنقل؟

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

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

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

an iceberg chart demonstrating the relationship between website navigation interface and information architecture

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

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

Example website hierarchy with 4 levels

مصدر الصورة

Nashville zoo website displaying sub-navigation menu under primary nav link for Support

ماذا هل التنقل الفرعي على موقع ويب؟

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

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

an example of website navigation on seophora's website

مصدر الصورة

أنواع التنقل في الموقع

هو أحد – إن لم يكن الأكثر أهمية عنصر التصميم على موقع الويب. إنه يؤثر في النهاية على ما إذا كان الزوار يصلون إلى صفحتك الرئيسية ويتصفحون ، أو ينقرون على الزر “رجوع”.

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

التنقل الأفقي شريط

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

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

Horizontal Navigation menu on Blavity

مصدر الصورة

قائمة التنقل المنسدلة

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

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

an example of website navigation on seophora's website

مصدر الصورة

قائمة التنقل في همبرغر

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

تحقق من قائمة الهامبرغر على موقع Nettle Studio للهواتف المحمولة.

Hamburger menu on Nettle Studio's mobile site

مصدر الصورة

قائمة تنقل الشريط الجانبي العمودي

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

ألق نظرة على الشريط الجانبي الرأسي لمطعم أربور أدناه.

مصدر الصورة

قائمة التنقل في التذييل

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

نيويورك تايمز

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

Fat footer on the New York Times

مصدر الصورة

تصميم شريط التنقل في موقع الويب

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

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

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

ما الذي يجب تضمينه في شريط التنقل في موقع الويب الخاص بك؟

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

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

فرز البطاقات

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

قم بدعوة أشخاص من خارج مؤسستك لإجراء عملية بسيطة

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

Emerson College's object-based navigation options

مصدر الصورة

تقارير الإسناد

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

مصدر الصورة

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

تدفق المستخدمين

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

كيف يمكنك طلب عناصر الملاحة الخاصة بك؟

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

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

كيف يمكنك صياغة خيارات التنقل الخاصة بك؟

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

الكائن القائم

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

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

cards in a card sorting exercise to improve website navigation

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

Horizontal navigation bar on Propa Beauty website

مصدر الصورة

مستند إلى الجمهور

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

في المثال أدناه ، تقوم Boston College بعمل جيد باستخدام نهج قائم على الجمهور بالاشتراك مع التنقل القائم على الكائن.

Subnavigation menu on NWP ecommerce site

مصدر الصورة

محرك بحث محسن

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

أمثلة على تصفح مواقع الويب

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

Propa Beauty

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

Horizontal navigation menu and hamburger menu used on The Shade Room

مصدر الصورة

NWP

NWP هو موقع آخر للتجارة الإلكترونية به شريط تنقل أفقي. على عكس Propa Beauty ، فإن شريط التنقل في NWP هو قائمة مدمجة. عندما يتم تحميل الصفحة ، يمكنك فقط رؤية روابط التنقل الأساسية. ومع ذلك ، إذا قمت بالتمرير فوق “تسوق” ، فستظهر قائمة منسدلة تسرد الفئات الفرعية المختلفة للملابس التي يمكنك التسوق لشراءها على الموقع.

a mega navigation menu on the website for patagonia

مصدر الصورة

The Shade Room

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

a mega navigation menu used on the website for briogeo

مصدر الصورة

باتاغونيا

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

مصدر الصورة

بريوجيو

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

a mega navigation menu used on the website for briogeo

مصدر الصورة

Twitter

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

Twitter's vertical sidebar menu featuring icons and text

مصدر الصورة

أوليفر جيليزو

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

an example of website navigation on a personal website

مصدر الصورة

Pipcorn

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

a dropdown navigation menu on Pipcorn's website

مصدر الصورة

أفضل ممارسات تصفح مواقع الويب

    1. كن متسقا.

Clicks to completion graph shows users aren't any more likely to quit a task after three clicks تصميم يناسب كل حجم شاشة. Vertical sidebar menu on Arbor resturant site إتاحة الوصول إلى أهم المعلومات. Madewell nav links appear with underline on hover an example of website navigation on seophora's website أضف فتات الخبز.

Vertical sidebar menu on Arbor resturant site

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

1. كن متسقًا.

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

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

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

Breadcrumb navigation on Best Buy website

مصدر الصورة

2 . تصميم لكل حجم شاشة.

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

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

3. اجعل أهم المعلومات متاحة.

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

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

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

4. أضف فتات الخبز.

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

لا تأخذ الكثير من العقارات أيضًا. يتكون شريط التنقل الثانوي هذا عادةً من روابط نصية مفصولة بالرمز “أكبر من” (>) ويتم وضعها أسفل العنوان.

في المثال من Best Buy أدناه ، قد تتصفح أجهزة الكمبيوتر المحمولة وتدرك أنك تريد جهازًا لوحيًا. بدلاً من البدء من جديد باستعلام جديد في مربع البحث ، يمكنك ببساطة النقر فوق رابط “أجهزة الكمبيوتر والأجهزة اللوحية” في قائمة مسار التنقل.

تصميم التنقل على موقع الويب الخاص بك

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