**Context**
[[ https://www.mediawiki.org/wiki/Translation_UX/Design_feedback_9 | Recent observations ]] suggest that the map from the language list in the ULS is not being used. It was removed as part of T64637.
since the mp is no longer present, the designs can be adjusted to make the selector more compact.
Tracked in GitHub as [[ https://github.com/wikimedia/jquery.uls/issues/128 | issue #128 ]]
**Important:** //This card tracks the work to be done in iterations for ULS redesigns related to the language selector. This is the main card to be used for the design reference. Please don't close this without checking with the Language Engineering team.//
**Narrative**
As a user, I can select languages without the map getting in the way, so that the main entry points (search and common languages) become more prominent.
**Acceptance Criteria**
# The map and header elements (title, close button) are removed (see mockups below).
# The list is styled according to the compact style by default, additional styling will be added to follow the Agora style (see mockups below).
# When the list is connected to an element, the connection triangle is preserved (see mockups below).
# When used as part of ULS settings, the context of the selection and a way to go back will be integrated into the search area (see mockups below)
**Design notes**
A compact version is already available (as extra CSS rules that hide the map) since it is needed for other contexts. Having the current CSS for the compact version is expected to simplify the refactoring, and will avoid having to deal with two slightly different versions. In addition, the compact version worked [[ https://www.usertesting.com/highlight_reels/qPYxPW1aRi1UazTMFreR | well when testing the prototypes for compact links ]].
Some mockups reflecting the final result under different conditions.
Regular list:
{F25669}
When the list is attached to an element (e.g., connected to the cog icon, or a button) a triangle points to the element:
{F25671}
When the list is used as part of the ULS settings (note the option to go back, and the change in the search placeholder):
{F25673}
More on user observations:
- Use speaking Hindi and Bengali picks the languages she knows form "Common languages" section ([[ http://www.youtube.com/watch?v=PITDxBB9fyE&feature=share&t=35m | view ]]).
- When "common languages" is lacking, the user from [1], uses search to pick Bengali ([[ http://www.youtube.com/watch?v=PITDxBB9fyE&feature=share&t=42m11s | view ]]).
- English-speaking user picks Nepali by searching ([[ http://www.youtube.com/watch?v=61UDcq_jnzs&feature=share&t=40m03s | view ]])
- French-speaker changes to Brezoneg from the "Common languages" section ([[ http://www.youtube.com/watch?v=vPP-tdGfar4&feature=share&t=34m57s | view ]]).
- Users making use of the compact version of the language list with no other issues that the search being less powerful since was client-side only ([[ https://www.usertesting.com/highlight_reels/qPYxPW1aRi1UazTMFreR | view ]])
**Deliverables**
https://github.com/wikimedia/jquery.uls/pull/152 - Removes the map and reorganizes the code