Web navigation

Web navigation refers to the process of navigating a network of information resources in the World Wide Web, which is organized as hypertext or hypermedia.[1] The user interface that is used to do so is called a web browser.[2]

A central theme in web design is the development of a web navigation interface that maximizes usability.

A website's overall navigational scheme includes several navigational pieces such as global, local, supplemental, and contextual navigation; all of these are vital aspects of the broad topic of web navigation.[3] Hierarchical navigation systems are vital as well since it is the primary navigation system. It allows for the user to navigate within the site using levels alone, which is often seen as restricting and requires additional navigation systems to better structure the website.[4] The global navigation of a website, as another segment of web navigation, serves as the outline and template in order to achieve an easy maneuver for the users accessing the site, while local navigation is often used to help the users within a specific section of the site.[3] All these navigational pieces fall under the categories of various types of web navigation, allowing for further development and for more efficient experiences upon visiting a webpage.

History

Web navigation came about with the introduction of the World Wide Web, in 1989 when Tim Burners-Lee invented it.[5] Once the world wide web was available, web navigation increasingly became a major aspect and role in jobs and everyday lives. With one-third of the world’s population now using the internet, web navigation maintains a global use in today's ever evolving international society.[6] Web navigation is not restricted to just computers, either, as mobile phones and tablets have added avenues for access to the ever growing information on the web today. The most recent wave of technology which has affected web navigation is the introduction and growth of the smartphone. As of January 2014, 58% of American adults owned a smart phone, and that number is on the rise from previous years.[7] Web navigation has evolved from a restricted action, to something that many people across the world now do on a daily basis.

Types of web navigation

The use of website navigation tools allow for a website's visitors to experience the site with the most efficiency and the least incompetence. A website navigation system is analogous to a road map which enables webpage visitors to explore and discover different areas and information contained within the website.[8]

There are many different types of website navigation:


The structure of the website navigation is built from general to specific. This provides a clear, simple path to all the web pages from anywhere on the website.

Global website navigation shows the top level sections/pages of the website. It is available on each page and lists the main content sections/pages of the website.

Local navigation would the links with the text of your web pages, linking to other pages within the website.[8]


Styles of web navigation

Web navigations vary in styles between different website as well as within a certain site. The availability of different navigational styles allows for the information in the website to be delivered easily and directly. This also differentiates between categories and the sites themselves to indicate what the vital information is and to enable the users access to more information and facts discussed within the website. Across the globe, different cultures prefer certain styles for web navigations, allowing for a more enjoyable and functional experience as navigational styles expand and differentiate. Zheng has summarized and compared some common navigation system designs from an information seeking perspective,[9][10] including:



Design of web navigation

What makes Web design navigation difficult to work with is that it can be so versatile. Navigation varies in design through the presence of a few main pages in comparison to multi-level architecture. Content can also vary between logged-in users and logged-out users and more. Because navigation has so many differences between websites, there are no set guidelines or to-do lists for organizing navigation. Designing navigation is all about using good information architecture, and expressing the model or concept of information used in activities requiring explicit details of complex systems.[14][15]


Designers are always finding stimulating and effective ways to organize their website and allow users to move about and find the information easily and effectively.[16] Some examples of interesting navigation designs consist of Made by Water,[17] Made in Haus,[16] Relogik,[18] Drexler,[19] and more.


There is one thing that a user will be sure to notice upon entering a website, a navigation menu. Navigation menus allow visitors to move from one page or section to the next. Without these, it would be difficult to conveniently explore websites. Website navigation menus usually come in one of two orientations: vertical and horizontal. Horizontal navigation menus show items side by side while vertical navigation is set for using the one side of pages to navigate through a set of screens.[20]

Various vertical navigation menus are listed as follows: Village Version,[21] Cambrian House,[22] The Hipstery!,[23] The Music Hall,[24] etc.


Perhaps, the navigation menu is a website’s single most important component. Navigation menus are designed to place in the most visible location of the page, and thus can greatly influence visitor’s first impression.[25]

Some examples of the more recent trends in navigation design are PSDtoWordPressExpert,[26] CSSChopper,[27] psdtowp,[28] Sower of Seeds,[29] Markupcloud,[30] Alexarts and Andreas Hinkel.[31]


Drop-down menus are useful features, from a design viewpoint, due to their ability to help clean up a busy layout. However, the use of drop-down menus may also lead to more confusion and annoyance since they are oftentimes dysfunctional.[32]

Here are some websites that give examples of drop-down menus: Panasonic,[33] Creative Labs,[34] Helmy Bern,[35] Mini Cooper,[36] etc.


Future of web navigation


Adaptive website navigation

Adaptive web navigation describes the process of real-time changes in a website's navigation links and layout according to individual user preferences as they browse the site. Innovative websites are increasingly attempting to automatically personalize web sites based on a user’s browsing pattern in order to find relevant information more quickly and efficiently. The usage of data analysis allows website creators to track behavior patterns of a user as they navigate a site. Adding shortcut links between two pages, rearranging list items on a page, and omitting irrelevant navigation links are all examples of adaptive changes that can be implemented in real-time. The advantage of utilizing adaptive technologies in web navigation is it reduces the time and navigational effort required for users to find information. A possible disadvantage of this is that users may get disoriented from global and local navigational changes from page to page.[2]


Browser integrated web navigation

To ensure cross-site navigational UI consistency, the navigation system can be integrated into the web browser itself. Standard sitemap navigator (standard-sitemap.org) and Sitemap Explorer[37] are two examples that are specifically designed to provide easy access to sitemaps in a consistent and rich interaction model. Both systems feature an interactive sitemap client as a browser side panel (or other UI components), XML based sitemap files, standard commands for information seeking behaviors such as moving up/down a level, expanding/collapsing a level, searching within the structure file, etc.


See also


References

  1. ↑ Lowe, David; Gaedke, Martin. Web Engineering. Springer.
  2. 1 2 Anderson, Corin; Domingos, Pedro; Weld, Daniel. "Relational Markov Models and their Application to Adaptive Web Navigation" (PDF). University of Washington.
  3. 1 2 Doss, Glen. "Designing Effective Web Navigation" (PDF). Towns University, Center for Applied Information Technology. Retrieved 23 December 2014.
  4. ↑ Bezerra, Edmara Cavalcanti. "Design and Navigation" (PDF). University of Texas, EDC385G Interactive Multimedia Design & Production. Retrieved 24 February 2014.
  5. ↑ "History of the Web". World Wide Web Foundation.
  6. ↑ Maya Shwayder (24 September 2012). "One-Third Of World's Population Using Internet, Developing Nations Showing Biggest Gains". International Business Times.
  7. ↑ "Mobile Technology Fact Sheet". Pew Research Center: Internet, Science & Tech. 27 December 2013.
  8. 1 2 "Website Navigation". webpagemistakes.ca.
  9. ↑ Jack Zheng. "Web navigation systems for information seeking (updated in Feb 2015)". slideshare.net.
  10. ↑ Jack G Zheng. "Web Navigation Systems for Information Seeking". ResearchGate.
  11. ↑ Mark Levene (18 October 2010). An Introduction to Search Engines and Web Navigation (2nd ed.). Wiley. p. 221. ISBN 978-0470526842. Retrieved 12 November 2012.
  12. ↑ "What is a 'flyout' menu?". pcreview.co.uk.
  13. ↑ HTML 4 for dummies, 5th edition, 2005, By Ed Tittel, Mary C. Burmeister, p. 96.
  14. ↑ "Web Design Navigation Showcases – Smashing Magazine". Smashing Magazine.
  15. ↑ Jones, Henry. "30 Examples of Clean and Minimal Website Navigation". Retrieved 12 March 2014.
  16. 1 2 "Showcase of Interesting Navigation Designs – Smashing Magazine". Smashing Magazine.
  17. ↑ "Made By Water - Portfolio Jordan Vitanov". madebywater.com.
  18. ↑ Design Damjan Stanković, Developed by Toni Biočić and Davor Duboka. "relogik.com - Design & innovation - Showcase of Damjan Stanković". relogik.com.
  19. ↑ "Drexler - Web Design, Web Development, Branding - Baltimore". Drexler.
  20. ↑ "Showcase Of Beautiful Vertical Navigation Designs – Smashing Magazine". Smashing Magazine.
  21. ↑ "Village". vllg.com.
  22. ↑ "Cambrian House, Home of Crowdsourcing". cambrianhouse.com.
  23. ↑ The Hipstery. "Hello there, friend!". hipstery.com.
  24. ↑ "The Music Hall, Portsmouth, NH". themusichall.org.
  25. ↑ "Showcase Of Modern Navigation Design Trends – Smashing Magazine". Smashing Magazine.
  26. ↑ "PSD to WordPress Themes Integration Service". psdtowordpressexpert.com.
  27. ↑ "PSD to HTML/HTML5 - Sketch to HTML/HTML5 Conversion Service - CSSChopper". csschopper.com.
  28. ↑ "PSD to WordPress Theme Coding - convert PSD to HTML - Your design to a beautiful WordPress Theme - PSD2HTML". psdtowp.com.
  29. ↑ "Sower of Seeds". sowerofseeds.org.
  30. ↑ Markupcloud Ltd. "Markupcloud - PSD to HTML - PSD to Wordpress, Drupal, Joomla & Magento Theme Conversion". markupcloud.com.
  31. ↑ "Home, Andreas Hinkel > Andreas Hinkel". andreashinkel.com.
  32. ↑ "Designing Drop-Down Menus: Examples and Best Practices – Smashing Magazine". Smashing Magazine.
  33. ↑ "Electronic Components - Panasonic Industrial Devices". panasonic.com.
  34. ↑ "Creative Labs (United States of America) - Sound Blaster, Gaming Headsets, Speakers, Headphones". creative.com.
  35. ↑ "Helmy Bern". Helmy Bern.
  36. ↑ "MINIUSA.com". MINIUSA.
  37. ↑ Jack G Zheng. "Sitemap explorer: browser integrated web navigation". ResearchGate.


Further reading

This article is issued from Wikipedia - version of the Wednesday, April 20, 2016. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.