#พื้นฐานการออกแบบปฏิสัมพันธ์ #Interaction Design Basic การออกแบบการปฏิสัมพันธ์ ไม่ใช่แค่การโต้ตอบระหว่างมนุษย์กับคอมพิวเตอร์เท่านั้น และไม่ใช่แค่ผลงานด้านมัลติมีเดีย แต่การปฏิสัมพันธ์เป็นการคิดเชิงระบบ ที่มนุษย์สามารถจะทำอะไรบางอย่างทั้งกับสิ่งมีชีวิตและไม่มีชีวิต

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

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

4. ปฏิสัมพันธ์ไม่ใช่แค่การสร้างสิ่งประดิษฐ์หรือระบบแต่ยังต้องเข้าใจและสามารถเลือกว่าสิ่ง
เหล่านั้นสามารถส่งผลกระทบต่อการทางานของผู้ใช้ระบบอย่างไร และสิ่งประดิษฐ์ที่สร้าง
ขึ้นนั้นไม่ใช่แค่อุปกรณ์ เครื่องคอมพิวเตอร์ หรือ โปรแกรมที่ให้กับผู้ใช้แต่หมายถึงเอกสาร
(Documentation) คู่มือการใช้ (Manuals) คู่มือการสอน (Tutorials) ระบบการช่วยเหลือ
ออนไลน์ (Help OnlineSystem)

5. คาจากัดความคือ เข้าใจในวัสดุหรือปัจจัยที่มีอยู่ “Understand your materials” ในเรื่องของปฏิสัมพันธ์
ระหว่างมนุษย์กับคอมพิวเตอร์นั่น หมายถึงทาความเข้าใจกับ 2 ส่วนหลักๆ คือ
กฎทองของการออกแบบ
Golden Rule of Design
เข้าใจมนุษย์
(UnderstandPeople)
คือ ทางด้านจิตวิทยาและด้านสังคม
และความผิดพลาดที่เกิดขึ้นได้กับ
มนุษย์ และปฏิสัมพันธ์ระหว่างมนุษย์
กับคอมพิวเตอร์
คือ ข้อจากัดต่าง ๆ ความจุ
อุปกรณ์ และเพลตฟอร์ม
เข้าใจเครื่องคอมพิวเตอร์
UnderstandComputers

6. ขั้นตอนการออกแบบ
Theprocessof design
ต้องการอะไร
Whatis wanted
การวิเคราะห์และสถานการณ์
scenarios
ข้อความอธิบาย
DialogueNotations
ข้อมูลที่เฉพาะเจาะจง
PreciseSpecification
อะไร VS. อะไรที่ต้องการ
Whatis thereVS.
Whatis wanted
ต้นแบบ
Prototype
การนาไปใช้
และปรับใช้
Implementanddeploy
สัมภาษณ์
การศึกษาวัฒนธรรมและสังคม
Interviewsethnography
การวิเคราะห์
analysis
แนวปฏิบัติหลักการ
GuidelinesPrinciples
เอกสารช่วยเหลือด้าน
สถาปัตยกรรมระบบ
ArchitecturesDocumentationHelp
การประเมินให้ค้นหา
วิธีแก้ไขปัญหา
EvaluationHeuristics
การออกแบบ
design

7. การออกแบบแบบมุ่งเน้นที่ผู้ใช้
Userfocus
ต้องเริ่มจากการทา
ความเข้าใจผู้ใช้ก่อน
Knowtheuser
คุณสมบัติของบุคคล
persona

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

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

10. ฉากเหตุการณ์ที่เกิดขึ้นของปฏิสัมพันธ์
Scenarios
เรื่องราวการ
ออกแบบ
ความเรียงลาดับ
เป็นเส้นตรง

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

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

13. การนาร่องการออกแบบ
NavigationDesign
โครงสร้างเฉพาะ
คอมพิวเตอร์ส่วนตัว
LocalStructure
มองให้กว้างขึ้น
WiderStill
โครงสร้างเว็บไซต์
การเรียงลาดับ
GlobalStructureHierarchical
Organization
โครงสร้างเว็บไซต์
ไดอะล็อก
GlobalStructure:Dialog

14. โครงสร้างเฉพาะคอมพิวเตอร์ส่วนตัว
LocalStructure
01
02
03
04
รู้ว่าอยู่ตรงจุดไหนของขั้นตอนการออกแบบ
Knowingwhereyou are
รู้ว่ากาลังทาอะไรอยู่
Knowingwhatyou cando
รู้ว่าอยู่กาลังไปยังตรงจุดไหนของขั้นตอน และจะเกิดอะไรต่อไป
Knowingwhereyou aregoingor whatwillhappen
รู้ว่าผ่านจุดไหนของขั้นตอนการออกแบบมาแล้วบ้าง
Knowingwhereyou’vebeenor whatyou’vedone

15. โครงสร้างเฉพาะคอมพิวเตอร์ส่วนตัว
LocalStructure
www.touchpoint.in.th/statisticstutorial/note/howtocreatewebsite
Web site Top level category Sub-category Thispage
Live linkto
higherlevels

16. โครงสร้างเว็บไซต์: การเรียงลาดับ
GlobalStructure:HierarchicalOrganization
The System
Management Messages
Info and Help
Add User Remove User

17. โครงสร้างเว็บไซต์: ไดอะล็อก
GlobalStructure:Dialog
Dialog คือ ข้อความบทสนทนาต่างๆ ที่โต้ตอบกัน เป็นการ
เว้นคาให้ใส่ชื่อของผู้ใช้ ใส่ลงในช่องว่าง สาหรับบทสนทนา
บนคอมพิวเตอร์ (Computer Dialogue) คือ ป้าย Label
สาหรับแสดงผลบนหน้าจอ คล้ายกับบนสนทนาที่ใช้ทั่วไป
แต่มาปรากฏบนหน้าจอคอมพิวเตอร์แทน และให้เติม
ข้อความบนหน้าจอ

18. เนื่องจากต้องให้ระบบทางานสอดคล้องกับแอปพลิเคชันอื่น ๆ จึง
ต้องคานึงถึง สิ่งเหล่านี้ เช่น สไตล์การออกแบบ (Style issues)
ต้องมีความสม่าเสมอและสอดคล้องกับ แพล็ตฟอร์ม และ
มาตรฐานอื่น ๆ ฟังก์ชันการทางาน (Functional Issues) ที่
เข้าใจง่ายและมีใช้อยู่ทั่วไป เช่น การคัดลอกและการวาง (Copy
and Paste) การนาร่องการทางาน (Navigation issues) ควร
ให้ความสาคัญกับลาดับการทางานภายในแอปพลิเคชัน และ
หน้าจออื่นๆ
มองให้กว้างขึ้น
WiderStill

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

20. อินโฟกราฟิก
Infographic

21. อินโฟกราฟิก
Infographic

22. อินโฟกราฟิก
Infographic

23. อินโฟกราฟิก
Infographic

24. อินโฟกราฟิก
Infographic

25. อินโฟกราฟิก
Infographic

26. รากฐานของอินโฟกราฟิกจะประกอบด้วยสามส่วนหลัก คือ
อินโฟกราฟิก
Infographic
เนื้อหา ภาพ ความรู้