บทที่ 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

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

การ... · Web viewจ บค ร ปภาพส งของก บร ปร าง จ บกล มร ปร าง เร ยงแผ นร ปทรงตามแบบ

พรบประกอบรัฐธรรมนู าดญว วย การ ...ratchaburi.go.th/rb_clean/data/ppt1.pdf · 2010-09-28 · พ.ร.บ.ประกอบร

สารบัญญัติตาม พ.ร.บ.การ ......สารบ ญญ ต ตาม พ.ร.บ.การสาธารณส ข พ.ศ. 2535 • หมวด

The book is owned by ชมรมอนุรักษ การ ตูนไทย ...samgler.com/archives/book84abc.pdfThe book is owned by ชมรมอน ร กษ การ

เอกสารประกอบการบรรยาย PLC (ภาค ...แบบสร ปการด าเน นการงาน ร ปแบบ/ว ธ การ/ก

secretary.mots.go.th · Web view= ประชาชนท วไป, องค กรภาคร ฐ / ภาคเอกชน, ผ ร บบร การ, ผ ม ส วนได

บทที่ 3lpsci.nfe.go.th/lpsci/_file/206N20112804Thu173739.doc · Web viewผ ร บบร การ ประกอบด วย น กเร ยนในระบบโรงเร

สามารถ “เปลี่ยนแปลงข อมูลเกี่ยวกับ PF” ได หากไม ต องการ ... · การเปลียนแปลงข้อมูลเกียวกับ

แผนการจัดการเรียนร้ที การ ...pws.npru.ac.th/silapachai/data/files/การสอน...ศ 2.1 ม.1/1 ร ว าส งต างๆ

หลักสูตร ร.ร เจาะเกาะ

ค ว า ม ร ่ ว ม ม ื อ กั บ ต่ า ง ป ร ะ เ ...น กว เทศส มพ นธ ปฏ บ ต การ * น กว เทศส

แผนการจัดการเรียนรู · การ ตูนแอนิเมชั่น แนะนําตัวละคร 3. การ ตูนแอนิเมชั่น

· Web view(1) ร ปแบบ ว ธ การ หร อแนวทางการใช ประโยชน ทร พย ส นทางป ญญาตามท ระบ

· Web viewจ งหว ดบ ร ร มย ประช มเช งปฏ บ ต การ สร างน กการตลาด OTOP Trader สำหร บส นค

การทดลองที่ 12 แพทเทอร์นการแผ่ ...pgm.npru.ac.th/telecom/data/files/การ...144 ร ปท 2 E-plane (y-z) และ H-plane

กองทุนเป ดทหารไทย China Opportunity · ˜ กองทุนเปิดทหารไทย China Opportunity ต องการ จีนได

Block Trade Web Page - maybank-ke.co.th · กรณีสามารถหานักลงทุนที่มีความต องการ ในสัญญาที่หมดอายุ

บทสรุปผู้บริหาร - ntc · Web viewพ.ศ. 2502 โรงเร ยนได ร บความช วยเหล อจากองค การ ส.ป.อ

qmis.stou.ac.thqmis.stou.ac.th/Che_PRE57/evidence/ศวนมสธน... · Web viewการประเม นความพ งพอใจของผ ร บบร การ