BBC 2 Dimensions Tab Interface

วันนี้เกิดอยากดูทีวีขึ้นมา ปกติดูผังรายการทีวีจากเว็บของ ITV แต่ปรากฎว่ามันปรับโฉมใหม่จนเจ๊ง (ข้อมูลโหลดไม่ขึ้น) เลยต้องพึ่งเจ้าอื่นแทน เปิดดูเว็บต้นฉบับของ BBC ก็พบกับ UI ที่น่าสนใจ และไม่ค่อยเห็นคนใช้นัก มันคือ tab สองมิติ ตามภาพ

BBC

(อยากลองของจริง ตามลิงก์ BBC One) ข้อมูลผังรายการทีวีเป็นข้อมูลที่มี "มิติ" เยอะ

  • ชื่อรายการ
  • เวลาที่ฉาย
  • วันที่ฉาย
  • ช่องที่ฉาย

นับรวมได้ถึง 4 มิติ

ตามปกติแล้ว การนำเสนอข้อมูลออกมาเป็นรูปภาพ จะใช้หลัก

มิติของการแสดงผล = จำนวนมิติของข้อมูล - 1

เช่นว่า ถ้าผมอยากแสดงข้อมูล 1) เวลา 2) ชื่อรายการที่ฉาย ณ เวลานั้น (รวม 2 มิติข้อมูล) ผมสามารถแสดงออกมาให้อยู่ในรูป list (1 มิติแสดงผล) ได้ จากภาพข้างบน ผมตัดมาเฉพาะส่วนใน จะเห็นว่ามันเป็น listing (หรือบางคนอาจเรียก grid)

BBC One Program

แน่นอนว่าบนกระดาษที่เป็นระนาบ (2 มิติกายภาพ) มันแสดงผลได้มากที่สุด 3 มิติข้อมูล แต่ว่าข้อมูลตามตัวอย่างมีถึง 4 มิติ มันเลยต้องมีตัวช่วยคือ tab

tab เป็นตัวเพิ่มมิติที่ดีในโลกของการออกแบบ UI เพราะมันมีลักษณะของ "โหมด" (จะมองว่าเป็นแกน Z ตามปริทัศน์ทางคณิตศาสตร์ก็ได้) เครื่องมือที่ลักษณะคล้ายๆ กันคือ treeview และ menulist (หรือที่บางคนเรียกว่า drop down menu) คือจะ "ซ่อน" เนื้อหาของโหมดที่ไม่ได้เลือกเอาไว้

Thunderbird Treeview

จากรูปเป็นตัวอย่าง treeview ของ Thunderbird ถ้าเราเลือก Inbox เมลที่อยู่ในโฟลเดอร์อื่นๆ จะไม่ถูกแสดง ถือเป็น variant หนึ่งของ tab

tab (หรือ treeview หรือ menulist) หนึ่งอันจะเป็นการเพิ่มมาให้อีก 1 มิติ ดังนั้นตามตัวอย่างของ BBC One ซึ่งมี 4 มิติ เราจึงเห็น listing 1 อัน (2 มิติ) + แท็บ 2 อัน (อันละ 1 มิติ)

ที่ผมบอกว่าน่าสนใจ เป็นเพราะว่ามี UI แบบอื่นที่นิยมใช้กันมากกว่า นั่นคือเพิ่มจำนวนมิติของแกนตรงกลาง จาก listing (2 มิติ) มาเป็น table (3 มิติ) ดูตามภาพของ Yahoo! จะเห็นว่าเราคุ้นกับ UI แบบนี้มากกว่า

Yahoo TV Guide

เมื่อส่วนแสดงผลหลักสามารถโชว์ข้อมูลได้ถึง 3 มิติแล้ว tab จึงเหลือแค่อันเดียวคือ วันที่ฉาย เท่านั้น (ซึ่งหลายๆ เจ้านิยมทำเป็น menulist แทน tab)

สาเหตุที่ BBC เลือกใช้ UI แบบแปลกๆ (listing + 2 tabs) แทน (table + 1 tab) คงเป็นเพราะข้อจำกัดของโครงสร้างไซต์ BBC เอง ซึ่งจะนำเสนอข้อมูลแบบแยกส่วน เช่น BBC One แยกจาก BBC Two และอิงกับโครงสร้างนี้เป็นหลัก การนำข้อมูลของ BBC One กับ BBC Two มาอยู่ในตารางเดียวกัน จึงเป็นเรื่องที่ไม่สมควรนั่นเอง

คือผมพยายามจะบอกว่า งานออกแบบ industrial design มีส่วนที่เป็น science ปนมาอยู่เยอะ อย่าไปปฏิเสธมันครับ เดี๋ยวจะกลายเป็นวุ้นไป (กลับกันกับเป็นหุ่นยนต์) การที่เราหาส่วนที่เป็น science ไม่เจอแต่ทำงานสำเร็จได้ อาจแปลว่าฟลุคตรงกับหลัก science ก็ได้ครับ ไม่ใช่แปลว่ามันไม่มี science อยู่

Submitted bychampon Wed, 09/10/2008 - 21:06

เห็นด้วยว่า UI ของ BBC ดูใช้ยาก และดูยากกว่าของ Yahoo! เยอะ
ผมว่า หนึ่งด้วยความไม่ชินอย่างที่พี่มาร์คบอก และสอง ด้วยตำแหน่งของช่องรายการที่ดันไปวางไว้ข้างซ้าย ทำให้คิดว่าอันนี้เป็น tabular data สายตาคนก็เลยไล่หาเซลล์ที่ควรจะมีข้อมูลดังกล่าวโดยอัตโนมัติด้วยครับ

ผมว่า แค่เปลี่ยนจากเอารายชื่อช่องไว้ข้างๆ ไปเป็นลิสท์ตรงบนสุดใช้สไตล์เดียวกับวันในสัปดาห์ ทำเป็นแท็บของชั้น ก็น่าจะดูง่ายขึ้นมากแล้วครับ