I agree. WYSIWYG HTML editors have so many problems. As an alternative, I would propose to offer more card layouts out of the box when first installing Anki. The default card layouts Anki has now look very outdated. If there was a selection of a few modern and beautiful templates to choose from, then the users wouldn’t feel the need as much to go and edit the templates themselves.
Offering a few different skins for Anki’s default templates sounds like a great idea. Ideally, such a setting would sync with the rest of the ecosystem - without touching the actual template. Perhaps we could make a community challenge to gather design proposals. The actual implementation would need to be thoroughly discussed among devs, though.
Decoupling card themes from shared decks would have some nice properties - the themes could be shared across multiple decks, and styling tweaks could be made independently of the deck content/updates rolled out like add-ons are. I’m not sure how it would work in practice though - some shared decks use bespoke JS which is not generally applicable, and some themes make assumptions about what fields there’ll be and where they’ll be placed.
Some thoughts on the modern UI.
Imagine if Kdenlive or Gimp were mobile-first.
Anki is a complex program with many different menus that can’t fit on a mobile screen. And there are already several mobile versions! We need at least one desktop version.
every UI element has to be touch-friendly.
Touch-friendly means wasting available space, so instead every element has to be compact. Even better if there are configurable keyboard shortcuts.
https://digdeeper.club/articles/design.xhtml#shortcuts
Prefer icons over labels
Unless every icon has a label under it, it is hard to figure out what the button does. Here’s an example of a toolbar that combines icons and labels.
Reduce the amount of context menus
Context (right-click) menus are very powerful and help a lot, especially if you can add your own custom actions. And context menus don’t waste space until you trigger them. Anki under-utilizes context-menus in some areas of the UI, especially in Browser and Reviewer, which is rather unfortunate. Adding more context menus is easy, you just call menu.addAction()
and connect it to a handler.
Use a white background for light theme
This is something the users can decide for themselves.
hi,
i am a macro button nerd.
i use autohotkey FOSS and a commercial one “multimedia keyboard macros” which i can ADD a 2nd keyboard solely for macros!
however, the MKM didn’t function well in anki,
when i press button on my 2nd keyboard, just some strange strings will be typed.
MultiKeyboard Macros - make any keyboard programmable (btw, students got discount).
having another 90 buttons for macros make me feel “super”, but i usually wont use them when using anki, as in most time it don’t function.
i guest it’s because python’s GUI is not native…
it is as it is, but if could improve, would be good.
PS, they got a trial version so no need to buy to troubleshoot this problem.
thanks
AHK sucks in that if you choose “F5” as a shortcut, every keyboard’s “F5” will be that shortcut.
in MKM, you can plug 2nd, 3rd keyboard, and every “F5” be different macro.
Your opinion does indeed represent a very narrow segment of users, who are represented here in the forum in a much larger way than some of them elsewhere.
The reason for this is that naturally there are more programmers in the forum
as a programmer. You want every menu to have all the possible options, while the user of the normal one is more comfortable with a nicer, more abstract design, and fewer alternatives.
As a programmer - it is difficult to get into the head of the normative person, so the world suffers from absurdity, because the tools to develop are with the people who do not know what the user needs.
On the other hand, in commercial companies, besides the programmers, there are also design and neuroscience people, which gives them an advantage in adapting the software to the common user
Today the world is going in this direction, even Windows in their new version, walks safely after Apple, in this approach.
And in conclusion, maybe anki should think about two versions for its users: one is cumbersome and full of alternatives, plugins, context menus, and user customization, themes, unprepared cards, etc. This version will be based on anki 2.1.54.
And another version, based on anki 2.1.55, which will offer the user a more friendly software, less cumbersome, with an offer for ready-made cards, fewer menus, maximum design even at the expense of space.
a point to consider.
Search more about “UI / UX” on Google
Two versions of Anki will generally tie up more resources, require more design effort, more testing and more user support.
There are many flashcard apps, no one is forced to use a programme with add-ons, numerous settings and customisation options.
There are even flashcard apps where the UI and UX people forgot about spaced repetition and other basic functionality, but implemented all sorts of rewards, visual feedback and even monthly payments (I guess the neuroscience people helped here.)
…
Offering my humble opinion as an UX designer…
From my experience, you should try to create a UI where users can easily find the most basic and commonly used features at a glance. But there’s no need to make 2 versions or to do away with advanced features. Advanced options can be hidden behind separate buttons or menus for the users who need them, toolbars can be made customizable, …
As for the icons/labels… The main bar in Anki (Decks, Add, Browse, Stats and Sync) could be replaced by a bar that has only icons, and I think the meaning of the buttons would still be clear. But less commonly used actions, for example suspending a card, should definitely have a label and not just an icon.
One of these days I watched a video on YouTube about how the MuseScore (another open source project) team dramatically improved the UI when updating from version 3 to version 4. One of the things they did was moving from Qt to QML. I’ll post the link to the video below so maybe you guys get some insights from it.
That’s indeed a very insightful video. It perfectly describes what I imagine the jump from Anki 2 to Anki 3 to look like. Musescore 3 suffered from a lot of issues we’re facing too. Thanks for linking this!
Like stated at 08:53, creating your own UI from scratch is a serious effort. It can realistically only be done with a team of full-time professionals (if a lead designer at Microsoft says it was a pain to do it, you can imagine the difficulty of this undertaking). But a few seconds later he mentions that the library they created for MuseScore is open source. I’m taking a look at this.
Another thing they seem to get right is their contribution policy:
Musescore the desktop software is a free and open source product developed and supported by non paid volunteers and managed by Muse Group subsidiary empolyees. Open source is not democracy, see discussion, and the product is fully owned by (through subsidiary) Muse Group. All users that use the forum on musescore.org are not necessary the real decision makers, unless otherwise proclaimed. Please do not feel it is unfair if your elaborated proposal is rejected: you are free to fork the open source repo, or write a plugin.
Source: Proposing a change to design | MuseScore
Whatever else does or doesn’t happen, the main study screen should look as plain as possible. I use Anki on a desktop/laptop. While I’m studying, the only thing I want my attention to be on or to draw my eye is the front and then the front/back of the cards. As someone using the program to study, that’s what I want the look to be. The screen I saw while studying in 2.1.54 was just about right.
I know enough about design to know that considering use is paramount.
The main thing I’m going to do while I’m studying is cycle through the cards. I have one hand on the keyboard numbers 1-4 and the other with a finger on the enter button. I might rewind with Ctrl+z, I might edit a card. Other than that, there’s “everything else”. Everything else doesn’t need to be available while I’m studying, only a way to get to everything else.
What else might I do that’s a part of “everything else”? Create filtered decks. Create my own notes. Adjust the study options such as review spacings. Whatever else, I can adjust to how things are set up and I know that a lot of different use cases, program functions, and design considerations that I don’t know much about have to be considered. That’s fine and I can learn how to use the program around those changes.
But keeping the look for the “study” as clean, simple, distraction-free, and review info-centered as possible is the most important thing for me. Distractions are things like extra words, shadowing, anything dynamic (meaning resizes and all that.) Dreaded transparencies, blurring, any of that trendy nonsense, should not be there at all but especially in the study screen.
For the study/review screen, which is what Anki is actually about, please consider featuring the info to be studied and as little else as possible. And whatever else needs to be visible for functionality, that should be present in the least eye-catching, attention-demanding, dynamic, modern, etc etc way as possible.
Background on my perspective: I use Anki to study. I know the bare minimum about software. I have what could be considered attention, visual and information processing particularities and so I am sensitive to what makes, for me, a good and easy experience of using software for a particular purpose vs. not. I don’t want to put this in terms of “accessibility” related to learning differences, but as someone with those differences who is also a teacher, I feel my perspective is worth sharing. I welcome questions regarding my comments here.
Regarding card themes (maybe this should be split into its own discussion?):
Shared styles between different note types would also be helpful to allow a more unified design across decks, which may use different fields and layout but share a stylesheet. I’m aware this can be done by moving the stylesheet to the media folder but that makes updating and tweaking designs a bit bothersome - but that’s a minor gripe.
I think Anki could really benefit from having some general default themes to choose from - particularly for new users. And imo these new users won’t be needing a deep level of customization. Once you reach the stage of adding your own custom fields you’ll have to look into HTML/CSS anyway.
I’d assume (no data on this though) - most casual users either use a simple Front-Back layout (for Basic cards) or Text-Extrafield (for Cloze cards). Templates like prettify - I’m sure there are many others - could drastically improve the appeal of loading up Anki for the first time. We don’t need to force it on anyone, but I’m sure many users would appreciate the freedom of choice.
In addition, including maybe a handful of designs specific to language learning to the default editor would readily cover most lightweight users’ needs. There is a discussion to be had about which fields these should have but it’s certainly doable.
I’m sure there are some other use cases for Anki I’m not aware of that may deserve their own default template. Adding too many template choices risks cluttering the UI, but it should be part of the discussion.
Many very specific shared decks will still rely on custom templates, as you say. But maybe adding an option for shared deck creators to specify which of the default templates are compatible with the deck could help with that.
Thanks for posting that. I saw that video not too long ago, and I thought about Anki right away, but I have no personal experience with QT to have any feedback of value.
It’s pointless to make the UI all sexy while key features like card linking remain missing and you have to do a full sync every time you change a note type.
Following that reasoning, it’s also pointless to implement card linking when there is no built-in image occlusion feature, implementing image occlusion would be also useless since there’s no fully-functional web version of the program, and making ankiweb fully funtional would be nonsense because the program is still not 100% compatible for screenreaders.
Sorry, but I don’t see the logic there.
Respectfully, I disagree. Naturally, there’s a number of features, improvements and tweaks that any one of us would like to see - that doesn’t make any single one of our wishes more important than another.
Anki is made by employing a crapton of free labor by people who are passionate about what it offers, and they are gratious enough to share their contributions with the community. But open source is not a one way street and it’s definitely not a wishing well. Any constructive contribution on your part is welcome to get closer to your desired features.
Modernising the UI is what many people have been asking for and is by no means pointless just because it doesn’t prioritize your requests.
To mitigate the issue, can only see 2 ways: making the pink similar to dark mode or making the gray lines darker
thoughts?
Dark Mode for comparison
I don’t think making the gray lines darker would be enough. If that was the only fix, then when my pink flagged card is on a line that would ordinarily be white (so in between two gray lines), it would still be hard to tell that it’s light-pink and not white without zooming in.
I like the idea of making pink similar to dark mode, or just slightly darker in general. You may run into the issue of looking too similar to red or purple though.
Toolbar Changes
Here’s an update on the toolbar changes you can expect in a coming-up version.
- Toolbar dynamically adjusts to card background (set on
.card
in the template). - Optional auto-hide toolbar in reviewer. Can be set separately on the top- and bottom toolbar. By default it only affects full-screen mode.
- Proper full-screen: The menu bar is now hidden in full-screen mode, leaving nothing but the card content during review.
You can see the changes in action here:
Minimalist mode
As seen in the preferences screenshot above, there will be a minimalist mode. It looks like this currently:
PRs:
Another cool thing that’s in the pipeline:
Profile-specific wallpaper setting
Like for your OS, you’ll be able to choose a separate main window wallpaper for light and dark theme. It also applies to the deck overview and reviewer. The UI in the preferences is crude - I will probably combine it with the theme selection above to save some space.
(no milk-glass effect for minimalist mode of course )