Select from option list and apply action

Question

I have several labels that are associated with text, e.g.

Default : Text
Label1  : 123
Label2  : 456
Label3  : 789

The UI for this is currently structured as follows:

[Default ▾] [Save] [Save as] [Delete]

[ Text 

                                   ]

where [Default ▾] is a list of all labels and will populate the text field with the associated text on change.

[Save] will save the text currently in the field with the current selected label.

[Save as] allows the user the save the text with a different label (through a javascript prompt) that will then appear in the drop down.

[Delete] allows the user to delete the current text and label.

The question: What is the best way to structure the UI? Is it fine to have these actions as separate buttons, or would it be possible to include them in another dropdown, e.g.

[Default ▾][Actions ▾]

where [Actions ▾] contains, Save, Save as and Delete.

Answer 1

Having related dropdowns placed side by side is probably one of the more confusing UI pattern. You can never predict how a user would interact with 2 dropdowns and never assume the user will always select the first dropdown follow by the second. What if the user chooses the 2nd dropdown, would it affect the result? 2 dropdowns usually work best with an additional button.

2 Dropdown Selection

^{download bmml source – Wireframes created with Balsamiq Mockups}

It might be unfair for me to comment on your UI since I don't have the full picture of how your app works and the context it is being apply to. However I think the current setup is kind of awkward, using the selection dropdown to populate the text input. Is it necessary to have the text input? Can you perform the actions on the dropdown without the text input? From what I can see, you just need a modal box to confirm your actions or provide additional options (such as for "save as").

^{download bmml source}

Having a single dropdown streamline your UI flow and reduce clutter. Its also easier for user to understand how your component works.

Answer 2

It depends on how many actions you want to display and how often those actions are used.

If there are a lot of different actions, then placing them in organized menus would be better.

If the frequency of use is high, don't place them in menus, as you are introducing another click that is not required.

In your scenario of only three actions, I would opt to display all of them without a dropdown menu.