Your SlideShare is downloading. ×
0
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Designing web navigation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing web navigation

301

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
301
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. รูป แบบของระบบเนวิ เกชัน
  • 2. รูป แบบของระบบเนวิเ กชัน• ระบบเนวิเ กชัน แบบลำำ ดับ ชัน ้ (Hierachical)• ระบบเนวิเ กชัน แบบโกลบอล (Global)• ระบบเนวิเ กชัน แบบโลคอล (Local)• ระบบเนวิเ กชัน เฉพำะที่ (Ad Hoc)
  • 3. 1. ระบบเนวิเ กชัน แบบลำำ ดับ ชัน (Hierachical) ้• เป็น แบบพืน ฐำนที่ส ว นใหญ่ม ัก ใช้ก ัน อยู่ ้ ่ แล้ว• แสดงแบบบน ลงล่ำ ง เช่น กำรคลิก จำก หน้ำ Homepage ไปยัง หน้ำ ใน• มีข ้อ จำำ กัด คือ เคลื่อ นที่เ ฉพำะแนวตั้ง คือ บน-ล่ำ ง
  • 4. 2. ระบบเนวิเ กชัน แบบ โกลบอล (Global)• หรือ เรีย กว่ำ แบบตลอดทั้ง เว็บ ไซต์• ช่ว ยเสริม ข้อ จำำ กัด ของระบบแรก• ให้ย ำ ยในแนวนอนได้อ ย่ำ งมี ้ ประสิท ธิภ ำพตลอดทั้ง เว็บ• ใช้เ ป็น ลิง ค์ไ ปยัง ส่ว นหลัก ของเว็บ• อยูใ นรูป แบบเนวิเ กชัน บำร์ด ำ นบนหรือ ่ ้ ด้ำ นล่ำ งของเว็บ• ควรมีล ิง ค์ก ลับ มำหน้ำ แรก• ผู้ค วรนิย มอ่ำ นจำกซ้ำ ยไปขวำ• กำรจัด วำงลิง ค์ส ห น้ำ แรกไว้ซ ้ำ ยสุด จะดี ู่
  • 5. 2. ระบบเนวิเ กชัน แบบ โกลบอล (Global)• ตำำ แหน่ง ที่ด ีท ี่ส ุด คือ ด้ำ นบนหรือ ล่ำ ง สุด ไม่ใ ช่ด ้ำ นข้ำ ง• ด้ำ นบน : มองเห็น ทัน ที ชี้แ นะไปยัง แหล่ง ข้อ มูล ได้ร วดเร็ว • ด้ำ นล่ำ ง : ไม่ต ้อ งเลื่อ นขึ้น ไปคลิก ข้ำ งบน กรณีห น้ำ ยำวมำก • เนวิเ กชัน แบบนี้ต ้อ งมีอ ยู่ท ี่ด ้ำ นบน ของทุก ๆหน้ำ • ด้ำ นล่ำ งจะมีห รือ ไม่ม ีก ็ไ ด้ข ึ้น กับ
  • 6. 3. ระบบเนวิเ กชัน แบบโล คอล (Local)• ใช้ส ำำ หรับ เว็บ ที่ซ ับ ซ้อ นมำก• เช่น หัว ข้อ ย่อ ยของเนื้อ หำที่อ ยูภ ำยใน ่ ส่ว นหลัก ๆ ของเว็บ• เพิ่ม ควำมสะดวกและสือ ควำมหมำยให้ ่ ดีข ึ้น
  • 7. 4. ระบบเนวิเ กชัน เฉพำะที่ (Ad Hoc)• ใช้แ บบเฉพำะที่ต ำมควำมจำำ เป็น ของเนือ หำ ้• ลิง ค์ข องคำำ ที่น ำ สนใจฝัง แบบ Embedded ่ link เชือ มไปยัง หน้ำ รำยละเอีย ดข้อ มูล เพิ่ม ่ เติม• มัก ใช้ค ำำ แทน url ลิง ค์• ไม่ส ร้ำ งมำกจนรก• เป็น รูป แบบที่แ สดงผลได้ด ีไ ม่เ ด่น ชัด เกิน ไป• ไม่ร บกวนสำยตำ• แต่ข อ เสีย อำจถูก มองข้ำ มได้ร วดเร็ว ้• ทำงแก้ ใช้ส ท ี่แ ตกต่ำ งหรือ ทำำ เป็น ลิง ค์เ พิ่ม ี ในส่ว นด้ำ นบนหรือ ล่ำ งเพจ
  • 8. องค์ป ระกอบของระบบเนวิเ ก ชัน หลัก1. เนวิเ กชัน บาร์ (Navigation Bar) : กลุ่ม ของลิง ค์ เป็น ตัว หนัง สือ หรือ กราฟิก นิย มมาที่ส ด ุ2. เนวิเ กชัน บาร์ร ะบบเฟรม (Frame-Base) : สร้า งลิง ค์จ ากเฟรมควบคุม ทุก หน้า3. Pull-Down Menu : เป็น ส่ว นประกอบ ของฟอร์ม มีร ายการให้เ ลือ กมากมาย แต่ ใช้พ ื้น ที่น ้อ ย เข้า ถึง รายการย่อ ยได้ สะดวก4. Pop-Up Menu : ปรากฎรายการเมนู ย่อ ยๆ เมือ เอาเมาส์ไ ปวาง ใช้จ าวา ่ สคริป ต์ ช่ว ยให้เ พจดูไ ม่ร ก ประหยัด พื้น ที่5. Image Map : ใช้ร ูป กราฟิก เป็น ลิง ค์แ บบ
  • 9. องค์ป ระกอบของระบบบเนวิเ ก ชัน เสริม1. ระบบสารบัญ (Table of Contens) แสดงภาพรวม ของเว็บ ไซต์2. ระบบดัช นี (Index System)3. แผนที่เ ว็บ ไซต์ (Site Map)4. ไกด์ท ัว ร์ (Guide Tour)
  • 10. องค์ป ระกอบของระบบบเนวิเ ก ชัน เสริม• ระบบสารบัญ (Table of Contens) แสดง ภาพรวมของเว็บ ไซต์
  • 11. องค์ป ระกอบของระบบบเนวิเ ก ชัน เสริม• ระบบดัช นี (Index System)
  • 12. การทำา ดัช นีข องเว็บ ไซท์• พิจ ารณาถึง สิง ที่ผ ใ ช้ส นใจและต้อ งการหา ่ ู้• สำา รวจเนือ หาในเว็บ ไซท์ และเขีย นราย ้ ชือ ของเนือ หาที่ สำา คัญ ออกมาคร่า ว ๆ ่ ้ ก่อ น• รวมรายชือ ที่ม ค วามหมายใกล้เ คีย งกัน ไว้ ่ ี ภายใต้ช อ เดีย วกัน เช่น “Product ื่ Information” และ “Product Pictures” ก็ค วรรวมเป็น “Products”• พิจ ารณาถึง การสลับ คำา เช่น “Bangkok Map” และ “Map, Bangkok” เพื่อ ให้ผ ใ ช้ ู้
  • 13. แผนที่เ ว็บ ไซท์ (Site Map)• แผนที่เ ว็บ ไซท์เ ป็น การแสดงโครงสร้า ง ข้อ มูล ในเว็บ ไซท์แ บบกราฟิก
  • 14. ไกด์ท ัว ร์ (Guided Tour)• ไกด์ท ัว ร์เ ป็น วิธ ก ารนำา เสนอที่เ หมาะ ี สำา หรับ ผูใ ช้ห น้า ใหม่ เพื่อ แนะนำา การใช้ ้ งานที่ซ ับ ซ้อ น หรือ เป็น เครื่อ งจูง ใจให้ สมัค รเป็น สมาชิก• ควรสร้า งลิง ค์ไ ปหาไกด์ท ัว ร์เ อาไว้ท ี่ห น้า แรกของเว็บ ไซท์• ไม่ค วรบัง คับ ให้ท ุก คนผ่า นส่ว นไกด์ท ัว ร์ ทุก ครั้ง
  • 15. การออกแบบระบบเนวิเ กชัน ของเว็ก ไซท์การสร้า งระบบเนวิเ กชัน หลั บ – การจัด ระบบข้อ มูล ภายในเว็บ ไซท์ ควรมีท างเลือ ก ไม่เ กิน 8-10 ทางในแต่ล ะหน้า – ผู้ใ ช้ค วรเข้า ถึง ข้อ มูล ใด ๆ ด้ว ยการคลิก ไม่เ กิน 2-3 ครั้งการสร้า งระบบเนวิเ กชัน เสริม – เลือ กระหว่า งระบบสารบัญ ดัช นี หรือ แผนทีเ ว็บ ่ ไซท์ โดยพิจ ารณาตามลัก ษณะของโครงสร้า งข้อ มูล • ระบบสารบัญ -> ข้อ มูล แบ่ง เป็น ลำา ดับ ชั้น ชัด เจน • ดัช นี -> ข้อ มูล กระจัด กระจายไม่เ ป็น ระบบ • แผนทีเ ว็บ ไซท์ -> ข้อ มูล สามารถสื่อ ถึง ภาพ ่ ลัก ษณ์ข องตัว มัน เองได้– พิจ ารณาถึง ความจำา เป็น ในการใช้ไ กด์ท ว ร์ ั
  • 16. การออกแบบระบบเนวิเ กชัน ของเว็บ ไซท์• เนวิเ กชัน แบบกราฟิก VS ตัว อัก ษร – กราฟิก ดูส วยกว่า ตัว อัก ษร แต่ก ารแสดงผล หน้า เว็บ จะช้า ตาม ขนาดไฟล์ข องกราฟิก – เพิม เติม รายการเมนูแ บบตัว อัก ษรง่า ยกว่า ่ แบบกราฟิก – การใช้เ นวิเ กชัน แบบตัว อัก ษรเป็น สิ่ง ที่ง า ย ่ ทีส ด และยัง สือ ความหมายได้ด ีท ส ด ่ ุ ่ ี่ ุ• เนวิเ กชัน แบบกราฟิก พร้อ มคำา อธิบ าย – เลือ กใช้ไ อคอนหรือ กราฟิก เป็น เนวิเ กชัน ก็ ควรมีค ำา อธิบ ายกำา กับ ด้ว ยทุก ครั้ง
  • 17. พื้น ฐานของระบบเนวิเ กชัน• ตอนนีก ำา ลัง อยู่ท ี่ไ หน ้• จากนี้ส ามารถไปที่ไ หนได้บ า ง้• ไปสูท ี่ต ่า ง ๆ ได้อ ย่า งไร ่• หลัง จากไปที่อ ื่น แล้ว จะกลับ มาที่เ ดิม ได้ อย่า งไร• ได้ผ า นที่ไ หนมาบ้า งแล้ว ่
  • 18. คุณ สมบัต ิส ำา คัญ ของระบบเนวิ เกชัน1. เข้า ใจง่า ย2. มีค วามสมำ่า เสมอ3. มีก ารตอบสนองต่อ ผูใ ช้ ้4. มีค วามพร้อ มและเหมาะสมต่อ การใช้ง าน5. นำา เสนอหลายทางเลือ ก6. มีข ั้น ตอนสัน และประหยัด เวลา ้7. มีร ูป แบบที่ส อ ความหมาย ื่8. มีค ำา อธิบ ายที่ช ด เจนและเข้า ใจได้ง ่า ย ั9. เหมาะสมกับ วัต ถุป ระสงค์ข องเว็บ ไซท์10. สนับ สนุน เป้า หมายและพฤติก รรมของผู้ ใช้
  • 19. เข้า ใจง่า ย•การเข้า ถึง เนื้อ หาไม่ค วร ลึก ลับ ซับ ซ้อ น•สร้า งระบบเนวิเ กชัน ให้ ชัด เจนและง่า ยต่อ การ เข้า ใจ
  • 20. มีค วามสมำ่า เสมอ• ควรให้อ ยูใ นตำา แหน่ง สมำ่า เสมอตลอด ่ ทั้ง เว็บ ไซต์เ พื่อ สร้า งความคุ้น เคย• ใช้ร ะบบเนวิเ กชัน ที่ม ีร ูป แบบเดีย วกัน ทั้ง ลัก ษณะ จำา นวนรายการ ลำา ดับ ของรายการ• อย่า ใช้จ ำา นวนรายการที่ม ากเกิน ไป• หลีก เลี่ย งการใช้ค ำา ทีม ีค วามหมาย ่ ใกล้เ คีย งกัน เมื่อ พูด ถึง สิ่ง เดีย วกัน เช่น Clients กับ Projects หรือ
  • 21. มีก ารตอบสนองต่อ ผู้ ใช้ ก ษณะของ• เช่น การสร้า งสีห รือ ลั รายการปัจ จุบ น เพื่อ ให้ต ่า งไปจาก ั รายการอื่น• ควรตัด ลิง ค์ท ี่จ ะนำา ไปสู่ห น้า ของตัว เองออกเพื่อ ไม่ใ ห้เ กิด ความสับ สน• ระบบเนวิเ กชัน ควรบอกให้ร ู้ว ่า หน้า ไหนที่ไ ด้ผ ่า นเข้า ไปแล้ว บ้า ง• การใช้เ ทคนิค เช่น onMouseDown และ onMouseUp
  • 22. มีค วามพร้อ มและเหมาะสมต่อ การใช้ง าน• อยู่ใ นตำา แหน่ง ที่ม องเห็น ได้ช ด เจน ั• นิย มวางไว้ข ้า งบนหรือ ด้า นซ้า ยมือ ของหน้า• เนวิเ กชัน ควรอยู่ใ นทุก แห่ง ที่ต ้อ งการ เพือ ไม่ใ ห้ผ ู้ใ ช้ห ัน ไปใช้ป ุ่ม Back ของ ่ บราวเซอร์• ผู้อ อกแบบต้อ งพยายามคิด แทนผู้ใ ช้ ว่า เมื่อ เขาทำา กิจ กรรมบางอย่า งเสร็จ
  • 23. นำา เสนอหลายทาง เลือ ก• ผู้ใ ช้แ ตกต่า งแต่ล ะแบบ ดัง นั้น ควรจัด ระบบเนวิเ กชัน ไว้ห ลายรูป แบบในการเข้า ถึง ข้อ มูล เดีย วกัน• โดยอาจจัด ทำา สารบัญ , site map หรือ Search box• เพราะผู้ใ ช้บ างคนใช้ร ะบบสืบ ค้น สิ่ง ทีต ้อ งการได้ร วดเร็ว ซึ่ง ตรง ่ ข้า มกับ อีก กลุ่ม ที่ช อบคลิก ไป
  • 24. มีข น ตอนสั้น และ ั้ ประหยัดทีเวลา• ให้ผ ู้ใ ช้เ ข้า ถึง ข้อ มูล ่ต ้อ งการ โดยผ่า นขั้น ตอนทีส ั้น และ ่ ประหยัด เวลาที่ส ด ุ• จากการศึก ษาพบว่า จำา นวน รายการในหนึ่ง เมนูไ ม่ค วรเกิน จำา นวน 8-10 รายการ เพือ ให้ ่ ตัด สิน ใจเลือ กรายการได้ง ่า ย• การมี Navigation Shortcut ให้ สู่เ ป้า หมายเร็ว ขึ้น เช่น Sitemap ,
  • 25. มีร ูป แบบที่ส ื่อ ความ หมาย บ• ออกแบบเนวิเ กชัน ให้เ หมาะสมกั Interface มองเห็น ได้ช ด เจนว่า เป็น เนวิเ ก ั ชัน• หาเจอง่า ย ไม่ก ลืน ไปกับ รูป และตัว หนัง สือ• ขนาด สี ตำา แหน่ง ลัก ษณะและการ เคลื่อ นไหวขององค์ป ระกอบในเว็บ ช่ว ย สือ ความหมายถึง ความสำา คัญ ของเนือ หา ่ ้ ต่า งๆให้ผ ใ ช้ไ ด้ร ู้ ู้• ไม่จ ำา เป็น ต้อ งใช้ “โปรดคลิก ที่น เ พื่อ เข้า สู่ ี่ รายละเอีย ด” แต่ท ำา ตัว อัก ษรส่ว นนัน ให้ม ส ี ้ ี
  • 26. มีค ำา อธิบ ายที่ช ัด เจน และเข้า ใจง่า ย• ไม่ค วรเลือ กใช้ค ำา ย่อ ที่เ ข้า ใจได้ ยาก พยายามเลือ กใช้ค ำา ที่ม ีค วาม หมายชัด เจนและเฉพาะเจาะจง ให้ม าก• การใช้ค ำา อธิบ ายที่ช ัด เจนแสดง ถึง เป้า หมายของลิง ค์น น จะช่ว ย ั้ ให้ผ ู้ใ ช้เ ข้า ใจเนื้อ หาได้ด ีข ึ้น
  • 27. มีค วามเหมาะสมกับ วัต ถุป ระสงค์ข องเว็บ ไซต์• เช่น เว็บ ไซต์ข ายของมีเ ป้า หมาย ให้ผ ู้ใ ช้ส ามารถซื้อ สิน ค้า ได้อ ย่า ง สะดวก จึง ควรสร้า งเนวิเ กชัน ที่ ง่า ยในการเข้า ถึง รายละเอีย ด ของสิน ค้า ค้น หาง่า ย• เนวิเ กชัน ที่เ หมาะสมกับ เป้า หมาย ของเว็บ ไซต์จ ะช่ว ยสนับ สนุน ให้ผ ู้ ใช้บ รรลุค วามต้อ งการ
  • 28. สนับ สนุน เป้า หมายและ พฤติก รรมของผู้ใ ช้• คุย กับ ลูก ค้า ว่า ต้อ งการระบบแบบ ใด• การให้ค วามสำา คัญ จากเสีย ง สะท้อ นของลูก ค้า จะนำา ไปสู่ แนวทางใหม่ใ นการดำา เนิน ธุร กิจ เช่น เว็บ Amazon ทีป ระสบความ ่ สำา เร็จ จากการการรับ ฟัง ความคิด เห็น ของลูก ค้า

×