Question

Imagine my application has a list of supported languages. I’m looking for a UI element which allows to select a subset of the supported languages plus make one of them the default.

At first, I thought to use a list with two checkbox columns but the user will be surprised when she activates one in the “default” column because that will deselect the current default. I could use radio buttons but that also feels clunky (and a waste of screen space).

The next idea was to have two lists, one with the available languages and one with the active ones. But how would the user select the default in this case?

Answer 1

Our current solution works with two lists:

 Active                 Available

 * English              Italian
 French        <=>      Greek
 German

You can drag and drop elements between the lists to make a language active or not. The first element of the left list is the “default”. In the UI, we give it a special style, so users can easily recognize “this language is special.” A tooltip (and the documentation) reveals “this is the default language.”

To select a different default language, just drag one of the elements on the left side to the top of the list.