التنقل المبوب: متى يتم استخدامه ، وكيفية تحسينه

يأتي أحد اقتباسات UX المفضلة لدي من Chikezie Ejiasi ، رئيس الاستوديو وأنظمة التصميم في Google.

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

هل يمكن أن يكون التنقل المبوب واضحًا ودقيقًا؟ بالطبع يمكن ذلك ، مما يجعله شكلًا صالحًا للتنقل وتنظيم المحتوى.

ما يهم ، كما هو الحال مع معظم الأشياء المتعلقة بـ UX ، هو كيفية تنفيذه وكيفية تحسينه.

ما هو التنقل المبوب؟

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

بشكل عام ، عند النظر إلى التنقلات المبوبة ، ستلاحظ بعض الخصائص المشتركة:

1. زوايا علامة مدورة
2. فصل علامات التبويب سواء كانت مسافة أو سطر واحد ؛
3. تأثيرات التمرير على علامات التبويب ؛
4. التدرج لإضافة العمق والأبعاد إلى علامات التبويب.

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

جاستن ميفسود ، UsabilityGeek :

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

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

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

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

مثل أي نظام تنقل جيد ، تسمح لك علامات التبويب بما يلي:

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

متى يكون استخدام التنقل المبوب فكرة جيدة؟

بشكل عام ، من الجيد استخدام التنقل المبوب عندما ...

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

كما يشرح جاكوب نيلسن من مجموعة Nielsen Norman Group ، عندما يزداد التنقل المبوب بشكل معقد لدرجة أنه يتطلب صفوفًا متعددة ، تبدأ المشاكل في الظهور ...

جاكوب نيلسن ، مجموعة نيلسن نورمان :

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

أيضًا ، تعد الصفوف المتعددة من الأعراض المؤكدة للتعقيد المفرط: إذا كنت بحاجة إلى علامات تبويب أكثر مما يتسع في صف واحد ، فيجب عليك تبسيط تصميمك ". (عبر NN / g)

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

بشكل عام ، ليس من الجيد استخدام التنقل المبوب في الحالات التالية:

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

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

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

الجدال

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

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

كما كتب Luke Wroblewski من Google منذ سنوات ، كانت أمازون رائدة حقًا في هذا الاتجاه ...

Luke Wroblewski، Google :

"في عام 1998 ، كان الموقع يحتوي على فئتين من أعلى المستويات: الكتب والموسيقى.

مع إضافة فئات إضافية (مثل الفيديو والهدايا) ، تم تغيير حجم نظام علامة التبويب الأفقي بشكل جيد وخلق فرصة رائعة للتمييز بين فئات المنتجات من خلال اللون ". (عبر LukeW)

إليك نظرة على كيفية استخدام Amazon للملاحة المبوبة في الأيام السابقة ...

مع ازدياد شعبية الموقع ، ازداد عدد علامات التبويب التي احتاجتها أمازون ...

في عام 1999 ، أطلق جاكوب على هذا "تصميم سيء وإساءة استخدام استعارة علامة التبويب":

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

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

جاكوب نيلسن

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

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

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

كيفية تنفيذ الملاحة المبوبة

تستخدم شركة طيران كندا ، جنبًا إلى جنب مع معظم شركات الطيران الكبرى ، نظام الملاحة المبوب جيدًا ...

عند تنفيذ التنقل المبوب بنفسك (على أي مستوى) ، إليك بعض الأشياء التي يجب وضعها في الاعتبار:

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

يشرح جاكوب سبب أهمية هذا النوع من الاتساق ...

1. الاعتراف. عندما يبدو شيء ما متشابهًا دائمًا ، فأنت تعرف ما الذي تبحث عنه وتعرف ما هو عندما تجده.

2. القدرة على التنبؤ. عندما يعمل شيء ما دائمًا بنفس الطريقة ، فأنت تعلم ما سيحدث عندما تتصرف بناءً عليه.

3. التمكين. عندما يمكنك الاعتماد على معرفتك السابقة بجميع الميزات المتاحة ، يمكنك بسهولة تكوين مجموعة من الإجراءات لتحقيق هدفك.

4. الكفاءة. ليست هناك حاجة لقضاء بعض الوقت في تعلم شيء جديد أو القلق بشأن تأثير الميزات غير المتسقة.

جاكوب نيلسن

أمثلة على التنقل المبوب بشكل صحيح

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

1. مجموعة فن الألبوم

مجموعة Album Art Collection هي مثال شائع إلى حد ما على التنقل المبوب ...

شيئان مثيران للاهتمام هنا ...

1. التنقل عموديًا وليس أفقيًا.
2. يتضمن التنقل رموزًا.

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

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

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

جاكوب جوب ، ستة مراجعات :

"تجنب استخدام الرموز لاستبدال نص التحكم في علامة التبويب لأن الرموز يمكن أن تعني أشياء مختلفة لأشخاص مختلفين - الرهان الأكثر أمانًا هو استخدام النص العادي لوصف معلومات الجزء." (عبر مجلة Smashing)

2. آلة الفاتورة

آلة الفاتورة هي التنقل الأساسي المبوب كمثال تنقل رئيسي ...

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

3. العازلة

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

كانت هنا بداية المحتوى للأفراد ...

وهنا كانت بداية المحتوى للشركات ...

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

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

بصرف النظر عن خطط التسعير المختلفة ، تعرض علامات التبويب القائمة على المنتج شهادة مختلفة تتعلق بالمنتج في علامة التبويب:

كما يوضح David Leggett من UX Booth ، فإن التنقل المبوب ذو صلة بما يتجاوز المستويات الأساسية والثانوية للتنقل. يمكن استخدامها حتى في الجزء السفلي غير المرئي من الصفحة ، كما في حالة Buffer ...

ديفيد ليجيت ، UX Booth :

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

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

أفضل 3 ممارسات يجب تذكرها

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

1. إمكانية الوصول مهمة

تريد أن يكون موقعك متاحًا لذوي الإعاقات أو القيود. للقيام بذلك باستخدام التنقل المبوب ، سيتعين عليك ...

• السماح للأشخاص بالتنقل بين علامات التبويب باستخدام مفتاح "Tab" على لوحة المفاتيح الخاصة بهم.
• السماح للأشخاص بتحديد علامة تبويب باستخدام مفتاح "Enter" على لوحة المفاتيح الخاصة بهم.
• حدد علامة التبويب التي تم تحديدها باستخدام طريقة بديلة. على سبيل المثال ، يمكنك تضمين سمة عنوان مع كلمة "نشط".

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

2. مسائل التقسيم

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

يشرح جاستن سبب أهمية التنظيم السليم ...

جاستن ميفسود ، UsabilityGeek :

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

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

قبل كل شيء ، سترغب في ضمان ...

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

3. السرعة مهمة

لقد كتبنا عن أهمية السرعة مرارًا وتكرارًا. لذلك ، لا ينبغي أن يكون مفاجئًا أن تلعب السرعة دورًا في فعالية التنقل المبوب أيضًا.

يشرحها يعقوب جيدًا ...

جاكوب جوب ، ستة مراجعات :

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

تجنب إعادة تحميل الصفحة عند التبديل بين الأجزاء لأن هذا يؤخر التنقل بين الأجزاء بشكل كبير. يمكن أن يكون المحتوى الذي يتم تحميله عن بُعد باستخدام Ajax خيارًا لمعلومات الجزء الديناميكي والموجودة عن بُعد ولكنه يمثل تحديًا لمستخدمي قارئ الشاشة الذين قد لا يكونون على دراية بالعقد المدرجة بشكل غير متزامن في شجرة المستند. " (عبر مجلة Smashing)

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

خاتمة

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

بمساعدة اختبار قابلية الاستخدام والتحسين ، تتحسن هذه المحادثة أكثر.

كما هو الحال مع أي شيء ، تأكد من إجراء البحث (في هذه الحالة ، البحث في هندسة المعلومات) والاختبار والاختبار والاختبار.

في ملخص…

1. يمكن استخدام التنقل المبوب كنظام تنقل رئيسي وكذلك خارج مستويات التنقل الأساسية أو الثانوية.
2. جرب التنقل المبوب عندما يكون لديك فئتان إلى تسع فئات متشابهة متشابهة بأسماء قصيرة تتناسب مع صف واحد.
3. لا تحاول التنقل المبوب عندما تريد أن يقارن الأشخاص المحتوى أو تجد نفسك تفكر في إضافة رابط "المزيد ...".
4. يمكنك اتباع أفضل ممارسات التنفيذ ، ولكن ...
5. ما يهم هو بياناتك. هل يجد زوار موقعك صعوبة في التنقل في موقعك باستخدام التنقل المبوب؟ قم بإجراء اختبار قابلية الاستخدام لمعرفة ذلك.
6. أصلح المشكلات المنبثقة. أو ، إذا كان هناك العديد من المشكلات المكلفة ، ففكر في نظام ملاحة آخر.
7. إن سهولة الوصول والتقسيم والسرعة كلها أمور مهمة عندما يتعلق الأمر بالملاحة المبوبة ، لذا انتبه جيدًا.

هل تعمل على شيء متعلق بهذا؟ انشر تعليقًا في مجتمع CXL !