แผนบรหารการสอนประจำาบทท 9เนอหาประจำาบท

1. บญญตในการออกแบบสวนตอประสาน2. แบบจำาลองการวเคราะหและออกแบบสวนตอประสาน3. กระบวนการในการพฒนาสวนตอประสาน4. ลกษณะการออกแบบสวนตดตอผใชงานทด5. กระบวนการการออกแบบสวนตดตอผใชงาน6. สงทตองคำานงถงเมอทำาการออกแบบสวนตดตอผใชงาน7. ขอควรคำานงถงอนๆ ในการออกแบบสวนตอประสาน8. ตวอยางการออกแบบสวนตดตอผใชงาน

วตถประสงคเชงพฤตกรรม

1. นกศกษาสามารถอธบาย บญญตในการออกแบบสวนตอประสาน แ บ บ จ ำา ล อ ง ก า ร ว เ ค ร า ะ ห

และออกแบบสวนตอประสาน กระบวนการในการพฒนาสวนตอประสานลกษณะการออกแบบสวนตดตอผใชงานทด กระบวนการการออกแบบสวนตดตอผใชงาน สงทตองคำานงถงเมอทำาการออกแบบสวนตดตอผใชงาน ขอควรคำาน งถงอนๆ ในการออกแบบสวนตอประสาน ตวอยางการออกแบบสวนตดตอผใชงาน

2. นกศกษาสามารถออกแบบสวนตดตอผใชงานได

วธการสอนและกจกรรมการเรยนการสอนประจำาบท

1. วธการสอน1.1 วธการสอนแบบบรรยาย เรมจากอธบาย บญญตใน

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

แบบจำาลองการวเคราะหและออกแบบสวนตอประสาน กระบวนการในการพฒนาสวนตอประสานลกษณะการออกแบบสวนตดตอผใชงานทด กระบวนการการออกแบบสวนตดตอผใชงาน สงทตองคำานงถงเมอทำาการออกแบบสวนตดตอผใชงาน ขอควรคำานงถงอนๆ ในการออกแบบสวนตอประสาน และตวอยางการออกแบบสวนตดตอผใชงาน

1.2 มการตงคำาถาม ตอบคำาถามในชนเรยนระหวางผสอนและผเรยน

1.3 มการอภปราย สรปประเดนทสำาคญของเนอหาในบทเรยนท 9

2. กจกรรมการเรยนการสอน2.1 แสดงตวอยางตวอยางการออกแบบสวนตดตอผใชงาน2.2 แบงกลมอภปรายเรองสงทตองคำานงถงเมอทำาการ

ออกแบบสวนตดตอผใชงาน2.3 ทำาแบบฝกหดทายบทเรยนท 9

สอการเรยนการสอน1. เครองคอมพวเตอร2. โ ป ร แ ก ร ม น ำา เ ส น อ ผ ล ง า น แ ล ะ เ ว บ ไ ซ ต

amaritasite.wordpress.com/blog3. เอกสารประกอบการสอนรายวชาวศวกรรมซอฟตแวร

การวดและการประเมนผล1. สงเกตการตอบคำาถาม การรบรเขาใจทตรงกน 2. สงเกตการคดวเคราะห สรปความเปนไปตามแตละบทเรยน

สอดคลองกบเนอหา3. วดเจตคตจากการสงเกตพฤตกรรมความกระตอรอรนในการทำา

กจกรรมและคณภาพของงาน

บทท 9

การออกแบบสวนประสานผใชงานถาเราเทยบเคยงการออกแบบสถาปตยกรรมกบพมพเขยวของแบบ

บาน ตวแบบจะไมสมบรณถาขาดสวนทแสดงแทนประต หนาตาง การเดนท อน ำา ไฟ โทรศพท และสาธารณปโภค ส งเหลาน ส ำาหรบโปรแกรมคอมพวเตอรกคอ การออกแบบสวนตอประสานกบระบบ เปนสวนทมการออกแบบระบบยอยในการทำางานของซอฟตแวร เปนตวกลางทำาหนาทใหซอฟตแวรทำางานได การออกแบบสวนประสานมอย 3 เรอง คอ

1. การออกแบบสวนตอประสานระหวางองคประกอบยอยภายในซอฟตแวร

2. การออกแบบสวนตอประสานระหวางซอฟตแวรและองคประกอบอนๆ ทไมใชมนษยทเปน

สวนผลต3. การออกแบบสวนตอประสานระหวางมนษยกบคอมพวเตอร

บญญตในการออกแบบสวนตอประสานในหนงสอของ Theo Mandel ไดบญญตกฎ 3 ขอในการออกแบบสวนตอประสาน ดงน

1. ใหผใชเปนผควบคมการทำางานลกษณะการกำาหนดโหมดการโตตอบในลกษณะทไมบงคบผใช

โดยไมจำาเปนหรอในทางทดผใชไมตองการทจะทำาโหมดการโตตอบคอสถานะปจจบนของสวนตอประสาน ตวอยางเชน เมอผใชตองการตรวจสอบการสะกดคำา ถาผใชเลอกเมนตรวจสอบการสะกดคำา ซอฟตแวรจะไปอยในโหมดการตรวจสอบการสะกดคำา ซงจะทำาใหไมสามารถใชงานอนๆ ตอไปไดจนกวาการสะกดคำาจะเสรจสน แตถาผใชตองการพมพงานตอไปพรอมๆ กน ซอฟตแวรกควรจะใหผใชและออกจากโหมดไดโดยงาย

2. ลดภาระการตองจดจำาของผใชลดความตองการใชหนวยความจำาระยะสนของผใชเมอผใช

กำาลงทำางานทซบซอน ความตองการใชหนวยความจ ำาระยะส นอาจมมาก สวนตอประสานควรจะออกแบบใหลดความจำาเปนทตองจดจำาการกระทำาและผลทเพงมา โดยแสดงใหรองรอยของการกระทำาทผานมาโดยไมตองมารอฟ นความจำา

3. สรางสวนตอประสานอยางคงเสนคงวา

ชวยใหผใชทราบวางานปจจบนอยภายใตบรบทใด ก า รโตตอบกบระบบผานลำาดบชน

อนซบซอนหลายหนาจอ ทำาใหผใชงานสบสนได จงจำาเปนตองมตวบงช เชน ชอหนาทไอคอน ส ทชวยใหผใชงานทราบวา บรบทของงานปจจบนคออะไร มาจากสวนงานใด และจะไปตอไดอยางไรบาง

แบบจำาลองการวเคราะหและออกแบบสวนตอประสาน1. แบบจำาลองผใช กำาหนดขอมลทแสดงลกษณะเฉพาะของผใชงานระบบ การออกแบบ

ควรเร มจากการทำาความเขาใจผใชงานดานตางๆ รวมถงอาย เพศ ความสามารถทางรางกาย การศกษา วฒนธรรมเชอชาต แรงจงใจ เปาหมาย และบคลกภาพ นอกจากน อาจแบงผใชงานออกเปน

ผเรมใชงาน ไมมความรในการใชงานระบบมากอน และมความรเกยวก บ ต ว ร ะ บ บ เ พ ย ง เ ล ก น อ ย

ผ ใชงานปานกลางมความร พอควรเก ยวก บระบบ แต ยงใชงานไม คลองแคลว จำาเปนตองไดรบความชวยเหลอจากสวนตอประสาน

ผใชงานบอย มความรดมากในการใชงาน อนนำาไปสอาการผใชระดบส ง ค อ บ ค ค ล ท ม อ ง ห า ท า ง

ลดและการกระทำาแบบยอในการประสานกบระบบ

2. แบบจ ำาลองการออกแบบ ของท ง ร ะบบ รวมเอาข อม ลส ถ า ป ต ย ก ร ร ม ส ว น ต อ ป ร ะ ส า น แ ล ะ

ตวแทนกระบวนการของซอฟตแวรเขาดวยกน ขอกำาหนดความตองการอาจมเงอนไขทชวยกำาหนดผใชงานระบบ แตสวนตอประสานมกเกยวของโดยตรงกบแบบจำาลองการออกแบบ

3. แบบจำาลองการอมพลเมนต รวมเอาการจดระบบคอมพวเตอร เ ช น ห น า ต า ข อ ง ส ว น ต อ

ประสาน เขากบการสนบสนนของขอมล เชนหนงสอคมอไฟลชวยงานทอธบายความหมายและไวยากรณของระบบ เมอแบบจำาลองการอมพลเมนตกบแบบจำาลองสภาพจตของผใชประสานเขากนไดด ผใชงานจะรสกสบายกบการใชงาน และใชไดอยางมประสทธภาพ เพอใหบรรลการเชอมตอน แบบจำาลองการออกแบบถกตองพฒนาใหรองรบขอมลทบรรจในแบบจำาลองสภาพจตผใช และแบบจำาลองการอมพลเมนตตองแมนตรง ในการสะทอนภาพไวยากรณและความหมาย

กระบวนการในการพฒนาสวนตอประสานเมอไดกำาหนดความตองการโดยทวไปแลว การวเคราะหรายละเอยดง า น ย อ ย เ ร ม ข น น น ค อ

งานยอยตางๆ ทผใชตองทำาเพอบรรลเปาหมายของระบบ การวเคราะหสงแวดลอมจะมงเนนทสงแวดลอมการทำางานจรง คำาถามตางๆ ทควรตอบคอ สวนตอประสานจะตงอยทใดในโลกจรงผใชจะนง ยน หรอ ทำางานอนทไมเกยวกบสวนตอประสานหรอไมมเงอนไขเนอท แสง และเสยง อะไรบาง ทรองรบฮารดแวรของสวนตอประสานมปจจยแวดลอมอะไรบาง ทมผลกระทบตอการทำางานของมนษยขอมลเหลานจะถกรวบรวมเพอสรางแบบจำาลองการวเคราะห สำาหรบสวนตอประสานอนเปนพนฐานของกจกรรมออกแบบตอไป เปาหมายของการออกแบบสวนตอประสาน คอ กำาหนดชดของวตถตอประสานและการกระทำาของวตถรวมถงการแสดงบนหนาจอ ทชวยผใชใหทำางานไดสะดวก

ลกษณะการออกแบบสวนตดตอผใชงานทด

ทมงานผทพฒนาระบบควรจะตองคำานงถงการใชงานของผใชเปนสำาคญ โดยสามารถยดหลกการดงตอไปน

1. ไมบบคนใหผใชงานโตตอบกบระบบโดยไมมความจำาเปน การแกไขพ ฤ ต ก ร ร ม ก า ร ใ ช ง า น ใ น

ระบบนนบางครงกไมจำาเปนจะตองบงคบใหผใชงานทำาการยนยนทกครงไป ใหผใชงานโตตอบกบระบบในสวนทสำาคญจรง เชน ตองการลบ ตองการบนทก

2. ออกแบบใหผใชงานสามารถโตตอบกบระบบไดมากกวา 1 ชองท า ง ม ก า ร ก ำา ห น ด ช อ ง ท า ง

การใชงานทางคยบอรด เมาส หรออปกรณเชอมตออนๆทเหนวาจ ำาเปน ตองคำานงถงการใชงานทเหมาะสมดวย

3. สามารถยกเลกการทำางานและสลบการทำางานได โดยระบบจะมส ว น ข อ ง ก า ร ก ค น ข อ ม ล

กอนหนาใหโดยอตโมมตเมอผใชงานทำาการยกเลกการทำางาน4. จดเตรยมเครองมอการสรางการทำางานพนฐานโดยอตโนมต

การทำางานมาตรฐานของระบบบางครง เปนการสรางหรอเตรยมขอมลพนฐานเอาใวสำาหรบอำานวยความสะดวกใหกบผใชอกทางหนงดวย

5. ไมควรทจะใหระบบสงงานดวยการพมพค ำาส ง (Command Line) ค ว ร จ ะ ส ร า ง เ ค ร อ ง ม อ

อตโนมตเพอทจะทำาการเชอมตอกบระบบปฏบตการโดยไมใชการพมพคำาสง

6. การทำางานตองกระทำาตอวตถโดยตรง เชนผใชงานสามารถทจะแ ท ร ก ไ ฟ ล ภ า พ ย อ ข ย า ย

ขนาดของไฟลภาพนนไดโดยตรง

กระบวนการการออกแบบสวนตดตอผใชงาน

1.วเคราะห2.สรางตนแบบ

3.ประเมน

4.เอกสารตนแบบ

5.สรางตนแบบใชงาน6.ตนแบบใช

งาน7.สนสดการ

สราง

กจกรรมทเกดขนนนมลกษณะการทำางานวนซำา เพอเปนการทบทวนรปแบบทงผพฒนาและลกคาใหเขาใจทตรงกน หากฝายหนงฝายใดพบขอบกพรองจงทำาการแกไขปรบปรงอยางเรงดวน เพอการสงมอบใหทนตอเวลาทกำาหนด โดยจะแสดงกระบวนการดงภาพท 9.1 ดงน

ภาพท 9.1 กระบวนการการออกแบบสวนตดตอผใชงาน

จากภาพขางตนแสดงกระบวนการการออกแบบสวนตดตอผใชงานโดยเร มจาก ทมงานวเคราะหความตองการของระบบ จะท ำาการสรางตนแบบ สงใหลกคาและทมงานชวยกนประเมน เมอทงสองฝายเหนตรงกน จงเร มทำาเอกสารตนแบบ ระหวางกระบวนการนอาจจะใหลกคาประเมนเปนระยะ จากนนทำาการสรางตนแบบใชงานโดยทสามารถใชงานระบบนไดจรง เมอใชงานระยะหนงจงทำาตนแบบทใชงานไดจรงถอเปนการสนสดการออกแบบสวนตดตอผใชงาน

สงทตองคำานงถงเมอทำาการออกแบบสวนตดตอผใชงาน1. การกำาหนดคาเรมตนใหกบระบบ เชน การกำาหนดวนท เวลาในการ

ป ร บ ป ร ง ข อ ม ล โ ด ย ผ ใ ช ไมจำาเปนจะตองคยขอมล เพอลดความผดพลาดอกทางหนงดวย

2. รปแบบในการนำาเสนอในระบบ ตองมความสมพนธกน เชน การใชง า น ร ะ บ บ จ า ก ซ า ย ไ ป

ขวา จากบนลงลาง และในรปแบบซอฟตแวรเวบแอบพลเคชนแลวยงตองแบงสวนของหนาจอใหสวยงามสอดคลองกน

3. การกำาหนดส สตวอกษร สพนหลง และองคประกอบอนๆ เปนสงท จ ะ เ ป น จ ะ ต อ ง พ จ า ร ณ า

เร องของโทนสใหเขากนได ไมใชสท ตดกนอยางฉดฉาด ท ำาใหผใชงานรำาคาญสายตาไดเมอใชระบบเปนเวลานาน

4. การวางวตถ คอมโพเนน เพอการใชงานทเปนสากล ควรทจะศ ก ษ า ถ ง ว ธ ก า ร ว า ง ต ำา แ ห น ง

ของสงตางๆเชน ปมตกลง ยกเลก หรอการใชเมนบาร การใชคยลดตางๆ5. การซอนและแสดงรายละเอยดอยางเหมาะสม รวมถงการใชงาน ป

อ บ อ พ เ พ อ ก า ร เ ต อ นเมอผใชงานกำาลงทำาในสงทไมสอดคลองกน หรอขอควรระวงตางๆ

6. การใหขอมลขาวสารทจำาเปนกบผใชงานเมอจำาเปน สงทสำาคญคอใ ห ผ ใ ช ง า น ไ ด ท ร า บ ว า

ตำาแหนงการใชงานปจจบนนนอยในสถานะใด การใหความชวยเหลอ (Help) ในระบบเพอเปนแนวทางในการแกไขการทำางานเบองตน ตวอยาง รปแบบของการออกแบบสวนตดตอผใชงาน

ขอควรคำานงถงอนๆ ในการออกแบบสวนตอประสานเมอการออกแบบสวนตอประสานกาวหนาไปเร อยๆหากตองการทจะวดประสทธภาพการ

ทำางานของซอฟตแวรนน จะปรากฏขอควรคำานงถงตางๆ คอ 1. เวลาตอบสนองของระบบ (System Response Time)2. สงอำานวยความชวยเหลอแกผใช (User Help Facilities)3. การจดการความผดพลาด (Error Information Handling)4. ก า ร ก ำา ห น ด ช อ ค ำา ส ง แ ล ะ เ ม น (Command and Menu

Labeling)

ตวอยางการออกแบบสวนตดตอผใชงาน

ระบบการแจงซอมอากาศยาน กองบน 6 ฝง 604 วตถประสงคของโปรแกรมสำาหรบตดตามดแลการแจงซอมของหนวยงานรวมถงการตดตามการอนมตการซอมอากาศยาน แสดงตวอยางดงน

1. สวนของหนาหลกการแจงซอมอากาศยาน เปนสวนของหนาการท ำา ง า น ห ล ก ข อ ง โ ป ร แ ก ร ม ก า ร

แจงซอมอากาศยาน ผแจงซอมสามารถกรอกรายละเอยดขอมลการแจงซอม เชน วนทแจงซอม คำานำาหนาชอ ชอ นามสกล ตำาแหนง หนวยงาน เบอรโทร ประเภทและหมายเลขอากาศยาน อาการเบองตน โดยผแจงซอมสามารถบนทกและลางขอมลได

ภาพท 9.2 แสดงสวนของหนาหลกการแจงซอมอากาศยาน

2. สวนของหนาดรายการซอมอากาศยาน สามารถแบงออกไดเปน 2 กรณ ไดแก

กรณท1 ผใชงานเปนผแจงซอมจะสามารถตรวจสอบขอมลไดแคหนารายการซอม โดยสามารถคนหาขอมลไดจากชอผแจงซอม

กรณท2 ผใชงานเปนผดแลระบบจะสามารถทำาการตรวจสอบไดทกหนาการใชงานของโปรแกรม

ภาพ ท 9.3 แสดงสวนของหนาดรายการซอมอากาศยาน

3. สวนของหนาผดแลระบบเขาใชงานระบบ ทำางาน สวนของการเขาสร ะ บ บ เ ม อ ก ด ป ม เ ข า ส ร ะ บ บ

ระบบจะทำาการตรวจสอบกบฐานขอมลในระบบ หากตรงกนกบฐานขอมล ผใชงานจงจะสามารถเขาใชงานระบบได

ภาพท 9.4 แสดงสวนของหนาผดแลระบบเขาใชงานระบบ

4. สวนของหนาดประวตการซอมอากาศยาน สวนของหนาดประวตการซ อ ม อ า ก า ศ ย า น เ ม อ ผ ด แ ล

ระบบไดทำาการเขาสระบบ ผดแลระบบจะสามารถเขามาดประวตการซอมอากาศยานยอนหลงได หากผดแลระบบตองการทราบรายละเอยดของอากาศยานใหกรอกขอมลประเภทการคนหา เลอกปมคนหา

สวนของหนาดประวตการซอมอากาศยาน

ภาพท 9.5 แสดงสวนของหนาดประวตการซอมอากาศยาน

5. สวนของหนาผดแลระบบทจะตองดำาเนนการอนมตเอกสาร ผดแลร ะ บ บ จ ะ ต อ ง เ ป น ผ ด ำา เ น น ก า ร

อนมตการซอมอากาศยาน กรณไมอนมตการซอมอากาศยานผดแลระบบจะตองแจงไปยงผแจงซอมเพอใหผแจงซอมทราบถงเหตผลทไมอนมตการซอม

ภาพท 9.6 แสดงสวนของหนาผดแลระบบทจะตองดำาเนนการอนมตเอกสาร

บทสรป

การออกแบบสวนตดตอผใชงาน เปนขนตอนททาทายนกวศวกรซอฟตแวรอยางมากในการออกแบบเพอใหผใช สามารถใชงานไดและมประสทธภาพ สงทสำาคญของการออกแบบนนจำาเปนตองคำานงถงการใชงานควบคมการท ำางาน ลดภาระของผ ใช การสรางสวนต อประสานในกระบวนการออกแบบจำาเปนตองมการสรางตนแบบ เพอใหทงฝายของผใชงานและผพฒนาซอฟตแวรมความเขาใจทตรงกน จากนน การประเมนในสวนทตองทำาการปรบปรงตนแบบใหมอกครง หากมสงทตองเปลยนแปลง อยางไรกตามการใหความสำาคญตอความพงพอใจของลกคาเปนสงทสำาคญทสดของกระบวนการพฒนาซอฟตแวร

คำาถามทายบท

1. จงอธบายความสำาคญของการออกแบบสวนตดตอผใชงานโดยใชปอนขอมลได

หลายทางเลอก2. จงอธบายวธการสรางสวนตดตอผใชงาน3. จงอธบายเครองมอทสามารถสรางสวนตดตอผใชงานได4. จงยกตวอยางทแสดงใหเหนปญหาของเวลาตอบสนองทไมคง

เสนคงวา5. จงอธบายสงทสำาคญ โดยสมมตวาคณไดรบมอบหมายใหพฒนา

ระบบธนาคารผานเวบ 6. จงพฒนารปแบบจำาลองผใชงาน แบบจำาลองการออกแบบ แบบ

จ ำา ล อ ง ส ภ า พ จ ต ใ จ ผ ใ ช ง า น และแบบจำาลองอมพลเมนตเทชน

7. ใหน กศกษาพฒนาแบบสอบถามทมค ำาถาม 20 ขอ ทอาจใช ป ร ะ เ ม น ส ว น ต อ ป ร ะ ส า น ท ว ไ ป

ลองใชงานกบผตอบแบบสอบถาม 10 คน และสรปผลทำารายงาน8. ใหนกศกษาคนควา การออกแบบสวนตอประสานทเปนทยอมรบ

พรอมทงอธบายพอสงเขป9. จงอธบายความสำาคญของการใชสของตวอกษร และพนหลงทม

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

10. จงอธบายสงทสำาคญในการออกแบบสวนตอประสานสำาหรบการใชงานขอมลทนำาเขาดวย

อปกรณเฉพาะดาน เชน ระบบขายสนคาหนารานทใชระบบบารโคด

บรรณานกรม

กตต ภกดวฒนะกล และ พนดา พานชกล. (2550). วศวกรรมซอฟตแวร (พมพครงท 1).

กรงเทพฯ: บ.ซเอดยเคชน จำากด (มหาชน)น ำา ฝ น อ ศ ว เ ม ฆ น . (2558). ห ล ก พ น ฐ า น ข อ ง ว ศ ก ว ร ร มซอฟตแวร. (พมพครงท 2).

กรงเทพฯ: บ.ซเอดยเคชน จำากด (มหาชน)วทยา สคตบวร. (2008). วศวกรรมซอฟตแวร เบองตน (พมพครงท 1). กรงเทพฯ:

บ.ซเอดยเคชน จำากด (มหาชน)สมชาย ก ตต ช ยก ลก จ . (2548). เร องซอฟต แวรม แค น .

กรงเทพฯ:สมาคมสงเสรมเทคโนโลยไทย (ไทย-ญปน).Roger S. Pressman. (2005). Software

Engineering. (6th ed.). Mc-Graw-Hill. Software Park. (2006). มาตรฐานกระบวนการในการพฒนา

ง า น (CMMI). ค น ว น ท 11 ม ก ร า ค ม 2559, จ าก http://www.swpark.or.th/cmmiproject/index.php/general/73-what-cmmi.

Nabil Mohammed Ali Munassar, "A Comparison Between Five Models Of Software Engineering",Publication in IJCSI International Journal of Computer Science, ISSN(Online):1694-0814,Issues,Vol.7,Issue5,September2010.

Puttasak Tantisuttivet, "Agile and Scrum", คนวนท 19 มกราคม 2559, จาก https://brandinside.asia/agile-and-scrum-for-new-business/

Schwaber, K. (2004). Agile Project Management with Scrum. Seattle: Microsoft Press.

ครรชต มาลยวงศ,"การบรหารโครงการซอฟตแวรและ CMM", สำานกงานพฒนาวทยาศาสตรและเทคโนลยแหงชาต, วนท 11 กมภาพนธ 2543. ค น ว น ท 20 ม ก ร า ค ม 2559, จ า ก http://www.drkanchit.com/presentations/cmm.pdf

Ian Sommerville, (2010)."Software Engineering (9th Edition)", Addison-Wesley Publishing Company. คเชนทร ซอนกลน,"ระบบสารสนเทศแบบกระจาย Distributed Information System" ค น ว น ท 22 ม ก ร า ค ม 2559, จ า ก http://www.dailymail.co.uk/sciencetech/article-2219188/Inside-Google-pictures-gives-look-8-vast-data-centres.html

Borland. “CaliberRM Enterprise Software Requirements Management

System”.(2012) , ค น ว น ท 26 ม ก ร า ค ม 2559, จ า ก http://www.Borland.com/us/products/Caliber/index.html