Test: Settings Editor Navigation

[9at8]

Refs: #97567

• anyOS @lszomoru
• anyOS @sana-ajani

Complexity: 4

Create Issue

---

I have been exploring the setting editor this month. I have been mostly focused on two different approaches and I would like to get feedback on both of these. Keep in mind that these aren't polished from a design perspective, so you should focus on providing feedback on the functional differences in both of them.

Issues that we are trying to address

• Page up/Page down aren't supported.
• Large virtual list feels like a giant hole that users can't easily come out of.
• It's very difficult to focus back to the table of contents

Also copy these keybindings before testing:

[
    {
        "key": "escape",
        "command": "settings.action.search",
        "when": "inSettingsEditor && settingsTocRowFocus"
    },
    {
        "key": "shift+alt+t",
        "command": "settings.action.focusTOC",
        "when": "inSettingsEditor && !settingsTocRowFocus"
    }
]

1. Non-virtual list with pagination

Settings UI is made up of multiple non-virtual lists. Each category in the table of contents maps to a single non-virtual list. Example: Only the settings in the "Commonly Used" section are rendered when the user presses enter while selecting the "Commonly Used" section in the table of contents. Users navigate settings as a form and tab through the entire page. As each category can have a lot of settings (100+) we decided to paginate this list. It also makes navigating using a tab easier.

Builds

Windows x64: https://az764295.vo.msecnd.net/insider/c9a2f78283b6e5ef708fb8869e2a5adaa476e42f/VSCode-win32-x64-1.48.0-insider.zip
macOS: https://az764295.vo.msecnd.net/insider/c9a2f78283b6e5ef708fb8869e2a5adaa476e42f/VSCode-darwin-insider.zip
Linux x64: https://az764295.vo.msecnd.net/insider/c9a2f78283b6e5ef708fb8869e2a5adaa476e42f/code-insider-1596174438.tar.gz

2. Virtual list with up/down arrow navigation

Settings UI is made up of multiple virtual lists. Each category in the table of contents maps to a single virtual list. Users navigate settings as a normal list and use up and down arrow keys to navigate from setting to setting. Page-up and page-down keys also work as expected.

Builds

Windows x64: https://az764295.vo.msecnd.net/insider/c39d543796fde371e3e1855293b54703070cb2b5/VSCode-win32-x64-1.48.0-insider.zip
macOS: https://az764295.vo.msecnd.net/insider/c39d543796fde371e3e1855293b54703070cb2b5/VSCode-darwin-insider.zip
Linux x64: https://az764295.vo.msecnd.net/insider/c39d543796fde371e3e1855293b54703070cb2b5/code-insider-1596533482.tar.gz

[lszomoru]

From the two options presented here, I vote for the Virtual list with up/down arrow navigation.

[sana-ajani]

I like the first option Non-virtual list with pagination. Tabbing through settings and then pressing enter/arrow keys to change the values in the setting felt intuitive. I also like the pagination, it makes going through the settings organized.

For the second option, I didn't understand if I should use tab or arrow keys to go through settings. When focus is on the TOC, pressing tab puts focus on the whole container and I am able to tab forward through the settings once. Then pressing shift tab loses focus and I start using my arrow keys to go through the settings. Also, it felt like there's an extra step to change the setting values, once I arrow key to the setting I want, I have to tab to focus on the setting's value and then press enter to change it.

[roblourens]

@lszomoru can you expand on what you like or dislike?

[lszomoru]

@roblourens, apologies for not getting back to you as this has gotten lost among my notifications.

Personally, here is my flow when I try to look for a setting:

1. Type in a search term
2. Filter the results based on the TOC
3. Go through the settings for the TOC item

I feel that with pagination there is just too many navigational elements on the page that you can juggle to limit the list of settings.