[GSoC '22] Refine User Interfaces across PublicLab.org - Project Discussion

[KarishmaVanwari]

This is the discussion thread for my GSoC project - Refine User Interfaces across PublicLab.org (#11187)

[KarishmaVanwari]

Hey @jywarren, @TildaDares, @cesswairimu!
I've planned to proceed with the project tasks list as in the planning issue.

It would be great if I could get some clarifications on the following:

1. Could you please highlight the current process of teachers becoming moderators? And what is expected while refining this process?

2. Where is the topic tree to be inserted - at a new route or at https://publiclab.org/wiki/topics (specifically here, replacing the table maybe, need your suggestions on this)?

3. Which UI would be preferred for the topic tree among the following?

   • Simple UI (as mentioned in point 3 here)
   • Comprehensive UI (as mentioned in point 3 here)
   • Bootstrap collapsible element with accordion

[jywarren]

Hi @KarishmaVanwari I'm sorry i took a while getting back to you on these. Going through them now.

Could you please highlight the current process of teachers becoming moderators? And what is expected while refining this process?

I've asked @publiclab/community-reps but I wonder if the best way to get feedback on this is to post on https://publiclab.org/tag/education with a question. Can you do that and I'll reach out again to get input?

Where is the topic tree to be inserted - at a new route or at https://publiclab.org/wiki/topics (specifically here, replacing the table maybe, need your suggestions on this)?

Yes, this is a good question. I think we could imagine several places to feature it, but the best initial location is probably /wiki/topics, that's right. However, how should we think about how we actually include it into the page? What triggers it, or inserts it? I'm not sure about that. We could just start by creating a simple page at https://publiclab.org/topic-tree and think about this question later -- so, we'd add a new route, and a new template. Later, we can think about how to insert it and where, and we can get into questions about which pages should have it. How does that sound?

Which UI would be preferred for the topic tree among the following?

I'd like to start with the simple UI. If we find it's lacking, I think we could explore a Bootstrap-based one. One really strong advantage of the Simple UI is that if we upgrade Bootstrap, we don't have to re-code this section, and also we avoid using extensively customized UI/CSS which could require future maintenance.

One possible hybrid approach is to style the <details> elements using Bootstrap classes, whether to the <details> elements themselves (not sure how smoothly that will work) or by wrapping Bootstrap elements inside of them. What do you think, could that work? Then, individual simple elements of Bootstrap would be easier to upgrade (hopefully just a find/replace) but it still has a slightly richer, familiar look and feel, but a simple raw HTML-based structure.

[jywarren]

@KarishmaVanwari i also had another small task you might consider adopting, especially if we don't get enough input on the moderators one. It's that, when someone posts a note at https://publiclab.org/post (or try it on your local) without any tags, we show a notice here:

plots2/app/views/notes/show.html.erb

Line 4 in 8278106

<% if current_user && @node.tags.size == 0 && !@preview %><div class="alert alert-warning"><%= raw translation('notes.show.note_no_tags', url: 'javascript: document.getElementById("tags-open").click();') %></div><% end %>

Translation of message text here:

plots2/config/locales/en.yml

Lines 219 to 220 in 66cde6e

	note_no_tags: "This note has no tags yet; help connect it to other content by
	<a href='#' onClick='%{url}'>adding descriptive tags below</a>."

I was thinking we might expand this a bit by explaining more about tags. @bhamster07 on the Public Lab staff has made this great page: https://publiclab.org/about-tags and we could borrow a little text from it, also make the message friendlier... what do you think? It could take some brainstorming in a new issue with @bhamster07 maybe.

We also have another scenario - if someone posts something with certain tags, but they aren't actually following those tags. It seems like we should almost make it a prerequisite that you should follow tags before you can post, but we don't want to add another barrier to participation. What are some options? Could we (or should we) auto-follow tags you post into? We could notify people and link to /subscriptions where they can un-follow. Or we could make a checkbox (that's already checked) on the /post page for whether they'll follow the topics they've used to tag their work. Finally we could just auto-follow but we could say that'll happen in the explanatory text below the tagging input (shown below) -- maybe with the text You'll 'follow' any topics you enter. ? What do you think?

(updated to @bhamster07 instead of bhamster, sorry bhamster for the mistaken mention!)

[bhamster07]

Hi @jywarren and @KarishmaVanwari! I'm happy to do some brainstorming around tag alerts if that's helpful.

On auto-following tags someone posts into:

Or we could make a checkbox (that's already checked) on the /post page for whether they'll follow the topics they've used to tag their work

+1 to this idea! It seems similar to some online checkout processes where people are encouraged to subscribe to newsletters, etc., but it's not too onerous to opt out.

[KarishmaVanwari]

Hi @jywarren,
Apologies for the delay in going through this.

I've asked @publiclab/community-reps but I wonder if the best way to get feedback on this is to post on https://publiclab.org/tag/education with a question. Can you do that and I'll reach out again to get input?

Yeah, sure. I can do that!

Yes, this is a good question. I think we could imagine several places to feature it, but the best initial location is probably /wiki/topics, that's right. However, how should we think about how we actually include it into the page? What triggers it, or inserts it? I'm not sure about that. We could just start by creating a simple page at https://publiclab.org/topic-tree and think about this question later -- so, we'd add a new route, and a new template. Later, we can think about how to insert it and where, and we can get into questions about which pages should have it. How does that sound?

Cool. I am not so sure of how can I create route and associated template, but I will try and figure it out.

I'd like to start with the simple UI. If we find it's lacking, I think we could explore a Bootstrap-based one. One really strong advantage of the Simple UI is that if we upgrade Bootstrap, we don't have to re-code this section, and also we avoid using extensively customized UI/CSS which could require future maintenance.

One possible hybrid approach is to style the <details> elements using Bootstrap classes, whether to the <details> elements themselves (not sure how smoothly that will work) or by wrapping Bootstrap elements inside of them. What do you think, could that work? Then, individual simple elements of Bootstrap would be easier to upgrade (hopefully just a find/replace) but it still has a slightly richer, familiar look and feel, but a simple raw HTML-based structure.

I guess wrapping the Bootstrap elements in <details> element would be a better idea, I can check out how does it turn out to be.

[KarishmaVanwari]

I was thinking we might expand this a bit by explaining more about tags. @bhamster07 on the Public Lab staff has made this great page: https://publiclab.org/about-tags and we could borrow a little text from it, also make the message friendlier... what do you think? It could take some brainstorming in a new issue with @bhamster07 maybe.

Hey @jywarren, if I am not wrong, do you suggest to just modify the message, right? To make it friendlier and no other change needed?

Or we could make a checkbox (that's already checked) on the /post page for whether they'll follow the topics they've used to tag their work. Finally we could just auto-follow but we could say that'll happen in the explanatory text below the tagging input (shown below) -- maybe with the text You'll 'follow' any topics you enter. ? What do you think?

This sounds good! I can add this to my planning issue. Thanks!

[KarishmaVanwari]

Hi @jywarren and @KarishmaVanwari! I'm happy to do some brainstorming around tag alerts if that's helpful.

On auto-following tags someone posts into:

Or we could make a checkbox (that's already checked) on the /post page for whether they'll follow the topics they've used to tag their work

+1 to this idea! It seems similar to some online checkout processes where people are encouraged to subscribe to newsletters, etc., but it's not too onerous to opt out.

Hi @bhamster07, thanks! I would love your help!

[jywarren]

Hey @jywarren, if I am not wrong, do you suggest to just modify the message, right? To make it friendlier and no other change needed?

Yes I think that works - we can also add formatting -- if you look at the Bootstrap 4 docs for alerts, you can do quite a bit of nice formatting inside them and they are a bit more readable. So we could explore if that helps... but not obligatory!

Cool. I am not so sure of how can I create route and associated template, but I will try and figure it out.

If you'd like to create a PR and link us to it in the chat, I or someone else can help add the parts that are missing if any to get it working. Let's say we'll put the template at /app/views/tags/topic_tree.html.erb and so the tags controller will need an empty:

def topic_tree
end

and then a route needs to be added to /config/routes.rb pointing /topic-tree to the tags controller and the topic_tree method. I might have missed something but I think that'll work!

[KarishmaVanwari]

How about the following text to explain about tags, when the user does not use any tag -

"This note has no tags yet. Public Lab uses uses tags to collect all the relevant work in one place and thus, enable to form topic-based communities. To know more about tags click here. Help connect it to other content by adding descriptive tags below."

I'm not sure if it looks friendly. Awaiting your feedback @jywarren @bhamster07!

[KarishmaVanwari]

Hey @jywarren, if I am not wrong, do you suggest to just modify the message, right? To make it friendlier and no other change needed?

Yes I think that works - we can also add formatting -- if you look at the Bootstrap 4 docs for alerts, you can do quite a bit of nice formatting inside them and they are a bit more readable. So we could explore if that helps... but not obligatory!

Yes, I can do that, great idea @jywarren!

Cool. I am not so sure of how can I create route and associated template, but I will try and figure it out.

If you'd like to create a PR and link us to it in the chat, I or someone else can help add the parts that are missing if any to get it working. Let's say we'll put the template at /app/views/tags/topic_tree.html.erb and so the tags controller will need an empty:

def topic_tree
end

and then a route needs to be added to /config/routes.rb pointing /topic-tree to the tags controller and the topic_tree method. I might have missed something but I think that'll work!

Okay, thanks a lot! I will try it out.

[KarishmaVanwari]

Hey @jywarren, I was successfully able to create the route /topic-tree by following the steps yoh mentioned. Thanks a lot!!

I have tried to create the topic tree using the <details> element and Bootstrap classes for list group. This is how it looks (the content is yet to be populated) -

2022-06-25.23-29-08_Trim.mp4

The tags on clicking will direct to the individual tag page.

Awaiting your feedback on this @jywarren @TildaDares @cesswairimu!
Thanks!

[bhamster07]

How about the following text to explain about tags, when the user does not use any tag -

"This note has no tags yet. Public Lab uses uses tags to collect all the relevant work in one place and thus, enable to form topic-based communities. To know more about tags click here. Help connect it to other content by adding descriptive tags below."

I'm not sure if it looks friendly. Awaiting your feedback @jywarren @bhamster07!

Thanks for coming up with this updated text, @KarishmaVanwari! I think you cover the key points explaining tags really concisely. Building off your text, I had some ideas:

"This note has no tags yet, but you can add some descriptive tags below anytime 🏷️! Tags help to collect related work in one place and connect people around a topic. To learn more about tags click here."

Mainly adding that users can add tags anytime, and changing the wording around topic-based communities a bit (since that term has yet to become well-known on the website, I think). Also an emoji 😃 . What do you think?

[KarishmaVanwari]

"This note has no tags yet, but you can add some descriptive tags below anytime 🏷️! Tags help to collect related work in one place and connect people around a topic. To learn more about tags click here."

Hi @bhamster07, this sounds great!! Also, this looks more user-friendly to me and emoji is a great idea! Thank you !!

[jywarren]

@KarishmaVanwari the topic tree looks super! Shall we move that conversation to a PR if you're ready to open one (or have already?) Thanks!

[KarishmaVanwari]

@KarishmaVanwari the topic tree looks super! Shall we move that conversation to a PR if you're ready to open one (or have already?) Thanks!

Hi @jywarren, thank you!! I've opened a PR #11230.