![\"Expandable](\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/08\/expandable-content-headings1.jpg\")
<\/a><\/p>\nAfter the user clicks on the heading it expands to display hidden content.<\/p>\n
Expandable content can be used on both desktop and mobile, or simply on mobile.<\/p>\n In our recent Go Mobile training, there were a few questions about when to use expandable content.<\/p>\n Let’s\u00a0look at some of the advantages and disadvantages of this content type to help you decide when, or\u00a0if, you should use expandable content on your site.<\/p>\n Expandable content makes content more compact<\/strong> so it helps to reduce page length<\/strong> and scrolling<\/strong>. This is particularly beneficial for mobile devices<\/strong>, where reading is more difficult<\/a>.<\/p>\n Expandable content also provides an overview of content on a page.<\/p>\n “The mini-IA provided by the accordions helps readers understand the structure of the page and lets them focus on the relevant pieces.”<\/em><\/p>\n Hoa Loranger Nielsen Norman group (NNg)<\/p>\n This helps your users decide more quickly whether your page contains the information they\u2019re looking for, and again reduces scrolling.<\/p>\n As pointed out by Raluca Budiu (NNg), expandable content also gives people direct access<\/a> to information rather than forcing them to read content that may not be relevant to them.<\/p>\n This is really useful if you have some content that is specific to certain audiences<\/strong>.<\/p>\n For example, we use expandable content on our\u00a0Open Day website for the travel page<\/a>. It\u00a0works well for this content as people only need to expand the information relevant to them. If\u00a0people are planning to travel to the University by train they\u2019re not forced to read information about travelling by car and parking in the city.<\/p>\n Similarly, expandable content is used on our\u00a0undergraduate website<\/a>\u00a0to\u00a0display the range of qualifications accepted for undergraduate degrees. Prospective students only need to click to expand the qualifications that are applicable to them.<\/p>\n Giving users the choice to view content is useful, but\u00a0can be problematic\u00a0as they\u00a0may choose not to view your content<\/strong>.<\/p>\n This means that content hidden behind an accordion may not be seen by your users.<\/p>\n “An extra step is required to see the information. Headings and titles must be descriptive and enticing enough to motivate people to \u201cspend\u201d clicks on them.<\/em>“<\/p>\n Hoa Loranger (NNg)<\/p>\n Since content in an expandable box could be overlooked<\/strong> by your users this demonstrates that essential information should never be hidden<\/strong>.<\/p>\n It\u2019s important that your main messages can still be understood<\/strong>, even if your users don\u2019t click to view your expandable content.<\/p>\n Expandable content can also be frustrating to your users if they need to read all of the information on your page.<\/p>\n “Forcing people to click on headings one at a time to display full content can be cumbersome, especially if there are many topics on the list that individuals care about.<\/em>“<\/p>\n Hoa Loranger (NNg)<\/p>\n Another issue with expandable content is that it acts as a visual line on the screen.<\/p>\n We found, through user testing,\u00a0that people often don\u2019t expect content to follow expandable boxes<\/strong> and stop scrolling.<\/p>\n We therefore recommend using this content type near the end of your page<\/strong> if possible.<\/p>\n There’s no\u00a0hard and fast rule about when to use expandable content. It’s use\u00a0depends on the nature of your content<\/strong> and the audiences you\u2019re writing for<\/strong>.<\/p>\n If content is audience-specific<\/strong> then expandable content is a good way to give users direct access to information that is most relevant to them – on both desktop and mobile.<\/p>\n Expandable boxes are also useful for secondary and supplementary content<\/strong>, particularly on mobile<\/strong>, as they save space and reduce scrolling. However, to encourage users to click expandable content it\u2019s crucial that you\u2019re headings are meaningful<\/strong>.<\/p>\n Use this content type sparingly<\/strong>\u00a0\u2013 remember it\u2019s an extra click for users to access hidden information<\/strong>.<\/p>\n If content is essential information<\/strong> and applicable to all of your users\u00a0don’t hide it<\/strong>.<\/p>\n Hoa Loranger, Accordions Are Not Always the Answer for Complex Content on Desktops<\/a>, Nielsen Norman Group (NNg), 18 May 2014<\/p>\n Raluca Budiu, Direct Access vs. Sequential Access: Definition<\/a>, Nielsen Norman Group (NNg), 13 July 2014<\/p>\n Jakob Nielsen, Mobile Content Is Twice as Difficult<\/a>, Nielsen Norman Group (NNg), 28 February 2011<\/p>\n","protected":false},"excerpt":{"rendered":" Expandable content, or an accordion as it is sometimes referred to, is a content type that allows you to show and hide information on a webpage. When the content is collapsed it appears as a heading on the screen. After … Continue reading <\/a><\/p>\nHelps reduce scrolling and provides an overview<\/h2>\n
Direct access<\/h2>\n
Extra click to access information<\/h2>\n
Visual line on the screen<\/h2>\n
Summary<\/h2>\n
References<\/h2>\n