Settings page UI/UX

[toasted-nutbread]

So now that I have finished most of the tasks I had set out to do for database-related functionality, some of the next tasks I will be focusing on are related to updating the settings page. The first task is to design some updates to the UI/UX in order to accommodate the increase in the amount of settings.

Related: #296, #319, #335, #407, #435

I have an initial concept mocked up which is roughly based on the designs of the settings pages in Chrome and Firefox. The goals are to improve navigation, organization, and descriptions of the various options, as well as visually supporting future features such as profile inheritance. A preliminary screenshot is included below; the icons are mostly placeholders. Feedback and suggestions from anyone and everyone is welcome.

[siikamiika]

This looks great just like #402!

Some thoughts about possible UX and UI improvements:

• Use consistent language for feature names
• Add more descriptions and examples, maybe even visual (if you know Synaptics or macOS touchpad settings 😄)
• Anchor links to settings that are mentioned in other settings (there are some examples of this already)
• Highlight the current category
• Make dictionary sorting easier (drag/drop or arrows like profile sorting)
• Profile priority for number of conditions matched #436 (comment)

[siikamiika]

maybe even visual (if you know Synaptics or macOS touchpad settings 😄)

I'm wondering if these could be scripted and rendered in the popup preview frame, and serve as tests at the same time.

[toasted-nutbread]

I'm wondering if these could be scripted and rendered in the popup preview frame, and serve as tests at the same time.

Maybe, but it would probably be very easy to encounter issues with that due to browser and device differences, especially if we are trying to do things like animations which are largely based on timing. For example, there is that issue in Chrome where fetching indexedDB counts takes several seconds, which could easily impact preview animations.

[siikamiika]

Yeah, probably good to start small first. I think the preview frame could be visible regardless of your scroll position because it will help you when choosing many options. The ones requiring an actual animation are a minority.

[siikamiika]

Continuation for my comments on #479 that belong here instead.

Advanced/normal options:

• dictionaries.priority from advanced to normal.
  I think this should be a basic feature, but the UX could be improved. Settings page UI/UX #465 (comment)
• profiles.
  Not as simple as true or false. I think it can be daunting for new users if the first thing you see when opening the settings is a complex profile selection control. Possible improvements could be moving the control elsewhere or hiding the controls until you create a second profile.
• translation.
  These feel quite advanced, but they're also self-contained so might be ok to leave them.
• scanning.enableSearchTags from normal to advanced.
  I added this, but probably just forgot to put it behind advanced settings.
• parsing.termSpacing from normal to advanced.
  Not sure how many just disable the spaces, though. Seems like a lot of people just use the parser as a place to scan text like usual and also disable readings. Could also be that only "advanced learners" reach out to us on GitHub.
• global.database.prefixWildcardsSupported and the corresponding dictionary checkboxes from normal to advanced.
  The search page in general is a less used feature than popups, and I think that even suffix wildcard search is quite advanced in that context.

Rearranging:

• Move Translation Options after Text Parsing Options.
  It's weird that there's first Scanning Options, then Translation, and then Popup Content Scanning. Translation is something that affects both popups and the search page so that's why I was thinking it would be after text parsing, but it could go to either place.
• Create a "Popup Options" category.
  I don't want to complicate the way the options object maps to the page, but it feels that the General Options category is a bit of a mess right now, containing lots of popup related stuff among other things. edit: actually there seems to be one in the mock-up, so agreeing with that.

[toasted-nutbread]

• dictionaries.priority from advanced to normal.

This could potentially be done by a drag-and-drop type operation. It's not exactly a fun operation to implement, but it can be more user friendly. This could be difficult on small screens though, so maybe a textbox is still the way to go.

• profiles.

Agreed that most of the complex controls should be hidden. If you look at Chrome's settings page, many of the options have a "▸" triangle on the right, which then opens a different panel. I'm thinking we could do something similar and still keep the profiles at the top. The reason why I initially placed profiles at the top is because they affect the scope of the rest of the options. Chrome's options also put some profile-related options at the top.

• translation.

Could be hidden until advanced mode is enabled.

• scanning.enableSearchTags from normal to advanced.

Works for me.

• parsing.termSpacing from normal to advanced.

Works for me; less options by default is better.

• global.database.prefixWildcardsSupported and the corresponding dictionary checkboxes from normal to advanced.

This option is only used during dictionary import since it affects the imported data. That's why it is placed where it is currently, but the layout can be rethought.

Move Translation Options after Text Parsing Options.

This is already planned as seen on the side navigation bar.

Create a "Popup Options" category.

I am trying to streamline this a bit. It gets a bit tricky in that some of the "popup" options also apply to the search page, so that can be a bit misleading.

---

Anyway, I can share some of what I have so far, which shows some of the layout of the options. This is still quite experimental, but feel free to check it out.
https://github.com/toasted-nutbread/yomichan/tree/settings-v2-preview
New settings page: /bg/settings2.html

[siikamiika]

This could potentially be done by a drag-and-drop type operation. It's not exactly a fun operation to implement, but it can be more user friendly. This could be difficult on small screens though, so maybe a textbox is still the way to go.

Another possibility that would work with touchscreens:

Agreed that most of the complex controls should be hidden. If you look at Chrome's settings page, many of the options have a "▸" triangle on the right, which then opens a different panel. I'm thinking we could do something similar and still keep the profiles at the top. The reason why I initially placed profiles at the top is because they affect the scope of the rest of the options. Chrome's options also put some profile-related options at the top.

Sounds like a good solution, would also make it possible to add longer descriptions and examples once the user opens them without bloating the actual settings.

Anyway, I can share some of what I have so far, which shows some of the layout of the options. This is still quite experimental, but feel free to check it out.
https://github.com/toasted-nutbread/yomichan/tree/settings-v2-preview
New settings page: /bg/settings2.html

Nice 👍 Played around a bit and it seems very intuitive. I wonder where the longer description texts should go for some of the settings. Chrome seems to keep everything short.

[FooSoft]

Not a huge fan of dragging to change order, as dragging is an interaction which is not very discoverable, unless there are very obvious grab handles or a cursor change or whatever. Buttons work great : )

[toasted-nutbread]

Resolving since the updated settings v2 page is in beta in the latest testing (soon stable) release. Additional feedback will be in #1000.