P5.js-web-editor: Feature enhancement: Improve Examples UI - Long list difficult for students to scroll

[willingc]

Nature of issue?

• [ ] Found a bug
• [x] Existing feature enhancement
• [ ] New feature request

Feature enhancement details:

I've just finished two 2 hour workshops on interactive computing with middle school students where the workshop relied heavily on the existing Examples.

The alpha editor worked very well (great job folks! :tada:). The only stumbling point that some of the students had was scrolling through the list of Examples to find a specific example. The wonderful list of Examples is very long.

A simpler UI or additional guidance would be helpful for dual language learners or learners new to computers.

[catarak]

I agree! There's an existing design, not yet implemented, with a search bar at the top (see #231). If you have other UX/UI ideas let me know! We've also been throwing around collections (#43), which could also be implemented as tags.

In your workshop, were you asking students to find specific examples? In that case, I think the search bar at the top would be helpful. Or were you asking students to explore the examples? Then, I think adding collections/tags and even thumbnails would be helpful.

[willingc]

Hi @catarak,

I agree! There's an existing design, not yet implemented, with a search bar at the top (see #231).

The search bar would be a great addition especially if it shortens the list as you type characters.

If you have other UX/UI ideas let me know! We've also been throwing around collections (#43), which could also be implemented as tags.

I think this would also be nice, but I think in terms of priority that a search bar sooner vs. later would be lovely. If you have time for only one, I would lean toward the search bar.

In your workshop, were you asking students to find specific examples? In that case, I think the search bar at the top would be helpful. Or were you asking students to explore the examples? Then, I think adding collections/tags and even thumbnails would be helpful.

I had them do both. Initially going to specific examples (IIRC some of the interactivity examples were the ones with a long scroll.

I agree that in the free exploration phase that a collections/tags, not sure about thumbnails, would be helpful. The students seemed fine exploring on their own. "Gee what does this do?" moments kept them trying more. I'm not sure that they would do that as much if a thumbnail was there but that is purely my gut reaction.

[catarak]

thanks for these answers! very helpful. i think that the search bar would be a great self-contained issue to work on. just added help wanted/good first issue tags to it.

[willingc]

Excellent. FYI, just finished usage of the editor with 6 groups of high school students and it performed perfectly. You may be ready for beta :-)

[catarak]

i think this is a duplicate of a couple of issues: #231, #43, and #557, so i'm going to close this as a duplicate, but i agree this is important!