I have a 4-level radio button list which is like:

Tree Structure

On page load, only the 1st level options are shown (Alpha/Beta/Gamma/Delta). Based on the value selected in the 1st level, the corresponding 2nd level is shown and so on.

Radio buttons or Dropdowns seem to be pretty regular and boring way to go about the task. I was wondering if I could enhance the UX, but am short on ideas.

I had a look at this but that seems to be more suited to scenarios where information needs to be shown to the user and does not involve user interaction via clicks/selection.

So any ideas/suggestions?

  • 2
    "Regular and boring" doesn't mean that it needs to be enhanced. What problem exactly are you trying to solve? Commented Dec 29, 2014 at 8:23
  • There isn't anything to solve. It's all about doing something different than the "obvious" way. And I believe there isn't anything wrong in thinking that. Commented Dec 29, 2014 at 8:48
  • Then you can use a command line to do this. Or have the monitor blink out the list to you in Morse code, after you navigate the tree by sending text messages in ancient Mongolian to a specific phone number. These ways are pretty different from the standard, yet I assume that it's not the kind of thing that you had in mind. If you're not trying to improve a specific parameter of the current solution, there's no way to know that you've succeeded or than a suggestion is even relevant. Commented Dec 29, 2014 at 9:01
  • 1
    "And I believe there isn't anything wrong in thinking that." - there often is. Boring designs tend to be good designs. A design that is not boring will, almost by definition, attract attention. It will distract the user and stand in the way of getting things done. There is nothing wrong with adding subtle visual effects to improve the aesthetics of an interface. But trying to change a structural concept because it's simple, or boring, or widely used, is almost always a mistake. "Good design is invisible".
    – Rumi P.
    Commented Dec 29, 2014 at 13:51
  • @RumiP. Maybe you're right. I should have worded it correctly. My plan wasn't to implement radical changes, just subtle changes which will keep the end user interested. Commented Jan 5, 2015 at 7:43

4 Answers 4


I have to say this was a little interesting problem. Thanks!

  1. Let's start with the radio buttons that are redundant because they are being repeated all the time. They are also universal to all directories, so we can put them on top of the hierarchy. This will deliver user from one redundant level in the hierarchy.

  2. Multiple selection choice will allow user to select many directories (regardless of the level) at once and apply radio buttons to full directories or single branches, if needed.

  3. Resulting interface (on the right) should show what are the contents of directory, so signifiers (of small or medium or both) are shown to the top directory as dots on the right.

  4. Directory with only single type content should have a highlight or other way to display it's content type.

NB: obviously this can only work if the 4th level really is similar to what you've described and poses universal choice options.

enter image description here


I don't think it's possible to provide an answer to this question with the example content given... so I'll answer with why I think that and see if that helps you.

With a tiered menu as you've shown above, there's typically a relationship between the menu items or the tiers. With what you have above, there's no relationship between them, so it's impossible to design an information architecture or navigation hierarchy that would improve things. A menu of random words is impossible to reorganise in a meaningful way.

What I would think you need to do to help with your application are as follows:

Think about the conceptual objects that the user would interact with, and then design your interaction based around actions that might be taken with or to those objects. Work out how best to present those interactions in the terms with which your users would talk about them.


Another option you may consider is using different design elements for each level. For example :

  • Use tabs for the 1st level
  • Use accordions for the 2nd level
  • Use a tree for the 3rd and 4th level

The design elements you choose must be compatible with the overall architecture of your application.

  • 1
    This is also a good solution. I'll have to gauge the amount of work it will require to achieve this. +1 anyways Commented Jan 5, 2015 at 7:43

Would a mega menu not be suitable in this application?

Horizontal navigation Take a look at options from say B&Q who have a lot of options within one section. The user hovers over shop (or clicks) and then they are taken to a, very similar to Amazon, horizontal based navigation structure that flies-out. A poor implementation of http://www.3663cateringequipment.com/

From here you'd refine your search. So in your example this would be when the user reaches "Apple" they would then refine their search on the 'apple' page to "small" or "medium". These are, by nature, just attributes anyway so this makes sense to filter.

Few considerations - SEO implications of individual landing pages and responsiveness for mobile and tablet use.

enter image description here

Your Answer

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

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