- What factors do you take into consideration when designing headers? Upload examples of what you've used for your project (and what worked/didn't work)
- Comment on the patterns that are posted below (and why you think it works, doesn't work)
The audit showed that headers are used everywhere! They’re used on websites, forms, web views, modal popovers, panels and more.
The audit showed that a header can serve many purposes, such as:
- Anchor the page
- Reinforce the brand (visual elements help provide familiarity eg. logo, colour)
- Give context and help to orient the user (through things like headings)
- Provide navigation options (link to content, menus, search)
- Quick access to support or highly accessed features eg. call us, help, sign-in to online banking
- If you had to put this pattern in a category, which one does it fall into? Headers or navigation? Or both?
- What is the relationship between navigational headers and IA?
- Considerations for how the header and footer work together eg. is the relationship between header and footer important, or, is the relationship between header, footer and content important to you when you design or use this pattern?
Global header. Complete Freedom form.
Global, navigational header. WLive.
Navigational header. WLive, mobile banking app. L1, L2.
Global, navigational header. Public site.
In general i use only the headers provided in the Sketch file where i can. Certainly for application forms.
Below is WIP for the CSH application form headers. Though we would like to tone down the prominence of the 'sign out' button and are using a soft button.
We have also removed the chat icon and current thought is for that to sit bottom right as this appears to be common web practice.
I personally think the Westpac Live site should adopt the new Public site style header.