ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
วิศวกรรมซอฟต์แวร์ วิศวกรรมซอฟต์แวร์ (Software Engineering)
การออกแบบส่วนประสานงานกับผู้ใช้ (User Interface Design)
2
การออกแบบส่วนต่อประสาน
การออกแบบส่วนต่อประสานมีอยู่ 3 ส่วนที่สำคัญ การออกแบบส่วนต่อประสานระหว่างองค์ประกอบย่อยภายในซอฟต์แวร์ การออกแบบส่วนต่อประสานระหว่างซอฟต์แวร์และองค์ประกอบอื่นๆ ที่ไม่ใช่ มนุษย์ที่เป็นส่วนผลิต และใช้ข้อมูล การออกแบบส่วนต่อประสานระหว่างมนุษย์กับคอมพิวเตอร์
3
Interface Design Theo Mandel ได้บัญญัติกฎ 3 ข้อในการออกแบบส่วนต่อประสาน คือ ให้ผู้ใช้เป็นผู้ควบคุมการทำงาน - Place the user in control ลดภาระการต้องจดจำของผู้ใช้ - Reduce the user’s memory load สร้างส่วนต่อประสานอย่างคงเส้นคงวา (สอดคล้องกัน) - Make the interface consistent
4
ให้ผู้ใช้เป็นผู้ควบคุมการทำงาน
การออกแบบควรคำถึงลูกค้า (ความต้องการของผู้ใช้) ควรปล่อยให้ผู้ใช้มีอิสระในการเลือกใช้งานหรือโต้ตอบ กับระบบ และสามารถควบคุมการใช้งานบางส่วนได้ มีหลักเกณฑ์ในการออกแบบที่ใช้ผู้ใช้ควบคุมดังนี้ 1. กำหนดโหมดการโต้ตอบในลักษณะที่ไม่บังคับผู้ใช้โดยไม่จำเป็น หรือในทางที่ผู้ใช้ไม่ต้องการที่จะ ทำ เช่น ส่วนตรวจสอบคำสะกดในโปรแกรม ไม่ควรบังคับให้ผู้ใช้เข้าสู่โหมดการตรวจสอบคำทันทีที่พบ คำผิด ควรให้ผู้ใช้ไปแก้ไขเองเมื่อต้องการ และเป็นการแก้ไขที่ใช้งานได้ง่ายด้วย
5
ให้ผู้ใช้เป็นผู้ควบคุมการทำงาน
จัดให้มีการโต้ตอบที่ยืดหยุ่น สามารถโต้ตอบกับระบบได้มากกว่า 1 ทาง เนื่องจากผู้ใช้แต่ละคนมีความชอบที่แตกต่างกัน จึงต้องมีตัวเลือกให้ใช้โปรแกรมผ่าน คีย์บอร์ด เมาส์ ปากกา หรือเสียง เพื่อสั่งงานระบบได้ อนุญาตให้ผู้ใช้ทำการหยุดหรือสามารถยกเลิกได้ เช่น ผู้ใช้ควรจะสามารถสลับ การทำงานไปยังโปรแกรมอื่น โดยไม่ส่งผลกระทบกับข้อมูลที่ทำไป ออกแบบให้การโต้ตอบเป็นไปตามระดับความชำนาญในการใช้งาน เตรียม เครื่องมือสร้างการทำงานแบบอัตโนมัติให้กับผู้ใช้ เนื่องจากผู้ใช้มีทักษะในการใช้ งานไม่เหมือนกันจึงควรปรับเปลี่ยนส่วนต่อประสารให้เหมาะกับความต้องการ เฉพาะตัวได้ บ่อยครั้งที่ผั้ใช้ต้องทำงานที่ซ้ำเดิม จึงควรมีกลไกแมคโคร (marco) ที่ ช่วยให้ผู้ใช้สะดวกในการทำงาน
6
ให้ผู้ใช้เป็นผู้ควบคุมการทำงาน
ซ่อนรายละเอียดด้านเทคนิคจากผู้ใช้ทั่วไป ไม่ควรให้ผู้ใช้ติดต่อกับระบบปฏิบัติการด้วย การพิมพ์คำสั่งโดยตรง แต่หากจำเป็นควรสร้างเป็น wizard ให้ผู้ใช้ติดต่อกับระบบปฏิบัติการ หรือการจัดการแฟ้มข้อมูล การออกแบบวัตถุที่วางไว้บนจอให้เข้าถึงโดยตรง เพื่อผู้ใช้จะรู้สึกว่าได้ควบคุมวัตถุที่ดูได้ เช่น การใช้เครื่องมือยืดขนาดในโปรแกรม photoshop ผู้ใช้จะสามารถเข้าใจได้ทันที
7
ลดภาระการต้องจดจำของผู้ใช้
ซอฟต์แวร์ที่ให้ผู้ใช้จดจำรายละเอียดการทำงานมากเกินไป เสี่ยงต่อการเกิดความผิดพลาดในการใช้งาน สูง จึงไม่ควรเพิ่มภาระให้ผู้ใช้งานต้องจดจำ ระบบควรสามารถจดจำข้อมูลที่ไม่เปลี่ยนแปลงบ่อย และ ช่วยเตือนความจำให้ผู้ใช้เมื่อต้องกลับมาใช้งานภายหลังได้ Mandel ออกแบบหลักการที่ช่วยลดภาระการจดจำของผู้ใช้ดังนี้
8
ลดภาระการต้องจดจำของผู้ใช้
ลดความต้องการใช้งานหน่วยความจำระยะสั้นของผู้ใช้ ขณะที่ใช้โปรแกรมอยู่ ส่วนต่อประสาน ควรจะออกแบบให้ลดความจำเป็นที่ต้องจดจำการกระทำและผลที่เพิ่งทำมา เพื่อให้ผู้ใช้สามารถ ตรวจสอบงานที่ทำได้โดยไม่ต้องเสียเวลานึกย้อนกลับไปด้วยตนเอง การกำหนดค่าโดยปริยายที่มีความหมาย ควรกำหนดค่าเริ่มต้นการใช้งานที่เหมาะสมกับผู้ใช้ทั่วไป และมีตัวเลือกอื่นเพื่อใช้ผู้ใช้สามารถปรับแต่งค่าได้ และสามารถเรียกคืนค่าเริ่มต้นกลับมาได้ด้วย
9
ลดภาระการต้องจดจำของผู้ใช้
นิยามปุ่มลัด (shortcut) ที่เข้าใจง่าย ตัวย่อควรผู้กับการกระทำในลักษณะที่ง่ายต่อ การจดจำ เช่น ปุ่ม Ctrl+S แทนคำสั่งการบันทึกข้อมูล โดยทั่วไปมักใช้อักษรตัวแรก ของชื่อเรียกคำสั่ง การจัดภาพของส่วนต่อประสานควรเป็นไปตามอุปลักษณ์ของโลกจริง เพื่อให้ ผู้ใช้เข้าใจลำดับการทำงานได้ง่าย โดยไม่ต้องจดจำขั้นตอนการโต้ตอบกับระบบ เปิดเผยข่าวสารในลักษณะค่อยๆ เพิ่มพูน ส่วนต่อประสานควรมีการจัดลำดับชั้น แสดงรายละเอียดการใช้งาน เช่นแสดงรายละเอียดพอสังเขปก่อน ส่วนรายละเอียด อื่นๆ ให้ผู้ใช้คลิกเลือกได้เองเมื่อต้องการ เช่น การขีดเส้นใต้ มีหลายรูปแบบจะไม่ถูก แสดงในเบื้องต้น เมื่อผู้ใช้เลือกเมนูขีดเส้นใต้ จึงค่อยแสดงรายละเอียด เช่น เส้นเดี่ยว เส้นคู่ เส้นประ เป็นต้น
10
สร้างส่วนต่อประสานอย่างคงเส้นคงวา (สอดคล้องกัน)
ส่วนประสานควรรับและแสดงผลในลักษณะคงเส้นคงวา หมายถึง ข่าวสารทางภาพจัดระเบียบตามมาตรฐานการออกแบบเดียวกัน ตลอดทุกหน้าจอของระบบ กลไกการท่องระบบจากงานหนึ่งสู่งานหนึ่งเป็นไปอย่างคงเส้นคงวา สอดคล้องกัน เชื่อมโยงกันเป็นลำดับขั้นตอน หลักการออกแบบที่ช่วยให้ส่วนต่อประสานคงเส้นคงวา มีดังนี้
11
สร้างส่วนต่อประสานอย่างคงเส้นคงวา (สอดคล้องกัน)
ช่วยให้ผู้ใช้ทราบว่างานปัจจุบันอยู่ภายใต้บริบทใด ระบบอาจมีหลายหน้าจอซึ่ง อาจทำให้ผู้ใช้สับสนว่าทำงานอยู่ในขั้นตอนใด จึงต้องมีส่วนที่บ่งบอก เช่น ชื่อหน้า ไอคอน สี ที่ช่วยให้ผู้ใช้ทราบว่าปัจจุบันคืออะไร มาจากส่วนงานไป และจะไปต่อได้ อย่างไรบ้าง ดำรงความคงเส้นคงวาตลอดทั้งตระกูลของแอพพลิเคชั่น นั่นคือ ส่วนประสาน ต้องเหมือนและสอดคล้องกันตลอดกลุ่มผลิตภัณฑ์เดียวกัน แม้ว่าวัตถุประสงค์ของ แต่ละโปรแกรมจะแตกต่างกันก็ตาม เช่น โปรแกรม word, excel, access ซึ่งผลิต ภัฑณ์ในกลุ่มผลิตภัณฑ์เดียวกัน จะมีส่วนต่อประสานที่คล้ายกัน
12
สร้างส่วนต่อประสานอย่างคงเส้นคงวา (สอดคล้องกัน)
3. ถ้ารูปแบบการโต้ตอบที่ผ่านมาทำให้ผู้ใช้เกิดความคาดหมาย อย่าเปลี่ยนกฎนั้น ยกเว้นมี เหตุผลสมควร นั่นคือ ไม่ควรเปลี่ยนลักษณะการโต้ตอบที่โปรแกรมส่วนใหญ่ใช้ เพราะผู้ใช้จะคุ้นเคย กับการโต้ตอบในลักษณะนั้น เช่น Ctrl+S เป็นการบันทึกข้อมูล ถ้าเราเปลี่ยน Ctrl+S เป็นการทำงาน อย่างอื่น ผู้ใช้จะสับสนได้
13
การวิเคราะห์และออกแบบส่วนประสานกับผู้ใช้
แบบจำลองการวิเคราะห์และออกแบบส่วนต่อประสาน มี 4 แบบจำลอง คือ User model — แบบจำลองผู้ใช้ (บอกลักษณะของผู้ใช้งานในระบบ ว่ามีผู้ใช้แบบใดบ้าง) Design model — แบบจำลองการออกแบบ (การออกแบบที่คำนึงถึงผู้ใช้งาน กำหนด ลักษณะการโต้ตอบในการใช้งานระบบ) Mental model (system perception) — แบบจำลองสภาพจิตของผู้ใช้ หรือการรับรู้ระบบ (ภาพลักษณ์ของระบบที่ผู้ใช้จินตนาการไว้ ขึ้นอยู่กับภูมิหลังของผู้ใช้) Implementation model — แบบจำลองอิมพลีเมนต์เทชั่น (“look and feel” หน้าตาของ ส่วนประสาน เข้ากับการสนับสนุนข้อมูล)
14
กระบวนการในการพัฒนาส่วนต่อประสาน
กระบวนการในการพัฒนาส่วนต่อประสาน เป็นกระบวนการวนซ้ำที่แทนได้เป็นแบบจำลองเกลียว 1. การวิเคราะห์และสร้างแบบจำลอง 2. การออกแบบส่วนต่อประสาน 3. การอิมพลีเมนต์ส่วนต่อประสาน 4. การประเมินส่วนต่อประสาน
15
การวิเคราะห์ส่วนต่อประสาน (Interface Analysis)
Interface analysis means understanding ในการวิเคราะห์ส่วนต่อประสาน ต้องเข้าใจปัญหาก่อน นั่นคือ the people -- เข้าใจคน บุคลากรที่ใช้งานระบบ the tasks -- เข้าใจงานที่ผู้ใช้ต้องการใช้เพื่อให้ทำงานให้สำเร็จ the content -- เข้าใจเนื้อหาที่จะต้องนำเสนอในส่วนต่อประสาน the environment -- เข้าใจสิ่งแวดล้อมที่งานเหล่านั้นทำงานอยู่
16
การวิเคราะห์ผู้ใช้งาน (User Analysis)
ผู้ใช้แต่ละคนมีภาพลักษณ์ของระบบภายในใจ การเข้าใจระบบก็จะขึ้นอยู่กับภาพลักษณ์ที่มี ในทางการ ออกแบบจึงควรเข้าใจผู้ใช้ว่าจะใช้ระบบอย่างไร ต้องการส่วนต่อประสานในลักษณะใด การสัมภาษณ์เป็นวิธีที่จะทำความเข้าใจความต้องการของผู้ใช้งาน ซึ่งจะช่วยให้นักออกแบบเข้าใจว่า ใครคือ ผู้ใช้งาน จะแบ่งกลุ่มผู้ใช้อย่างไร ผู้ใช้แต่ละกลุ่มมีทักษะและประสบการณ์ในระดับใด แบบจำลองสภาพจิตใจ ของผู้ใช้ที่มีต่อระบบเป็นอย่างไร และส่วนต่อประสานจะตอบสนองความต้องการของผู้ใช้ได้อย่างไร
17
การจำลองและวิเคราะห์งานย่อย
เทคนิคในการวิเคราะห์ออกแบบส่วนต่อประสาน 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
18
การวิเคราะห์การนำเสนอเนื้อหา
เนื้อหาที่นำเสนอ : รายงานที่เป็นตัวอักษร รูปภาพ หรือข้อมูลเฉพาะ เช่น เสียง หรือภาพเคลื่อนไหว ถูกสร้างโดยส่วนประกอบของระบบที่ไม่เกี่ยวข้องกับส่วนต่อประสาน ดึงมาจากข้อมูลที่เก็บในฐานข้อมูล ส่งมาจากระบบภายนอก การวิเคราะห์การนำเสนอเนื้อหา ทำให้ทราบถึงเอกสารที่ต้องการและการแสดงผลที่ต้องการ รูปแบบและ ความสวยงามของเนื้อหาจะถูกพิจารณา
19
การวิเคราะห์สิ่งแวดล้อมการทำงาน
นักออกแบบควรคำนึงถึงสภาพแวดล้อมที่ใช้งานของระบบ ข้อจำกัดทางกายภาพที่อาจเป็นอุปสรรคในการ ใช้งาน เช่น ในโรงงานเสียงอาจจะดัง การใช้ลำโพงอาจไม่เหมาะสม หรือการใช้เมาส์ คีย์บอร์ดในพื้นที่คับ แคบ อาจทำให้การทำงานลำบาก วัฒนธรรมในการทำงาน เช่น ข้อมูลต้องได้รับการรับรองจากหลายฝ่ายก่อนบันทึกหรือไม่ ผู้ใช้งานจะได้รับ ความช่วยเหลือจากระบบอย่างไร นักออกแบบต้องตอบคำถามเหล่านี้ก่อนการออกแบบเสร็จสิ้น และควร เพิ่มส่วนต่อประสานที่จะอำนวยความสะดวกด้วย
20
ขั้นตอนการออกแบบส่วนต่อประสาน
Define interface objects and actions (operations) – นิยามวัตถุและตัวดำเนินการ โดยใช้ข้อมูลจากการ วิเคราะห์ Define events (user actions) -- กำหนดเหตุการณ์ที่เป็นการกระทำของผู้ใช้ Depict each interface state -- แสดงด้วยรูปถึงสถานะของส่วนต่อประสานที่ผู้ใช้จะได้สัมผัส Indicate how the user interprets the state of the system – อธิบายให้ทราบความหมายของข้อมูลที่แสดง ระบุว่าผู้ใช้จะเข้าใจสถานะของระบบอย่างไร
21
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 -- ส่วนประกอบของแอพพลิเคชั่นอีคอมเมิร์ช
22
Design Issues ข้อควรคำนึงในการออกแบบ
Response time : เวลาในการตอบสนองของระบบ Help facilities : การช่วยเหลือแก่ผู้ใช้งาน Error handling : การจัดการความผิดพลาด Menu and command labeling : การกำหนดชื่อคำสั่งและเมนู Application accessibility : การเข้าถึงระบบงาน Internationalization : ความเป็นสากล
23
รูปแบบของ User Interfaces
เพื่อให้ผู้ใช้งานสามารถโต้ตอบกับระบบอย่างมีประสิทธิภาพ นิยมใช้แบบกราฟิก (Graphic User Interface :GUI) มีรูปแบบดังนี้ คือ การโต้ตอบด้วยคำสั่ง (Command Language Interaction) การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction) การโต้ตอบด้วยแบบฟอร์ม (Form Interaction) การโต้ตอบด้วยการทำงานเชิงวัตถุ (Object-Based Interaction) การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction)
24
การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction)
เป็นการโต้ตอบกับระบบด้วยการแสดงเมนูคำสั่ง โดยผู้ใช้ไม่ จำเป็นต้องป้อนคำสั่งเอง รูปแบบเมนูมีดังนี้ คือ Pull-down Menu Pop-up Menu
25
การโต้ตอบด้วยแบบฟอร์ม (Form Interaction)
เป็นการโต้ตอบที่ผู้ใช้ระบบจะต้องป้อนข้อมูลลงในช่องว่างที่อยู่ในแบบฟอร์มที่แสดงหน้า จอคอมพิวเตอร์ คล้ายการกรอกแบบฟอร์มลงในกระดาษ ชื่อของช่องป้อนข้อมูลต้องสื่อความหมาย แบ่งส่วนของข้อมูลบนฟอร์มให้เหมาะสม ควรแสดงข้อมูลเริ่มต้นให้กับช่องป้อนข้อมูลที่ต้องใช้ข้อมูลนั้นบ่อยครั้ง ช่องป้อนข้อมูลไม่ควรยาวมากจนเกินไป
26
การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction)
เป็นการโต้ตอบกับระบบด้วยการใช้เสียงพูดของผู้ใช้ระบบ ใช้เสียงพูดทั้งการนำข้อมูลเข้าและออกจากระบบ
27
การออกแบบลำดับการเชื่อมโยงจอภาพ
เป็นการออกแบบลำดับของการแสดงส่วนติดต่อกับผู้ใช้ของโปรแกรม หรือลำดับของการแสดงส่วน User Interface ทางหน้าจอคอมพิวเตอร์ แผนภาพแสดงลำดับการเชื่อมโยงจอภาพ (Dialogues Diagram) ประกอบไปด้วย 3 ส่วน คือ ส่วนบน: เลขลำดับหน้าจอ ส่วนกลาง: ชื่อหน้าจอการทำงาน ส่วนล่าง: เลขลำดับหน้าจอที่อ้างอิงมา ต่อไป หรือ ย้อนกลับ
28
การประเมินการออกแบบ หลังจากสร้างต้นแบบแล้ว จะต้องมีการประเมินว่าเป็นไปตามความต้องการของผู้ใช้หรือไม่ โดยทีมงาน ต้องเก็บข้อมูลความคิดเห็นของผู้ใช้ เพื่อนำไปปรับปรุงต้นแบบให้สมบูรณ์ที่สุด
29
การประเมินการออกแบบ วงจรการประเมินส่วนต่อประสาน สร้างแบบจำลองการออกแบบ
สร้างต้นแบบส่วนต่อประสาน ผู้ใช้ประเมินส่วนต่อประสาน ปรับปรุงการออกแบบตามความคิดเห็นของ ผู้ใช้งาน ออกแบบส่วนที่ต้องทำการเปลี่ยนแปลง ต้นแบบตัวต่อไปจะถูกสร้างขึ้น
30
งานกลุ่ม ให้นักศึกษา สร้างส่วนติดต่อผู้ใช้งาน GUI โดยใช้ เครื่องมือที่ได้ศึกษามา
งานนำเสนอที่คล้ายกัน
