Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm helping someone improve a website where they are currently using a JQuery UI accordion to display a long list of commands, revealing what they do when clicked. http://stats.neurobots.net/botstats.php?id=1 But accordions don't scale well, even though much of the content areas only contain a single line. What would be a better way to display this?

share|improve this question
1  
I would remove the accordion altogether, and expose all the content so users don't have to click just for one line of content. Sure the pages will look rather lonely and bland, but your users will thank you. –  Jung Lee Jun 30 '13 at 22:38
    
Agreed; how about a table for this content? It would be very scannable; your users could find what they're looking for at a glance. –  LindaBrammer Jul 1 '13 at 0:09

3 Answers 3

up vote 0 down vote accepted

I'm pretty much in agreement with the two comments above. Often, the best alternative to an accordion is to simply not use an accordion.

Scrolling a page is often much easier than having to purposefully expand/collapse panels in an accordion.

The exception to the rule would be if each accordion has a LOT of content, and a user is likely to only be interested in one panel. However, at that point, I'd argue that's a sign that the content should perhaps be broken out into separate pages in that situation.

share|improve this answer

A good solution to an overly long accordion list is to have a single page website with the floating side navigation.

Not so good example: http://blackestate.co.nz/

Basically, you list all the titles on a floating navigation and using that to take the reader to the location on the page. Scrolling animation always makes this interaction pleasant.

share|improve this answer

Since the contents are just single lined, having an accordion is a bad idea. Here is something you can do, Let's consider the cmd tab.

Use an icon to help user quickly spot what he needs

I mocked this up in photoshop

enter image description here

You can use a grid of such views .

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.