Page MenuHomePhabricator

Improve the UX of the Keyboard Selector
Open, Needs TriagePublic

Description

There are several user experience improvements that would benefit the jQuery-based keyboard selector.

Steps to reproduce the issue with keyboard selector visibility:

  1. Go to any Wikimedia wiki (e.g., English Wikipedia).
  2. Make sure you are logged in, as the keyboard selector currently only appears for logged-in users.
  3. Click once inside the search bar at the top of the page.
    • Expected Result: The keyboard icon should appear next to the search bar.
    • Actual Result: The keyboard icon does not appear.
  4. Click a second time in the search bar.
    • Actual Result: The keyboard icon now appears, allowing the user to select a keyboard layout.
  5. Click outside the keyboard selector window or leave it inactive for a few moments.
    • Actual Result: The keyboard icon disappears, requiring the user to click in the search bar again to make it reappear.

Screenshot 2024-11-13 at 3.23.14 PM.png (1×1 px, 180 KB)

Here are a few suggestions for improvements:

  • Button visibility on first click: Currently, when a user first clicks in the search bar on a Wikimedia wiki (e.g., English Wikipedia), the keyboard button that opens the keyboard selector doesn’t appear. It only shows up after the second click in the search bar. Ideally, the button should be visible from the first click to streamline the user experience.
  • Button size and persistence: The current keyboard button is small and easy to miss, especially since it disappears after clicking outside the selector window or following a period of inactivity. Making this button larger, more prominent, and persistent would make it easier for users to discover and use.
  • Enhanced discoverability: Improving the visibility of this keyboard button by making it bolder and more noticeable would help users identify its function more quickly, enhancing usability.
  • Availability for all users: At present, the keyboard selector is only accessible to logged-in users. Ideally, it would be available to non-logged-in users as well.

These changes would make the keyboard selector more intuitive and accessible across Wikimedia projects.

Event Timeline

1. Desktop view

Please put the "gear" icon on the sidebar.

I'm used to monobook skin, and in every page, there's always the gear button on the sidebar (image, bottom left)

image.png (727×394 px, 59 KB)

For non-logged in users (which I think need to be supported), as well as vector-2022 users, the gear button is hidden and non-intuitive

image.png (664×708 px, 40 KB)

I suggest, instead of hiding it, the gear button can be displayed more prominently on the right sidebar ("Appearance" sidebar), alongside "Text" and "Width").
Not moved, but duplicated both in the language dropdown, and Appearance sidebar.

Alternatively, put the gear icon next to the "translate" icon, there's a lot of space anyway, so it will always displayed, never hidden.

Availability for logged-out user:

  • I tested it, and it works (image)

image.png (526×945 px, 71 KB)

2. Mobile view

Testing both as logged in and logged out users, the ULS selector didn't came out, either in the search bar, or when I edit a page.