In my app users should be able to rate how much they "know" a word, meaning how much they can recall it's meaning.

My other related question: Hanging panel after user Click

Given that, there's also a color scheme on the text itself:

  • Blue means new word
  • Strong yellow means just started learning it
  • Light yellow means almost know it
  • No color means learned or ignored (there's a small green/red underline to distinguish them)

There are 4 levels of learning (yellow shades). When a word is clicked on the text, the widget just shows up with the current status of that word selected:

enter image description here

How can I make this more intuitive? There's a color problem here: on the text yellow is used to mark unknown words, but on the status panel I want to show the notion of progress to the user, so the yellow --> white scheme doesn't work there. Any suggestions? Thank you!

Edit: Something I came up with, please eval. enter image description here

Note: Users will encounter the same word again and again. The goal is to gradually learn words, giving the constant reminder of their status.

  • Will users be encountering this word again to learn it? Is the goal to allow reminders for users to gradually make this word familiar so they learn it?
    – Mike M
    Commented Jul 4, 2017 at 21:34
  • @Mike Yes,that's exactly the goal.
    – Fernando
    Commented Jul 4, 2017 at 21:36

2 Answers 2


Don't require your users to learn 'jargon' like a numbered ratings system or stars. Use plain language to allow them to assess their progress.

If the goal is learning and memorization, inform users of when they'll see content again with spaced repetition hints.

Because the goal is familiarity and fluidity ('I know this!'), you can use some info in the inspector panel to indicate how soon they'll be seeing this word / content again. Supermemo is a system based on this.

It may not be stylish, but Anki is a flashcard style deck that allows the user to select when to remind them next: it gives more control to the user to judge how familiar they are. I've used it for programming.

Jargon just means the user has to conform to your model, which may not be the mental model they hold for themselves about a concept. See Don Norman's description:

enter image description here

Ratings often are used for social proof by business to develop trust. Your goal is knowledge acquisition, not preference or proof.

Anki allows users to see how soon they'll memorize content with a simple label next to the button. They can use this to reflect on how well they know and understand a term.

enter image description here

It may not look stylish in Anki, but you have a lot of space in your inspector panel at this stage in your design: You could do stacked buttons with the next time showing (if you expose your logic to the users).


download bmml source – Wireframes created with Balsamiq Mockups

UPDATE: Evaluation of your recent changes.

You seem on the right track; a few things to note:

  • Your color intensity scale seems to be making the UI more dense as they achieve mastery. You have the darker scale towards the 'known'. That conveys a more cluttered UI just as they are mastering the vocabulary. That gives the message that there is more work for the user to do, not less (even though they are mastering the subject).

  • You could provide an assessment of the overall progress by making a dynamic title that shows them the percentage (or some meaningful metric) of their progress. As they mark items as 'known' the metric increases.

In my opinion, learning is a 'relief' and having the color bars disappear means there are less elements to interact with: Since I've mastered the word, it's affordance goes away (but hover on a word can allow user to reset the level of comfort). See notes below.

enter image description here

  • Good answer, thank you! I plan to add a flashcard module in my app, but now the user can only import texts + audio, so he may find the word on other texts (or when reviewing the same text).
    – Fernando
    Commented Jul 5, 2017 at 15:09
  • You can still use the plain labels for now, and once you add the flashcard, then you can add the reminder text...Interesting problem you're working on!
    – Mike M
    Commented Jul 5, 2017 at 15:11
  • Yep, I liked these big buttons you've made. I thought about a button labelled something like 'upgrade status' or 'downgrade status', so the user does not have to think too much. So it could be: "re-learn this word" (back to blue), "upgrade", "downgrade", "I know this word".
    – Fernando
    Commented Jul 5, 2017 at 15:26
  • Green works very well here, but I really have to use yellow. Also, changing the font color on the text makes it harder to read IMO. But now I think you're right, I should match the colors direction on the text and on the status panel.
    – Fernando
    Commented Jul 7, 2017 at 13:45
  • As long as users can see it, you probably have some decent latitude for color choice. Your example of consolidating to a single color intensity scale seems on the right track. You can test w/ a variety of devices and see what colors hold up across the majority.
    – Mike M
    Commented Jul 7, 2017 at 13:54

I think that using colors is a great idea, since you're annotating paragraph text, you rightly were hesitating to use techniques (like extra icons) that would break up the flow of text.

Some suggestions:

  • For the yellow shades, consider also having corresponding shades of gray (or weightings) for the text color/font, so that known and ignored words are lighter (or less bold). This will draw the eye to the fully black and bolded words (new or lowest level of familiarity)
  • Offer a "show all" section with the same buttons (New, 1, 2, 3, 4, check, X), that when clicked, hides all other words (or makes them almost transparent), so the user can review just new words, or just level 1 words etc. For extra credit, make these buttons toggle buttons (so the user can show just 1 AND 2, but hide/fade all others, for example) with an additional "clear" button to make all words go back to normal.
  • Consider supporting multiple selection (Shift or Ctrl) and/or marquee selection, with multiple words displayed in the right panel. If the user doesn't prefer the visual display, they can marquee select (draw a box with the mouse) a line or lines of text and review/change the status of those words in a list or table in the right pane
  • Consider supporting tooltips on all words with the translation, status and notes so that the user can review words quickly by hovering the mouse if they forget the color coding
  • Thanks, good tips. I'm still not certain on what to use in the rating view. Using the same colors may be redundant, I need a clever way to present word status.
    – Fernando
    Commented Jul 5, 2017 at 1:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.