ส่วนจัดการสื่อประสานผู้ใช้(user...

สวนจ ดการส อประสานสวนจ ดการส อประสานผใช ผ ใช

(User Interface (User Interface Management)Management)

หวขอทศกษา

1. ความหมายของสอประสานกบผใช2. องคประกอบของสอประสานกบผใช3. ระบบจดการสอประสานกบผใช (User Interface

Management System)

4. การออกแบบสอประสานกบผใช (User Interface Design)

5. รปแบบของสอประสานกบผใช (User Interface Mode)

6. การออกแบบการจดวางและการแสดงผล (Layout and Display Design)

7. รปแบบอนๆ ของสอประสานกบผใช8. ระบบสารสนเทศภมภาค (Geographic

Information System : GIS)

Where is the Design phase in SDLC?

Design Phase-User Interface design (Input and Output)-Database design (Logical and Physical)

1. ความหมายของสอประสานผใช

สอประสานผใช (User Interface) หมายถงสอกลางในการตดตอและโตตอบระหวางผใชกบ

ระบบคอมพวเตอร Hardware ไดแก เมาส คยบอรด ลำาโพงเครองพมพ

Software ไดแก ลกษณะการแสดงผลทาจอภาพและทำาใหเกดการปฏสมพนธ

อดต การแสดงผลลพธทางจอภาพเปนแบบรรทดคำาสง

ปจจบน “การแสดงผลลพธเปนแบบ สอประสาน แบบกราฟก (Graphic User Interface : GUI”

การใชเสยงพด (Natural Language)

ความหมายของส อประสานกบผ ใช

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

ซอฟตแวร

Command LineGraphic

User Interface(GUI)

NaturalLanguage

User Interface

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

2. องคประกอบของส วนจดการส อประสานกบผ ใช

2.1 องคประกอบในกลมผใชระบบ1. องคความร (Knowledge)

2. ภาษาการกระทำา (Action Language)

3. ปฏกรยาโตตอบของผใช (User’s Reaction)

2.2 องคประกอบในกลมระบบคอมพวเตอร

1. บทโตตอบ (Dialog)

2. การประมวลผลของคอมพวเตอร (Computer Processing)

3. ภาษาการนำาเสนอ (Presentation Language)

องคประกอบของส อประสานกบผ ใช

Knowledge

Action Language

Task

System

Ap

plic

atio

n P

roc

ess

Presentation Language

Generate the display

Interpret the user input

Interpret the display

Process the content

Plan and take action

ระบบจดการส อประสานกบผ ใช (User Interface Management System: UIMS)

ซอฟตแวรททำาหนาทเปนตวกลางในการจดการสอประสานทจะนำาเสนอผลลพธทไดจากการประมวลผลของระบบสนบสนนการตดสนใจไปยงผ

ใชในรปแบบตาง ๆทเหมาะสม โดยจะตดตอกบ ระบบจดการฐานขอมล ระบบจดการฐานแบบ

จำาลอง และระบบจดการฐานองคความร เพอนำาขอมลทประมวลผลไดตามคำาสงของผใชมาแสดงผล

การออกแบบสอประสานกบผ ใช (User Interface Design)

การใชงานจรงของผใช เวลาในการเรยนรระบบ ความสามารถในการใชรวมกบระบบอนๆ

ขอผดพลาดทอาจเกดขน ความสามารถของเครองคอมพวเตอร

ระดบความตองการของผใช

มาตรฐานการใชคำาสง

ความงายในการใชงานระบบ

การรบ และสงออกขอมลจากระบบ

ออกแบบไอคอน และ สญลกษณตาง ๆทเหมาะ

สม การออกแบบหนาจอท

สวยงาม นาใช ลำาดบขนตอนการทำางานไมซบซอน

สงท เราจ ำาเปนต องค ำานงถ งการออกแบบคอส งท เราจ ำาเปนต องค ำานงถ งการออกแบบคอ

ความสามารถของระบบจดการสอประสานกบผใช

1. รองรบเทคโนโลยดานกราฟกของสอประสานผใช(GUI)

2. รองรบอปกรณนำาเขาขอมลไดหลายประเภท3. รองรบการแสดงผลและการใชงานอปกรณแสดง

ผลขอมลตางๆ ได4. มความยดหยน และสามารถปรบระบบไดรวดเรว5. ชวยเกบขอมลเขา-ออกไดอยางมประสทธภาพ6. สามารถรองรบการแสดงในลกษณะภาพกราฟก

3 มตทมสสนสวยงาม7. แสดงขอมลพรอมกนหลายหนาตางและหลายรป

แบบได8. การแนะนำาผใชผานกระบวนการปอนขอมลเขา

การออกแบบสวนนำาเข าข อมล(Input)

วตถประสงคหลกของการออกแบบขอมลเขา เลอกวธการนำาเขา และปอนขอมลเขาทเหมาะสม ลดปรมาณขอมลเขา ออกแบบหนาจอปอนขอมลทสวยงาม นาสนใจ ใชการตรวจสอบความถกตอง ชวยลดความผดพลาด

ของขอมลเขา ออกแบบองตามเอกสารตนฉบบทตองการ ใชการควบคมสำาหรบการนำาขอมลเขาทมประสทธภาพ

4. การออกแบบสอประสานกบผ ใช (User Interface Design)ผออกแบบสอประสานกบผ ใช ควรค ำาน งถ งส ง

ตอไปน1. คำาน งถ งขณะทผ ใช ก ำาล งปฏบ ต งานจร ง

ก บระบบ2. คำาน งเวลาทใช ในการเร ยนร ระบบ3. ความสามารถรอบดานทต องปร บใหเข า

กบระบบอนๆ ด วย4. คำาน งถ งข อผดพลาดทเก ดข นโดยตวผ ใช

เอง5. คำาน งถ งค ณภาพของเคร องม อท ผ ใช จะ

หยบใช6. สามารถใชก บเคร องคอมพวเตอร ของผ

ใช ได อย างลงตว7. คำาน งถ งระด บความตองการของผใช

8. คำาน งถงความอ อนลาของระบบทเก ดจากการใชตดต อก นเป นเวลานาน

9. คำาน งถงมาตรฐานของการใชค ำาส งท ตองม ความเหมอนกน

10. คำาน งถงความสนกสนานเม อใชงานระบบอย11. การเลอกใชอ ปกรณ Input/Output ทด 12. การออกแบบหนาจอการทำางานใหสวยงาม ด

น าใช13. ลำาด บข นตอนการใชโปรแกรมไมซ บซอน14. รองร บสารสนเทศทผานเข า -ออกอยางเหมาะ

สม15. พจารณาเล อกใชไอคอนและส ญลกษณให

เหมาะสม16. ผใช ต องเข าใจร ปแบบการแสดงผล

สารสนเทศไดอย างง ายดาย

ร ปแบบของสอประสานกบผ ใช (User Interface Mode)

การโตตอบดวยคำาสง (Command Language Interaction)

การโตตอบดวยเมนคำาสง (Menu Interaction) การโตตอบดวยแบบฟอรม (Form Interaction) การโตตอบดวยการทำางานเชงวตถ (Object-

Based Interaction) การโตตอบดวยภาษามนษย (Natural Language

Interaction)

การโต ตอบดวยค ำาส ง (Command Language Interaction)

การโตตอบกบระบบโดยทผใชตองพมพคำาสงลงในชอง ปอนคำาสง เพอกระตนใหระบบทำางาน เชน ระบบปฏบตการ

DOS, UNIX เปนตน

5.2 การโตตอบดวยเมนคำาสง (Menu Interaction)

เปนการโตตอบกบระบบดวยเมนคำาสงใหผใชเลอก คำาสงใดๆ เพอตดตอกบระบบโดยผใชไมตองปอน

คำาสงเอง Pull Down Menu Pop-up Menu

การโตตอบดวยเมนค ำาส ง (Menu Interaction)

1122

Pull-Down Menu Pop-Up Menu

Pull Down Menu เปนเมนทแสดงตวเลอกของรายการคำาสง โดยแบงสวนรายการเมนคำาสงออกเปนกลมๆ

Pop-up Menu เปนเมนคำาสงทแสดงรายการคำาสง โดยผใชทำาใหเมนปรากฎได โดยการนำาเมาไปวางท

ขอความ/ ออปเจค แลวคลกขวา

1. คำาทสอความหมายชดเจน2. ในกรณทเปนภาษาองกฤษ ควรใชตวพมพใหญ

หรอตวพมพเลกตามความเหมาะสม3. ควรจดกลมคำาสงทเกยวของกนไวในกลมเดยวกน4. ไมควรมจำานวนเมนคำาสงมากเกนไป5. ควารมเมนยอยสำาหรบเมนคำาสงทมการทำางาน

ยอยภายในมาก6. ควรออกแบบใหมแถบสปรากฎทเมนคำาสงทถก

เลอก

หลกเกณฑในการออกแบบเมนค ำา สง ม ดงน

5.3 การโต ตอบดวยแบบฟอรม (Form Interaction)

เปนการโตตอบทผใชตองปอนขอมลลงในชองวางทอยในแบบฟอรทแสดงทางหนาจอ

คอมพวเตอร ซงมลกษณะคลายกบการกรอกแบบฟอรมลงบนกระดาษ

เปนการนำาเขาขอมลเขาสระบบหรอเพอนำาเสนอสารสนเทศ(ผลลพธ) ของระบบกได

การโต ตอบกบระบบดวยแบบฟอรม

การโตตอบดวยแบบฟอร ม(Form Interaction)

ผใชระบบจะตองปอนขอมลลงในชองวางทอยในแบบฟอรมทแสดงทาง

หนาจอคอมพวเตอร ซงมลกษณะคลายกบการกรอกแบบฟอรมลงกระดาษ

5.4 การโต ตอบเชงว ตถ (Object-Based Interaction)

เปนการโตตอบทใชกบระบบสญลกษณ เปนตวแทน คำาสงในการปฏบตงาน เชน ไอคอน (Icon)

การโต ตอบกบระบบเชงว ตถ ด วยไอคอน

การโตตอบดวยการทำางานเช งว ตถ (Object-Based Interaction)

เปนการโตตอบกบระบบทใชสญลกษณ ใชรปภาพแทนคำา สงทำางาน หรอเรยกวา “ ไอคอน (Icon)”

5.5 การโต ตอบดวยภาษามนษย (Natural Language Interaction)

เปนการโตตอบกบระบบดวยการใชเสยงพดของผ ใชระบบ ไมวาจะเปนการนำาขอมลเขาหรอออกจาก

ระบบ ผมพรอมทจะท ำางานแล ว

ผมตองการเช คe-mail

ตกลง ค ณตองการเร มท ำางานใดกอน

คณไดร บอ เมลใหม ท งหมด 10 ฉบบ

การโตตอบดวยภาษามนษย (Natural Language Interaction)

Check E-mail

You got 10 E-mail

Read First E-mail

E-mail From … Subject …

Detail …

การออกแบบการจดวางและการ แสดงผล (Layout and Display

Design)

การจดจอภาพคอมพวเตอร การเชอมโยงการปอนขอมลแตละราย โครงสรางของการปอนขอมล (Structure Data

Entry) การตอบสนองของระบบ (Providing Feedback) การแสดงสวนชวยเหลอ (Help) การแสดงผลแบบมสและขาวดำา

6.1 การจดจอภาพคอมพวเตอร

Body Zone

Title Zone

Menu Zone

Tools Zone

Message/Status Zone

Pop-up Zone เป นโซนทซ อยในระบบไมปรากฎใหผ ใช เห น สำาหร บแสดง Dialog Box

การจดจอภาพคอมพวเตอร Title ZoneTitle Zone

Menu ZoneMenu Zone

Tools ZoneTools Zone

Body ZoneBody Zone

Message/Status Message/Status ZoneZone

6.2 การเช อมโยงการปอนขอม ลแต ละรายการ เปนการเชอมโยงการปอนขอมลอยางเปนลำาดบสอดคลองกนไปแตละรายการ

ชวยใหผใชไมสบสน ลำาดบจะเรมจากซายไปขวา และ บนลงลาง

การเช อมโยงการป อนขอมลแต ละราย

เราตองกำาหนดลำาดบในการปอนขอมลใหสอดคลอง

ไมควรกำาหนดลำาดบสลบไปมาโดยไมมนยสำาคญ

โครงสร างของการป อนขอมล(Structure Data Entry)

การปอนขอมล (Entry) การกำาหนดคาเรมตน (Default) หนวยของขอมล (Unit) คำาอธบายตางๆ (Caption) รปแบบ (Format) การจดวาง (Justify) สวนชวยเหลอ (Help)

โครงสร างของการป อนขอมล(Structure Data Entry)

การปอนขอมล (Entry) ขอมลบางสวนทมแลวในฐานขอมล กไมควรทผใชจะ

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

กรอกขอมลเขาไปใหม

การกำาหนดคาเรมตน (Default) การกรอกขอมล เชน รหสนสต มความยาว 8 ตวอกษร

เมอกรอกครบ 8 ตวอกษร กใหทำาการเปลยนโฟกส ไปยง ฟลดอนๆ ทตองการบนทกขอมลตอไป หรอ การกำาหนดรป

แบบเมอปอนตวเลข 1000 ระบบควรมการเปลยนเปน1,000 โดยอตโนมต

โครงสร างของการป อนขอมล(Structure Data Entry)

หนวยของขอมล (Unit)

ในการกรอกขอมล หนวยของขอมลเปนสงทสำาคญ มาก เชน ระบบตองการใหบนทกขอมลมหนวยเปน

กโลกรม แตนสต มขอมลเปนตน กตองเปลยนแปลงให เหมาะสม และถกตองตามความตองการของระบบ

คำาอธบายตางๆ (Caption)

เราตองมการเขยนคำาอธบายตางๆ ใหผใชทราบวา ขอมลในฟลดน จดเกบขอมลใด สามารถทำาไดโดยการ เขยนคำาอธบาย หรอ ฉลาก กำากบไว

โครงสร างของการป อนขอมล(Structure Data Entry)

รปแบบ (Format) การจดเรยงลำาดบการกรอกขอมล การกำาหนดคำา

อธบาย และสวนอนๆ ตองมการกำาหนดใหอยในรปแบบทเปนมาตรฐานเดยวกน

การจดวาง (Justify) การจดวางตองสวยงาม เปนระเบยบ ใชงานงาย

สวนชวยเหลอ (Help)

การตอบสนองของระบบ (Providing Feedback)

การแจงสถานะการทำางาน (Status Information)

การแสดงความพรอมในการรบคำาสง (Prompting Cues)

ขอความแจงเตอนเมอมขอผดพลาด (Error/ Warning Messages)

การแจงสถานะการทำางาน(Status Information)

แสดงใหผใชเหนวา ยงมการประมวลผลการทำางาน

อย เนองจากบอยครง ท เราเขยนโปรแกรม โดยไม

ไดแสดงเหนถงสถานะปจจบนวาระบบกำาลง

ทำางานอะไรอย ทำาใหผใช เขาใจผด วาเครองของเรา

แฮงค ปกตจะแสดงเปน นาฬกา

ทราย Progress bar และตวเลขแสดงเปอรเซนตการทำางาน

การแสดงความพรอมในการร บค ำาส ง(Prompting Cues)

มการแสดงขอความพรอม ใหผใชทราบ และมการ

อธบาย Field หรอCaption ทกำาหนด

ขอความแจงเต อนหร อม ขอผ ดพลาด(Error/ Warning Messages)

เราจำาเปนตองมการแจง เตอน เมอมการทำางานท

ตองการยนยน หรอใน กรณทเกดขอผดพลาดขน

เพอใหผใชไดทราบ และทำาการตดสนใจ

ผด

ถก

การแสดงส วนชวยเหลอ (Help)

สามารถเขาใจไดงาย (Simplicity) มการจดรปแบบอยางเปนระเบยบ มการแสดงตวอยาง (Show)

การแสดงผลแบบมส และขาวดำา ขอดของการแสดงผลแบบมส

สามารถแสดงความรสกได สามารถแสดงใหเหนถงจดทเนน หรอ สำาคญได

ปญหาทเกดจากการแสดงผลแบบมส ไมสามารถใชไดกบผใชทมอาการตาบอดส ความละเอยดของสอาจมการเปลยนแปลงเมอใชอปกรณ

ตางชนดกน

รปแบบอน ๆ ของส อประสานกบผ ใช กราฟก (Graphics) มลตมเดยและไฮเปอรเทกซ (Multimedia and

Hypertext) ระบบความจรงเสมอน (Virtual Reality System) การประมวลผลภาษาธรรมชาต (Natural

Language Processing)

นกพฒนาระบบตองเตร ยมความสามารถในการปอนขอม ลด งน การควบคม Cursor

1. เล อน cursor ไปยงชองป อนขอมลตอไปได ตามตองการ

2. เล อน cursor กลบไปย งชองป อนขอม ลก อนหนาน ได

3. เล อน cursor ไปยงชองป อนขอมลแรก หร อ ขอม ลส ดท าย หร อชองว างใดๆ ทตองการได

4. ในแตละช อง ผ ใชต องเล อน cursor ทละต วอ กษรได

การแกไขตวอกษรหร อข อม ล1. ลบตวอ กษรทละตวอ กษรด วย backspace

หรอ delete ได 2. ลบขอม ลท งหมดของชองป อนขอม ลใดๆ ไ3. ลบขอม ลท งหมดทม อย บนฟอร มได (ทำาให

ฟอร มว างๆ)

การใชค ำาส ง Exit1. คอ การออกจากโปรแกรม2. คอ การออกจากหนาจอการทำางานของ

แบบฟอรมใดแบบฟอรมหนง เพ อไปยงหนาจอของอกแบบฟอรมน ง

3. ตองม การโตตอบเพอสอบถามผใช ว า“ตองการบนทกข อม ลก อนออกจาก

”โปรแกรมหรอไม มส วนชวยเหลอ (Help)

1. เร ยกใช Help ขณะทก ำาลงป อนขอม ลได 2. เร ยกใช Help ขณะทอย ในหนาจอแสดง

รายงานได

6.3 โครงสรางของการปอนขอมล(Structure Data Entry) เป นการออกแบบเพอก ำาหนดรปแบบหรอล กษณะของชองทจะใชในการปอนขอมล

การปอนขอมล (Entry) ขอมลทมในฐานขอมลแลว ควรดงขอมลออกจากฐาน

ขอมลมาแสดง โดยไมตองมการปอนใหม คาเรมตน (Default)

ในกรณทชองปอนขอมลสามารถกำาหนดคาเรมตนใหกบfield ได ระบบควรแสดงคาเรมตนทนท

เมอปอนขอมลเตมขนาด ระบบควรเลอ cursor ไปยงชองปอนขอมลถดไปอตโนมต

กรณทขอมลเปนวนท ระบบควรเตรยมสญลกษณคน ระหวาง วน เดอน ป ใหอตโนมต

กรณตวเลขเปนจำานวนเงน ระบบควรเตรยมเครองหมาย จลภาค (,) ไวอตโนมต

หนวยของขอมล ควรระบหนวยของขอมลใหชดเจนสำาหรบชองปอน

ขอมลทจำาเปนตองระบ คำาอธบาย Filed หรอ คำาอธบายชองปอนขอมล

(Caption) การแสดงคำาอธบายใหเหมาะสมกบการจดวาง Layout Line Caption เบอรโทรศพท - -

Drop Caption - - เบอรโทรศพท

Delimited Characters

Check-off Boxes ประเภทการชำาระเงน เชค เงนสด

บตรเครดต

- -

รปแบบของขอมล (Format) รปแบบของขอมลทตองมสญลกษณพเศษ ระบบตองมสญลกษณพเศษใหอตโนมต

การจดวางขอมล (Justify) การจดวางขอมลประเภทตวอกษร จดชด..............................

การจดวางขอมลประเภทตวเลข จดชด..............................

สวนชวยเหลอ (Help) ควรเตรยมHelp ในระหวางผใชปอนขอมล กดปม F1 เพอเรยกใช Help

การตดตอกบผใชในการปอนขอมลดวยกราฟก(Graphic User Interface)

GUI Input Control ชวยใหผใชใชงานงายขน1. Text Box2. Radio Button3. Check Box4. List Box5. Drop-Down List Box6. Combination (Combo) Box7. Spin (Spinner) Box

1. Text Box

กลองสเหลยมสำาหรบปอนขอมล โดยม Caption ดานหนากลองเพอสอความหมายสงทจะปอนลงไป

ขอแนะนำา1. วาง Caption ทสอความหมายดานหนา Text

Box

2. กรณเปนภาษาองกฤษ ตวอกษรแรกเทานนเปนตวพมพใหญ

3. มเครองหมายโคลอน (:) อยดานหลงขอความ4. ควรกำาหนดขนาด Text Box ใหเหมาะสมกบ

ขอความทจะปอน

2. Radio Button วงกลมเลกดานซายมอและมคำาอธบายขวามอท

สอดคลองกบคาคำาตอบทตองการใหผใชเลอกตอบ

ผใชเลอกคำาตอบไดคาเดยวเทานนขอแนะนำา1. ลำาดบคำาตอบเรยงจากบนลงลาง และชดดานซาย

ของจอภาพ2. กลมคำาตอบควรแยกจาก Input Control รป

แบบอน3. กลมคำาตอบควรมขอความทสอความหมายกบคำา

ตอบทตองการเลอก

3. Check Box

คลาย Radio Button ต Check Boxใช สเหลยมจตรสเลกแทนวงกลม ตามดวยขอความ

คำาอธบาย ผใชสามารถเลอกไดมากกวา 1 คำาตอบขอแนะนำา1. ขอความอธบาย (Caption) ควรสอความหมาย

และเขาใจงาย2. การจดกลมขอมลทสมพนธกน ควรมหวขออธบาย

วาเปนกลมขอมลเรองใด3. จดเรยงคำาตอบในแนวตง ชดดานซายของ

จอภาพ4. ลำาดบคำาตอบควรเรยงตามคำาอธบาย หรอเรยง

ตามตวอกษร หากเปนตวเลข ควรเรยงลำาดบจากคานอยไปมาก

4. List Box

กลองสเหลมทบรรจคำาตอบมากกวา 1 คำาตอบ ปรากฎ แถบเลอน (Scroll Bar)

ผใชสามารถเลอกไดคำาตอบเดยวเทานน ใชในกรณทคำาตอบทเปนไปไดมจำานวนมากและมพนท

จำากด

ขอแนะนำา1. ขอความอธบาย (Caption) ควรสอความหมายและเขาใจงาย ไว

ดานบน โดยหลกเลยงคำายอ2. กรณเปนภาษาองกฤษ ตวอกษรแรกเทานนเปนตวพมพใหญ3. มเครองหมายโคลอน (:) อยดานหลงขอความ4. ควรกำาหนดคาคำาตอบเรมตนและแสดงแถบสทคำาตอบนน5. ขนาดเหมาะสมกบการแสดงคำาตอบไวอยางนอย 2-3 คำาตอบ6. กรณใชรปภาพแทนรายละเอยดของคำาตอบ ตองเปนรปภาพทสอ

ความหมาย7. ลำาดบคำาตอบควรเรยงตามคำาอธบาย หรอเรยงตามตวอกษร

หากเปนตวเลข ควรเรยงลำาดบจากคานอยไปมาก

5. Drop-Down List Box

คลายกบ List Box แตจะปรากฎคำาตอบใหเหน เพยงคำาตอบเดยว คำาตอบอนจะใหผใชคลกเลอก

รปลกศรชลง ผใชสามารถเลอกไดคำาตอบเดยวเทานน

ข อแนะนำา ควรวางขอความอธบาย (Caption) ทสอความหมายกบคำาตอบทตองการเลอกไวดานบนหรอดาน

ซาย โดยหลกเลยงคำายอ

6. Combination (Combo) Box

Combo Box คลายกบ Drop-Down List Box คอบรรจคำาตอบเดยว คำาตอบทเหลอผใชคลกขวา

เพอแสดงคำาตอบทงหมด ลกษณะพเศษของ Combo Box คอ ผใชสามารถปอนคาคำาตอบนอกเหนอจากทมในกลองได

ข อแนะนำา ควรวางขอความอธบาย (Caption) ทสอความหมายกบคำาตอบทตองการเลอกไวดานบนหรอดาน

ซาย โดยหลกเลยงคำายอ

7. Spin (Spinner) Box

เปนกลองสเหลยม แสดงขอความเพยงแถวเดยว และมปมรปลกศรชขนลง เพอเปลยคาขอมลทเปน

ตวเลขตามหนวยวด เหมาะสำาหรบการปอนขอมลทมพนทของจอภาพจำากด

ข อแนะนำา ควรวางขอความอธบาย (Caption) ทสอความหมายกบคำาตอบทตองการเลอกไวดานบนหรอดาน

ซาย โดยหลกเลยงคำายอ ควรกำาหนดคาเรมตนของระบบไว

6.4 การตอบสนองของระบบ(Providing Feedback)

เปนการแจงการตอบสนองของระบบในระหวางการใชงานของระบบ

การตอบสนองระบบม 3 ชนด

1. แจงสถานะการทำางาน(Status Information)

2. แสดงความพรอมในการ รบคำาสง (Prompt

Cues)3. ขอความแจงหรอเตอนเมอ

เกดขอผดพลาด(Error/Warning Messages)

6.5 การแสดงสวนชวยเหลอ (Help)

1. สามารถเขาใจไดงาย2. มการจดรปแบบอยางเปนระเบยบ3. มการแสดงตวอยาง

6.6 การแสดงผลสอประสานกบผใชแบบมสและขาวดำา ขอดของการแสดงผลแบบมส

1. ใหความรสกออนโยนเวลามอง2. แสดงหรอเนนขอความบนเอกสารได3. แบงแยกรายละเอยดทมความซบซอนใหดงายขน4. เนนสวนขอควมเตอนใหชดขน

ปญหาทเกดจาการแสดงผลแบบมส1. เปนปญหากบผใชงานตาบอดส2. ความละเอยดของสมคาเปลยนแปลงไดเมอใชกบ

อปกรณตางชนดกน3. ความถกตองของสอาจคลาดเคลอนเมอใชกบอปกรณ

ตางชนดกน

สรป

กระบวนการในการออกแบบ User Interface

1. รวบรวมขอมลการตดตอกบระบบทางหนาจอของผใช

2. ออกแบบสวนตดตอกบระบบอยางคราว ๆ3. ใช Case Tools สรางตวตนแบบ

(Prototyping) และทดสอบ

รปแบบของ User Interfaces

เพอใหผใชงานสามารถโตตอบกบระบบอยางมประสทธภาพ

นยมใชแบบกราฟก (Graphic User Interface :GUI)

มรปแบบดงน คอ การโตตอบดวยคำาสง (Command Language

Interaction) การโตตอบดวยเมนคำาสง (Menu Interaction)

การโตตอบดวยแบบฟอรม (Form Interaction)

การโตตอบดวยการทำางานเชงวตถ (Object-Based Interaction)

การโตตอบดวยภาษามนษย (Natural Language Interaction)

หลกเกณฑในการออกแบบเมนคำาสง

1. แตละเมนคำาสงควรเลอกใชคำาสงทสอความหมายไดชดเจน

2. ควรมการใชตวอกษรพมพใหญหรอตวอกษรพมพเลกตามความเหมาะสม

3. ควรมการจดกลมคำาสงทมความเกยวของกนไวในกลมเดยวกน

4. ไมควรมจำานวนเมนคำาสงมากเกนไป5. ควรมเมนยอยสำาหรบเมนคำาสงทมการทำางานยอยภายใน

มากเกนไป6. เมอมการเลอกเมนคำาสง ควรออกแบบใหมแถบสปรากฏท

เมนคำาสงทถกเลอก

Poor menu design

Improve menu design

Menu Building within a graphical user interface environment

การออกแบบ Interfaces

การออกแบบการจดวาง (Layouts) ของหนาจอ โครงสรางของการปอนขอมล (Structure Data

Entry) การควบคมความถกตองในระหวางปอนขอมล

(Controlling Data Input) การตอบสนองของระบบ (Providing Feedback) การแสดงสวนชวยเหลอ (Help) การออกแบบการควบคมการเขาถงขอมลของผใช การออกแบบลำาดบการเชอมโยงจอภาพ (Dialogue

Design)

การออกแบบการจดวางของหนาจอ

1. สวนหวเรอง: ใชแสดงชอของเอกสารหรอ ฟอรมนน ๆ

2. สวนแสดงลำาดบและวนท: ใชแสดงเลขลำาดบและวนทหรอเวลา

3. สวนแนะนำาหรอแนวทางในการใช: ใชอธบายขอแนะนำาการใชฟอรม

4. สวนรายละเอยดขอมล: ใชแสดงสาระสำาคญของเอกสารหรอฟอรม

5. สวนแสดงผลรวม: ใชแสดงคาผลรวม เชน ยอด เงน ยอดขาย เปนตน

6. สวนการลงนามผมอำานาจ: ใชแสดงนามผมอำานาจของเอกสารหรอฟอรม

7. สวนแสดงความคดเหน: ใชในการเขยนขอความทเปนความคดเหน

ร ปแบบของเอกสารต นฉบบ

KING REGISTRATION FORMMONGKUTUNIVERSITY Student Number Semester/Year

Last Name First Name Initial Local Telephone Number Date

Street Address City State Zip Course Section Subj. Number (A, A1, 01) Cr Days Times Room Bidg.

Total Credits =Date Received/Initial Advisor Approval Date

EMPLOYEE GALLAGHER IMPORTS EMPLOYEE NUMBER EXPENSE VOUCHER DEPARTMENTList each expense separately. Attach receipts for all expenses except those for meals, personal car use, parking, tolls,taxis, and tips.Date Automobile Meals Lodging Other Total Miles Cost Br/Lun/Din Cost Description Cost Expense

Totals: Less AdvanceI certify that this statement of account is correct.Signature of Employee Date Net TotalApproved By Date

headingzone

controlzone

bodyzone

totalszone

authorizationzone

BATES VIDEO CLUB-- MEMBERSHIP APPLICATIONPrint the following information:NameAddressCity State Zip CodeHome Phone Work PhoneSecurity: Check the applicable box VISA [ ] Card# MasterCard [ ] American Express [ ] Other [ ] Expiration Date

I agree to the following video club membership terms:1. I may keep no rented video for longer than seven (7) days.2. I may have no more than ten (10) rented videos at any one time.3. If I fall to comply with the above terms, I understand that I will be obligated to return all rented videos at once, and that my video club membership may then be terminated.Signed DateFor office use only:Accepted: [ ] Member Number: [ ] Date: [ ] Rejected: [ ]

BATES VIDEO CLUB - VIDEO RENTAL FORM

Member Number Date

Title ID# Rental Fee Date Returned

Total Rental Amount:I agree to return the above rented videos within seven (7) days.Signed:

การออกแบบหนาจอทงหมดมจดมง หมาย 2 อยาง คอ เพอนำาเสนอขอมลและ

ชวยในการปฏบตงานในการใชระบบ มแนวทางมากมายในการออกแบบทตองพจารณาคอหนาจอทงหมดทปรากฏควร

ดงดดใจใหอยากใชงาน ไมควรแนนเกนไป

การออกแบบหนาจอ

การออกแบบการจดวางของหนาจอ การออกแบบหนาจอของฟอรมหรอรายงานตางๆ ควรจะจด

วางรปแบบใหเหมอนกบเอกสารมากทสด การเชอมโยงการปอนขอมลในแตละรายการหรอแตละ

ฟลด ตองลำาดบการเชอมโยงในการปอนขอมลในแตละฟลด การกรอกจะคลายกบการกรอกบนเอกสารจรง เรมกรอกจากซายไปขวา และจากบนลงลาง ควรมความยดหยนและสอดคลองในการทำางาน สามารถยาย

cursor ไปมาระหวางฟลดทตองการแกไข

1. เมอเขาไปทหนาจอรบขอมลเคอรเซอร (Cursor) ตองอยทตำาแหนงแรกของขอมลรบตามเนอหาของหนา

จอนน ตำาแหนงนนควรอยมมบนซายมอ หลงจากผใชใส ขอมลแลวเคอรเซอร (Cursor) ควรเลอนไปทชองรบ

ขอมลถดไปเสมอ คอ ดานลางหรอดานขางถดไปเพอ ใหการปอนขอมลเปนธรรมชาตจากบนซายไปขวา แลว

จงลงมาบรรทดใหม 2. ทกชองรบขอมลตอมคำาอธบาย โดยแสดงกำากบ

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

การออกแบบหนาจอรบขอมล

3. ถาชองรบขอมลนนมรปแบบเฉพาะใหแสดงรปแบบเฉพาะนนเพอใหผใชปอนขอมลไมผดพลาด

4. ในทกครงทปอนขอมลในชองรบขอมลนน “ครบถวนใหผใชกด Enter” เพอไปยงชองรบ

ขอมลถดไปหรอในกรณทใสขอมลเทาจำานวน ของขอมลนนแลว เคอรเซอรควรไปยงชองรบ

ขอมลถดไปอตโนมตเพอรบขอมลถดไป เพออำานวยความสะดวก

– 5. กรณขอมลรบเขาเปนตวอกษรพเศษแลวควรออกแบบใหสามารถใสตวอกษรพเศษอตโนมตโดยผใชไมตองใสเอง

– 6. กรณขอมลรบเขาตองการแสดงผลรบเปนเลข“0” ใหแสดงโดยผใชไมตองปอนเอง

– 7. กรณทขอมลรบเขาเปนจำานวนเลขทนำาไป “คำานวณคาควรม ,” คนหลกพนหรอจดทศนยม

ขนอตโนมต– 8. กรณชองรบขอมลนนมคาทสามารถ

กำาหนด (Default) ได ระบบนนควรแสดงคาท กำาหนดนน (Default) ทชองนน

9. สำาหรบขอมลรบทเปนรหสทตองมการตรวจสอบ กอนบนทก คอ คานนมความสมพนธกบคาอนท

บนทกไวเดมแลว เมอมการปอนรหสนนตองรบ คานนไปตรวจสอบทแฟมขอมลทอางถง

10 ควรมปมคำาสงตาง ๆ ตามความเหมาะสมของการใชงานหนาจอนน

11 หลงจากปอนขอมลในหนาจอนน ๆ สมบรณแลวและไดรบการตรวจสอบแลวควรมการใชผใชไดตรวจสอบและยนยนหรอยกเลกกอนบนทกขอมลเขาเครอง

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

ปฏบตงานในการใชระบบ มแนวทางมากมายในการออกแบบทตองพจารณาคอหนาจอทงหมดท

ปรากฏควรดงดดใจใหอยากใชงาน ไมควรแนนเกนไป

XXXXXX

XXXXXX

XXXXXX

XXXXXX

XXXXXX

XXXXXX

XXXXXX XXXXXX

XXXXXX

XXXXXX

START

แสดงการปอนขอมลตามการจดเรยงทไมถกตอง

XXXXXX

XXXXXX

XXXXXX

XXXXXX

XXXXXX

XXXXXX

XXXXXX XXXXXX

XXXXXX

XXXXXX

START

แสดงการปอนขอมลตามการจดเรยงทถกตอง

Bad Flow in a Form

Good Flow in a Form

การออกแบบหนาจอรบขอมล

หนาจอดาตาเอนทร (Data Entry Screen)

สงทตองเตรยมความสามารถของหนาจอปอนขอมล

การควบคมตวกระพรบ (Cursor)การแกไขตวเลขหรอขอมล การใชคำาสงออก (Exit)มสวนชวยเหลอ (Help)

โครงสรางของการปอนขอมล(Structure Data Entry)

การออกแบบโครงสรางการปอนขอมล คอ การออกแบบเพอกำาหนดรปแบบ หรอลกษณะของชองปอนขอมล เพอเตรยมความสะดวกใหกบผใช เชน การกำาหนดคาเรมตน การจดวางขอมล เปนตน

มหลกเกณฑการออกแบบดงน การปอนขอม ล (Entry) พยายามใหผใชปอนขอมล

เทาทจำาเปนเทานน คาเร มตน (Default Value) คาของขอมลใดท

สามารถกำาหนดคาเรมใหได ควรใสใหผใชทนท เพอ เพมความสะดวก เชน วนท หรอหมายเลข Running

Number เปนตน หนวยของขอม ล (Unit) ระบหนวยขอมลใหชดเจน

เชน บาท ดอลลาร กโลกรม เปนตน คำาอธบาย หรอ ค ำาอธบายชองป อน

ขอมล(Caption) แสดงคำาอธบายฟลดวาตองการใหผ ใชใสขอมลอะไร เปนจดวางใหเหมาะสม

ร ปแบบของขอม ล (Format) ถา ตองการใหมสญลกษณพเศษ ควรเตรยม

สญลกษณเหลานใหอตโนมตการจดวางขอม ล(Justify) ออกแบบ

ใหมการจดวางขอมลโดยอตโนมต เชน ตวเลขชดขวา ขอความชดซาย เปนตน

สวนชวยเหลอ (Help) เตรยมสวนชวย เหลอระหวางผใชปอนขอมล เชนปม F1

เพอขออานคำาอธบายการตดต อก บผ ใช ในการปอนขอม ล

ดวยกราฟก (GUI)

การตดตอกบผใชแบบกราฟก(Graphic User Interface: GUI)

เทคโนโลยทนำามาใช เรยกวา GUI Input Control

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

ขอมล

รปแบบของ GUI1. Text Box2. Radio Button3. Check Button4. List box5. Drop-down List

Box6. Combination

Box (Combo Box)

7. Spin Box (Spinner Box)

8. Menu bars 9. Toolbars10. Dialog boxes11. Toggle buttons12. Scroll bars13. Calendars14. Status Bar

Next

ตวอยางการใช GUI ทใชแทนเมน หลกของระบบการใหเกรด น.ศ.

Back

เมนพลดาวน (Pull-Down Menu)

หนาตางปอบอฟ (Pop-up Window)

แสดงเทคนคทาง GUI 8 แบบในการนำาขอมลเขาหรอเลอกคำาสง

ตวอยาง Graphic User Interface

ListBoxTextBoxRadio Button

ComboBox

Common GUI Components

Can edit

Text box

Radiobutton

Checkbox

Listbox

Spin box

Dropdownlist

Button

Advanced GUI Components

Advanced GUI Components (continued)

Input Prototype for Data Maintenance

Input Prototype for Transaction

Input Prototype for Data Maintenance

Input Prototype for Web Interface

Input Prototype for Web Interface

การควบคมความถกตองในระหวาง ปอนขอมล (Controlling Data Input)

ควรตรวจสอบชนดของขอมล ควรตรวจสอบการปอนขอมลไมครบตามทระบไว ควรตรวจสอบรปแบบทปอนขอมล ควรตรวจสอบคาสงสดและตำาสดของขอมล ควรตรวจสอบความครบถวนของขอมลในแตละฟลด

การตอบสนองของระบบ (Providing Feedback)

มอยดวยกน 3 ชนด คอ1. แจงสถานะการทำางาน (Status Information)

2. แสดงความพรอมในการรบคำาสง (Prompting Cues)

3. ขอความแจงหรอเตอนเมอมขอผดพลาด (Error/Warning Messages)

แจงสถานะการทำางาน (Status Information)

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

แสดงความคบหนาในการประมวลผล

Combination of Text and Graphics for End User feedback

แสดงความพรอมในการร บค ำาส ง

(Prompting Cues) เปนการออกแบบเพอแจงสถานะความพรอมในการรบคำาสง เชน หนา Login เขาระบบ cursor กระพรบรอรบ username

หรอ กรณาปอนรหสวชา :_ _ _-_ _ _

ขอความแจ งหร อเตอนเม อมข อผดพลาด (Error/Warning Messages)

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

การแสดงสวนชวยเหลอ (Help)

แนวทางการใช Help มลกษณะ ดงน1. สามารถใชงานงาย (Simplicity)

2. มการจดรปแบบอยางเปนระเบยบ(Organization)

3. มการแสดงตวอยาง (Example)

ตวอยาง Help

Poorly designed help displayImproved designed help display

ตวอยาง Help

การออกแบบควบคมการเขาถงขอมลของผใช

1. จำากดความสามารถในการมองเหนขอมลจากฐานขอมล(View/Subschema)

2. สทธในการเขาถงขอมล (Authorization Rules)

3. การเขารหส (Encryption Procedures)

4. การตรวจสอบการเขาใชระบบ (Authentication schemas)

การออกแบบลำาดบการเชอมโยงจอภาพ

เปนการออกแบบลำาดบของการแสดงสวนตดตอ กบผใชของโปรแกรม หรอลำาดบของการแสดง

สวน User Interface ทางหนาจอคอมพวเตอร แผนภาพแสดงลำาดบการเชอมโยงจอภาพ

(Dialogues Diagram) ประกอบไปดวย 3 สวน คอ1. สวนบน: เลขลำาดบหนาจอ2. สวนกลาง: ชอหนาจอการทำางาน3. สวนลาง: เลขลำาดบหนาจอทอางองมา ตอไป หรอ ยอน

กลบ

Dialogues Diagram Dialogues Diagram เปนแผนภาพแสดงลำาดบการ

เชอมโยงของจอภาพ สญลกษณ

เลขลำาดบหนาจอ

ชอหนาจอการทำางาน

เลขลำาดบทอางองมา

ตวอย าง Dialogue diagram for Customer Information System

ระบบสารสนเทศภม ภาค(Geographic Information System: GIS)

ระบบสารสนเทศทมพนฐานการทำางานดวยระบบ คอมพวเตอร เพอใช

การจดการกบขอมลทไดมาใหอยในรปแบบทตองการ(Capturing)

การจดเกบ (Storing) การตรวจสอบ (Checking) การประสาน (Integrating) การประเมนและวเคราะหผล (Manipulating) การแสดงผล (Display)

ขอมลทางภมศาสตร หรอแสดงผลเปนแผนท(Mapping) ได

องคประกอบหลกของ GIS

การนำาเขาขอมล (Data Input) การจดการขอมล (Data Management) การวเคราะหขอมล (Data Analysis) การแสดงผล (Data Display)

GIS Database

ฐานขอมลทใชในการจดเกบขอมลเชงคณภาพและเชงปรมาณ

ฐานขอมลทใชจดเกบแผนท ฐานขอมลทใชจดเกบรายละเอยด หรอสารสนเทศ

บนแผนท

แบบฝกหด ออกแบบ User Interface หนาจอรบคำาสงซอ Pizza โดย

มรายละเอยดดงน ลกคาโทรมาสง Pizza หรอมาซอทราน ถาโทรมาสง สามารถตรวจสอบทอยจากเบอรโทรศพททเคยโทรมา

กอนหนา ถาเปนลกคาใหมตอง input ขอมลของลกคาใหมดวย แจงขอมลรายการ Pizza และโปรโมชน เมอลกคาเลอกรายการเรยบรอยแลว ทวนคำาสงซอ และบอกราคา

รวมทงสน และเวลาการจดสง และออกแบบใบเสรจรบเงน วาด Dialogue Diagram ของระบบงาน

การบาน ใหนกศกษาออกแบบ User Interface และ วาด

Dialogue Diagram ของระบบงานทจะนำาเสนอ