Sidebar UI changes to disambiguate tags from power tags

[steviepubliclab]

Hello,
Starting a thread here on the role of tags vs. power tags on Public Lab, and how they show up to users.

Background:

We've been working on the tagging infrastructure a good bit on Public Lab recently. Some of the goals of tags on the website are

1. to help people more easily navigate the website,
2. to make it so people can more easily "follow" topical material on the website, and
3. so information is clearly organized by type.

An issue that has surfaced in the UI exploration of our tagging infrastructure people are confused about the difference between tags and power tags - what they each are, what they each do, and how to use them.

About "Tags"- Sorting by Topic:

We have used tags as a way to sort materials by topics. Recently, we've been making a concerted effort to do more work on this - highlighting topics that we're hoping to build followers around, and organizing around words and terms that are ubiquitous and easy to understand.

About "Power Tags" - Sorting by Type

We use power tags as a way to prompt a page to do something specific. Power tags often use a header as the part of the piping to tell the following normal tag to do something specific. For example the power tag "question:foo" prompts that page into the "questions" stream on the website- separate from regular research notes. The power tags "activity:foo" does a similar thing.

The Problems and Suggestions

1. While power tags and regular tags serve two different purposes on Public Lab, they show up for the user in the same place - this has been confusing to users.

• Suggestion A: we separate out power tag system from the topical tagging system
• Suggestion B: we move power tags to a different place on posts which is less prominent than the topical tagging location

2. When you add power tags to a page, such as the "activity:foo" and "question:foo," it only applies the power sorting to the tags you use with the power. For example if someone was to add the following tags to a note: "question:water," "oil-and-gas," "pollution" - the page would only know that the question power is related to "water" and not the following two tags. However, Rarely (or never) is there a situation where something is a "question" about one topic, but a regular "note" about the following topics. However, under our current system in this example, the power would only be applied to the first topic.

Currently, to work this in a successful way (to mark something appropriately as a question), the user must know what power tags are, how they work, and they must remember to mark each "tag" on a post with the correct "power."

• Suggestion C: we allow people to identify the type of material they are creating when they publish. We should ask them to classify this information only once.

Other issues to consider

Some Power tags such as "with:username" and "locked" act in a different way. They are not meant to sort pages by information type, but rather they apply different features to the page.

• Suggestion D: make it so that only certain powertags - the ones that sort information by type apply to all tags
• Suggestion E: All power tags can all show up in the same location, but should be separate from topical tags.

Looking forward to exploring this issue with everyone! Thanks for support in the ideas @ebarry @jywarren and @publiclabmimi

[ebarry]

Here's a link to fully fleshed out proposal to address what's described above as Suggestion 1B:

we move power tags to a different place on posts which is less prominent than the topical tagging location

See this comment on the Draft Style Guide: https://publiclab.org/notes/warren/05-07-2019/introducing-a-draft-style-guide-for-public-lab#c25779

[ebarry]

From the links above, here's a screenshot of current --> proposed:

Does this look good?
UPDATE 2021: contrary to the screenshot, we are not going to change lat:foo and lng:foo tags to latitude:foo and longitude:foo

[jywarren]

I like this. If @steviepubliclab agrees, i can start chopping this up into tasks. Thanks, @ebarry @publiclab-mimi!

[steviepubliclab]

hi!

for the "And these powertags" what does the "and these" mean? Maybe it should just say "powertags"

[jywarren]

Sure, that sounds reasonable. I'll defer to the others on final wording there. Does the overall design look good to go? Thanks!

[jywarren]

And to be clear, when you add new tags, it should figure out if they are powertags or not, and make them appear with the appropriate mini cards; powertags below and topics above:

Is that right?

[steviepubliclab]

that sounds good to me!

[jywarren]

OK, so the overall project parts will be:

• rework the tag listing to separate powertags from normal tags (there are node.power_tags and node.normal_tags methods for this) and display them in 2 separate lists (done)
• rework the individual tag templates from Bootstrap "badges" to "cards", or at least to boxes with rounded corners as shown above; the # of people should be the number of people following with tag.followers.count (i believe)
  • preserve the existing "badge" style for profile tags
  • make "grey" box style for power tags
• ensure "Follow" buttons appear if not followed, only on normal tags, not power tags, and that the "unfollow" appears in the ... menu
• add (+) buttons as shown above, each of which opens the new tag form, but also unhides tags beyond the first 2 (that are shown all the time; the rest are hidden by default)
  • be sure 4 more count is working properly
• rewire the "success" callback for adding new tags via AJAX (a lot in app/assets/javascripts/tagging.js) to use the new tag box style. Here, we could actually send back a rendered HTML partial, OR we could assemble the tag template manually in JavaScript (which is what we do now on line 48 of tagging.js)
• make the tag input form more minimal by removing the "tags" icon from the left and the "map marker" button from the right; we will be prompting people for location in a separate button from now on (there is a PR for this already)

These will probably break some tests, which will have to be refactored to the new version, esp. in test/system/tag_test.rb and test/system/place_tags_test.rb.

[NitinBhasneria]

Can I take this issue please @jywarren @steviepubliclab

[jywarren]

We would LOVE help with this, thank you!!

…

On Tue, Jan 14, 2020 at 4:59 AM Nitin Bhasneria ***@***.***> wrote: Can I take this issue please @jywarren <https://github.com/jywarren> @steviepubliclab <https://github.com/steviepubliclab> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6593?email_source=notifications&email_token=AAAF6J47WCVK5URBT3PPFLTQ5WEI3A5CNFSM4JH7WRX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEI4AFFI#issuecomment-574096021>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J2VKATRGC3IS6XV3S3Q5WEI3ANCNFSM4JH7WRXQ> .

[jywarren]

Working on quite a few more of these in #8684

[jywarren]

Relaying in ideas for discussion -

leaving a label in the popover indicating that it's a powertag and explaining what that is:

Also possibly switching non-powertags to blue and powertags to grey, and @17sushmita suggested possibly an icon to suggest it's a "utility" tag (a cog? Discussion!)

Screenshot of current state:

[ebarry]

Great to see the new "utility grey" styling on the powertag display in the sidebar! Also to have the big blue follow button removed from powertag cards. Thank you for working on this!

[Manasa2850]

I've made couple of changes to disambiguate tags from power tags in the sidebar.
Ref PRs #9972 #9889 #9863 #9822
Please let me know if there are any more improvisations that I can do. I'd love to brainstorm on it.
Thanks!

[jywarren]

Amazing! I think the only remaining things are:

• check that creating new tags generates the new "card" type of display instead of the old "badge" type and that they appear in the correct area (powertag vs. not)
• resolve overflow issue on (?) help icon and long powertag names #10124 overlap of ? icon with tag name
• completely switch all badge type displays to card types