### Problem
Mobile web editors don't have access to user preferences as desktop editors do (people who visit Wikipedia with a laptop or a computer with a large external display). Mobile web editors could still access those "desktop" settings if they know the URL by hearth, but the provided experience is not bespoke for mobile consumption, notably:
- Preferences are presented with tabs that scroll horizontally, but there is no clear clue that the section is scrollable.
- The target area is not designed for people who interact with their devices via touch.
- There are numerous categories hidden off screen, and no additional detail is provided to support discovery.
{F35212289}
### Jobs to be done
//When// I access Wikipedia settings from my mobile device //I want to// understand the available options //so I can// use the provided information to find and customize what I need.
### Proposed solution
#### A. In-page menu with icons
In this proposal, we explore if additional icons and text can provide a better navigation experience:
- icons add visual cues to increase discovery
- text descriptions provide information about the content behind
{F35212244}
#### B. Scrollable tabs
We would like to explore possible ways to enhance the existing pattern and potentially bring desktop and mobile closer. In this proposal, we:
- increased the target area to welcome touch input
- increased the space between tabs to avoid any possible mis-touch
- add a gradient to signal that there's something off screen and that the tabs area can scroll
{F35212247}
#### C. In-page blue text buttons
Another assumption that we would like to explore is if icons are necessary to scan and navigate this menu. In this proposal, we:
- use the color blue to signify that text is interactive
- leverage the description to provide addition information and guidance
{F35212246}
#### D. Nested menu
In this proposal, we explore if a nested (or second layer) menu could improve context while navigating the settings, thank to the content being visible in the background while the menu is open in the foreground.
{F35212249}
### Mocks of proposed designs for usability testing
#### Steps
1. Tap the menu icon (also known as hamburger icon) in the top left corner, next to the Wikipedia logotype
2. Tap the "Settings" menu item, look for the small gear cog/wheel
3. Navigate the settings on mobile web
**English**
- In-page menu with icons https://www.figma.com/proto/iAxHL9ay6BK16G7kxcK1ud/%F0%9F%93%B1-Mobile-Web-Preferen[…]1&starting-point-node-id=278%3A10357&hotspot-hints=0&hide-ui=1
- Scrollable tabs https://www.figma.com/proto/iAxHL9ay6BK16G7kxcK1ud/%F0%9F%93%B1-Mobile-Web-Preferen[…]A1&starting-point-node-id=293%3A9757&hotspot-hints=0&hide-ui=1
- In-page blue text buttons https://www.figma.com/proto/iAxHL9ay6BK16G7kxcK1ud/%F0%9F%93%B1-Mobile-Web-Preferen[…]A1&starting-point-node-id=293%3A9883&hotspot-hints=0&hide-ui=1
- Nested menu https://www.figma.com/proto/iAxHL9ay6BK16G7kxcK1ud/%F0%9F%93%B1-Mobile-Web-Preferen[…]A1&starting-point-node-id=318%3A8948&hotspot-hints=0&hide-ui=1
**German**
- In-page menu with icons https://www.figma.com/proto/iAxHL9ay6BK16G7kxcK1ud/%F0%9F%93%B1-Mobile-Web-Preferen[…]e-id=293%3A9391&hotspot-hints=0&show-proto-sidebar=1&hide-ui=1
- Scrollable tabs https://www.figma.com/proto/iAxHL9ay6BK16G7kxcK1ud/%F0%9F%93%B1-Mobile-Web-Preferen[…]e-id=293%3A9628&hotspot-hints=0&show-proto-sidebar=1&hide-ui=1
- In-page blue text buttons https://www.figma.com/proto/iAxHL9ay6BK16G7kxcK1ud/%F0%9F%93%B1-Mobile-Web-Preferen[…]-id=293%3A10009&hotspot-hints=0&show-proto-sidebar=1&hide-ui=1
- Nested menu https://www.figma.com/proto/iAxHL9ay6BK16G7kxcK1ud/%F0%9F%93%B1-Mobile-Web-Preferen[…]A1&starting-point-node-id=318%3A9217&hotspot-hints=0&hide-ui=1