5

I have a table of items that each have a particular status color icon. The users will need a quick method to change this status. I imagine click on the status icon an picking the new status. However, I can't seem to nail down how they pick the status. Do I bother to display the current status in the list? Should I just use a drop down list? Would clicking a link to directly change the status rather than displaying a radio button/close button combo be more intuitive?

Here's my current idea (poorly mocked up with paint.net):

status

Edit: Thanks everyone for suggestions. I've gone with some suggestions from @kalessin. Here's the final version:

status final

3
  • I would suggest adding "save" button to not make user worried "will the system really save my choice? isn't it only temporary?" or just confused "where is the save option?". Moreover, if the user changes his mind he does not necessary must remember what was the previous option. He needs to click a button anyway, so this will certainly not increase the number of clicks
    – mkk
    Sep 15, 2011 at 18:42
  • @mkk - Good point. I'll add both a save and close button. Sep 15, 2011 at 18:50
  • 1
    Kudos for adding your final idea as an update to the question.
    – Mufasa
    Sep 16, 2011 at 1:49

3 Answers 3

3

I think the mock-up is probably the best way of implementing a change of status; just make sure the pop-up appears quickly.

If you're using the <label> element with the radio buttons, there's no need for a link as the radio buttons will be selected automatically when their labels are clicked.

To make it as efficient as possible, you should close the pop-up once the status has been changed. You should also always display every status option, even the current one. That way, experienced users will always know where to click without reading the labels, as their relative positions won't change.

5
  • Thanks for your response. So this is what was keeping me going two ways: if you're clicking and immediately closing, what's the point of having radio buttons? I could easily just highlight the currently selected status. Sep 15, 2011 at 18:53
  • @TheCloudlessSky: The radio button clearly shows the current selection in the pop-up. This will serve as a useful visual indicator because the pop-up will take the user's focus away from the table. Again, thinking about speed as a primary factor.
    – Kalessin
    Sep 15, 2011 at 18:56
  • Yeah I agree, I'm just not sure another circular indicator is the way to go. I'm thinking along the lines of a small check icon only on the selected status. This would also reduce the amount of clutter on this UI. I'm going to wait a bit to see if anyone else has any other input. Cheers for your response. Sep 15, 2011 at 19:00
  • @TheCloudlessSky: I'm now wondering how easy it would be to color the radio buttons themselves and dispense with the icons... but I think that's going the wrong way ;)
    – Kalessin
    Sep 15, 2011 at 19:03
  • Or perhaps the inverse - dispense of the radio buttons and use the icons directly. I can easily add style to show which is selected. Sep 15, 2011 at 19:36
0

How about something like this? Its a very rough visual. The idea I'm trying to convey is that you could use a slider bar to chose between options.

enter image description here

0

I'd just go with a select box that's always visible. Everyone knows you can click on it to get more options. You really have no way of knowing you can click those little status indicators in the first place.

If you are fond of the indicators I'd take a look at how gmail handles their label options. I definitely think the active state should be listed ( with a checkbox ). I know I find myself selecting the active option as a way of getting something out of the way sometimes. I think the radio buttons are a bad choice: it seems to take a way a lot of what you can actually click.

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.