Page tree
Skip to end of metadata
Go to start of metadata
Component nameSummary section
Description

The page navigation and summary section was designed as part of the broader content type template design process.

A consistent area at the top of a page is 'reserved' for displaying key information that summarises the page content. This summary information should sit 'above the fold' on our most popular screen sizes and resolutions and allow a user to get an overview of the most important information on the page.

The information displayed in the summary section varies across the different content types. The only element consistent across all types is a page title. The majority of types also include a short summary paragraph. Certain content types such as announcements, events, campaigns or projects have additional metadata such as start/end dates, event costs, locations and status.

Navigation element details

A link to the owning organisation landing page. This allows the user to step 'up' to a broader range of content within the same organisation.

  • A clear link to the owning organisation landing page
  • The link is positioned above the main page content inferring ownership
  • A contrast colour line separates the link from the page content
  • The link itself is prefixed with ‘From’ and uses default link styling

Content type label

A label that states the content type or sub-type of the viewed content item.

  • The content type label has been relocated to the metadata section
  • The prominence of the label has been lessened. It now no longer looks like a link

Type-specific metadata

Some content types require further metadata. The metadata provides supporting info for the content item and is not critical to understanding the main page content.
The presentation of the metadata should reflect this.

  • Start and end dates are now presented in 'natural English'

A link to a filtered list of content items of the same type/sub-type and owned by the same organisation. This allows the user to view more content items thematically similar to the one they are currently looking at.

  • Relocated the type and organisation link below the content type label. A user can now scan the title, summary and metadata before being offered a link away from the page

Testing and iteration

Objectives

  • Improve the clarity of the page title and summary

  • Reduce ambiguity of navigation - Elements that look like links or buttons but are not

  • Combine page metadata into a single logical location

  • Provide a clear path to an owning organisation landing page

  • Provide clear access to similar content items from an owning organisation

Read the detailed write-up of the summary section user testing

Before-and-after comparison

Initial design - 2015Iterated version - 2016

Further reference

Stories

Presentations