← กลับไปยังบทความทั้งหมด

อินเทอร์เฟซผู้ใช้แบบซูม

สรุปใจความสำคัญ

  • ZUI คืออินเทอร์เฟซที่ใช้การย่อและขยาย (Zooming) เป็นเครื่องมือหลักในการนำทางข้อมูลบนพื้นที่เสมือนไม่จำกัด
  • แตกต่างจาก GUI แบบดั้งเดิมตรงที่ข้อมูลไม่ได้ถูกแยกเป็นหน้าต่าง แต่จัดวางอยู่บนระนาบเดียวกัน
  • มีการซูม 2 ประเภทหลัก คือ การซูมเชิงเรขาคณิต (ขยายขนาด) และการซูมเชิงความหมาย (เปลี่ยนรูปแบบการแสดงผลตามระดับการซูม)
  • Prezi เป็นหนึ่งในซอฟต์แวร์นำเสนอผลงานที่ทำให้แนวคิด ZUI กลายเป็นที่รู้จักในวงกว้าง

อินเทอร์เฟซผู้ใช้แบบซูม (Zooming User Interface หรือ Zoomable User Interface, ตัวย่อ: ZUI) คือรูปแบบหนึ่งของอินเทอร์เฟซผู้ใช้แบบกราฟิก (GUI) ที่อนุญาตให้ผู้ใช้ปรับเปลี่ยนมาตราส่วนของพื้นที่ที่กำลังรับชม เพื่อดูรายละเอียดที่มากขึ้นหรือลดลง รวมถึงใช้ในการเรียกดูเอกสารต่างๆ โดยข้อมูลจะถูกจัดวางอยู่บนพื้นที่ทำงานเสมือนที่ไม่มีขีดจำกัด (Infinite Virtual Desktop) ซึ่งมักสร้างขึ้นด้วยกราฟิกแบบเวกเตอร์ แทนที่จะจัดเก็บข้อมูลไว้ในหน้าต่าง (Windows) แยกจากกัน

ในระบบ ZUI ผู้ใช้สามารถเลื่อน (Pan) ไปตามพื้นผิวเสมือนในสองมิติ และซูมเข้าไปยังวัตถุที่สนใจ ตัวอย่างเช่น เมื่อผู้ใช้ซูมเข้าไปในวัตถุที่เป็นข้อความ วัตถุนั้นอาจปรากฏเป็นจุดเล็กๆ ในตอนแรก จากนั้นเปลี่ยนเป็นรูปย่อของหน้ากระดาษ ตามด้วยหน้ากระดาษขนาดเต็ม และสุดท้ายเป็นมุมมองขยายของเนื้อหาในหน้านั้น

ตัวอย่างการทำงานของอินเทอร์เฟซผู้ใช้แบบซูมที่แสดงการย่อขยายระดับข้อมูล
ภาพจำลองการทำงานของ ZUI ที่แสดงการเปลี่ยนระดับการมองเห็นจากภาพรวมสู่รายละเอียด

แนวคิดและหลักการทำงาน

ZUI ใช้การซูมเป็นอุปลักษณ์หลัก (Main Metaphor) ในการนำทางผ่านข้อมูลที่มีการเชื่อมโยงแบบไฮเปอร์ลิงก์หรือข้อมูลหลายมิติ วัตถุที่อยู่ภายในหน้าที่ถูกซูมสามารถถูกซูมซ้ำได้อีกเพื่อเปิดเผยรายละเอียดเชิงลึก ทำให้เกิดการซ้อนทับแบบเรียกซ้ำ (Recursive Nesting) และสามารถซูมได้ไม่จำกัดระดับ

นักวิจัยด้านปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ได้นิยาม ZUI ว่าเป็นอินเทอร์เฟซแบบ Post-WIMP (ซึ่ง WIMP ย่อมาจาก Windows, Icons, Menus, Pointer) โดยมองว่า ZUI มีศักยภาพที่จะเป็นผู้สืบทอดของ GUI แบบหน้าต่างดั้งเดิม

ประวัติและการพัฒนา

แนวคิดการซูมในคอมพิวเตอร์ปรากฏครั้งแรกในปี 1962 โดย Ivan Sutherland ในโปรแกรม Sketchpad ซึ่งเป็นโปรแกรมแรกที่สามารถซูมผ่านและสร้างโครงสร้างกราฟิกที่มีข้อจำกัดและการสร้างอินสแตนซ์ได้บนจอ CRT

ในช่วงทศวรรษ 1970 กลุ่ม Architecture Machine Group ที่ MIT ได้พัฒนาอินเทอร์เฟซที่กว้างขึ้น โดยใช้การติดตามด้วยมือ, หน้าจอสัมผัส, จอยสติ๊ก และการควบคุมด้วยเสียง เพื่อจัดการระนาบไม่จำกัดของโครงการ เอกสาร และโปรแกรมโต้ตอบ ซึ่งหนึ่งในโครงการนี้มีชื่อว่า Spatial Dataland นอกจากนี้ Smalltalk ที่ Xerox PARC ในยุคเดียวกันยังใช้แนวคิดเดสก์ท็อปไม่จำกัดที่สามารถซูมจากมุมมองมุมสูง (Bird's-eye view) ได้

โครงการที่มีความต่อเนื่องยาวนานที่สุดคือ Pad++ ซึ่งเริ่มต้นโดย Ken Perlin, Jim Hollan และ Ben Bederson ที่มหาวิทยาลัยนิวยอร์ก และพัฒนาต่อที่มหาวิทยาลัยนิวเม็กซิโก ต่อมา Bederson ได้พัฒนา Jazz, Piccolo และ Piccolo2D ที่มหาวิทยาลัยแมริแลนด์ ซึ่งเขียนด้วยภาษา Java และ C#

การนำมาใช้ในเชิงพาณิชย์และซอฟต์แวร์สมัยใหม่

  • Apple iPhone: เริ่มใช้ในปี 2007 โดยนำการเลื่อนและการซูมมาใช้ผ่านอินเทอร์เฟซแบบสัมผัส (TUI) และปรากฏชัดเจนในหน้าจอโฮมของ iOS (ตั้งแต่ iOS 7) รวมถึงแอปพลิเคชันรูปภาพและปฏิทินที่ซูมจากมุมมองรายวันเป็นรายปี
  • Prezi: เปิดตัวในปี 2009 เป็นเครื่องมือนำเสนอผลงานบนเว็บที่ใช้ผืนผ้าใบแบบซูมได้เพียงผืนเดียว แทนการใช้สไลด์แบบดั้งเดิม ทำให้ Prezi กลายเป็น ZUI แรกที่ได้รับการยอมรับในวงกว้าง โดยมีผู้ใช้มากกว่า 50 ล้านคนในปี 2014
  • อื่นๆ: มีการพัฒนาเครื่องมืออย่าง Stack Zooming (2010) สำหรับข้อมูลอนุกรมเวลา และ Zircle UI (2017) ซึ่งเป็นไลบรารีโอเพนซอร์สที่ใช้การนำทางแบบซูมและรูปทรงวงกลม

ประเภทของการซูม

อินเทอร์เฟซแบบซูมมีการนำพฤติกรรมการซูมมาใช้ใน 2 รูปแบบหลัก:

1. การซูมเชิงเรขาคณิต (Geometric Zooming)

เป็นการปรับขนาดของวัตถุตามสัดส่วนของระดับการซูมโดยตรง ซึ่งเป็นวิธีที่พบบ่อยที่สุดใน ZUI โดยวัตถุจะใหญ่ขึ้นหรือเล็กลงตามมาตราส่วนที่กำหนด

2. การซูมเชิงความหมาย (Semantic Zooming)

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

คำถามที่พบบ่อย

ZUI แตกต่างจาก GUI ทั่วไปอย่างไร?

GUI ทั่วไปมักใช้ระบบหน้าต่าง (Windows) ในการแยกข้อมูล แต่ ZUI จะวางข้อมูลทั้งหมดไว้บนพื้นที่เสมือนผืนเดียวที่ไม่มีขีดจำกัด และใช้การซูมเข้า-ออกเพื่อเข้าถึงรายละเอียดแทนการเปิดหน้าต่างใหม่

การซูมเชิงความหมาย (Semantic Zooming) คืออะไร?

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

ตัวอย่างซอฟต์แวร์ที่ใช้ ZUI ในปัจจุบันมีอะไรบ้าง?

ตัวอย่างที่ชัดเจนที่สุดคือ Prezi ซึ่งใช้ผืนผ้าใบเดียวในการนำเสนอ และระบบนำทางใน iOS ของ Apple เช่น ในแอปรูปภาพที่ซูมจากภาพเดี่ยวไปสู่มุมมองรายปี