Use of accordions for content

[Sean Hudson]

Bias Precursor: I have a client who seems to believe users are afraid of scrolling.

The Issue
In programming a website for a lawyer client of mine, he is afraid that the pages with word counts of 1500+ will intimidate users because of length and lose their interest. I tried to suggest breaking up the paragraphs with leading headings and bullet point lists (maybe pictures) to make it visually easier to handle, but that didn't seem to interest him. I suggested (as he has used before) a list of the headings as anchor tags to jump to sections but he dismissed that with "well once people click on one and they're way at the bottom, they might get lost down there and move on." Before I could interject with the Top anchor links he asked that I do up a demo page.

The Demo Page
He wants to put all of his site content into hidden div containers that expand (Jquery slideToggle()) when clicking on the headings. He believes that having the headings immediately available will give users a good overview of what the page is about. I believe that it will hurt users who like to scan pages for keywords by hiding all the content behind a click.

My general feeling is that users don't mind scrolling, but that hiding all of his content behind headings that are clickable to reveal them would be a mistake in usability.

Can I get some feedback on this topic?

[ralph.m]

Sean Hudson. Welcome to the forums.

It's a great question. For the most part, I don't think it will hurt users much to go this route. The important thing is to make sure that all the content is available if JS is off. It's also a bonus if the hidden text can be revealed by keyboard actions rather than just by a click.

It may be worth looking into having a summary of a sentence or two under each title that is visible, so that users have a better idea what that section contains, and then have a read more link to reveal the rest of the content.

[Sean Hudson]

Thanks, ralph.m!

I've done a bunch of research and haven't found anything saying "don't do this!" So I presented it to my client as a "I don't agree with this method, but that's because I don't like this use of accordions as a user."

The only legit argument I could find backed by research, is that it would take users much longer to gain comprehension of the topics through having to click multiple times. That and the subtle annoyance of the page height jumping around and possibly wanting more than one section open at a time persuade me to go another route; but it's not my final decision

Thanks for the input. I will try out the excerpt idea as well!

[itmitică]

The Issue
In programming a website for a lawyer client of mine, he is afraid that the pages with word counts of 1500+ will intimidate users because of length and lose their interest. [...] "well once people click on one and they're way at the bottom, they might get lost down there and move on."

It makes sense to have a lot less details on a front page. The users have to be able to take one look and gather most of what your client has to offer.

Hiding content it's pretty useful... until the first click to reveal it.

If, upon users action, the revealed content would go past 10 rows, that will also intimidate users.

Even more, by revealing one large piece of content they also might get lost in the page, since that's a pretty big change in "scenery" and users may not find their "way back home" or they will also have to scroll now.

So, it's more about how large is the largest piece of content you have hidden.

The Demo Page
He wants to put all of his site content into hidden div containers that expand (Jquery slideToggle()) when clicking on the headings. He believes that having the headings immediately available will give users a good overview of what the page is about. I believe that it will hurt users who like to scan pages for keywords by hiding all the content behind a click.

My general feeling is that users don't mind scrolling, but that hiding all of his content behind headings that are clickable to reveal them would be a mistake in usability.

Keeping a whole lot of content in one page doesn't make sense since a long time.

In your clients case, you either implement "short topic descriptions page - longer fully detailed page" couples or go for extremely well designed, meaningful and condensed billboards.

[Stevie D]

My general feeling is that users don't mind scrolling, but that hiding all of his content behind headings that are clickable to reveal them would be a mistake in usability.

In general, users are happy to scroll, where they can have a strong enough "information scent" to want to carry on down the page. If the content looks interesting and obviously continues off the bottom of the screen, they will scroll, and that's been the case since the very early days of the internet. What has changed is that people's attention spans have got shorter and their willingness to read long passages of text has diminished*, and so whereas early websites were noted for their emphasis on text, that is often not the case any more.

That isn't to say that people won't read (the proliferation of blogs and comments is proof of this), just that you need to signpost the text much more, and keep it as brief as possible (actually that last bit is no bad thing, it's just taken a while for it to get the attention it needed). A key part of that is to not have too much text visible at a time, because a significant chunk of people will just lose interest and go away. So while each individual section of text might be fine, the cumulative effect of such a large block may be daunting to some people. Even breaking the text up with headings means that they still have to scroll through and find the headings. If the text does not follow sequentially but is more of a "random access" page, that might mean that for people wanting the sections that appear below the fold, there may not be a strong enough information scent for them to scroll down. So from that point of view, having an accordion system might be a good plan. If you're doing that, I would strongly recommend having a few lines of text as a teaser under each heading, to make it more obvious that there is content there and how to get to it, in order to manage people's expectations.

* I don't know to what extent the attention spans of individual people have changed, or whether the difference is that the internet used to only attract people with a modicum of intelligence and perseverance, whereas now it attracts everyone including those who are, to put it charitably, somewhat cerebrally challenged. This distinction is left as an exercise for the reader.

[Sperlock]

A lot of good points have been made. I also want to add that arguing about design and what will work best for users can go back and forth. Ideally, grab a few random users and do a usability test on the design you end up creating (or a few random users for each design you're arguing between). That will give you better insight on where problems are popping up, if any, and may point to a different solution.

[Sega]

From my experience, clients tend to want the homepage not to scroll. Many feel it's real-estate space on the page, and therefore wish to have all the information present on the screen without scrolling.

I personally don't mind. My recommendation is so that the page does not scroll on and on, as there is a limit to the amount the user will scroll. In terms of user experience, hiding content might be the best solution. If you have a tabbed interface on the bottom with the various information it would be more than ideal as you'd easily be able to find what you want without scrolling on and on.

I recommend that clients don't write pages and pages, it's always best if the content on the homepage is kept short, with handy read more tab. Web pages were not intended for that much textual content.

[insidemyrocket]

You'll find a few arguments pro scrolling in this article:
http://uxmovement.com/navigation/why...the-new-click/