Helping Users Navigate Your Agency’s Website

Helping Users Navigate Your Agency’s Website

  • Date: November 14, 2023

Transit Agencies use their websites to present service information to users, but what seems easy for some to understand might be difficult for others to follow. These Best Practices, along with community feedback and expert consultancy, can help improve navigation and usability on your website.

Website Structure

  • Make your site structure broad, not deep. Don’t bury pages in a string of clicks – lay out content options on one page.
  • Avoid slideshows/carousels and large banners, which can make your site more difficult to navigate (and most people scroll past them anyways!)
  • When menus have too many options to tab through, it can be tiring for users. Consider cutting down on the number of items in your menus.
  • Use standard layout elements and positions, like Search in the top right corner, Home in the top left corner, and Help at the bottom of the page.

Make Site Navigation Predictable

  • Web page titles should be clear.
  • Important information should be large and noticeable – keep content “above the fold.” Don’t make users scroll to the bottom of the page to find important information.
  • Explain controls and what content they affect.
  • Provide a search bar to easily find specific content across the site.
  • Use a “breadcrumb trail” at the top of the page (depict “You Are Here”) to allow users to see how they got to their current page.

What is a BreadcrumbTrail?

Breadcrumb trails help users know where the current page is in relation to the website structure. This is usually at the top of each page stating “You are here,” followed by the sequence of pages that brought the user to the current page. This ensures that users know where they came from and how to navigate back to previous pages.

IMPORTANT NOTE

Check the usability and navigation of your mobile website! Many users access transit websites on their mobile device.

Content and Visual Guidelines

  • Use headings and short sections. Keep paragraphs short and digestible.
  • Use literal language. Avoid double negatives, nested clauses and other complicated grammar.  For guidance on using plain language, visit plainlanguage.gov. Visit the Hemingway Editor to check your content’s reading level.
  • If using long documents or content, provide a summary at the top of the page. Provide alternatives or explanations when using mathematical concepts.

  • Keep visual design consistent and simple.
  • Use colors with good contrast.
  • Provide an option to change content colors for users who prefer low contrast – adaptability is key!
  • Include lots of white space – opt for a minimalist design.
  • Avoid moving elements and animations.

 

 

 

ALT TEXT: Adding alt text (alternative text) for images is one of the most important things you can do to improve website usability. While some images are simple to describe, some are more complex. Check out the AT3 Center’s course on Describing Complex Images!

Text is Important

  •  Use Sans Serif fonts that are easy to read and 12- or 14-point typeface.
  • Avoid italics. Instead, use bold to emphasize headings or words.
  • Use a maximum of 70 characters per line. Always left justify — don’t center text.
  • Consider using dark grey text instead of black. This can be a better contrast for people with dyslexia.
  • Use icons to supplement text! It’s helpful to have information in multiple formats, and helps to break visual monotony.

Be conscious about your visuals! Use visuals that complement content, not distract from it.

 

Adaptability

  • Don’t block users from customizing font size/color/etc.
  • Let users control when content moves or changes.
  • Simplify pages by enabling users to hide non-essential features.
  • Make sure your website supports APIs, plugins and extensions.
  • Consider language options for non-English speakers.
  • Many users will already have their own tools to increase web usability for themselves. The most important thing to do is to make sure that your website is able to adapt to user tools.

Processes and Tasks

  • Using a login feature? Enable options that don’t require memory, like Autofill.
  • Include clear instructions and inform users of any fees at the beginning of a task.
  • Make forms and other processes easy to follow and predictable.
  • Ensure that placeholder information does not disappear.
  • Don’t only use an asterisk * for required fields – also use the word “Required.”
  • Enable users to return to previous pages. Whenusing links to the next or previous page, use the title of the page instead of “next page.”

Example of progress indicators

  • Use progress indicators, e.g. “Step 3 of 5.”
  • Avoid time limits on tasks— if timing is absolutely necessary, leave lots of time.

User Feedback

  • Include alternative options for cognitive tests like CAPTCHA.
  • Error messages should be detailed and provide solutions.
  • Warn users about irreversible actions!
  • Suggest alternate spellings for search queries, if needed.

 

Web Tools

Use these when you need a little more help!

 

Click here to download a printable version!