งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

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

งานนำเสนอที่คล้ายกัน


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

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

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

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

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

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

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

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

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

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

10 Make the interface consistent Interface Design 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 Interaction) การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction)

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 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 : ……………………… File Name : …………………… From :………………Link to frame :……….. Sound : ………………………………… Picture : ………………………………… Video : ………………………………… narrations : ………………………………… ………………………………………………. Other : …………………………….…… Animation : ……………………………

31 Storyboard PART NUMBER ANALYSIS TOOL Main (Version / Release Date) (Logo / Branding) Part Number Quick Check Analyze Part Numbers View / Print Report Save Report Exit Help Part Number Quick Check AnalyzeClose Part Number Result Part Number*** 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 OK Cancel HTML Microsoft Excel MS-DOS Text Rich Text format Snapshot format MS ACCESS dialog carries out File Save Process PREVIEW REPORT ON SCREEN. Status Data analysis finished. Report has been created. OK MULTIPLE PART NUMBER VALIDATION SINGLE PART NUMBER VALIDATION SAVE VALIDATION DATA

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

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

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

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

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

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

38

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

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

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


ดาวน์โหลด ppt การออกแบบส่วนต่อประสาน การออกแบบส่วนต่อประสาน (Interface Design ) (Interface Design )

งานนำเสนอที่คล้ายกัน


Ads by Google