Updated

Page style template

We discovered through user testing that a common page template creates consistency that help people find the information they’re looking for.

Top-level message

Start with a brief sentence that states the most important takeaway on the page. This sets their expectations about what they’ll find on this page and if it’s valuable to them. There could be a second sentence if absolutel needed, but that’s the limit. Making this sentence bigger emphasizes its importance.

Here’s an example from the covid19.ca.gov Travel page:

Travel increases your risk of getting COVID-19 and infecting others. For this reason, the California Department of Public Health asks that you limit your travel during the pandemic.

Page index

A way to help users find information easily on a long page is to add a page index at the top. This allows users to see what’s on the page at a glance and select the section that they need.

  • Start text that introduces the index, like “On this page you will find:”
  • Make a bulleted, bolded list of the h2 headers on the page. Do not link subheaders. If something is important enough to appear in the page index, elevate it to an h2 header.
  • Make each h2 header an anchor link, and link each item in the index to its corresponding header.
  • Keep the page index to 6 items or less. Fit smaller ideas under larger, umbrella ideas.

The template in action

The covid19.ca.gov Travel page is a great example of the template in action.

Page index example

🚧 The California Design Handbook 🚧