Improve the design of the Top Tags page

RESOLVED FIXED in 5.2

Status

RESOLVED FIXED
10 years ago
3 years ago

People

(Reporter: neilio, Assigned: neilio)

Tracking

unspecified

Details

(Whiteboard: [design only], URL)

Attachments

(6 attachments)

(Assignee)

Description

10 years ago
I couldn't find a bug to attach this wireframe to, so here's a new bug, and a first kick at a wireframe:

http://snaps.beatnikpad.com/toptagspage-20090827-165249.png

Please add your comments, critiques, kudos, hopes, dreams, and food vouchers below.
Posted image two cents!
I like the idea of improving what exists but when I go to a top tags page I'm expecting to see a lot of tags.  Your mockup looks like it's emphasizing add-ons more than tags - it looks like more add-on links than tag links.  Since I can click on tags to find add-ons listed under them I think we should use the space to stick in more tags.  Popular examples I'm sure everyone already knows about:

http://www.flickr.com/photos/tags/
http://delicious.com/tag

I think this is a space that has a small enough amount of traffic and a focused enough set of visitors that we could do something really cool with it.  Maybe some kind of fancy FF3.5, SVG+JS, etc. to draw cool tag clouds on the fly.  Ideas of cool tag clouds (although I'm sure we could do even better with fancy features): http://www.wordle.net/gallery

---------
Idea I just had - might be stupid!  --> We have a cool looking tag cloud with words angled all over it, and then we have a kind of magnifying lens under the cursor and when you move the cursor it enlarges the words under it and their increase in size jumbles it's neighbors out of the way.  Kind of like scrabble tiles, but with words and they grow/shrink with where your mouse is.  </idea>
(Assignee)

Comment 2

10 years ago
I was consciously trying to move away from the "tag cloud" style design specifically because empirical evidence shows that most average users don't use them / don't understand what they're for, and I'd like to make this page useful for as many as possible.

This design was partially inspired by how delicious does their tags pages:

http://delicious.com/?view=tags

What I was thinking about was, why do people use "top tags" pages?

- to see what's popular
- to explore the web site
- to find stuff they haven't seen before
- to explore and find new stuff within a specific genre or subject

So I figured why not surface up some add-ons for the top 10 most popular tags? Underneath this (which isn't very obvious from the wireframe) we can have a more traditional tag cloud for people who want to see a ton of tags, but I wanted to make the top of the fold more useful to average users who might no full understand what tags are, and might be overwhelmed by a page full of just tags.
I like Neil's view as the default view but a top tags cloud is also good for getting a sense of the overall nature of the add-ons.  Can we have a way to view either this view (as default) and the top tags cloud as an optional alternate view?  We could use a cookie to store this pref.
I like Wil's idea. This is fligtar.
(In reply to comment #4)
> I like Wil's idea. This is fligtar.

Me too
Target Milestone: 5.1 → 5.2
Can we have our cake and eat it too?  I appreciate the desire for a dense tag presentation but I also think there should be an option to show that these tags are tied to add-ons.  I agree that the latest mock isn't tagcentric enough, but how about starting with a cloud and when a tag is clicked, show results from that tag below the cloud.

Wil's idea is ok but it doesn't actually expose more information, the proposal as described just makes tags easier to click when they're moused over, I don't think this is really a problem for most users.  Maybe the mouseover action shows add-ons in that tag with a small histogram show relative frequency of that tag for each add-on.
(Assignee)

Comment 7

10 years ago
How about something like this? We do a standard tag cloud display, and when the user clicks on a tag they get a modal window that shows a list (10, maybe) of the most popular add-ons, with a link off to a search of add-ons tagged with that item to show the full list.

This way, there's still the traditional cloud, but instead of dumping the user on a page with a giant list of add-ons, they can click around and see more add-ons based on what tag is applied.

Another thought is some mechanism that allows for multiple tag selection, to see items that are tagged with specific tags. Is that something we'd like to offer?
What do you think of filling in that sidebar w/ ajax instead of a modal window?
(Assignee)

Comment 9

10 years ago
That would work, assuming We're coolio with taking over the full page width for this content (which makes sense). I can whip up a wireframe of how that could work - look for it early tomorrow.
(Assignee)

Comment 10

10 years ago
Here's a wireframe showing the selected tag with the top add-ons for that tag in the sidebar:

http://snaps.beatnikpad.com/toptags-20090902-164306.png

The tag would become highlighted some way, and potentially there could be a zooming type of animation to draw attention to the sidebar contents.
(Assignee)

Comment 11

10 years ago
Here's a wireframe of what the tag cloud page looks on first load.
(Assignee)

Comment 12

10 years ago
Here's what the page looks like after a tag is clicked on. The tag cloud width shrinks (animated), and then the clicked tag becomes selected and a list of add-ons appears. There is a visual link between the selected tag and the add-ons list to help solidify the connection between the two.

The top 5-10 add-ons with that tag are displayed, and if we want we could paginate results to show more.

One other thing that I think would be cool (not sure how difficult it would be to do) could be support for multiple selections - as tags are clicked on, we could narrow down the add-ons that are displayed. If we did this we'd need a "Clear/Reset" button to reset the selection, but it's a thought.
(Assignee)

Comment 13

10 years ago
Here's a mockup of the top tags page. The flow is the same as I mentioned above:

- User loads the page, sees the tag cloud
- User selects a tag, and the tag cloud width shrinks to half the size of the page. The selected tag stays highlighted and the tag cloud size change is animated to help the user track where the selected tag is. The ghosted curly brace is also present to help the user find the selected tag and also draw a visual connection between it and the results.
- A list of add-ons appears in the right side, using the highlighted add-ons design from the home page to fix the narrower width (search results won't fit here).

Click on the page to cycle through the states - I've included two "selected tag" mockups so you can see how it works with smaller tags.

http://people.mozilla.com/~nlee/mockups/amo/toptags/
- Is the "sort by" drop down appropriate here?
- Will these results be paginated or is it just picking the top 5?
- Does the subscribe link subscribe to the search results for that tag?
- "See more popular add-ons" doesn't fit here I don't think
- the word "plugin" shrunk substantially between screenshots - I assume that's not the design?  Are there any style changes other than highlighting?
(Assignee)

Comment 15

10 years ago
Comments inline, but I should mention that I mostly copied/pasted the front page add-on list display here, just to show how add-ons could look displayed as a list on this page - I still need to tweak it a bit.

> Is the "sort by" drop down appropriate here?

Not sure, but I left it in as a possible way to reorder the results without having to jump over to search.

> Will these results be paginated or is it just picking the top 5?

I'm not sure and left this open for discussion - should we constrain this down to the top 5-10, and jump the user to search with a "show more results" link at the bottom, or should we allow paginiation here? Both have their +/- so I'm curious what you guys think.

- Does the subscribe link subscribe to the search results for that tag?

Sorry, that should be removed - it's a klingon from pulling this from the front page mockup.

- "See more popular add-ons" doesn't fit here I don't think

See above - thought this is where we could put the [More add-ons tagged with "xxx"] link, though.

- the word "plugin" shrunk substantially between screenshots - I assume that's
not the design?  Are there any style changes other than highlighting?

Whoops.

I updated the mockups (same link as above) and also made the first one show 10 add-ons in the list, and the 2nd show 5 with the sort menu for comparison.
(Assignee)

Comment 16

10 years ago
Actually, I moved the updated mocks into a separate folder to avoid caching:

http://people.mozilla.com/~nlee/mockups/amo/toptags-v2/
I liked it better only showing 5 add-ons (or approximately, however tall the tag cloud will be).  Also, I think jumping to a search for tag:____ is better than trying to paginate this.
Does it need to be that detailed of an add-on view?  It seems a bit incongruous to have that content block next to the plainly styled tags.  Also, wondering how this works in a 1024px screen width...
Neil, you there?
(Assignee)

Comment 20

10 years ago
Yup, I have been working on a rejigged design - will post tomorrow.
(Assignee)

Comment 23

10 years ago
Actually, before I spent too much time honing these, I'll post where I'm at now for feedback.

The concise listing is similar to the previous mockup, but with the description removed and the listing tightened up. I also removed the large { indicator so that for wider screens the content shift wouldn't be an issue.

I tried a number of different displays, but none of them really worked for me. We don't display add-on lists on the site using any other design than the "capsule" one here, so creating a brand new add-on list design just for the tags page seemed inconsistent.

One other direction I worked on was to dispense with the add-on list completely, and instead pop up an overlay similar to the "share this" overlay with the top 5 add-ons for that tag listed, a more link that goes to a search results page for that tag, and "close overlay" button. It's different than the wireframe but offered as an alternative that provides some tag-related add-ons without going all the way to display a full list.

Which direction do you like better?

(For what it's worth, I asked around and no one felt that having the add-on list to the right of the tags seemed unusual. I prefer this direction as well.)
I'm up in the air.  I think they both look fine.
Let's go with the second one.  I like the simplicity of the approach.
This bug is too long for implementation too.  Let's split that off for another bug.  If everyone is happy this should be closed and a new one filed.
Whiteboard: [design only]
Thanks Neil.  Implementation is bug 523372
Status: NEW → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → FIXED
Product: addons.mozilla.org → addons.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.