Departmental page templates

[timpaul]

What

Headers, footers and typographic styles for services that aren't on GOV.UK.

Why

There are a large number of government services that aren't on GOV.UK, but that could make use of the components and patterns in the Design System. For example - admin systems, case working tools and intranets.

We currently provide no guidance on how to style these. As a result, each team or department has created it's own templates, resulting in a large amount of inconsistency and duplication of effort. This makes it harder for staff to learn new systems when they move departments or teams.

Examples and links

Examples of headers taken from https://cross-gov-caseworking.herokuapp.com/

Home Office is rolling out page templates for it's staff services, and has invited other departments to make use of them. There has been some update at MoJ and DWP already.

HMRC has it's own pattern library, which uses similar page templates.

[timpaul]

Dropbox Paper audit

On 29 Jan 2019 the Design System team reviewed a Dropbox Paper document discussing admin system headers.

The aim was to reduce the number of places containing guidance and code by:

• migrating relevant, useful content into the Design System itself
• recording important research findings in the community backlog
• removing the original Dropbox Paper page

Below is a record of the outcomes of that review.

If you need to, you can see the original Dropbox Paper content in the internet archive.

Review outcomes

The following research and examples were the result of a x-gov internal systems meetup on 14th and 15th Jan 2016.

Context of use of internal Government systems

• Internal staff systems are sometimes seen by end users, for example if they visit a job centre or another face-to-face touchpoint.

• Many staff spend their entire working days using internal tools, and jump between multiple systems as they have to use multiple ones simultaneous to do their job. E.g. case workers may have to consult/enter data into 3 or 4 systems to complete one case.  


• Note that when working between different systems, some users arrange the systems on their screen in specific ways to maximise either efficiency and utilise screen real estate, for example having one system in a window on one side of the screen and another on the other side to speed up cut and paste or cross referencing 


• The tool will be accessed from a variety of screen sizes and device types (mobile, tablet). 


• Many tools are used frequently by users who become expert in the system, but other tools are only used very occasionally, so it cannot be assumed that users are familiar with the form and function of an internal system.


User needs

• 
As a gov employee I need to quickly find the functionality I need in the tools I use, so that I can be efficient in my job
 - “Where is the search box here?" 


• As a gov employee I need to be able to quickly identify which tool I am looking at when I glance at the page, so that I am efficient and reduce mistakes

• As a gov employee I need to have trust in the internal tool that I am using, so that I can be confident using it and showing it to citizens when necessary 


Types of content in current internal tool header’s:

• Primary nav and Secondary nav

• Department name

• Service name 

• Navigation elements - pattern that top left includes link back to dashboard/top of the tool 

• Breadcrumb trail

• Page name 

• Search box

• Page controls 


Questions

• Can internal tools that are not on Gov.uk be allowed to use Transport and Crest? Currently not, but we discussed the value of trust these element bring, and the assurance 'the thing' meets a certain standard

Summary of thoughts / recommendations from the day:

• there may be a few variations of header needed

• trust is just as important for gov users (and when they share screen with non gov users)

• header / systems should feel part of the gov 'family' - a continuum within a digital service, and across different services.  What the external user sees and the internal user sees, in service delivery are part of a whole

• Follow 'norms' for header layout - home page/name of the thing to the left.  user settings to the right.

• use words not icons

• use type not images

• dept logos? hmm maybe?  Text is better.

• search?  probably not - unless it truly searches everything

• put as little as possible / as needed in the header.  users miss navigation and other elements in the header

• use a secondary header - no recommendation on how this should look/feel.  But used for navigation, search, breadcrumbs, info that need to 'stick' to top of page, etc


[MalcolmVonMoJ]

The pattern used by some MoJ services hosted on legalservices.gov.uk

The LAA's Client & Cost Management System uses this header:

Some services use their own departmental colour like Civil Service Learning

[EveBayram]

Example
Header for an internal MoJ service:

This service is using the MoJ header pattern: https://moj-design-system.herokuapp.com/components/header

In this example, the header includes two links:

1. crest + HMPPS (this link is a way out of the service - it takes you to a navigation page listing other internal services that you have access to)
2. Service name (this is a homepage link within the service)

Observations

When observing users on the service, they are not confident navigating with these two links. I've observed confusion caused by the two links going to different places during testing sessions.

Thoughts

1. The MoJ header pattern has these two links aligned left, whereas the GOV design pattern has the first aligned left and the second link aligned centre. My first untested thought is that the lack of spacial distancing and the mental association that this service is part of HMPPS makes it difficult for users to predict that these are two separate links that will take them to different places.

2. Unlike GOV.UK, internal case management services don't always have a clear 'home'. So if you are using the organisation name (or crest) as a link it's harder for user's to know where this will take them.

[karypun]

We've just launched our HO page templates last week, combining internal headers and footers which were originally separate elements in our design system. There's still a bit of work to do on the code snippet but you can see what we've done here: https://design.homeoffice.gov.uk/styles/templates