Successfully reported this slideshow.
Your SlideShare is downloading. ×

ประสบการณ์ผู้ใช้ / ส่วนต่อประสานงานกับผู้ใช้ / ปฏิสัมพันธ์ / การตอบสนอง (UX / UI / Interactive / Responsive)

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 49 Ad

ประสบการณ์ผู้ใช้ / ส่วนต่อประสานงานกับผู้ใช้ / ปฏิสัมพันธ์ / การตอบสนอง (UX / UI / Interactive / Responsive)

ระบบที่มักถูกเรียกว่า Interactive หรือ Responsive ได้รับความนิยมในแวดวงเทคโนโลยีตั้งแต่นักพัฒนาโปรแกรมไปจนถึงระดับผู้ประกอบการธุรกิจเทคโนโลยียักษ์ใหญ่ของโลก
------
User Interface : UI
ส่วนต่อประสานงานกับผู้ใช้ ในแง่ของไอทีมักหมายถึงอุปกรณ์หรือสิ่งที่ทำหน้าที่เป็นตัวกลางเชื่อมประสานให้ผู้ใช้และเครื่องจักรหรือคอมพิวเตอร์ สามารถจะสื่อสารหรือทำงานร่วมกันเพื่อบรรลุเป้าหมายใดเป้าหมายหนึ่งได้
------
User Experience : UX
ประสบการณ์ผู้ใช้ เป็นสิ่งที่พูดถึงกันอย่างกว้างขวางมาก พูดถึงในเรื่องของความชอบ ความประทับใจ ความพึงพอใจ หรือแม้แต่ใช้แล้วหงุดหงิดอารมณ์เสีย
------
Interactive
การปฏิสัมพันธ์ เป็นการสื่อสารหรือการกระทำที่มีลักษณะของการโต้ตอบระหว่างกัน ไม่ใช่การปล่อยให้ฝั่งใดฝั่งหนึ่งมีหน้าที่กระทำหรือป้อนข้อมูลเข้าไปอย่างเดียว โดยที่อีกฝั่งไม่แสดงปฏิกิริยาโต้ตอบมาในรูปแบบใดๆ เลย
------
Responsive
การตอบสนอง คือส่วนหนึ่งของระบบปฏิสัมพันธ์ และการออกแบบปฏิสัมพันธ์ Interaction Design ที่ดีนั้นก็คือส่วนหนึ่งของการสร้าง UX ที่ดีนั่นเอง

ระบบที่มักถูกเรียกว่า Interactive หรือ Responsive ได้รับความนิยมในแวดวงเทคโนโลยีตั้งแต่นักพัฒนาโปรแกรมไปจนถึงระดับผู้ประกอบการธุรกิจเทคโนโลยียักษ์ใหญ่ของโลก
------
User Interface : UI
ส่วนต่อประสานงานกับผู้ใช้ ในแง่ของไอทีมักหมายถึงอุปกรณ์หรือสิ่งที่ทำหน้าที่เป็นตัวกลางเชื่อมประสานให้ผู้ใช้และเครื่องจักรหรือคอมพิวเตอร์ สามารถจะสื่อสารหรือทำงานร่วมกันเพื่อบรรลุเป้าหมายใดเป้าหมายหนึ่งได้
------
User Experience : UX
ประสบการณ์ผู้ใช้ เป็นสิ่งที่พูดถึงกันอย่างกว้างขวางมาก พูดถึงในเรื่องของความชอบ ความประทับใจ ความพึงพอใจ หรือแม้แต่ใช้แล้วหงุดหงิดอารมณ์เสีย
------
Interactive
การปฏิสัมพันธ์ เป็นการสื่อสารหรือการกระทำที่มีลักษณะของการโต้ตอบระหว่างกัน ไม่ใช่การปล่อยให้ฝั่งใดฝั่งหนึ่งมีหน้าที่กระทำหรือป้อนข้อมูลเข้าไปอย่างเดียว โดยที่อีกฝั่งไม่แสดงปฏิกิริยาโต้ตอบมาในรูปแบบใดๆ เลย
------
Responsive
การตอบสนอง คือส่วนหนึ่งของระบบปฏิสัมพันธ์ และการออกแบบปฏิสัมพันธ์ Interaction Design ที่ดีนั้นก็คือส่วนหนึ่งของการสร้าง UX ที่ดีนั่นเอง

Advertisement
Advertisement

More Related Content

Slideshows for you (19)

Similar to ประสบการณ์ผู้ใช้ / ส่วนต่อประสานงานกับผู้ใช้ / ปฏิสัมพันธ์ / การตอบสนอง (UX / UI / Interactive / Responsive) (20)

Advertisement

More from Kridsanapong Lertbumroongchai (20)

Advertisement

ประสบการณ์ผู้ใช้ / ส่วนต่อประสานงานกับผู้ใช้ / ปฏิสัมพันธ์ / การตอบสนอง (UX / UI / Interactive / Responsive)

  1. 1. UX UI INTERACTIVE RESPONSIVE ดร.กฤษณพงศ์ เลิศบำรุงชัย facebook.com/TouchPoint.in.th TouchPoint.in.th
  2. 2. ระบบที่มักถูกเรียกว่า Interactive หรือ Responsive ได้รับความนิยมในแวดวงเทคโนโลยีตั้งแต่นักพัฒนา โปรแกรมไปจนถึงระดับผู้ประกอบการธุรกิจเทคโนโลยี ยักษ์ใหญ่ของโลก
  3. 3. User Experience : UX รู้จักกับ User Interface : UI
  4. 4. User Interface : UI ในแง่ของไอทีมักหมายถึงอุปกรณ์หรือสิ่งที่ทาหน้าที่เป็น ตัวกลางเชื่อมประสานให้ผู้ใช้และเครื่องจักรหรือคอมพิวเตอร์ สามารถจะสื่อสารหรือทางานร่วมกันเพื่อบรรลุเป้าหมายใด เป้าหมายหนึ่งได้ ส่วนต่อประสานงานกับผู้ใช้
  5. 5. ตัวอย่างของ UI ที่มีรูปธรรมชัดเจนสาหรับ คอมพิวเตอร์ซึ่งพวกเราเห็นและใช้กันจนชินตา เช่น หน้าจอมอนิเตอร์ เมาส์ และคีย์บอร์ด
  6. 6. แปลงตาแหน่งของเคอร์เซอร์ คาสั่งการคลิกเลือก หรือตัวอักษรที่พิมพ์ให้กลายเป็นคาสั่งในรูปของรหัส เลขฐานสอง ที่หน่วยประมวลผลของคอมพิวเตอร์สามารถเข้าใจและทาตามได้ เมำส์และคีย์บอร์ด
  7. 7. แปลงข้อมูลเลขฐานสองที่เก็บอยู่ในคอมพิวเตอร์ให้ออกมาเป็นรูปภาพ สีสัน ไอคอนต่างๆ ที่มนุษย์เรา สามารถดูและเข้าใจความหมายได้ หน้ำจอมอนิเตอร์
  8. 8. สมาร์ทโฟนหรือแท็บเล็ตที่เราใช้กันอยู่นั้น คือ อุปกรณ์ UI ที่รวมเอาความสามารถ การรับส่งข้อมูลทั้ง 3 อย่างไว้ในตัวเดียว หน้ำจอสัมผัส
  9. 9. ได้ถูกแบ่งออกเป็น 2 แนวทางหลักๆ ได้แก่ User Interface : UI UI >> ศาสตร์และศิลป์ของการออกแบบ UI >> ในเชิงวิจัยและพัฒนา
  10. 10. User Interface : UI เป็นการออกแบบเชิงภาพ เช่น การออกแบบหน้าโฮมเพจ การออกแบบหน้าต่างโปรแกรมคอมพิวเตอร์ให้สื่อ ความหมายและใช้งานง่าย รวมถึงการออกแบบเสียงเตือน ต่างๆ ของโปรแกรมให้เหมาะสม ศาสตร์และศิลป์ของการออกแบบ
  11. 11. User Interface : UI พบในแวดวงของนักวิจัยและพัฒนาสิ่งประดิษฐ์เทคโนโลยี ใหม่ๆ เป็นหลัก มักเกี่ยวข้องกับเทคนิคเบื้องลึกที่ถูกใช้ใน การสร้างและพัฒนานวัตกรรมฮาร์ดแวร์หรือซอฟต์แวร์ หรือทั้งคู่ จึงต้องอาศัยความรู้ทางเทคโนโลยีเฉพาะทาง ในการทาความเข้าใจ ในเชิงวิจัยและพัฒนา
  12. 12. User Experience : UX เป็นสิ่งที่พูดถึงกันอย่างกว้างขวางมาก พูดถึงในเรื่องของ ความชอบ ความประทับใจ ความพึงพอใจ หรือแม้แต่ใช้แล้ว หงุดหงิดอารมณ์เสีย เช่น ประสบการณ์ผู้ใช้
  13. 13. คลิกเข้าเว็บไซต์ไป แต่มองหาหัวข้อที่ต้องการอ่านไม่พบ เข้าเว็บไซต์ขายของออนไลน์ กฎของที่ต้องการใส่ลงตะกร้าสินค้าครบแล้ว แต่พอจะจ่ายเงิน ไม่มีอะไรบอกเลยว่าควรต้องกดปุ่มอะไรไปหน้าไหนต่อ ใช้โปรแกรมบนสมาร์ทโฟน แต่กดไปกดมาเจอทางตันกดไปไหนต่อไม่ได้ ใช้คอมพิวเตอร์ทางานอยู่ ข้อความแจ้งเตือนที่อ่านยังไงก็ไม่เข้าใจโผล่ขึ้นมา
  14. 14. การออกแบบประสบการณ์ผู้ใช้ที่ดีนั้นจะต้องออกแบบมาให้ผู้ใช้ สามารถทาสิ่งที่ต้องการได้อย่างสาเร็จลุล่วงโดยที่ไม่ต้องลง แรงกายหรือสมองมากเกินความจาเป็น
  15. 15. การออกแบบ UX ไม่ใช่แค่เรื่องของความไฮเทคของ เทคโนโลยี แต่ต้องมีความละเอียดอ่อนในการเข้าใจถึง ความต้องการและพฤติกรรมของผู้ใช้งานส่วนใหญ่ด้วย
  16. 16. UI / UX UI เป็นส่วนหนึ่งของ UX การสร้าง UX ที่ดีจะละเลยในส่วนของ UI ไม่ได้ แม้จะออกแบบ UI มาดี แต่องค์ประกอบอื่นทามาได้ไม่ดี ก็ไม่สามารถทาให้ UX ออกมาดีได้
  17. 17. การสร้าง UX ที่ดีได้ จะต้องเรียนรู้ความต้องการและลักษณะ ของผู้ใช้ ทดสอบว่าผู้ใช้สามารถใช้ผลิตภัณฑ์ที่สร้างมานี้ได้จริง หรือไม่ จะนาผลการทดสอบมาปรับปรุงผลิตภัณฑ์อย่างไร
  18. 18. Usability ความสามารถในการใช้งาน (Usability) หมายถึง สิ่งต่างๆ ที่ผู้ใช้สามารถใช้สิ่งๆ นั้นด้วยความยาก หรือง่าย คานี้ใช้ได้กับผลิตภัณฑ์ทุกสิ่งอย่างไม่ว่าจะเป็นการออกแบบหน้าเว็บไซต์ การออกแบบเตา ไมโครเวฟ หรือการออกแบบประตูบานหมุน เป็นต้น
  19. 19. องค์ประกอบของ Usability
  20. 20. มีประโยชน์ไหม ทาเรื่องที่ผู้ใช้ต้องการจะทาจริงๆ หรือเปล่า 1. มีประโยชน์Useful
  21. 21. ผู้ใช้สามารถรูวิธีใช้สิ่งนี้ได้เองหรือเปล่า 2. สำมำรถเรียนรู้ได้Learnable
  22. 22. เวลากลับมาใช้อีกภายหลัง ยังจะต้องมาเรียนวิธีใช้ใหม่อีกไหม 3. สำมำรถจำได้Memorable
  23. 23. สามารถทาสิ่งที่ผู้ใช้ต้องการได้สาเร็จหรือไม่ 4. มีประสิทธิผลEffective
  24. 24. เวลาและความพยายามที่ต้องใช้กับผลที่ได้ สมเหตุสมผลกันหรือไม่ 5. มีประสิทธิภำพEffective
  25. 25. มีคนที่ต้องการสิ่งนี้อยู่ไหม 6. เป็นที่ต้องกำรDesirable
  26. 26. ใช้แล้วทาให้รู้สึกสนุกหรือมีความสุขไหม 7. ให้ควำมสุขใจDelightful
  27. 27. User Friendly ความเป็นมิตรกับผู้ใช้ (User Friendly) จะเน้นความพึงพอใจ ของผู้ใช้เป็นหลัก โดยอาจไม่สนใจว่าผลิตภัณฑ์นี้ได้ทาในสิ่งที่ ผู้ใช้ต้องการสาเร็จลุล่วงอย่างถูกต้องหรือไม่ เพิ่มภาระให้กับ ผู้ใช้เกินความจาเป็นหรือเปล่า
  28. 28. Interactive การปฏิสัมพันธ์ เป็นการสื่อสารหรือการกระทาที่มีลักษณะของการโต้ตอบระหว่างกัน ไม่ใช่การปล่อยให้ ฝั่งใดฝั่งหนึ่งมีหน้าที่กระทาหรือป้อนข้อมูลเข้าไปอย่างเดียว โดยที่อีกฝั่งไม่แสดงปฏิกิริยาโต้ตอบมาใน รูปแบบใดๆ เลย
  29. 29. ตัวอย่ำงกำรปฏิสัมพันธ์ ผู้ใช้คลิกลิงค์บนเว็บไซต์ แล้วเว็บไซด์ ตอบสนองด้วยการแสดงข้อมูลลิงค์ ปลายทางให้ ผู้ใช้กับเว็บไซต์ หุ่นยนต์กู้ภัยเมื่อเจอสิ่งกีดขวางจะ สามารถเปลี่ยนเส้นทางเดินเพื่อหลบ สิ่งกีดขวางได้เอง หุ่นยนต์และสิ่งแวดล้อม กล้องถ่ายรูปสมาร์ทโฟน ที่ตอบสนอง ต่อคาสั่งที่เป็นสัญลักษณ์มือของผู้ใช้ จากระยะไกลได้ ท่าทาง
  30. 30. Responsive ในระบบปฏิสัมพันธ์หมายถึงกลไกของระบบปฏิสัมพันธ์ที่คอยตามติดตอบสนองและแจ้งเตือนให้ผู้ใช้ ได้รับรู้ถึงสถานะของตนในปัจจุบัน เช่น • ตอนนี้ดาวน์โหลดไฟล์เสร็จไปเท่าไหร่แล้ว • ที่กดปุ่มสั่งจ่ายเงินไประบบได้รับรู้และดาเนินการหักเงินจากบัตรเครดิตแล้วหรือยัง • มีเสียงร้องเตือนมาแสดงว่าแบตเตอรี่กาลังจะหมด เป็นต้น
  31. 31. สรุปแล้วอาจกล่าวได้ว่าการตอบสนอง Responsive คือ ส่วนหนึ่งของระบบปฏิสัมพันธ์ และการออกแบบปฏิสัมพันธ์ Interaction Design ที่ดีนั้นก็คือส่วนหนึ่งของการสร้าง UX ที่ดีนั่นเอง
  32. 32. วิวัฒนำกำรของ UI และ UX จากอดีตถึงปัจจุบัน CLI Command Line Interface GUI Graphic User Interface NUI Natural User Interface 1 2 3
  33. 33. Command Line Interface : CLI เป็นลักษณะการพิมพ์บรรทัดคาสั่ง Command Line เพื่อสั่งงานคอมพิวเตอร์โดยตรงเช่นใน ระบบปฏิบัติการ Windows หากต้องการสาเนาไฟล์ผ่านเครื่องมือบรรทัดคาสั่ง (Command Prompt) ก็สามารถทาได้โดยการพิมพ์บรรทัดคาสั่ง copy C:origin.txt D:destination.txt ซึ่งจะทาสาเนาไฟล์ต้นฉบับ C:origin.txt และวางไฟล์สาเนาไว้ที่ D:destination.txt
  34. 34. Graphic User Interface : GUI เป็นลักษณะที่คาสั่งต่างๆ ถูกแสดงเป็นภาพกราฟิกของแถบเมนูหรือไอคอนเรียง บนหน้าจอทาให้ผู้ใช้สามารถใช้เมาส์เลือกคลิกคาสั่งที่ต้องการได้โดยไม่ต้องจา ไวยากรณ์ของคาสั่งเหมือนอย่างการใช้งานบรรทัดคาสั่งในยุคแรก
  35. 35. Natural User Interface : NUI สมาร์ทโฟนและแท็บเล็ตนอกจากจะมี GUI ที่ทาให้ใช้งานง่ายแล้ว ยังมุ่งเน้นความ เป็นธรรมชาติของปฏิสัมพันธ์ด้วย สามารถใช้นิ้วจิ้มเลือกสิ่งที่ต้องการบนหน้าจอ ได้เลย เหมือนกับวิธีที่คนเราทากันอยู่แล้วในชีวิตประจาวัน
  36. 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. 37. UX ที่ดีทาให้ UI มีความเป็นธรรมชาติมากขึ้น ผู้ใช้สามารถเรียนรู้การใช้งานได้ ด้วยตนเองอย่างอัตโนมัติจากสัญชาตญาณ CLI GUI NUI Command Line Interface Graphic User Interface Natural User Interface
  38. 38. ก้ำวต่อไปของ UI และ UX ในอนำคต NUI ที่นักพัฒนากาลังพยายามสร้างกันอยู่ในปัจจุบัน คือ Zero UI (UI ล่องหน) ผู้ใช้แทบ จะไม่รู้สึกถึงว่ามี UI ระหว่างใช้งานเลย อาจกล่าวได้ว่าเป็น NUI ที่ถูกเพิ่มระดับความเป็น ธรรมชาติ ทาให้ UI นั้นถูกปิดซ่อนและทางานอยู่เบื้องหลังได้อย่างแนบเนียน
  39. 39. Voice Command เพียงแค่เอ่ยปากพูดคาสั่งออกมาสิ่งที่ต้องการก็จะถูก ดาเนินการทันทีโดยผู้ใช้ไม่ต้องหยิบจับอุปกรณ์อะไรขึ้นมาเลย ระบบสั่งงานด้วยเสียง
  40. 40. Face Recognition เมื่อผู้ใช้เปิดหน้าลงชื่อเข้าใช้ระบบจะเปิดกล้องเพื่อจับใบหน้า และหากใบหน้าตรงกับข้อมูลที่เคยบันทึกไว้ก็จะอนุญาตให้ เข้าสู่ระบบได้ทันที ฟีเจอร์ลงชื่อเข้าใช้อัตโนมัติด้วยการรู้จาใบหน้า
  41. 41. ประเภทของ UI การแบ่งประเภทของ UI นั้นยังไม่มีเกณฑ์ที่แน่ชัด บ้างก็แบ่งเป็นประเภทฮาร์ดแวร์และประเภท ซอฟต์แวร์ บ้างก็แบ่งตามประเภทของสื่อดิจิทัลที่เกี่ยวข้อง บ้างก็แบ่งตามชนิดของประสาท สัมผัสที่ผู้ใช้รับรู้ ตัวอย่างเช่น
  42. 42. Text-based / Textual UI หมายรวมถึง UI ในยุคของ Command Line Interface (CLI) ก่อนที่จะ เปลี่ยนมาเป็นยุคของ Graphic User Interface (GUI) โดยใน UI ประเภท นี้จะเน้นการสื่อสารและแสดงผลด้วยข้อความตัวอักษร
  43. 43. Visual UI เป็น UI ที่ใช้หรือเกี่ยวข้องกับรูปภาพ เช่น ระบบปฏิบัติการที่ แสดงผลแบบ GUI หน้าจอสมาร์ทโฟนที่แสดงผลเป็นรูปภาพ 2 มิติ เทคโนโลยีที่เกี่ยวข้องกับการแสดงภาพ 3 มิติหรือกึ่ง 3 มิติ เช่น Hologram, Projection Mapping, Virtual Reality, Augmented Reality, กล้องวิดีโอ 360 องศา
  44. 44. Voice / Audio UI UI ที่ใช้หรือเกี่ยวข้องกับเสียง เช่น ฟีเจอร์สั่งงานด้วยเสียง บนสมาร์ทโฟน เทคโนโลยีการสร้างเสียงที่สมจริงสาหรับ แว่นตาดิจิทัล
  45. 45. Visual UI UI ที่อนุญาตให้ผู้ใช้พิมพ์หรือพูดเพื่อโต้ตอบหรือสั่งงาน คอมพิวเตอร์ได้ด้วยภาษาธรรมชาติ ตัวอย่างของ UI ประเภทนี้ คือ Chatbot เพื่อให้ผู้ใช้สามารถสนทนาโต้ตอบได้อย่างเป็น ธรรมชาติเสมือนกาลังแชทอยู่กับคนจริงๆ
  46. 46. Touch / Tactile UI UI ที่มุ่งเน้นการสัมผัสของนิ้วมือผู้ใช้บนพื้นผิวต่างๆ เช่น หน้าจอ สัมผัสของสมาร์ทโฟนแท็บเล็ต และคอมพิวเตอร์ กาไลอัจฉริยะที่ ฉายภาพหน้าจอสมาร์ทโฟนลงบนท่อนแขนผู้ใช้ เปลี่ยนท่อนแขนนั้น ให้กลายเป็นเสมือนหน้าจอที่สั่งงานด้วยการสัมผัสได้ เป็นต้น
  47. 47. Brain UI หรือที่นิยมเรียกว่า Brain computer Interface (BCI) เป็น UI ที่มุ่งเน้นการเชื่อมต่อระหว่างคลื่นไฟฟ้าสมองของ ผู้ใช้กับคอมพิวเตอร์ประมวลผล เช่น อ่านคลื่นสมองของ ผู้ใช้แล้วนามาแปลงเป็นคาสั่งสาหรับควบคุมไฟในบ้านให้ เปิดติดตามที่คิด
  48. 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. 49. เอกสำรอ้ำงอิง ฐิติรัตน์ ศิริบวรรัตนกุล ส่วนต่อประสานงานกับผู้ใช้และการออกแบบปฏิสัมพันธ์ สานักพิมพ์สถาบันบัณฑิตพัฒนบริหารศาสตร์ สถาบันบัณฑิตพัฒนบริหารศาสตร์ User Interface and Interaction Design

×