Improving onboarding for new users with tutorials

[andrewsanchez]

I wanted to share this free library of tutorials we are working on creating with an awesome tool called Iorad.

Anki Tutorials

Let me know if you have any ideas for tutorials that would be useful (especially for new users). I’m also curious how this might fit into the Anki manual or even be made accessible from directly within Anki. One cool thing about Iorad tutorials is that they can be embedded anywhere, which means they can be embedded on Anki cards or any Anki webview!

One thing I considered was potentially having an “onboarding mode,” that is active when somebody installs Anki for the first time and then dynamically surfacing tutorials like this. E.g., the first time someone opens the browser, show a tutorial or at least let them know how to access it. We could also expose a library of tutorials from the help menu. Curious to hear other ideas and feedback about these ones.

@dae if you add https://www.iorad.com/ to the allowed iframes settings in Discourse, I can show how the tutorials can be embedded and used here on the forum for user support.

[dae]

I’ve updated the Discourse settings to allow it. Will be interesting to hear what people think!

[Expertium]

@andrewsanchez

One thing I considered was potentially having an “onboarding mode,” that is active when somebody installs Anki for the first time and then dynamically surfacing tutorials like this. E.g., the first time someone opens the browser, show a tutorial or at least let them know how to access it.

That sounds great!

[Deranged6605]

Can you add windows 10/11 screenshots in your tutorial. I use windows sometimes too thanks

[Danika_Dakika]

The only substantive differences I’ve seen between Windows and Mac are a couple things in the menus. Windows doesn’t have an “Anki” menu (same for Linux, I think). So –

Anki > About ↔ Help > About

Anki > Preferences ↔ Tools > Preferences

@andrewsanchez – I’m not sure if another set of screenshots is necessary, but Windows seems like it is a “common” enough OS . Would you consider at least adding a note about the different menu locations ( that the tutorials are editable)?

These look slick and I’m looking forward to referring folks to them!

[Deranged6605]

If possible, include Windows and Linux installations (probably this is fitted for power users), because i assume that most of the guides are for macOS (I can’t afford a Mac sorry)

[andrewsanchez]

@Deranged6605

Can you add windows 10/11 screenshots in your tutorial.

@Danika_Dakika

The only substantive differences I’ve seen between Windows and Mac are a couple things in the menus.

@Danika_Dakika

@andrewsanchez – I’m not sure if another set of screenshots is necessary, but Windows seems like it is a “common” enough OS . Would you consider at least adding a note about the different menu locations

Maintaining different sets of tutorials for Windows and Linux isn’t really practical. But I think at least adding notes where there are meaningful differences is a great idea! And if there are specific tutorials that would really benefit from a dedicate OS-specific tutorial, we can try to do that! cc @brainravens @Ahmed7

Let us know if there are any FAQs you can think of that would benefit form a tutorial, @Danika_Dakika!

[Deranged6605]

Understood. A bit of work in reader’s side will make the manual do for them as well.

[ZpLiu]

This tutorials is very nice and user-friendly.

[andrewsanchez]

@dae , looks like the iframe embeds aren’t working for some reason. It could be a Discourse bug, but they are working on https://community.ankihub.net/.

Here’s an example of what an embedded tutorial looks like “full exploded” on Discourse. The downside to this type of embed is that they won’t be dynamically updated when the tutorial is modified. These can be embedded anywhere, including an Anki webview.

Expanded tutorial

22 STEPS

1. There are multiple ways to add tags to a card.

It can be done when creating a new card, or they can be added to already-existing cards

Let's do new cards first

2. Click on the deck to which we're going to add the card/s

3. Click Add

4. This is an example card, to which we can add tags

5. Click the tag field

6. As you type in the tags field, Anki will recognize and suggest existing tags that are similar to the keywords you've used

7. Once the tag has been recognized and selected, Anki will add it to the card and it will look like this

8. You can add multiple tags to a single card

9. When you are ready to add the card, click add

10. Your new card exists, and we can now view it

11. Click Study Now

12. This is your card

13. We can similarly view this card from the browser, by clicking on Browse

14. This is the view of that same card, from the Browser

15. At the bottom we see the tag field

16. You can click the field to add more tags

17. More+Enter
Tags+Enter
Are+Enter
Possible+Enter

18. You have added those tags to an existing card

19. Similarly, existing tags can be deleted

20. Click on the icon to delete and remove the tag from the card

21. You can add, or delete, multiple tags from a card

22. That's it. You're done.

Here's an interactive tutorial

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **

https://www.iorad.com/player/2419108/Adding-Tags-to-a-Card

If an iframe is used, the actual tutorial is embedded and, is fully interactive and would be updated to reflect any changes in real-time.

The entire “help center,” (just a collection of categorized tutorials) can also be embedded.

[dae]

Probably my fault for removing the www. prefix. I’ve added it back; does that fix it?

[sorata]

22 STEPS

1. There are multiple ways to add tags to a card.

It can be done when creating a new card, or they can be added to already-existing cards

Let's do new cards first

2. Click on the deck to which we're going to add the card/s

3. Click Add

4. This is an example card, to which we can add tags

5. Click the tag field

6. As you type in the tags field, Anki will recognize and suggest existing tags that are similar to the keywords you've used

7. Once the tag has been recognized and selected, Anki will add it to the card and it will look like this

8. You can add multiple tags to a single card

9. When you are ready to add the card, click add

10. Your new card exists, and we can now view it

11. Click Study Now

12. This is your card

13. We can similarly view this card from the browser, by clicking on Browse

14. This is the view of that same card, from the Browser

15. At the bottom we see the tag field

16. You can click the field to add more tags

17. More+Enter
Tags+Enter
Are+Enter
Possible+Enter

18. You have added those tags to an existing card

19. Similarly, existing tags can be deleted

20. Click on the icon to delete and remove the tag from the card

21. You can add, or delete, multiple tags from a card

22. That's it. You're done.

Here's an interactive tutorial

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **

https://www.iorad.com/player/2419108/Adding-Tags-to-a-Card

[andrewsanchez]

@dae

Probably my fault for removing the www. prefix. I’ve added it back; does that fix it?

Yes, looks like it works now. Thanks!

[dae]

The screenshots are coming up blank for me when I try go through the tutorial - anyone else seeing that? Maybe temporary problems on iorad’s end?

[brainravens]

Seems to show up fine on my end, atm, FWIW

[dae]

They’re working again now