Designing web navigation

รูป แบบของระบบเนวิ
เกชัน

รูป แบบของระบบเนวิเ กชัน
• ระบบเนวิเ กชัน แบบลำำ ดับ ชัน
้
(Hierachical)
• ระบบเนวิเ กชัน แบบโกลบอล (Global)
• ระบบเนวิเ กชัน แบบโลคอล (Local)
• ระบบเนวิเ กชัน เฉพำะที่ (Ad Hoc)

1. ระบบเนวิเ กชัน แบบลำำ ดับ
ชัน (Hierachical)
้
• เป็น แบบพืน ฐำนที่ส ว นใหญ่ม ัก ใช้ก ัน อยู่
้ ่
แล้ว
• แสดงแบบบน ลงล่ำ ง เช่น กำรคลิก จำก
หน้ำ Homepage ไปยัง หน้ำ ใน
• มีข ้อ จำำ กัด คือ เคลื่อ นที่เ ฉพำะแนวตั้ง คือ
บน-ล่ำ ง

2. ระบบเนวิเ กชัน แบบ
โกลบอล (Global)
• หรือ เรีย กว่ำ แบบตลอดทั้ง เว็บ ไซต์
• ช่ว ยเสริม ข้อ จำำ กัด ของระบบแรก
• ให้ย ำ ยในแนวนอนได้อ ย่ำ งมี
้
ประสิท ธิภ ำพตลอดทั้ง เว็บ
• ใช้เ ป็น ลิง ค์ไ ปยัง ส่ว นหลัก ของเว็บ
• อยูใ นรูป แบบเนวิเ กชัน บำร์ด ำ นบนหรือ
่ ้
ด้ำ นล่ำ งของเว็บ
• ควรมีล ิง ค์ก ลับ มำหน้ำ แรก
• ผู้ค วรนิย มอ่ำ นจำกซ้ำ ยไปขวำ
• กำรจัด วำงลิง ค์ส ห น้ำ แรกไว้ซ ้ำ ยสุด จะดี
ู่

2. ระบบเนวิเ กชัน แบบ
โกลบอล (Global)
• ตำำ แหน่ง ที่ด ีท ี่ส ุด คือ ด้ำ นบนหรือ ล่ำ ง
สุด ไม่ใ ช่ด ้ำ นข้ำ ง
• ด้ำ นบน : มองเห็น ทัน ที ชี้แ นะไปยัง
แหล่ง ข้อ มูล ได้ร วดเร็ว
• ด้ำ นล่ำ ง : ไม่ต ้อ งเลื่อ นขึ้น ไปคลิก
ข้ำ งบน กรณีห น้ำ ยำวมำก
• เนวิเ กชัน แบบนี้ต ้อ งมีอ ยู่ท ี่ด ้ำ นบน
ของทุก ๆหน้ำ
• ด้ำ นล่ำ งจะมีห รือ ไม่ม ีก ็ไ ด้ข ึ้น กับ

3. ระบบเนวิเ กชัน แบบโล
คอล (Local)
• ใช้ส ำำ หรับ เว็บ ที่ซ ับ ซ้อ นมำก
• เช่น หัว ข้อ ย่อ ยของเนื้อ หำที่อ ยูภ ำยใน
่
ส่ว นหลัก ๆ ของเว็บ
• เพิ่ม ควำมสะดวกและสือ ควำมหมำยให้
่
ดีข ึ้น

4. ระบบเนวิเ กชัน เฉพำะที่
(Ad Hoc)
• ใช้แ บบเฉพำะที่ต ำมควำมจำำ เป็น ของเนือ หำ ้
• ลิง ค์ข องคำำ ที่น ำ สนใจฝัง แบบ Embedded
่
link เชือ มไปยัง หน้ำ รำยละเอีย ดข้อ มูล เพิ่ม
่
เติม
• มัก ใช้ค ำำ แทน url ลิง ค์
• ไม่ส ร้ำ งมำกจนรก
• เป็น รูป แบบที่แ สดงผลได้ด ีไ ม่เ ด่น ชัด เกิน ไป
• ไม่ร บกวนสำยตำ
• แต่ข อ เสีย อำจถูก มองข้ำ มได้ร วดเร็ว
้
• ทำงแก้ ใช้ส ท ี่แ ตกต่ำ งหรือ ทำำ เป็น ลิง ค์เ พิ่ม
ี
ในส่ว นด้ำ นบนหรือ ล่ำ งเพจ

องค์ป ระกอบของระบบเนวิเ ก
ชัน หลัก
1. เนวิเ กชัน บาร์ (Navigation Bar) : กลุ่ม
ของลิง ค์ เป็น ตัว หนัง สือ หรือ กราฟิก
นิย มมาที่ส ด ุ
2. เนวิเ กชัน บาร์ร ะบบเฟรม (Frame-Base) :
สร้า งลิง ค์จ ากเฟรมควบคุม ทุก หน้า
3. Pull-Down Menu : เป็น ส่ว นประกอบ
ของฟอร์ม มีร ายการให้เ ลือ กมากมาย แต่
ใช้พ ื้น ที่น ้อ ย เข้า ถึง รายการย่อ ยได้
สะดวก
4. Pop-Up Menu : ปรากฎรายการเมนู
ย่อ ยๆ เมือ เอาเมาส์ไ ปวาง ใช้จ าวา
่
สคริป ต์ ช่ว ยให้เ พจดูไ ม่ร ก ประหยัด พื้น ที่
5. Image Map : ใช้ร ูป กราฟิก เป็น ลิง ค์แ บบ

องค์ป ระกอบของระบบบเนวิเ ก
ชัน เสริม
1. ระบบสารบัญ (Table of
Contens) แสดงภาพรวม
ของเว็บ ไซต์
2. ระบบดัช นี (Index System)
3. แผนที่เ ว็บ ไซต์ (Site Map)
4. ไกด์ท ัว ร์ (Guide Tour)

• ระบบสารบัญ (Table of Contens) แสดง
ภาพรวมของเว็บ ไซต์

• ระบบดัช นี (Index System)

การทำา ดัช นีข องเว็บ ไซท์
• พิจ ารณาถึง สิง ที่ผ ใ ช้ส นใจและต้อ งการหา
่ ู้
• สำา รวจเนือ หาในเว็บ ไซท์ และเขีย นราย
้
ชือ ของเนือ หาที่ สำา คัญ ออกมาคร่า ว ๆ
่ ้
ก่อ น
• รวมรายชือ ที่ม ค วามหมายใกล้เ คีย งกัน ไว้
่ ี
ภายใต้ช อ เดีย วกัน เช่น “Product
ื่
Information” และ “Product Pictures”
ก็ค วรรวมเป็น “Products”
• พิจ ารณาถึง การสลับ คำา เช่น “Bangkok
Map” และ “Map, Bangkok” เพื่อ ให้ผ ใ ช้ ู้

แผนที่เ ว็บ ไซท์ (Site Map)
• แผนที่เ ว็บ ไซท์เ ป็น การแสดงโครงสร้า ง
ข้อ มูล ในเว็บ ไซท์แ บบกราฟิก

ไกด์ท ัว ร์ (Guided Tour)
• ไกด์ท ัว ร์เ ป็น วิธ ก ารนำา เสนอที่เ หมาะ
ี
สำา หรับ ผูใ ช้ห น้า ใหม่ เพื่อ แนะนำา การใช้
้
งานที่ซ ับ ซ้อ น หรือ เป็น เครื่อ งจูง ใจให้
สมัค รเป็น สมาชิก
• ควรสร้า งลิง ค์ไ ปหาไกด์ท ัว ร์เ อาไว้ท ี่ห น้า
แรกของเว็บ ไซท์
• ไม่ค วรบัง คับ ให้ท ุก คนผ่า นส่ว นไกด์ท ัว ร์
ทุก ครั้ง

การออกแบบระบบเนวิเ กชัน
ของเว็ก ไซท์
การสร้า งระบบเนวิเ กชัน หลั
บ
– การจัด ระบบข้อ มูล ภายในเว็บ ไซท์ ควรมีท างเลือ ก
ไม่เ กิน 8-10 ทางในแต่ล ะหน้า
– ผู้ใ ช้ค วรเข้า ถึง ข้อ มูล ใด ๆ ด้ว ยการคลิก ไม่เ กิน
2-3 ครั้ง
การสร้า งระบบเนวิเ กชัน เสริม
– เลือ กระหว่า งระบบสารบัญ ดัช นี หรือ แผนทีเ ว็บ ่
ไซท์ โดยพิจ ารณาตามลัก ษณะของโครงสร้า งข้อ มูล
• ระบบสารบัญ -> ข้อ มูล แบ่ง เป็น ลำา ดับ ชั้น ชัด เจน
• ดัช นี -> ข้อ มูล กระจัด กระจายไม่เ ป็น ระบบ
• แผนทีเ ว็บ ไซท์ -> ข้อ มูล สามารถสื่อ ถึง ภาพ
่
ลัก ษณ์ข องตัว มัน เองได้
– พิจ ารณาถึง ความจำา เป็น ในการใช้ไ กด์ท ว ร์ ั

การออกแบบระบบเนวิเ กชัน
ของเว็บ ไซท์
• เนวิเ กชัน แบบกราฟิก VS ตัว อัก ษร
– กราฟิก ดูส วยกว่า ตัว อัก ษร แต่ก ารแสดงผล
หน้า เว็บ จะช้า ตาม
ขนาดไฟล์ข องกราฟิก
– เพิม เติม รายการเมนูแ บบตัว อัก ษรง่า ยกว่า
่
แบบกราฟิก
– การใช้เ นวิเ กชัน แบบตัว อัก ษรเป็น สิ่ง ที่ง า ย
่
ทีส ด และยัง สือ ความหมายได้ด ีท ส ด
่ ุ ่ ี่ ุ
• เนวิเ กชัน แบบกราฟิก พร้อ มคำา อธิบ าย
– เลือ กใช้ไ อคอนหรือ กราฟิก เป็น เนวิเ กชัน ก็
ควรมีค ำา อธิบ ายกำา กับ ด้ว ยทุก ครั้ง

พื้น ฐานของระบบเนวิเ กชัน
• ตอนนีก ำา ลัง อยู่ท ี่ไ หน
้
• จากนี้ส ามารถไปที่ไ หนได้บ า ง้
• ไปสูท ี่ต ่า ง ๆ ได้อ ย่า งไร
่
• หลัง จากไปที่อ ื่น แล้ว จะกลับ มาที่เ ดิม ได้
อย่า งไร
• ได้ผ า นที่ไ หนมาบ้า งแล้ว
่

คุณ สมบัต ิส ำา คัญ ของระบบเนวิ
เกชัน
1. เข้า ใจง่า ย
2. มีค วามสมำ่า เสมอ
3. มีก ารตอบสนองต่อ ผูใ ช้ ้
4. มีค วามพร้อ มและเหมาะสมต่อ การใช้ง าน
5. นำา เสนอหลายทางเลือ ก
6. มีข ั้น ตอนสัน และประหยัด เวลา
้
7. มีร ูป แบบที่ส อ ความหมาย
ื่
8. มีค ำา อธิบ ายที่ช ด เจนและเข้า ใจได้ง ่า ย
ั
9. เหมาะสมกับ วัต ถุป ระสงค์ข องเว็บ ไซท์
10. สนับ สนุน เป้า หมายและพฤติก รรมของผู้
ใช้

เข้า ใจง่า ย
•การเข้า ถึง เนื้อ หาไม่ค วร
ลึก ลับ ซับ ซ้อ น
•สร้า งระบบเนวิเ กชัน ให้
ชัด เจนและง่า ยต่อ การ
เข้า ใจ

มีค วามสมำ่า เสมอ
• ควรให้อ ยูใ นตำา แหน่ง สมำ่า เสมอตลอด
่
ทั้ง เว็บ ไซต์เ พื่อ สร้า งความคุ้น เคย
• ใช้ร ะบบเนวิเ กชัน ที่ม ีร ูป แบบเดีย วกัน
ทั้ง ลัก ษณะ จำา นวนรายการ ลำา ดับ
ของรายการ
• อย่า ใช้จ ำา นวนรายการที่ม ากเกิน ไป
• หลีก เลี่ย งการใช้ค ำา ทีม ีค วามหมาย
่
ใกล้เ คีย งกัน เมื่อ พูด ถึง สิ่ง เดีย วกัน
เช่น Clients กับ Projects หรือ

มีก ารตอบสนองต่อ ผู้
ใช้ ก ษณะของ
• เช่น การสร้า งสีห รือ ลั
รายการปัจ จุบ น เพื่อ ให้ต ่า งไปจาก
ั
รายการอื่น
• ควรตัด ลิง ค์ท ี่จ ะนำา ไปสู่ห น้า ของตัว
เองออกเพื่อ ไม่ใ ห้เ กิด ความสับ สน
• ระบบเนวิเ กชัน ควรบอกให้ร ู้ว ่า หน้า
ไหนที่ไ ด้ผ ่า นเข้า ไปแล้ว บ้า ง
• การใช้เ ทคนิค เช่น onMouseDown
และ onMouseUp

มีค วามพร้อ มและเหมาะสมต่อ
การใช้ง าน
• อยู่ใ นตำา แหน่ง ที่ม องเห็น ได้ช ด เจน
ั
• นิย มวางไว้ข ้า งบนหรือ ด้า นซ้า ยมือ
ของหน้า
• เนวิเ กชัน ควรอยู่ใ นทุก แห่ง ที่ต ้อ งการ
เพือ ไม่ใ ห้ผ ู้ใ ช้ห ัน ไปใช้ป ุ่ม Back ของ
่
บราวเซอร์
• ผู้อ อกแบบต้อ งพยายามคิด แทนผู้ใ ช้
ว่า เมื่อ เขาทำา กิจ กรรมบางอย่า งเสร็จ

นำา เสนอหลายทาง
เลือ ก
• ผู้ใ ช้แ ตกต่า งแต่ล ะแบบ ดัง นั้น
ควรจัด ระบบเนวิเ กชัน ไว้ห ลายรูป
แบบในการเข้า ถึง ข้อ มูล เดีย วกัน
• โดยอาจจัด ทำา สารบัญ , site map
หรือ Search box
• เพราะผู้ใ ช้บ างคนใช้ร ะบบสืบ ค้น
สิ่ง ทีต ้อ งการได้ร วดเร็ว ซึ่ง ตรง
่
ข้า มกับ อีก กลุ่ม ที่ช อบคลิก ไป

มีข น ตอนสั้น และ
ั้
ประหยัดทีเวลา
• ให้ผ ู้ใ ช้เ ข้า ถึง ข้อ มูล ่ต ้อ งการ
โดยผ่า นขั้น ตอนทีส ั้น และ
่
ประหยัด เวลาที่ส ด ุ
• จากการศึก ษาพบว่า จำา นวน
รายการในหนึ่ง เมนูไ ม่ค วรเกิน
จำา นวน 8-10 รายการ เพือ ให้ ่
ตัด สิน ใจเลือ กรายการได้ง ่า ย
• การมี Navigation Shortcut ให้
สู่เ ป้า หมายเร็ว ขึ้น เช่น Sitemap ,

มีร ูป แบบที่ส ื่อ ความ
หมาย บ
• ออกแบบเนวิเ กชัน ให้เ หมาะสมกั
Interface มองเห็น ได้ช ด เจนว่า เป็น เนวิเ ก
ั
ชัน
• หาเจอง่า ย ไม่ก ลืน ไปกับ รูป และตัว หนัง สือ
• ขนาด สี ตำา แหน่ง ลัก ษณะและการ
เคลื่อ นไหวขององค์ป ระกอบในเว็บ ช่ว ย
สือ ความหมายถึง ความสำา คัญ ของเนือ หา
่ ้
ต่า งๆให้ผ ใ ช้ไ ด้ร ู้
ู้
• ไม่จ ำา เป็น ต้อ งใช้ “โปรดคลิก ที่น เ พื่อ เข้า สู่
ี่
รายละเอีย ด” แต่ท ำา ตัว อัก ษรส่ว นนัน ให้ม ส ี
้ ี

มีค ำา อธิบ ายที่ช ัด เจน
และเข้า ใจง่า ย
• ไม่ค วรเลือ กใช้ค ำา ย่อ ที่เ ข้า ใจได้
ยาก พยายามเลือ กใช้ค ำา ที่ม ีค วาม
หมายชัด เจนและเฉพาะเจาะจง
ให้ม าก
• การใช้ค ำา อธิบ ายที่ช ัด เจนแสดง
ถึง เป้า หมายของลิง ค์น น จะช่ว ย
ั้
ให้ผ ู้ใ ช้เ ข้า ใจเนื้อ หาได้ด ีข ึ้น

มีค วามเหมาะสมกับ
วัต ถุป ระสงค์ข องเว็บ ไซต์
• เช่น เว็บ ไซต์ข ายของมีเ ป้า หมาย
ให้ผ ู้ใ ช้ส ามารถซื้อ สิน ค้า ได้อ ย่า ง
สะดวก จึง ควรสร้า งเนวิเ กชัน ที่
ง่า ยในการเข้า ถึง รายละเอีย ด
ของสิน ค้า ค้น หาง่า ย
• เนวิเ กชัน ที่เ หมาะสมกับ เป้า หมาย
ของเว็บ ไซต์จ ะช่ว ยสนับ สนุน ให้ผ ู้
ใช้บ รรลุค วามต้อ งการ

สนับ สนุน เป้า หมายและ
พฤติก รรมของผู้ใ ช้
• คุย กับ ลูก ค้า ว่า ต้อ งการระบบแบบ
ใด
• การให้ค วามสำา คัญ จากเสีย ง
สะท้อ นของลูก ค้า จะนำา ไปสู่
แนวทางใหม่ใ นการดำา เนิน ธุร กิจ
เช่น เว็บ Amazon ทีป ระสบความ
่
สำา เร็จ จากการการรับ ฟัง ความคิด
เห็น ของลูก ค้า

Designing web navigation

More Related Content

Similar to Designing web navigation (20)

More from Attaporn Ninsuwan (20)

Designing web navigation