Websites

Ten Principles for an Easy-to-Navigate Website

Visitors to HMS websites should be able to find the information they need quickly and easily. By following best practices for usability and website structure, you can create a positive experience for your visitors and avoid causing confusion or frustration. 

1. Get to know your users

Begin by asking questions. Who are your target audiences? What would they find useful? What tasks do they need to complete? What information do they need to find quickly? Ideally, try to collect some data on your users through research tools such as surveys, interviews, focus groups or web analytics on your existing site. Even a little insight into the needs of your website visitors is better than none. Find resources for user research at Usability.gov.

2. Provide a useful and usable homepage

Although people often land on interior pages first, via search and social media, the homepage should still be useful. Keep in mind the following tips:

• People often visit a site to find specific information or to complete a task. Help visitors accomplish their goals quickly by avoiding introductory screens or animation.
• Avoid greeting visitors with long blocks of text about the history of your department or a letter from the director. An "about" section is a more appropriate place for this content.
• Engage visitors with a sampling of what your organization offers. Consider highlighting programs, news, events or other content of interest (and of practical use) to your audience.
• Avoid overloading the homepage, as too much competing content can look cluttered. Determine your top communication priorities so those messages shine through clearly.

3. Provide navigation menus

A primary navigation menu allows visitors to easily locate and move across the major sections of the website. It should appear on all pages of your site.

Provide a secondary menu for each section if the site is comprised of multiple pages. Secondary menus should appear on all of the pages that comprise a section. 

4. Provide navigational options on all pages

This is especially important because users often find pages through search and will want to easily access to related content. Users need to understand where they are within your site, how to move to other sections, and how to return to the homepage. 

Interior pages on the Harvard Gazette meet these needs with widely-used techniques: 

• The primary navigation for the main sections (Campus & Community, Arts & Culture, etc.) is persistent throughout the site.
• The section navigation is highlighted to show the location of individual pages within the site.
• The site uses breadcrumbs, or links showing the hierarchy of a page, to show the location of individual pages.
• There is a “home” link in the primary navigation of the site to take the user back to the homepage.
• The title of the site and logo (Harvard Gazette) are clickable and take the user back to the homepage. 

5. Use standard placement for navigation elements

Users are now accustomed to certain conventions on websites. Using tried-and-true patterns will make your website easier to use because visitors will not need to spend time figuring out where to find common items. These elements should appear in a consistent location across the site’s pages.

• Primary navigation menus: Horizontal menus should be positioned near the top of the page, above page titles or body content. Vertical navigation menus should be positioned in the upper left part of the page.
• Secondary menus: Typically positioned in the left-hand column of the page.
• Search bar: Typically positioned in the upper-right corner of the page.
• Footer: At the bottom of the site, it typically contains the organization’s name, address and contact information. Links to site maps and privacy policies also reside in this space.

View a diagram of web design conventions at webstyleguide.com (scroll down to figure 4.17).

6. Use descriptive but concise labels

Visitors should be able to easily understand what can be found in a section on your website. Use common words and avoid using jargon that is only understood internally. Remember that visitors may not be familiar with HMS terminology, initialisms or acronyms. Also avoid category titles that are vague, such as “other” or “miscellaneous.” Keep labels concise.

7. Organize content in a way visitors will understand

There are numerous ways to group and present content. Choose the methods that are best suited for your particular content and audience. Avoid organizing your website based on structures that may not easily be understood by an outsider, such as an organizational chart.

Common organizational methods include: 

By topic/subject. Example: A research section on an academic department website may have pages devoted to its various sub-fields, as seen on the Department of Sociology website. 

By audience. Example: Resources divided by audience type, such as students, parents, and alumni, as seen on Harvard.edu. This tactic works best when there is not extensive overlap between audiences, and the members of the audience can clearly self-identify with a category. 

Other patterns commonly used in the world such as alphabetical, chronological, geographical, and ascending order. Example: The Office of International Education website organizes programs by continent. 

8. Create menus that are easy to navigate

Find balance between breadth and depth with your navigation categories. Menus with too much breadth have too many categories, which can potentially make the number of choices seem overwhelming. Menus with too much depth have too few categories, with sections that require navigation across multiple menus and subpages (and lots of clicks) to access deeply buried pages. 

The appropriate number of categories and sub-categories will partly depend upon the layout of your website. Horizontal menus will typically fit fewer items than vertical menus. Menu items should fit comfortably, using text in a size that is easy to read. For vertical menus, a user should ideally be able to see all of the primary categories without scrolling. A helpful rule of thumb is to use fewer than a dozen items in the primary navigation. 

View some examples and additional tips for balancing depth and breadth of your menu structure from Web Style Guide and the Nielsen Norman Group.

9. Use drop-down menus with care

Drop-down menus can be a helpful way to allow users to instantly access information within a section. However, avoid using them for multiple levels or for very long lists, as they can become difficult to use.

10. Avoid surprises

A menu implicitly states that when visitors click on an item, they will be taken to another page within that website. Try to avoid including links to outside websites as menu items, if possible, as this creates an unexpected jump for users, taking them off your site without notice. Instead use lists of quick links, add additional links in a sidebar (separate from the website menu) or include links in the body text of a page—these are all preferable methods for displaying external links.

Sources/Additional Reading

Usability.gov
Web Style Guide Online
Guide to Website Navigation Design Patterns
Flat vs. Deep Website Hierarchies
Designing Drop-Down Menus: Examples and Best Practices
Don't Make Me Think: A Common Sense Approach to Web Usability

All websites on a Harvard University domain must comply with the Harvard University Digital Accessibility Policy. This policy is based on accessibility guidelines for websites that have been standardized by the W3C. Numerous resources are available to help you design websites and create content that can accommodate a variety of users on the Harvard University Online Accessibility website.

For departments, offices, centers, and labs looking to build an accessible website

Harvard Medical School built and maintains a Drupal 8 web platform that OCER and IT are responsible for maintaining and ensuring accessibility. Users on these sites are responsible for the accessibility of their content, but not the accessibility of the underlying platform.

HMS Quad-based groups also have access to OpenScholar through Harvard Web Publishing. Similarly, users of OpenScholar sites are responsible for the accessibility of their content, but not the underlying platform. HMS-specific templates exist for OpenScholar sites if you are interested.

If you have questions about either of these options, please email Benjamin_Sharbaugh@hms.harvard.edu.

If you choose to build a custom website on a platform not maintained by Harvard University, you will be responsible for ensuring that site meet all the requirements of the Digital Accessibility Policy.

For developers and designers

Encourage your web developers and designers to address crucial accessibility issues during the development process. Even meeting the minimum requirements for accessibility compliance (Level A) can impact functionality and design decisions, including: site structure, control of time-based media, forms, text size and contrast, and other aspects. Harvard University's Digital Accessibility Policy requires websites to meet Level AA compliance.

W3C provides an extensive checklist of accessibility requirements, as well as tips on how to meet them.

Free tools are available to validate your website and highlight errors that should be corrected:

• WAVE Web Accessibility Evaluation Tool
• W3C Markup Validation Service

For content creators

When creating website content, follow these key recommendations from W3C to ensure that your content is accessible to all.

Please note: This list is intended to serve as a quick reference of the most common accessibility issues related to editing website content. It is not intended to be comprehensive or to guarantee resolution of all accessibility-related problems on a website. View the full list from the W3C.

Structure

• Make your website easy to navigate.
• Give each page on a website a unique titles—don’t use the same name for multiple pages.
• Organize pages using headings with the correct semantic markup.
• For tables containing data, identify the table headers in the markup.

Text

• Use clear language. Review the Harvard guidelines for tips on writing for the web (HarvardKey login required).
• Write descriptive links. A user should be able to understand the purpose of the link from the link text alone—avoid using “click here.” View tips for writing descriptive links (HarvardKey login required).
• Inline links should be underlined, rather than relying on a change of color alone.
• Use left-aligned text for languages that are written left to right, as it is easiest to read.
• Avoid using the following, as they are all more difficult to read:
  • Centered text
  • Fully justified text
  • All caps in body text
  • Blocks of italicized text

Images

• Images should include an alt text attribute (a description of the image that is included in the HTML). Learn how to write alt-text here.
• Don’t use images as text. For example, rather than uploading a graphic of a poster containing essential details, use text to convey the information on the poster. This is preferable for search engines and general usability as well. Logos, graphs, charts, diagrams and infographics are exceptions. 
• Provide a summary of graphs, charts or other information that must be conveyed visually. 
• Image slideshows should have a method to control the presentation of content— forward/backward/pause buttons—rather than only auto-play.

Use of color

• Do not rely on color as the only way to differentiate items. For example, avoid color-coded text.
• Use a text color that provides sufficient contrast from the background. You can check the contrast of text and background colors with WebAIM’s color contrast check tool.

Multimedia

• Do not create content in a way that is known to cause seizures, such as the use of flashing lights.
• Provide captions for video. YouTube has an automated captioning function, but the accuracy can vary. You can also upload your own transcript or caption files. Details are available at YouTube Support.
• Provide transcripts for podcasts.
• Video players should have controls with start and stop functionality.

Should a Quad-based faculty member wish to include Harvard Medical School branding on their lab website, they may choose between their department’s logo or the Harvard Medical School primary logo. In instances when the faculty member’s lab is does not follow the traditional naming convention (e.g., Lastname Lab) in the URL and in the header of the site, the department’s branding should be used to clearly identify the lab as a unit within the department.

If you are looking to use a new HMS web domain on your site, please find instructions in the Use of Name section of the website.