Redesign Proposal: Add/Edit Note Window

Anki Suggestions
1

Hi everyone! :waving_hand:

As part of our ongoing UX research efforts at AnkiHub, our team recently conducted user interviews and a heuristic evaluation based on Nielsen’s usability principles to identify pain points in the current “Add Note” and “Edit Note” interface.

We learned that this window is often the first point of contact for users creating content, and yet many find it confusing or intimidating. Several interviewees expressed that they initially struggled with core concepts like notes vs. cards, or didn’t feel confident using the interface without trial-and-error.

Here are some of the main issues users reported when using the Add/Edit Note interface:

  • Confusing terminology – Buttons like “Add” don’t clearly explain what action will happen.
    “The UI is really unintuitive. For example, clicking ‘Add’ just adds… what? The terminology is confusing if you’re new.”
  • Notes vs. cards is unclear – Many users don’t fully understand the difference, even after years of use.
    “It took me a long time to understand the difference between a note and a card. Even today, I’m not 100% sure.”
  • Cluttered layout – Too many buttons placed in unexpected locations create hesitation and confusion.
    “I still get lost with how all the buttons are positioned. Sometimes I have to stop and think — wait, what is this button actually doing?”
  • Unpredictable navigation – Users reported getting “lost” inside multiple nested windows and not knowing what they had edited. Pop-ups like the Deck selector break the user’s flow.
    “I open Add, then click something, and suddenly I’m three windows deep. If I make a mistake, I’m not sure what I just edited.”

These insights guided our redesign of the Add/Edit Note dialog. Our goal was to clarify the mental model around notes and cards, simplify the layout, and improve terminology and interaction cues.

:hammer_and_wrench: Change suggestions

Today:

1451×1024 122 KB

After proposal:

1600×1303 236 KB

Change proposal Why
1. Updated window title to clearly indicate “Add Note” or “Edit Note” (depending on where the user comes from) Reinforces core terminology and makes the user action immediately understandable.
2. New copy for “Choose note type” Clarifies the user’s next step by using more explicit language.
3. Renamed “Fields” section to “Field configuration” Helps users understand they are customizing the structure of the note, not inputting content yet.
4. Renamed “Cards” button to “Edit card template” Makes the functionality more transparent and reinforces the distinction between notes and cards.
5. Added a “Cards generated” counter. And added the option to preview those cards. Improves predictability by showing how many cards will be created from this note. This visual cue supports learning the note/card model.
6. Structured note editing fields and deck selection on the left sidebar. Grouped Deck, Note Type, and Note Info into a left sidebar Creates a clear separation between meta settings and content editing, supporting a more logical workflow. Improves scannability.
7. Reworked content formatting section: Visually separated from other features. Updated icons and layout, made buttons slightly bigger. Better visual hierarchy and clearer iconography help users trust the interface.
8. Replaced the Deck modal and Type button with a combo box selector Avoids disorienting modals and allows quick, in-context selection without breaking focus.
9. Added label on the Field toggle options, and changed into a checkbox selection Improves discoverability and predictability, making clear to new and old users what the options do.
10. Changed the icon on the tag from trashcan to the dismiss icon Following established design patterns for this kind of interaction of removing a tag from a field.
11. Replaced the “History” button with a “Last changes” accordion More accurate label, since it only shows edits from the current session—not full history.
12. Redesigned bottom action bar, with visual emphasis on the primary action (“Add Note”) Improves clarity and reduces decision fatigue. Also reinforces the intended terminology.

Why the sidebar menu?

To justify this major proposed change, we will need to explain some core design principles.

  • Proximity (Gestalt Law) & Information Architecture: Related elements are grouped together. By moving options to the sidebar, we separate “meta” settings from the main content area, supporting a more logical workflow*.*
  • Visual Hierarchy & Scannability: Sidebar layout gives a clear path: start on the left, work right and down. Main actions are more predictable, and the UI looks less overwhelming*.*
  • Consistency: Keeping all settings in the same place (sidebar) matches modern app patterns and helps users learn faster: especially those who switch between tools.
  • Cognitive Load Reduction: Fewer options competing for attention at the top means users can focus on one thing at a time. The old UI mixed settings and formatting; now they’re cleanly separated.
  • Discoverability & Feedback: Sidebar keeps all main settings visible—no need to dig through modals or hidden menus. Users always know where they are and what they’re editing.
  • Accessibility: Logical sidebar layouts are easier for keyboard users, screen readers, and neurodiverse folks. No disorienting popups; just clear, predictable controls*.*

Moving core options like “deck,” “note type,” and template configuration to a left sidebar follows classic principles of information architecture and user interface design. It groups related settings together (proximity), creates a predictable hierarchy and workflow (visual hierarchy), reduces visual clutter at the top (cognitive load), and aligns with the way most modern apps organize settings (consistency, Jakob’s Law). This makes it easier for both new and experienced users to scan, learn, and use the interface.

Some references:

  1. Universal Principles of Design (book)
  2. 10 Usability Heuristics for User Interface Design (nng article)
  3. Visual Hierarchy in UX: Definition (nng article)
  4. What are the Gestalt Principles? (ixdf article)
  5. Laws of Proximity, Uniform Connectedness, and Continuation – Gestalt Principles (ixdf article)
  6. Hick’s Law (ixdf article)
  7. Web Content Accessibility Guidelines (WCAG guidelines)

We’d love to hear your thoughts! Do these changes improve your experience? Are there other areas of friction you’d like us to consider?

Feel free to share feedback — The AnkiHub Design Team

7 Likes
2

Thanks for your user surveys and suggestions.

I prefer several proposed text changes compared to the status quo (“Add note”, „Last changes“, …)

The formatting section seems clearer at first glance (especially due to the change and size of the individual icons), but introduces numerous elements that are used less frequently. Despite some room for improvement regarding the current state, it seems more confusing to me (Office-like …).

I don’t like the vertical navigation bar on the left, as I often work with Anki in a split screen mode: One vertical half (right) of the screen Anki’s Add dialogue, on the other half (left) my changing references for note creation. Another vertical element in the Anki dialogue needs more screen estate, narrows my input fields and adds a layer unrelated to the content between my references and Anki.

The vertical bar enhances several navigation elements (3 and 4) even more than now.

Deck/Note type are confusing in the mockup: Are these - from the user’s perspective - selected elements or suggestions within a search field?

“Cards generated: 2” is difficult to understand, it anticipates the result of unfinished user input. Without your explanation, I would have assumed that it was the total number of cards created in this session.

While some wording (like proposed) certainly could be improved, I don‘t see it necessarily as a design problem.

For a significant number of users, Anki moved away from „Oh, a neat and powerful flashcard application for my studies, let’s dive into it“. Many students use Anki as they have been told that it is indispensable for their academic success. They are supposed to install it together with dozens of extensions (adding interface elements and menu entries), predefined note types and card templates that are hyper-complex and a lot of prefabricated content. They have no opportunity to grow into the program, but should be able to verbalise its basic concepts?

You won’t understand Anki, if you haven’t created/modified a simple note type and some card templates by yourself.

4 Likes