Accordions should be used where a page contains a lot of content that is not relevant to all users, but not just to 'shorten' long pages.
Wherever possible, you should make sure that all your web content is visible on the page and not hidden within expanding/contracting boxes.
This makes it easier for users to find what they need, and makes important content or calls-to-action less likely to be missed.
It is not helpful to hide key information from users when all of it might be relevant.
If you think a page might be too long, you can divide your content into child pages, or put feature boxes and headings to good use.
You can use an accordion when you have a long page of content that is all related to the page's overall purpose, but not all the content is relevant to all users.
Small sections of content that are only relevant to some users should be added to different accordion items by topic, with a clear heading for each accordion item.
This will make it easier for users to scan the page for the sections of content that they need, and will minimise scrolling and visual overwhelm by hiding long sections of text content.
Below is an example of how you can use an accordion.
For detailed guidance on using accordions, go to our Wiki:
Depending on your responsibilities and how comfortable you are working with EdWeb 2, you can find resources and consultation services to improve specific features of your website.
The graphic design service can support to create custom graphics that can be used for digital or printed products.
MyEd, the Notifications Service and the Text Messaging Service are used across University websites to communicate with users. Portal services can help you manage these services on your website.
The user experiences team are here to help you research and implement ways for your website to become more user-friendly.
The web development service can help with your front- and back- end development needs.
This article was published on
