I’d like to help unify the three separate webviews with Svelte for a more modern, responsive experience. My vision looks something like this:
The section to the right (Overview) is meant to display information on the currently selected deck (description, graphs), but could be expanded for a whole range of other purposes (shared decks etc).
My philosophy for a modern Anki UI (3.0):
1. Mobile First
Anki desktop is moving towards a cross-platform solution, so every UI element has to be touch-friendly. This does not mean that the desktop experience has to suffer. This approach leads to more thought about UX in general.
2. Use the available space
The main window and its webviews are wasting an awful lot of screen space currently. Responsive layouts will not just look better, they’ll ideally enhance workflows in many ways.
3. Prefer icons over labels
Lots of Anki features are triggered with labelled buttons or links.
In English, this might look okay, but take a look at more verbose languages like German - the whole UI looks awfully cluttered in comparison.
Labels can still be shown on hover, like in VS Code:
4. Reduce the amount of context menus | Place UI right where features act
E.g. renaming decks: instead of a context menu entry in a cogwheel on the opposite side of the deck name, which opens up a popup dialog, simply fade in a pencil symbol right next to the selected deck’s name which makes the deck name editable inline.
5. Get rid of as many extra windows/pages/dialogs as possible
The best dialog is the one that doesn’t exist. If a popup can be prevented, it should be prevented. If that’s not possible, tooltips or single-page layouts with scroll anchors are less intrusive alternatives.
6. Use cursor: pointer
for interactive elements
I think most people will agree that hovering a button should be reflected on the cursor. Currently, many clickable UI-elements still use the default cursor for legacy reasons.
7. Use a white background for light theme
The current window background color is rather Windows XP-esque. While there are many beautiful shades of dark colors, the only clean light color is white in my personal opinion.
To see more of this philosophy in action, I recommend taking a look at the UI of Asana. It does a great job at making you feel directly in touch with your data.
What’s your vision?
Like Damien said in another thread, having such a rework as default is still a long way off due to the large number of affected add-ons, but we can create an experimental code path (similar to the v3 scheduler) for a modern main window, which can be opted in via the preferences.
I’d like to gather some ideas on what constitutes a modern, intuitive UI, so feel free to voice your opinions. Pointers to other software with good cross-platform, responsive user interfaces are also very helpful.