تزامنت العودة إلى الصين مع حدث UXday الذي استضافه قسم تجربة المستخدم في Baidu. وكان موضوع المناقشة الجماعية لدينا من المحرمات عند استخدام علامات التبويب.
الموضوع الذي ناقشناه ركز على نقطة واحدة: كيفية التعامل مع علامات التبويب الضخمة؟
أولاً، دعونا نراجع تاريخ علامة التبويب. علامة التبويب هنا هي مصطلح عام لنوع من العناصر التفاعلية، بما في ذلك التنقل في تصميم الويب واستخدامها في برامج سطح المكتب مثل المتصفحات. تتميز العناصر التفاعلية التي تسمى علامات التبويب عمومًا بالخاصيتين التاليتين:
لديها كل من معاني العمل والحالة. أحد أسباب شهرة علامات التبويب هو سهولة تشغيلها وفي الوقت نفسه تسمح للمستخدمين بمعرفة مكان تواجدهم حاليًا بوضوح (علامة تبويب)
من منظور هندسة المعلومات، لا يتداخل المحتوى بين علامات التبويب بشكل عام. ويجب أن تكون العلاقة بين علامات التبويب متساوية ولا ينبغي أن يكون هناك أي انتماء متبادل.
لذا، بالمعنى الواسع، يمكن في الواقع اختصار معظم قوائم التنقل إلى علامات تبويب.
يعتبر استخدام علامات التبويب في تصميم الويب بشكل عام رائدًا لشركة أمازون. أعتقد أن العديد منكم قد قرأ مقالة المراجعة الكلاسيكية لـ LukeW: تاريخ التنقل عبر علامات التبويب في Amazon (للحصول على النسخة الصينية، يرجى النقر هنا). من هذه المقالة، يمكننا أن نرى أن التنقل في أمازون قد تطور من وجود علامتي تبويب فقط: الكتاب والموسيقى إلى وجود صفين من علامات التبويب في ذروتها في عام 2000. من الواضح أنه عندما يزيد عدد علامات التبويب، تواجه طريقة التفاعل مع علامات التبويب بعض الصعوبات.
مثال آخر هو مربع حوار الإعدادات في Word 2003. كما هو موضح في الشكل أدناه، عندما يكون هناك عدد كبير جدًا من التسميات وتكون مساحة العرض محدودة، يتعين على Microsoft ترتيب التسميات في صفين. المشكلة الكبيرة في ذلك هي أنه عند تحديد الصف العلوي من التصنيفات، كيف يمكن التعبير عن العلاقة بين الحالة المحددة وصفحة المحتوى الحالية؟
وقد تم انتقاد نهج مايكروسوفت. في الصورة أعلاه، عندما ينقر المستخدم على الصف العلوي من التسميات، يتم تبديل الصف العلوي تلقائيًا مع الصف السفلي للحفاظ على علاقة وثيقة بين التسميات وصفحة المحتوى. ومع ذلك، فإن هذا النهج يجعل موقف التسمية غير متسق للغاية، وأعتقد أن العديد من الأشخاص لديهم نفس التجربة المربكة.
في بعض البرامج الأخرى، مثل Firefox 3 (كما هو موضح أدناه)، عند النقر على ملصق الصف العلوي، يتغير عرض الملصق فقط إلى الحالة المحددة وتتمثل ميزة ذلك في الحفاظ على اتساق موضع الملصق، ولكن يتم فقدان بعض المؤشرات الموضعية.
لذا، إذا كانت صفوف التسميات المتعددة ليست فكرة جيدة، فكيف تتعامل مع الكثير منها؟
إحدى الأفكار الواضحة هي تغيير ترتيب الملصقات من الترتيب الأفقي المعتاد إلى الترتيب الرأسي. بشكل عام، يكون هذا الترتيب على الجانب الأيسر من العرض، وقد يكون على شكل أيقونات أو نص.
ومع ذلك، هناك بعض المشاكل مع هذا النهج. بادئ ذي بدء، إذا كان اسم العلامة طويلًا جدًا، فسوف يشغل مساحة كبيرة من المساحة اليسرى القيمة، ويصادف أن تكون هذه المساحة هي محور انتباه المستخدم على الشاشة وهي ساحة معركة للاستراتيجيين العسكريين. تضع بعض مواقع الويب النص عموديًا، ويعد هذا الأسلوب، خاصة بالنسبة لمواقع الويب الإنجليزية، بمثابة كارثة بالنسبة لسهولة القراءة. إذا تم وضعها على الجانب الأيمن، فقد تتداخل مع شريط التمرير، وليس من السهل على المستخدمين ملاحظة ذلك. ثانيًا، عندما لا يكون هناك العديد من العلامات (مع الأخذ في الاعتبار العدد المتغير للعلامات)، يكون من الصعب أيضًا وضع المحتوى تحت العلامات.
إحدى الأفكار هي أنه إذا كان هناك بعض البنية بين العلامات، فيمكن تجميع العلامات. ثم قم بإضافة مستوى التنقل. لقد وصل OneNote من Microsoft إلى القمة في هذا الصدد، فهو يقسم المعلومات إلى ثلاثة مستويات: دفتر الملاحظات والقسم والصفحة. ويتم تمثيل كل مستوى من خلال التنقل في علامة التبويب والنتيجة هي أن الجوانب العلوية والأيسر والأيمن من الصفحة مليئة بالتسميات ... تعد Microsoft جيدة جدًا في التعامل مع التنقل بين الملصقات ثلاثية الطبقات بشكل جيد للغاية باستخدام الجشطالت (القسم على اليسار)، ووضع علامات اللون (لون القسم والأبيض للصفحة) وتقنيات أخرى.