1

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.

  • This question would probably benefit from more context. What are users doing before and after they use this? What is their overarching goal? Are they simply saving these strings so that they can use them as a template later, or are they saving them as a critical step in a larger process? – Nate Green Jan 26 '16 at 14:01
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

mockup

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").


mockup

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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