Usability, Site Structure, Navigation

Design and usability

If you are unfamiliar with principles of design, especially website design, take a few moments to familiarize yourself with some important concepts. These design concepts work together to create barrier-free environments that make information accessible to more people in more situations.

Accessible, inclusive, usable, universal

When it comes to web design, these four words – accessible, inclusive, usable, universal – are used often and sometimes interchangeably. Most of the ideas and information noted in this Resources section speak to at least one, if not all, of all these concepts.

The W3C, the international community that develops web standards, has a number of great resources on these topics, such as W3C Web Accessibility Initiative: Accessibility, Usability, and Inclusion.

  • Universal design refers to the designing of products and environments to be aesthetic and usable, to the greatest extent possible, by everyone regardless of abilities/disabilities, age, experience or status. Disabilities can be permanent, temporary, and situational.
  • Usability refers to how easy your website is to use. Usability should play a role in every step of a design process. There are many articles online about website usability and how to improve it. Ultimately, the best indicator of a website's usability is to test it with real users. Watching someone navigate through your site can quickly illuminate problems. Test early, test often, and test with as many users as possible.
  • Inclusion in web design is a process that emphasizes universal design, an understanding of diversity, and the involvement of community in shaping project outcomes.
  • Accessibility addresses deficits in web design that create barriers to users with differing abilities. More on accessibility...

Mobile first, responsive

mock up of mobile display

All Queen’s websites should be built and maintained with responsive design in mind. This means designing for the best and most consistent experience possible across operating systems, browsers, and screen sizes.

While you may be creating and editing on our desktop computer, it is important to remember that many of the website's users (indeed, more and more all the time) will be accessing your information on a mobile device, such as a tablet or a smart phone.

The term "mobile-first" simply means that design starts by considering mobile devices first, as they have the most limitations when it comes to rendering content, such as  smaller screen sizes and less bandwidth.

Responsive design considers display "breakpoints" for page content, where the design adjusts (or responds) according to the screen size used. It is important to test how your page displays on a phones and tablets. Check out how content stacks on smaller screens and ensure that the reading order of you page content is intact. There are browser tools that enable web developers to perform sophisticated testing, but to start, web editors can do some basic testing on various phones and tablets.

 

Structure

Main Navigation

Readers should be able to intuit your site content from your tab headings and page titles. Consider the order of tabs across the top and then down through the pages below – is the most important content higher in the hierarchy? Is the language in your menu clear, concise? Will users intuit where to click?

Pages listed in your main navigation should link to pages within the site, not out to pages on other sites. Links to other websites can be hosted and highlighted in page content instead. Learn more about creating menus...

Planning ahead: Before you start building your site in WebPublish tool, ensure that you have a plan for your site structure, on paper or in a spreadsheet, and get input from as many stakeholders as possible. There are many ways to do this. Consider this example of a structural plan for a website.

 Download a PDF version and see the details (PDF 70KB)

[example of mock up of site structure]

Orphaned pages

“Orphan pages” are those that are not linked to at all from your site's pages or navigation. Avoid this, and be aware that these pages can still be found through a search.

Menu links versus page links

A good rule of thumb to keep in mind is that if a page is important enough to create, there should be a way for people to find it through your main navigation structure. Exceptions to this requirement can include news articles or event listings for which there is an index page or "aggregator" area.

For some sites with a large number of content pages, though, having a link to every page of the site available through the menu can start to feel cumbersome for the user. In case where you do not want to make pages available in the main menu, ensure that these pages are still nested under parent pages in your site structure (see Structure > Menus > Main Navigation in your admin menu) and uncheck the "enabled" box. Also, in for these pages, also ensure that the URLs for each page are similarly nested. (For more, see "URLs and File Naming" info)

Hierarchies: flat versus deep

Consider a flat approach to hierarchy (limited to about 3 levels deep) before a deep deep one. There are pros and cons to each, and both still require attention to category labelling, but a deep hierarchy requires more understanding of broad-category labelling from your user at the outset. A flat hierarchy allows you to get more specific in your labelling of menu items sooner.

Footer

Use the footer to display basic contact information. Add a link to other partner sites, such as your department website, faculty website, research centre or institute. Other content that users expect to find in a footer include social media links and contact information.

Queen's Visual Identity for websites declares that the footer of Queen's websites must include Queen's University logo.

It is also recommended that Queen's sites link to the traditional territories statement: Queen’s University is situated on traditional Anishinaabe and Haudenosaunee Territory. Please note that the statement now links to a page on the Indigenous Initiatives website. Use the following URL:

https://www.queensu.ca/indigenous/land-acknowledgement#profile-tab

Learn more about footer menus in WebPubish...

Content

Homepage

Use your homepage to introduce your reader to your organization, a special project, etc. Describe your organization's objectives, in plain language, so that a visitor can quickly get a sense of what the site is about and why it is important. Include strong visual content and a brand-related graphics to orient your readers.

Contact page

Convention on Queen's websites dictates that a contact page is included as the last tab in the main navigation.

A contact page should include, at a minimum:

  • Office location. Link to a building name to Queen's campus map by selecting your building on the map to find custom code that shows you building highlighted (i.e. the footprint is highlighted with a red outline). For example:

http://www.queensu.ca/campusmap/main?mapquery=mackintosh
  • Mailing address. If you don’t know the mailing address for your Queen’s building, you can also find it on the campus map.
  • Faculty and staff names, title, department and contact information (usually both phone and email) ­– or at least a single point of contact, such as an office phone number and office email address.

Profile pages

Many unit/department sites also include profiles of faculty/researchers, senior administration, and staff.

Be sure to use a consistent layout: a similar size for profile photos, a similar length for bios, links out for further information, contact information, etc. Ensure the people being profiled have approved their personal content.

Where individuals have multiple profiles across Queen’s sites, it is best to consider one of the profiles the "main profile." Other sites can link to the main profile for details rather than creating another profile.

Learn about the the WebPublish people directory templates...

News and events

Ensure all your news items ('articles") and event notices are dated. Include year, month, and day details in the body of each individual news/event page.

Pay attention to which details are displaying on an article page, news feed block or aggregator page (where all items are viewed together). Similarly, for events, review how event content appears on the event page, the event feed and the event aggregator page (i.e. See upcoming events")

Content references

To avoid hosting out of date content, only include content you "own." Don’t copy/duplicate content from another site, as you will not know when that content becomes out of date. Instead, reference that content by providing a brief description of the content and link out for the rest.

When linking to document/PDF managed hosted in another website, it is best to link to the pag on that site that provides the document/PDF, if possible, rather than to the PDF directly. Documents URLs are more likely to be broken than page URLs, i.e. when a document is updated, often the file name of the upload changes, and thus the URL also changes.

Consider using RSS feeds to pull and embedded content directly into your site, such as from the Gazette, Queen’s Events Calendar, Twitter, etc.

Formatting

Lists, headings, and links

Write meaningful headings for lists of links: When grouping links together in navigation, avoid non-specific headings such as "Important links" or "Useful links" or "Quick links." Instead, find a heading title that provides context for the links.

Where you have more than 8 or 10 links, group items into categories/themes, or organize them chronologically or alphabetically. Where you have a very long list of links to offer, consider using accordion containers to keep your pages clean and easy to skim.

Indicate when you are linking to an external site: When linking your reader to a page off your site, the link text can indicate the linked webpage's location, such as "Learn more about xyz on the Queen's Gazette website"

Avoid linking headings; use meaningful link text: Don't link a heading and then provide context for the link below that link. Instead, provide some introductory or "teaser" content to introduce a topic and then link the user to more information with meaningful link text

Don't to this:

Betty's butter

Betty Botter bought some butter, but she said, "The butter’s bitter. If I put it in my batter, it will make my batter bitter.

Do this:

About Betty's butter

Betty Botter bought some butter, but she said, "The butter’s bitter. If I put it in my batter, it will make my batter bitter.
Learn more about Betty's butter

Complex Charts or Graphs

If complex charts or graphs are used, include a text summary and properly coded table of the data.

If infographics or flowcharts are used, a text equivalent should be present either below the image or on a separate page

For math equations, if the equation is simple, an image with alternative text describing the formula is used. If it is complex, the formula is present in MathML code.

For information on accessibility guidelines when using images of charts or graphs on your site, please see the complex images tutorial on the Accessibility Hub site.

Display live data on your site using free Google Charts tools

Forms

If web forms are used, ensure that:

  • instructions are presented before the form
  • labels are named and placed in logical order
  • labels are associated with the actual form field
  • labels for radio buttons or check boxes are located to the right of the options

For information on how to make your web forms accessible, please see the Web Forms tutorial on the Accessibility Hub website.

Collapsible or "Accordion" Containers

[example of accordion style]

Example of an accordion container

Using collapsible or "accordion" containers (see the Accordion Container Example page) as a layout tool can provide many usability benefits, but one must consider the pros of use and the cons of use and overuse based on the kind of content being displayed.

Accordion containers can contribute to a better user experience on mobile. The headings of each collapsible section, if well written/described, can provide a broad overview of page content for users without requiring a lot of scrolling.

The accordion format can be especially useful when guiding people through a few key pieces of content on a page, such as a multi-step process, where information can be shown a little at a time so as not to overwhelm the user.

However, too much content inside each collapsible section can lead to a lot of scrolling and disorient the user.

Also, too much content "hidden" inside the accordion containers can reduce a user's ability to discover it. It the user has to to a lot of clicking to open one container after another, they may quickly lose confidence that they will find the information they seek.

Having all content of a page in full display at all times, and at least the most important content, is often a better approach. Usability studies and eye tracking shows that people are willing to scroll if the information is valuable and formatted properly for scanning. But in some cases, lengthy content is better managed by hosting it across more than one page. Learn more about Writing for the Web

Do: Use accordion containers to guide users though stepped information

Do: Ensure that headings and content within each collapsible area is succinct.

Don't: Don't use collapsible menus as a crutch or a tool to cram a lot of content onto a single page. Long sections of content should be reworked and broken into smaller sections with headings for scannability.

Don't: The accordion style is often adopted for formatting FAQs, but FAQs themselves can be problematic. Learn more about FAQs

Tables

When using tables in your site, ensure that they are only used to display tabular data, and not used to position text on the page.

When using a table, be sure to include <th> table header tags to first row, so that the data is properly labelled and easy for all users and access.

Where using a table, be sure that the table format is responsive – i.e. the layout responds to the smaller screen size and is viewable on a mobile device without having to scroll right or left to view.

Learn about styling options for tables in WebPublish

Additional Resources

See LinkedIn Learning (log in with your Queen's NetID) for courses on usability, such as:

 User Experience for Web Design
Host: Chris Nodder
1h 49m – Beginner

 UX Foundations: Content Strategy
Host: Morten Rand-Hendriksen
1h 24m Beginner + Intermediate