การกลับมาที่ประเทศจีนเกิดขึ้นพร้อมกับงาน UXday ที่จัดโดยแผนกประสบการณ์ผู้ใช้ Baidu หัวข้อการสนทนากลุ่มของเราถือเป็นข้อห้ามเมื่อใช้แท็บ
หัวข้อที่เราพูดคุยกันมุ่งเน้นไปที่จุดหนึ่ง: วิธีจัดการกับแท็บขนาดใหญ่?
ก่อนอื่น เรามาทบทวนประวัติของ Tab กันก่อน แท็บนี้เป็นคำทั่วไปสำหรับองค์ประกอบเชิงโต้ตอบประเภทหนึ่ง รวมถึงการนำทางในการออกแบบเว็บ และการใช้งานในซอฟต์แวร์เดสก์ท็อป เช่น เบราว์เซอร์ องค์ประกอบเชิงโต้ตอบที่เรียกว่าแท็บ โดยทั่วไปจะมีลักษณะสองประการต่อไปนี้:
มีทั้งความหมายการกระทำและสถานะ เหตุผลหนึ่งที่ทำให้แท็บได้รับความนิยมก็คือมันใช้งานง่ายและในขณะเดียวกันก็ช่วยให้ผู้ใช้ทราบได้อย่างชัดเจนว่าปัจจุบันพวกเขาอยู่ที่ไหน (แท็บ)
จากมุมมองของสถาปัตยกรรมข้อมูล เนื้อหาระหว่างแท็บโดยทั่วไปจะไม่ทับซ้อนกัน และความสัมพันธ์ระหว่างแท็บต่างๆ ควรเท่ากัน และไม่ควรมีการเชื่อมโยงกัน
ดังนั้นในแง่กว้าง เมนูนำทางส่วนใหญ่สามารถสรุปเป็นแท็บได้
โดยทั่วไปแล้ว การใช้แท็บในการออกแบบเว็บไซต์ถือเป็นผู้บุกเบิกโดย Amazon ฉันเชื่อว่าหลายท่านคงได้อ่านบทความรีวิวสุดคลาสสิกของ LukeW: The History of Amazon's Tab Navigation แล้ว (สำหรับเวอร์ชันภาษาจีน โปรดคลิกที่นี่) จากบทความนี้ เราจะเห็นได้ว่าการนำทางของ Amazon พัฒนาจากการมีเพียงสองแท็บ: หนังสือและเพลง มาเป็นแท็บสองแถวที่มีจุดสูงสุดในปี 2000 แน่นอนว่าเมื่อจำนวนแท็บเพิ่มขึ้น วิธีการโต้ตอบกับแท็บจะประสบปัญหาบางประการ
อีกตัวอย่างหนึ่งคือกล่องโต้ตอบการตั้งค่าใน Word 2003 ดังแสดงในรูปด้านล่าง เมื่อมีป้ายกำกับมากเกินไปและพื้นที่แสดงผลมีจำกัด Microsoft จะต้องจัดเรียงป้ายกำกับเป็นสองแถว ปัญหาใหญ่คือเมื่อเลือกแถวบนของป้ายกำกับ จะแสดงความสัมพันธ์ระหว่างสถานะที่เลือกและหน้าเนื้อหาปัจจุบันได้อย่างไร
แนวทางของ Microsoft ได้รับการวิพากษ์วิจารณ์ ในภาพด้านบน เมื่อผู้ใช้คลิกที่แถวบนของป้ายกำกับ แถวบนจะสลับกับแถวล่างโดยอัตโนมัติเพื่อรักษาความสัมพันธ์ที่ใกล้ชิดระหว่างป้ายกำกับและหน้าเนื้อหา อย่างไรก็ตาม วิธีการนี้ทำให้ตำแหน่งของป้ายกำกับไม่สอดคล้องกันมาก ฉันเชื่อว่าหลายๆ คนก็มีประสบการณ์ที่สับสนเหมือนกัน
ในซอฟต์แวร์อื่นๆ บางตัว เช่น Firefox 3 (ดังที่แสดงด้านล่าง) เมื่อคลิกที่ป้ายกำกับแถวบน การแสดงป้ายกำกับจะเปลี่ยนเป็นสถานะที่เลือกเท่านั้น ข้อดีของสิ่งนี้คือยังคงความสอดคล้องของตำแหน่งป้ายกำกับไว้ แต่ การระบุตำแหน่งบางอย่างหายไป
ดังนั้นหากป้ายกำกับหลายแถวไม่ใช่ความคิดที่ดี คุณจะจัดการกับป้ายกำกับจำนวนมากได้อย่างไร
แนวคิดที่ชัดเจนคือการเปลี่ยนการจัดเรียงฉลากจากการจัดเรียงแนวนอนตามปกติเป็นแนวตั้ง โดยทั่วไปการจัดเรียงนี้จะอยู่ทางด้านซ้ายของมุมมอง และอาจอยู่ในรูปแบบของไอคอนหรือข้อความ
อย่างไรก็ตาม แนวทางนี้มีปัญหาบางประการ ก่อนอื่น หากชื่อฉลากยาวมาก มันจะครอบครองพื้นที่ซ้ายอันมีค่าจำนวนมาก และพื้นที่นี้จะกลายเป็นจุดสนใจของความสนใจของผู้ใช้บนหน้าจอ และเป็นสมรภูมิสำหรับนักยุทธศาสตร์ทางการทหาร บางเว็บไซต์วางข้อความในแนวตั้ง วิธีการนี้โดยเฉพาะเว็บไซต์ภาษาอังกฤษถือเป็นหายนะสำหรับการอ่าน หากวางทางด้านขวาอาจรบกวนแถบเลื่อนและทำให้ผู้ใช้สังเกตเห็นได้ไม่ง่าย ประการที่สอง เมื่อมีแท็กไม่มากนัก (พิจารณาจากจำนวนแท็กที่แปรผันได้) การใส่เนื้อหาใดไว้ใต้แท็กก็เป็นเรื่องที่น่าปวดหัวเช่นกัน
แนวคิดหนึ่งก็คือ หากมีโครงสร้างบางอย่างระหว่างแท็ก แท็กก็สามารถจัดกลุ่มได้ จากนั้นเพิ่มระดับการนำทาง OneNote ของ Microsoft มาถึงจุดสูงสุดในเรื่องนี้ โดยแบ่งข้อมูลออกเป็น 3 ระดับ ได้แก่ สมุดบันทึก ส่วน และหน้า แต่ละระดับจะแสดงด้วยการนำทางด้วยแท็บ ผลลัพธ์ก็คือ ด้านบน ด้านซ้าย และด้านขวาของหน้าเต็มไปด้วยป้ายกำกับ ... Microsoft เก่งมากในการจัดการการนำทางป้ายกำกับสามชั้นได้เป็นอย่างดี โดยใช้ gestalt (ส่วนด้านซ้าย) การทำเครื่องหมายสี (สีสำหรับส่วน และสีขาวสำหรับหน้า) และเทคนิคอื่นๆ
