ฝากติดตามกด Like  กด Love ❤️ กด Share ⤴️ ที่ https://www.facebook.com/TouchPoint.in.th/ ------------------------------------------------------------------ ฝากกด Subscribe ช่อง YouTube TouchPoint ที่ https://www.youtube.com/c/TouchpointTH ------------------------------------------------------------------ เว็บไซต์ https://touchpoint.in.th/ ------------------------------------------------------------------ ดร.กฤษณพงศ์ เลิศบำรุงชัย

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

3. ส่วนติดต่อผู้ใช้งาน เป็นสิ่งที่สาคัญมากในระบบคอมพิวเตอร์ทุกประเภท เป็น
Subset ของ Human-Computer interactive (HCI) ซึ่งเป็นการศึกษาการ
วางแผนและการออกแบบวิธีการที่มนุษย์และคอมพิวเตอร์สามารถทางาน
ร่วมกันได้อย่างมีประสิทธิภาพสูงสุด นักออกแบบ HCI จะต้องคานึงถึงปัจจัย
หลายอย่าง ได้แก่ มุมมองและสิ่งที่มนุษย์ต้องการ ข้อจากัดเชิงความสามารถ
และเชิงกายภาพของมนุษย์ กระบวนการการจัดการข้อมูลระบบและวิธีที่ดึงดูด
ให้มนุษย์สามารถใช้งานระบบได้ดี ซึ่งแน่นอนว่า HCI จะคานึงถึงข้อจากัดและ
คุณภาพของทั้ง Software และ Hardware ส่วนติดต่อผู้ใช้งานจะประกอบด้วย
ข้อมูล 2 ส่วนหลักคือ ข้อมูลนาเข้า ในข้อมูลนาออก
User Interface (UI)

4. ส่วนติดต่อผู้ใช้งานประกอบด้วยข้อมูล 2 ส่วนหลักคือ
เป็นข้อมูลที่คอมพิวเตอร์จะต้องนาไปประมวลผล
ซึ่งคอมพิวเตอร์จะรับข้อมูลผ่านวิธีการที่มนุษย์จะ
ติดต่อสื่อสารโดยการแสดงความต้องการของ
ตนเองไปยังคอมพิวเตอร์ตัวอย่างเครื่องมือใน
การรับข้อมูลนาเข้า เช่น Keyboard, Mouse,
Trackball, นิ้วและเสียง
ข้อมูลนาเข้า
Input
คือ ข้อมูลนาออกเป็นข้อมูลที่ได้จากการประมวลผลของ
คอมพิวเตอร์ซึ่งแสดงผลผ่านวิธีการที่คอมพิวเตอร์จะแสดง
ผลลัพธ์ในการประมวลผลออกมา ซึ่งข้อมูลดังกล่าวคือสิ่งที่
มนุษย์ต้องการปัจจุบันวิธีการแสดงผลข้อมูลนาเข้าโดยทั่วไป
คือ หน้าจอ หรือ Display Screen ซึ่งเป็นวิธีการที่มี
ประโยชน์แก่มนุษย์ที่บกพร่องด้านการฟัง
ข้อมูลนาออก
Output

5. การออกแบบส่วนติดต่อผู้ใช้งานที่ดีจะต้องมีการผสมผสานกลไกใน
การรับรู้ข้อมูลนาเข้า แล้วข้อมูลนาออก ที่รองรับความสามารถ และ
ข้อจากัดของผู้ใช้งานได้มากที่สุดเท่าที่จะทาได้ และตรงตามความ
ต้องการของผู้ใช้งานโดยข้อมูลนาเข้าและข้อมูลนาออกจะมีทิศทางการ
ไหลดังรูป
OUTPUT
INPUT

6. ส่วนติดต่อผู้ใช้งานมีความสาคัญเพราะระบบคอมพิวเตอร์นั้นเป็นการ
ประมวลผลของชุดคาสั่ง (Source Codes) จานวนมากผู้ใช้งานทั่วไปจึง
ไม่สามารถเข้าถึงหรือสั่งการได้ ดังนั้นส่วนติดต่อผู้ใช้งานจึงเป็นส่วนที่
ผู้ช่วยให้ผู้ใช้งานสามารถติดต่อ (ผ่านการมองเห็น การได้ยิน หรือการ
ส่ง-รับข้อมูล) กับระบบคอมพิวเตอร์ได้

7. จะมีหน้าตาหรือสื่อให้รับรู้อย่างไรเน้นที่ด้าน
การมองเห็น
ส่วนติดต่อผู้ใช้งานจะสามารถทาให้ผู้ใช้งาน
เข้าใจว่าแต่ละส่วนที่ปรากฏในส่วนติดต่อ
ผู้ใช้งานคืออะไรและสื่อว่าอย่างไร
ส่วนติดต่อผู้ใช้งานจะสามารถทาให้ผู้ใช้งานมี
ปฏิสัมพันธ์กับมันได้อย่างไร
ในการพัฒนาส่วนติดต่อผู้ใช้งาน จาเป็นต้องอาศัยหลักการออกแบบโดยพื้นฐานของการ
ออกแบบส่วนติดต่อผู้ใช้งานนั้นต้องทาให้ส่วนผู้ติดต่อผู้ใช้งานสามารถตอบคาถาม 3 ข้อคือ

8. ถ้าส่วนติดต่อผู้ใช้งานไม่ผ่าน การออกแบบที่ดีจะเกิดปัญหา เช่น ระบบไม่
สามารถแสดงข้อมูลที่ถูกต้องและ/หรือครบถ้วน ผู้ใช้งานสับสน ไม่สามารถ
เข้าใช้งานระบบได้ผู้ใช้งานเกิดความรู้สึกไม่อยากใช้งานระบบอีก

9. ส่วนติดต่อผู้ใช้งานสามารถแบ่งเป็นยุคได้ 3ยุคหลัก ๆ ได้แก่
ยุคของระบบคอมพิวเตอร์
System
ยุคของเวิลด์ไวด์เว็บ
WWW
ยุคของอุปกรณ์เคลื่อนที่
Mobile

10. เทรนด์การออกแบบส่วนติดต่อผู้ใช้
Material Design
Flat Design
Skeuomorphic

11. การจาลองของจริง ในยุคแรกผู้ออกแบบส่วนติดต่อผู้ใช้พยายามจาลอง
“โลกจริง” เพื่อให้คนคุ้นเคย เช่น มีถังขยะ เก็บงานไว้ในแฟ้ม
(Folder/Directory) มีพื้นโต๊ะ (Desktop) เอาไว้วางของ คนเลยคุณเคยได้
ว่า จะจัดการไฟล์ต่างๆ อย่างไรจะมีปฏิสัมพันธ์กับสิ่งของต่างๆ อย่างไร แต่
ข้อจากัดในการ “ปฏิสัมพันธ์” กับสิ่งต่างๆ เหล่านั้น เช่น ถ้าเราเห็นปุ่ม
เหมือนจริงเราก็คิดว่ามันควรจะแค่ “กด” ได้อย่างเดียว เพราะปุ่มจริงๆ ไม่
สามารถปรับซ้ายขวาหรือเขย่าหรือเอียง ฯลฯ ได้ทาให้เราไม่สามารถ
พัฒนาการทดสอบแบบใหม่ๆ ได้
เทรนด์การออกแบบส่วนติดต่อผู้ใช้
1. Skeuomorphic

12. เป็นการออกแบบรูปแบบใหม่ที่มาพร้อมการเปิดตัวของ iOS7 เป็นทา
เว็บไซต์แบบสะอาดสะอาดเรียบ ๆ ไม่เน้น Effect มาก ก่อนหน้านี้คนจะ
ชอบแบบ Skeuomorphism หรือในไทยก็ชอบแบบ Web 2.0 ที่เน้นการ
ใส่เงา, Gradient เยอะ ๆ พอมาถึงยุคของ Flat Design เป็นการตัด
รายละเอียดหลายๆ อย่าง เช่น การใช้เงา การไล่ Gradient ออกไปซึ่งจะ
เน้นการใช้สี/รูปทรงเพื่อแสดงว่าส่วนใหญ่สาคัญในเว็บไซต์มากกว่าเมื่อ
ก่อนที่กลุ่มในเว็บต้องไล่ Gradient เด่น ๆ เพื่อให้กลุ่มดูนูนและคน
มองเห็นได้ง่าย
เทรนด์การออกแบบส่วนติดต่อผู้ใช้
2. Flat Design

13. อย่างไรก็ตามบางคนมองว่า Flat Design ดูธรรมดาเกินไปดูไม่มีความลึกในงานดีไซน์จึงมีบางส่วนที่
ดีไซน์เป็นแนว Almost FlatDesign คือไม่ได้เรียบ ๆ ไปหมดแต่บางส่วนมีการใช้ Gradient มาช่วยทา
ให้ดูเด่นขึ้นหรือมีการใช้รูปถ่ายจริงร่วมกับกลุ่มแบบ Flat สร้างความแปลกใหม่
เทรนด์การออกแบบส่วนติดต่อผู้ใช้

14. เทรนด์การออกแบบส่วนติดต่อผู้ใช้
ซึ่งเป็นหลักที่ใช้ดีไซน์ผลิตภัณฑ์ (Product) ในเครือ Google ทั้งหมด
โดยเน้นการแสดงความลึกของสิ่งต่าง ๆ ด้วยแสงเงาเลียนแบบเงาของ
จริง
3. Material Design

15. กูเกิลเรียก MaterialDesign ว่าเป็น ”ภาษาของการออกแบบ” หรือ Visuallanguageที่รวบรวม
“หลักการออกแบบที่ดี” ไว้ด้วยกัน โดยใช้เป็นแนวทางการออกแบบชุดเดียวที่ใช้ได้อุปกรณ์รองรับ
การโอนข้อมูลหลายแบบไม่ว่าจะเป็น จอสัมผัส สั่งงานด้วยเสียง หรือจะเป็นเมาส์และคีย์บอร์ด
เทรนด์การออกแบบส่วนติดต่อผู้ใช้

16. Design principle
หลักการออกแบบ
ของ Materialdesign
ในโลกความเป็นจริงเน้นการใช้พื้นผิว(Surface) และขอบ
(Edge)ใช้แสงเงา-ภาพเคลื่อนไหวเหมือนกับแสงเงา-การ
เคลื่อนไหวของวัตถุเชิงกายภาพ
Knowyouruseror client
การทาความรู้จักผู้ใช้งาน
01
Understandthebusinessfunction
การทาความเข้าใจการทางานของระบบ
02ใช้วิธีการนาเสนอแบบเดียวกับสิ่งพิมพ์กระดาษเช่นฟอนต์ที่ว่าง
สีสันภาพประกอบ
Develop system menu and Navigation
การพัฒนาระบบเมนูและการนาทาง
03บอกความหมาย(Meaning)องค์การกระทา

17. รูปแบบการโต้ตอบด้วย UI
การโต้ตอบด้วยคาสั่ง
Command Language
Interaction: CLI
การโต้ตอบด้วยกราฟฟิก
GraphicUser interface
: GUI
ส่วนติดต่อผู้ใช้งาน
GraphicsUser interface
: GUI
แบบกราฟิก
การโต้ตอบด้วย
NaturalLanguage
Interaction: NLI
ภาษามนุษย์

18. การโต้ตอบด้วยภาษามนุษย์
Natural Language Interaction : NLI
รูปแบบการโต้ตอบด้วย UI
การโต้ตอบด้วยภาษามนุษย์เป็นการโต้ตอบโดยผู้ใช้งานจะใช้ภาษา
มนุษย์หรือภาษาธรรมชาติ เช่น ภาษาเขียน หรือเสียงเป็นข้อมูลนาเข้า
(Input) ตัวอย่างระบบและระบบจะประมวลผลกลับมาเป็นข้อมูลแสดงผล
(Output) การโต้ตอบประเภทนี้ส่วนใหญ่จะถูกนามาใช้ในเทคโนโลยีด้าน
ปัญญาประดิษฐ์ (Artificial intelligent : AI) เช่น Siri ที่สามารถใช้งานใน
ระบบปฏิบัติการ IOS

19. รูปแบบการโต้ตอบด้วย UI
การโต้ตอบด้วยคาสั่ง
Command Language Interaction : CLI
หรือ Command เป็นการโต้ตอบโดยผู้ใช้งานจะต้องใช้คาสั่งที่เป็นตัวอักษร
(String) ผ่านคีย์บอร์ดสาหรับเป็นข้อมูลนาเข้าสู่ระบบแล้วระบบจะแสดง
ข้อมูลนาออกผ่านหน้าจอ เช่น Command Line Interface

20. รูปแบบการโต้ตอบด้วย UI
การโต้ตอบด้วยกราฟฟิก
Graphic User interface: GUI
เป็นการโต้ตอบที่ผู้ใช้งานจะมีปฏิสัมพันธ์กับวัตถุ (Objects) ที่สามารถ
มองเห็น ได้ยิน หรือสัมผัสได้ เช่น ภาพกราฟฟิก ไอคอน การเคลื่อนไหว

21. รูปแบบการโต้ตอบด้วย UI
การจัดการส่วนติดต่อผู้ใช้งานด้วยกราฟิก เป็นการสร้างส่วนติดต่อ
ผู้ใช้งานผ่านทางภาพที่เข้าใจได้ง่ายแทนการพิมพ์คาสั่งโดยตรง เพื่อให้
คอมพิวเตอร์ทางานตามที่ต้องการ การใช้งานผ่านระบบ GUI เช่น การใช้
เมาส์กดเลือกไอคอน (Icon) ปุ่มคาสั่งที่ต้องการหรือการเลือกคาสั่งตาม
รายการที่อยู่ในเมนูประเภทต่าง ๆ ซึ่งซอฟต์แวร์เตรียมไว้ให้แล้ว ข้อดีของ
ส่วนติดต่อผู้ใช้งานแบบกราฟิกภาพที่เป็นสัญลักษณ์สามารถเข้าใจได้ง่าย
กว่าตัวอักษรภาพที่เป็นสัญลักษณ์สามารถทาให้เกิดการเรียนรู้ได้เร็วขึ้น
ส่วนติดต่อผู้ใช้งานแบบกราฟิก
Graphics User interface: GUI

22. รูปแบบการโต้ตอบด้วย UI
มนุษย์สามารถเรียนรู้และจดจาภาพสัญลักษณ์ได้ดีเนื่องจากภาพ
สัญลักษณ์เป็นการออกแบบรูปภาพที่ใกล้เคียงกับลักษณะจริงของสิ่งที่เรา
ต้องการสื่อ เช่น สัญลักษณ์รูปบ้าน เป็นไอคอนที่สื่อสารถึงหน้าหลัก
(Homepage) เป็นต้น แต่ภาพสัญลักษณ์จะลดทอนรายละเอียดของภาพ
ให้น้อยที่สุดเพื่อง่ายต่อการจดจาและออกแบบนอกจากนี้มนุษย์สามารถ
จดจาภาพได้ดีกว่าตัวอักษร

23. ลักษณะของส่วนติดต่อผู้ใช้งานแบบกราฟิก
การนาเสนอสิ่งที่มี
Sophisticated Visual
Presentation
ความซับซ้อน
การใช้วัตถุ
ObjectOrientation
การโต้ตอบแบบเลือก
Pick andClick Interaction
หรือคลิก

24. การนาเสนอสิ่งที่มีความซับซ้อน
Sophisticated Visual Presentation
ลักษณะของส่วนติดต่อผู้ใช้งานแบบกราฟิก
การนาเสนอภาพ คือ การสร้างส่วนติดต่อผู้ใช้งานที่ทาให้ผู้ใช้งาน
สามารถรับรู้ผ่านทางการมองเห็นหน้าจอ โดยการนาเสนอความ
ซับซ้อนของภาพกราฟิกจะต้องใช้เส้น ภาพวาด สัญลักษณ์ ซึ่งอาจใช้
รูปตัวอักษร สี และขนาดที่มีความแตกต่างกัน โดยวัตถุประสงค์ของ
รูปแบบการนาเสนอสิ่งที่มีความซับซ้อนคือเพื่อแสดงภาพให้ผู้ใช้งาน
สามารถรับรู้เข้าใจความหมายได้อย่างถูกต้องชัดเจนและสมจริงที่สุด

25. การโต้ตอบแบบเลือกหรือคลิก
Pick and Click Interaction
ลักษณะของส่วนติดต่อผู้ใช้งานแบบกราฟิก
ส่วนติดต่อผู้ใช้งานแบบกราฟิกจะต้องคิดถึงถึงปฏิสัมพันธ์ที่ผู้ใช้งาน
จะมีต่อระบบ โดยสิ่งที่ผู้ใช้กล้องแสดงความต้องการใช้งานของตน
อย่างแรก คือ การเลือก (Pick) จากนั้นเมื่อผู้ใช้งานต้องการสื่อสาร
กับระบบที่เขาได้เลือกแล้วจะต้องคลิก (Click) โดยการเลือกและพริก
เป็นปฏิสัมพันธ์พื้นฐานที่ผู้ใช้งานจะต้องกระทากับส่วนติดต่อผู้ใช้งาน
โดยมากจะใช้ผ่านพอยต์เตอร์ (Pointer) เมาส์หรือคีย์บอร์ด

26. การใช้วัตถุ
Object Orientation
ลักษณะของส่วนติดต่อผู้ใช้งานแบบกราฟิก
ส่วนติดต่อผู้ใช้งานแบบกราฟฟิกจะต้องประกอบด้วยวัตถุ (Object)
และปฏิสัมพันธ์ (Action) โดยวัตถุคือสิ่งที่ผู้ใช้งานสามารถมองเห็นได้
บนหน้าจอ ซึ่งเมื่อถูกต่าง ๆ จะต้องถูกผสมผสานให้กลมกลืนเป็น
หนึ่งเดียว การออกแบบที่ดีจะทาให้ผู้ใช้งานสามารถโฟกัสไปที่วัตถุ
เหล่านั้นได้และจะทาให้สามารถเข้าใจวิธีการมีปฏิสัมพันธ์กับวัตถุ
เหล่านั้นได้

27. The Web User Interface
ส่วนติดต่อผู้ใช้งานของเว็บไซต์
ส่วนติดต่อผู้ใช้งานสาหรับเว็บเริ่มมีการใช้กราฟิกมากขึ้นเรื่อย ๆ โดย
การออกแบบส่วนติดต่อผู้ใช้งานสาหรับเว็บ คือ การออกแบบการนา
ทาง (Navigation) และการนาเสนอข้อมูลในเว็บนั้น ๆ การออกแบบที่ดี
จะต้องออกแบบให้วัตถุแต่ละอย่างในหน้าเว็บเกิดความสมดุล ไม่ว่าจะ
เป็นเมนู เนื้อหา เอกสาร และกราฟิกอื่น ๆ ที่จะต้องมีความกลมกลืน
เป้าหมายของการออกแบบส่วนติดต่อผู้ใช้งานสาหรับเว็บ คือ การ
สร้างระดับชั้นเมนูแต่ละเพจที่เป็นธรรมชาติตามความต้องการดูข้อมูล
ของผู้ใช้งานจริง ๆ

28. ลักษณะของส่วนติดต่อผู้ใช้งานแบบกราฟิก
ลาดับการกรอกข้อมูลของผู้ใช้งานจะไม่เป็นทิศทาง ดูจากผู้พัฒนาจัด
วางตาแหน่งขององค์ประกอบต่าง ๆ อย่างไม่เป็นระเบียบไม่จัดกลุ่มซึ่ง
แม้ว่าผู้ใช้งานสามารถกรอกข้อมูลได้แต่ทิศทางในการอ่านจะไม่เป็นเชิง
เส้นอาจจะทาให้เกิดความสับสนได้

29. ประเภทของ UI
Text-based/Textual UI
01
VisualUI
02
TangibleUI
05
Voice/ AudioUI
03
NaturallanguageUI
04
Touch/TactileUI
06
HapticUI
07
BrainUI
08
Multimodal UI
09

30. ประเภทของ UI
การแบ่งประเภทของ UI นั้นยังไม่มีเกณฑ์ที่แน่ชัด บ้างก็แบ่งเป็นประเภท
ฮาร์ดแวร์และประเภทซอฟต์แวร์ บ้างก็แบ่งตามประเภทของสื่อดิจิทัลที่
เกี่ยวข้องด้านก็แบ่งตามชนิดของประสาทสัมผัสที่ผู้ใช้ใช้รับรู้ ลักษณะนี้
ทาให้ประเภทของ UI มีหลากหลายและซับซ้อนกันอยู่มาก อีกทั้งยังมี UI
ประเภทใหม่ถูกคิดค้นพัฒนาออกมาเรื่อย ๆ

31. มักหมายความถึง UI ในยุคของ Command Line Interface (CLI)
ก่อนหน้าที่จะเปลี่ยนมาเป็นยุคของ Graphic user Interface : GUI
โดยใน UI ประเภทนี้จะเน้นการสื่อสารและแสดงผลด้วยข้อความ
ตัวอักษร
ประเภทของ UI
1. Text-based/TextualUI

32. ลักษณะของ UI จะเกี่ยวข้องกับรูปภาพ เช่น ระบบปฏิบัติการที่แสดงผล
แบบ GUI กล่องดิจิทัลที่รับ Input เป็นรูปภาพ 2 มิติหน้าจอสมาร์ทโฟนที่
แสดง Output เป็นรูปภาพ 2 มิติ เทคโนโลยีการแสดงภาพ 3 มิติ
เทคโนโลยี Projection Mapping เทคโนโลยีความเป็นจริงเสมือน (Virtual
Reality) เทคโนโลยีความเป็นจริงเสริม(Augmented Reality) เทคโนโลยี
กล้องวีดีโอ 360 องศา เป็นต้น
ประเภทของ UI
2. Visual UI

33. ลักษณะของ UI ที่เกี่ยวข้องกับเสียงเช่นฟีเจอร์การสั่งงานด้วยเสียงบน
สมาร์ทโฟน เทคโนโลยีการสร้างเสียงที่สมจริงสาหรับแว่นความเป็น
จริงเสมือนหรือ Visual Reality Headset อย่าง Facebook Oculus
Rift เป็นต้น
ประเภทของ UI
3. Voice/ Audio UI

34. ลักษณะของ UI ที่อนุญาตให้ผู้ใช้พิมพ์หรือพูดเพื่อตอบโต้หรือส่ง
งานคอมพิวเตอร์ได้ด้วยภาษาธรรมชาติ (Natural Language) ที่
เราใช้ในแชทหรือพูดคุยในชีวิตประจาวันอยู่แล้ว ตัวอย่างของ UI
ประเภทนี้คือ Chatbot ทั้ง Microsoft, Facebook และ Google
ต่างก็ประกาศเป็นฟีเจอร์ใหม่เพื่อให้ผู้ใช้สามารถสนทนาโต้ตอบกับ
Chatbot ได้อย่างเป็นธรรมชาติเสมือนกาลังแชทกับคนจริงๆ
ประเภทของ UI
4. Natural language UI

35. หมายถึง URL ที่อนุญาตให้ผู้ใช้มีปฏิสัมพันธ์กับข้อมูลเป็นดิจิตอลได้
ผ่านสื่อกลางเป็นวัสดุหรือวัตถุทางกายภาพที่มีตัวตนสามารถจับ
ต้องได้จริงโดยคาดหวังว่ารูปธรรมทางกายภาพเหล่านี้จะช่วย
สนับสนุนการมีปฏิสัมพันธ์การเรียนรู้และการมีส่วนร่วมให้ผู้ใช้ได้
ตัวอย่างเช่น Robotable [64] แผนที่ตัวละครดิจิตอลบางส่วนในเกม
RoboPong ด้วยหุ่นยนต์จึงเคลื่อนไหวอยู่บนโต๊ะเล่นเกมได้ เป็นต้น
ประเภทของ UI
5. Tangible UI

36. UI ที่มุ่งเน้นประสาทสัมผัสด้านการสัมผัส (Sense of Touch) กล่องนิ้ว
มือผู้ใช้บนพื้นผิวหนึ่ง ๆ ตัวอย่างเช่นหน้าจอสัมผัสของสมาร์ทโฟนและ
แท็บเล็ตคอมพิวเตอร์ที่สามารถแตะจอเพื่อสั่งงานได้ Cicret กาไล
อัจฉริยะที่ฉายภาพหน้าจอสมาร์ทโฟนลงบนท่อนแขนของผู้ใช้เปลี่ยน
ท่อนแขนนั้นให้กลายเป็นเสมือนหน้าจอที่สั่งงานด้วยการสัมผัสได้
ประเภทของ UI
6. Touch /Tactile UI

37. เป็นประเภทของ UI ที่มุ่งเน้นประสาทสัมผัสด้านการสัมผัสหรือการรู้สึกผ่าน
ผิวสัมผัสคล้ายกับ Tactile UI แต่ Haptic UI จะไม่โฟกัสเฉพาะการสัมผัสแต่
ต้องระหว่างนิ้วมือหรือสัมผัส (Tactile) จะรวมถึงการสัมผัสการเคลื่อนไหว
หรือแรงอื่น ๆ ที่รู้สึกได้ผ่านผิวหนังและกล้ามเนื้อด้วย(Kinesthetic)
ตัวอย่างเช่น ระบบสั่นในโทรศัพท์มือถือ 3D Haptic Controller ทาหน้าที่
คล้ายกับเมาส์ 3 มิติโดยมีการควบคุมตัวละครในเกมเมื่อตัวละครเดินชน
กาแพงคอนเทนเนอร์จะสร้างแรงต้านขึ้นทาให้ไม่สามารถขยับ Controller
ต่อไปข้างหน้าได้เสมือน Controller เองกาลังชนกาแพงอยู่จริง ๆ เป็นต้น
ประเภทของ UI
7. Haptic UI

38. หรือที่นิยมเรียกว่า Brain computer Interface (BCI) หมายถึง UI ที่มุ่งเน้น
การเชื่อมต่อระหว่างคลื่นไฟฟ้าสมองของผู้ใช้กับคอมพิวเตอร์ประมวลผล
เช่น อ่านคลื่นสมองของผู้ใช้แล้วนามาแปลงเป็นคาสั่งสาหรับควบคุมไฟใน
บ้านให้เปิดปิดตามที่คิด หรือในทางตรงข้ามก็นาข้อมูลบางอย่างมาแปลงเป็น
คลื่นไฟฟ้าสมองแล้วส่งไปให้ที่สมองของผู้ใช้ เป็นต้น ด้วยความก้าวหน้าและ
พัฒนาการของเครื่องอ่านคลื่นสมองที่ในระยะหลังมีขายเป็นอุปกรณ์สวมใส่
ขนาดเล็กพร้อมชุดพัฒนาซอฟต์แวร์ทาให้ BCI เริ่มเป็นที่นิยมและแพร่หลาย
มากขึ้น
ประเภทของ UI
8. Brain UI

39. หมายถึง UI ที่เอา UI หลายๆประเภทเข้าด้วยกันตัวอย่างหนึ่งที่เห็นได้ชัดคือ
สมาร์ทโฟนและแท็บเล็ตคอมพิวเตอร์ที่มีหลาย Visual UI ที่ใช้กล้องและจอ
แสดงภาพมี Voice UI ชื่อใช้ไมโครโฟนและลาดับมี Natural language UI
ที่ใช้ App ที่มีคุณสมบัติของ Chatbot และมี Touch UI ของหน้าจอสัมผัส
ประเภทของ UI
9. Multimodal UI

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

41. The Design Team
ทีมพัฒนา
จะต้องมีความเชี่ยวชาญด้านต่าง ๆ ดังนี้
มนุษยศาสตร์
Humanfactors
สาหรับใช้ในการวิเคราะห์พฤติกรรมและ
คุณลักษณะของผู้ใช้งาน
การออกแบบ
Visualdesign
เพื่อใช้ออกแบบการจัดวางตาแหน่งของ
องค์ประกอบการใช้กราฟิกและใช้สีที่เหมาะสม
และสวยงาม
การพัฒนา
Development
สาหรับพัฒนาระบบหรือเว็บไซต์ที่ตรงตาม
ส่วนติดต่อผู้ใช้งานที่ออกแบบไว้

42. The Design Team
ทีมพัฒนา
จะต้องมีความเชี่ยวชาญด้านต่าง ๆ ดังนี้
การประเมินการใช้งาน
Usabilityassessment
เพื่อใช้ในการประเมินความเหมาะสมของส่วน
ติดต่อผู้ใช้ว่าตรงตามความต้องการของ
ผู้ใช้งานและความต้องการของระบบหรือไม่
เพื่อนาไปใช้ในการทดลองใช้งานและส่ง
มอบงานให้แก่ผู้ใช้งาน
การฝึกฝนหรือการนาเสนอ
Training
การใช้งาน
การทาเอกสาร
Documentation
เพื่อจัดทาเอกสารสาหรับใช้เป็นหลักฐานที่แสดง
รายละเอียดในการพัฒนาเพื่อใช้ในการตรวจสอบ
ความถูกต้องของการออกแบบและพัฒนาและเพื่อใช้ใน
การสื่อสารระหว่างทีมงานพัฒนา

43. กระบวนการออกแบบส่วนติดต่อผู้ใช้งาน
กระบวนการการออกแบบ UI ประกอบด้วย 12 ขั้นตอนคือ
Know youruseror client
การทาความรู้จักผู้ใช้งาน
01
Understandthebusinessfunction
การทาความเข้าใจการทางานของระบบ
02
Develop system menu andnavigation
การพัฒนาระบบเมนูและการนาทาง
03
Select theproperkindsof window
การเลือกหน้าต่างที่เหมาะสม
04
Select theproperdevice-basedcontrols
การเลือกเครื่องมือในการควบคุมการใช้งานที่เหมาะสม
05
06Select theproper screenbasedcontrols
การเลือกเครื่องมือในการควบคุมการแสดงผล
บนหน้าจอที่เหมาะสม

44. กระบวนการออกแบบส่วนติดต่อผู้ใช้งาน
กระบวนการการออกแบบ UI ประกอบด้วย 12 ขั้นตอนคือ
Whitecleartext andmessage
การเตรียมเนื้อหาหรือข้อความที่ชัดเจน
07
08
CreateMeaningful Graphics,Icons and images
การสร้างกราฟฟิกไอคอนและภาพสื่อความหมาย
09
Choosethepropercolors
การเลือกใช้สีที่เหมาะสม
10
Organizeandlayoutwindowandpages
การจัดการ เลย์เอาท์ หน้าต่าง และเพจ
11
Test and Retest
การทดสอบ
12
Provideeffectivefeedbackandguidance
การสร้างส่วนฟีตแบ็กตอบรับและแนวทางการใช้งาน
assistance

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

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