More aggressively filter out words that get scheduled for practice

[mircealungu]

For a reader like me, it can happen that at the end of a long text I end up with more than 50 words like in the example below. Currently we are passing almost all the words to the exercisesForArticle page and if the learner goes through all of them, their pipeline is full.

I wonder if we should do a stronger filtering at this point? We could make a clear distinction on this page between Words To Study, e.g. Top N most important words we think they should add to their exercises and All the other words that they translated.

The learner could still move some of the words from All the Others to Words To Study but the exercise session after the word review, will only start with the ones we recommend (and the ones that they might have explicitly added themselves because they really think they want to learn those).

Do you see what I mean?

One possible alternative to aggressive upfront filtering would be aggressive insertion of new words in the the pipeline. If we discover that in another text they translated more basic words that they have in the pipeline, we simply add those to the pipeline, and the more advanced ones fall out.

[tfnribeiro]

While I can see that issue, I think I also don't see how we would prioritize words correctly.

One possible solution is to allow up to 10 maximum to be added per text by default. These should maybe be the most common words in the language. The user could always choose to add the words that weren't selecting by starring them. Another thing to consider is to add a check to see if one of the translated words has been translated in the past. In that case, we don't consider that for study.

I think for me is that we need to maybe think of what is an easy interaction to select all of these words, especially since at the end it might be difficult to maybe remember to do it for users. But I think the cap at 10, and using the most common might be a good heuristic.

[merleschoen]

I do see your point @mircealungu, but I'm also afraid we are confusing users too much. I've got some feedback regarding the article exercises and people find it confusing. Somebody asked me why some words are not tested (the greyed out ones) and didn't understand how the star is used. If we suddenly removed translated words from the exercises, I'm afraid users will start wondering if they understood correctly how words are added and the star example makes it clear that people don't always read instructions.

[mircealungu]

Maybe the solution is in your answer Merle. Could this be an opportunity for us to make things more clear while limiting the vocabulary at the same time? Maybe a message along the lines

You have translated many words. However, in order to not overwhelm you, Zeeguu will automatically add the following 10 to your study schedule. These ten have been selected because they are the most important from all the translations you made. If you want to add any of the other words that Zeeguu has not selected automatically, you can start them.

This way we don't do grayed words anymore. So there's one less thing to worry about.

[merleschoen]

That might be a solution, but I'm still afraid we would confuse users, because the whole logic of translated words being used for exercises becomes inconsistent and I'm not sure users will read the instructions at the top.

I also think that in a scenario where a user has translated 50 words and wants to practice all of them and now has to manually star the remaining 40 words, he would be really annoyed. For cases like this, having a button to schedule all words would be nice.

Something like this maybe:

[tfnribeiro]

Some more discussion, led us to think that maybe the best solution might be to add all the words except words that are composed of 3 different words. Instead of trying to select for the users, we allow them to remove the words they don't want to study, giving them more control over their own learning.

The question would be if they remove a word, should it still be stored, just not shown to the user, or should we actually delete it?

We could get some good insights from words that are translated multiple times and if the user deletes them we loose that information.

[tfnribeiro]

Tentative design:

[tfnribeiro]

New iteration:

[tfnribeiro]

New delete button, inside the edit word:

Question:

What to do in the history / other screens with the words, do we maintain the same pattern as we do have now, or would we also use this logic?

[mircealungu]

I vote that we move the delete inside the word all the time.

[tfnribeiro]

What about the star icon, do we just remove it, and use the add/remove symbols respectively ?

[mircealungu]

This is a difficult discussion, but we must have it, because it's at the heart of Zeeguu, so thanks for continuing and contributing @merleschoen and @tfnribeiro. I almost feel like adding also Iga to the discussion... but I won't :)

So here are my thoughts on your ideas above:

Add all words

Merle: I also think that in a scenario where a user has translated 50 words and wants to practice all of them and now has to manually star the remaining 40 words, he would be really annoyed. For cases like this, having a button to schedule all words would be nice.

In an ideal world this would be the case, in an ideal world where translations would be perfect. But our translations are not perfect, so bulk adding them is risky. Also, as Tiago observes, there are some translations that are mini-sentences that just can't be practiced meaningfully in our exercises.

There is another thing. We have to think about our users for the long term. Yes, it might not be clear for them why we only add 10 words per text, but it's not in their own best interest to add 50 words from the first text they read, and then they are stuck with learning them for the next two months! What if they translate much more basic, and thus important, words in the next sessions, and we still teach them the difficult words they started with? In the current implementation a word once entered the pipeline is going to always be studied. An alternative would be one where new more basic words, "push out" existing words from the pipeline, but this is not our scheduling algorithm. We could discuss about that, but that approach has its own tradeoffs.

Finally, we should always make a best effort at figuring out which of the words are the most important for the user to learn at the moment. It should be us not them to do this, because we have all the info. E.g., if they translate 20 very common words and 50 rare words, because they're beginner, and thus the text was too hard for them, they should not be spending time learning the 50 rare words. They don't know that those words are rare, but we do. We should guide them :)

Showing Only the Scheduled Words

I do like this design. It's simple, and lets the user focus on the words we want them to study. They can still remove from them, if they see duplicates for example, or stuff that they don't like the translation of... but the task is clear. Review the words we've scheduled for you. It might actually make them look at them. I have to say that even when I looked at my words to review, when I get too many I simply give up.

What I like about this design is that, only if they want to go the extra mile, they get to see all their translations, by explicitly asking for it. To keep in line with the observation above, we should probably use "Add more words" instead of "Add all words" as a link, and then maybe show them the 'add/remove' buttons for individual words that Tiago proposes above.

Merle: I'm still afraid we would confuse users, because the whole logic of translated words being used for exercises becomes inconsistent and I'm not sure users will read the instructions at the top.

If we do a short message that emphasize that not all the words go into exercises, but rather, the ones we think they should study, maybe it's not that confusing? Something like:

"Based on your translations in the text, Zeeguu thinks that these are the most important words for you to study at the moment".

The Three Categories of Tiago

I like the classification in three categories. But it might be too much for the user to take in at this point. So maybe show them on demand?

Adding and Removing Words to Study

In the design above, the buttons are overwhelming me with a sea of orange. The words, the elements that should stand out in the first place, do not stand out because of the buttons attract all the attention. I wonder if we can try one of the following two strategies:

1. revert the accent, make the words stand out and the buttons fade in the background
2. remove most of the buttons and leave only the buttons on this page

I've played a bit with a few alternatives, but I'm not sure which is best. Please let me know what you think, or if you have a nicer idea. Note that in all the alternatives I've removed the speech because I think it's not the place where users really need to use it. Neither that, nor the edit.

Leave a single button, remove all the others

Gray Buttons and Bold Orange Words, to invert the accent

This would align with elsewhere in the platform where the foreign word is orange.

Discrete + / - links

Use alternatives to the "-" icon

I love the minus because it's minimalistic, but it does not function that well as a clickable link. And if we make it a button, it can be quite heavy.

Consider keeping the trashcan for this screen. Or maybe use another kind of delete symbol, e.g., cross

Putting it all together?

Actually, while thinking about Tiago's last question, I think we could combine everything in the following way. Start with removing the star from everywhere we're using it.

The initial screen for review words will look the same as elsewhere we have words and translations: only two buttons for speech and edit.

Then if the use chooses to add words to study, then we go with one of the designs above. But we first, hide the speech and edit buttons, because they're not relevant in that mode, and keep only the buttons relevant for adding/removing words to the study list. I expect few people to use this, but the power users might, and even for them, the task at hand will be clear hopefully.

Do you see what I mean?

[tfnribeiro]

That's a long post! Overall, I agree, but I would like to discuss some points:

Good Points:

✔ I like the idea of only showing MAX the words that were added to the exercises. The user can then click a button to see all words. ✔ Reduce the number of buttons -> Only showing the - / + in edit mode.

Discussion:

• The info text should maybe use a different phrasing. I feel like "Manually add translations" doesn't quite fit the action. Something more like "Manually manage exercise words". This would be a button that could be toggled (Edit mode VS not edit).
• Maybe inform the user of how many words they translated in total (so they know how many they will see in edit mode).
• In edit mode, it's fair that the page is more overwhelming and you are deciding to be more of a "power user", so we could leave the info that the 3 words + cannot be added to exercises.
• I also think that saying that these words will be scheduled makes it sound like they are scheduled. While it might be a while until they are presented (other words take priority, and earlier words might come before these ones). For that reason, I used the language "These words will be used in the exercises" / "You'll see these words in your exercises".
• I dislike the bin button in this context because that is extremely associated with deleting, and I think the + / - better conveys the action. If we want to move away from the yellow we could use different colours:

• I personally like consistency in the icons, and I think the buttons should look similar to the SpeechButton so it's obvious you can click on them.

I think we are getting closer to a better solution. Personally, inverting the accent seems like a big change, and it could be part of the overall redesign of clicking words to get TTS, but it should be done as a general pass otherwise I feel like it would seem a bit out of place with the rest of the app.

I think I can quickly edit my code to see how it looks with the proposed changes and then we can give a try to the prototype and see how we feel.

[mircealungu]

That's a nicely structured post @tfnribeiro :)

Agreed with your considerations. Let's give a try with your changes!

[merleschoen]

Thanks for the long explanation, @mircealungu! I do understand your point of view better now.

I like the idea of combining the two! This way, we can keep the UI most users will see nice and clean and allow users that want more control to add and remove words at their will. I also think for the adding/removing part we should keep Tiago's three categories, but only keep the + and - buttons, just like @tfnribeiro suggested.

P.S. I love how Tiago is reading texts about executions, while my translations are about Taylor Swift – that's the beauty of Zeeguu :)

[mircealungu]

I love how Tiago is reading texts about executions, while my translations are about Taylor Swift – that's the beauty of Zeeguu :)

This is a testimonial that should go straight to the homepage :)))

[tfnribeiro]

This is how it looks now:

[mircealungu]

Looks cool as a prototype. Let's see how it feels in the "interactive prototype" :)

[tfnribeiro]

I have also made the implementation using a modal type interaction as shown here:

Using Modal:

Branch

I have a WIP branch under: https://github.com/zeeguu/web/tree/word-review-redesign , where you can see the Modal VS List implementations by changing the import in WordsForArticle

For Modal: import WordsToReview from "./WordsToReviewModal";

For List: import WordsToReview from "./WordsToReview";

Functionality Considerations

There is a few issues with the way the _fit_forstudy is handled in the backend. Currently, it's done as a check whenever a user performs a translation, and at the end every bookmark that passed the check is fit for study. In this implementation, the _fit_forstudy might be dependent on the total words the user translates. E.g. If only 5 words are translated we schedule those 5, but above 10 we then need to prioritize them in some way.

Right now, I am running into this issue where if I do it at the end of a reading session, if the user comes back a second time their preferences would be overwritten.

[mircealungu]

Did you push the images?

[tfnribeiro]

Yes, you need to make sure you update the pointer in to the APP_DOMAIN, otherwise it might be trying to fetch it from zeeguu.org.

REACT_APP_WEB_URL="http://localhost:3000/"

[mircealungu]

I like both the modal and the inline version :)

Maybe a bit better the inline version because of the Manage Words button is a bit lost in the page. If it were an in-text link I'd find it easier to use. Easier to act on the text straight away than start looking for the button.

A small problem with the inline version is the fact that the continue to exercises button can be pushed quite far out of reach if one has translated 100 words like I did recently in a text :) From this POV, the modal is a clearer signal that this is a transient task, you do it, and you go back to where you left from.

[tfnribeiro]

Personally, I could make the toggle inside the InfoBox, but I feel like it's important to communicate the different state you are on also on the button. A link wouldn't really reflect this, especially to "revert" the toggle. I could make a small line to better separate the two. Maybe this could be sticky, so in the case you have 100 words, this would remain a top of your page and you could, untoggled it to see only the words you selected to study.

It could be done like this maybe:

I have no experience in making a div sticky, but it might be doable?

The modal does make this case somewhat easier because the user can always just click away from the modal to get out.

[tfnribeiro]

This is what I have now:

Question: Should I remove duplicate words when prioritizing them? Going from Mircea's screenshot, I saw 3 times the same word.

Initial Page:

• I decided to trim the text as much as I can. The idea here is to ensure that we have the least amount of space while still allowing the user to understand more of the system.
• The message of "You translated ..." is not very useful, and instead is displayed as part of the info.
• Keep the toggle close to the info box where we inform the user, might also invite them to read the note more.

Modal

I decided to keep it simple but suggestions are welcome!

[mircealungu]

This is what I have now:

Question: Should I remove duplicate words when prioritizing them? Going from Mircea's screenshot, I saw 3 times the same word.

Yes, let's!

Initial Page:

• I decided to trim the text as much as I can. The idea here is to ensure that we have the least amount of space while still allowing the user to understand more of the system.

Cool!

• The message of "You translated ..." is not very useful, and instead is displayed as part of the info.

Nice!

• Keep the toggle close to the info box where we inform the user, might also invite them to read the note more.

Cool!

I decided to keep it simple but suggestions are welcome!

And I like the info box. You could use also here the Info icon you used on the parent page, but it's good also the way it is!

[tfnribeiro]

I think it looks good with the Info icon!

I am now wondering about what to do in the other pages where we show the word lists:

• Words Tab: Receptive Words, Productive Words - should we have an action to remove the words from exercises from there? ; Learned, still allow edit there? Top Words, any action there?
• History Tab: I guess there we can just leave edit and listen?

I also thought about making it a check box in the edit word. However, we would need to think about handling cases where a word couldn't be added to exercises (longer than 3 words). Could also just not show the field for these words.

[tfnribeiro]

We have talked about adding a new column to the bookmark table, maybe: user_exercise_preference, which would start with 3 possible states:

• -1: Do not show me this word in exercises
• 0: No preference state
• 1: Show this in exercises.

This will be used to override the value of fit_for_study when the user edits words at the end of the screen or by using the Edit words.