Web navigation

Last updated
Navigating to English Wikipedia using a web browser

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]

Contents

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

A website 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 Berners-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. Web navigation has evolved from a restricted action, to something that many people across the world now do on a daily basis. [7]

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:

Hierarchical 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

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 website navigation

Local navigation is the links within the text of a given web page, 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.

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. [12] [13]

See also

Related Research Articles

<span class="mw-page-title-main">Graphical user interface</span> User interface allowing interaction through graphical icons and visual indicators

A graphical user interface, or GUI, is a form of user interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation. In many applications, GUIs are used instead of text-based UIs, which are based on typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on a computer keyboard.

<span class="mw-page-title-main">Website</span> Set of related web pages served from a single domain

A website is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Websites are typically dedicated to a particular topic or purpose, such as news, education, commerce, entertainment, or social media. Hyperlinking between web pages guides the navigation of the site, which often starts with a home page. The most-visited sites are Google, YouTube, and Facebook.

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

<span class="mw-page-title-main">Hyperlink</span> Method of referencing visual computer data

In computing, a hyperlink, or simply a link, is a digital reference to data that the user can follow or be guided to by clicking or tapping. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. The text that is linked from is known as anchor text. A software system that is used for viewing and creating hypertext is a hypertext system, and to create a hyperlink is to hyperlink. A user following hyperlinks is said to navigate or browse the hypertext.

Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design, architecture and information science to the digital landscape. Typically, it involves a model or concept of information that is used and applied to activities which require explicit details of complex information systems. These activities include library systems and database development.

Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.

<span class="mw-page-title-main">Graphical widget</span> Element of interaction in a graphical user interface

A graphical widget in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application. User interface libraries such as Windows Presentation Foundation, Qt, GTK, and Cocoa, contain a collection of controls and the logic to render these.

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, is today often regarded as a violation of same-origin policy.

<span class="mw-page-title-main">Website wireframe</span> Visual guide that represents the skeletal framework of a website

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The term wireframe is taken from other fields that use a skeletal framework to represent 3 dimensional shape and volume. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually driven by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website's content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers, and by those with expertise in interaction design, information architecture and user research.

In computing, tabbing navigation is the ability to navigate between focusable elements within a structured document or user interface with the tab key of a computer keyboard. Usually, pressing Tab will focus on the next element, while pressing Shift + Tab will focus on the previous element. The order of focusing can be determined implicitly or explicitly. In general, tabbing is cyclical, not linear, meaning that the tabbing will cycle to the first/last element when it moves away from the last/first element.

A navigation bar is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in operating systems, file browsers, web browsers, apps, web sites and other similar user interfaces.

A sitemap is a list of pages of a web site within a domain.

<span class="mw-page-title-main">Breadcrumb navigation</span> Graphical control element used as a navigational aid in user interfaces

A breadcrumb or breadcrumb trail is a graphical control element used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain awareness of their locations within programs, documents, or websites. The term is a reference to the trail of bread crumbs left by Hansel and Gretel in the German fairy tale of the same name.

In HTML, <div> and <span> tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <p> (paragraph), <em> (emphasis), and so on, accurately represent the semantics of the content, the additional use of <span> and <div> tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, <span> and <div> can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

Mobile app development is the act or process by which a mobile app is developed for one or more mobile devices, which can include personal digital assistants (PDA), enterprise digital assistants (EDA), or mobile phones. Such software applications are specifically designed to run on mobile devices, taking numerous hardware constraints into consideration. Common constraints include CPU architecture and speeds, available memory (RAM), limited data storage capacities, and considerable variation in displays and input methods. These applications can be pre-installed on phones during manufacturing or delivered as web applications, using server-side or client-side processing to provide an "application-like" experience within a web browser.

User experience design defines the experience a user would go through when interacting with a company, its services, and its products. User experience design is a user centered design approach because it considers the user's experience when using a product or platform. Research, data analysis, and test results drive design decisions in UX design rather than aesthetic preferences and opinions. Unlike user interface design, which focuses solely on the design of a computer interface, UX design encompasses all aspects of a user's perceived experience with a product or website, such as its usability, usefulness, desirability, brand perception, and overall performance. UX design is also an element of the customer experience (CX), and encompasses all aspects and stages of a customer's experience and interaction with a company.

<span class="mw-page-title-main">Mystery meat navigation</span> Concept in software development

Mystery meat navigation is a form of web navigation user interface whereby the target of each link is not visible until the user points their cursor at it. Such interfaces lack a user-centered design, emphasizing aesthetic appearance, white space, and the concealment of information over practicality and functionality. The term was coined in 1998 by Vincent Flanders, author of the book and accompanying website Web Pages That Suck.

Tips is the latest of a series of tutorial hubs in Microsoft Windows that provides information about using features. Information is presented as screenshots, text descriptions, videos, and web links. As Windows upgrades have traditionally been drastic, each version since Windows 95 has had its own tutorial app, and the name has changed frequently. Notably, the feature list shown has tended to expand as newer versions of Windows are released and the most recently released tutorial receives updates through the Microsoft Store, allowing it to receive updates more frequently than Windows itself is upgraded.

Windows 11 is a major release of the Windows NT operating system and is the successor to Windows 10. It introduces new features such as a redesigned interface, new productivity and social features, and updates to security and accessibility, along with improvements to performance.

References

  1. Lowe, David; Gaedke, Martin (18 July 2005). Web Engineering. Springer. ISBN   9783540279969.
  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. Malegam, Farhad (February 6, 2022). "Optimising Website to Improve Customer Experience".
  8. 1 2 "Website Navigation". webpagemistakes.ca.
  9. "Navigation Bar: Explanations and Samples". Dropdown Menu Generator. Retrieved 2021-02-11.
  10. "What is a 'flyout' menu?". pcreview.co.uk.
  11. HTML 4 for dummies, 5th edition, 2005, By Ed Tittel, Mary C. Burmeister, p. 96.
  12. "Web Design Navigation Showcases – Smashing Magazine". Smashing Magazine.
  13. Jones, Henry. "30 Examples of Clean and Minimal Website Navigation" . Retrieved 12 March 2014.

Further reading