Systems Analysis and DesignSystems Analysis and Design

การวเคราะหและออกแบบ

Interface DesignInterface Design

Chapter Chapter 1010

เนอหา

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 คอการออกแบบใหคลายส งทใชในชวตจรง

- Interface objects คอการก าหนดชอให object ตางๆบน interface

- Interface actions คอการออกแบบค าสงตางๆเชน buy กบ purchase

modify กบ change

- Interface icons คอการออกแบบ icon เชน รป diskette แทนการ save

- 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 สงเกนไป -> สารสนเทศถกแสดงออกมานอย หรอไมมเลย

การใช graphic ในการแสดงผล เชน การวาดกราฟโดยก าหนด scale ละเอยดเกนไป ท าใหสารสนเทศทไดดมากเกนจรง หรอการใช สญลกษณตาง ๆ แทนขอมลอาจดแลวไมสอถงความมาก หรอนอยของขอมล

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

EndEnd