Every digital product or service has a different purpose or message it is communicating, and therefore its header and navigation has different needs. We have drafted a method called ‘Who, what and where’ that explores what a user needs from a site rather than what it should look like it.
We want this to lend itself to more flexibility within the Design System when building user interfaces. We’d love to hear your thoughts on the draft method, what you find helpful, what it lacks, what is confusing etc. Please don’t be shy.
Method: Who, what and where
Help the user know…
Who is speaking to me?
The masthead clearly identifies your site as part of the NSW Government and displays across the top of all products and services.
The logo reinforces the connection to NSW Government and has a consistent placement based on your brand classification.
The site descriptor is the title or name of your site, product or service. It tells the user who the content is coming from within NSW Government. A secondary descriptor can be used where further context is required by the user to identify the associated department or agency.
COMPONENT HELPER
The masthead component is required for masterbrand and co-brand, with pre-built variants based on your classification.
The header component can help you meet logo and site descriptor requirements, with brand approved spacing and typography styles. Header layouts can be adapted, and in some cases combined with the main navigation. In all cases the logo and descriptor requirements must be met.
What can you offer me?
Your site navigation surfaces top levels of information and offers an initial way for users to explore your content. You can also feature functions of the site or additional actions that can be taken by the user, ie. login, language etc.
Search can be added where it assists users to navigation content, or omitted if not required.
COMPONENT HELPER
The main navigation component displays the top level of your IA and aids users to access deeper levels via the mega menu. Smaller navigation may not require its own section so can also be displayed in the header if spacing allows. Be sure to test your navigation across multiple viewports to ensure options are readable and accessible on small devices.
Where am I currently?
The page title tells a user their location in the content and summarises the page. This should be short, descriptive, and distinct from the page content. Typography styles give hierarchy to the page title and can be used alongside other UI elements (such as background colours and borders) to create visual separation.