การออกแบบส่วนต่อประสาน

งานนำเสนอเรื่อง: "การออกแบบส่วนต่อประสาน"— ใบสำเนางานนำเสนอ:

1 การออกแบบส่วนต่อประสาน
(Interface Design )

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

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

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

5 Interface Design Place the user in control
ควรปล่อยให้ผู้ใช้มีอิสระในการเลือกใช้งาน หรือโต้ตอบกับระบบ และสามารถควบคุมการ ใช้งานบางส่วนได้ ดังนี้ 1. กำหนดโหมดการโต้ตอบในลักษณะที่ไม่บังคับผู้ใช้โดยไม่จำเป็น หรือในทางที่ผู้ใช้ไม่ต้องการที่จะทำ

6 Interface Design Place the user in control
2. จัดให้มีการโต้ตอบที่ยืดหยุ่น สามารถโต้ตอบกับระบบได้มากกว่า 1 ทาง จึงควรมีตัวเลือกให้ใช้โปรแกรมผ่าน คีย์บอร์ด เมาส์ ปากกา หรือเสียง เพื่อสั่งงานระบบได้ 3. อนุญาตให้ผู้ใช้ทำการหยุดหรือสามารถยกเลิกได้ เช่น ผู้ใช้ควรจะสามารถสลับการทำงานไปยังโปรแกรมอื่น โดยไม่ส่งผลกระทบกับข้อมูลที่ทำไป

7 Interface Design Place the user in control
4. ออกแบบให้การโต้ตอบเป็นไปตามระดับความ ชำนาญในการใช้งาน 5. ซ่อนรายละเอียดด้านเทคนิคจากผู้ใช้ทั่วไป ไม่ควรให้ผู้ใช้ติดต่อกับระบบปฏิบัติการด้วยการ พิมพ์คำสั่งโดยตรง 6. การออกแบบวัตถุที่วางไว้บนจอให้เข้าถึงโดยตรง

8 Interface Design Reduce the user’s memory load
ซอฟต์แวร์ไม่ควรเพิ่มภาระให้ผู้ใช้งานต้องจดจำ ระบบควรสามารถจดจำข้อมูลที่ไม่เปลี่ยนแปลงบ่อย และช่วยเตือนความจำให้ผู้ใช้เมื่อต้องกลับมาใช้งานภายหลังได้

9 Interface Design Reduce the user’s memory load
1. ลดความต้องการใช้งานหน่วยความจำระยะสั้นของผู้ใช้ ขณะที่ใช้โปรแกรมอยู่ 2. การกำหนดค่าโดยปริยายที่มีความหมาย 3. นิยามปุ่มลัด (shortcut) ที่เข้าใจง่าย 4. การจัดภาพของส่วนต่อประสานควรเป็นไปตามความเป็นจริง เพื่อให้ผู้ใช้เข้าใจลำดับการทำงานได้ง่าย 5. เปิดเผยข่าวสารในลักษณะค่อยๆ เพิ่มพูน

10 Interface Design Make the interface consistent
1. ช่วยให้ผู้ใช้ทราบว่างานปัจจุบันอยู่ภายใต้บริบทใด 2. ดำรงความคงเส้นคงวาตลอดทั้งผลิตภัณฑ์ 3. ถ้ารูปแบบการโต้ตอบที่ผ่านมาทำให้ผู้ใช้เกิดความคาดหมาย อย่าเปลี่ยนกฎนั้น ยกเว้นมีเหตุผลสมควร 4. ควรจัดระเบียบตามมาตรฐานการออกแบบเดียวกันตลอดทุกหน้าจอของระบบ

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

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

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

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

15 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 -- ส่วนประกอบของแอพพลิเคชั่นอีคอมเมิร์ช

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

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

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

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

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

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

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

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

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

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

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

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

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

29 ตัวอย่าง Storyboard ภาพหรือข้อความ Frame No. ประเภทภาพ ภาพนิ่ง
ภาพเคลื่อนไหว ภาพกราฟิก ภาพ ลักษณะการนำเสนอ ภาพหรือข้อความ ข้อความ เสียง

30 Title : ……………………… From :………………Link to frame :……….. File Name : …………………… Other : …………………………….…… Picture : ………………………………… narrations : ………………………………… ………………………………………………. Sound : ………………………………… Video : ………………………………… Animation : ……………………………

31 Storyboard MULTIPLE PART NUMBER VALIDATION SINGLE PART NUMBER
PART NUMBER ANALYSIS TOOL Main (Version / Release Date) (Logo / Branding) Part Number Quick Check Analyze Part Numbers View / Print Report Save Report Exit Help Analyze Close Part Number Result *** belongs to category X (GOOD/NEW/BAD) Comments: (Place Remarks here) OK Status Please wait… Data analysis currently in progress. Updated when analysis is finished. Output To Select format Cancel HTML Microsoft Excel MS-DOS Text Rich Text format Snapshot format MS ACCESS dialog carries out File Save Process PREVIEW REPORT ON SCREEN. Data analysis finished. Report has been created. MULTIPLE PART NUMBER VALIDATION SINGLE PART NUMBER VALIDATION SAVE VALIDATION DATA

32 การออกแบบหน้าจอภาพ (Screen Design)
การออกแบบหน้าจอภาพ หมายถึง การจัดพื้นที่ของ จอภาพเพื่อใช้ในการนำเสนอเนื้อหา ภาพ และส่วน ประกอบอื่นๆ สิ่งที่ต้องพิจารณามีดังนี้ 1. การกำหนดความละเอียดภาพ (Resolution) เช่น VGA 640 x 480 dpi SVGA 800 x 600 dpi หรือขนาดอื่นๆ 2. การจัดพื้นที่แต่ละหน้าจอภาพในการนำเสนอ เช่น พื้นที่การนำเสนอข้อความ และภาพ พื้นที่การให้ข้อมูลย้อนกลับและอื่นๆ

33 การออกแบบหน้าจอภาพ (Screen Design)
3. การเลือกรูปแบบและขนาดของตัวอักษรทั้งภาษา ไทยและภาษาอังกฤษ 4. การกำหนดสี ได้แก่ สีของตัวอักษร (Font Color) สีของฉากหลัง (Background) สีของส่วนอื่นๆ 5. การกำหนดส่วนอื่นๆ ที่เป็นสิ่งอำนวยความ สะดวกในการใช้บทเรียน เช่น ปุ่ม Help

34 การออกแบบหน้าจอภาพ (Template)
Topic Frame No Header Area Image and Dialogue Area Control Area Feedback Area Help About Exit Next Previous

35 Template Format 1 Topic Frame No ข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความ Help About Exit Next Previous

36 Template Format 2 ข้อความข้อความข้อความข้อความข้อความข้อความข้อความ
Topic Frame No ข้อความข้อความข้อความข้อความข้อความข้อความข้อความ Help About Exit Next Previous

37 ข้อความข้อความข้อความข้อความข้อความข้อความข้อความ

38 ข้อความข้อความข้อความข้อความข้อความข้อความข้อความ

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

40 การประเมิน การออกแบบ

41 Questions ? ก่อนทำ Interface analysis ต้องเข้าใจอะไรบ้าง ……
2. การที่จะทราบว่า ผู้ใช้ต้องการส่วนต่อประสานในลักษณะใด ผู้พัฒนาจะต้องทำอย่างไร 3. ข้อควรคำนึงในการออกแบบ มีอะไรบ้าง ……. Storyboard คืออะไร ? 5. Interface Design มีความสำคัญอย่างไร……