Ideas to make deck/preset interactions more clear?

I like the way it looks. I would prefer a setting that could be used to switch the mode. I would choose a preset color that is not the same as the color of the filtered deck.

So basically something like the Notes and Cards toggle?

IMO the Preset column is ideally on the rightmost side (to the right of the gear icon). If the user’s screen is too small (or the deck name and preset name are too long.) it may be difficult to operate Anki because the required columns are out of view. Preset is additional info so it does not have to be visible all the time, like this:

Good ui design does take time sometimes. We should find a solution that has the most advantages and the least disadvantages. It’s also not really about “agreeing”, it’s more about real limitations.

I’ll follow this with an overview of the proposed solutions and their (dis)advantages that I could think of right now.

Goals

  1. It should work on different form factors (not just laptops / desktops but smartphones too).

Proposed Solutions

Idea 1: Colored decks in the deck overview (background)

This would look like this:

Advantages

  1. It fullfills goal #4.
  2. Can make it easier to understand, that some decks have something in common.

Disadvantages

  1. It’s unclear what they have in common (why do they have the same color, what does that mean?).
  2. It doesn’t fullfill goals #1, #2, #3.
  3. It looks a bit unappealing, or like Expertium put it:
  1. It increases cognitive load.
  2. Colors might be problematic regarding accessability, if a lot of colors need to be used.

Idea 2: Colored decks in the deck overview (text color)

This would look like this:

Advantages

  1. It fullfills goal #4.
  2. Can make it easier to understand, that some decks have something in common.
  3. Might look less bad than Idea 1.

Disadvantages

  1. It’s unclear what they have in common (why do they have the same color, what does that mean?).
  2. It doesn’t fullfill goals #1, #2, #3.
  3. Doesn’t work for all colors (e.g. yellow).
  4. Might not work when a lot of presets are beeing used (colors need to be readable enough for accessibility as well).
  5. It slightly increases cognitive load.

Idea 3: Make it toggle-able, e.g. in “view → show preset colors” or similiar

Advantages

  1. It fullfills goal #4.
  2. It doesn’t distract from the relevant info (except if the user chooses to toggle it on) → no cognitive load, unless explicitly set by user.

Disadvantages

  1. It’s unclear what they have in common (why do they have the same color, what does that mean?).
  2. It doesn’t fullfill goals #1, #2, #3.
  3. Doesn’t work for all colors (e.g. yellow).
  4. Might not work when a lot of presets are beeing used (colors need to be readable enough for accessibility as well).
  5. Low discoverability.

Idea 4: Options screen could be a split view, with the options on the left and the preset preview on the right (differently colored for all presets)

This would look like this:

Advantages

  1. Maybe fullfills goal #1, though I’m not exactly convinced.
  2. Fullfills goals #2, #3.
  3. It only shows in the preferences, where the user would actually change presets.
  4. It might

Disadvantages

  1. Does not fullfill goal #4, since the options screen doesn’t have enough space on mobile devices.
  2. Might not work when a lot of presets are beeing used (too many colors, potentiall problem with accessability).
  3. Might be a distraction when you’re editing something else in the deck options, like FSRS parameters.

Idea 5: Options screen could be a split view, with the options on the left and the preset preview on the right (only one color for the currently displayed preset)

Advantages

  1. Maybe fullfills goal #1, though I’m not exactly convinced.
  2. Fullfills goals #2, #3.
  3. It only shows in the preferences, where the user would actually change presets.
  4. It might
  1. Doesn’t have the issue with multiple colors if a lot of presets are being used.

Disadvantages

  1. Does not fullfill goal #4, since the options screen doesn’t have enough space on mobile devices.
  2. Might be a distraction when you’re editing something else in the deck options, like FSRS parameters.

Idea 6: Add a preset column to the deck overview

This would look like this (though keep in mind that this picture is from an addon and has much more than was proposed in this idea):

Advantages

  1. Fullfills goals #1 and #2.
  2. Might be easier to implement.

Disadvantages

  1. Doesn’t fullfill goal #3, but at least you could easily spot your mistake after editing the deck options.
  2. Doesn’t fullfill goal #4, as there wouldn’t be enough screen real estate.
  3. It increases cognitive load.

Idea 7: Show presets in the deck overview when a button is pressed (e.g. shift)

This would look like this:

Advantages

  1. Fullfills goals #1 and #2.
  2. Doesn’t always show, thus doesn’t increase cognitve load.

Disadvantages

  1. Doesn’t fullfill goal #3, but at least you could easily spot your mistake after editing the deck options.
  2. Doesn’t fullfill goal #4. The screen real estate might still be a problem. The biggest problem is the lack of an available keyboard.
  3. Low discoverability.

What now?

We need to find theoretical solutions to the disadvantages of at least one of the proposed solutions above. Especially the goals must be met.

For the colour ones, you missed potential a11y issues.

Thanks sorata, I added it were I forgot it.


A lot of the ideas here have problems with small devices like smartphones due to screen real estate. Does someone here know if ankidroid has a design team? They might have good ideas to mitigate this issue.

About the current ideas

  1. Don’t differantiate things by colors:
    a. There are colorblind people
    b. With more presets, it will get harder and harder to distinguish by colors.
  2. Don’t do it in the deck picker. Leave it in deck options
    a. Too much information in one place
    b. Won’t fit well in phones
    c. Presets are a bunch of deck options, so leave them in the deck options screen. Don’t scatter it.
    d. The deck picker isn’t cross platform. Damien likely won’t want to reimplement it in AnkiMobile, nor nobody will want to do it in AnkiDroid. Deck options is cross platform

I think that a hierarchical tree with the presets as parents, and decks as children, would work, then fit it somewhere in deck options (a dialog or dropdown or details or whatever).

The deck list with a column of stating the preset also works, just keep it in deck options

Maybe add a “List decks” option here?


I feel like it’s not much of an improvement, though. Too easy to miss.

Maybe add a “List decks” option here?

The whole disposition of “Deck options” could change. The deck being changed could be more explicit. Its relations with other decks as well.

But honestly I won’t think much about something I’m not doing it myself. Up to the other ones.

As Brayan says (who is a maintainer for ankidroid), we should do it in the Deck Options screen. There is really no other place that can be better. Consider also that people have been asking for a “preset manager” so we can move towards hitting two birds here.

I did like your original idea except the “add lots of colour” bit.

Or maybe a list under the preset selector? It’s collapsed by default but can be expanded.

Color dots

Let’s just avoid colours IMO.

Maybe we could do something like the following?

Idea

The current preset drop down menu becomes a button which opens a popup, that fills the entire options screen on click. From there the user could select the preset using a drop down (like currently) and also see which decks are assigned to it.

A very rough sketch of the popup would look something like this:

Obviously the decks change based on the actual preset that is currently selected.

Advantages

  1. No colors are needed to differentiate something.
  2. It could be very responsive and wouldn’t require a larger screen to be usable.
  3. The goals from above are also met.

FYI

@sorata

So you’d like to see a popup when the preset is saved showing two buttons, one saying “Save to this preset only” and second saying “Choose which presets to save to”?

Where the second button would open a selection dialog (with a searchbar on top) and a way to checkmark / select several presets to safe to?

I was simply linking back to a previous discussion as your idea is basically a stripped down preset browser screen.

If you want my opinion, I think long-term there should be a preset manager screen where you can delete/rename/add presets (think manage note types). So, the preset related options should be moved to that screen. And the current options screen should only allow changing specifics of a single preset.

I hope it’s easy to understand my distinction between “options screen” and “presets screen”.

Not sure whether that would work.

FWIW, there was once a suggestion from someone about “preset groups”. So their idea (which they got from another SRS app) was basically linking different presets and selecting a common set of options. The presets in the same group share those options so changing in one changes things in other.

I tried to create a mockup using pencil. The colors and other css things aren’t relevant, it’s more about the actual flow. Maybe everyone here can give some feedback?

Flowchart

This is intended to show the functions the user could perform and how to get there.

The diamond-shaped shape is a decision the user has to take (e.g. renaming a preset), the square shape is the process that would open. It starts with the diamond shape in the middle, top of the image:

You can see some squares have names like “Preset_Selector_Window”. This refers to separate windows (see titles).

Preset_Editor_Design


This essentially is the same as the view we already have. The part with “languages (used by 3 decks)” can be clicked on and opens Preset_Selector_Window. The Save to… button opens Save_to_Window.

Preset_Selector_Window

This view allows to select a different preset. You can also add, rename, clone and delete presets here.

The table shows the decks that currently use the selected preset. It could be expanded to show other info as well (like limit calculation mentioned by David above). The drop down menues can be used to quickly change the preset of those decks.

Save_to_Window

This allows the user to save the options they just modified to any preset they want.


I hope you can provide valuable feedback. The above should abide by the 4 rules we established above, but that still doesn’t mean it’s a good design.

Here’s my suggestion. Move all deck related settings (renaming, editing the description and modifying new/review limits) to what’s currently the deck options screen.

Except that only the above options will be shown plus the drop-down for selecting the preset (btw remove the “(used by x decks)” text).

The save button would be replaced with a “Manage presets” button. That would open a new screen/window that has all the preset relevant options.

That would mean moving only the first two you mentioned, because the last one is already there. I could do that, if there’s consensus – my main goal here is to make preset / deck interactions more clear though, which means your idea would be implemented in a separate PR. If there’s consensus and I’ve got enough time on the weekends, I can try to open a PR for this one.

I just used it because Anki already shows this text. I assume people wanted it to stay because it tells them just how many decks use this preset. It could be easily removed if there’s consensus on it.

Could you elaborate please (or maybe edit a screenshot to show me what you mean)?

The save button is no longer necessary as there aren’t many things to change in the new deck options I suggested (the settings automatically save, so why wouldn’t this).

Edit: Forgot about the “Save to All Subdecks” option. That I think should be below the “Maximum reviews/day”. Separated from renaming and editing the description of the current deck. (End of edit)

The “Manage presets” screen would just look like the current deck options screen, just without the “This deck” and “Today only” options.

There should be a save button here as there are many options. It also better but not necessary to add dedicated buttons to “Add Preset”, “Clone Preset”, etc. in the drop-down next to the current save button.

Advantages:

  1. By separating the preset options from the deck specific options and having a different screen to manage the presets, I think it fulfills goal #1.
  2. My proposed deck options screen would be deck specific. You are editing deck X and the preset drop-down is at the top so it’s very clear the X has preset Y. So it fulfills goal #3.
  3. Easy to implement (not much needs to be changed) and fulfills goal #4.

Disadvantages:

  1. The manage presets screen doesn’t immediately tell you which decks use the current preset.
  2. Requires more clicks to rename decks and edit their descriptions.
  3. Could be confusing to have the preset selection drop-down used in two different ways.

I may be biased so point out what you think are (dis)advantages.