Navigation and Linking
Navigation elements are meant to help users transition between different areas of a website with relative ease, and for providing orientation cues.
Guidelines for main navigation menus are as follows:
- Tab name should be concise and relevant to the content within the section.
- Avoid using acronyms in menu labels unless widely understood/defined within the site.
- Create active/non active tab interaction states with defined colors for each.
- Use high color contrast between type and tab color.
- Do not place supporting files in main navigation menus.
Left navigation menus provide an easy way for users to navigate within a section of a website. Guidelines for left navigation menus are as follows:
- Consistency: Left navigation should be applied consistently throughout the site to avoid user confusion. Pages of the same type should have similar left navigation treatment.
- Menu headers: Each navigation menu should contain a header that identifies that this is the section's navigation menu (i.e., "Membership Menu").
- Primary links: Menus should be composed of between two and fifteen primary links (with five to ten being most optimal).
- Link destinations: All links must have a valid destination that corresponds with the link label. Avoid "mail to" links in navigation menus by creating a contact page where such links can be found. Similarly, supporting files should be linked from page content rather than included as links in navigation menus. Links to other areas of the site should not be included in left navigation unless clearly labeled (i.e., "Related links").
- Link naming: Link text should match the page title of the page it links to. Global terms such as "Home," "Sitemap," and "Contact" should never be used as standalone terms within a navigation menu, unless they will link to the home, sitemap, or contact pages for the overall site. References to these types of pages within a particular section should include the name of the specific section (i.e., "Conferences Home," "Contact IEEE Education Staff").
- Link target: All links in the left-hand navigation should open within the same browser window.
- Expanded navigation/Secondary links: If allowed within the particular site templates being used, left navigation menus may also include between two and ten secondary links within each primary link. A minimum of two primary links should expand. When expanded navigation is used, the primary link should be linked to a page orienting the user to all of the content within the secondary section.
- Link naming: - Global terms such as "Home," "Sitemap," and "Contact" should never be used as standalone terms within a navigation menu, unless they will link to the home, sitemap, or contact pages for the overall site. References to these types of pages within a particular section should include the name of the specific section (i.e., "Conferences Home," "Contact IEEE Education Staff"). - Link text should match the page title of the page it links to.- Do not use acronyms.
- Supporting files: Should not be linked from the left navigation.
For IEEE.org: These menus are applied to individual pages and sections of the site using the content management system (UCM). In UCM, these menus are approved and created by the Digital & Creative Innovations Team to ensure alignment and consistency with the information architecture of the site. Typically, every page on IEEE.org has a left navigation menu. Contact the Digital & Creative Innovations Team if you have questions regarding exceptions.
Guidelines for right column content and navigation menus are as follows:
- Right column content should be removable without any impact to page navigation or availability of content.
- Right column content and navigation are optional for IEEE digital sites and pages.
- Do not put critical information, or links that are central to the purpose of the page, in the right column.
- Do not overuse the right column. Keep the numbers of elements/modules to a minimum so they do not compete with the main page content.
- Elements should be ordered according to relevance to the page content and purpose.
For IEEE.org contributors: This element is optional and can be created either globally (and applied dynamically to all content within a particular directory of the site) or applied to an individual file. Multiple right navigation modules can be created within a page. There are two types of right column content:
- Global right column content: appears on every page within a section. Create/edit this content using the "right_content" tags in UCM to create global content.
- Local right column content: appears on one page only. Create/edit this content in the "main_content" region in UCM.
Breadcrumb links aid users in knowing where they are in the site. The links should represent the hierarchical order of each section and always take the user through the shortest path to the home page. All IEEE sites that are more than two levels deep must have breadcrumbs on lower level pages of the site. On IEEE.org, breadcrumbs are controlled by the Digital & Creative Innovations Team.
Links Within Page Content
- Color: The primary link color on the site should be blue (recommended color is #0063D7); visited link color should be purple (recommended color is #800080).
- Interactivity: Links should underline upon hover and open in the same browser window. Exception: Supporting files should open in a new window.
- Supporting files: When linking to a supporting file, follow the guidelines for supporting files.
- Link text: Link text should be concise (approximately five - seven words). - Links to HTML pages should open in the same browser window. - Use plain language; never use "click here," "follow this link," or URL addresses. - When appropriate, write action-oriented links that accurately describe the information at the destination page. This includes contact links. Example: Correct: "Find graphics approved for digital use in the IEEE Graphics Library." Incorrect: "Here is a link to IEEE graphics" or "For IEEE graphics, click here."
- Trailing links: Use trailing links, or links set below a block of text, for calls to action.
- Embedded links: Use embedded links (links within paragraphs) only for supplemental information. - Embedded links should be used sparingly and should not interfere with the reading of information either on the computer screen or when printed. Email links: Write out full email addresses and add link to address.
For IEEE.org: Do not hard-code links to other IEEE.org pages. Instead, use the Link Wizard feature in UCM to "Link to a section" (for index pages) or "Link to a file" for all other pages and supporting files in UCM.
Within-page links should be used for longer pages with sections of content that fall below the fold of the page. These links have the following acceptable uses:
- Top of page links: Links to the top of the page.
- A table of contents or “On This Page” link menu: Links to the appropriate sections further down the page.
- Alphabetical, chronological, or other category lists: Can show the letters of the alphabet across the top of the page and have each letter link to the appropriate place in the list.
- Frequently asked questions lists (FAQs): Can list the questions at the top of the page and make each question a link that scrolls the page to the associated answer.
These links should not link to anchors on another page. Within-page links, if used, should follow general link styling guidelines.
External links are hyperlinks that point at any domain other than the origin domain (and its sub-domains). Inclusion of a limited number of carefully selected, relevant external links within an IEEE site is considered a best practice in most situations. Used properly, external links can help establish your expertise in a particular subject matter, create repeat visits, and build relationships with other industry leaders. The following guidelines should always be adhered to for external linking. Do’s
- Ensure that your site includes the required footer link to the IEEE Terms and Conditions, which will absolve you from legal responsibility for the content of the sites to which you link.
- Review destination content when the page is published and periodically thereafter to ensure continued quality and relevance; update or remove links as appropriate.
- Check that the sites you link to have privacy policies that will protect your users’ interests.
- Obtain permission from the site owner if you have any concern that they may object to the reference.
- Only link to well-maintained content from trusted sources as the quality, content, and tone can reflect on your site’s credibility with both users and search engines.
- Select links that add value by offering high-quality content that is different from the information on your page, but relevant to it and suitable for your audience.
- Use descriptive anchor text so that users (and search engines) can easily identify external links.
- Disclose when you're linking to a site with which you have a financial arrangement. (Google also recommends using the rel="nofollow" attribute on those links so that Google doesn't pass along PageRank and your readers know of any possible conflict of interest.)
- Avoid any language surrounding the link that suggests an endorsement of the content or organization.
- Avoid including too many external links on a page, as this can confuse users and call the authority of your site into question (since it may seem you are deferring expertise on the subject matter to others).
- Avoid links to unmoderated user-generated content.
- Avoid links to content that is primarily commercial, offensive, or discriminatory, or which contains misleading information or unsubstantiated claims.
- Generally avoid links to supporting documents (Word, PDF, etc.) on other sites; link to HTML digital pages.
- Avoid or be cautious about linking to sites that require users to register or subscribe before viewing content. All other IEEE linking guidelines noted within the "Links within page content" section of this page also apply to external links.
A redirect is a way to send both users and search engines to a different page/URL than the one originally requested. While redirects should be avoided as much as possible, reference the guidelines here to request/create a redirect.
Determining need for redirects:
The following instances may require redirects to be created:
- Specialized print or email campaigns that cannot use long/full-length URLs
- When a page is deleted or moved to another location within a site
- Commonly misspelled URLs (such as www.gogole.com instead of www.google.com)
- When a page shows a 404 (“Page not found”) message when accessed on the digital platform
Creating and maintaining effective redirects:
- Include descriptive and relevant keywords in the redirect URL to ensure better indexing by search engines.
- Keep redirect URLs as short as possible.
- Avoid redirecting pages to URLs outside of your site. This will prevent broken redirects if the destination site URLs change.
- Do not redirect to a moved page. Instead, redirect to the final destination URL.
- Expired redirects, or redirects for non-existent content, should be directed to relevant content within a site instead of just to the home page of the site.
- Redirects should not be expired unless it is known that users will never access the redirected page.
- Redirects for expired short-term/campaign URLs should be redirected to relevant content within the site.
- Periodically review redirects to ensure that they do not point to irrelevant, inactive, or 404 pages.
Supporting files supplement the content on your digital pages. Supporting files include PDFs, Word, Excel, PowerPoint, and multimedia files. Note that when it would better support the tasks of your users, content should be integrated into the HTML pages. Keeping usability in mind, follow these rules for supporting files:
- Format: Whenever possible, use a PDF version of a document to protect the integrity of the document.
- Notation: When linking to a supporting file, include the file size and type in parentheses. Format should be (TYPE, size). For example, (PDF, 45 MB). - Include the time duration of Windows Media Video (WMV) multimedia files in parentheses as well. (Note: The size of the document can be found under "Properties.") - Appropriate abbreviations are: DOC, PDF, XLS, PPT, WMV.
- Interactivity: All supporting files should open in a new browser window, not the same browser window.
- Placement: Do not place supporting files in left navigation areas.