Public Lab Research note


The Tags page mockup - let me know what you think!

by edie_blues | January 09, 2019 20:46 09 Jan 20:46 | #18091 | #18091

Hello again,

This is Eva again, your friendly web designer :)

I've started working on the https://publiclab.org/tags page design, which is a little bit tricky.

The current tags page offers a lot of information. I think it's great that the user has a chance to see all the tags used - although the sorting function isn't working great (I can't get the "# of people subscribed" to work, for example).

After thinking about it hard I approached this page design with two goals:

1. We need to show the users the tags they might be interested in (but they are not following yet)

2. We need to show the user how to tag correctly

I also threw in a "Random" button to show a random tag and a "Hall of Fame", because those stats are always fun to see.

I think that before we can design a more effective /tags page, the tags will have to be sorted, arranged, perhaps grouped into families so that the "Suggested For Me" functionality will also work better (see the mockup below). I think users might also be more mindful of tagging correctly, once everything is in order.

If the tags were to be sorted, I would replace the current central-block (the table) with a table of contents look, featuring tag families.

Below is a mockup of my progress so far.

As always, please let me know your thoughts! :)

Thanks,

Eva

image description


14 Comments

Thanks Eva! As a "wiki gardener," i have been adding overarching category types of tags such as "water-quality" or "air-quality" "sensors". Perhaps these are "buckets"that could become recommended tags in the future?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Sharing some design vocabulary from other sites here - i'm interested in:

  1. how each "item" here is shown in a panel which clearly prompts Follow/Join, and shows some indication of other people in that group
  2. how the categorization is in a column, which we might be able to use for a nested list of the featured tags?

Thanks!

image.png

image.png

image.png

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Here is an idea for tag families co-created by @bsugar and @cfastie:

tagboolean.jpg

Reply to this comment...


@liz, i wonder if that's a good inspiration for a manual grouping of the many "featured" tags currently on the top of the /tags page under fewer top-level categories? They could be organized so as not to overwhelm people, whether as they are or in a vertical sidebar:

image.png

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Yes i think it is good inspiration! How can i parent a bunch of tags to make this happen?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


I actually mean just manually sorting them. Will chat at u in a sec. 

On Thu, Jan 10, 2019 at 3:47 PM \<notifications@publiclab.org> wrote:

Hi! There's been a response to a discussion you're involved in. You can reply to this email or visit this link:

https://publiclab.org/notes/edie_blues/01-09-2019/the-tags-page-mockup-let-me-know-what-you-think#c21692

liz wrote:


Yes i think it is good inspiration! How can i parent a bunch of tags to make this happen?


Look like spam? Mark this as Spam

Reply at: https://publiclab.org/notes/edie_blues/01-09-2019/the-tags-page-mockup-let-me-know-what-you-think#comments

Report abuse to: moderators@publiclab.org

Check out the blog at https://publiclab.org/blog | Love our work? Become a Public Lab Sustaining Member today at https://publiclab.org/donate If this email title has an ID in the format #0000, you can reply with the email you use at PublicLab.org and your response will be posted as a comment on the website.

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


I'm not entirely sure what you mean by manually sorting them, but I think the problem there would be that some tags belong to both categories. There are two pieces to the tag graph, the calculation of tag co-occurrence (and subsequent removal of co-occurrences below a given threshold), and then the community detection. You might be able to get away with just doing co-occurrences. That code would be easy enough to transfer from python to ruby to run every so often. Now that there is a web dev (hi by the way!) you could also just implement the javascript version of tagoverflow and replace the data.

Reply to this comment...


Hi Benjamin!!! Sorry, i wasn't referring to the giant tag graph, but to the list of tags manually selected and featured at https://publiclab.org/tags. I think, similarly, that it could be challenging to categorize them into 5-6 groups, but even if it's not perfect, it'll be better for people visiting the site to not see so many... it's just a bit too many to be easily read through. I think definitely 7 or fewer would be best to aim for. 

On Thu, Jan 10, 2019 at 5:21 PM \<notifications@publiclab.org> wrote:

Hi! There's been a response to a discussion you're involved in. You can reply to this email or visit this link:

https://publiclab.org/notes/edie_blues/01-09-2019/the-tags-page-mockup-let-me-know-what-you-think#c21694

bsugar wrote:


I'm not entirely sure what you mean by manually sorting them, but I think the problem there would be that some tags belong to both categories. There are two pieces to the tag graph, the calculation of tag co-occurrence (and subsequent removal of co-occurrences below a given threshold), and then the community detection. You might be able to get away with just doing co-occurrences. That code would be easy enough to transfer from python to ruby to run every so often. Now that there is a web dev (hi by the way!) you could also just implement the javascript version of tagoverflow and replace the data.


Look like spam? Mark this as Spam

Reply at: https://publiclab.org/notes/edie_blues/01-09-2019/the-tags-page-mockup-let-me-know-what-you-think#comments

Report abuse to: moderators@publiclab.org

Check out the blog at https://publiclab.org/blog | Love our work? Become a Public Lab Sustaining Member today at https://publiclab.org/donate If this email title has an ID in the format #0000, you can reply with the email you use at PublicLab.org and your response will be posted as a comment on the website.

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Okay, so translating the co-occurrences to Ruby will require a bit more code then I thought it would be (see second paragraph). Unfortunately, I can't find any co-occurrence libraries in Ruby (you might have better luck).

However, there are a bunch of recommendation engines available in Ruby which I guess makes more sense given Ruby's popularity as a back end for websites which inevitably include e-commerce. Reccomendify made sense to me right away. What you could do is instead of users purchasing products , you could treat each post as a user who "purchases" tags. There's also Recommendable but it was more opaque to me.

If you want to use the method that was employed to make the graph above minus the making of the graph, you'd have to translate this code and run it in the Ruby version of these commands. You do not need the export2graphml function.

Essentially, you want a file that looks like this. It won't be hard to calculate the counts of the tags individually, but trickier part is counting the co-occurrences. But once you have those figures, calculating observed to expected ratio is easy and detailed here.

Reply to this comment...


Hi, Benjamin! Thanks for all of this! Perhaps we should move it over to https://github.com/publiclab/plots2/issues/1502 where that graph is posted, or to https://publiclab.org/questions/bsugar/01-25-2018/how-was-the-tag-graph-visualization-made -- it's really helpful; i just don't want to get off the topic here which is actually not about coding but about editorially organizing some of these topic names. Thanks a lot, and great to hear from you!

Reply to this comment...


Hi @warren @liz @stevie (and the rest of Public Lab!),

Following our conversation yesterday, I'm adding two new mockups here :)

Let me know what you think.

Kind regards, Eva

Dashboard_02_copy_2.png

Dashboard_02_copy_3.png

Reply to this comment...


Hi, all - i wanted to apologize to Benjamin because I'm really excited about the Ruby-based tag-relatedness research you've added here, and didn't express that or follow up with next steps.

The long-standing project to have a tag visualization is really within reach now, and this makes its future ever more sustainable (since these libraries put to rest the concerns we'd had about how this would scale over time). I think we can go ahead with the manual curation of topics on one track, and bump up the automated detection of tag interrelatedness (and the display of a graph) at the same time. I've cross-copied some of these notes here: https://publiclab.org/questions/bsugar/01-25-2018/how-was-the-tag-graph-visualization-made and also am going to pick up the thread in https://github.com/publiclab/plots2/issues/1502 shortly with a first take at using tagoverflow in conjunction with a live (cached) dataset from PL.org.

Of note to Eva is that we could think about both how a curated set of "featured" tags specifically focused on environmental justice issues might fit into this page, while also looking at how this tag visualization could play a role in presenting inter-related topical activity across the site based on the automated analysis of tag relatedness that @bsugar has made possible.

Thanks, all!

Reply to this comment...


I'd also like to reconnect with the design discussions that are ongoing for other pages, in particular the dashboard. I think some of the latest mockups there could present some possibilities for organizing tags/topics, esp as the dashboard potentially pivots to displaying a list of topics instead of a list of posts:

https://publiclab.org/notes/edie_blues/12-13-2018/public-lab-dashboard-new-design-ideas#c21883

Screen_Shot_2019-02-15_at_6.37.39_PM.png

The map space could be used to display the tags visualization, or some tag trends like leading active tags... Like in Cess' page here:

52889457-0e36c480-3191-11e9-8769-209d665c56c9.png

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


OK! I refactored some of the new "topic card" design and worked up a more complete tags page redesign based on Eva and others' work:

Screen_Shot_2019-03-15_at_12.45.20_PM.png

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Login to comment.