หัวข้ อในการสอน

การออกแบบส่วนต่อประสานผูใ้ ช้  ความหมาย
 รู ปแบบของ User Interface
(User Interface Design)  icon ทีใ่ ช้ ในการสื่ อสาร
 ตัวอักษรทีใ่ ช้ ในการสื่ อสาร: Typeface
 เทรนด์ เทคโนโลยีทจี่ ะเกิดขึน้ ในปี 2016

01

ความหมาย ความหมาย
3 4

Interface ตัวประสาน User Interface ส่ วนต่ อประสานผู้ใช้ หมายถึง

หมายถึง การเชื่อมต่อระหว่าง คอมพิวเตอร์
• แต่มกั นํามาใช้ในความหมายของ User Interface ที่แปลว่า การติดต่อ
ประสานระหว่างเครื่ องคอมพิวเตอร์กบั ผูใ้ ช้ เช่น แป้ นพิมพ์, จอภาพ สิ่ ง
เหล่านี้ต่างก็เป็ นตัวประสานกับผูใ้ ช้ท้ งั สิ้ น
ส่ วนติ ด ต่ อ ระหว่ า งผู้ ใ ช้ กับ ระบบ เพื่ อ รองรั บ การนํา ข้อ มู ล หรื อ
คําสัง่ เข้าไปสู่ระบบ ตลอดจนนําเสนอสารสนเทศกลับมายังผูใ้ ช้
• การออกแบบ User Interface จะพิจารณาประสิ ทธิ ภาพในการโต้ตอบ
ระหว่างผู้ใช้ กบั ระบบเป็ นหลัก เช่น
- ความยากง่ายในการเรี ยนรู ้การโต้ตอบกับระบบของผูใ้ ช้งาน
 ความหมาย
5 6

Usability Design
การออกแบบให้ง่ายต่อผูใ้ ช้
User eXperience (UX)
ความพึงพอใจของผูใ้ ช้ที่มีต่อระบบ
เช่ น
• การออกแบบฟอร์มไว้ติดต่อกับผูใ้ ช้ คือ User Interface Design
• การออกแบบฟอร์ มให้มีแค่ 3 ช่ องสําคัญ (ชื่ อ, อีเมล์, เนื้ อหา) และระบุชื่อช่ อง
ชัดเจน คือ Usability Design
• การที่มีคนมาตอบกลับข้อความนั้นภายใน 10 นาที คือ User eXperience Design

รูปแบบของ User Interface 1. การโต้ ตอบด้ วยคําสั่ ง (Command Language Interaction)

7 8

 รู ปแบบของ User Interface สามารถแบ่ งออกได้ 5 ประเภท ดังนี้

1. การโต้ตอบด้วยคําสัง่ (Command Language Interaction)
2. การโต้ตอบด้วยเมนูคาํ สัง่ (Menu Interaction)
3. การโต้ตอบด้วยแบบฟอร์ม (Form Interaction)
4. การโต้ตอบด้วยการทํางานเชิงวัตถุ (Object-Based Interaction)
5. การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction)
 1. การโต้ ตอบด้ วยคําสั่ ง (Command Language Interaction) 2. การโต้ ตอบด้ วยเมนูคาํ สั่ ง (Menu Interaction)
9 10

 เป็ นการโต้ตอบกับระบบโดย
 Menu คือ การเตรียมคําสั่ งสํ าหรับให้ ผ้ ูใช้ เลือก
ที่ผใู ้ ช้จะต้องพิมพ์คาํ สัง่ ลงใน
 เป็ นการโต้ ต อบกับ ระบบด้ ว ยการแสดงเมนู คํา สั่ ง โดยผูใ้ ช้ไ ม่ จ าํ เป็ นต้อ ง
ช่องป้ อนคําสัง่ เพื่อกระตุน้ ให้
เกิดการทํางานในระบบ ป้ อนคําสั่งเอง ดังนั้นจึงได้รับความนิ ยมในด้านของความง่ายในการใช้งาน
และการทําความเข้าใจ
 ผูใ้ ช้จะต้องจําคําสัง่ ไวยากรณ์
 รู ปแบบเมนูมีดงั นี้ คือ
และกฎเกณฑ์ต่างๆ
Pull-down Menu
 เช่น ผูใ้ ช้ที่ชาํ นาญการใช้

ระบบปฏิบตั ิการ DOS Pop-up Menu

คําสง่ ั copy ไฟล์จาก drive c: ไปย ัง drive a:
C:\copy ex1.doc a:ex1.doc
 ข้อเสี ย : ใช้งาน ยาก ไม่ดึงดูด

ความสนใจของผูใ้ ช้

2. การโต้ ตอบด้ วยเมนูคาํ สั่ ง (Menu Interaction) 2. การโต้ ตอบด้ วยเมนูคาํ สั่ ง (Menu Interaction)
11 12

Pull-down Menu เมนู แสดงคํ า สั่ ง Pop-up Menu เมนู แ สดงคํา สั่ ง เมื่ อ
โ ด ย แ บ่ ง ร า ย ก า ร ข อ ง คํ า สั่ ง เ ป็ น ผูใ้ ช้คลิกเลือกวัตถุ หรื อ object ใด ๆ
หมวดหมู่ เมื่ อ ผู ้ ใ ช้ ค ลิ ก จะแสดง ในจอภาพ คํา สั่ ง หรื อคุ ณ สมบั ติ ที่
รายการคําสัง่ จากบนลงล่าง เกี่ยวข้องกับ object นั้นจะถูกแสดง
ออกมา
 2. การโต้ ตอบด้ วยเมนูคาํ สั่ ง (Menu Interaction) 3. การโต้ ตอบด้ วยแบบฟอร์ ม (Form Interaction)
13 14

หลักเกณฑ์ ในการออกแบบเมนูคาํ สั่ ง

 แต่ละเมนูคาํ สัง่ ควรเลือกใช้คาํ สัง่ ที่สื่อความหมายได้ชดั เจน
 ควรมี ก ารใช้ต ัว อัก ษรพิ ม พ์ใ หญ่ ห รื อตัว อัก ษรพิ ม พ์เ ล็ ก ตามความ
เหมาะสม
 ควรมีการจัดกลุ่มคําสัง่ ที่มีความเกี่ยวข้องกันไว้ในกลุ่มเดียวกัน
 ไม่ควรมีจาํ นวนเมนูคาํ สัง่ มากเกินไป
 เมื่อมีการเลือกเมนูคาํ สั่ง ควรออกแบบให้มีแถบสี ปรากฏที่เมนูคาํ สั่งที่
ถูกเลือก

3. การโต้ ตอบด้ วยแบบฟอร์ ม (Form Interaction) 4. การโต้ ตอบเชิงวัตถุ (Object-Based Interaction)

15 16

 เป็ นการโต้ต อบที่ ผูใ้ ช้ร ะบบจะต้อ งป้ อนข้อ มู ล ลงในช่ อ งว่า งที่ อ ยู่ใ น
แบบฟอร์มที่แสดงหน้าจอคอมพิวเตอร์
 ในการกรอกหรื อป้ อนข้อมูลเข้า ข้อมูลที่สัมพันธ์กน ั จะต้องถูกจัดวางบน
ฟอร์มให้อยูใ่ กล้เคียงกัน • เป็ นการโต้ตอบกับระบบที่ใช้สญ ั ลักษณ์
 คล้ายการกรอกแบบฟอร์ มลงในกระดาษ • สัญลักษณ์เป็ นตัวแทนคําสัง่ ที่ใช้ในการปฏิบตั ิงาน
 ชื่ อของช่องป้ อนข้อมูลต้องสื่ อความหมาย • สัญลักษณ์รูปภาพแทนคําสัง่ การทํางานเรี ยกว่า ไอคอน (Icon) หรือ GUI
 แบ่งส่ วนของข้อมูลบนฟอร์ มให้เหมาะสม • ประหยัดพื้นที่บนหน้าจอ
 ช่องป้ อนข้อมูลไม่ควรยาวมากจนเกินไป • ช่วยให้ผใู ้ ช้เข้าใจได้ง่ายขึ้น
 5. การโต้ ตอบด้ วยภาษามนุษย์ (Natural Language Interaction) 5. การโต้ ตอบด้ วยภาษามนุษย์ (Natural Language Interaction)
17 18

• เป็ นการโต้ตอบกับระบบด้วยภาษามนุษย์ ไม่วา่ จะเป็ นประโยคภาษาพูด
หรื อเขียน
• เครื่ องคอมพิวเตอร์จะต้องมีระบบแปลภาษาอยูภ่ ายในเครื่ อง
ผมพร้ อมทีจ่ ะทํางานแล้ ว
ตกลงคุณต้ องการเริ่ มงานใดก่ อน
ผมต้ องการเช็คอีเมล์
คุณได้ รับอีเมล์ ใหม่ ทงั้ หมด 8 ฉบับ
• เสี ยงหรื อคําพูดที่ใช้จะต้องเป็ นไปตามรู ปแบบที่ตวั แปลภาษารู ้จกั
• ค่าใช้จ่ายสูง และ ทําได้ยาก เนื่องจากมีขอ้ จํากัดเกี่ยวกับภาษาที่ใช้
• กํากวมตีความหมายยาก ตลอดจนโทนเสี ยงที่แตกต่างกัน เป็ นต้น
• ภาษาธรรมชาติอาจทําให้เกิดปั ญหาเรื่ องความคลุมเครื อของเสี ยง เพราะผูใ้ ช้แต่
ละคนอาจออกเสี ยงไม่เหมือนกัน
• นอกจากนี้ ความหมายของคําที่ใช้อาจมีมากกว่าหนึ่ งความหมายและอาจทําให้
ผูใ้ ช้เกิดความสับสน
• ดังนั้นการใช้ ภาษาธรรมชาติจึงมีความยากที่จะใช้งาน
• หากต้องการใช้งานภาษาธรรมชาติควรต้องพยายามทําความเข้าใจกลุ่ม ผูใ้ ช้ และ
กลุ่มคําที่จะใช้ในการตอบโต้ หรื อเลือกเฉพาะคําหลัก (Keyword) มาใช้งาน

Icon ทีใ่ ช้ ในการสื่ อสาร Icon ทีใ่ ช้ ในการสื่ อสาร

Graphics User Interfaces (GUI) Graphics User Interfaces (GUI)
19 20

 การติ ด ต่ อ กับ ผูใ้ ช้โ ดยใช้ภ าพสัญ ลัก ษณ์ เป็ นการออกแบบที่ มี ก าร  ช่วยประหยัดเนื้อที่บนหน้าจอแทนการเขียนถ้อยคํา หรื อประโยคที่ยาว
โต้ตอบกับผูใ้ ช้ โดยการใช้ Icon, รูปภาพ และสั ญลักษณ์ อื่นๆ เพื่อแทน บน Menu ในขณะเดียวกันก็จะสามารถช่วยให้ผใู้ ช้จดจําปุ่ มการทํางาน
ลักษณะต่างๆ ของระบบ ได้ดีข้ ึนหรื อแม้แต่จะสามารถทําให้โปรแกรมดูเป็ นสากลอีกด้วย
 แทนที่ ผู ้ใ ช้ จ ะพิ ม พ์ค ํา สั่ ง ต่ า งๆในการทํา งาน ช่ ว ยทํา ให้ ผู ้ใ ช้ ง าน  สิ่ งสําคัญของ Icon คือการสื่ อความหมาย
สามารถทํางานได้ง่าย และรวดเร็ วขึ้น ไม่จาํ เป็ นต้องจดจําคําสั่งต่างๆ
ของระบบมากนัก ถือเป็ นวิธีการให้ความสะดวกแก่ผใู ้ ช้คอมพิวเตอร์
ให้ติดต่อสื่ อสารกับระบบโดยผ่านทางภาพ
 Icon ทีใ่ ช้ ในการสื่ อสาร Icon ทีใ่ ช้ ในการสื่ อสาร
Graphics User Interfaces (GUI) Graphics User Interfaces (GUI) : การออกแบบภาพสัญลักษณ์ (Symbol Design)
21 22

 ประเภทของภาพสัญลักษณ์  ชนิ ด ของภาพสัญ ลัก ษณ์ ภาพสัญ ลัก ษณ์ มี ส่ ว นสํา คัญ อยู่ 2 ส่ ว นคื อ
 Iconography มีลกั ษณะลายเส้นที่เรี ยบง่าย และมีมุมมองเพียง 2 มิติ ส่ วนที่เป็ นภาพ และส่ วนที่เป็ นตัวหนังสื อ ซึ่ งนํามาจัดเป็ นหมวดหมู่
เท่านั้น และแบ่งภาพสัญลักษณ์ออกเป็ นชนิดต่างๆ ดังนี้
 ภาพ Icon ที่ดีน้ นั ผูม้ องจะต้องสามารถเข้าใจ และจดจําได้โดยง่าย

Icon ทีใ่ ช้ ในการสื่ อสาร Icon ทีใ่ ช้ ในการสื่ อสาร

Graphics User Interfaces (GUI) : การออกแบบภาพสัญลักษณ์ (Symbol Design) Graphics User Interfaces (GUI) : การออกแบบภาพสัญลักษณ์ (Symbol Design)
23 24

1.Pictograph 1.Pictograph
 Pictograph คือภาษาภาพ ซึ่ งก็คือภาพที่สื่อความหมายได้โดยไร้
ตัวอักษรอธิบาย มีลกั ษณะเรี ยบง่ายที่สุด และเป็ นสากล
 ได้แก่ ป้ ายจราจร ป้ ายบอกทิศทางตามสถานที่ต่างๆ

 การออกแบบ Pictograph นั้น ส่ วนสําคัญที่สุดคือเรื่ องของการสื่ อ

ความหมาย เวลาออกแบบต้อ งคํา นึ ง ถึ ง คนส่ ว นใหญ่ ที่ จ ะดู ภ าพนั้น
ภาพที่ได้จะต้องไม่มีรายละเอียดซับซ้อนเป็ นอันขาด เพราะรายละเอียด
ต่างๆเหล่านั้นจะเบี่ยงเบนประเด็นการสื่ อความหมาย ทําให้บางคนอาจ
เข้าใจภาพไปในทางอื่นได้
 Icon ทีใ่ ช้ ในการสื่ อสาร Icon ทีใ่ ช้ ในการสื่ อสาร
Graphics User Interfaces (GUI) : การออกแบบภาพสัญลักษณ์ (Symbol Design) Graphics User Interfaces (GUI) : การออกแบบภาพสัญลักษณ์ (Symbol Design)
25 26

2.Symbol 3.Letter Mark

 Symbol คือ สัญลักษณ์ที่ไม่มีตวั อักษรในการสื่ อความหมาย ส่ วนใหญ่
จะใช้เป็ นสัญลักษณ์องค์กร สถาบัน บริ ษทั
 Letter Mark คือภาพตัวอักษร หรื อภาพสัญลักษณ์ที่ใช้ตว ั อักษรในการ
สื่ อ ความหมาย โดยอาจจะหยิ บ ชื่ อ หรื อสโลแกนมาวาง ทํา การ
ดัดแปลงตัวอักษรต่าง ๆ
 นิ ยมใช้กน ั เป็ นเครื่ องหมายการค้าของบริ ษทั โดยทัว่ ไป
เพราะทําให้คนที่เห็นจดจําได้ง่ายและพูดต่อกันมากที่สุด
ซึ่ งทําให้ชื่อเหล่านี้ติดตลาด หรื อเป็ นที่จดจําของคนโดยส่ วนใหญ่

Icon ทีใ่ ช้ ในการสื่ อสาร Icon ทีใ่ ช้ ในการสื่ อสาร

Graphics User Interfaces (GUI) : การออกแบบภาพสัญลักษณ์ (Symbol Design) Graphics User Interfaces (GUI) : การออกแบบภาพสัญลักษณ์ (Symbol Design)
27 28

4.Logo 5.Combination Mark

 Logo คื อ ภาพสั ญ ลัก ษณ์ ที่ เ ป็ นตัว อัก ษรอ่ า นออกเสี ย งเป็ นคํา เป็ น  Combination Mark คือภาพสัญลักษณ์ที่มีการผสมผสานระหว่างภาพ
ประโยคได้ ซึ่ งส่ วนใหญ่ เป็ นชื่อสิ นค้า ชื่อบริ ษทั และตัวอักษรเข้ามาใช้ร่วมกัน เพื่อสื่ อความหมายตามที่ นักออกแบบ
วางไว้
 Icon ทีใ่ ช้ ในการสื่ อสาร
ตัวอักษรทีใ่ ช้ ในการสื่ อสาร: Typeface
Graphics User Interfaces (GUI) : การออกแบบภาพสัญลักษณ์ (Symbol Design)
29 30

6. Trade Mark  Typeface คือ แบบทัว่ ๆ ไปของชุดตัวอักษร

 Trade Mark คือ เครื่ องหมายการค้า ได้แก่ ภาพสัญลักษณ์ต่าง ๆ ที่มีมา  Typeface มี 2 ชนิ ด Serif กับ Sans-serif
ข้างต้นทั้งหมด แต่ หยิบมาเลื อกใช้ให้เข้ากับบุ คลิ ก (Character) ของ - Typeface ชนิด Serif (แบบมีเชิง) จะมีส่วนยืน่ ออกมา
สิ นค้าต่าง ๆ - Typeface ชนิ ด Sans-serif (แบบไม่มีเชิ ง) นั้นจะไม่มีส่วนยื่น
ออกมา

ตัวอักษรทีใ่ ช้ ในการสื่ อสาร: Typeface ตัวอักษรทีใ่ ช้ ในการสื่ อสาร: Typeface

31 32

 พยายามที่จะใช้อนั ที่สามารถอ่านได้ง่ายที่สุด ขึ้นอยู่กบั ว่าจะเลือกอัน

ไหนให้ม ัน ทํา งานได้ดี ที่ สุ ด สํา หรั บ การออกแบบในสถานการณ์ ที่
แตกต่างกัน
 Typeface ชนิ ด Serif มักจะง่ายต่อการอ่านบนกระดาษหรื อเมื่อมี
ข้อความอยูม่ าก ๆ
- ดังที่ปรากฏในตัวอักษรตระกูล Times แบบอักษรชนิ ดนี้ มีชื่อ
เรี ยกอีกอย่างหนึ่งว่าแบบโรมัน (roman) ซึ่ งมีตน้ กําเนิดมาจากอักษรที่จารึ ก
ไว้ใ นหิ น ของอาณาจัก รโรมัน มี ส่ ว นช่ ว ยในการกวาดสายตาไปตาม
ตัวอักษร ทําให้อ่านง่าย และนิยมใช้สาํ หรับพิมพ์เนื้อความ
 ตัวอักษรทีใ่ ช้ ในการสื่ อสาร: Typeface ตัวอักษรทีใ่ ช้ ในการสื่ อสาร: Typeface
33 34

 Typeface ชนิ ด Sans-serif นั้นจะดีบนหน้าจอคอมพิวเตอร์ หรื อมี

ตัวอักษรอยูจ่ าํ นวนเล็กน้อย และเหมาะใช้สาํ หรับเว็บ
- มีความหมายตรงข้ามกัน คือ ไม่มีขีดที่ปลายอักษร และมีชื่อเรี ยก
อีกอย่างว่าแบบกอทิก (gothic) อักษรชนิดนี้ไม่เหมาะกับการเป็ นเนื้อความ
แต่เหมาะสําหรับใช้พาดหัวหรื อหัวเรื่ องที่เป็ นจุดเด่นซึ่ งมองเพียงครั้งเดียว

Typeface กับ Font การจัดตําแหน่ งย่ อหน้ า (Alignment)

35 36

 จัดแบบชิดซ้ าย (Left)
 ข้อความที่อยูบ่ นเว็บควรจะถูกจัดชิดซ้าย (สําหรับภาษาที่เขียนจากซ้าย
ไปขวา) เพราะว่ามันนั้นแสดงถึงผูอ้ ่านที่อ่านจากซ้ายไปขวาสําหรับ

http://www.marketingoops.com/reports/infographic-reports/infographic-serifs-vs-sans/
 การจัดตําแหน่ งย่ อหน้ า (Alignment)
37 38
 จัดกึง่ กลาง (Center)
 การจัดกึ่งกลาง (Center Alignment) ใช้สาํ หรับหัวข้อที่
ช่วยให้ดูโดดเด่นออกจากเนื้อหาหลักบนหน้าเพจ
 ข้อ ความที่ ถู ก จัด เรี ยงในวิ ธี น้ ี มัก จะพบบนป้ ายหรื อ
ใบปลิ วพยายามที่ จะดึ งดู ด ผูช้ ม แต่ ไม่ ควรจัด กึ่ งกลาง
เนื้ อ หาขนาดใหญ่ บ นเว็บ เพราะว่า มัน จะยากสํา หรั บ
ผูใ้ ช้งานที่จะอ่านมัน การจัดกึ่ งกลางข้อความนั้นสร้ าง
ความแตกต่างในเรื่ องของความกว้าง จากเส้นหนึ่งไปอีก
เส้นหนึ่ง ทําให้มนั ยากสําหรับตาที่จะตามอ่าน
การตัดกันของสี (Contrast)
39 40
 ตัวอักษรสี ชมพูสว่างบนพื้นหลังสี ฟ้าทางด้านซ้ายแสดงการ
ตัด กัน ของสี ที่ ไ ม่ ดี ตัว อัก ษรนั้น ยากที่ จ ะอ่ า น และมองดู
เบลอๆ ทําร้ายตาจริ งๆ
การจัดตําแหน่ งย่ อหน้ า (Alignment)
 จัดชิดขวา (Right)
 บางภาษา (อย่างเช่ นภาษาฮิ บรู ) นั้นจะเขียนจาก
ขวาไปซ้ า ย ทํา ให้ ก ารจั ด ชิ ด ขวานั้ นเป็ นค่ า
default
 สามารถเลื อกที่ จะมี ขอ้ ความจํานวนเล็กน้อยชิ ด
ขวา ดั ง นั้ นมั น จะทํ า ให้ ม ั น ดู โ ดดเด่ น เช่ น
คําอธิบายใต้ภาพ เป็ นต้น
จํานวนของ Font
 กฎโดยทัว่ ไปคือ มันดีที่สุดที่จะไม่ใช้มากกว่าสองหรื อสาม Font
และควรสนั บ สนุ น อารมณ์ แ ละความคิ ด เบื้ อ งหลัง ของการ
ออกแบบ
ที่มา: http://webdesign.tutsplus.com/th/tutorials/web-design-for-kids-typography--cms-24341
The End