Hey! Quick update on my UI/UX plans:
Main window rework
During and shortly after our discussion here in February, I wrote up a prototype that was almost feature complete. However, university got in the way and I had to put the project on halt. I hope to get back to it in July/August. Sorry for the long wait.
Editor / theme changes
I had some free time the last few days, so I started to do some work on the editor again. @oakkitten’s remark about de -fancifying the Editor motivated me to fix some of its visual noise issues:
What is visual noise?
Elaborate explanation (click to expand)
In UI/UX design, the sum of visual features that take away from our attention on the actual UI is considered visual noise. This screenshot shall serve as an (albeit rather extreme) example:
If you’re a human being and not a robot, you probably don’t feel like using this UI will be a pleasant experience. That’s because there are too many areas of interest to process, so we need to activate our slow thinking to use the software.
High contrast
The window color is gray, text areas are white and the title bar is an intense blue. Contrast can be a good thing to direct attention, but not if it is evenly spaced over the whole window. You might remember the fable “The Boy Who Cried Wolf” - a good example of how the value of information decreases with overuse.
Border lines
These are a few completely avoidable areas of interest that result from differences in contrast due to border lines:
Extra point
Showing info that is unasked for
Almost every checkbox has its keyboard shortcut written out, e.g. Force directories (-x). Every user, even the ones that know all the shortcuts, is forced to see them.
What to do about it?
The task of a good UI/UX-designer (and artist in general), is to direct user attention in a way that facilitates the use of the program. For example, instead of using two colors that battle for attention, gray out deactivated items:
Modern day example
How could we reduce visual noise in the editor?
Here’s a comparison between the status quo (current dev build) and the state of my current design proposal:
Status quo
Proposal
Please vote, it helps a lot!
Multiple answers (max 3) allowed.
- I like the new button design (slightly bigger, borderless, active button colored).
- I like the new field design (more padding, smaller outline on focus, removed dashed border).
- I like the theme changes (lighter background, custom scrollbar, lighter border color, box-shadows, off-black text).
- I like the theme changes, but there’s too little contrast between the fields and the background.
- I want to see changes to Anki’s editor, but there are better ways to go about it (please explain below).
- I like Anki’s editor as it is and don’t see a need for changes.
0 voters
There are related PRs in the works: