p5.js-website icon indicating copy to clipboard operation
p5.js-website copied to clipboard

Merging Teach&Learn&other education related page into “Education”

Open Gracia-zhang opened this issue 3 years ago • 7 comments

Topic

Hi All!

I’m Gracia, a GSoC student mentored by @yinhwa . In my exploration of the Teach Page, I found that the current menu of p5.js web page is quite messy.

Current Menu Structure About Education:

Current

The current menu is loosely structured, which may cause people interested in learning and teaching to skip some of the content, such as /Books. I think these education-related titles (Get started/Learn/Teach/Examples/Books) could be reorganized as a subcategory of "education".

Involve more contributors and provide them with more possibilities to share their tutorials and experiences, for example, by adding a contributor column in Learn Page. This was also mentioned in @Nolski ’s previous issue #1000.

I don't want to redo a whole Education page, but it might work better if these pages could get together in one place. Here’s my idea of the new structure of “Education”:

New Menu Structure About Education:

New

I think “Get started” is an important part for beginners to help them quickly understand p5.js, so I made it separate to make it easier to find. I referred to Processing Web Page's Learn Page for the reorganization of Learn, combined the example and book with the tutorials from the original learn.

In order to better engage the community, I added a section on events/workshops to the Teach Page, hoping that this change would make the Teach Page more informative and provide a platform for teachers to share events/workshops, as well as an opportunity for more learners to participate in.

Benefit:

  • Clarity, User-friendly, Integrated
  • Joint participation
  • Involve outside contributors

Questions:

  • How mixed is merging?-Reduce pages/keep pages but add subheadings?
  • Whether “Get started” is merged?
  • How to update the work(tutorials/posts/etc) of contributors? (Real-time updates after reviewing content?)
  • Standard of selecting books/events/workshops?
  • Rules/Criteria/How are contributions rewarded?

As a GSoC student, I will focus on Teach Page only. More UI/UX design sketches are on its way! I‘d like to Leave the Discussion about the menu, Learn Page and Get Started Page to the community. Please feel free to share your ideas about this issue :)

Gracia-zhang avatar Jul 30 '22 00:07 Gracia-zhang

Thanks @Gracia-zhang for proposing the new structure. Please correct me if I am wrong, it seems like the two visual diagrams in your issue are misplaced, like the second diagram illustrating the 'p5.js Web Page' should go after 'Current Menu Structure About Education'.

Qianqianye avatar Jul 30 '22 03:07 Qianqianye

Thanks @Qianqianye ! I'll fix it!

Gracia-zhang avatar Jul 30 '22 15:07 Gracia-zhang

I want to acknowledge that we have the p5.js website redesign project pending in the near future to rethink the overall design of the website, but we don't have a clear timeline yet. We can definitely optimize the information architecture of the p5.js website since the navigation bar at the left side is getting long. While this issue proposes a big change, I am wondering if we can come up with some smaller steps that help us reach to the big update eventually. Like:

  1. Would it be possible to create a subcategory nav bar on p5js website like the new Processing website (eg. when you hover 'Learn', it shows 'Tutorial', 'Example', 'Book')? If so, what the design could look like?
  2. How do you feel about merging the Book page to the Learn page?
  3. How do you feel about merging the Get Started page to the Learn page? (Get Started page is already linked on the Learn page currently)

I am inviting Contributor Docs steward @limzykenneth, Learn page steward @nickmcintyre, Teach page steward @SarveshLimaye, Example page stewards @Malayvasa @tyler-yin @3ru to this discussion. And it'd be wonderful to hear more from the community about this proposal. Thank you!

Qianqianye avatar Aug 06 '22 18:08 Qianqianye

Thanks @Qianqianye! And great proposal @Gracia-zhang!

I'm also in favor of optimizing the current website's information architecture and jotted down some similar ideas for the 'Learn' page. Longer term, I think we should complement the existing tutorials and examples with challenges/projects along the lines of the Raspberry Pi and micro:bit websites.

My opinion on the menu itself is that 'Learn' and 'Teach' should remain separate items. The Processing, Raspberry Pi, micro:bit, and Code.org websites seem to have converged on that pattern and it feels right.

Smaller steps are a good idea!

  1. Would it be possible to create a subcategory nav bar on p5js website like the new Processing website (eg. when you hover 'Learn', it shows 'Tutorial', 'Example', 'Book')? If so, what the design could look like?

All for it.

  1. How do you feel about merging the Book page to the Learn page?

I think the content of the 'Books' page should remain separate as the resource is fundamentally different from the text tutorials. Along those lines, I would even consider renaming p5js.org/learn to p5js.org/tutorials and simply having 'Learn' as a menu item.

  1. How do you feel about merging the Get Started page to the Learn page? (Get Started page is already linked on the Learn page currently)

All for it.

nickmcintyre avatar Aug 07 '22 17:08 nickmcintyre

First of all cheers to @Gracia-zhang for such a great proposal!

This is a big change and I agree with @Qianqianye that we need to break it into smaller steps.

  1. Would it be possible to create a subcategory nav bar on p5js website like the new Processing website (eg. when you hover 'Learn', it shows 'Tutorial', 'Example', 'Book')? If so, what the design could look like?

All for it. This will be a good to have feature since the navigation bar on the left side is getting longer. We can have something like Education on the navbar and Learn, Teach as a subcategory. (Get started can be also added to the subcategory if it is not merged with learn page)

  1. How do you feel about merging the Book page to the Learn page?

I feel the characteristics of both resources are very different. In my opinion the 'Book' page and 'Learn page should not be merged.

  1. How do you feel about merging the Get Started page to the Learn page? (Get Started page is already linked on the Learn page currently)

Yup, we can go ahead with it!

Thank you for involving me to the discussion @Qianqianye !

SarveshLimaye avatar Aug 09 '22 06:08 SarveshLimaye

I think the structure put forward by @Gracia-zhang looks good and thanks for the input from everyone else as well. A few note and thoughts, I'll try to keep them semi-organized.

  • Where the "Get Started" page is organized under is not a big concern for me, it can be under "Learn" or be its own page, but it is important that we can get to the "Get Started" page very easily (ie. one click from the homepage).
  • Using sub-categories and sub-pages to group topics under "Learn" is a good approach as well.
  • Having contributed contents in both "Learn" and "Teach" page requires a bit more effort to maintain as the website does not sit in front of a CMS, meaning any new data or edits to existing data have to be done manually.

limzykenneth avatar Aug 14 '22 10:08 limzykenneth

Thank you @Qianqianye for inviting me to this discussion! I think this is a wonderful proposal @Gracia-zhang, and everyone here has made some very good points.

I agree that smaller steps are a good approach, and that having 'Tutorials', 'Examples', 'Books' nested under 'Learn' could be the right first step. I think the concept of a subcategory nav bar is good as long as it doesn’t exceed 1-2 layers; too many nested subcategories might be confusing for users to navigate.

I also agree that 'Get Started' should be visible from the homepage, whether or not it is merged to another category.

tyler-yin avatar Aug 17 '22 22:08 tyler-yin