GUI คืออะไร ? หรือ Graphical User Interface คืออะไร ? พร้อมประวัติความเป็นมา

Graphical User Interface (GUI) คืออะไร ?

เวลาที่เราสนทนาเกี่ยวกับหัวข้อ UX และ UI มันก็มักจะมีคำว่า "GUI" เข้ามาอยู่ร่วมด้วยเสมอ ประโยชน์ของ GUI นั้นมีอยู่มากมาย บอกได้เลยว่าที่คอมพิวเตอร์, สมาร์ทโฟน หรืออุปกรณ์อิเล็กทรอนิกส์ใด ๆ ก็ตามที่มี หน้าจอแสดงผลใช้งานง่ายได้อย่างทุกวันนี้ ก็เป็นเพราะเรามี GUI นี่แหละ

ในบทความนี้ เราอยากที่จะพาคุณผู้อ่านไปรู้จักกับ GUI กันให้มากขึ้น ว่ามันคืออะไร ? และมีที่มาอย่างไร ?

GUI คืออะไร ?
(What is Graphical User Interface ?)

GUI ย่อมาจาก "Graphical User Interface" ถ้าแปลเป็นภาษาไทยก็ประมาณว่า "ส่วนติดต่อผู้ใช้งานแบบกราฟิก" หรือ "ส่วนต่อประสานกราฟิกกับผู้ใช้งาน" แต่เนื่องจากอ่านแล้วรู้สึกตลก ในบทความนี้เลยจะใช้คำว่า "GUI" ทับศัพท์ไปเลยละกัน

ก่อนอื่น เรามาทำความรู้จักกับ "Interface (อินเทอร์เฟซ)" กันก่อนสักเล็กน้อย

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

ภาพจาก : https://devblogs.microsoft.com/commandline/windows-command-line-backgrounder/

แต่ข้อจำกัดเหล่านั้นก็หายไป เมื่อ Graphical User Interface (GUI) ถูกพัฒนาขึ้นมา ด้วยการใช้ภาพ และสัญลักษณ์ในการแสดงข้อมูล การควบคุม และสั่งการจึงง่ายขึ้นกว่าเดิมมาก ผู้ใช้แค่ใช้ เมาส์ (Mouse), แทรคบอล (Trackball), สไตลัส (Stylus) หรือแม้แต่นิ้วมือ ในการเลือกเมนูบนหน้าจอได้เลย ไม่ต้องจดจำคำสั่งอีกต่อไป

เช่น หากเราต้องการใช้กล้องถ่ายรูปบนสมาร์ทโฟน เราก็จะต้องแตะไปที่ "ไอคอนกล้อง (Camera Icon)" แล้วถ้าหากเราต้องการสลับกล้องหน้ากล้องหลัง หรือตั้งค่าการถ่าย เราก็จะแตะไปที่แถบเมนูบนหน้าจอ ไอคอน และแถบเมนูนี้ก็คือส่วนที่ผู้ใช้งานใช้สื่อสาร หรือสั่งการอุปกรณ์อิเล็กทรอนิกส์นั่นเอง ซึ่งส่วนที่ว่านี้ก็คือ GUI นั่นเอง

GUI กล้องของ iPhone

ความเป็นมาของ GUI
(History of Graphical User Interface)

ไอเดียเริ่มต้น

GUI ไม่ได้ถูกคิดค้นถูกคิดค้นขึ้นมาจากไอเดียของคนเพียงคนเดียว แต่มันเกิดขึ้นได้จากการต่อยอดไอเดียของนักพัฒนาหลายคนร่วมกันอย่างต่อเนื่อง เท่าที่มีการบันทึกไว้ มันเริ่มต้นขึ้นที่ แวนเนวาร์ บุช (Vannevar Bush) ผู้อำนวยการสำนักงานวิจัย และพัฒนาวิทยาศาสตร์แห่งสหรัฐอเมริกา เจ้าของบทความทรงอิทธิพลอย่าง "As We May Think" ที่เผยแพร่ในนิตยสาร "The Atlanlic Monthly" ฉบับเดือนกรกฎาคม ค.ศ. 1945 (พ.ศ. 2488) โดยเขาได้จินตนาการว่าในอนาคต ผู้คนจะใช้อุปกรณ์ที่มีลักษณะ "คล้าย" คอมพิวเตอร์ โดยเขาตั้งชื่ออุปกรณ์ดังกล่าวว่า "Memex" มันมีปุ่มมากมาย และหน้าจอแสดงผลเพื่อตอบสนองต่อคำสั่งที่ผู้ใช้งานป้อนเข้าไป

เครื่อง Memex ในจินตนาการของ แวนเนวาร์ บุช
ภาพจาก : https://www.researchgate.net/figure/The-design-of-the-Memex-Bush-1945-p-123_fig2_347728173

ดักลัส เองเกลบาท (Douglas Engelbart) วิศวกร และนักประดิษฐ์ชาวอเมริกัน หลงใหลในไอเดียของ แวนเนวาร์ บุช เข้าอย่างจัง ในปี ค.ศ. 1960 (พ.ศ. 2503) เขาได้ก่อตั้งศูนย์วิจัย Augmentation Research Center ขึ้นมา  ซึ่งได้มีการพัฒนานวัตกรรมใหม่ ๆ ออกมามากมายมาย และหนึ่งในนั้นก็มีระบบหน้าจอสำหรับใช้แสดงผลเอกสาร โดยประกอบขึ้นจากหน้าจอหลายตัวเพื่อแสดงผลเอกสารได้หลายหน้าต่างพร้อมกัน ซึ่งเป็นสิ่งที่ แวนเนวาร์ บุช เชื่อว่ามีความสำคัญมาก

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

เมาส์คอมพิวเตอร์ตัวแรกของโลก
ภาพจาก : https://soyacincau.com/2020/08/05/william-english-inventor-computer-mouse-died-pass-away/

PARC

GUI ได้เติบโตขึ้นอีกก้าวหนึ่งจากฝีมือของนักวิจัยจาก Palo Alto Research Center (PARC) ศูนย์พัฒนานวัตกรรมของบริษัท Xerox ซึ่งทีมนักวิจัยของดักลัส เองเกลบาท ได้มาเข้าร่วมพัฒนาด้วยในปี ค.ศ. 1970 (พ.ศ. 2513)

ที่นี่เอง ที่ได้มีการคิดค้นอินเทอร์เฟซในการทำงานกับคอมพิวเตอร์แบบใหม่ขึ้นมา มันถูกเรียกว่า Xerox Star เปิดตัวในปี ค.ศ. 1981 (พ.ศ. 2524) มันเป็นตัวต้นแบบที่พัฒนาต่อยอดมาจาก "Alto" ทำงานโดยอาศัยเทคนิค "Bit mapping" เพื่อแสดงผลทุกอย่างบนหน้าจอ มันไม่ได้แค่ช่วยให้คอมพิวเตอร์สามารถแสดงผลภาพกราฟิกได้เท่านั้น แต่มันยังช่วยให้เห็นว่าผลลัพธ์ก่อนที่จะสั่งพิมพ์ผ่านเครื่องพรินเตอร์ได้อีกด้วย (ระบบเดิม จะป้อนคำสั่งเข้าไปก่อน ผู้ใช้จะเห็นผลลัพธ์ก็ตอนที่พิมพ์ออกมาแล้วเท่านั้น) ซึ่งคุณสมบัตินี้ ภายหลังถูกเรียกว่า "What you see is what you get" หรือ "WYSIWYG"

Alan Kay นักวิทยาศาสตร์คอมพิวเตอร์ของ PARC ยังได้นำภาพขนาดเล็กมาวางบนหน้าจอ เพื่อจำลองโต๊ะทำงานเป็น "Virtual Desktop" ขึ้นมา ซึ่งมันก็คือ "Icon" (ไอคอน) นั่นเอง ไอคอนเหล่านี้เป็นตัวแทนของกิจกรรมในสำนักงาน เช่น การรับโอนไฟล์ระหว่างโฟลเดอร์, การพิมพ์เอกสาร ฯลฯ ด้วยการใช้เมาส์ในการควบคุมเคอร์เซอร์ไปชี้เหนือไอคอน แล้ว "คลิก" ระบบจะเริ่มทำตามชุดคำสั่งที่กำหนดไว้ทันที มันเป็นขั้นตอนที่เรียบง่าย และรวดเร็วกว่าการพิมพ์ Command Line ด้วยตนเองเป็นอย่างมาก

จาก Macintosh สู่ Windows

ในปี ค.ศ. 1979 (พ.ศ. 2522) ทีมวิศวกรจากบริษัท Apple นำทีมโดยสตีฟ จอบส์ ได้ไปดูงานที่ PARC พวกเขาประทับใจกับการทำงานของระบบ GUI ที่ PARC ใช้อยู่เป็นอย่างมาก เป็นไอเดียที่ถูกนำมาพัฒนา "Lisa" เครื่อง Macintosh รุ่นใหม่ของ Apple โดยได้มีการเซ็นสัญญาแลกเปลี่ยนเทคโนโลยีกัน โดย Apple ได้นำ GUI ของ PARC มาพัฒนาต่อให้สมบูรณ์แบบมากขึ้น

โดย Apple ได้ออกแบบให้ทำงานได้แบบหลายหน้าต่างพร้อมกัน และหน้าต่างสามารถซ้อนทับกันได้ด้วย, มีระบบไอคอน, ปรับรูปแบบเมาส์จากเดิมที่มีหลายปุ่ม ให้เหลือเพียงปุ่มเดียว เพื่อความเรียบง่ายในการใช้งาน นอกจากนี้ วิศวกรของ Apple ยังได้เพิ่ม "Menu bar" ที่พอคลิกแล้ว จะมีรายการเมนูปรากฏขึ้นมาให้เลือกเพิ่มเติม ซึ่ง Apple ถึงกับจ้างศิลปินมาช่วยในการออกแบบแอนิเมชันการเปิดปิดหน้าต่าง เพื่อให้ดูสวยงาม น่าดึงดูด

อย่างไรก็ตาม ถึงแม้ Lisa ของ Apple ที่เปิดตัวในปี ค.ศ. 1983 (พ.ศ. 2526) จะเป็นการนำ GUI มาทำตลาดเป็นรายแรก แต่มันก็ไม่ประสบความสำเร็จ เนื่องจากราคาเครื่องที่แพงมาก แถมยังทำงานได้ช้า ทำให้ GUI ในเวลานั้น เหมาะกับการให้เด็กหัดใช้งานคอมพิวเตอร์มากกว่า ส่วนมืออาชีพยังยึดติดกับการสั่งงานผ่าน Command line เพราะว่ามันทำงานได้เร็วกว่ามาก

กว่า GUI จะได้รับความนิยมก็ต้องรอจนหลังยุค 90 ที่ Microsoft ได้เปิดตัวระบบปฏิบัติการ Windows 3.0 ที่ลงให้กับคอมพิวเตอร์ของ IBM  มันเป็น GUI ตัวแรกที่ได้รับการยอมรับว่าสามารถทำงานได้ดี และมีประสิทธิภาพ จากนั้นเป็นต้นมา GUI ก็กลายเป็นมาตรฐานหลักในการออกแบบ Interface ของคอมพิวเตอร์ เป็นต้นมา