6

I'm in the process of redesigning dialog menus for our application. The biggest reason is to make the application touch friendly. But these menus will be used in both touch and mouse environments.

The touch environment will mostly be touch monitors rather than mobile at the moment.

I'm curious if an accordion type menus is relevant or should I display all menu options all the time.

enter image description here

A user can select multiple items in each section. Each section should have no more than 20 options.

Drawback of an accordion menu is the extra click/touch to expand each menu, and the drawback of a menu where they are already expanded is the possibility of more scrolling.

Which one is the recommended or more common approach?

Improve this question
5
  • If you upload to imgur and put URLS in the body of your question I can embed them for you
    – Charles Wesley
    Mar 1, 2013 at 21:53
  • Is there a reason you're designing one interface for both touch and mouse use?
    – Kit Grose
    Mar 2, 2013 at 11:53
  • We really need more context to answer this properly; depending on the content being shown in the accordion menu you might argue against or for it. Putting products in them that one might want to compare, for example, is a bad idea. Generally speaking I'd say scrolling is easier than clicking/tapping, though. But: context please?
    – MHD
    Mar 2, 2013 at 23:16
  • @KitGrose Right now mostly because of a time constraint. I suppose the best solution would be a configuration setting to chose between mouse interaction or touch? Thanks!
    – guarddoggraphics
    Mar 4, 2013 at 13:01
  • 1
    @CharlesWesley I added a link to the mockup, no worries on embedding, but thanks. It's just a design mockup, it won't give context as I can't for business reasons.
    – guarddoggraphics
    Mar 4, 2013 at 13:06

5 Answers 5

Reset to default
2

Which menu is best really depends on your situation. More specifically the number of menu items and the relationship between them.

If you have few items (less than about 15), don't bother with the overhead of an accordion menu.

If the you have many items, you then need to decide whether your users believe that there is a clear relationship between them or not.

For example, if you were listing vehicles for sale, it's a fair bet that people would expect motorbikes, off-road vehicles, caravans & campers, and sports cars to be in different sections. Here it would make a lot of sense to use an accordion menu so that I wouldn't have to scroll through many sections that I am not interested in before I find what I want. I would rather see a few sections and expand the one that I am interested in.In this case an accordion menu is a UX improvement over a simple list.

Some things to note though. An accordion menu doesn't have to necessarily only show one expanded section at a time. In many situations you should allow multiple sections to expand and only close a section when someone actually selects the open section heading.

Improve this answer
1
  • Hi and thank you for the response! The number of items can range from 4-20. The relationship is that it's a list of attributes for a patient. I can't get too specific. These attribute categories can be configured by client so the exact relationship is hard to determine, but they will be related to the patient. Right now it is a tree structure and like the idea of a design that allows multiple sections to expand and only close when selecting the open section heading. Is there a way to add an image to a question already asked? I'll add the mockup, but it won't provide context...
    – guarddoggraphics
    Mar 4, 2013 at 12:59
0

It's hard to say what would be best since we have limited insight on the context or content of the menus.

That said, if there's a hard limit of 20 items for each menu, I would think you'd be better off with a static list or, if fitting, tiles. I find that accordion menus are better suited for FAQs or lists that could have a potentially endless number of possibilities. After all, with touch it can be easier to scroll once than to tap multiple times.

Improve this answer
0

Accordion menus often bother me because when one item is expanded the previously expanded item contracts and I want to see both of them expanded at the same time. I agree with @dom's sentiment above that accordions are appropriate for FAQs and things with which you'd likely never want to see more than node expanded.

In general if the item expands to show subitems I think the accordion isn't appropriate, those are the times when one might want to see more than one node expanded, and a tree view control is better. But if an item expands to show an elaboration of itself, like the answer to a question (FAQ) then an accordion might be appropriate.

Improve this answer
0

Accordion menus are, to my way of thinking, suitable in two cases

  • lots of items that can be categorized
  • small screens; enhanced phones for instance.

There should be no need to have two sections open, if the categories have been properly defined.

I have made my own system for css-layout where I can quickly click through to a snippet, like the accordion, select it and paste it into the css-file.

Improve this answer
-1

I wouldn't use a one size fits all approach, as you end up satisfing nobody. What I have done in a similar situation, is to default to the more traditional desktop megamenu, but employ javascript to generate a carousel menu on the fly for touch devices. So the HTML doesn't change.

It works quite well, though I have found it best to avoid flash stuff like CSS3 transformations, as they tend to suck a bit on mobile devices.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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