Ideas to make deck/preset interactions more clear?

Anki Suggestions
24

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.

6 Likes