Information architecture, content and navigation strategy

Navigation and information browsing are the top user frustrations across asu.edu. Addressing both these requires more than design changes, it requires information architecture and content strategy changes.
 

• Audit your site(s) —
  Understand: 
  • How many websites/web pages you have.
  • Are they all actively used. Learn more about using Google Analytics to assess this.
  • If you have any duplicate pages or pages with similar information that can be combined or repurposed. Consider updating or repurposing a duplicate page rather than building a new one. Each new page that’s created has to “start from nothing” in terms of search engine rankings. If you have similar content elsewhere, Google recommends making updates rather than making brand new stuff. 
• Review —
  Before mapping of your content structure for a new site:
  • Review your content and ensure it’s up to date.
  • Identify content gaps to address.
  • Start mapping of your content structure for the new sites.
• Remember — 
  • Organize your site and content around the user’s needs versus your structure or internal departments.
  • Consider the most simple, straightforward solution possible to both simplify and improve the user experience. 
  • Nav and URL structure should follow your navigation hierarchy.
  • Your site structure can also help with SEO.
  • Your top-level navigation should encompass your main pages/sections.
  • For SEO, limiting URLs characters to less than 50-60 is ideal. 
• Understand —
  • The primary goal of the site at a high level (recruitment, informational, transactional, etc.).
  • Who will be reading your content — who’s your primary audience versus secondary or tertiary?
  • What problem will you be solving for your audience(s)? 
  • Consider how your site architecture and navigation might help those familiar with your content/site versus new visitors. What might return visitors want quick access to that differs from new visitors?
  • The primary content sections of your site: Your main categories are what should be listed in your primary navigation — best practices to keep those between two and seven menu items (choices).
  • Secondary/tertiary sections of your site: Determine what subcategories of your primary content section might make sense. 
• Consider — 
  • Do different sections of the site have additional goals?
  • What content needs to be earmarked to revisit at a later date versus now?
  • What is unique about your unit and how is that conveyed in your content?
  • Flatter/more shallow site maps are better for both usability and search engine crawlers.

Site maps are the blueprint of your site and define the logical relationships between all of the content in your site and help to both understand and guide a user’s journey through your navigation and content.

Site maps can help in content planning by:

• Allowing content to shape the structure and design of a site, rather than the other way around.
• Making it easier to identify gaps in content.
• Providing a broad, high-level view of content in relation to the site as a whole.
  • This can help you identify what should go, be expanded or added. 
• Acting as the one source of truth for teams to share, reference and collaborate. 
• Helping to determine how the review, creation (new pages), rewriting or editing of content to content owners or subject matter experts should be distributed.
• Help determine a relevant design and digital strategy.

Don’t forget: Create a site.map and submit to Google via Google Search Console as part of implementing any changes to navigation and URLS/structure or when launching a new site. Learn how.

Site structure, navigation template

Includes examples of how brandguide.asu.edu was mapped out in its current and future state, the content prioritized and phased into sprints and a template for mapping out your website.

1. Map out your current content via your existing navigation structure (example)
2. Get a true inventory of your current site pages — not all pages will be listed in navigation directly: 
   • Run a site crawler, like Screaming Frog (it will catch the pages not directly listed in your site navigation/menus) OR
   • Pull a list of all URLs from your Drupal/Webspark site (how to) OR
   • Pull a list of all site URLs from GSC (how to)
3. Use the list of URLs from step two to map out the details (example):
   • Content owner(s) for each section and/or page.
   • Priority to review.
     • Review Google Analytics data for your site to determine high priority pages to address based on traffic.
   • Understand the lift needed for each page:
     • No or light edits needed? No longer need the page? Consider getting the “low-hanging fruit” reviewed and off your plate as soon as possible.
   • Any URL or page name changes. 
4. Create a revised plan for your site navigation, content structure using this template.
5. Review the existing site content against this new structure and assess what needs to be revised, moved or created per the new plan.

Learn more about the navigation components for asu.edu.

Reducing navigation complexity to improve user experience

Reducing complexity can improve user experience which should benefit the goals of your site.

Should your primary navigation link to a page, drop down or mega menu?

• Is the link self explanatory? If the primary navigation link is self explanatory consider linking directly to an overview page. 

Linking directly to an overview page may be more useful by revealing related content to the reader and allowing them to act or find what they need more quickly?

Dropping directly into an overview page can also allow you to more closely curate the content and experience what the reader sees for more marketing/storytelling-focused pages.

• Are there a lot of subcategories or even sub-subcategories for your primary site categories? Consider limiting your drop down/mega menus to just the first level of subcategory (like CFO sample).
• What is my new versus returning visitor ratio? Mega menus aren’t intended to show the contents of the entire site but help visitors understand what types of information they can expect to find or reveal popular content to the visitor earlier (which may be beneficial for sites with more returning than new visitors).

Learn more about grouping options within a mega menu.

Create accessible navigation by following ASU’s accessibility guidelines.

Using overview pages

• Primary navigation links on asu.edu with drop down menus are click to open.
• Per UX and accessibility best practices a link should have one behavior. 
• There are known issues with dropdown menus behaving consistently or as expected or in a way that does not frustrate users when they are built to expand on hover.
• Consider adding overview or introduction page links to your drop down menus in lieu of having the top navigation act as both a link to a page and also a function to expand a drop down menu.
• Overview pages can act as a high-level, packaged landing page experience for a specific topic.
• For deeper sections, secondary navigation can be revealed at the next level.

See an example of how overview pages can be used in primary navigation menus.

Review the navigation structure solution for deeper section navigation.

Navigation solutions for:

• Microsite navigation patterns for asu.edu 
  • definition of microsite for asu.edu
• Subsite navigation patterns for asu.edu
  • definition of subsite for asu.edu
• Landing page navigation patterns for asu.edu 
  • definition of landing page for asu.edu
     

Reviewing/editing existing content

• Remember — 
  • Organize your page content around the user’s needs while supporting your business goals. 
  • Use language your audience will be using, not internal nomenclature that is unknown to the general public (Moz can help you find keywords people are using to search for your content).
  • Make it easy for them to find what they need quickly.
  • Underlined text on the web indicates a clickable link — please do not use these for non-linked text.
  • Italics are not part of ASU writing style.
  • Max character counts have been set to help readability (approx. 75 characters wide or 700 pixels).
• Understand —
  • What problem will you be solving for your audience(s) on this page? 
  • The primary goal/purpose of each page and make it easy for the reader to find the important information or take the next step.
• Consider — 
  • If conversions are a goal, understand the unique value proposition of your unit/program. What do you offer or focus on that may differ from other, similar programs or competitors? How can this be incorporated into your page?
  • People are most likely to skim/scan a page — what does that experience look like on each page? Use visual cues and formatting to break up the content up on a page into scannable sections.
    • Headings, bulleted lists, cards, accordions, link grids, buttons, etc., all help users more quickly understand the highlights.
    • User testing showed that the selective use of gold on a page, whether in highlights for key headings or the most important button to click on a page, help draw their eye down a page. Drowning a page in gold means it loses its power as a mile marker.
  • If selling, be sure to make sure the viewer has had a chance to understand your product before asking them to do something — asking for their information or time too soon can damage their trust.

See all asu.edu options to display content on a page.

Page length

Longer pages can be OK if:

• The content is closely related.
• It’s a longer page of related, well-formatted content can be a better user experience than several separate pages with minimal content on each page.
• Using an anchor menu for long pages allows a viewer to quickly understand the (related) categories of content on a page and allows them to skip to sections as needed versus skimming and scrolling.

Page content template

Use this template to help update and plan new content for each page of your site.