Transcript Systems Analysis and Design - Department of Information

Systems Analysis and Design
การวิเคราะห์และออกแบบ
Interface Design
Chapter 10
เนือ
้ หา





Design principle
Design process
Navigation design
Input design
Output design
Interface


User interface เป็ นการสร ้างวิธท
ี ท
ี่ าให ้ระบบสามารถติดต่อกับ
สงิ่ ทีอ
่ ยูภ
่ ายนอกระบบ
System interface เป็ นการสร ้างวิธแ
ี ลกเปลีย
่ นข ้อมูลระบบกับ
ระบบอืน
่
Three Parts of User Interface



้
Navigation เป็ นสว่ นทีย
่ ส
ู เซอร์ใชออกค
าสงั่ ไปยังระบบให ้ทา
่ menus buttons
อะไร เชน
่ ฟอร์ม เพิม
Input วิธเี อาข ้อมูลเข ้าสูร่ ะบบ เชน
่ ลูกค ้าใหม่
่ รายงาน
Output วิธเี อาข ้อมูลให ้กับ users หรือระบบอืน
่ เชน
User Interface Design Principle
Design Principles






Layout
Content awareness
Aesthetics
User experience
Consistency
Minimal user effort
Layout Concepts


แสดง หน ้าจอ ฟอร์ม รายงาน
หน ้าจอมักจะแบ่งออกเป็ น 3 สว่ น
- Heading and Navigation area (top)
ยูสเซอร์ออกคาสงั่ ผ่าน navigation ไปยังระบบ
- Body or work area (middle)
แสดง report และ form
- Instruction or Status area (bottom)
แสดงสถานะว่ายูสเซอร์กาลังทาอะไร
Screen Layout Examples
Layout Concepts



ข ้อมูลสามารถแสดงได ้ในหลายพืน
้ ที่
จัดข ้อมูลให ้เป็ นหมวดหมู่
จัดทิศทางการไหลของฟอร์มให ้ถูกต ้อง
Screen Layout Examples
Bad Flow in a Form
Good Flow in a Form
Content Awareness



้
ให ้ยูสเซอร์ใชความพยายามน
้อยทีส
่ ด
ุ ทีจ
่ ะเข ้าใจข ้อมูลทีแ
่ สดง
ทุกๆ interface ควรมีหวั ข ้อ
เมนู ควรแสดง
- อยูท
่ ไี่ หน
- มาจากไหน


ั เจนและออกแบบอย่างดี
ทุกพืน
้ ทีค
่ วรจะชด
ั เจน
ทา caption ให ้ชด
Caption Example
Aesthetics




ั่ การทางานเและรู ้สก
ึ ชวนให ้ใช ้
Interface ต ้องมีฟังก์ชน
หลีก
่ เลีย
่ งการบีบข ้อมูลจานวนมากให ้อยูห
่ น ้าเดียว
ื ให ้เหมาะสม
ออกแบบตัวหนังสอ
ี ละรูปแบบให ้เหมาะสม
ใชส้ แ
User Experience

Interface ควรออกแบบ :
- ให ้ทัง้ users ทีม
่ ค
ี วามชานาญและไม่ชานาญ
้
- ง่ายต่อการเรียนรู ้และใชงาน
้
ั่ ทั่วไปและการแนะนา
- สมดุลระหว่างความรวดเร็วในการใชงานฟ้
งก์ชน
ั่ ใหม่
ฟั งก์ชน
Consistency



Users สามารถคาดเดาได ้ว่าอะไรจะเกิดขึน
้ ต่อไป
ลดการเรียนรู ้ซ้า
ให ้มีมาตราฐาน
- Navigation controls
- Terminology
- Report and form design
Minimize Effort

Three click rule
- users ควรจะสามารถเข ้าถึงข ้อมูลหรือการกระทาทีต
่ ้องการได ้ โดยการ
คลิ๊ กเมาท์หรือกดคียบ
์ อร์ด ไม่เกิน 3 ครัง้ นับตัง้ แต่เริม
่ ต ้นที่ main menu
User Interface Design Process
Five Step Process
Use Scenario Development



้
ขัน
้ ตอนต่างๆทีผ
่ ู ้ใชงานท
างานจนสาเร็จโดยพิจารณาจาก
เหตุการณ์จาลอง
ลิสต์ขน
ั ้ ตอนการทางาน
เขียนคาบรรยายง่ายๆผูกกับ Process ของ DFD
Interface Structure Design


เป็ นการกาหนดองค์ประกอบพืน
้ ฐานของ interface และการ
ทางานร่วมกัน
Window navigation diagram (WND)
ั พันธ์ทงั ้ หมดของ หน ้าจอ, ฟอร์ม และรายงาน
- แสดงความสม
- แสดงการเคลือ
่ นไปมาระหว่างฟอร์ม
WND Example
Interface Standard Design

้
การออกแบบองค์ประกอบพืน
้ ฐานทีใ่ ชงานทั
ว่ ไปในแต่ละ Screen
Form Report ภายในระบบ เพือ
่ ให ้มีรป
ู แบบทีเ่ หมือนกัน หรือ
เป็ นไปในทางเดียวกัน
้ วี ต
- Interface metaphor คือการออกแบบให ้คล ้ายสงิ่ ทีใ่ ชในช
ิ จริง
ื่ ให ้ object ต่างๆบน interface
- Interface objects คือการกาหนดชอ
่ buy กับ purchase
- Interface actions คือการออกแบบคาสงั่ ต่างๆเชน
modify กับ change
่ รูป diskette แทนการ save
- Interface icons คือการออกแบบ icon เชน
- Interface templates คือการออกแบบ templates ในแต่ละหน ้าจอให ้มี
รูปแบบทีเ่ หมือนกัน
Interface Design Prototyping

การสร ้างแบบจาลองของ หน ้าจอ, ฟอร์ม หรือรายงาน เพือ
่ ให ้
้ อโปรแกรมเมอร์ได ้รู ้ว่าระบบทางานอย่างไร
ผู ้ใชหรื
- Paper-base storyboard
- HTML
- Language
Storyboard Example
Interface Evaluation Methods



การประเมินการออกแบบ interface ว่าถูกต ้องครบถ ้วนตามที่
ต ้องการหรือไม่ ก่อนทีร่ ะบบจะสมบูรณ์
ควรทาขณะทีก
่ าลังออกแบบ
เทคนิคในการประเมิน
- Heuristic evaluation :ทา check list ในการตวจสอบตามรูปแบบ
้ จารณา
- Walkthrough evaluation : project team นาเสนอให ้ผู ้ใชพิ
้
- Interactive evaluation : ให ้ผู ้ใชทดลองท
ากับ prototype
- Formal usability testing :ใชกั้ บ commercial software หรือระบบ
้
ขนาดใหญ่ โดยผู ้ใชทดลองท
ากับ prototype และมีการตรวจสอบ
ความสาเร็จในการทดลองใช ้
Navigation Design
Basic Principle

ให ้คิดว่า users
้
- ไม่จาเป็ นต ้องอ่านคูม
่ อ
ื ก็ใชงานได
้
- ไม่จาเป็ นต ้องอบรม
- ไม่จาเป็ นต ้องมีคนชว่ ยเหลือ

ั เจนและวางในตาแหน่งทีเ่ ข ้าใจได ้
ทุกๆการควบคุมจะต ้องชด
Basic Principle

ป้ องกันความผิดพลาด
- จากัดการเลือก
้ ได ้)
- ไม่แสดงคาสงั่ ทีไ่ ม่ใช ้ (หรือทาให ้ใชไม่
- มีข ้อความให ้ยืนยันการกระทาทีไ่ ม่สามารถยกเลิกได ้


ง่ายต่อการยกเลิก (recovery) ถ ้าเกิดทาผิดพลาด
เรียงลาดับไวยากรณ์ให ้คงที่
Type of Navigation Control

Languages
- Command language
- Natural language


Menus
Direct Manipulation
Command-Language Interface


้
ั่ ด ้วยพิมพ์ชด
Users ใชงานแอพพลิ
เคชน
ุ สงั่
่ Dos, Unix, SQL เป็ นต ้น
เชน
Natural-Language Interfaces

ื่ สารกับคอมพิวเตอร์ด ้วยภาษาธรรมชาติ
Users สามารถสอ
A Menu Interface





แสดงรายการแต่ละหัวข ้อให ้เลือก
จากัดทางเลือกของผู ้ใช ้
Nested menu คือ เมนูทส
ี่ ามารถแสดงอีกเมนูหนึง่ ได ้
สามารถสร ้าง Hot key ให ้กับเมนูได ้
จัดกลุม
่ หัวข ้อทีเ่ กีย
่ วข ้องกันให ้อยูใ่ นเมนูเดียวกัน
Advantages of Nested Menus



ลดการแสดงรายการบนหน ้าจอ
จากัดการแสดงเมนูทางเลือกที่ users ไม่สนใจ
มีความรวดเร็วในการถึงโปรแกรม
Text-based Menu Example
Common Type of Menus
Image Map
Direct Manipulation

การออกคาสงั่ โดยตรงกับ interface object
- ใช ้ keyboard, mouse, joystick
่ การเปลีย
- เชน
่ นขนาดของ font, การลากไฟล์เพือ
่ ก็อปปี้ ,การเลือ
่ น Slide
bar
Messages



วิธท
ี รี่ ะบบจะตอบสนองกับ users และแจ ้งข ้อมูลสถานะของการ
ติดต่อ
ั เจน, ถูกต ้อง และสมบูรณ์
ต ้อง ชด
ั ท์เทคนิค ความหมายเชงิ ลบ
หลีกเลีย
่ งคาย่อ ศพ
่ “Are you sure you do not want to continue ?” แทนด ้วย
- เชน
“Do you want to quit ?”
Messages Types

Error message
- ควรอธิบายถึงปั ญหาและวิธแ
ี ก ้ไข
- ควรมี error number




Confirmation message
Acknowledgement message
Delay message
Help message
Input Design
Online versus batch Processing



Online processing immediately records the transaction in
the appropriate database
Batch processing collects inputs over time and enters
them in the system at one time in a batch
Batch processing simplifies data communications and
other processes, but means that inventory and other
reports are not accurate in real time
Capture Data at the Source




้
ลดการซ้าซอนของงาน
ลดเวลาการโปรเซส
ลดต ้นทุน
ลดโอกาสของความผิดพลาด
Source Data Automation

เทคโนโลยีทน
ี่ ามาใช ้
-
Bar code readers
Optical character recognition
Magnetic stripe readers
Smart cards
Minimize Keystrokes



ไม่ให ้คียข
์ ้อมูลทีร่ ะบบสามารถใสเ่ องได ้
แสดงรายการให ้เลือกดีกว่าคียข
์ ้อมูลเอง
ใชค่้ าดีฟอลท์ทก
ุ ทีท
่ เี่ ป็ นไปได ้
Types of Inputs



Text
Numbers
Selection boxes
GUI Controls for Input








Text boxes
Check boxes
Option or radio buttons
List and drop-down list boxes
Sliders and spin buttons
Image maps
Text area
Message boxes
Output Design
Output Design Objectives

Output คือรายงานทีร่ ะบบสร ้างออกมา
-
ตอบสนองตามวัตถุประสงค์
มีความหมายต่อ users
จัดทาได ้ทันเวลา
ลดความโน ้มเอียง
Output Bias

ความโน้มเอียงของสารสนเทศเกิดจาก
 การเรียงลาดับ
 ตามตัวอักษร
 ตามวันเดือนปี
่ ตา่ สุด มากทีส
 ตามค่าของข ้อมูล เชน
่ ด
ุ เป็ นต ้น
่ การแสดงรายชอ
ื่ Supplier ตามตัวอักษร โดยไม่ได ้แสดงราคาขายของ
เชน
ิ ค ้า ผู ้ใชอาจเข
้
สน
้าใจว่าเรียงตามราคาขายตา่ สุดก็ได ้ ดังนัน
้ ควรแสดงค่า
้
ของข ้อมูลทีใ่ ชในการเรี
ยงลาดับด ้วย
Output Bias

ความโน้มเอียงของสารสนเทศเกิดจาก
่ ต ้องการแสดงเฉพาะทีล
 การกาหนด limit ในการแสดงข ้อมูล เชน
่ ก
ู หนีท
้ ี่
มียอดหนีม
้ ากกว่า 200,000,000 ซงึ่ อาจไม่มส
ี ารสนเทศถูกแสดงออกมา
เลยก็ได ้
 การตัง
้ limit ตา่ เกินไป -> สารสนเทศถูกแสดงออกมามากเกินไป
 การตัง
้ limit สูงเกินไป -> สารสนเทศถูกแสดงออกมาน ้อย หรือไม่ม ี
เลย

่ การวาดกราฟโดยกาหนด scale
การใช ้ graphic ในการแสดงผล เชน
ละเอียดเกินไป ทาให ้สารสนเทศทีไ่ ด ้ดูมากเกินจริง หรือการใช ้
ั ลักษณ์ตา่ ง ๆ แทนข ้อมูลอาจดูแล ้วไม่สอ
ื่ ถึงความมาก หรือน ้อยของ
สญ
ข ้อมูล
Bias in Graphs
Strategies to Avoid Output Bias
ข้อแนะนาในการหลีกเลีย
่ งความโน้มเอียงในการแสดงสารสนเทศ




หาแหล่งทีม
่ าของความโน ้มเอียงของสารสนเทศ
้
เปิ ดโอกาสให ้ผู ้ใชระบบเข
้ามามีสว่ นร่วมกับการออกแบบ เพราะผู ้ใช ้
ระบบรู ้จักธรรมชาติของข ้อมูลมากกว่า
้
ระบบต ้องมีความยืดหยุน
่ พอสมควร เพือ
่ ให ้ผู ้ใชสามารถปรั
บแก ้ ให ้
สารสนเทศเป็ นไปตามความต ้องการได ้
Output Type




Detail Report
Summary Report
Turnaround Document
Graphs
Graphs

้ ราฟเมือ
เลือกใชก
่
-
สรุปผลข ้อมูลตัวเลขนัน
้
แสดงแนวโน ้มการเปลีย
่ นแปลงของข ้อมูลตัวเลขนัน
้
เปรียบเทียบข ้อมูลตัวเลขทีม
่ ค
ี า่ แตกต่างกัน
้
ใชแสดงแนวโน
้มการเปลีย
่ นแปลงเพือ
่ การพยากรณ์คา่ ตัวเลขในอนาคต
Graphs
Output Forms

Output สามารถอยูใ่ นรูปแบบ
-
Print
Screen
Video, Audio, Animation
Electronic output :email, fax, webpage
Output Forms

ความแตกต่างของรูปแบบ Output
-
Speed
Cost
Portability
Flexibility
Storage and retrieval possibilities
End