JapanesePod101.com

Blog / January 2022

  • 17 January 2022Prototypes for a better homepage dashboard !

    The homepage is long overdue for an update!

    I've decided to reorder my todo list, and make it a priority for the next update(s) to improve the homepage dashboard so it is more useful as well as a less confusing experience for new users.

    Last week I spent time mostly in Figma. It was productive and although the new design is relatively simple, I feel like the major elements are in place, and I'm eager to start implementing!

    Prototype homepage dashboard redesign

    It's really hard for me to work on just "wireframes" (ie. just boxes and lines), so the prototype has colour and is relatively close to what I am going for. But also please keep in mind it is not finished -- it's a bit bland visually, and there is plenty of room to iterate in following updates.

    Please check out the New homepage dashboard prototype discussion.

    In this thread I go more in depth about what we are trying to solve, and how the new design would improve the user experience.

    Now is a great time if you'd like to be able to give your input, and let me know what you think. Have I covered most user's needs with this new dashboard? Did you imagine something else? Any input is welcome and I may tweak the implementation accordingly.

  • 6 January 2022Today's update: Improvements to the documentation

    Happy New Year everybody!

    This first update in 2022 brings small but welcome changes to the Learn More page (which I shall refer below as the "Help" page to simplify).

    My goal initially was to document the new Again rating. See Card ratings section.

    I recommend anyone using the SRS to re-read this part of the documentation! I updated the documentation of the Hard rating, and consolidated information from previous site updates that wasn't clearly documented before.

    As I did this, I thought it was time to improve the documentation. It now finally has a multi-level table of contents. I hope you'll agree it is way, wayyyy better. You can now see what's in the documentation at a glance. The Help page TOC automatically picks up headings from the source document, which is written in Markdown.

    In no particular order a list of changes:

    • the Card Ratings section now has coloured buttons which look the same way as they do in the Review screen
    • documented the Again rating
    • consolidated two tips in the Hard rating documentation
    • added a new Edit Stories section : this is essentially the same information that was shown when you go to the Study page, but it wasn't very obvious there -- as evidenced by occasional emails from users asking "How do I format the keyword".
    • added a new Edit Keywords section
    • rearranged some bits like Restudy List and Review Summary under the main "Reviewing" section
    • in Review Chart Colors I replaced old GIF images with CSS for rendering the small isometric boxes. Sometimes it's the simplest changes that are satisfying... they look way nicer than the old icons -- and probably look much sharper on high resolution displays

    The Help page link was added directly into the top bar navigation (on desktop).

    Then I looked at the odd "hamburger icon" drop down which featured the "Help" and "Contact" links. I thought it doesn't really make sense. Typically the hamburger icon is used on mobile devices when there is not enough space for a wide navigation bar. Users are pretty used to it and know it is a kind of menu. However on desktop when there is enough space I figured it would make more sense to put an actual label.

    In the "More" dropdown, I removed the "Help" link since it is now prominent on the top navigation bar (no changes to the mobile nav).

    I added a Discussions link, which takes you to the Github Discussions page -- a place where you can post suggestions, bugs and asks questions.

    With that said, I know the documentation could still use a lot of work. I originally only intended to add information about the new Again SRS rating -- and then went from there. Writing documentation is hard, and very time consuming. I think it's pretty decent as it is. If some parts of the documentation are really an eye sore let me know and I will see what I can do :)

    Next up

    In the coming weeks I am planning to redesign the "progress bar" area of the Review page -- which is not very intuitive since I added the Again SRS rating.

    I need to look at that and at the Review Summary page at the same time since both essentially need to show a breakdown of No/Hard/Yes/Easy answers -- in a simple, readable way.

    This time I'll try to put the keyboard away and go back to the drawing board. Im general I feel I did the best updates on the site when I took the time to design the page in FIGMA (or Photoshop, years ago). It's always worked the best for me. Having a clear visual representation of what I'm trying to implement, even if it is a static image, lets me see right away all the things that sound great on paper but don't actually work. Then, once I dive into the code I have a super clear idea of what I'm going for, and it's way more fun to code when you don't have doubts and you don't waste time going in circles.

    I'm still mulling over it. The main thing that came to mind is that due the the flexible functionality of the Hard ratings, we can not assume (as is the case now) that the Hard rating is a succesful review. If the user changes "Maximum box for cards marked 'Hard'" in the SRS settings, it can work similarly to the Again rating -- without the repeated review.

    So I'm thinking of breaking down answers in 3 groups : Failed / Hard / Yes + Easy. Red, orange (or yellow) and green. So both during review and on the review summary the breakdown could be shown in these 3 groups. That way the Hard answer can mean whatever the user wants, depending how they use it.

    Note this doesn't change anything to the ratings -- it's just a question of how to more intuitively represent the breakdown of a review session.

By Month