งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

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

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "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 Hierarchical Model

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 สำหรับ เว็บไซต์ อาจารย์เมทินี อาดัม


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

งานนำเสนอที่คล้ายกัน


Ads by Google