Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

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:

mockup

download bmml source

share|improve this question
    
Can they select multiple languages or just one language? –  Mervin Johnsingh May 16 '12 at 22:04
    
Each item can only have one language. –  Jason Denizac May 16 '12 at 22:15

3 Answers 3

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.

mockup

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.

share|improve this answer
    
The control is in a section that is visually associated with a preview of the content item they are adding. Let me update the question with another diagram. –  Jason Denizac May 16 '12 at 22:16
    
This part of the application is basically selecting content that has already been created. An analogy might be ecommerce - adding a product to a shopping cart, and the language picker could be a size, color, or other variant picker. Its behavior is to change what configuration of the content item is added to the new set. There are currently no user controls in the main content pane. –  Jason Denizac May 16 '12 at 22:36
    
I still think that the language choice should be on the left, with the content item, but you're right this means that the button should be named Add. How about this new edit... –  Myrddin Emrys May 16 '12 at 22:50
    
@MyrddinEmrys This is a nice approach! –  Benny Skogberg May 21 '12 at 18:54

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:

enter image description here

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.

enter image description here

share|improve this answer
1  
I'd resist this solution if at all possible. Firstly, users are likely to whizz past that second dialog box very quickly once they get used to it. So it won't really guard against mistakes. But also, it just slows things down, which obviously we'd all like to avoid. Better to make easy to spot, and easy to fix before real harm is done. –  Peter Bagnall May 18 '12 at 22:50

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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