The page header gives context and confidence to the user so they understand what the page is about. It is present on every page of ec.europa.eu, just below the site header, except for the home page where it is replaced by a page banner.
Depending on the part of the European Commission site you are visiting, the header is comprised of a combination of the following components:
| Component | Mandatory | Optional |
|---|---|---|
| Breadcrumb | x | |
| Metadata | x | |
| Page Title | x | |
| Introduction | x |
Breadcrumb: Best practice
The breadcrumb is a standalone component that is always on top of the header.
Page title: Best practice
A good title tells your user which page they are on and what that page is for. It functions as the top level heading (H1). It is also used to construct the <title> element. It has a maximum of 60 characters.
Introduction: Best practice
Important: the page description should be as accurate as possible, as users often arrive on a page via a search engine or a link, and will not have the context provided through normal site navigation. Users should not have to navigate backward or forwards in the architecture to understand what the page is about.
Usability tests have shown that people do not read an introduction when they land on a new page for the first time. Users tend to fixate on titles, then dive into the content below, maintaining an F-shaped reading pattern that ignores the introduction. This is true for landing pages as well as for detail pages. It is therefore strongly recommended to keep the introductory text to one line max, or to omit it all together.
Metadata: Best practice
A maximum of 3 metadata items can be added, such as content type, author and publication date. The meta-line can also contain a label, to show the status of the information displayed (metadata items act as a signpost for the user to recognise the type of data presented).