What is an alternative for a horizontal accordion?

Question

I currently have a vertical accordion in my design that is working for me. I have a potentially large number of top level items that I can load on-demand, and each accordion section has probably 10 items. Each of these items has the ability to dragged into the middle of the page. It's like a workspace, think Visio.

However, its going to take up more room than I'd like, and it doesn't work so well for mobile so I'm looking a different idea. I could just turn the accordion horizontal, put it at the top of the workspace, and get going but this doesn't seem like a good experience either. Are there any alternatives? Maybe two levels of horizontal items, you select one from the first, and another row loads below to show the sub level items. Any alternative ideas would be welcome.

Update: Example of my two-tier idea. The scroll bars wouldn't actually be there, but it would be a swipe left and right scrolling idea. You would select say Section 5, then the next row would load and you could scroll through that and then drag one of the SubItems onto the workspace below.

Answer 1

Not sure how flexiable you are with modifying the UI, but in order to save space, I suggest having the first tier selections a drop down list so the second tier result would depend on what you've selected from the drop list.

The second tier items are now in a fixed height area where you can scroll to view more. I chose this metheod because this would also work well in mobile view.

Take a look:

Answer 2

Can you be more specific as to what your top level items are? But maybe you cannot disclose that.

You will need to implement a portrait and a landscape version of your view. In either case, don't use horizontal scrolling. Our "eye-brains" automatically yearn for a vertical presentation when we know that there are tons of items to choose from. Your small thumb on the track suggests already over 100 Sections to choose from.

Portrait View

There should be two separate screens - the primary screen that lists your top-level items and a details screen - the list of secondary items that are children of a top-level item.

Your top-level list should be a vertically scrolling list. So that users won't have to scroll through all of that, provide a search text box and ordering options (such as newest/oldest first, highest/lowest rated, most/least viewed, etc) in your app's menu.

When a user wants to view details of a top-level item, they expect to be taken to a fresh, new screen dedicated to that one top-level item's details. So, when they tap a top-level item, a new screen with details should pop up. When they're done viewing, they could just swipe their screen or hit their device's back button.

Landscape View

When you have enough horizontal room, you can divide your page into two sections - the "navigation" section on the left, which should take up less than or equal to 25% of the width, and your details section, the remaining greater than or equal to 75% of the width.

The "navigation" section should have a much darker background color than the details section. This way, users can easily see two distinct divisions of the view. Also implement searching and ordering capabilities as you do in Portrait View.

Users tap a top-level item and the details section changes accordingly.

Answer 3

Could you use something like the A-Z you see down the side of the screen on an address-book app? At least on iOS that kind of works like a 'targetted scroll bar' which might not be quite what you are looking for... but perhaps the idea could be converted into an Accordion remote-control, where as you slide a finger down the control, accordion panels could animate in and expand / contract as necessary.

Answer 4

The simple answer is if you have that many times don't use visible navigation - use on page navigation.

The most important journey for the user on most sites is the forward journey and most sites can be made to work without the need for overall navigation, providing there is a clear way for the user to get to where they want.