Learn 3.0 Released

[veritas_nz]

Learn 3.0 – Navigation Evolved

This feature update includes some TLC to the Learn system.

---

Purpose

We received a lot of feedback from new users that the old Learn navigation system (with the arrows next to the Grammar/Vocab title and the little 1/3-style progress indicator in the corner) was just not clear enough to convey how a user was meant to use Learn.

We agreed, and thought of a way to make this pretty simple process a lot easier to grasp for new users.

---

🪜 Progress Display

We switched to using a pellet-based system – similar to what’s inside the Dashboard Learn dropdown menu – for smaller sessions, and a progress-bar based system for larger ones (~10+ on smaller screens, ~20+ on larger ones).

We feel that (finally) this system is self explanatory.
Use the Previous / Next buttons to navigate through the items, and click on the pellets/progress bar itself to go directly to items.

Small session:

Large session:

Screenshots of all the possible states

Mobile (small session)

Mobile (large session)

Desktop (small session)

Desktop (large session) /w progress bar clicked

Finally, the Next button changes to Start Quiz, and you quiz the items you just learnt.

---

Hotkeys

Hotkeys remain unchanged – use the ← / → keys to progress through the items.

Hitting the → key on the last item will bring up the Quiz Time! popout.
Hitting Enter here will start the quiz.

Just like on the item’s individual pages themselves, you can use the D / E / R hotkeys to access Details / Examples / Resources respectively.

---

Removed the Navbar

We made a calculated decision to remove the navbar during your Learn session. This reduces distractions from the item you’re studying, and gives you slightly more vertical space while Learning.

You can return to your homepage using this lil chicken nugget (button) in the top left corner:

---

No Beta?

No Beta! We felt this feature was a straight up improvement over the old system, and the technical overhead of managing the two systems at once wasn’t worth the extra time.

That being said…

If you have any feedback or critiques at all, as per usual, leave them below and we’ll try to get to them ASAP.

---

What’s Next?

With this published, we’re going to continue to monitor for bugs and other feedback.

We have some other, bigger projects coming up next, so stay tuned!
Don’t touch that dial

[Inounx]

Hey,
This seems to be a nice upgrade, thanks !
I am currently doing my today learning, and I have seen some details :

• I am using dark mode, and the bottom bar has not enough clear delimitation regarding the content of the page (there is no border, and color is same than some panel background color, see screenshot).

• For grammar I usually learn 1 item, and if I have time after all learning I do more. Don’t know if this is normal, but for 1 item learned the bar is empty at the bottom. No big deal but this feel a bit strange.
  

  

• A last thing: when there is several items to learn, the pellets other than the one for current item are almost invisble in dark mode :
  

[bunnypro]

Nice! Time to upgrade my own learning too

[eclipse77x]

I like this. Much clearer and easier to navigate.

[Delley]

完璧！

[Daru]

Thank you for reporting this!

I’m thinking part of the issue stems from not following the same color rules the Learn Button has. If we do, it looks like the example below:

What do you think about this approaching the issue like this?

[wct]

@veritas_nz

Desktop (small session)

Desktop (large session) /w progress bar clicked

I haven’t actually tried the new interface yet, so apologies if this has already been implemented, but from your description, “… /w progress bar clicked”, I would suggest that it would be perhaps easier to ‘discover’ this feature if it either a) appeared on mouse-over / hover rather than click, and/or b) gave an indication to the user that there is some reason to click on the progress bar (usually progress bars like these are not clickable), such as perhaps to change the mouse pointer to something like and/or with a note/tooltip like “Click to navigate”, or something along those lines.

[Daru]

@wct

a) appeared on mouse-over / hover rather than click

I think this is a great idea! We need to retain the click to support mobile devices, however improving discoverability through hover is a very clear improvement. Thanks for the suggestion!

[Inounx]

To be honest, I am not sure. Using the same color scheme than the Learn button, might not be the better option I feel, because in dark mode it will end up being the most colored item on the page.
I am maybe a bit nitpicking here, but this will bring focus on this bar, and not on the content. The example you picked works pretty well because it is a light blue, but for double-color themes, the color of the learn button is brighter.
Maybe just apply the same style than the footer on the dashboard page would be fine I guess, plus more contrast on the pellets ?
This is my opinion, maybe other dark mode users may also give their feedback here ?

[steffuld]

If I had a choice, I’d at least try to put it at the top of the page rather than at the bottom. I’m not saying that I’d necessarily like it, but for now I have a feeling that if there needs to be a fixed block constantly obscuring a part of the page, I’d rather it was at the top

[nminer]

I’m currently using the Light Blue theme (the same as the one shown in the images above), and I agree in regards to it being the most coloured item on the page. Or if you do a squint test, it currently looks like the most important element on the page, and can be a bit distracting.

Overall, I like the idea behind the bar, but it does feel very in your face right now just with the colour contrast.

[casual]

I’d agree that having the whole bar of the bright accent color is not ideal.
If that’s the alternative, almost-invisible pellets look preferable.

Maybe giving the pellets some sort of thin outline, different from the hover state, is sufficient?

[adorable]

I miss the feature when it used to show the JLPT level of the grammar point (and also what lesson).
Currently if you use something like the Tae Kim deck, it only says Tae Kim deck top left and not what JLPT level the grammar point is. Previously you could see it saying N5, N4, N3, N2, N1 which I think is a good thing as it alerts you that you will probably see some grammar points you don’t know in the example sentences.

[StudyPug]

One thing about this update that I dislike is that you’ve removed the upper bar which means that if I find a vocab I don’t know, and want to add, I have to either quit out of lessons or open a new bunpro tab then go to content - vocab search.

In the previous version the bar was still there :お・

[Jake]

Good point! I think we can add a search icon into the icon list.

[veritas_nz]

@casual @nminer @Inounx

Just pushed fixes for the Dark Mode contrast issue:

@adorable I’ve just returned the JLPT details to the header!

[StudyPug]

About @adorable 's point, In previous version you used to be able to see which Lesson the grammar point was in. E.g
JLPT N3
Bunpro N3[Grammar]
Lesson 1/23

Currently that’s not there. Found it pretty useful.

[veritas_nz]

Woosh! 🪄

This will be published some time this week.