1.
UX UI
INTERACTIVE
RESPONSIVE
ดร.กฤษณพงศ์ เลิศบำรุงชัย
facebook.com/TouchPoint.in.th
TouchPoint.in.th

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

3.
User Experience : UX
รู้จักกับ
User Interface : UI

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

5.
ตัวอย่างของ UI ที่มีรูปธรรมชัดเจนสาหรับ
คอมพิวเตอร์ซึ่งพวกเราเห็นและใช้กันจนชินตา เช่น
หน้าจอมอนิเตอร์ เมาส์ และคีย์บอร์ด

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

7.
แปลงข้อมูลเลขฐานสองที่เก็บอยู่ในคอมพิวเตอร์ให้ออกมาเป็นรูปภาพ สีสัน ไอคอนต่างๆ ที่มนุษย์เรา
สามารถดูและเข้าใจความหมายได้
หน้ำจอมอนิเตอร์

8.
สมาร์ทโฟนหรือแท็บเล็ตที่เราใช้กันอยู่นั้น คือ อุปกรณ์ UI ที่รวมเอาความสามารถ
การรับส่งข้อมูลทั้ง 3 อย่างไว้ในตัวเดียว
หน้ำจอสัมผัส

9.
ได้ถูกแบ่งออกเป็น 2 แนวทางหลักๆ ได้แก่
User Interface : UI
UI >> ศาสตร์และศิลป์ของการออกแบบ
UI >> ในเชิงวิจัยและพัฒนา

10.
User Interface : UI
เป็นการออกแบบเชิงภาพ เช่น การออกแบบหน้าโฮมเพจ
การออกแบบหน้าต่างโปรแกรมคอมพิวเตอร์ให้สื่อ
ความหมายและใช้งานง่าย รวมถึงการออกแบบเสียงเตือน
ต่างๆ ของโปรแกรมให้เหมาะสม
ศาสตร์และศิลป์ของการออกแบบ

11.
User Interface : UI
พบในแวดวงของนักวิจัยและพัฒนาสิ่งประดิษฐ์เทคโนโลยี
ใหม่ๆ เป็นหลัก มักเกี่ยวข้องกับเทคนิคเบื้องลึกที่ถูกใช้ใน
การสร้างและพัฒนานวัตกรรมฮาร์ดแวร์หรือซอฟต์แวร์
หรือทั้งคู่ จึงต้องอาศัยความรู้ทางเทคโนโลยีเฉพาะทาง
ในการทาความเข้าใจ
ในเชิงวิจัยและพัฒนา

12.
User Experience : UX
เป็นสิ่งที่พูดถึงกันอย่างกว้างขวางมาก พูดถึงในเรื่องของ
ความชอบ ความประทับใจ ความพึงพอใจ หรือแม้แต่ใช้แล้ว
หงุดหงิดอารมณ์เสีย เช่น
ประสบการณ์ผู้ใช้

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

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

15.
การออกแบบ UX ไม่ใช่แค่เรื่องของความไฮเทคของ
เทคโนโลยี แต่ต้องมีความละเอียดอ่อนในการเข้าใจถึง
ความต้องการและพฤติกรรมของผู้ใช้งานส่วนใหญ่ด้วย

16.
UI / UX
UI เป็นส่วนหนึ่งของ UX การสร้าง UX ที่ดีจะละเลยในส่วนของ UI ไม่ได้
แม้จะออกแบบ UI มาดี แต่องค์ประกอบอื่นทามาได้ไม่ดี ก็ไม่สามารถทาให้ UX ออกมาดีได้

17.
การสร้าง UX ที่ดีได้ จะต้องเรียนรู้ความต้องการและลักษณะ
ของผู้ใช้ ทดสอบว่าผู้ใช้สามารถใช้ผลิตภัณฑ์ที่สร้างมานี้ได้จริง
หรือไม่ จะนาผลการทดสอบมาปรับปรุงผลิตภัณฑ์อย่างไร

18.
Usability
ความสามารถในการใช้งาน (Usability) หมายถึง สิ่งต่างๆ ที่ผู้ใช้สามารถใช้สิ่งๆ นั้นด้วยความยาก
หรือง่าย คานี้ใช้ได้กับผลิตภัณฑ์ทุกสิ่งอย่างไม่ว่าจะเป็นการออกแบบหน้าเว็บไซต์ การออกแบบเตา
ไมโครเวฟ หรือการออกแบบประตูบานหมุน เป็นต้น

19.
องค์ประกอบของ
Usability

20.
มีประโยชน์ไหม ทาเรื่องที่ผู้ใช้ต้องการจะทาจริงๆ หรือเปล่า
1. มีประโยชน์Useful

21.
ผู้ใช้สามารถรูวิธีใช้สิ่งนี้ได้เองหรือเปล่า
2. สำมำรถเรียนรู้ได้Learnable

22.
เวลากลับมาใช้อีกภายหลัง ยังจะต้องมาเรียนวิธีใช้ใหม่อีกไหม
3. สำมำรถจำได้Memorable

23.
สามารถทาสิ่งที่ผู้ใช้ต้องการได้สาเร็จหรือไม่
4. มีประสิทธิผลEffective

24.
เวลาและความพยายามที่ต้องใช้กับผลที่ได้
สมเหตุสมผลกันหรือไม่
5. มีประสิทธิภำพEffective

25.
มีคนที่ต้องการสิ่งนี้อยู่ไหม
6. เป็นที่ต้องกำรDesirable

26.
ใช้แล้วทาให้รู้สึกสนุกหรือมีความสุขไหม
7. ให้ควำมสุขใจDelightful

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

28.
Interactive
การปฏิสัมพันธ์ เป็นการสื่อสารหรือการกระทาที่มีลักษณะของการโต้ตอบระหว่างกัน ไม่ใช่การปล่อยให้
ฝั่งใดฝั่งหนึ่งมีหน้าที่กระทาหรือป้อนข้อมูลเข้าไปอย่างเดียว โดยที่อีกฝั่งไม่แสดงปฏิกิริยาโต้ตอบมาใน
รูปแบบใดๆ เลย

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

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

31.
สรุปแล้วอาจกล่าวได้ว่าการตอบสนอง Responsive คือ
ส่วนหนึ่งของระบบปฏิสัมพันธ์ และการออกแบบปฏิสัมพันธ์
Interaction Design ที่ดีนั้นก็คือส่วนหนึ่งของการสร้าง UX
ที่ดีนั่นเอง

32.
วิวัฒนำกำรของ UI และ UX
จากอดีตถึงปัจจุบัน
CLI
Command Line Interface
GUI
Graphic User Interface
NUI
Natural User Interface
1 2 3

33.
Command Line Interface : CLI
เป็นลักษณะการพิมพ์บรรทัดคาสั่ง Command Line เพื่อสั่งงานคอมพิวเตอร์โดยตรงเช่นใน
ระบบปฏิบัติการ Windows หากต้องการสาเนาไฟล์ผ่านเครื่องมือบรรทัดคาสั่ง (Command
Prompt) ก็สามารถทาได้โดยการพิมพ์บรรทัดคาสั่ง
copy C:origin.txt D:destination.txt
ซึ่งจะทาสาเนาไฟล์ต้นฉบับ C:origin.txt และวางไฟล์สาเนาไว้ที่ D:destination.txt

34.
Graphic User Interface : GUI
เป็นลักษณะที่คาสั่งต่างๆ ถูกแสดงเป็นภาพกราฟิกของแถบเมนูหรือไอคอนเรียง
บนหน้าจอทาให้ผู้ใช้สามารถใช้เมาส์เลือกคลิกคาสั่งที่ต้องการได้โดยไม่ต้องจา
ไวยากรณ์ของคาสั่งเหมือนอย่างการใช้งานบรรทัดคาสั่งในยุคแรก

35.
Natural User Interface : NUI
สมาร์ทโฟนและแท็บเล็ตนอกจากจะมี GUI ที่ทาให้ใช้งานง่ายแล้ว ยังมุ่งเน้นความ
เป็นธรรมชาติของปฏิสัมพันธ์ด้วย สามารถใช้นิ้วจิ้มเลือกสิ่งที่ต้องการบนหน้าจอ
ได้เลย เหมือนกับวิธีที่คนเราทากันอยู่แล้วในชีวิตประจาวัน

36.
CLI GUI NUI
วิวัฒนำกำรของ UI และ UX
จากอดีตถึงปัจจุบัน
Command Line Interface Graphic User Interface Natural User Interface
1 2 3
การเปลี่ยนแปลงใน 3 ยุคนี้ล้วนแต่เป็นการพัฒนา Usability และ UX ให้ดีขึ้น
• CLI : ที่ใช้ยากต้องจาชื่อคาสั่งและวิธีใช้รวมถึงไวยากรณ์ของแต่ละคาสั่งเองหมด
• GUI : ที่ให้ผู้ใช้มองและเลือกสิ่งที่ต้องการโดยไม่ต้องจา
• NUI : ที่ปรับการออกแบบรวมถึงปฏิสัมพันธ์ให้สอดคล้องกับหลักของ Usability

37.
UX ที่ดีทาให้ UI มีความเป็นธรรมชาติมากขึ้น ผู้ใช้สามารถเรียนรู้การใช้งานได้
ด้วยตนเองอย่างอัตโนมัติจากสัญชาตญาณ
CLI GUI NUI
Command Line Interface Graphic User Interface Natural User Interface

38.
ก้ำวต่อไปของ UI และ UX ในอนำคต
NUI ที่นักพัฒนากาลังพยายามสร้างกันอยู่ในปัจจุบัน คือ Zero UI (UI ล่องหน) ผู้ใช้แทบ
จะไม่รู้สึกถึงว่ามี UI ระหว่างใช้งานเลย อาจกล่าวได้ว่าเป็น NUI ที่ถูกเพิ่มระดับความเป็น
ธรรมชาติ ทาให้ UI นั้นถูกปิดซ่อนและทางานอยู่เบื้องหลังได้อย่างแนบเนียน

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

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

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

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

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

44.
Voice / Audio UI
UI ที่ใช้หรือเกี่ยวข้องกับเสียง เช่น ฟีเจอร์สั่งงานด้วยเสียง
บนสมาร์ทโฟน เทคโนโลยีการสร้างเสียงที่สมจริงสาหรับ
แว่นตาดิจิทัล

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

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

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

48.
แบบฝึกหัด
สืบค้นและยกตัวอย่างของ UI ที่มีอยู่จริง อธิบายโดยสังเขปถึงเทคนิคหรือ
เทคโนโลยีที่ใช้อยู่เบื้องหลัง UI ที่เลือกมา แล้ววิเคราะห์ว่า UI นั้นทาหน้าที่
เป็น Input หรือ Output และสามารถนาสิ่งที่เลือกมานี้ให้เกิดประโยชน์กับ
ตัวเองได้อย่างไรบ้าง
1. Visual UI
2. Voice / Audio UI
3. Natural Language UI
4. Touch/Tactile UI
5. Haptic UI
6. Brain UI

49.
เอกสำรอ้ำงอิง
ฐิติรัตน์ ศิริบวรรัตนกุล
ส่วนต่อประสานงานกับผู้ใช้และการออกแบบปฏิสัมพันธ์
สานักพิมพ์สถาบันบัณฑิตพัฒนบริหารศาสตร์ สถาบันบัณฑิตพัฒนบริหารศาสตร์
User Interface and Interaction Design