Admin layout
Use this pattern to let service teams and government officials manage work on admin interfaces and internal systems.
Note: In some cases the height of the content is smaller than the height of the viewport especially in desktop screens. As a result, the footer of the page will stick to the middle of the screen which is not ideal for the user experience. To fix that, you can use the
.govgr-layout-wrapper__full-height CSS utility class combined with .govgr-layout-wrapper.
Start with needs
When designing an admin interface, it’s easy to just show database rows on the screen with buttons to add, show, edit and delete records. Don’t do this. It’s lazy.
Admin users will typically be doing specific admin tasks, and good admin interfaces will support these common tasks. It’s your job to figure out what these tasks are.
Be consistent, not uniform
We’re fully expecting that some of our design patterns won’t apply that well to admin interfaces.
You might renew your passport every 10 years, whereas admin users are often using their admin system all day, every day. Our patterns are mainly optimised for the public, who don’t use government services all that often.
Do research. If you find particular design patterns aren’t working, you can change them.
Here are some things we’ve found work well:
More than one thing per page
For services for the general public, we recommend one thing per page. This helps people find their way through unfamiliar processes.
For admin interfaces, you can assume that staff are familiar with the process and optimise for speed instead. This probably means putting more than one thing per page.
That being said, you may need to gradually guide new staff through these processes but also making it faster for more experienced users to do everyday tasks.
When a staff member first logs in, the screens may include help text, hints or even call scripts - assuming the staff offers phone support - interspersed between the form fields. As you get more experienced, you can turn the call scripts off, leaving a very compact interface. The buttons to see the call scripts and guidance should always be present in the top-right corner.
Use the full width of the browser
Admin users often need to switch rapidly between tasks, quickly familiarise themselves with new cases and cross-reference different bits of information. All these things benefit from more screen space.
If you know that staff will be using devices with large screens, it makes sense to choose a wider width or go full width. This doesn’t mean you don’t have to make it work on mobile too (the time when something goes wrong and you fix it from your phone, you’ll be glad you did!)
You can also use a wider table to increase the amount of information it can show on a single screen. They’ve used this information density carefully – the page isn’t cluttered or confusing.