I am designing a screen with content that can be translated into 40+ languages.
the flow is: the user creates content, then selects the languages he would like the content to be translated to from a list of ~200 languages we have available, then each translator receives a file accordingly. The problem I am trying to solve is that adding 40 items from a list every time is tedious.
I am looking for design patterns of a multi-select list that will ease up the process. Any ideas?
Allow users to create and use presets. Each preset is a cluster of languages users can choose according to their needs, fully customizable (it's negligible in a DB, but looks like whoa! for users). So they can create a preset "My Preset 1" and include English, Spanish, Italian, French, etc. Then "My preset 2" and English, French, German, Russian, etc.
You can even offer some presets like RTL, LTR, Cyrillic languages, Latin/Romance languages, Asian languages, etc. Then present the languages as chips or checkboxes (especially if you allow concatenating presets).
What is the available screen space for this interaction? I am guessing this might be a mobile screen that you are struggling with. I would look at using a checkbox component versus a drop-down list if you can. If you have to use a drop down list, look at using a version that allows the user to type in a portion of the text to act a filter on the list of elements. See: https://spectrum.adobe.com/page/combo-box/ for a detailed example
You may also look at saving the user's previous choices, if they tend to follow similar workflows. That might also help reduce the need to scroll and select.
Presumably the user will be using this site more than once and, most likely have a limited set of languages which he would like the text translated to.
How about letting the users select languages and make groups that he would use. The pulldown could start with the selected language / language groups.
Use a swaplist i.e. two listboxes with two buttons in between. The listbox on left has all the options and the listbox on the right has what options the user wants. The buttons between are basically denoted by and arrow pointing left and an arrow pointing right. Selecting an option on the left box and pressing the right arrow moves the option to the right listbox; adding it to the users desired options. Selecting an item(s) in the right box and pressing the left arrow removes it from the users options and returns it to the left box. Another similar means is to use chips. In this case there is only one listbox and an add button. The user clicks one or more items in the listbox and presses add and chips that represent his selections appear as chips. The additional advantage of these methods over a dropdown or checkbox approach is the options can be ordered in the way the user wants.
