การออกแบบและพัฒนาซอฟต์�แวร�

บทท�� 4 การออกแบบส่�วนน�าเข้�าและส่�วนแส่ดงผลปริ�ญญา น้�อยดอน้ไพริ

สาขาวิ�ชาวิ�ทยาการิคอมพ�วิเตอริ� คณะวิ�ทยาศาสตริ�และเทคโน้โลย�

มหาวิ�ทยาล!ยริาชภั!ฏส$ริาษฎริ�ธาน้�

การออกแบบส่�วนน�าเข้�าและส่�วนแส่ดงผล

• ข้ยะเข้�ามาก!ได�ข้ยะออกไป “Garbage in garbage out : GIGO)

• คุ%ณลกษณะส่�าคุญข้องการน�าเข้�า– คุวามพัร�อมข้องข้�อม)ล (availability)– คุวามถู)กต์�องและคุวามส่มบ)รณ� (integrity)– คุวามเชื่,�อถู,อได� (authenticity)

• คุ%ณลกษณะส่�าคุญข้องส่-�งท��แส่ดงผลออกมา– คุวามเท��ยงต์รง (relevance)– คุวามคุงท�� (consistency)– ผลประโยชื่น� (benefit)

การออกแบบส่�วนแส่ดงผล• ส่,�อท��ใชื่�– เคุร,�องพั-มพั�– หน�าจอ– Plotter– Computer Output Microfilm (COM)– เส่�ยง– Device

ส่�วนแส่ดงผลท��เป2นรายงาน• Hard copy เป2นการแส่ดงผลออกมาเป2น

รายงาน• Soft copy เป2นการแส่ดงผลทางหน�าจอ

เป2นการแส่ดงผลแบบชื่�วคุราว– CRT (cathode ray tube)– VDT (Video display terminal)

การออกแบบการพั-มพั�รายงาน• รายงานต์ามคุวามต์�องการ– รายงานท��ม�รายละเอ�ยดคุรบ (Detail reports)– รายงานแบบม�เง,�อนไข้ (Exception reports)– รายงานส่ร%ป (Summary reports)

• รายงานต์ามการแจกจ�ายให�แก�ผ)�ใชื่�– รายงานภายในองคุ�กร (Internal reports)– รายงานภายนอน (External reports)

การออกแบบหน�าจอส่�วนแส่ดงผล• การออกแบบทางหน�าจอ• การออกแบบต์วอกษร• การออกแบบร)ปกราฟส่�วนแส่ดงผล• การออกแบบเอฟเฟกซ�พั-เศษในการแส่ดงหน�าจอ

การออกแบบส่�วนน�าเข้�า• ว-ธี�การในการน�าเข้�า– แบบชื่�วงเวลา (Batch)– แบบต์ลอดเวลา (Online)

อ%ปกรณ�ในการน�าเข้�าข้�อม)ล• Keyboard• Mouse• Touch screen• Touch-tone telephone• เคุร,�องม,อน�าเข้�าข้�อม)ลแบบกราฟฟ6ก (Graphic

input device)• เคุร,�องม,อเส่�ยง

หน�าจอแส่ดงส่�วนการน�าเข้�าข้�อม)ล

หน�าจอคุวบคุ%มการปฏิ-บต์-งาน• การใชื่�เมน)• การใชื่�หน�าจอพัร!อมท�• การรวมท8งส่องแบบเข้�าด�วยกน (Combination

screen)

หน�าจอการคุวบคุ%มการประมวลผลแบบเมน)

GUI : Graphic User Interfaces

• Window• Menu bar• Pull-down menu• Pop-up menu• Icons

ร)ปแบบข้อง GUI

• Text box• Toggle button• List box• Drop-down list box• Option buttons• Check box• Command buttons• Spin bar

หลกท�วไปในการจดการส่�วนน�าเข้�าและส่�วนแส่ดงผล

Gebhardt & Stellmacher (1978) เส่นอเกณฑ์�ใน 8 ประเด!นหลก

• คุวามเร�ยบง�าย (Simplicity)– ม�คุ�าส่�งไม�มากนก– ใชื่�ส่�วนน�าเข้�าท��เร�ยบง�าย– ใชื่�คุ�าส่�งท��ส่ 8น– ใชื่�คุ�าส่�งท��ส่,�อคุวามหมาย

• คุวามชื่ดเจน (Clarity)– ม�โคุรงส่ร�างแบบล�าดบชื่8น– ม�หน�าท��เฉพัาะก-จกรรม– ม�คุวามส่ม��าเส่มอ– แก�ไข้ป;ญหาต์รงจ%ด

• คุวามเป2นเอกลกษณ� (Uniqueness)– ม�เป<าหมายชื่ดเจน– ม�ข้อบเข้ต์ท��ก�าหนดแน�นอน

• ภาษาท��ใชื่�ได�ส่ะดวก (Comfortable language)– เป2นคุ�าส่�งท��ม�พัลง– ม�คุวามย,ดหย%�น– ใชื่�การต์อบโต์�ท��กระทดรด– ใชื่�โคุรงส่ร�างข้�อม)ลท��ง�ายต์�อการจดจ�า

• การอ�านวยคุวามส่ะดวกส่บายอ,�น ๆ ในการให�คุ�าส่�ง (Other comfort)– คุวามส่ะดวกในการน�าเข้�า– การส่�งแทรกข้ณะระบบก�าลงด�าเน-นการ– การใชื่�ภาษาข้องส่�วนแส่ดงผล– ให�คุวามส่ะดวกด�านอ,�น ๆ

• การย,นยนและการน�ามาใชื่�ใหม� (Evidence & reusability)– การย,นยน– ให�คุวามชื่�วยเหล,อ– การน�ากลบมาใชื่�ใหม�

• ม�คุวามม�นคุงในคุ�าส่�ง (Stability)– การจดการแก�ไข้ข้�อผ-ดพัลาด– ไม�บ�บบงคุบผ)�ใชื่�

• ม�คุวามม�นคุงปลอดภยในข้�อม)ล (Data security)

เกณฑ์�การจดการใส่�ข้�อม)ล• คุวามคุงท��ข้องการใส่�ข้�อม)ล• ว-ธี�การส่�งด�าเน-นการใส่�ข้�อม)ล• การลดปร-มาณส่�งการท��ผ)�ใชื่�ต์�องจดจ�า• คุวามส่มด%ลในการใส่�คุ�าข้�อม)ลเข้�ามากบการน�า

เส่นอผลลพัธี�• คุวามคุล�องต์วข้องผ)�ใชื่�ในการใส่�คุ�าข้�อม)ลเข้�ามา

เกณฑ์�การจดจอภาพั• คุวามคุงท��ข้องการน�าเส่นอ• การเส่นอข้�อม)ลท��ผ)�ใชื่�เข้�าใจได�• การลดปร-มาณส่-�งท��ผ)�ใชื่�ต์�องจดจ�า• คุวามส่มด%ลระหว�างการน�าเส่นอผลลพัธี�และการ

ก�าหนดใส่�ข้�อม)ลเข้�ามา• คุวามคุล�องต์วข้องผ)�ใชื่�ในการคุวบคุ%มการน�าเส่นอ

การกระต์%�นคุวามส่นใจข้องผ)�ใชื่�• ระดบคุวามล>ก (intensity)• การเน�นคุวามส่�าคุญ (marking)• ข้นาดและร)ปแบบ (size & fonts)• การส่ลบส่�และการกะพัร-บ (inverse video &

blinking)• การใชื่�ส่� (color)• การใชื่�เส่�ยง (audio)

ป;ญหาข้องการใชื่�กราฟฟ6ก• คุวามเบ,�อหน�าย (boredom)• คุวามโกรธีหง%ดหง-ด (panic)• คุวามอ>ดอดข้�องใจ (frustration)• คุวามส่บส่น (confusion)• คุวามไม�ส่ะดวกส่ะบาย (discomfort)

หลกการพั,8นฐานข้องการออกแบบกราฟฟ6ก

• น�าเส่นอส่�วนท��เป2นข้�อคุวาม และส่�วนท��เป2นส่ญลกษณ�กราฟฟ6กให�คุวามชื่ดเจน ส่,�อคุวามหมายว�าต์�องการให�ผ)�ใชื่�ท�าอะไร

• ออกแบบระบบท��เส่นอโคุรงส่ร�างและข้8นต์อนข้องการด�าเน-นการอย�างชื่ดเจน

• ในกรณ�ท��ผ)�ใชื่�ส่ �งด�าเน-นการไม�ต์รงต์ามข้8นต์อนการท�างาน คุวรให�ม�การเต์,อน หร,อเส่นอส่ญลกษณ�ท��ผ)�ใชื่�ทราบได�ในทนท�ว�าคุวรจะแก�ไข้อย�างไร

หลกการใชื่�ส่�บนจอภาพั• กระต์%�นคุวามส่นใจข้องส่ายต์า• ส่ร�างคุวามน�าส่นใจให�กบเน,8อหาและการน�าเส่นอ

ข้�อคุวามท��ซบซ�อนไม�น�าส่นใจ• แยกแยะคุวามแต์กต์�างข้องระบบงานท��ซบซ�อน• เน�นการจดโคุรงส่ร�างข้องระบบงานให�เข้�าใจง�ายข้>8น• เน�นเต์,อนผ)�ใชื่�ด�านต์�าง ๆ• เส่ร-มแรงปฏิ-กร-ยาทางอารมณ�ข้องผ)�ใชื่�

กฎเกณฑ์�พั,8นฐานในการใชื่�ส่�

• อย�าฟ% AมเฟBอยในการใชื่�ส่�• จ�ากดจ�านวนส่�• ใชื่�เทคุน-คุการก�าหนดคุวามหมายให�กบส่�ท��ใชื่�• เป6ดโอกาส่ให�ผ)�ใชื่�คุวบคุ%มการน�าเส่นอส่�• คุวรออกแบบโดยคุ�าน>งถู>งจอภาพัแบบส่�เด�ยว

เป2นอนดบแรก• ใชื่�ส่�ในการส่ร�างร)ปแบบ• เล,อกใชื่�ส่�ท��ต์รงกบคุวามคุาดหวงข้องผ)�ใชื่�• เล,อกจดส่�ท��น�าเส่นออย�างระมดระวง