Best Practice of radiobutton alternatives

Question

Ok I need to add a new filter option to my page.

The first option to choose are steps (6 steps in total) and the second one is the desired status of the steps (Success, Warning, Info, Error). You can only choose one each.

Step: 1 - 2 - 3 - 4 - 5 - 6

Status: Success - Warning - Info - Error

What I could do is to simply create two select boxes. However this is annoying, since it involves more clicking.

So an alternative would be radiobuttons. But 10 new radio buttons take up too much space and look to boring.

What I thought would be to have some kind of regulator of choosing the step and colored toggleboxes for the status (Green = success, Red= Error and so on).

Can someone give some examples or alternatives? Also what is the best way to implement such toggleboxes or a regulator?

Answer 1

Why do you think interacting with select boxes is annoying?

Remember not all mouse clicks are to be considered bad. Select boxes have been around for a very, very long time, and are a neat concise way to select a value. You can also set a default value (if it makes sense), which could be beneficial to the user because they may not even need to interact with it.

So when it comes to choosing an UI widget, there is more to consider than just mouse clicks. You have already spotted how poor 10 radio buttons will be, and this has nothing to do with mouse clicks, and has everything to do with taking up too much space and unnecessarily dominating your visual design.

'Boring' is not a usability factor if the widget achieves the interaction task effectively and efficiently, so you can offset the cost of additional mouse clicks, with the benefit of concise selection and simplified visualisation on your page.

The other advantage of select boxes is they are automatically keyboard enabled, which will help many users who prefer to use, or need to use the keyboard.

Answer 2

The option with two select list is much better than adding 10 more options. Users do not like to read. They just scan, a big part of time.

Considering the fact that you are gonna to use only two select lists with pretty small number of items inside, it is not such a big deal for user. Seeing a ton of similar information is pretty annoying and hard to distinguish.

By using colored toggleboxes user would not get rid of more clicking. The good tip would be setting some default value for each step. For example: If user choose 1 the "Success" status will be automatically select. User can change the status and select the one he needs, afterwards.