Transcript Knowledge Management

User Interface Management
อาจารย์ สุรินทร์ ทิพ ศักดิ์ภูวดล
สานักเทคโนโลยีสารสนเทศและการสื่ อสาร
มหาวิทยาลัยนเรศวร วิทยาเขตสารสนเทศพะเยา
1
เนือ้ หา
ความหมายของสื่ อประสานกับผู้ใช้
 องค์ ประกอบของสื่ อประสานกับผู้ใช้
 ระบบจัดการสื่ อประสานกับ ผู้ใ ช้ (User Interface Management
System: UIMS)
 การออกแบบสื่ อประสานกับผู้ใช้ (User Interface Design)
 รู ปแบบของสื่ อประสานกับผู้ใช้ (User Interface Mode)
 การออกแบบการจัดวางและการแสดงผล (Layout and Display Design)
 รู ปแบบอืน
่ ๆ ของสื่ อประสานกับผู้ใช้
 ระบบสารสนเทศภูมิภาค (Geographic Information System: GIS)

2
ความหมายของสื่ อประสานกับผู้ใช้
สื่ อกลางในการติดต่ อและโต้ ตอบระหว่ างผู้ใช้ กบั ระบบคอมพิวเตอร์
ทั้งทางฮาร์ ดแวร์ และซอฟต์ แวร์
User Interface
Command Line
Graphic
User Interface
(GUI)
Natural
Language
รู ปแสดงส่ วนประกอบของสื่ อกลางในการติดต่ อและโต้ ตอบระหว่ างผู้ใช้ กบั คอมพิวเตอร์3
องค์ ประกอบของสื่ อประสานกับผู้ใช้
Interpret the display
Presentation
Language
Generate the display
Process the content
Plan and take action
Action Language
Interpret the user input
Application Process
Task
Knowledge
System
4
องค์ ประกอบของสื่ อประสานกับผู้ใช้ : User
 องค์ ความรู้ (Knowledge)
 ภาษาการกระทา (Action Language)
รู ปแบบของสื่ อประสานกับผู้ใช้ (User Interface Mode/Style)
 ปฏิกริ ิ ยาโต้ ตอบของผู้ใช้ (User ‘s Reaction)
5
องค์ ประกอบของสื่ อประสานกับผู้ใช้ : Computer
บทโต้ ตอบ (Dialog)
 การประมวลผลของคอมพิวเตอร์ (Computer Processing)
 ภาษาการนาเสนอ (Presentation Language)
ข้ อความ รู ป ภาพ กราฟ ภาพนิ่ ง ภาพเคลื่อนไหว ภาพสามมิติ แสง สี
เสี ยง

6
ระบบจัดการสื่ อประสานกับผู้ใช้ (User Interface Management
System: UIMS)
ซอฟต์ แวร์ ที่ทาหน้ าที่เป็ นตัวกลางในการจัดการสื่ อประสานที่จะ
น าเสนอผลลั พ ธ์ ที่ ไ ด้ จ ากการประมวลผลของระบบสนั บ สนุ น การ
ตัดสิ นใจไปยังผู้ใช้ ในรู ปแบบต่ าง ๆที่เหมาะสม โดยจะติดต่ อกับระบบ
จัดการฐานข้ อมูล ระบบจัดการฐานแบบจาลอง และระบบจัดการฐาน
องค์ ความรู้ เพือ่ นาข้ อมูลทีป่ ระมวลผลได้ ตามคาสั่ งของผู้ใช้ มาแสดงผล
7
การออกแบบสื่ อประสานกับผู้ใช้ (User Interface Design)
สิ่ งทีเ่ ราจาเป็ นต้ องคานึงถึงการออกแบบคือ







การใช้ งานจริงของผู้ใช้
เวลาในการเรียนรู้ ระบบ
ความสามารถในการใช้ ร่วมกับระบบ
อืน่ ๆ
ข้ อผิดพลาดทีอ่ าจเกิดขึน้
ความสามารถของเครื่องคอมพิวเตอร์
ระดับความต้ องการของผู้ใช้
มาตรฐานการใช้ คาสั่ ง





ความง่ ายในการใช้ งานระบบ
การรับ และส่ งออกข้ อมูลจากระบบ
ออกแบบไอคอน และสั ญลักษณ์ ต่าง ๆ
ทีเ่ หมาะสม
การออกแบบหน้ าจอที่สวยงาม น่ าใช้
ลาดับขั้นตอนการทางานไม่ ซับซ้ อน
8
รู ปแบบของสื่ อประสานกับผู้ใช้ (User Interface Mode)
การโต้ ตอบด้ วยคาสั่ ง (Command Language Interaction)
 การโต้ ตอบด้ วยเมนูคาสั่ ง (Menu Interaction)
 การโต้ ตอบด้ วยแบบฟอร์ ม (Form Interaction)
 การโต้ ตอบด้ วยการทางานเชิ งวัตถุ (Object-Based Interaction)
 การโต้ ตอบด้ วยภาษามนุษย์ (Natural Language Interaction)

9
การโต้ ตอบด้ วยคาสั่ ง (Command Language Interaction)

การโต้ ตอบกับระบบโดยที่ผ้ ูใช้ ต้องพิมพ์ คาสั่ งลงในช่ องป้ อนคาสั่ง เพื่อกระตุ้นให้
ระบบทางาน เช่ น ระบบปฏิบัตกิ าร DOS, UNIX เป็ นต้ น
10
การโต้ ตอบด้ วยเมนูคาสั่ ง (Menu Interaction)
1
Pull-Down Menu
2
Pop-Up Menu
11
การโต้ ตอบด้ วยแบบฟอร์ ม (Form Interaction)

ผู้ ใ ช้ ระบบจะต้ อ งป้ อนข้ อ มู ล ลงใน
ช่ องว่ า งที่ อ ยู่ ใ นแบบฟอร์ มที่ แ สดง
ท า งห น้ า จ อ ค อ ม พิ ว เ ต อ ร์ ซึ่ ง มี
ลักษณะคล้ ายกับการกรอกแบบฟอร์ ม
ลงกระดาษ
12
การโต้ ตอบด้ วยการทางานเชิงวัตถุ (Object-Based Interaction)

เป็ นการโต้ ตอบกับระบบที่ใช้ สัญลักษณ์ ใช้ รูปภาพแทนคาสั่ งทางาน หรื อเรี ยกว่ า
“ไอคอน (Icon)”
13
การโต้ ตอบด้ วยภาษามนุษย์ (Natural Language Interaction)
Check E-mail
You got 10 E-mail
Read First E-mail
E-mail From …
Subject …
Detail …
14
การออกแบบการจัดวางและการแสดงผล (Layout and
Display Design)
การจัดจอภาพคอมพิวเตอร์
 การเชื่ อมโยงการป้อนข้ อมูลแต่ ละราย
 โครงสร้ างของการป้อนข้ อมูล (Structure Data Entry)
 การตอบสนองของระบบ (Providing Feedback)
 การแสดงส่ วนช่ วยเหลือ (Help)
 การแสดงผลแบบมีสีและขาวดา

15
การจัดจอภาพคอมพิวเตอร์
Title Zone
Menu Zone
Tools Zone
Body Zone
Message/Status
Zone 16
การเชื่อมโยงการป้ อนข้ อมูลแต่ ละราย


เราต้ องกาหนดลาดับในการ
ป้ อนข้ อมูลให้ สอดคล้ อง
ไม่ ควรกาหนดลาดับสลับ ไป
มาโดยไม่ มีนัยสาคัญ
17
โครงสร้ างของการป้ อนข้ อมูล (Structure Data Entry)








การป้ อนข้ อมูล (Entry)
การกาหนดค่ าเริ่มต้ น (Default)
หน่ วยของข้ อมูล (Unit)
คาอธิบายต่ างๆ (Caption)
รู ปแบบ (Format)
การจัดวาง (Justify)
ส่ วนช่ วยเหลือ (Help)
การติดต่ อกับผู้ใช้ ในการป้ อนข้ อมูลด้ วยกราฟิ ก (Graphic User Interface : GUI)
18
โครงสร้ างของการป้ อนข้ อมูล (Structure Data Entry)

การป้ อนข้ อมูล (Entry)
ข้ อมูลบางส่ วนที่มีแล้ วในฐานข้ อมูล ก็ไม่ ควรที่ผ้ ูใช้ จะต้ องพิมพ์ เข้ าไปใหม่
เช่ น ข้ อมูลลูกค้ า เมื่อใส่ รหัสลงไป ก็ควรที่จะแสดงข้ อมูลประวัตลิ ูกค้ าออกมา โดย
ไม่ จาเป็ นต้ องกรอกข้ อมูลเข้ าไปใหม่

การกาหนดค่ าเริ่มต้ น (Default)
การกรอกข้ อมู ล เช่ น รหั ส นิ สิ ต มี ความยาว 8 ตัว อัก ษร เมื่ อกรอกครบ 8
ตัวอักษร ก็ให้ ทาการเปลี่ยนโฟกัส ไปยังฟิ ลด์ อื่นๆ ที่ต้องการบัน ทึกข้ อมู ลต่ อไป
หรื อ การกาหนดรู ปแบบเมื่อป้ อนตัวเลข 1000 ระบบควรมีการเปลี่ยนเป็ น 1,000
โดยอัตโนมัติ
19
โครงสร้ างของการป้ อนข้ อมูล (Structure Data Entry)

หน่ วยของข้ อมูล (Unit)
ในการกรอกข้ อมูล หน่ วยของข้ อมูลเป็ นสิ่ งที่สาคัญมาก เช่ น ระบบต้ องการ
ให้ บันทึกข้ อมูลมีหน่ วยเป็ น กิโลกรั ม แต่ นิสิต มีข้อมูลเป็ นตัน ก็ต้องเปลี่ยนแปลง
ให้ เหมาะสม และถูกต้ องตามความต้ องการของระบบ

คาอธิบายต่ างๆ (Caption)
เราต้ องมีการเขียนคาอธิ บายต่ างๆ ให้ ผ้ ูใช้ ทราบว่ าข้ อมูลในฟิ ลด์ นี้ จัดเก็บ
ข้ อมูลใด สามารถทาได้ โดยการเขียนคาอธิบาย หรือ ฉลาก กากับไว้
20
โครงสร้ างของการป้ อนข้ อมูล (Structure Data Entry)

รู ปแบบ (Format)
การจัดเรียงลาดับการกรอกข้ อมูล การกาหนดคาอธิบาย และส่ วนอืน่ ๆ ต้ องมี
การกาหนดให้ อยู่ในรู ปแบบทีเ่ ป็ นมาตรฐานเดียวกัน

การจัดวาง (Justify)
การจัดวางต้ องสวยงาม เป็ นระเบียบ ใช้ งานง่ าย และอ่านง่ าย
เช่ นตัวเลขชิดขวา หากเป็ นตัวหนังสื อชิดซ้ าย

ส่ วนช่ วยเหลือ (Help)

การติดต่ อกับผู้ใช้ ในการป้ อนข้ อมูลด้ วยกราฟิ ก (Graphic User Interface : GUI)
21
การติดต่ อกับผู้ใช้ ในการป้อนข้ อมูลด้ วยกราฟิ ก
(Graphic User Interface : GUI)
ตัวอย่ างการออกแบบ
22
(Graphic User Interface : GUI)
ตัวอย่ างการออกแบบ
Label
Text box
Radio Button
Check box
23
(Graphic User Interface : GUI)
ตัวอย่ างการออกแบบ
List box
Combo box
24
การตอบสนองของระบบ (Providing Feedback)
การแจ้ งสถานะการทางาน (Status Information)
 การแสดงความพร้ อมในการรับคาสั่ ง (Prompting Cues)
 ข้ อความแจ้ งเตือนเมื่อมีข้อผิดพลาด (Error/ Warning Messages)

25
การแจ้ งสถานะการทางาน (Status Information)


แ ส ด ง ใ ห้ ผู้ ใ ช้ เ ห็ น ว่ า ยั ง มี ก า ร
ประมวลผลการทางานอยู่ เนื่ องจาก
บ่ อ ยครั้ ง ที่ เ ราเขี ย นโปรแกรม โดย
ไม่ ได้ แสดงเห็นถึงสถานะ ปัจจุบันว่ า
ระบบกาลังทางานอะไรอยู่ ทาให้ ผ้ ูใช้
เข้ าใจผิด ว่ าเครื่องของเราแฮงค์
ปกติ จ ะแสดงเป็ น นาฬิ กาทราย
Progress bar และ ตัวเลขแสดง
เปอร์ เซ็นต์ การทางาน
26
การแสดงความพร้ อมในการรับคาสั่ ง (Prompting Cues)

มี ก ารแสดงข้ อ ความพร้ อม ให้ ผ้ ู ใ ช้
ทราบ และมีการอธิบาย Field หรื อ
Caption ทีก่ าหนด
27
ข้ อความแจ้ งเตือนหรือมีข้อผิดพลาด (Error/ Warning
Messages)

ผิด
เราจาเป็ นต้ องมีการแจ้ งเตือน เมื่ อมี
การท างานที่ต้ อ งการยืนยัน หรื อ ใน
กรณีที่เกิดข้ อผิดพลาดขึน้ เพื่อให้ ผ้ ูใช้
ได้ ทราบ และทาการตัดสิ นใจ
ถูก
28
การแสดงส่ วนช่ วยเหลือ (Help)
สามารถเข้ าใจได้ ง่าย (Simplicity)
 มีการจัดรู ปแบบอย่ างเป็ นระเบียบ
 มีการแสดงตัวอย่ าง (Show)

29
การแสดงผลแบบมีสีและขาวดา

ข้ อดีของการแสดงผลแบบมีสี
 สามารถแสดงความรู้ สึกได้
 สามารถแสดงให้ เห็นถึงจุดทีเ่ น้ น หรือ สาคัญได้

ปัญหาที่เกิดจากการแสดงผลแบบมีสี
 ไม่ สามารถใช้ ได้ กบ
ั ผู้ใช้ ทมี่ อี าการตาบอดสี
 ความละเอียดของสี อาจมีการเปลีย่ นแปลงเมือ่ ใช้ อุปกรณ์ ต่างชนิดกัน
30
รูปแบบอืน่ ๆ ของสื่ อประสานกับผู้ใช้
กราฟิ ก (Graphics)
 มัลติมีเดียและไฮเปอร์ เท็กซ์ (Multimedia and Hypertext)
 ระบบความจริงเสมือน (Virtual Reality System)
 การประมวลผลภาษาธรรมชาติ (Natural Language Processing)

31
กราฟิ ก (Graphics)
เป็ นการนาเสนอข้ อมูลหรือผลลัพธ์ ด้วยรูปภาพหรืออาจเป็ นรู ปภาพ
ผสมข้ อความ เพือ่ ให้ ผู้ใช้ สามารถทราบความหมายของข้ อมูลและ
สารสนเทศที่นาเสนอได้ ชัดเจนมากยิ่งขึน้
32
มัลติมเี ดียและไฮเปอร์ เท็กซ์ (Multimedia and Hypertext)
มัลติมีเดีย (Multimedia) มักเป็ นการกล่าวถึงประโยชน์ โดยรวมของสื่อมากมาย
เช่ น เสี ยง (Sound) ข้ อความ (Text) ภาพกราฟิ กต่ างๆ (Graphics) รวมถึงสื่ อชนิดอืน่ ๆ
ด้ วย
ไฮเปอร์ เท็กซ์ ก็คอื ข้ อความหรือกลุ่มของข้ อความทีท่ าหน้ าทีเ่ ป็ นจุดเชื่อมต่ อข้ อมูล
จากเอกสารหน้ าหนึ่งไปสู่ เอกสารอีกหน้ าหนึ่ง ซึ่งการเชื่อมโยงนีเ้ ป็ นการเชื่อมโยงไปสู่
ข้ อมูลอืน่ ๆ
Hypertext
33
ระบบความจริงเสมือน (Virtual Reality System)
ระบบความเป็ นจริงเสมือน หมายถึง ระบบที่ช่วยให้ผใู ้ ช้ระบบเคลื่อนไหว
และมีปฏิกิริยาโต้ตอบกับสภาพแวดล้อมที่ถูกจาลองขึ้นโดยคอมพิวเตอร์ได้
(Computer-Simulated Environment)
34
การประมวลผลภาษาธรรมชาติ
(Natural Language Processing)
การประมวลผลภาษาธรรมชาติ เป็ นการนาเทคโนโลยีปัญญาประดิษฐ์
(Artificial intelligence AI) มาประยุกต์ ใช้ เพือ่ ให้ มนุษย์ สามารถ
ติดต่ อสื่ อสารกับเครื่องคอมพิวเตอร์ ได้ โดยใช้ คาพูดภาษาอังกฤษ หรือ
ภาษาอืน่ ๆ ทีไ่ ด้ รับการพัฒนา เช่ น ภาษาอังกฤษ ภาษาญีป่ ุ่ น ภาษาไทย เป็ น
ต้ น โดยอาจพูดผ่ านอุปกรณ์ ไมโครโฟน เพือ่ นาสั ญญาณเสี ยงพูดของผู้ใช้
เข้ าสู่ ระบบประมวลผลภาษาธรรมชาติ
35
ระบบสารสนเทศภูมศิ าสตร์ (Geographic Information
System: GIS)

ระบบสารสนเทศทีม่ ีพนื้ ฐานการทางานด้ วยระบบคอมพิวเตอร์ เพือ่ ใช้
 การจัดการกับข้ อมูลทีไ่ ด้ มาให้ อยู่ในรู ปแบบที่ต้องการ (Capturing)
 การจัดเก็บ (Storing)
 การตรวจสอบ (Checking)
 การประสาน (Integrating)
 การจัดกระทา (Manipulating)
 การแสดงผล (Display)
ข้ อมูลทางภูมิศาสตร์ หรือแสดงผลเป็ นแผนที่ (Mapping) ได้
36
องค์ ประกอบหลักของ GIS
การนาเข้ าข้ อมูล (Data Input)
 การจัดการข้ อมูล (Data Management)
 การวิเคราะห์ ข้อมูล (Data Analysis)
 การแสดงผล (Data Display)

37
ซึ่งผลการวิเคราะห์ จะนาไปใช้ ในการวางแผนและการ
ตัดสิ นใจได้ อย่ างถูกต้ อง จาเป็ นต้ องอาศัยปัจจัยดังนี้
ชุ ดข้ อมูล (Data)
 การจัดเก็บข้ อมูล (Data Storage)
 แบบจาลอง (Model)

นิสิตกรุ ณาจดเพิ่มด้วยค่ะ
38
GIS Database
ฐานข้ อมูลทีใ่ ช้ ในการจัดเก็บข้ อมูลเชิงคุณภาพและเชิงปริมาณ
 ฐานข้ อมูลทีใ่ ช้ จัดเก็บแผนที่
 ฐานข้ อมูลทีใ่ ช้ จัดเก็บรายละเอียด หรื อสารสนเทศบนแผนที่

39
เทอม 1 ปี การศึกษา 2554
สอนวันที่ 24/08/2554
40