Transcript Pull-down Menu

การออกแบบและสร้างเมนู
(Menu Design)
การโต้ตอบด้วยเมนูคาสัง่
(Menu Interaction)
เมนู คือ การเตรียมคาสังส
่ าหรับให้ผใู้ ช้เลือก
เป็ นการโต้ตอบกับระบบด้วยการแสดงเมนูคาสัง่
โดยผูใ้ ช้ไม่จาเป็ นต้องป้อนคาสังเอง
่
รูปแบบเมนูมดี งั นี้ คือ
• Pull-down Menu
• Pop-up Menu
2
Pull-down Menu
Pull-down Menu
เ ม นู แ ส ด ง ค า สั ง่ โ ด ย แ บ่ ง
รายการของคาสังเป็
่ นหมวดหมู่
เมื่อ ผู้ใ ช้ค ลิก จะแสดงรายการ
คาสังจากบนลงล่
่
าง
3
Pop-up Menu
Pop-up Menu เมนูแสดงคาสัง่
เมื่ อ ผู้ ใ ช้ ค ลิ ก เลื อ กวัต ถุ หรื อ
object ใด ๆ ในจอภาพ คาสัง่
หรือ คุ ณ สมบัติ ท่ีเ กี่ย วข้ อ งกับ
object นัน้ จะถูกแสดงออกมา
4
หลักเกณฑ์ในการออกแบบเมนูคาสัง่
1. แต่ละเมนูคาสังควรเลื
่
อกใช้คาสังที
่ ส่ อ่ื ความหมายได้ชดั เจน
2. ควรมีการใช้ตวั อักษรพิมพ์ใหญ่หรือตัวอักษรพิมพ์เล็กตาม
ความเหมาะสม
3. ควรมีการจัดกลุ่มคาสังที
่ ม่ คี วามเกีย่ วข้องกันไว้ในกลุ่มเดียวกัน
4. ไม่ควรมีจานวนเมนูคาสังมากเกิ
่
นไป
5. ควรมีเมนูยอ่ ยสาหรับเมนูคาสังที
่ ม่ กี ารทางานย่อยภายในมาก
เกินไป
6. เมือ่ มีการเลือกเมนูคาสัง่ ควรออกแบบให้มแี ถบสีปรากฏทีเ่ มนู
คาสังที
่ ถ่ ูกเลือก
5
หลักการออกแบบเมนู
1. เลือกแบบของเมนูทเ่ี หมาะสมกับผูใ้ ช้
◦ เมนูแบบฟอร์มรายการให้เลือก (Selection Menu Form)
◦ เมนูแบบดึงลง (Pull-down Menu)
◦ เมนูแบบผุดขึน้ (Pop-up Menu)
 ไม่ใช่รายการเลือกทีม่ าจาก menu bar
 เป็ นรายการเลือกทีจ่ ะผุดขึน้ เมือ่ กดเมาส์ทล่ี กู ศรหลังรายการนัน้
6
หลักการออกแบบเมนู
1. เลือกแบบของเมนูทเ่ี หมาะสมกับผูใ้ ช้
7
เมนูแบบฟอร์มรายการให้เลือก
(Selection Menu Form)
เมนูแบบฟอร์มรายการให้เลือก
(Selection Menu Form)
เมนูแบบดึงลง
(Pull-down Menu)
เมนูแบบผุดขึน้
(Pop-up Menu)
หลักการออกแบบเมนู
2. จัดวางรายการบนเมนูโดยคานึงถึงการใช้งานและความ
ต้องการของผูใ้ ช้ จัดวางโดยแบ่งตามลักษณะ/ประเภทของ
ข้อมูลหลัก เช่น ข้อมูลนักศึกษา ข้อมูลอาจารย์ หรือ
ข้อมูลการดาเนินงานประจาวัน เช่น การซือ้ -ขาย สินค้า
12
หลักการออกแบบเมนู
3. กาหนดเมนูหลักและเมนูยอ่ ย โดยคานึงถึงความเชื่อมโยงของ
การทางานและลักษณะของข้อมูลย่อยหรือการทางานย่อยของ
แต่ละรายการนัน้
4. แต่ละเมนูตอ้ งมีความสัมพันธ์กนั สามารถช่วยให้ผูใ้ ช้เปลีย่ นไป
ยังส่วนการทางานอื่น ๆ ได้อย่างมีระบบ และควรใช้หลักการ
เดียวกันทัง้ หมด เช่น เป็ นภาษาไทยหรือภาษาอังกฤษ เป็ น
ข้อความหรือภาพ เป็ นสีเดียวกันเมือ่ ใช้แทนสิง่ เดียวกัน เป็ น
ต้น
13
การออกแบบการนาทาง
(Navigator Design)
ระบบ Navigation


เป็ นระบบนาทางทีจ่ ะนาผูช้ มไปยังหน้าต่างๆ ของเว็บไซต์ ให้สามารถ
เข้าถึงข้อมูลทีต่ อ้ งการได้อย่างรวดเร็ว และรูว้ า่ กาลังอยู่ตรงไหนของ
เว็บไซต์
นอกจากนี้ยงั ใช้กาหนดบทบาทของผูใ้ ช้ซง่ึ แบ่งเป็ นกลุม่ ๆ ได้ โดยผูใ้ ช้แต่
ละกลุ่มจะสามารถเข้าถึงหน้าเว็บเพจได้อย่างมีขอบเขต ตามสิทธิทว่ี างไว้
เท่านัน้
องค์ประกอบของระบบ Navigation
1.
เครือ่ งนาทางเมนูหลัก เป็ นเมนูสาหรับลิงค์ไปยังหน้าหัวข้อหลักของ
เว็บไซต์ มักอยูใ่ นรูปของลิงค์ทเ่ี ป็ นข้อความหรือภาพกราฟิก และมัก
ถูกจัดวางอยูด่ า้ นบนในเว็บเพจทุกหน้า
2.
เมนูเฉพาะกลุม่ เป็ นเมนูทเ่ี ชื่อโยงเว็บเพจปจั จุบนั กับเว็บเพจ อื่นภายในกลุม่
ย่อยทีม่ ี เนื้อหาเกีย่ วเนื่องกัน มักอยูใ่ นรูปแบบของลิงค์ขอ้ ความหรือกราฟิก
เช่นกัน
3.
เครือ่ งมือเสริม สาหรับช่วยเสริมการทางานของเมนู มีได้หลายรูปแบบ เช่น
ช่องค้นหาข้อมูล (Search Box) , เมนูแบบดร็อปดาวน์ (Drop-Down menu)
, แผนผังเว็บไซต์ (Site Map)

ช่องค้นหาข้อมูล (Search Box)
เป็ นส่วนทีใ่ ช้คน้ หา ทีท่ าให้การค้นหาข้อมูลในเว็บไซต์สะดวกขึน้

เมนูแบบดร็อปดาวน์ (Drop-Down menu)
◦ รายการเลือกแบบดึงลงหมายถึง รายชื่อเมนูทเ่ี มือ่ ใช้เมาส์กดแล้วจะมี
รายการแสดงให้เลือก เช่น ถ้ากดเมาส์ทเ่ี มนู Edit จะมีรายการเลือก
copy, cut, paste ฯ เรียงลงมาให้เลือก

แผนผังเว็บไซต์ (Site Map)
◦ การทาแผนทีเ่ ว็บไซต์ทร่ี ะบุวา่ มีหน้าเว็บต่าง ๆ อยูท่ ่ไี หนบ้าง

1.
2.
3.
4.
5.
6.
7.
8.
ลักษณะของระบบเนวิเกชันที
่ ่ดี
อยูใ่ นตาแหน่งทีเ่ ห็นได้ชดั และเข้าถึงง่าย เช่น ส่วนบนหรือด้านขวาของ
เว็บเพจ
เข้าใจง่ายหรือมีขอ้ ความกากับชัดเจน ผูช้ มใช้ได้ทนั ทีโดยไม่ตอ้ งเสียเวลา
ศึกษา
มีความสม่าเสมอ วางอยูใ่ นตาแหน่งเดียวกันของทุกหน้าเว็บเพจ และใช้
รูปแบบ สีสนั เหมือนกัน ทาให้ผใู้ ช้รสู้ กึ คุน้ เคย
บอกผูใ้ ช้วา่ กาลังอยูท่ ต่ี าแหน่งใดของเว็บไซต์
มีการตอบสนองเมือ่ ใช้งาน เช่น เปลีย่ นสีเมือ่ ผูช้ มชีเ้ มาส์หรือคลิก
จานวนรายการพอเหมาะ ไม่มากเกินไป
มีหลายทางให้เลือกใช้ เช่น เมนูกราฟฟิก , เมนูขอ้ ความ, ช่องค้นหา
ข้อมูล (Search Box), เมนูดร็อปดาวน์ (Drop-down menu) , แผนผัง
เว็บไซต์ (Site Map)
มีลงิ ค์ให้คลิกกลับไปยังโฮมเพจได้เสมอ เพือ่ ให้ผชู้ มกลับไปเริม่ ต้นใหม่ใน
กรณีทห่ี ลงทางไม่รวู้ า่ ตัวเองอยูท่ ต่ี าแหน่งใด

ตัวอย่าง ระบบ Navigation เว็บไซต์รา้ นหนังสือ Asia Books
การออกแบบการทดสอบ
(Test Design)
หรือ User Interface Testing เป็ นการทดสอบ User Interface
ของ application ว่าสามารถเข้าใช้งานได้ทุกเมนู หรือทุกหน้าจอ
หรือไม่ รวมไปถึงหน้าตาของ application เหมาะสมกับการใช้งาน
หรือไม่ ทัง้ ในแง่ความสะดวกและความง่ายในการใช้งาน อาจรวม
ไปถึงการทา User Manual หรือ Troubleshooting document ให้
user เมือ่ user เจอปญั หา ก็จะสามารถใช้ document ช่วยในการ
อ้างอิงได้
การทดสอบความสามารถในการใช้งาน เป็ นการวัดคุณภาพ UI
โดยผูใ้ ช้ (ความประทับใจ, ประสบการณ์) โดยวัดวัตถุประสงค์ของ
การใช้งานว่าตอบโจทย์ผใู้ ช้หรือเปล่า ด้วยคุณสมบัตติ ่อไปนี้
1. Ease of learning ง่ายต่อการเรียนรู้
2. Efficiency of use ผูใ้ ช้ใช้งานได้งา่ ย
3. Memorability ผูใ้ ช้ใช้แล้วจาได้วา่ ใช้ยงั ไง
4. Error frequency and security : ความถีข่ อง error ที่
เกิดขึน้
5. Subjective satisfaction วัดความพึงพอใจของผูใ้ ช้
1. status ของระบบ : ต้องบอกว่าผูใ้ ช้ใช้ระบบอยูใ่ นสถานะอะไร
2. match between system and real world : mapping ระบบเป็ น
ยังไง ความเป็ นจริงต้องเป็ นอย่างนัน้
3. User control and freedom : ผูใ้ ช้สามารถใช้อาจได้อย่างอิสระ
และควบคุม เปลีย่ นแปลงได้
4. Consistency and standards : มีความเป็ นมาตรฐานและคงที่
5. Error prevention : มีการตรวจจับ error ทีอ่ าจจะเกิดขึน้ ได้
6. Recognition : ผูใ้ ช้ไม่ตอ้ งจาอะไรมาก สามารถทาตามต้องการ
ได้ เพียงแค่มองดูกเ็ ข้าใจ
7. Flexibility and Efficiency of use : ใช้งานได้เร็ว/ เปลีย่ น เมนู
หรือสามารถเคลื่อนย้ายได้ตามต้องการ
8. Minimalist design : ทาให้ดงู า่ ย ใช้งานง่าย สบายตา ไม่รก
9. Help/ diagnose and recover form error : มีการแจ้ง error ที่
ชัดเจนว่าเกิดขึน้ ทีไ่ หน, ผิดพลาดอย่างไร และจะแก้ไขได้อย่างไร
10. Help and documentation (guide) : มีเมนู help
1. วาดระบบ / หน้าจอ บนกระดาษ เป็ นการอธิบายขัน้ ตอน ให้
ผูใ้ ช้ฟงั ทาให้ไม่เสียเวลาแก้ไข สามารถแก้ไขได้ทนั ที
2. ทาใน lab / prototype โดยมี software ตรวจจับว่า user
เข้าเมนูอะไรบ้าง
1. ลดการสอบถามของลูกค้าเมือ่ นาไปใช้
2. เพิม่ ความเชื่อในตัวผลิตภัณฑ์ ทาให้ผใู้ ช้เกิดความนิยมใช้
3. เป็ นพืน้ ฐานในการทา ผลิตภัณฑ์ใหม่ๆ
1. ถ้าทาเป็ นกระดาษ อาจเห็นภาพไม่ชดั เจน เช่น เรือ่ งสี
2. การทดสอบอาจไม่สมบูรณ์ เมือ่ มีการทดสอบกับคนจานวน
น้อยๆ
3. การทดสอบในแต่ละครัง้ อาจเป็ นอุปสรรค / ทาได้ยาก จึงต้อง
มีการออกแบบการทดสอบทีด่ ี
1. วัตถุประสงค์ตอ้ งชัดเจน ทดสอบให้ตรงจุด
2. กลุ่มเป้าหมายกับกลุ่มทดสอบ ต้องสอดคล้องกัน
3. มีการสังเกตการณ์อย่างถูกต้อง ไม่ใช่การชีน้ า
4. ข้อมูลทีไ่ ด้ตอ้ งถูกนามาวิเคราะห์
5. มีขอ้ แนะนา/ข้อปรับปรุง ในการพัฒนา
การใช้สีในการออกแบบ
User Interface
หลักการเลือกใช้สีให้เหมาะสม
1.การเลือกสีทีเ่ หมาะสม
การจากัดจานวนของสี ในการออกแบบนัน้ จานวนสีที่ใช้ในหน้ าตาาง UI
นัน้ มีความสาคัญที่จะต้องเลือกสีที่เหมาะสมและไมาเยอะจนเกินไป เพราะ
จะท าให้ ผู้ใ ช้ รู้สึ ก ร าคาญเมื่ อ ใช้ ง าน หรื อ อาจเลื อ กใช้ สี พื้ น หลัง เป็ นสี
เดียวกันทัง้ หมด ทัง้ นี้ ยงั ต้องคานึ งลักษณะและความหมายของสีอีกด้วย
เชาน สีขาว ในบางประเทศอาจหมายถึงความบริสทุ ธ์ ิ สาวนอีกประเทศหรือ
พืน้ ที่อื่นหมายถึงการไว้ทกุ ข์เป็ นต้น
หลักการเลือกใช้สีให้เหมาะสม
2.ความสาคัญของสี
สีเป็ นสาวนที่ดึงดูดความสนใจของผูใ้ ช้ได้งาาย จึงไมาควรให้สีของตัวอักษร
มีความคล้ายคลึงกับสีของพืน้ หลังเพราะจะทาให้ผใู้ ช้มองข้ามหรือไมาเห็น
ข้อความที่จะนาเสนอดังภาพตาอไปนี้
จะเห็นได้วาาทัง้ สองภาพมีความแตกตาางกันในการเลือกใช้สีพืน้ หลังทาให้
ตัวอักษรของอีกภาพมองเห็นได้ชดั เจน
หลักการเลือกใช้สีให้เหมาะสม
การเลือกใช้ สีเพื่อแสดงความสาคัญของสา วนที่ ต้องการเน้ น อยาางเชา น
การเลื อกสี ระหวา างปุา มเปิดให้ เป็ นสี เขี ยวและปุา มปิดการทางานเป็ นสี
แดงเป็ นต้ น ซึ่ งสา วนนี้ การใช้ รปู ทรงตา างๆก็มีความสาคัญเชา นกัน ดังที่
จะแสดงในภาพตาอไปนี้
หลักการเลือกใช้สีให้เหมาะสม
หรือผู้ออกแบบอาจใช้ ภาพอื่ นๆ มาเป็ นภาพพื้นหลังแทนการใช้ เฉดสี
เพียงอยาางเดียวจะทาให้ UI มีความนา าสนใจมากขึน้ กวาาการใช้สีขาวหรือ
เทา มาเป็ นสี พื้นหลังเพียงอยาางเดี ยว นอกจากนั น้ แล้ วยังต้ องคานึ งถึง
การรับรู้สีของมนุษย์หรือความคมชัดของสีที่เลือกใช้
การเลือกรูปแบบการจัดกลุามของสี
รูปแบบการจัดกลุามของสี
Mono (สี โทนเดี ยว) : เป็ นแคาการไลา โทนจากอา อนไปเข้มของสี หลัก
เทา านัน้ ไมาได้มีการใช้ สีอื่นเข้าไปผสมเลย นัน่ คือมีการใช้โทนสีเพียงสี
เดียว
 Complement (สี คาต
ู รงข้าม) : เป็ นการใช้สีตรงข้ามกับสีหลักมาราวม
ด้วย นัน่ คือมีการใช้ โทนสี 2 สี (ซึ่ งปกติเราจะใช้ สีหลักมากบนพื้นที่ ที่
มากกวาา สา วนสี ตรงข้ามใช้ กบั พื้นที่ น้อยกวาา เพื่อไมาให้ สีตรงข้ามเดา น
เกินไป)
 Triad (ชุดสีสามเหลี่ยม) : เป็ นการใช้สีหลัก ราวมกับ สีที่ขนาบข้างของสี
ตรงข้ามของมัน (เราสามารถกาหนดองศาได้ด้วยวาาให้กางสามเหลี่ยม
แคบหรือกว้างขนาดไหน นัน่ คือมีการใช้โทนสี 3 สี

การเลือกรูปแบบการจัดกลุามของสี
Tetrad (ชุดสีสี่เหลี่ยม) : เป็ นการใช้หลักและสีตรงข้าม ราวมกับสีที่
ขนาบข้างของทัง้ สองสี นัน่ คือมีการใช้โทนสีถึง 4 สีด้วยกัน
 Analogic (สีใกล้เคียง) : เป็ นการใช้สีหลักราวมกับสีที่ขนาบข้างมัน
นัน่ คือมีการใช้โทนสี 3 สี
 Accented Analogic (สีใกล้เคียงแบบเน้ น) : เป็ นการใช้สีหลัก
ราวมกับสีที่ขนาบข้างมัน แตามีการเพิ่มสีตรงข้ามของสีหลักเข้ามา
ด้วย นัน่ คือมีการใช้โทนสีทงั ้ หมด 4 สี

แนวโน้ มใหมาของการออกแบบ UI
(New Trend of UI Design)
1. Flat Design
รูปแบบหน้าจอทีด่ เู รียบง่าย ให้ทุกอย่างดูแบนราบ ลดการใช้มติ ิ
เพือ่ ให้ดสู ะอาดตา
Windows 8
Apple iOS7
2. ให้ความสาคัญกับอุปกรณ์สื่อสารในปัจจุบนั
เนื่องจากผูใ้ ช้โทรศัพท์สมาร์ทโฟนและแท็บเล็ตมีเพิม่ ขึน้ เรือ่ ยๆ
การออกแบบมาเพือ่ ให้ใช้งานกับอุปกรณ์เหล่านี้เป็ นเรือ่ งสาคัญ นัก
ออกแบบพยายามค้นหาวิธที ผ่ี ใู้ ช้สามารถใช้งานกับมันอย่างง่ายดาย
ด้วยหน้าจอขนาดเล็ก
3. ออกแบบ INTERACTIVE ด้วย HTML5
ในปจั จุบนั Modern Browser ทุกตัวรองรับ HTML5 และในปจั จุบนั
Flash เริ่ ม ไม่ ไ ด้ ร ั บ ความนิ ย ม เพราะไม่ ส ามารถใช้ ง านได้ ใ น
Smartphone, Tablet บางรุ่น ทาให้ HTML5 ได้รบั ความนิยม ด้วย
ความที่ HTML5 เล่นใน iPhone / Android ได้ไม่มตี ดิ ขัด รวมถึงมี
Tool, Library ออกมารองรับมากมาย ทาให้การทา Interactive ด้วย
HTML5 สะดวกและรวดเร็ว
indyourwaytooz.com
4. ออกแบบ FLAT DESIGN เน้ นแสดงข้อมูล
หลายเว็บฯ ใช้รปู ภาพและไอคอนในการให้ขอ้ มูลกับผูใ้ ช้แทนการ
สือ่ สารด้วยข้อความอักษร แต่การเลีย่ งไม่ใช้ตวั อักษรเลยจะทาให้เว็บฯ
เป็ นเสมือนแกลอรีแ่ สดงภาพธรรมดานัน้
5. ใช้การนาทางที่เรียบงาาย
การนาทางแบบ Stripped-down navigation หรือแสดงให้ผใู้ ช้เห็น
การนาทางภายในเว็บฯ เป็ นรูปแบบทีไ่ ด้รบั ความนิยม อันเนื่องมาจาก
การออกแบบเพือ่ ใช้กบั มือถือ จะทาให้ผใู้ ช้โฟกัสกับไอคอนและหน้า
เว็บไซต์ทก่ี าลังรับชมมากขึน้
6. การนา CSS แทนภาพ
CSS มีประสิทธิภาพเพิม่ ขึน้ และมีความยืดหยุน่ สูงกว่าการใช้ภาพ
แถมการแก้ไขก็ยงั ทาได้งา่ ยและรวดเร็วกว่า จึงเป็ นอีกแนวทางที่ดกี บั
ผูอ้ อกแบบ
7. การนาวิดีโอหรือภาพเคลื่อนไหวเป็ น
ภาพพืน้ หลัง
ตอนนี้ เรามั ก จะเห็ น รู ป แบบนี้ ม ากขึ้ น ในปี 2014 โดย The
Guardian เป็ น อี ก หนึ่ ง ตัว อย่ า งที่ม ีก ารใช้ วิดี โ อเป็ น แบล็ ค กราวน์
แสดงให้ผใู้ ช้เข้าถึงได้มากกว่าเนื้อหาธรรมดา
8. การใช้ SVG เป็ นกราฟิกบนเว็บไซต์
Icon Font เริม่ มีปญั หา เพราะต้องใช้กบั CSS3 @font-face ซึ่งถ้า
บราวเซอร์ไม่รองรับ และเรียกไฟล์ไอคอนจากโฮสต์อ่นื ก็จะทาให้ Firefox
บล็อค Icon Font
การใช้ Vector Graphic บนเว็บไซต์จงึ เปลีย่ น มาเป็ น SVG ซึง่ เป็ นนามสกุล
Vector ทีส่ ามารถอ่านบน Browser ได้ และมีขอ้ ดีนอกจากทีเ่ ป็ น Vector
เส้นไม่แตกแล้ว ยังสามารถเอามา Animate ได้
9. One Page Web Design
การทาให้หน้าแรกหน้าเดียวมีขอ้ มูลครบทุกอย่าง หลายเว็บฯ
พยายามเลีย่ งการโหลดหน้าเพจขึน้ มาใหม่ โดยการแสดง content ใน
หน้าปจั จุบนั ใช้สแี ละแสงเงามาใช้เน้นเนื้อหา ซึง่ จะช่วยลดปริมาณการ
คลิกของผูใ้ ช้ลงได้เป็ นอย่างดี
ร้ านค้ าออนไลน์ จาก H&M
10. การใช้โทนสีให้ดึงดูผใ้ ู ช้
ไม่นิยมใช้หลายๆ สี แต่จะใช้โทนสีทต่ี ดั กัน หรือเข้าคู่กนั ก็สามารถ
ทาให้เว็บไซต์ดสู วยงามได้
Qatar Airways