บทที่ 8 การออกแบบซอฟต์แวร์ การ...

บทท 8 การออกแบบซอฟตแวร: การออกแบบสวนตอประสานผใช (Software Design: User Interface Design)

วชา วศวกรรมซอฟตแวร (04-06-306)

เอกสารประกอบการสอน วชา วศวกรรมซอฟตแวร (04-06-306)

วตถประสงคการเรยนร

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


หวขอ

• บทน า (Overview) • การออกแบบสวนประสาน (Interface Design) • กระบวนการในการพฒนาสวนประสาน • รปแบบของสวนประสานกบผใช (User Interface) • การประเมนสวนประสาน และเกณฑคณภาพ • การวเคราะหและประเมนคณภาพงานออกแบบซอฟตแวร • การวดการออกแบบซอฟตแวร • สรป (Summary)


บทน า (Overview)

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

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

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


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

Easy to use?

Easy to understand?

Easy to learn?


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

• สวนประสานกบผใช (User Interface)

สวนตดตอระหวางผใชงานระบบ เพอเตรยมสารสนเทศการท างานและน าเสนอสารสนเทศ เรยกวา “การออกแบบจอภาพ (Screen Design)”

เกดการท างานตามวตถประสงค สามารถเปนเครองบงชการใชงานซอฟตแวร เนนสวนประสานแบบกราฟฟก (Graphic User Interface: GUI)

การใชงานตองสอดคลองกน ความแตกตางกนของผใชงานทงพฤตกรรมและประสบการณท างาน


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

• Theo Mandel ไดบญญตกฎ 3 ขอในการออกแบบสวนตอประสาน ดงน – ใหผใชเปนผควบคมการท างาน -

Place the user in control – ลดภาระการตองจดจ าของผใช -

Reduce the user’s memory load

– สรางสวนตอประสานอยางคงเสนคงวา (สอดคลองกน) - Make the interface consistent


ใหผใชเปนผควบคมการท างาน

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

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

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

เตรยมเครองมอสรางการท างานแบบอตโนมตใหกบผใช


ใหผใชเปนผควบคมการท างาน (ตอ)

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

6. การออกแบบวตถทวางไวบนจอใหเขาถงโดยตรง


ลดภาระการตองจดจ าของผใช

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

• Mandel ออกแบบหลกการทชวยลดภาระการจดจ าของผใช ดงน – ลดความตองการใชงานหนวยความจ าระยะสนของผใช ขณะทใช

โปรแกรมอย – การก าหนดคาโดยปรยายทมความหมาย – นยามปมลด (Shortcut) ทเขาใจงาย – การจดภาพของสวนตอประสานควรเปนไปตามอปลกษณของโลกจรง – เปดเผยขาวสารในลกษณะคอยๆ เพมพน


สวนประสานตองสอดคลองกน

• สวนประสานควรรบและแสดงผลในลกษณะคงเสนคงวา

– ขาวสารทางภาพจดระเบยบตามมาตรฐานการออกแบบเดยวกนตลอดทกหนาจอของระบบ

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


สวนประสานตองสอดคลองกน (ตอ)

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

– ชวยใหผใชทราบวางานปจจบนอยภายใตบรบทใด

– คงเสนคงวาตลอดทงตระกลของแอปพลเคชน

– ถารปแบบการโตตอบทผานมาท าใหผใชเกดความคาดหมาย อยาเปลยนกฎนน ยกเวนมเหตผลสมควร


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

User model Design model

Implementation model

Mental model

(system perception)

Interface Analysis and Design Model


กระบวนการในการพฒนาสวนประสาน

ทมา: Alan Dennis, Barbara Haley Wixom and Roberta M, Systems Analysis and Design Fifth Edition, 2012. เอกสารประกอบการสอน วชา วศวกรรมซอฟตแวร (04-06-306)

Example: Two Use Scenarios for the Search and

Browse Tunes Use Case


Example: Interface Structure Diagram

(ISD)


Exam

ple:

Sto

rybo

ard


Example: Sample Language Prototype


กระบวนการในการพฒนาสวนประสาน (ตอ)


การวเคราะหสวนตอประสาน (Interface Analysis)

• ในการวเคราะหสวนตอประสานตองเขาใจปญหา ดงน

– the people - เขาใจคน บคลากรทใชงานระบบ

– the tasks - เขาใจงานทผใชตองการใชเพอใหท างานใหส าเรจ

– the content - เขาใจเนอหาทจะตองน าเสนอในสวนตอประสาน

– the environment - เขาใจสงแวดลอมทงานเหลานนท างานอย

Interface analysis means understanding


การวเคราะหผใชงาน (User Analysis)

• ควรเขาใจผใชวาจะใชระบบอยางไร ตองการสวนตอประสานลกษณะใด

• การสมภาษณ ซงจะชวยใหนกออกแบบเขาใจวา

– ใครคอผใชงาน

– แบงกลมผใชอยางไร

– ผใชแตละกลมมทกษะและประสบการณในระดบใด

– แบบจ าลองสภาพจตใจของผใชทมตอระบบเปนอยางไร

– สวนตอประสานจะตอบสนองความตองการของผใชไดอยางไร


การจ าลองและวเคราะหงานยอย

• Answers the following questions … – What work will the user perform in specific circumstances? (ลกษณะ

ของการปฏบตงาน) – What tasks and subtasks will be performed as the user does the

work? (งานหลกและงานยอยทตองปฏบต) – What specific problem domain objects will the user manipulate as

work is performed? (ปญหาหลกทตองใชงานเพอท างาน ระบบงานและสวนทเกยวของ)

– What is the sequence of work tasks—the workflow? (ล าดบของงานทท า)

– What is the hierarchy of tasks? (ล าดบชนของงานยอย)


การจ าลองและวเคราะหงานยอย (ตอ)

• เทคนคในการวเคราะหออกแบบสวนตอประสาน

– 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


ตวอยาง • แผนภาพกจกรรม กระบวนการท างานบรหารจดการเอกสาร (Document

Management Process) • มผเกยวของ 4 สวน ดงน (a)_____, (b) _____, (c) _____และ (d) _____ • นกออกแบบสวนตอประสานควรค านงถงลกษณะของผใช และกจกรรมงาน


การวเคราะหการน าเสนอเนอหา

• เนอหาทน าเสนอ: รายงานทเปนตวอกษร รปภาพ หรอขอมลเฉพาะ เชน เสยง หรอภาพเคลอนไหว เปนตน

– ถกสรางโดยสวนประกอบของระบบทไมเกยวของกบสวนตอประสาน

– ดงมาจากขอมลทเกบในฐานขอมล

– สงมาจากระบบภายนอก

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


การน าเสนอเนอหา


การวเคราะหสงแวดลอมการท างาน

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

• วฒนธรรมในการท างาน เชน – ขอมลตองไดรบการรบรองจากหลายฝายกอนบนทกหรอไม – ผใชงานจะไดรบความชวยเหลอจากระบบอยางไร

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


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

• Define interface objects and actions (operations) – นยามวตถและตวด าเนนการ โดยใชขอมลจากการวเคราะห

• Define events (user actions) – ก าหนดเหตการณทเปนการกระท าของผใช

• Depict each interface state – แสดงดวยรปถงสถานะของสวนตอประสานทผใชจะไดสมผส

• Indicate how the user interprets the state of the system – อธบายใหทราบความหมายของขอมลทแสดง ระบวาผใชจะเขาใจสถานะ

ของระบบอยางไร


ขอควรค านงในการออกแบบ

• Response time: เวลาในการตอบสนองของระบบ

• Help facilities: การชวยเหลอแกผใชงาน

• Error handling: การจดการความผดพลาด

• Menu and command labeling: การก าหนดชอค าสงและเมน

• Application accessibility: การเขาถงระบบงาน

• Internationalization: ความเปนสากล


รปแบบของ User Interfaces

• ผใชงานสามารถโตตอบกบระบบอยางมประสทธภาพ นยมใชแบบกราฟก (Graphic User Interface: GUI) ซงมรปแบบดงน

– การโตตอบดวยค าสง (Command Language Interaction)

– การโตตอบดวยเมนค าสง (Menu Interaction)

– การโตตอบดวยแบบฟอรม (Form Interaction)

– การโตตอบดวยการท างานเชงวตถ (Object-Based Interaction)

– การโตตอบดวยภาษามนษย (Natural Language Interaction)


การโตตอบดวยค าสง (Command Language Interaction)

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

• ผใชจะตองจ าค าสง ไวยากรณ และกฎเกณฑตางๆ – ผใชทช านาญการใชระบบปฏบตการ DOS

• ลดความนยมในปจจบน

ค ำสง $ cd ../ $ dir


การโตตอบดวยเมนค าสง (Menu Interaction)

• เปนการโตตอบกบระบบดวยการแสดงเมนค าสง โดยผใชไมจ าเปนตองปอนค าสงเอง

• รปแบบเมนมดงน คอ

– Pull-down Menu

– Pop-up Menu


การโตตอบดวยเมนค าสง (ตอ)

Pull-down Menu Pop-up Menu


หลกเกณฑในการออกแบบเมนค าสง

• ควรเลอกใชค าสงทสอความหมายไดชดเจน

• ควรมการใชตวอกษรพมพใหญหรอตวอกษรพมพเลกตามความเหมาะสม

• ควรมการจดกลมค าสงทมความเกยวของกนไวในกลมเดยวกน

• ไมควรมจ านวนเมนค าสงมากเกนไป

• ไมควรมเมนยอยส าหรบเมนค าสงทมการท างานยอยภายในมากเกนไป

• เมอมการเลอกเมนค าสง ควรออกแบบใหมแถบสปรากฏทเมนค าสงทถกเลอก


การโตตอบดวยแบบฟอรม (Form Interaction)

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

• คลายการกรอกแบบฟอรมลงในกระดาษ

• ชอของชองปอนขอมลตองสอความหมาย

• แบงสวนของขอมลบนฟอรมใหเหมาะสม

• ควรแสดงขอมลเรมตนใหกบชองปอนขอมลทตองใชขอมลนนบอยครง

• ชองปอนขอมลไมควรยาวมากจนเกนไป


การโตตอบดวยแบบฟอรม (ตอ)


การโตตอบเชงวตถ (Object-Based Interaction)

• เปนการโตตอบกบระบบทใชสญลกษณ

• สญลกษณเปนตวแทนค าสงทใชในการปฏบตงาน

• สญลกษณรปภาพแทนค าสงการท างานเรยกวา ไอคอน (Icon)

• ประหยดพนทบนหนาจอ


การโตตอบดวยภาษามนษย (Natural Language Interaction)

• เปนการโตตอบกบระบบดวยการใชเสยงพดของผใชระบบ

• ใชเสยงพดทงการน าขอมลเขาและออกจากระบบ


การออกแบบล าดบการเชอมโยงจอภาพ

• เปนการออกแบบล าดบของการแสดงสวนตดตอกบผใชของโปรแกรม หรอล าดบของการแสดงสวน User Interface ทางหนาจอคอมพวเตอร

• แผนภาพแสดงล าดบการเชอมโยงจอภาพ (Dialogues Diagram) ประกอบไปดวย 3 สวน คอ

– สวนบน: เลขล าดบหนาจอ

– สวนกลาง: ชอหนาจอการท างาน

– สวนลาง: เลขล าดบหนาจอทอางองมา ตอไป หรอ ยอนกลบ


Dialogues Diagram

• Dialogues Diagram เปนแผนภาพแสดงล าดบการเชอมโยงของจอภาพ

เลขล าดบหนาจอ

ชอหนาจอการท างาน

เลขล าดบทอางองมา


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

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

• ทมงานตองเกบขอมลความคดเหนของผใช เพอน าไปปรบปรงตนแบบใหสมบรณทสด


คณภาพและการประเมนคณภาพงานออกแบบซอฟตแวร

• สามารถใชเทคนคเดยวกบการเกบรวบรวมขอมลของการวศวกรรมความตองการ – การสมภาษณ

– การสอบถาม

• แตทมงานตองน าขอมลมาวเคราะห


เกณฑคณภาพ (Quality Attributes)

• การท างานของโปรแกรม (Functionality) – ประเมนจากลกษณะ (Feature

Set) และความสามารถ (Capability) ของโปรแกรม

– ประเมนจากหนาททวไปของโปรแกรม และความปลอดภยเมอตองท างานรวมเปนระบบ

• ความสามารถในการใชงาน (Usability) – ผลตอบกลบจากการใชงานของ

ผใช

– การใชงานงาย และเรยนรงาย


เกณฑคณภาพ (ตอ)

• ความนาเชอถอ (Reliability) – วดจากความถและความรนแรงของความผดพลาด

– ความถกตองของผลลพธทได เวลาเฉลยของความลมเหลว (Mean Time To Failure: MTTF) ความสามารถในการกคนระบบ และความสามารถในการคาดการณไดของโปรแกรม

MMTF = 0.3509 ?



• ประสทธภาพ (Performance) • วดจากความเรวของการประมวลผล

• ระยะเวลาตอบสนอง ทรพยากรทใช ปรมาณทท าไดในชวงเวลาหนง



• ความสามารถในการสนบสนนการใชงาน (Supportability) และความสามารถในการบ ารงรกษา (Maintainability) • พจารณาจากความสามารถในการเพมเตมสวนการท างาน

• ความสามารถในการแปลงการท างาน และการบรการ

• ความสามารถในการทดสอบ การท างานขามระบบได และการจดสภาพแวดลอมของระบบดวย


การวเคราะหและประเมนคณภาพ (Quality Analysis and Evaluation)

• ทบทวนงานออกแบบซอฟตแวร (Software Design Review) เทคนคทชวยใหการทบทวนงานออกแบบมประสทธภาพ – การออกแบบควรน าเสนอดานขอมล สถาปตยกรรม สวนประสาน และคอมโพ

เนนททชดเจน

• วเคราะหงานออกแบบ (Static Analysis) เทคนคทชวยใหการวเคราะหมประสทธภาพ

• การจ าลองสถานการณและการสรางตนแบบ (Simulation and Prototyping)


การวดซอฟตแวร (Software Measurement)

• การวดสามารถใชกบการประเมนหรอการประมาณการคณลกษณะบางอยาง แบงออกเปน 2 ประเภท ดงน

– การวดการออกแบบเชงฟงกชน

(Function-Oriented Measure)

– การวดการออกแบบเชงวตถ

(Object-Oriented Design Measure)


ตวอยาง การวดคณลกษณะภายนอก ดวยคณลกษณะภายในของซอฟตแวร

คณลกษณะภายนอก (External Attribute)

คณลกษณะภายใน (Internal Attribute)

ความสามารถในการบ ารงรกษา (Maintainability) วดไดจากหนวยวดล าดบท 1, 2, 3, 5

1. จ านวนพารามเตอรในแตละกระบวนการ

ความไววางใจได (Reliability) วดไดจากหนวยวดล าดบท 2, 3, 4

2. ความซบซอนของปญหา (Cyclomatic complexity)

ความเขากนได (Portability) วดไดจากหนวยวดล าดบท 1, 3

3. ขนาดของซอฟตแวร (แบบ LoC/FP)

ความสามารถในการใชงาน (Usability) วดไดจากหนวยวดล าดบท 4, 5

4. จ านวน Error Message

5. ความยาวของคมอการใชงาน เอกสารประกอบการสอน วชา วศวกรรมซอฟตแวร (04-06-306)

?

?

?

?

สรป

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

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

• เกณฑคณภาพของซอฟตแวรประกอบดวย การประเมนจากลกษณะ ดงน Functionality, Usability, Reliability, Performance, Supportability และ Maintainability

– การวดคณภาพของวอฟตแวรตองอาศย การวดซอฟตแวร เพอใหไดคาทเปนตวเลขของคณลกาณะบางอยางของซอฟตแวรหรอกระบวนการผลต


กจกรรมทายบท

• จงบอกความส าคญของการออกแบบสวนประสานมาพอสงเขป

• บญญตกฎ 3 ขอในการออกแบบสวนประสานของ Theo Mandel มกขอประกอบดวยอะไรบางพรอมกบอธบายแตละขอพอสงเขป

• อะไรคอขอควรค านงในการออกแบบ จงอธบายและยกตวอยางประกอบในแตละขอมาพอสงเขป

• รปแบบของ User Interfaces มกรปแบบประกอบดวยอะไรบางพรอมกบอธบายแตละรปแบบมาพอสงเขป

• จงบอกเกณฑประเมนคณภาพของซอฟตแวร ประกอบดวยเกณฑอะไรบางพรอมกบอธบายแตละเกณฑมาพอสงเขป

• ก าหนดใหวเคราะหและออกแบบล าดบของการแสดงสวนตดตอกบผใชของระบบกลางในการใชบรการหองพกทางอนเทอรเนต โดยใชแผนภาพแสดงล าดบการเชอมโยงจอภาพ (Dialogues Diagram)


เอกสารอางอง

• กตต ภกดวฒนะกล, วศวกรรมซอฟตแวร (Software Engineering), กรงเทพฯ: เคทพ คอมพ แอนด คอนซลท, 2552

• Alan Dennis, Barbara Haley Wixom and Roberta M, Systems Analysis and Design Fifth Edition, John Wiley and Sons, Inc. 2012.

• Lan Sommerville, Software Engineering Ninth Edition, Pearson Education, Inc., publishing as Addison-Wesley, 2011.


บทที่ 8 การออกแบบซอฟต์แวร์ การ...

Documents