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

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

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

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

Hierarchical Model

Global Navigation Global Navigation

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).

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.

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

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

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

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.

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.

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.

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.

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.

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).

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.).

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.

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.

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.

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.

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.

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.

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

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.

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.

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

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

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

Frame-based Navigation

Frame-based Navigation

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.                                                                                                            

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

Image Map

Search Box

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

Site Map

Site Index

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

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

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