Embed Size (px)
Citation preview
1
Lecture 10 – การออกแบบระบบ (System Design)
ภาควชาวทยาการคอมพวเตอร
คณะวทยาศาสตร
มหาวทยาลยสงขลานครนทร
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 2
Contents
Forms/Reports Design
User Interface Design
Documentation
Database Design
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 3
แบบฟอรมและรายงาน (Form/Report Design)
ฟอรม หมายถง เอกสารทางธรกจทมขอมลบางอยางแสดงไวแลวและยงมพนท
วางใหใสขอมลเพมเตมลงไปไดอก เชน แบบฟอรมใบสมครงาน แบบฟอรม
ใบสงซอ แบบฟอรมใบสมครงานสมาชก เปนตน
รายงาน หมายถง
เอกสารทางธรกจทมขอมลแสดงไวอยางเดยว
ใชส าหรบอานหรอวเคราะหขอมล
โดยปกตแลวขอมลจะมาจากหลายๆ ระเบยนหรอรายการ (transactions)
เชน รายงานขอมลสนคาทไมมการเคลอนไหว รายงานผลการเรยนของ
นกศกษา รายงานยอดขาย เปนตน
Form Design
การออกแบบ แบบฟอรม เปนสงส าคญ เพราะ ขอมลใน
แบบฟอรม ถกเปลยนเปนขอมลในการประมวลผล จง
เปรยบเสมอน เครองมอ วดการท างานของระบบ
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 4
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 5
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 6
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 8
Input data Output
Data in - Data out
Output/Input
output
Process 1
Process 2
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 9
แบบฟอรมและรายงาน สามารถทราบไดโดยดจาก Data Flow
Diagram
แบบฟอรมดจาก Input Data Flow Diagram ทวงเขาส Process
รายงานดจาก Output Data Flow Diagram ทวงออกจาก Process
แบบฟอรมและรายงาน (Form/Report Design)
แบบฟอรม
รายงาน
DFD Level 1: การรบสมครสมาชกหองสมด
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 11
กระบวนการออกแบบ Form/Report
เกบรวบรวมขอมลการใชงาน ใน form /report
ใครเปนผใช
วตถประสงคในการใชงาน
เวลาของการใช ทไหน และสงไปไหนบาง
จ านวนผใช form/report
รางแบบ form/report
สรางตนแบบ form/report
วตถประสงคของการออกแบบ output
มเปาหมายในการใชงานทชดเจน
จดท ารายงานไดทนเวลา
ตรงตามความตองการในการน าไปใชงาน
เพอใหปรมาณงานทเหมาะสม
เลอกวธการน าเสนอไดเหมาะสม
ขอสงเกตในการออกแบบ Output
ใครใชรายงาน
ตองการจ านวนเทาไร
ตองการขอมลไปท าอะไร
ตองการรายงานมาก นอย แคไหน
ใชรายงานบอยแคไหน
วธทใชแสดงรายงาน
ประเภทรายงาน
รายงานตองการรายละเอยดมาก
รายงานตองการเฉพาะเงอนไข
รายงานสรป
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 13
Software for design
Case Tool
Power Designer
Rational Rose
Visible System
System Architect
Visual Basic
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 14
หลกการจดรปแบบของ Form/Report
มชอหวขอ ชดเจนมความหมาย (Meaningful Titles)
เขาใจงาย สอความหมาย
แสดงวนท
มชอ แบบฟอรม หรอรายงาน
แสดงเฉพาะขอมลทจ าเปนตอการใชงาน (Meaningful Information)
จดใหมการวางในท ทเหมาะสม สมดล ในหนากร ดาษ จอภาพ
(Balance the Layout)
ใชงานงาย (Design an Easy Navigation System)
Poorly designed form Vs. Improved design for form
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 19
ประเภทของ Output
Internal Output : Output ทใชภายในองคกร
External Output : Output ทสงออกภายนอกองคกร
เชน ใบเสรจรบเงน เปนตน
Turnaround output : Output ทสงออกภายนอกองคกร
และมบางสวนทสงกลบมายงองคกร เชน ใบฝากถอนเงน ใบ
สงสนคา เปนตน
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 20
Internal Outputs
Internal outputs : รายงานทใชภายในองคกร ผใชเปนบคคลในองคกร
Detailed reports present information with little or no filtering.
Summary reports categorize information for managers who do
not want to wade through details.
Increasingly presented inn graphical formats using charts.
Exception reports filter detailed information before presenting it.
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 21
Detailed Reports
แสดงสารสนเทศทตองการ
ในแตละบรรทดจะแสดงถงแตละ record
Detail reports เปนรายงานทแสดงรายละเอยดของขอมลทม
ความยาวไดมาก
Detailed Reports
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 23
Summary Reports
รายงานสรปตามกลม (Control-Break Reports)
ใช Field ควบคมการแสดงผล
ขอมลตองผานการเรยงล าดบกอนทจะมาแสดงผล
Control Break เปลยนแปลงตามคาของ Field ควบคมทเปลยนไป
Summary Reports
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 25
Exception reports
รายงานทจดท าตามเงอนไขทผดปกต
แสดงเฉพาะ record ทตรงตามเงอนไขทก าหนด
ประโยชนเพอใชแสดงเฉพาะสารสนเทศทตองการ
ก าหนด parameter ในการเรยกคนขอมลตามเงอนไขทก าหนด
Exception Reports
หลกการออกแบบรายงาน
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 29
External Outputs
External outputs leave an organization.
Intended for customers, suppliers, partners, or
regulatory agencies.
Turnaround documents are external outputs that
eventually re-enter the system as inputs
Most “bills” and invoices include a stub to be
returned by the customer with payment.
External Document
Turnaround Document
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 32
การแสดงผลดวยการเนนขอความ
ใชส
กระพรบ
รปแบบตวอกษร
ตวหนา ขนาด ขดเสนใต
ต าแหนง
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 33
การแสดงผลแบบตารางและรายการ (Table/List)
ก าหนด ชอ Table Row column ใหสอความหมาย
เรยง นอย ไป มาก หรอ มากไปนอย
ควรมการเวนระหวางบรรทดเปนกลมๆ เพอ อานงาย
ไมควรใชหลาย fonts ในรายงานเดยวกน
ขอมลตวเลข ชดหลง ขอมลตวหนงสอ ชดหนา
ตวอกษร ไมยาวเกนไป เพราะอานไดรวดเรว จบใจความไดงาย
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 34
การแสดงผลแบบตารางและกราฟ (Table/Graph)
เลอกใชตารางแสดง เมอ ตองการแสดงผลตวเลขทชดเจน
เลอกใชกราฟแสดง เมอ ตองการ
สรปผลตวเลข
แสดงแนวโนมการเปลยนแปลงของขอมล
เปรยบเทยบตวเลข
พยากรณตวเลขในอนาคต
ตาราง(Table)
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 38
การประเมน Form/Report
ตองสามารถใชประโยชนได (Usability) ประกอบดวย :
ความเรว (Speed)
ความถกตอง (Accuracy)
ความพงพอใจ (Satisfaction)
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 39
ปจจยทท าให Form/Report มประโยชน
มความสอดคลอง (Consistency)
มประสทธภาพ (Efficiency)
อานงาย (Ease)
มรปแบบ (Format)
ยดหยน (flexibility)
User Interface Design
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 41
User Interface Design
หมายถง การออกแบบสวนทตดตอระหวางผใชระบบเพอการเตรยม
สารสนเทศและน าสารสนเทศไปใชดวยการโตตอบกบคอมพวเตอร
การออกแบบ
เกบรวบรวมขอมลในการใชงานหนาจอ
รางแบบหนาจอ
สรางตนแบบ
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 42
รปแบบ User Interface
โตตอบดวยค าสง (Command Language Interface)
โตตอบดวยmenu (Menu Interface)
โตตอบดวย แบบform (Form Interface)
โตตอบดวยการท างานเชงวตถ (Object_base Interface)
โตตอบดวยภาษามนษย (Natural Language Interface)
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 43
Command Language Interface
ผใชตองจ าค าสง ไวยากรณ ไดอยางด เชน ค าสงของ Dos ผใช Interface
แบบน จงเหมาะกบผทมความร ความช านาญในระบบนนๆ
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 44
Menu Interface
มการพฒนาออกแบบเมนค าสงแบบ GUI Menu
Pull-down menu
Pop-up menu
มหลกเกณฑ
แตละกลมค าสง เลอกใชค าทสอความหมายชดเจน
เลอกตวพมพเลก ใหญทเหมาะสม
จดกลมค าสงเปนประเภท
ไมควรมจ านวนเมนค าสงมากเกนไป
เลอกแถบสในค าสงทถกเลอก
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 45
Pull-Down Menu
Pull-down Menu เมนแสดงค าสง
โดยแบงรายการของค าสงเปนหมวดหม
เมอผใชคลกจะแสดงรายการค าสงจาก
บนลงลาง
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 46
Pop-Up Menu
Pop-up Menu เมนแสดง
ค าสง เมอผใชคลกเลอกวตถ
หรอ Object ใด ๆ ในจอภาพ
ค าสงหรอคณสมบตทเกยวของกบ
Object นนจะถกแสดงออกมา
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 47
Form Interface Design
โตตอบโดยผใชปอนขอมลในชองวางคลายกรอกแบบฟอรม
ควรมชอทสอความหมายชดเจน
แสดงคาเรมตนกบขอมลทใชบอยๆ
แตละชองขอมลไมควรยาวเกนไป
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 48
Object Base Interface
Object_base Interface
เปนการโตตอบกบระบบโดยใช สญลกษณเปนตวแทนค าสงในการ
ปฏบตงาน เชนใช Icon เปนสญลกษณ ผใชสามารถท าความเขาใจได
งาย
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 49
Natural Language Interface
Natural Language Interface
เปนการโตตอบกบระบบดวยการใชเสยงพดของผใชระบบ ไมวาจะเปน
การน าขอมลเขาหรอ ออกจากระบบ
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 50
Interface Design
มรปแบบการจดวางแบบเดยวกบ Input Form บนเอกสารทใชงานจรง
การเชอมโยงการปอนขอมลแตละรายการ ซาย ไป ขวา และ บน ลง
ลาง
ควบคม Cursor
การแกไขขอมล
เตอนใหจดเกบขอมล เมอจบการท างาน
มตวชวย (Help)
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 51
รปแบบของ GUI
1. Text Box
2. Radio Button
3. Check Button
4. List box
5. Drop-down List Box
6. Combination Box (Combo Box)
7. Spin Box (Spinner Box)
8. Menu bars
9. Toolbars
10. Dialog boxes
11. Toggle buttons
12. Scroll bars
13. Calendars
14. Status Bar
ตวอยาง Graphic User Interface
ListBoxTextBox
Radio Button
ComboBox
Common GUI Components
Can edit
Text box
Radiobutton
Checkbox
Listbox
Spin box
Dropdownlist
Button
Advanced GUI Components
Advanced GUI Components (Cont.)
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 57
Structure Data Entry
การปอนขอมล มการดงขอมลเกา
คาเรมตนของ field
เตม , ในตวเลข / or - for date
ค าอธบายของ แตละ field ตองชดเจน
รปแบบสวยงาม เปนสากล
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 58
การควบคมความถกตองระหวางปอนขอมล
ตรวจสอบชนดของขอมลทปอน
ตรวจสอบการปอนขอมลใหครบทก field
ตรวจสอบรปแบบเชน วนท
ตรวจสอบรปแบบคาสงสด ต าสดทเปนไปได
ตรวจสอบความสมเหตสมผลของขอมล
ตรวจสอบความยาวครบหรอไม
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 59
การตอบสนองของระบบ (Providing Feedback)
แจงสถานการท างาน (status Information)
แสดงความพรอมในการรบค าสง (Prompting Cues)
ขอความแจงหรอเตอนขอผดพลาด (Error/Warning message)
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 60
แจงสถานะการท างาน (Status Information)
แจงใหผใชทราบถงความสถานะปจจบนในกาท างานของระบบ เชน
แสดงเลขหนาทก าลงท างานอย
แสดงความคบหนาในการประมวลผล
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 61
แสดงความพรอมในการรบค าสง (Prompting Cues)
เปนการออกแบบเพอแจงสถานะความพรอมในการรบค าสง
เชน หนา Login เขาระบบ cursor กระพรบรอรบ username
หรอ กรณาปอนรหสวชา :_ _ _-_ _ _
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 62
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 63
ขอความแจงหรอเตอนเมอมขอผดพลาด(Error/Warning Messages)
การแสดงขอความเมอเกดขอผดพลาด และแนะแนวทางในการแกไข
เพออธบายใหผใชสามารถแกไขปญหาดวยตนเองได
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 64
การแสดงสวนชวยเหลอ (Help)
สามารถเขาใจไดงาย
จดรปแบบอยางเปนระเบยบ อานงาย ไมซบซอน
แสดงตวอยาง เมอจ าเปน
ตวอยาง Help
Poorly designed help display Improved designed help display
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 67
Documentation : จดท าเอกสารของระบบ
เพออธบายถงระบบงานและสวนชวยเหลอการท างานของผใช
ระบบ
ประเภทของเอกสาร
Program documentation : เอกสารอธบายการท างานของ
โปรแกรม
System documentation : เอกสารอธบายการท างานของระบบ
Operations documentation : เอกสารอธบายขนตอนการท างาน
ส าหรบ operator
User documentation : เอกสารอธบายการใชงานระบบส าหรบผใช
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 68
Documentation
Program documentation
เรมจดท าเอกสารในขนตอนการวเคราะหระบบ (systems analysis)
และระหวางขนตอนการพฒนาระบบงาน (systems
implementation)
ภายในเอกสารประกอบดวย ค าอธบายการประมวลผล (process
descriptions) และ report layouts
Programmers เปนผจดท าเอกสารโดยมค าอธบายประกอบเพองาย
ตอการท าความเขาใจและเพอประโยชนในการปรบปรงแกไข
โปรแกรม
นกวเคราะหระบบตองตรวจสอบความถกตองและความสมบรณของ
program documentation
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 69
Documentation
System documentation
System documentation จะอธบายถงการท างานของระบบรวมถงวธการพฒนาและ
ตดตงระบบงาน
system documentation จะถกจดเตรยมเมออยในขนตอนการวเคราะหระบบ
(systems analysis) และขนตอนการออกแบบระบบ (systems design)
ภายในเอกสาร ประกอบดวย :-
Data dictionary entries
Data flow diagrams
Object models
Screen layouts
Source documents
Initial systems request
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 70
Documentation
Operations documentation
ทวไปจะใชในระบบงานทมการใชเครอง minicomputer หรอ
mainframe ประมวลผลแบบศนยกลาง (centralized processing)
และมการท างานเปนแบบ batch
ภายในเอกสารจะแสดงถงงานทอยในความรบผดชอบของ operator
เวลาและวธการ run programs
ตวอยางการท างาน อาจมการท า program run sheet ซงบอกถง
สารสนเทศทตองการในการประมวลผลและการแจกจาย output ให
หนวยงานหรอแผนกทเกยวของ
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 71
Documentation
User documentation : เอกสารผใช ประกอบดวย
ภาพรวมของระบบ เอกสารประกอบ เชน Source document พรอมตวอยาง เมน และหนาจอการท างานในการน าขอมลเขา รายงานพรอมตวอยาง ความปลอดภยและหลกฐานขอมลเพอตรวจสอบ (Audit trail) สวนการท างานในการน าขอมลเขา การแสดงผล และการประมวลผล
วธการขอเปลยนแปลงความตองการและปญหาทม ตวอยางของขอยกเวนและสถานการณทเกดขอผดพลาด ค าถามทถกถามบอย (FAQ) ค าอธบายสวนชวยเหลอและวธการส าหรบการปรบปรงคมอ
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 72
Documentation
User documentation Online documentation จะชวยใหผใช
สามารถใชงานระบบไดอยางเตมทและลดความตองการในการขอความชวยเหลอโดยตรงจากแผนก IT Context-sensitive Help Interactive tutorials Hints and tips Hypertext Interactive tutorials
การจดท าเอกสารสวนใหญจะเปนคมอการใชงานระบบ (user manual)
นกวเคราะหระบบสามารถจดเตรยมเอกสารและใหผใชรวมพจารณาเพอจดท าเปนคมอการใชงานระบบ
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 73
Conclusion
Forms/Reports Design
User Interface Design
Documentation
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสงขลานครนทร 74
References
อาจารยภทราพร วรนทรเวช, ภาควชาคอมพวเตอรธรกจ
มหาวทยาลยสยาม
