การออกแบบส่วนต่อประสาน - Kasetsart...

การออกแบบสวนตอประสานวชาเทคโนโลยคอมพวเตอรและสารสนเทศ

1

Thursday, March 15, 12

สวนตอประสาน (Interface)• ระบบสารสนเทศจาเปนตองมการตดตอกบผใชผาน

ทางสวนตอประสาน• รบขอมลเขา และ แสดงผลลพธทได

• การออกแบบทดจะชวยใหผใชใชงานไดสะดวกและไมเกดความเขาใจผดพลาด

• ปจจบนนยมใชลกษณะของกราฟฟก (GUI) และใชเมาสในการรบขอมลเขา

• ในอดตผใชตองพมพคาสงผานทาง command line

2

Thursday, March 15, 12

ตวอยาง

คาสง

3

Thursday, March 15, 12

การออกแบบสวนตอประสานเพอนาขอมลเขา

• วตถประสงคของการออกแบบ• เพมความเรวในการนาขอมลเขาสระบบ เชน นา

เครองอานบารโคดมาใชแทนการพมพรหสสนคา• ลดความผดพลาดในขนตอนการนาขอมลเขา ดง

นนออกแบบควรใหผใชพมพนอยทสด• ยนยนความมตวตนของผใช เชน ใชบตร RFID

หรอ ใชการตรวจสอบลายนวมอ

4

Thursday, March 15, 12

การออกแบบสวนตอประสานเพอนาขอมลเขา

• หลกการทวไป• พยายามใหผใชกรอกขอมลนอยทสด• กาหนดคาเรมตนของขอมล (default value)

• ระบหนวยของขอมลใหชดเจน• เขยนขอความอธบายขอมลทจะนาเขา• เตรยมสญลกษณพเศษใหพรอม เชน xxx-xxx-xxx

• ควรมสวนชวยเหลอระหวางผใชปอนขอมล

5

Thursday, March 15, 12

หลกการออกแบบ1. The principle of user profiling

2. The principle of metaphor

3. The principle of feature exposure

4. The principle of coherence

5. The principle of state visualization

6. The principle of shortcuts

7. The principle of focus

8. The principle of grammar

9. The principle of help

10. The principle of safety

11. The principle of context

12. The principle of aesthetics

13. The principle of user testing

14. The principle of humility

A Summary of Principles for UI Desing by Talin - http://www.sylvantech.com/~talin/projects/ui_design.html6

Thursday, March 15, 12

User Profiling

• รวาผใชคอคนกลมไหน• เปาหมายของผใชคออะไร

• ผใชตองการอะไร

• ความสามารถและประสบการณของผใช

• โปรแกรมทดกบคนกลมหนงอะไรจะไมเหมาะกบคนอกกลมกได

7

Thursday, March 15, 12

Metaphor

• นาลกษณะของระบบทผใชคนเคยมาใช• เชนปมเลนและหยดของเครองเลนเทป

• การใชตองคานงดวยวา metaphor ทใชนนเปนแบบเฉพาะกลมหรอไม

• ในกรณทเราสามารถออกแบบการใชงานทดกวากไมจาเปนตองทาตาม metaphor

8

Thursday, March 15, 12

Feature Exposure• ทาใหผใชเหนไดชดเจนวาโปรแกรมทาอะไรไดบาง• Myers-Briggs type indicator แบงคนเปน 2 แบบ

• Intuition เชอในขอมลทเปนนามธรรมและทฤษฎ ซงไดจากการวเคราะหจากบรบทหรอขอมลทเกยวของ

• Sensing เชอในขอมลทเหนแจมแจง เปนตวเปนตน

• ระดบการซอนของสวนตอประสาน• Toolbar < Menu < Submenu < Dialog box <

Secondary dialog box < Advanced user mode < Scripted functions

9

Thursday, March 15, 12

Coherence

• พฤตกรรมของระบบควรมความสอดคลองกนทงภายในและภายนอก

• ภายใน : เชน การแกไขคณลกษณะ ส และ ขนาดควรใชรปแบบเดยวกน

• ภายนอก : เชน โปรแกรมบนระบบ Windows ควรมลกษณะทเหมอนโปรแกรมอนๆ บนระบบ Windows

10

Thursday, March 15, 12

State Visualization• การเปลยนแปลงสถานะควรแสดงใหผใช

สงเกตไดจากหนาตาของโปรแกรม• หนาตางทกาลงใชงานควรแตกตางกบหนาตางท

ไมไดใชงาน

• หากโปรแกรมกาลงคานวณอยควรแสดงสถานะใหผใชทราบ

11

Thursday, March 15, 12

Shortcut

• เสนอทางเลอกในเขาถงฟงกชนการใชงานทงแบบชดเจนและแบบยอ

• แบบชดเจนสาหรบผใชเรมตน

• แบบยอสาหรบผใชทมความชานาญแลว

12

Thursday, March 15, 12

Focus

• สวนตอประสานบางชนดจะสงเกตเหนไดงายกวาสวนตอประสานชนดอน

• ผใชจะสงเกตเหนตวชของเมาสจะงาย ดงนนการแสดงสถานะของโปรแกรมอาจแสดงผานทางตวชได ตวอยางเชน นาฬกาทราย และ เครองมอตางๆ สาหรบโปรแกรมแตงภาพ

13

Thursday, March 15, 12

Grammar• สวนตอประสานเปรยบเหมอนภาษา ดงนน

ควรทราบวากฎทนยมใชกนอยคออะไร

• ไวยากรณทใชกนม 2 แบบคอ• Action -> Object: เลอกการกระทากอน แลวจง

เลอกวตถทตองการทา เชน การระบายส

• Object -> Action: เลอกวตถกอน แลวจงเลอกการกระทาทตองการ เชน การลบและคดลอกขอความ

14

Thursday, March 15, 12

Help

• เขาใจถงการชวยเหลอทผใชตองการได• Goal-oriented: โปรแกรมทาอะไรไดบาง?

• Descriptive: มนคออะไร?

• Procedural: ทาอยางไร?

• Interpretive: ทาไมถงเปนแบบน?

• Navigational: เราอยทไหน?

15

Thursday, March 15, 12

Safety• ทาใหผใชมนใจในการใชโปรแกรมดวยระบบ

ปองกนความผดพลาด• โดยปกตมนษยจะมขอบเขตของความเสยง ถา

มากไปจะกลว ถานอยไปจะเบอ (envelop of risk)

• ผใชใหม ควรไดรบความปกปองจากการทางานผดพลาด (เชน มคาถามยนยนการใชงาน)

• ผใชทมประสบการณ ไมตองการการปกปองมากเกนไปเพราะจะทาใหผใชราคาญ

16

Thursday, March 15, 12

Context• จากดใหผใชทางานเฉพาะในบรบทหนง

เทานน ถาไมมเหตผลทดพอ• การทางานในสองบรบทพรอมกนอาจทาใหผใช

สบสนได เชน กลองขอความ การเลอกตวกลองขอความ กบ ตวหนงสอในกลองขอความ ไมสามารถทาพรอมกนได

• ถามการเปลยนบรบทแบบกระทนหน ควรแจงใหผใชทราบถงบรบทเดมดวย

17

Thursday, March 15, 12

Aesthetics

• สรางโปรแกรมใหสวยงาม• อยางนอยอยาทาใหโปรแกรมดนาเกลยด

• เชน ปมทอยในกลมเดยวกนควรมขนาดเทากน

18

Thursday, March 15, 12

User Testing

• ขอความชวยเหลอในการตรวจสอบโปรแกรมจากผใช โดยเฉพาะในจดยากตอการตรวจสาหรบนกพฒนา

• เลอกผทดสอบทไมรจกโปรแกรมมากอน

• บอกรายละเอยดในการใชโปรแกรมกอนเรมทดสอบ

• ในระหวางทดสอบจะไมมการชวยเหลออก

19

Thursday, March 15, 12

Humility

• รบฟงดวยวาคนทวไปเขารสกอยางไร• นกพฒนาโปรแกรมสวนใหญไมชอบเขาสงคม

อาจจะไมรวาผใชใชโปรแกรมแลวรสกอยางไร

• นาความเหนของคนทวไปมาใชปรบปรงโปรแกรม

• แตการฟงความเหนของคนทวไปมากเกนไปกไมด เพราะสงทผใชสวนใหญตองการคอสงทตนเองคดไมถง

20

Thursday, March 15, 12

รปแบบการนาขอมลเขา• กลองขอความ (text box)

• ปมทางเลอก (radio button)

• กลองทางเลอก (check box)

• รายการใหเลอก (list box)

• ชองเลอกแบบดงลง (drop-down list)

• ชองเลอกแบบดงลงทแกไขขอความได (combo box)

• ชองเลอกแบบแสดงทละรายการ (spin box)

• ปมกด (button)

21

Thursday, March 15, 12

Text boxขอความแบบปกตบรรทดเดยว

ขอความสาหรบรหสลบ

ขอความแบบปกตหลายบรรทด

ขอความแบบพเศษหลายบรรทด

ปายกากบ

ขอความแบบชวยเตม (auto complete)

22

Thursday, March 15, 12

Radio button

- ผใชสามารถเลอกรายการไดเพยงรายการเดยวเทานน- เชน ขอมล เพศ สถานภาพสมรส

23

Thursday, March 15, 12

Check box

- ผใชสามารถเลอกรายการไดมากกวาหนงรายการ- เชน ขอมล งานอดเรก ความสามารถพเศษ

24

Thursday, March 15, 12

List box

- ควรใชในกรณทมพนทมากเพยงพอ- ขนาดความกวางควรกวางเทากบรายการทยาวทสด- ขอมลควรถกเรยงลาดบ- ถาขอมลไมมลาดบ ควรใหรายการทมโอกาสถกเลอกมากทสดใหอยบนสด

25

Thursday, March 15, 12

Drop-down list

- คณสมบตเหมอนกน list box - ใชในกรณทมพนทจากดและรายการขอมลมไมมากเกนไป

26

Thursday, March 15, 12

Combo box

- เปนการผสมกบระหวาง drop-down box กบ text box- เชน ชองกรอง URL ของ web browser

27

Thursday, March 15, 12

Spin box

- เหมอนกบ list box แตจะแสดงแคหนงรายการ- ผใชสามารถเลอกรายการโดยการคลกลกศรขนหรอลง- นยมใชสาหรบขอมลประเภท ตวเลข วน และ เวลา

28

Thursday, March 15, 12

Button

- ปมกด สาหรบสงใหโปรแกรมเรมตนทางาน เชน คนหาคา เปดไฟล บนทกขอมล หรอ ใชในการตอบตกลงหรอปฏเสธการทางานบางอยาง

29

Thursday, March 15, 12

อนๆ

เลอกวนท เลอกส เลอกแบบอกษร

30

Thursday, March 15, 12

การควบคมความถกตอง

- ตรวจสอบการปอนขอมลไมครบ- ตรวจสอบรปแบบของขอมลทปอน- ตรวจสอบคาสงสดและตาสดของขอมล

31

Thursday, March 15, 12

การออกแบบลาดบการนาขอมลเขา

ลาดบการนาขอมลเขาควรเรยงจากซายไปขวา และ จากบนลงลาง

32

Thursday, March 15, 12

การออกแบบเมนคาสง

pull down menu pop up menu

33

Thursday, March 15, 12

โปรแกรมชวยในการออกแบบ

Pencil 1.2 for Firefox34

Thursday, March 15, 12

การออกแบบสวนตอประสานเพอแสดงผลลพธ

• ควรมชองทางใหผใชสงพมพออกทางเครองพมพและบนทกลงไฟล เชน ใบเสรจรบเงน ใบสงซอ เปนตน

• ควรมการตรวจสอบสทธในการเรยกดขอมล

• สามารถเลอกกรอบเวลาทตองการแสดงได

35

Thursday, March 15, 12

ตวอยางการออกแบบ

header

body

footer

36

Thursday, March 15, 12