Language Selector plus Action control

Question

A web application I'm working on has a primary content action to "Add" something to a collection. As a secondary choice, the user can choose a language particular to this content item.

I implemented the control in the straightforward way as shown in this mockup:

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

However, the interaction of changing the language feels a little clunky.

Are there any interaction patterns or other UI approaches to solving this problem? The vast majority of the time, the default language will be chosen. The "add" action should remain primary.

Edit:

These controls are shown in a panel that is visually scoped to affect the content they are previewing:

^{download bmml source}

Answer 1

Rather than a drop down, since you are choosing a particular way to view the same piece of content, how about a tab control? You can use horizontal (pictured below) or vertical if you need more room for languages. When you pick the language, the content below shows the same item in the chosen language.

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

To affirm to the user that the tab selection actually affects how the item is added, text is placed next to the add button. I believe this is a better UI than a drop down next to the button. In particular, tabs are the canonical way to provide a different view of the same data. A drop down on the right that changed the content on the left would, in my opinion, be confusing rather than clarifying. Users don't expect content to alter by selecting a choice from a drop-down.

Answer 2

I think it needs to be separated into 2 steps to make it more usable. This will also reduce the error rate for entering a content into a wrong language (since by default english is selected).

I think the button should be prominent and should just say +Add as shown below:

And the language should be shown on the next step, by default english selected, and save button displayed alongside. For best results, it should be displayed in a jquery overlay window (web2.0 style) rather than user is taken to next page.

Answer 3

Rather than having a control, you could just have some feedback. A bit like this...

---------
| Add + |
---------

You content will be added as *English* (is this not correct?)

Then use language detection to update. So you start typing the content, and after a few words the system goes "hey, this ain't English, this is French!". So it updates accordingly, maybe with a little visual flourish to show you it has noticed. Then of course, if it gets it wrong (which is probably quite unlikely unless you're writing in one of two very closely related languages) then you can just explicitly tell it with the horribly labelled "is this not correct?" link. (I'd word that better, but it's late!).