วิชา 4153501 วิศวกรรมซอฟต์แวร์ (Software Engineering)

1. วิชา 4153501วิศวกรรมซอฟต์แวร์ (Software Engineering) การออกแบบส่วนประสานงานกับผู้ใช้ (User Interface Design)

2. การออกแบบส่วนต่อประสานการออกแบบส่วนต่อประสาน การออกแบบส่วนต่อประสานมีอยู่ 3 เรื่อง คือ • การออกแบบส่วนต่อประสานระหว่างองค์ประกอบย่อยภายในซอฟต์แวร์ • การออกแบบส่วนต่อประสานระหว่างซอฟต์แวร์และองค์ประกอบอื่นๆ ที่ไม่ใช่มนุษย์ที่เป็นส่วนผลิต และใช้ข้อมูล • การออกแบบส่วนต่อประสานระหว่างมนุษย์กับคอมพิวเตอร์

3. Interface Design Easy to learn? Easy to use? Easy to understand?

4. Interface Design Theo Mandel ได้บัญญัติกฎ 3 ข้อในการออกแบบส่วนต่อประสาน คือ • ให้ผู้ใช้เป็นผู้ควบคุมการทำงาน - Place the user in control • ลดภาระการต้องจดจำของผู้ใช้ - Reduce the user’s memory load • สร้างส่วนต่อประสานอย่างคงเส้นคงวา (สอดคล้องกัน) - Make the interface consistent

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

6. ให้ผู้ใช้เป็นผู้ควบคุมการทำงานให้ผู้ใช้เป็นผู้ควบคุมการทำงาน • จัดให้มีการโต้ตอบที่ยืดหยุ่น สามารถโต้ตอบกับระบบได้มากกว่า 1 ทาง เนื่องจากผู้ใช้แต่ละคนมีความชอบที่แตกต่างกัน จึงต้องมีตัวเลือกให้ใช้โปรแกรมผ่าน คีย์บอร์ด เมาส์ ปากกา หรือเสียง เพื่อสั่งงานระบบได้ • อนุญาตให้ผู้ใช้ทำการหยุดหรือสามารถยกเลิกได้ เช่น ผู้ใช้ควรจะสามารถสลับการทำงานไปยังโปรแกรมอื่น โดยไม่ส่งผลกระทบกับข้อมูลที่ทำไป • ออกแบบให้การโต้ตอบเป็นไปตามระดับความชำนาญในการใช้งาน เตรียมเครื่องมือสร้างการทำงานแบบอัตโนมัติให้กับผู้ใช้ เนื่องจากผู้ใช้มีทักษะในการใช้งานไม่เหมือนกันจึงควรปรับเปลี่ยนส่วนต่อประสารให้เหมาะกับความต้องการเฉพาะตัวได้ บ่อยครั้งที่ผั้ใช้ต้องทำงานที่ซ้ำเดิม จึงควรมีกลไกแมคโคร (marco) ที่ช่วยให้ผู้ใช้สะดวกในการทำงาน

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

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

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

10. ลดภาระการต้องจดจำของผู้ใช้ลดภาระการต้องจดจำของผู้ใช้ • นิยามปุ่มลัด (shortcut) ที่เข้าใจง่าย ตัวย่อควรผู้กับการกระทำในลักษณะที่ง่ายต่อการจดจำ เช่น ปุ่ม Ctrl+S แทนคำสั่งการบันทึกข้อมูล โดยทั่วไปมักใช้อักษรตัวแรกของชื่อเรียกคำสั่ง • การจัดภาพของส่วนต่อประสานควรเป็นไปตามอุปลักษณ์ของโลกจริง เพื่อให้ผู้ใช้เข้าใจลำดับการทำงานได้ง่าย โดยไม่ต้องจดจำขั้นตอนการโต้ตอบกับระบบ • เปิดเผยข่าวสารในลักษณะค่อยๆ เพิ่มพูน ส่วนต่อประสานควรมีการจัดลำดับชั้นแสดงรายละเอียดการใช้งาน เช่นแสดงรายละเอียดพอสังเขปก่อน ส่วนรายละเอียดอื่นๆ ให้ผู้ใช้คลิกเลือกได้เองเมื่อต้องการ เช่น การขีดเส้นใต้ มีหลายรูปแบบจะไม่ถูกแสดงในเบื้องต้น เมื่อผู้ใช้เลือกเมนูขีดเส้นใต้ จึงค่อยแสดงรายละเอียด เช่น เส้นเดี่ยว เส้นคู่ เส้นประ เป็นต้น

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

12. สร้างส่วนต่อประสานอย่างคงเส้นคงวา (สอดคล้องกัน) • ช่วยให้ผู้ใช้ทราบว่างานปัจจุบันอยู่ภายใต้บริบทใด ระบบอาจมีหลายหน้าจอซึ่งอาจทำให้ผู้ใช้สับสนว่าทำงานอยู่ในขั้นตอนใด จึงต้องมีส่วนที่บ่งบอก เช่น ชื่อหน้า ไอคอน สี ที่ช่วยให้ผู้ใช้ทราบว่าปัจจุบันคืออะไร มาจากส่วนงานไป และจะไปต่อได้อย่างไรบ้าง • ดำรงความคงเส้นคงวาตลอดทั้งตระกูลของแอพพลิเคชั่น นั่นคือ ส่วนประสานต้องเหมือนและสอดคล้องกันตลอดกลุ่มผลิตภัณฑ์เดียวกัน แม้ว่าวัตถุประสงค์ของแต่ละโปรแกรมจะแตกต่างกันก็ตาม เช่น โปรแกรม word, excel, access ซึ่งผลิตภัฑณ์ในกลุ่มผลิตภัณฑ์เดียวกัน จะมีส่วนต่อประสานที่คล้ายกัน

13. สร้างส่วนต่อประสานอย่างคงเส้นคงวา (สอดคล้องกัน) 3.ถ้ารูปแบบการโต้ตอบที่ผ่านมาทำให้ผู้ใช้เกิดความคาดหมาย อย่าเปลี่ยนกฎนั้น ยกเว้นมีเหตุผลสมควร นั่นคือ ไม่ควรเปลี่ยนลักษณะการโต้ตอบที่โปรแกรมส่วนใหญ่ใช้ เพราะผู้ใช้จะคุ้นเคยกับการโต้ตอบในลักษณะนั้น เช่น Ctrl+S เป็นการบันทึกข้อมูล ถ้าเราเปลี่ยน Ctrl+S เป็นการทำงานอย่างอื่น ผู้ใช้จะสับสนได้

14. การวิเคราะห์และออกแบบส่วนประสานกับผู้ใช้การวิเคราะห์และออกแบบส่วนประสานกับผู้ใช้ แบบจำลองการวิเคราะห์และออกแบบส่วนต่อประสาน มี 4 แบบจำลอง คือ • User model — แบบจำลองผู้ใช้ (บอกลักษณะของผู้ใช้งานในระบบ ว่ามีผู้ใช้แบบใดบ้าง) • Design model — แบบจำลองการออกแบบ (การออกแบบที่คำนึงถึงผู้ใช้งาน กำหนดลักษณะการโต้ตอบในการใช้งานระบบ) • Mental model (system perception) — แบบจำลองสภาพจิตของผู้ใช้ หรือการรับรู้ระบบ (ภาพลักษณ์ของระบบที่ผู้ใช้จินตนาการไว้ ขึ้นอยู่กับภูมิหลังของผู้ใช้) • Implementation model — แบบจำลองอิมพลีเมนต์เทชั่น (“look and feel” หน้าตาของส่วนประสาน เข้ากับการสนับสนุนข้อมูล)

15. กระบวนการในการพัฒนาส่วนต่อประสานกระบวนการในการพัฒนาส่วนต่อประสาน • กระบวนการในการพัฒนาส่วนต่อประสาน เป็นกระบวนการวนซ้ำที่แทนได้เป็นแบบจำลองเกลียว 1. การวิเคราะห์และสร้างแบบจำลอง 2. การออกแบบส่วนต่อประสาน 3. การอิมพลีเมนต์ส่วนต่อประสาน 4. การประเมินส่วนต่อประสาน

16. การวิเคราะห์ส่วนต่อประสาน (Interface Analysis) • Interface analysis means understanding • ในการวิเคราะห์ส่วนต่อประสาน ต้องเข้าใจปัญหาก่อน นั่นคือ • the people -- เข้าใจคน บุคลากรที่ใช้งานระบบ • the tasks -- เข้าใจงานที่ผู้ใช้ต้องการใช้เพื่อให้ทำงานให้สำเร็จ • the content -- เข้าใจเนื้อหาที่จะต้องนำเสนอในส่วนต่อประสาน • the environment -- เข้าใจสิ่งแวดล้อมที่งานเหล่านั้นทำงานอยู่

17. การวิเคราะห์ผู้ใช้งาน (User Analysis) • ผู้ใช้แต่ละคนมีภาพลักษณ์ของระบบภายในใจ การเข้าใจระบบก็จะขึ้นอยู่กับภาพลักษณ์ที่มี ในทางการออกแบบจึงควรเข้าใจผู้ใช้ว่าจะใช้ระบบอย่างไร ต้องการส่วนต่อประสานในลักษณะใด • การสัมภาษณ์เป็นวิธีที่จะทำความเข้าใจความต้องการของผู้ใช้งาน ซึ่งจะช่วยให้นักออกแบบเข้าใจว่า ใครคือผู้ใช้งาน จะแบ่งกลุ่มผู้ใช้อย่างไร ผู้ใช้แต่ละกลุ่มมีทักษะและประสบการณ์ในระดับใด แบบจำลองสภาพจิตใจของผู้ใช้ที่มีต่อระบบเป็นอย่างไร และส่วนต่อประสานจะตอบสนองความต้องการของผู้ใช้ได้อย่างไร

18. การจำลองและวิเคราะห์งานย่อยการจำลองและวิเคราะห์งานย่อย • Answers the following questions … • What work will the user perform in specific circumstances? (ลักษณะของการปฏิบัติงาน) • What tasks and subtasks will be performed as the user does the work? (งานหลักและงานย่อยที่ต้องปฏิบัติ) • What specific problem domain objects will the user manipulate as work is performed? (ปัญหาหลักที่ต้องใช้งานเพื่อทำงาน ระบบงานและส่วนที่เกี่ยวข้อง) • What is the sequence of work tasks—the workflow? (ลำดับของงานที่ทำ) • What is the hierarchy of tasks? (ลำดับชั้นของงานย่อย)

19. การจำลองและวิเคราะห์งานย่อยการจำลองและวิเคราะห์งานย่อย เทคนิคในการวิเคราะห์ออกแบบส่วนต่อประสาน • Use-cases define basic interaction • Task elaboration refines interactive tasks • Object elaboration identifies interface objects (classes) • Workflow analysis defines how a work process is completed when several people (and roles) are involved

20. ตัวอย่าง • แผนภาพ กระบวนการทำงานเมื่อผู้ป่วยขอให้เติมยาที่หมด • มีผู้เกี่ยวข้อง 3 ส่วน patient, pharmacist, physician • นักออกแบบส่วนต่อประสานควรคำนึงถึงลักษณะของผู้ใช้ และกิจกรรมงาน

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

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

23. ขั้นตอนการออกแบบส่วนต่อประสานขั้นตอนการออกแบบส่วนต่อประสาน • Define interface objects and actions (operations) – นิยามวัตถุและตัวดำเนินการ โดยใช้ข้อมูลจากการวิเคราะห์ • Define events (user actions) -- กำหนดเหตุการณ์ที่เป็นการกระทำของผู้ใช้ • Depict each interface state -- แสดงด้วยรูปถึงสถานะของส่วนต่อประสานที่ผู้ใช้จะได้สัมผัส • Indicate how the user interprets the state of the system – อธิบายให้ทราบความหมายของข้อมูลที่แสดง ระบุว่าผู้ใช้จะเข้าใจสถานะของระบบอย่างไร

24. Interface Design Patterns • Patterns are available for • The complete UI -- หน้าตาของส่วนต่อประสาน ว่ามีรูปร่างหน้าตาเต็มๆอย่างไร • Page layout -- การจัดระเบียบหน้าจอ รูปแบบการนำเสนอ • Forms and input -- การนำข้อมูลเข้า • Tables -- การแสดงข้อมูลแบบตาราง • Direct data manipulation -- การเข้าถึงข้อมูลอย่างเหมาะสม • Navigation -- การจัดลำดับหน้า ให้ผู้ใช้เคลื่อนที่ไปมาได้อย่างเหมาะสม • Searching -- การค้นหาข้อมูล • Page elements -- องค์ประกอบของหน้าจอ • e-Commerce -- ส่วนประกอบของแอพพลิเคชั่นอีคอมเมิร์ช

25. Design Issues ข้อควรคำนึงในการออกแบบ • Response time : เวลาในการตอบสนองของระบบ • Help facilities : การช่วยเหลือแก่ผู้ใช้งาน • Error handling : การจัดการความผิดพลาด • Menu and command labeling : การกำหนดชื่อคำสั่งและเมนู • Application accessibility : การเข้าถึงระบบงาน • Internationalization : ความเป็นสากล

26. รูปแบบของ User Interfaces • เพื่อให้ผู้ใช้งานสามารถโต้ตอบกับระบบอย่างมีประสิทธิภาพ • นิยมใช้แบบกราฟิก (Graphic User Interface :GUI) • มีรูปแบบดังนี้ คือ • การโต้ตอบด้วยคำสั่ง (Command Language Interaction) • การโต้ตอบด้วยเมนูคำสั่ง(Menu Interaction) • การโต้ตอบด้วยแบบฟอร์ม(Form Interaction) • การโต้ตอบด้วยการทำงานเชิงวัตถุ(Object-Based Interaction) • การโต้ตอบด้วยภาษามนุษย์(Natural Language Interaction)

27. การโต้ตอบด้วยคำสั่ง (Command Language Interaction) • เป็นการโต้ตอบกับระบบโดยที่ผู้ใช้จะต้องพิมพ์คำสั่งลงในช่องป้อนคำสั่ง เพื่อกระตุ้นให้เกิดการทำงานในระบบ • ผู้ใช้จะต้องจำคำสั่ง ไวยากรณ์ และกฎเกณฑ์ต่างๆ • เช่น ผู้ใช้ที่ชำนาญการใช้ระบบปฏิบัติการ DOS • ลดความนิยมในปัจจุบัน คำสั่ง copy ไฟล์จาก drive c: ไปยัง drive a: C:\copy ex1.doc a:ex1.doc

28. การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction) • เป็นการโต้ตอบกับระบบด้วยการแสดงเมนูคำสั่ง โดยผู้ใช้ไม่จำเป็นต้องป้อนคำสั่งเอง • รูปแบบเมนูมีดังนี้ คือ • Pull-down Menu • Pop-up Menu

29. Pull-down Menu Pull-down Menu เมนูแสดงคำสั่ง โดยแบ่งรายการของคำสั่งเป็นหมวดหมู่ เมื่อผู้ใช้คลิกจะแสดงรายการคำสั่งจากบนลงล่าง

30. Pop-up Menu Pop-up Menu เมนูแสดงคำสั่ง เมื่อผู้ใช้คลิกเลือกวัตถุ หรือ object ใด ๆ ในจอภาพ คำสั่งหรือคุณสมบัติที่เกี่ยวข้องกับ object นั้นจะถูกแสดงออกมา

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

32. การโต้ตอบด้วยแบบฟอร์ม (Form Interaction) • เป็นการโต้ตอบที่ผู้ใช้ระบบจะต้องป้อนข้อมูลลงในช่องว่างที่อยู่ในแบบฟอร์มที่แสดงหน้าจอคอมพิวเตอร์ • คล้ายการกรอกแบบฟอร์มลงในกระดาษ • ชื่อของช่องป้อนข้อมูลต้องสื่อความหมาย • แบ่งส่วนของข้อมูลบนฟอร์มให้เหมาะสม • ควรแสดงข้อมูลเริ่มต้นให้กับช่องป้อนข้อมูลที่ต้องใช้ข้อมูลนั้นบ่อยครั้ง • ช่องป้อนข้อมูลไม่ควรยาวมากจนเกินไป

33. ตัวอย่างการโต้ตอบด้วยแบบฟอร์มตัวอย่างการโต้ตอบด้วยแบบฟอร์ม

34. การโต้ตอบเชิงวัตถุ (Object-Based Interaction) • เป็นการโต้ตอบกับระบบที่ใช้สัญลักษณ์ • สัญลักษณ์เป็นตัวแทนคำสั่งที่ใช้ในการปฏิบัติงาน • สัญลักษณ์รูปภาพแทนคำสั่งการทำงานเรียกว่า ไอคอน (Icon) • ประหยัดพื้นที่บนหน้าจอ

35. การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction) • เป็นการโต้ตอบกับระบบด้วยการใช้เสียงพูดของผู้ใช้ระบบ • ใช้เสียงพูดทั้งการนำข้อมูลเข้าและออกจากระบบ

36. การออกแบบลำดับการเชื่อมโยงจอภาพการออกแบบลำดับการเชื่อมโยงจอภาพ • เป็นการออกแบบลำดับของการแสดงส่วนติดต่อกับผู้ใช้ของโปรแกรม หรือลำดับของการแสดงส่วน User Interface ทางหน้าจอคอมพิวเตอร์ • แผนภาพแสดงลำดับการเชื่อมโยงจอภาพ (Dialogues Diagram) ประกอบไปด้วย 3 ส่วน คือ • ส่วนบน: เลขลำดับหน้าจอ • ส่วนกลาง: ชื่อหน้าจอการทำงาน • ส่วนล่าง: เลขลำดับหน้าจอที่อ้างอิงมา ต่อไป หรือ ย้อนกลับ

37. เลขลำดับหน้าจอ ชื่อหน้าจอการทำงาน เลขลำดับที่อ้างอิงมา Dialogues Diagram • Dialogues Diagram เป็นแผนภาพแสดงลำดับการเชื่อมโยงของจอภาพ

38. ตัวอย่าง สัญลักษณของ Dialogue Diagram มีรายละเอียดดังนี้ - Top ใชแสดงหมายเลขลําดับเพื่อการอางอิงจากหนาจออื่น หมายเลขลําดับในสวนบนนี้จะตองไมซ้ำกัน - Middle ใชแสดงชื่อหนาจอทํางานหรือขอความแสดงรายละเอียดการทํางาน เพื่อใหทราบวาหนาจอหมายเลขดังกล่าวใชทํางานใด - Bottom ใชแสดงหมายเลขของหนาจอที่อางอิงมา (เชื่อมโยง) คั่นดวยเครื่องหมายจุลภาค ( , ) ตามดวยหมายเลขหนาจอต่อไปหรือหนาจอยอนกลับเมื่อเสร็จสิ้นการทํางานแลว

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

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