บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · web...

28
บบบบบ 7 บบบบบบบบบบบบบบบบบบบบบบบบบ บบบ o บบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบ o บบบบบบบบบบบบบบบบบบบบบบบบบบ o บบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบ กกกกกกกกกกกกกกกกกกกกกกกกกกกก (User Interface) กกกกกกกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกก กกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกกกกก

Upload: others

Post on 14-Feb-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

บทท 7การออกแบบสวนประสานกบผใช

o สวนประสานกบผใชและกฎเหลกในการออกแบบ

o ชนดของสวนประสานกบผใชo กระบวนการออกแบบสวนประสานกบผใช

การออกแบบสวนประสานกบผใช (User Interface) เปนกระบวนการสำาคญอกกระบวนการหนงสำาหรบการผลตซอฟตแวร โดยจดวาเปนสวนทมอทธพลตอการตดสนใจเลอกใชซอฟตแวรของลกคาเปนอยางมาก เนองจากเปนสวนทคอยประสานการทำางานระหวางผใชกบระบบ โดยแสดงออกมาบนจอภาพคอมพวเตอรดวยรปลกษณตางๆ เพอสอสารความหมายใหผใชทราบวาจะตองจะตองโตตอบกบระบบอยางไรเพอใหเกดการทำางาน นบวาเปนปราการดานแรกทผใชจะไดสมผสกบระบบซงหากสามารถสรางความประทบใจแรกใหเกดขนกบผใชได กจะชวยจงใจลกคาใหตดสนเลอกซอซอฟตแวรไดงายขนดวยแตการออกแบบสวนประสานกบผใชไมใชการนำาเสนอรปลกษณตางๆ ใหสวยงามนาสนใจเพยงอยางเดยวเทานน วศวกรออกแบบซอฟตแวรยงตองคำานงถงการใชงานสวนประสานเหลานน ใหเรยนรงาย ไมสรางความสบสน และเหมาะกบผใชในทางทจะทำาใหเกดประโยชนจากการทำางานใหมากทสดอกดวย

7.1 สวนประสานกบผใชและกฎเหลกในการออกแบบ

Page 2: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

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

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

83

Page 3: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

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

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

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

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

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

84

Page 4: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

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

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

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

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

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

85

Page 5: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

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

3. คยลดหรอ Shortcut Key ควรสอความหมายของงานไดชดเจนและจดจำางาย เชน ปม Ctrl + S แทนคำาสงการบนทกขอมล หรอ ปม Ctrl + O แทนคำาสงเปดไฟล เปนตน โดยทวไปมกใชอกษรตวแรกของชอคำาสง

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

5. ควรแสดงรายละเอยดการใชงานผลสงเขปในเบองตน สวนรายละเอยดอนๆ ใหผใชคลกเลอกเองเมอตองการ เชน ไอคอน ของโปรกแรม Microsoft Word จะแสดงเฉพาะเสนกรอบอยางใดอยางหนง

สวนประสานตองสอดคลองกนสวนประสานทสอดคลอง หมายถง สวนประสานเหลานนจะ

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

86

Page 6: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

1. สวนประกอบทกอยางบนจอภาพการทำางานอยางใดอยางหนงจะตองสอดคลองกน เชน ในขณะทผใชปอนขอมลใบสงซอ ท Title Bar, Icon ตลอดจนเมนคำาสง จะตองมขอความแสดงชองานนนๆ เพอใหผใชทราบอยเสมอวาอยในขนตอนของงานใด เปนตน จะมสวนทแบงใหทราบวาผใชทำางานใดกอนหนา และจะสามารถทำางานอนตอไปไดอยางไร หากตองการจะละทงสวนนไป

2. โปรแกรมทอยในกลมผลตภณฑเดยวกน จะตองมสวนประสานเหมอนและสอดคลองกน แมวาวตถประสงคของแตละโปรแกรมจะแตกตางกนกตาม เชน โปรแกรม Microsoft Word, Excel , Access ซงจดอยในกลมผลตภณฑเดยวกน คอ Microsoft Office จะมสวนประสานคลายกน เปนตน

3. ไมควรเปลยนลกษณะการโตตอบกบระบบทโปรแกรมสวนใหญใชเหมอนกน เนองจากผใชจะมความคนเคยกบการโตตอบในลกษณะนน และอาจเกดความสบสนขนไดหากมการเปลยนแปลง เชน โปรแกรมทวไปจะใชปม Ctrl + S แทนการปรบขนาดรปภาพ อาจทำาใหผใชสบสนได เปนตน

7.2 ชนดของสวนประสานกบผใชเนองจากสวนประสานกบผใชเปนสวนหนงของระบบทชวยใหผ

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

87

Page 7: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

7.2.1 รปแบบโตตอบระหวางผใชกบระบบการโตตอบระหวางผใชกบระบบ คอ ลกษณะทผใชสงงาน

คอมพวเตอรดวยขอมลบางอยาง เพอใหคอมพวเตอรทำางานตามทตองการ ในอดตการโตตอบระหวางผใชกบระบบมพยงรปแบบเดยว คอ Command –Line Interface หรอการพมพคำาสงในโหมด DOS ซงเปนเรองยากสำาหรบผใชระบบทวไปทไมใชผเชยวชาญ จงไดมการพฒนารปแบบการโตตอบใหงายมากขน จำาแนกไดดงน

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

2. การเลอกเมนคำาสง คอลกษณะทผใชตองเลอกคำาสงจากรายการทโปรแกรมเตรยมไวใหโดยเมนจะม 2 ลกษณะ คอ Pull-down และ Pop-up-Menu

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

4. การโตตอบดวยภาษาธรรมชาต คอ ลกษณะทผใชสงงานคอมพวเตอรดวยเสยงในภาษาตางๆ เชน ภาษาองกฤษ เปนตน เครองคอมพวเตอรจะตองมระบบแปลภาษาภายใน

88

Page 8: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

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

ตาราง 7.1 เปรยบเทยบขอดขอเสยของการโตตอบระหวางผใชกบระบบแตละรปแบบ

รปแบบการโตตอบกบระบบ

ขอด ขอเสย

การโตตอบกบระบบโดยตรง

รวดเรวและสอความหมายไดชดเจน งายตอการเรยนร

ยากตอการพฒนา

การเลอกเมนคำาสง ชวยลดขอผดพลาดในการใชงานของผใชได เนองจากผใชไมตองพมพคำาสงเอง

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

การปอนขอมลลงในฟอรม

ปอนขอมลไดงาย ตองใชพนทในหนาจอมาก และเสยงตอการเกดขอผด-พลาด หาดผใชปอนขอมลผด

การโตตอบดวยภาษา งายตอการใชงาน ตองอาศยกลไกแปล

89

Page 9: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

7.2.2 การนำาเสนอสารสนเทศตอผใชการโตตอบกบระบบผใชนน สวนใหญกเพอตองการขอมลหรอ

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

รปแบบการนำาเสนอสารสนเทศการนำาเสนอสารสนเทศแบงออกเปน 3 รปแบบจำาแนกตาม

ประเภทของสารสนเทศ ดงน1. Alphanumeric Information คอ สารสนเทศทไม

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

90

Page 10: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

กราฟและหากเปนสารสนเทศทมความสมพนธกน ควรคำานงถงกราฟดวย

2. Dynamically Varying Information คอ สารสนเทศทมการเปลยนแปลงขน-ลงตามวนหรอเวลา เชน อณหภมระดบนำาทะเล หรอดชนหน เปนตน สารสนเทศประเภทนควรนำาเสนอในรปแบบกราฟฟก เชน กราฟ ควรเลอกประเภทเสน หรอการฟกลม หรอสามารถแสดงในลกษณะของแผงหนาปด เปนตน

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

1. กำาหนดจำานวนสทใชไมใหมากเกนไป โดยทวไป ไมควรใชสมากกวา 4-5 สในแตละหนาตาง และไมควรเกน 7 ส ในแตละระบบ

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

3. ใชสเปนสญลกษณ เชน หากผใชกำาลงหาขอมลทผดพลาด ควรกำาหนดใหขอมลทผดพลาดมสเดนกวาขอมลธรรมดา

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

5. ใชสสอดคลองกนทงระบบ เชน เมอใชส แดง แสดงขอมลทผดพลาดในระบบยอยใด ขอมลผดพลาดในระบบยอยอนกควรจะเปนสแดง

91

Page 11: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

7.3 กระบวนการออกแบบสวนประสานกบผใชกระบวนการสวนประสานกบผใช มลกษณะการทำางานแบบวน

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

7.3.1 การวเคราะหผใชระบบ

92

Page 12: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

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

คอมพวเตอรหรอทางกระดาษ4. สภาพแวดลอมในการทำางานของผใช

การทำาความเขาใจผใชการทำาความเขาใจผใชในทน คอ การทำาความเขาใจผใชวา

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

93

Page 13: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

2. ระดบการศกษาโดยเฉลยของผใชทงหมด3. ผใชสามารถเรยนรเนอหาการฝกอบรมในชนเรยนไดมาก

นอยเพยงใด4. ผใชมความชำานาญในการพมพดดมากนอยเพยงใด5. อายโดยเฉลยของผใชทงหมด6. ผใชมลกษณะการครอบงำาไดงายดวยหรอไม7. คาตอบแทนทผใชไดรบจากการทำางาน8. ผใชทำางานตามเวลางาน หรอทำางานจนกวางานจะเสรจ9. ซอฟตแวรทจะนำามาใชเปนสวนหนงของงานทผใชตองทำาให

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

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

การวเคราะหงานทผใชตองดำาเนนการในแตละวนวตถประสงคของการวเคราะหงานทผใชตองดำาเนนการใน

แตละวน มดงน1. เพอใหทราบถงลกษณะของการปฏบตงานในแตละ

เหตการณ2. เพอใหทราบถงงานหลกและงานยอยทตองปฏบต

94

Page 14: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

3. เพอใหทราบถงระบบงานและสวนอนทเกยวของทผใชตองดำาเนนการ

4. เพอใหทราบถงลำาดบของงงานทมา5. เพอใหทราบถงลำาดบของการปฏบตงาน

การวเคราะหงานทผใชตองปฏบตนน ทมงานจำาเปนตองสรางแบบจำาลองขนมาอธบายสงทรวบรวมมาได โดยสามารถใชแผนภาพ Use Case หรอ Sequence ของ UML แตแผนภาพดงกลาว จะอธบายในเชงเทคนคมากเกนไป ซงอาจทำาใหผใชบางกลมไมสามรถเขาใจได และอาจสงผลใหเกดความเขาใจไมตรงกนระหวางทมงานและผใช ดงนน ทมงานจงสามารถจำาลองงานทผใชตองปฏบตออกมาในลกษณะเรยงลำาดบชนได จงทำาใหสามารถเรยกการวเคราะหงานไดอกอยางหง การวเคราะหงานแบบลำาดบชน

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

สญลกษณสเหลยมผนผาจะใชปฏบต หากรปสเหลยมใดทมขดเสนใต หมายถงงานนนไมสามารถแบงยอยลงไปไดอก การสรางแผนภาพเรมตนจาก กำาหนดสถานการณการทำางานอยางใดอยางหนงขนมากอน ในทน กำาหนดใหเหตการณ การแระเมนใบสงซอ จากนน ในระดบบนสดของแผนภาพใหวางรปสเหลนมทแทนเปาหมายสถานการณ ซงในทนกคอ เพอประเมนใบสงซอสนคา จากนน ใหกำาหนดสงทตองปฏบตเมอตองทำางานประเมนใบสงซอ ในทนมงานหลกทงหมด 4 งาน ประกอบดวย รบใบสงซอ สงสงซอใหระบบ OPS คนหาขอมลลกคา และ ดเงอนไขการขาย ซงมเพยงงาน คนหาขอมลลกคา เทานนทตองแบงออกไป

95

Page 15: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

รป 7.1 แสดงตวอยางแผนภาพการวเคราะหงานแบบลำาดบชน

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

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

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

96

Page 16: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

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

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

3. ผใชตองการจด Layout ของเอกสารอยางไร เพอใหเขาใจไดงายขน

4. มกลไกทใชจดทำา Pivot Table เพออำานวยความสะดวกแกผใชในสวนการสรารายงานดวยตนเองหรอไม

5. จะจดการวางการแสดงผลบนกราฟฟกใหพอดกบขนาดของจอภาพไดดวยวธใด

6. ควรเลอกใชสอยางไรใหเหมาะสม7. ควรเลอกใชขอความหรอถอยคำาใดเพอแสดงเปน Error

Massage

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

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

97

Page 17: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

7.3.2 การสรางตนแบบสวนประสานแมวาทมงานจะสามารถจำาลองสวนประสานทไดออกแบบไวลง

บนกระดาษไดกตาม แตบางครงผใชอาจไมแนใจวาสวนประสานทเหนบนกระดาษนนถกตองหรอไม เนองจากสวนประสานทเหนบนกระดาษนนไมชดเจนและไมสามารถสมผสไดจรง วธแกไขปญหาดงกลาวทดทสดวธหนง คอการสรางตนแบบของสวนประสานซงอาจเปนไดทงตนแบบทสามารถแสดงขอมลจากฐานขอมล หรอเปนตนแบบทผใชทำาไดเพยงการคลกเลอกเมนหรอปมตางๆ กได ลกษณะของการออกแบบและพฒนาซอฟตแวรโดยใหผใชแสดงความคดเหนดวยนน ถอเปนแนวทางหนงทเรยกวา “User-centered Design” ซงเปนหลกการออกแบบสำาหรบระบบแบบโตตอบกบผใชเปนหลก วตถประสงคของการสรางตนแบบ กเพอใหผใชไดทดลอง

98

Page 18: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

กลาวโดยสรปไดวา ขนตอนการสรางตนแบบสวนประสาน ม 2 ขนตอน คอ

1. สรางตนแบบบนกระดาษ แลวใหผใชประเมนตนแบบนน2. ปรบปรงงานออกแบบสวนประสาน และสรางตนแบบท

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

อยางไรกตาม เนองจากการสรางตนแบบตองใชตนทนสง ทำาใหบางองคกรไมสามารถใชวธการกลาวนได จงหนกลบไปใชวธการเดมซงใชตนทนตำากวา คอ สรางตนแบบสวนประสานลงบนกระดาษ วธทจะทำาใหตนแบบบนกระดาษไดผลดเชนเดยวกนคอ การสรางจอภาพจำาลองเปนลำาดบเหตการณ เปนวธททมงานจะสรางหนาจอการทำางานจำาลองขนมาตามลำาดบการโตตอบระหวางระบบกบผใช ซงปจจบนมซอฟตแวรชวยประสานจำาลองไดหลายผลตภณฑ เชน Microsoft Visio, SmartDraw, Rational Rose และ Bx for Java เปนตน แสดงตะวอยางตนแบบสวนประสานของระบบลงทะเบยน ในเหตการณ เขาสระบบ

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

เมอตนแบบทสรางลงบนกระดาษผานการประเมนจากผใชแลว ทมงานจะตองนำารายละเอยดดงกลาวมาสรางเปนตนแบบทสามรถใช

99

Page 19: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

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

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

สำาหรบแนวทางการสรางตนแบบนนมหลายทาง บางโครงการอาจเลอกแบบ Throw-away Approach คอ เมอประเมนตนแบบผานแลว จะไมนำาตนแบบนนมาใชพฒนาตอ แตบางโครงการอาจเลอกแบบ RAD ซงทมงานสามารถเลอกสรางตนแบบไดหลายวธ เชน

1. Script – driven Approach เปนการสรางตนแบบโดยใชซอฟตแวรทมเครองมอสรางองคประกอบตางๆ ของ

100

Page 20: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

หนาจอการทำางานบนระบบคอมพวเตอร เชน Button, Menu และ List Box เปนตน โดยภายใตองคประกอบเหลาน ซอฟตแวรจะสรางสคปตการทำางานใหอตโนมต เมอผใชทดลองใชงาน จะมการโตตอบกบผใชตามลกษณะการทำางานของแตละองคประกอบนน ยกตวอยางเครองมอประเภทน เชน Macromedia Director เปนตน

2. Visual Programming Language คอ การใชภาษาโปรแกรมมงประเภทวชวลสรางองคประกอบตางๆ ทจะแสดงบนหนาจอการทำางาน โดยใหผใชคลกทออบเจกตองคประกอบเหลานนแลวลากมาวางบนตำาแหนงทตองการ ภายใตออบเจกตจะมสคปตการทำางานใหดวยเชนกน ยกตวอยางภาษาโปรแกรมมงชนดดงกลาว เชน Visual Basic Visual Studo.NET เปนตน

7.3.3 การประเมนสวนประสานหลงจากทมงานสรางตนแบบเสรจเรยบรอยแลว ผใชจะมหนา

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

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

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

101

Page 21: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

2. จำานวนของงานทผใชตองปฏบตและจำานวนการกระทำา 1 งานของผใช เปนเครองบงชถงระยะเวลาตอบสนองและประสทธผลของระบบ

3. จำานวนงาน การทำางาน และสถานการณของระบบ ทแสดงไวในแบบจำาลองตางๆ บงบอกถงจำานวนของสงทผใชตองจดจำาเมอตองใชงานระบบ

4. รปแบบของสวนประสาน เครองมอชวยเหลอ และนโยบายการรองรบขอผดพลาด บงบอกถงความซบซอนของสวนประสานและระดบการยอมรบของผใช

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

สรปนอกจากความสามรถในการทำางานของซอฟตแวรทถกตอง

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

กระบวนการออกแบบสวนประสาน ประกอบไปดวย (1) วเคราะหผใช (2) สรางตนแบบบนกระดาษ (3) ผใชประเมนผล (4) สรางตนแบบทใชงานไดจรง (5) ผใชประเมนผล (6) สราง

102

Page 22: บทที่ 7elearning.psru.ac.th/courses/66/document/บทที่... · Web viewการออกแบบส วนประสานก บผ ใช (User Interface) เป

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

103