An accordion is a series of expandable vertical panels, designed to save space on a page by hiding content and revealing it as required.
Accordions can work well for people who use a service regularly, or who need to perform familiar tasks quickly.
Only use an accordion if there’s evidence it’s helpful for users to:
Test your content without an accordion first. Consider if it’s better to:
Do not:
The optional collapse all/expand all functionality allows users to perform the action to all accordions, reducing time and clicks to reach the required information. It can be removed or added as required.
This function should not be used to help users locate information within accordions. If a user is expanding multiple accordions because they are unsure of the content they contain, consider more descriptive titles or removing accordions all together and displaying the content separated by headings.
By default, all panes in an accordion are closed. To render an accordion pane expanded on page load, add the .nsw-accordion__open class on the .nsw-accordion__title element.
Use clear labels
Accordions hide content, so the labels need to be clear. Ensure the headings used are brief and explicit about what is contained in the hidden panel. Intuitive headings help the user build a clear mental model of the content.
Do not disable sections
Accordions can be set open or closed. They can be configured to only allow 1 panel to be open at a time. Do not use with only 1 panel allowed to be open at once, if people need to compare items in different panels.
Disabling controls is normally confusing for users. If there is no content for a section, either remove the section or, if this would be confusing for your users, explain why there is no content when the section is opened.
Consider tabs if the user would likely need to flick between content sections.
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.
Buying or building your first home? You may be eligible for a $10,000 grant under the First Home Owner's Grant (FHOG) scheme.
This grant scheme only applies to buying or building a new home.
You can make a claim if:
If you are building a new home, you could also be able to apply for the Australian Government grant of $25,000. To be eligible you must:
HomeBuilder complements the NSW Government’s existing First Home Owner Grant and stamp duty concessions.
The NSW Government recently announced increased thresholds for purchases of new homes and vacant land to build a new home from 1 August 2020. The threshold for existing home purchases remains unchanged.
In your team there may already be a sprint cadence that includes content design. Become familiar with agile practices such as the Kanban wall, daily stand ups and sprint planning. Understand the user journey and their needs. Get involved in usability testing sessions and iteration.
Otherwise, the content workflow may be separate from the product team. At the very least, make sure the team has real content to use, when they’re building a prototype. Also ensure your team uses real content when it does usability testing. Attend playbacks from this testing, to know how your content needs to change.
As well as designing the user experience with product team members, a content designer works to know the facts with subject matter experts.
Your aim from the outset is to simplify everything for the user. Your main task will be to set up a clear path for them to achieve their goal.
Start with a user story. You should create one for each piece of content, from user research. If you’re part of a multidisciplinary product team, everyone is likely to be using them as you design and build.
A user story will help you to pinpoint the user need from the outset. It puts the user front-of-mind and gives you a focus when designing and writing the content.
Next, create a structure for your page, based on the user story. Write up meaningful H2 headers to serve as signposts to help the user do what they need to do.
Share your way of working with your subject matter experts – in person if possible.
They're a great way of introducing your approach to a subject matter expert, which may be completely foreign to them. It will show them how you're focusing on the user, and what you're trying to solve. Ask them for feedback. Find out if there’s anything missing and if you’re on the right track.