Designing a new Study page navigation pane

[fabd]

I'm thinking of adding a better / more visual way of navigating the Study pages - besides the PREV / NEXT arrows under the search box.

There might be a new button to open the dialog :

A very first draft of the dialog, something to riff on - ideas welcome.

The main thing I'm going for is a grid of kanji, arranged by lessons. Something visual to see where I'm at.

In this mockup the user is on kanji # 102 "woman".

• ideally the current kanji should always be in view then the dialog opens from a fresh state
• user can see at a glance how many more kanji are left in this lesson
• user can skip some kanji ahead, not just move to the next in sequence
• the pills above are filters, clicking "Restudy" would let you navigate all the forgotten kanji
• the state of the current filters would be remembered when navigating study pages
• "Current lesson" not sure if this is needed, that would only remove all the other lessons from the view

The pills / filters is a very first draft idea. It might not be necessary.

"Restudy" filter would basically give us the "Restudy List" without leaving the Study page.

The scrollable area might be very long - but I don't like the idea of having to collapse/expand every lesson

Feel free to riff with other ideas.

I think even without the filters this dialog would already be useful. At the cost of an extra click you can jump to any kanji before or after, and you can get a visual feeedback for how far you are in a lesson - without leaving the Study page.

[483D8B]

I like the idea of the filters and the button near the arrows to open the grid, very well thought out.
One idea that might be useful is a pill that, when clicked, changes the background color of each kanji based on the box it is currently in.

It might be visually appealing to see the progress through a color legend. For example going from red for the failed kanji to purple for the kanji in the last box :)

[fabd]

If I do add more fine-grained SRS status color-coding in this dialog I'll have to think more about the purpose of the "View All Lessons" page - or perhaps they should converge at some point. Maybe "View All Lessons" could be a larger view of this same dialog . I think it makes no sense to present the same data in different ways to the user, in this case at least it would be inconsistent.

[fabd]

PS:

I mean in an ideal world if this were a "single page application" I didn´t start writing 15+ years ago... we could have the button somewhere in the header bar and the user would be able to see this kanji grid from anywhere in the app and reach the Study page from there. So essentially the View All Lessons page would be reachable from any other page since it is usable as of now, to move to a Study page (the keywords act as links). But as of now, it's kind of tucked into a separate page so it doesnt work well for navigation. it's mostly for checking out one's overall progress.

[483D8B]

I agree that consistency in data presentation is crucial. Regarding the "View All Lessons" page maybe one idea would be to add the grid of colored kanji there, without the division into lessons (or with too?). Something like this:

[callaleia]

Yes, adding colour blocks would be great, even if it was just that kanji not added to the study list are grayed out or something like that, so you can see your progress. I think this improved navigation is a great idea.

[fabd]

Sure. I think you mean to distinguish those that have a flashcard? Now that I started implementing it feels like it really should be there for sure.

[fabd]

Progress update, here's what I have working so far:

I tried putting a background color on all the boxes but then it becomes quite visually heavy, as en example:

I feel it distracts from the characters.

I like @483D8B 's idea of adding a pill, maybe it will be called SRS and then I could have more visually heavy rendering there, but more of like a mode where you want to work on your less well known kanji?

For the default view I am in favor of keeping the focus on Study, and only distinguish "has a flashcard" "is a forgotten kanji"

For "has a flashcard" perhaps a small green dot, I'll try different things that don't become visually heavy when in a grid of hundreds of kanji. Yeah, maybe the dot would work well, green dot or red dot. Then if you click "SRS" pill, show more fine grained info.

For the SRS fine-grained status this will be on the longer run because it requires pulling more data on every Study page. The best way to do this would be to turn the Study page in a small "single page app" whereby there wont be anymore full page rrefresh - in which case it's more reasonable to put a lot of data in the page.

I'll need to to dhis eventually also to solve "state management". For example now you click on the top right to add a card. You would expect when opening this dialog, to see this card now active in the grid. Things get complicated quickly :P

Refactoring the Study page to no longer require full page loads should be fun but a lot of work but I've wanted to do this for a while.

Until then, I think I can display has-flashcard / is-failed states without pulling too much data on every Study page. I mean I could also just pull data when you open the dialog but personally I hate apps that have all those delays on UX interactions.

Next thing I'll be working on is adding a Volume 3 pill so it can be removed from the default view, this should speed up the dialog instancing a bit since we're generating 2000+ small cards, and it will also give more room for the scrollbar handle. if might be more comfortable also for someone working on Vol 3 to not have to scroll through all of RTK1.

[483D8B]

Yep, if there are too many kanji displayed at once, adding colors might make the interface visually overwhelming and take the focus away from the main stuff. Nice idea about the dots, it could work well :)

Creating a mode to review and concentrate on the most challenging kanji could be really helpful. However considering how to implement this without overloading the server with too many requests it's crucial