Designing Web Navigation การออกแบบระบบ Navigation สำหรับเว็บไซต์

1. Designing Web Navigationการออกแบบระบบ Navigation สำหรับเว็บไซต์ อาจารย์เมทินี อาดัม

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

3. ความสำคัญของระบบ Navigation (ต่อ) • ระบบ Navigation นั้นอาจประกอบด้วยองค์ประกอบหลายๆ อย่าง เช่น Navigation Bar หรือ pop-up menu ซึ่งมักจะมีอยู่ในทุกๆ หน้าของเว็บเพจ และอาจอยู่ในหน้าเฉพาะที่มีรูปแบบเป็นระบบสารบัญ ระบบดัชนี หรือ site map ที่สามารถให้ผู้ใช้คลิกผ่านโครงสร้างข้อมูลไปยังส่วนอื่นๆได้ การเข้าใจถึงรูปแบบและองค์ประกอบของระบบ Navigation เหล่านี้ จะทำให้คุณออกแบบระบบ Navigation ด้วยองค์ประกอบที่เหมาะสมได้อย่างมีประสิทธิภาพ

4. Navigation Model • ระบบ Navigation สำหรับเว็บไซต์นั้นมีด้วยการหลายรูปแบบ ซึ่งควรพิจารณาเลือกใช้ให้เหมาะสมกับประเภทของเว็บไซต์หรือกลุ่มเป้าหมาย • ระบบ Navigation แบ่งออกเป็น 4 รูปแบบ • Hierarchical • Global • Local • Ad Hoc

5. HierarchicalModel

6. Global Navigation เป็นระบบNavigationที่ใช้ลิงค์ไปยังส่วนหลักๆ ของเว็บไซต์ ซึ่งจะมาช่วยเสริมข้อจำกัดของแบบลำดับชั้นทำให้สามารถ เคลื่อนที่ได้ทั้งแนวตั้งและแนวนอนได้อย่างมีประสิทธิภาพ Global Navigation

7. Global Navigation : • This example shows global navigation tabs at the top of the page. Underneath the tabs are the subcatgories (Categories, Brands, Departments, etc.) of the current top-level category (Women).

8. Global Navigation : • This example has global navigation along the top and along the left. The links on the left are the dominate global navigational element, linking to the site's top-level categories.

9. Global Navigation • จากการศึกษาค้นคว้าพบว่าตำแหน่งที่ดีที่สุดสำหรับ Navigation bar คือ ด้านบนสุดของหน้าเว็บ 89% 11%

10. Local Navigation เป็นระบบNavigationที่ใช้ลิงค์ไปยังรายละเอียดย่อยๆ ภายในหัวข้อหลักนั้นๆ โดยจะเหมาะสำหรับเว็บไซต์ที่มีรายละเอียดและมีรายการหัวข้อที่ซับซ้อน มีด้วยกัน 4 รูปแบบคือ • Down-to-Child Links • Across-to-Sibling Links • Up-to-Parent Links • Down-to-Grandchild Links

11. Down-to- Child Link • Links that provide access to more specific information, allowing users to drill down into a particular topic.

12. Down-to- Child Link • In this example, Down-to-Child links are presented in a three-column list in the center/right area of the page. The links, along with the photograph, are the dominant page elements.

13. Down-to- Child Link • This example shows a promotion-centric layout: Down-to-Child links on the left, with the center of the page devoted to promotional content.

14. Down-to- Child Link • This example also shows Down-to-Child links on the right, with the main content area being used for promotional purposes.

15. Across -to- Sibling Link • Across-to-Sibling links provide access to pages that share the same parent, allowing users to navigate across a level in a hierarchy.

16. Across -to- Sibling Link • This example places Across-to-Sibling Links on the left side of the page in a pull-down menu. While the pull-down menu conserves screen real estate, it forces the user to take action to view the Sibling links. This site has since replaced the pull-down menu with a list of Sibling links.

17. Across -to- Sibling Link • Here, Sibling links of Lipsticks” (Lip Liners, Lip Treatment, Lip Gloss) appear at the top of the page. Above the Sibling links is as rather unusual presentation of the Parent level links (Lips, Eyes, Nails, Face, Gift sets) part of a breadcrumb (Beauty>Make-up).

18. Across -to- Sibling Link • In this example, the current page Irons is highlighted in the right-hand list of Sibling categories (Air Conditioners, Fans, Heaters, etc.).

19. Across -to- Sibling Link • This product page (Small Six-Ring Binder) presents related product options as Sibling links (Large Six-Ring Binder, Refill Sheets) in the main content area.

20. Up-to-Parent Link • Up-to-Parent Links provide access to less specific information, allowing users to navigate up a level in the information hierarchy.

21. Up-to-Parent Link • This page shows an example of a tree-browser type navigation system on the left, where clicking on links exposes branches of the hierarchy. Waders, Wading Boots, and Wading Accessories are links to the Parent level. The links Breathable, Neoprene, Nylon, (etc.) represent Across-to-Sibling links.

22. Up-to-Parent Link • This example shows one solution to the problem of displaying a horizontal navigation bar underneath a set of tabs (where the space available for links is very limited). Here, the Up-to-Parent links are organized into short columns at the top of the page.

23. Up-to-Parent Link • This layout uses white space to separate elements on the page, with Up-to-Parent links on the right. The Categories pull-down in the upper right of the page lists top-level categories and subcategories.

24. Down-to-Grandchild Link • Down-to-Grandchild links provide access to content two levels down from the current page, allowing users to quickly navigate to subtopics for a given category.

25. Down-to-Grandchild Link • In this example, a subset of the Down-to-Grandchild links are listed on the left, under a heading that is a Down-to-Child link. The more” link also provides access to the Child page

26. Down-to-Grandchild Link • In this example, a subset of Down-to-Grandchild links are listed in the page's main content area. Child pages (Twin sets, Cardigans, etc.) are emphasized with photographs; selected Grandchild pages are listed to the right of the photograph.

27. Down-to-Grandchild Link • This example presents all (rather than selected) Down-to-Grandchild link on the right side of the page. The number of product models in each Grandchild category provides further information on what content is available two levels down from this page.

28. Ad Hoc Navigation เป็นระบบ Navigation เฉพาะที่ตามความจำเป็นของเนื้อหา ซึ่งก็คือลิงค์ของคำหรือข้อความที่น่าสนใจซึ่งประกอบอยู่ในประโยค

29. Main Navigation Element • Navigation Bar • Frame-based Navigation • Pull-Down Menu • Pop-Up Menu • Image Map • Search Box

30. Navigation Bar • เป็นระบบNavigationพื้นฐานที่ใช้ได้หลายรูปแบบ ทั้งแบบลำดับชั้น, Global Navigation, Local Navigation • โดย Navigation Bar จะประกอบด้วยกลุ่มของลิงค์ต่างๆ ที่อยู่รวมกันในบริเวณหนึ่งของหน้าเว็บไซต์

31. Frame-based Navigation • เป็นระบบNavigationที่อาศัยระบบเฟรมมาช่วยแบ่งพื้นที่ในหารแสดงข้อมูล และข้อมูลในแต่ละเฟรมเป็นอิสระจากกัน • โดยจะมีเฟรมที่มีระบบ Navigation ที่สามารถควบคุมการแสดงผลข้อมูลในอีกเฟรมหนึ่งได้

32. Frame-based Navigation

33. Pull-Down Menu • Requires the user to click a control in order to view a list of links. These are most commonly implemented as a standard HTML element, but also can be implemented as custom pull-down menus created using a script or applet.

34. Pop-up Menu • Automatically display when a user moves their mouse over the menu. These are also referred to as “fly-away menus.”

35. Image Map

36. Search Box

37. Supplement Navigation Elements • ระบบNavigationเสริม เป็นNavigationอีกแบบที่ช่วยเพิ่มแนวทางในการท่องเว็บของผู้ใช้ และยังช่วยให้ผู้ใช้มองเห็นภาพรวมได้ดีขึ้นอีกด้วย ประกอบไปด้วย • Table of Content • Index System • Site Map • Guided Tour

38. Site Map

39. Site Index

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

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

42. Designing Web Navigationการออกแบบระบบ Navigation สำหรับเว็บไซต์ อาจารย์เมทินี อาดัม