456131 - [W-1.2] Collections Directory

Status: RESOLVED FIXED

(addons.mozilla.org Graveyard :: Collections, defect, P1)

Description

[Justin Scott [:fligtar]]

From the specs:
    *  The Collection Directory is the central place for discovering and subscribing to feeds. It is also the “home page” for collections and bandwagon in general.
    * The directory lists collections in a paginated format with 10 per page by default.
    * Each collection should show its name, summary, number of add-ons, and number of subscribers, along with a link to view the collection in detail.
    * The directory is sorted by most popular (subscribers) by default, but can also be sorted by newest, most recently updated/published-to, name, and number of add-ons. [open issue – are these all useful?]
    * The directory is searchable on name and summary, and has advanced search options to filter by open/closed collections, collections with a specific add-on in them, and by category.
    * The directory can be browsed by collection category. [open issue – category ideas? ex: default AMO feeds, featured feeds, recommendation feeds (like lifehacker), “top” lists, personal feeds, etc…]
    * Feeds can be “featured” and will have a visual distinction and have priority listing in search and browse results.
    * Collections that have opted out of being listed in the directory shouldn’t be displayed.

Comment 1

[Justin Scott [:fligtar]]

Nominating for 4.0.3 as part of second Bandwagon milestone. This is probably the largest part of the website work and may need to be broken into several parts. Additionally, we don't yet have mockups for this part.

Comment 2

[Michael Morgan [:morgamic]]

We should probably branch for this, yes?  Also, since Neil starts Nov. 3, I'm pushing this to 4.0.4 to give him a chance to get the mockups done.

Comment 3

[Jennifer Morrow [:Boriss] (UX)]

Attachment: Bandwagon workflow v0.1

Comment 4

[Neil Lee [:neilio]]

How many "featured" feeds will we have at any given time? Is this going to be a set number, or will it vary?

Comment 5

[Michael Morgan [:morgamic]]

David, might be a question for you.  I think it will vary, but would like David to chime in.

Comment 6

[David Rolnitzky]

Yeah, it'll likely vary.  For example, I could see us rolling out a half dozen or so in Q1, with probably more rolling out over time (depending on how the initial ones are received/perform).  So the number will likely be driven by past performance, demand for new "featured" feeds, and also seasonality.

Comment 7

[Neil Lee [:neilio]]

Attachment: First stab at collections directory wireframe

Here's the first run at the collections directory. Let me know if I've forgotten any of the requirements - I think I've covered everything listed here.

Comment 8

[Neil Lee [:neilio]]

What information is visible when you view the contents of a collection? Besides the list of add-ons in that collection and the name of the creator do we want to display the rest of that person's profile?

Comment 9

[Wil Clouser [:clouserw]]

Some initial thoughts from the wireframe:

- There is a "featured" and a "recommended" section.  We've had a lot of trouble with these in the past (bugs are still open?).  Do we really want to do that here also?

- The "Name" "# of Add-ons" and "Recently Updated" buttons have a down arrow on them which makes me think a menu will appear when I click on them.  If there is a menu, what's on it?  If not, I think we should remove the arrows.

- The second collection in the "Recommended Collections" section has a "View this collection" button - typo or special case?

- The requirements call for each collection to show a summary on this page but I don't see that in the mockup.

- I don't think sorting by "# of Add-ons" is useful

- The requirements say the directory is searchable but I don't see a way to search here

- How many "Collection Categories" are there going to be?  That list won't be useful if it grows much.

- Are "FLAGGED" and "LOOK!" special cases?

- Is there documentation for what "Tracking" a collection means?

- It looks like "Tracked by 165 people" is a link.  Is that just wireframe or will that actually go somewhere?

Comment 10

[Neil Lee [:neilio]]

Reponses inlined:

> There is a "featured" and a "recommended" section.  We've had a lot of
> trouble with these in the past (bugs are still open?).  Do we really want to do
> that here also?

Justin? (I think)

> The "Name" "# of Add-ons" and "Recently Updated" buttons have a down arrow on
> them which makes me think a menu will appear when I click on them.  If there is
> a menu, what's on it?  If not, I think we should remove the arrows.

Those arrows denote the sort direction (a-z or z-a) ala the Finder's list view column headers.

> The second collection in the "Recommended Collections" section has a "View
> this collection" button - typo or special case?

It's a boo-boo - it should be the same as the others below.

> The requirements call for each collection to show a summary on this page but
> I don't see that in the mockup.

I wasn't sure about this - besides the number of extension in a collection and the number of people that follow it, I wasn't sure what other summary information was available. Can users enter a short description?

> I don't think sorting by "# of Add-ons" is useful

Agreed.

> The requirements say the directory is searchable but I don't see a way to
> search here

Good point - I forgot to include that.

> How many "Collection Categories" are there going to be?  That list won't be
> useful if it grows much.

I don't know, but the selector is a standard select menu so it could potentially handle 7-10 without being too crazy.

> Are "FLAGGED" and "LOOK!" special cases?

These are my cheeky labels just to show that we could add a small "flag" to a featured collection to say something meaningful, like "Updated!" or "New!" or something markety like that.

> Is there documentation for what "Tracking" a collection means?

I'm still not 100% clear on this either, but my understanding is you can somehow subscribe to updates for a collection, so if new extensions are added you would be notified of updates (rss, I think). I'm skeptical how useful this feature is, to be honest.

- It looks like "Tracked by 165 people" is a link.  Is that just wireframe or
will that actually go somewhere?

That is a symlink that also loads the "track this collection" page.

Greate feedback - thanks!

Comment 11

[David Rolnitzky]

Good feedback here.  My comments inline.

(In reply to comment #10)
> Reponses inlined:
> 
> > There is a "featured" and a "recommended" section.  We've had a lot of
> > trouble with these in the past (bugs are still open?).  Do we really want to do
> > that here also?
> 
> Justin? (I think)
> 
> > The "Name" "# of Add-ons" and "Recently Updated" buttons have a down arrow on
> > them which makes me think a menu will appear when I click on them.  If there is
> > a menu, what's on it?  If not, I think we should remove the arrows.
> 
> Those arrows denote the sort direction (a-z or z-a) ala the Finder's list view
> column headers.
> 
> > The second collection in the "Recommended Collections" section has a "View
> > this collection" button - typo or special case?
> 
> It's a boo-boo - it should be the same as the others below.

I actually think "view this" should be represented. There are a couple of calls-to-action for this page.  People should be able to "Track" but also "View" or add.  This is especially true of collections like the Fashion Your Firefox collection (of which we're going to do 3 more for the launch).

> 
> > The requirements call for each collection to show a summary on this page but
> > I don't see that in the mockup.
> 
> I wasn't sure about this - besides the number of extension in a collection and
> the number of people that follow it, I wasn't sure what other summary
> information was available. Can users enter a short description?
> 
> > I don't think sorting by "# of Add-ons" is useful
> 
> Agreed.
> 
> > The requirements say the directory is searchable but I don't see a way to
> > search here
> 
> Good point - I forgot to include that.
> 
> > How many "Collection Categories" are there going to be?  That list won't be
> > useful if it grows much.
> 
> I don't know, but the selector is a standard select menu so it could
> potentially handle 7-10 without being too crazy.

Agree that this layout could be problematic if we get a lot of user generated lists.  Certainly we'll have more than 10.  Should we consider more of a grid layout instead of a long list?  That way we could have the top lists in each category and then a >view all link.  Would also make it easier to highlight certain lists.

> 
> > Are "FLAGGED" and "LOOK!" special cases?
> 
> These are my cheeky labels just to show that we could add a small "flag" to a
> featured collection to say something meaningful, like "Updated!" or "New!" or
> something markety like that.
> 
> > Is there documentation for what "Tracking" a collection means?
> 
> I'm still not 100% clear on this either, but my understanding is you can
> somehow subscribe to updates for a collection, so if new extensions are added
> you would be notified of updates (rss, I think). I'm skeptical how useful this
> feature is, to be honest.

Here again I suggest that we either replace this with "add this collection" or "view this collection" or add to "Track this collection"

> 
> - It looks like "Tracked by 165 people" is a link.  Is that just wireframe or
> will that actually go somewhere?
> 
> That is a symlink that also loads the "track this collection" page.
> 
> Greate feedback - thanks!

Based on our call today, the top row of "Featured" should be some sort of scrolling carousel.

Comment 12

[Justin Scott [:fligtar]]

Sorry for the delay in my feedback on the mockup. It's a great start for a UI that has to convey a lot of different things.

* We'll refer to Featured/Recommended collections as Editor Picks for now, to avoid the confusion.
* Maybe "Tracked by ## people" phrase throughout could be shortened to "### subscribers"?
* The button for each collection should probably be worded more for viewing the collection. The "tracking" aspect takes place from the web view of the collection, but in the directory, all of the links will just be going to the web view.
* I agree with Wil that the arrows in the sorting look like they will expand menus. I understand that they indicate the ascending or descending sort order, but I think it's way too similar to a dropdown box interface.
* Instead of the number of add-ons displayed next to each collection, we should display the collection's short summary/description. Or, perhaps, we can de-emphasize the number of add-ons by putting it on the same line as the number of subscribers, something like "10 add-ons | 234 subscribers"

Comment 13

[Nick Nguyen [:osunick]]

For sorting, since we won't have enough metadata to span the entire page, why don't we try a more columnar format?  We can vary text size and incorporate icons to make them seem less like a search results page, but I think it'd be easier to scan and compare lists.  With the columns we can also sort more intuitively by clicking column headers, or use a single dropdown to specify sort order.

It would also allow us to do some interesting things with download and tracking counts 

for instance show both dls and tracked counts for this week and all time- see attached image of download.com listings for an idea of how this could be done.

Some other missing metadata:
 - Creation Date
 - Date last updated
 - author name (if applicable) or 'anonymous'
 - open (anyone can edit) or closed status
 - summary of list

Also, we should alleviate some of the confusion on the team to apply terminology consistently.  The Bandwagon extension says 'Feeds'.  I like either 'Collections' or 'Lists' as they seem more approachable to mainstream users and avoid comparisons to RSS for more advanced ones.  That way we can avoid things like "RSS feed for this feed"

Comment 14

[Nick Nguyen [:osunick]]

screen cap from download.com: http://skitch.com/osunick/bbdwe/ftp-software-downloads-and-reviews-cnet-downloads

Comment 15

[Nick Nguyen [:osunick]]

PS- I refactored fligtar's spec into something which is hopefully easier to track.

http://docs.google.com/Doc?id=dds6vwb4_13fcmxngfd&invite=fgz9ppb

Content should be identical to the original spec, I hope it helps.

Comment 16

[Nick Nguyen [:osunick]]

For simplicity's sake, maybe we just do three views and avoid calling them categories.  One view would be 'My Collections', then 'Everyone's Collections' and finally 'Editor Picks' which would be the default view for users coming in for the first time.

Comment 17

[Ryan Doherty (:rdoherty)]

* I think for the sorting buttons, they could be links, which will avoid confusing them as drop-downs. Also, not showing the arrows until sorting is applied could help too.
* Adding lots of buttons/links that say 'View this' or 'Add this' are bad for screen readers. The links have no meaning. We should just link the collection names to the detailed view that lists the addons in the collection.
* Do we have a bug for the detailed view for a collection? (#1.15.2 in PRD)
* Are 'Staff Collections' part of the PRD? 
* 'Recently Updated' sounds like a category, not a sorting option. Should it be 'Last Update' or 'Updated'?

Comment 18

[Nick Nguyen [:osunick]]

Ryan- you are right, there is no bug for collection detailed view (which I can find): #473634 is the one

Comment 19

[Nick Nguyen [:osunick]]

If by 'Staff Collections' you mean recommended collections that we can recommend via the admin tools, then yes.

Comment 20

[Justin Scott [:fligtar]]

The wireframe here looks good, but will need a number of changes that were introduced with the new spec. The main difference is that the directory should be broken into 4 tab-like views:
* All Collections
* Editor Picks
* My Collections
* My Subscriptions

The new spec has a lot more detail on each of these areas.

Comment 21

[Neil Lee [:neilio]]

Attachment: New version reflecting spec changes

Okay, here's a new version of the directory wireframe with the changes reflected in the updated spec document.

Comment 22

[Justin Scott [:fligtar]]

Thanks Neil - looks great! Some comments:

* I think we can hide the number of add-ons from the Editor's Picks boxes
* Discussed with Nick, and I think we want to replace the idea of "subscriptions" on the website with "favorites". Favorited collections will become subscriptions in the extension, but on the web, the action is more of a favoriting. So, the button should probably say "Add to Favorites"
* The image associated with each collection is an icon, so I think it will likely be a bit smaller and more square than the preview image looking placeholder shown.
* For the "Get the Extension" button, I think we'll likely need more room to briefly explain the extension and its functionality. I'm thinking it should be moved to the bottom, below the pagination. I'll work on final copy for this, but for now, let's have it say "Keep track of your favorite collections and share add-ons with friends, right from your browser! Try out our Add-ons Companion"

We're selecting a design firm today, so after these minor changes and a quick discussion in the Bandwagon meeting tomorrow, we can hand the mockup over for graphics and design work. Thanks!

Comment 23

[Justin Scott [:fligtar]]

Oh, one other thing: I think having Editor's Picks in two locations is kinda confusing. Let's remove "Editor's Picks" and "more" from above the featured blocks, and we should make sure that the featured blocks are visually distinct enough that people understand that they're highlighted and not just normal collections.

Comment 24

[Ryan Doherty (:rdoherty)]

This looks pretty good, but there are few things I think could change.

* Again, I'm not a big fan of 'View this...' and 'more' links. Extra text and not meaningful for screen readers. We can just link collection titles.
* Why the 'Signed in as Bob' and 'Sign out' links? Don't we already have similar links?
* The editors picks boxes are pretty narrow, I have a feeling once the text '165 Subscribers' and 'Subscribe/Add to Favorites' is localized, it won't fit.

Comment 25

[Neil Lee [:neilio]]

@ryan:

> * Again, I'm not a big fan of 'View this...' and 'more' links.

The main reason I include these is there often is confusion on what a user can click on ot see more information - many users don't even realize that you can click on headings, so they never realize that there is more stuff "behind the curtain".

That's a great point about screenreaders, though; I'm not sure what would be the best compromise here. Thoughts?

> * Why the 'Signed in as Bob' and 'Sign out' links? Don't we already have
similar links?

This is to reflect the existing page - with the exception of the footer (which I'm realizing needs to be redesigned as well) this wireframe is a full page view.

Now that I've typed that, I just realized there is not category selector. Hm.

> * The editors picks boxes are pretty narrow, I have a feeling once the text
'165 Subscribers' and 'Subscribe/Add to Favorites' is localized, it won't fit.

Once I remove the # of add-ons (as Justin mentioned above) would that be enough space?

Comment 26

[Neil Lee [:neilio]]

@justin:

>For the "Get the Extension" button, I think we'll likely need more room to
briefly explain the extension and its functionality. I'm thinking it should be
moved to the bottom, below the pagination. I'll work on final copy for this,
but for now, let's have it say "Keep track of your favorite collections and
share add-ons with friends, right from your browser! Try out our Add-ons
Companion"

My main concern here is that this shouldn't look like an ad or promo, which is one big reason behind it being in the "action row" with the "create" and "search" features.

How about we have a rollover with some extra information? I've added something like this into the revised mockup; let me know what you think.

Comment 27

[Neil Lee [:neilio]]

Attachment: Revised based on feedback

Comment 28

[Justin Scott [:fligtar]]

I think the rollover is fine, although if it's a rollover it shouldn't need the close button. I think we'll want the button to say something other than "Get the Extension", but I'll wait until we brainstorm our final name for the extension tomorrow afternoon to decide what that should be.

Other than that, I think it looks good and about ready for the design firm to take a look at this page. Thanks, Neil.

Comment 29

[David Rolnitzky]

Looking good here.

Not sure if you have a footer wireframe somewhere, but are we going to link to any supporting pages (FAQ, extension product features, etc.) from this directory page via the footer?  Also are we going to give any cross-linking here to add-ons or Firefox beyond possibly in the footer?  There will be users hitting this page that might be a bit new to add-ons, and it would be great to give them more information if they want it.

Comment 30

[Justin Scott [:fligtar]]

I'd like to wait and see what the design firm comes up with for the new global header/footer, and based on the information that is and isn't there, we can add some links where necessary.

Comment 31

[Ryan Doherty (:rdoherty)]

(In reply to comment #25)
> > * The editors picks boxes are pretty narrow, I have a feeling once the text
> '165 Subscribers' and 'Subscribe/Add to Favorites' is localized, it won't fit.
> 
> Once I remove the # of add-ons (as Justin mentioned above) would that be enough
> space?

Yeah, there's enough space now.

Comment 32

[Justin Scott [:fligtar]]

OK, this wireframe is ready to go to Clearleft for prettiness.

Comment 33

[Justin Scott [:fligtar]]

Moving to new M6 milestone. (5/21)

Comment 34

[Wil Clouser [:clouserw]]

Assign to natbat for designs.  Assign to jbalogh after designs are delivered.

Comment 35

[Justin Scott [:fligtar]]

Attachment: final mockup

This is the mockup that Clearleft is currently implementing for this page.

Comment 36

[Justin Scott [:fligtar]]

Attachment: final mockup with lightbox

Lightbox that appears when a collection is added to favorites.

Comment 37

[Wil Clouser [:clouserw]]

Rough CSS is in the header/footer now with bug 490889 - just need to change the layout to amo2009.

Comment 38

[Jeff Balogh (:jbalogh)]

Attachment: first pass at the collections directory

There's a few TODOs left, mostly waiting on other pieces, and there's no lightbox because I didn't remember I needed it until I started uploading the patch.

The <blockquote cite> is from clearleft, do we care about including that?

The pagination bits are r?'d in bug 493327, but I added them here for completeness.  The l10n bits can be moved over automatically with poboy once fligtar ok's them.

Comment 39

[Jeff Balogh (:jbalogh)]

Comment on attachment 378184 [details] [diff] [review]
first pass at the collections directory

r? fligtar for the strings.  Don't worry, you don't have to think too hard about the code.

Comment 40

[Justin Scott [:fligtar]]

Strings look good. A few comments, perhaps related or unrelated to strings:
* 1 subscribers -> 1 subscriber
* Add to Favourites -> Add to Favorites
* Section under What are Collections? change to: "Collections are groups of related add-ons assembled for easy sharing."

Comment 41

[Justin Scott [:fligtar]]

I lied. 1 more thing:
* Please change Recommended to Editor's Picks

Comment 42

[Wil Clouser [:clouserw]]

> The <blockquote cite> is from clearleft, do we care about including that?
I think <blockquote> is important but you can get rid of the cite attribute.

These two strings are plural and should be using n___():
  collections_index_item_info_addons
  collections_index_item_info_subscribers

You've hardcoded the visible collections to 2.  According to the mockup attached it should be 7.

Don't forget slimbox is already a part of AMO and used for our preview images so hopefully it's a really short patch.

Regarding TODOs:

+        /* TODO: preserve get params */
Do we do anything with params here?  If not, I don't care about it.

+        /* TODO: popularity sorting */
It looks like this is already in popular()...?

+/* TODO: license */
Does that just mean put a license in the code for that page?

+                  <!-- TODO: fligtar button vs. star -->
Are we still waiting on clearleft for this?

+  <!-- TODO: per page -->
What's that mean?

Comment 43

[Jeff Balogh (:jbalogh)]

(In reply to comment #42)
> > The <blockquote cite> is from clearleft, do we care about including that?
> I think <blockquote> is important but you can get rid of the cite attribute.

Right, I was trying to refer to cite.

> These two strings are plural and should be using n___():
>   collections_index_item_info_addons
>   collections_index_item_info_subscribers

Ok.

> You've hardcoded the visible collections to 2.  According to the mockup
> attached it should be 7.

Oh yeah, that was to trigger pagination.  Do we really want to only show 7 per-page?

> Don't forget slimbox is already a part of AMO and used for our preview images
> so hopefully it's a really short patch.

Ok.

> Regarding TODOs:
> 
> +        /* TODO: preserve get params */
> Do we do anything with params here?  If not, I don't care about it.

If someone goes to collections?sortby=monthly, they'd be redirected to collections/recommended.  The sorting is blocked by bug 493864, so we're not doing anything with get params at this point.
 
> +        /* TODO: popularity sorting */
> It looks like this is already in popular()...?

This is detailed in bug 493864.

> +/* TODO: license */
> Does that just mean put a license in the code for that page?

Yep, I don't like to look at it.

> +                  <!-- TODO: fligtar button vs. star -->
> Are we still waiting on clearleft for this?

I just checked, it's in the pattern portfolio now.
 
> +  <!-- TODO: per page -->
> What's that mean?

The old paginator lets you toggle how many entries per page, this one doesn't yet because I didn't need it.

Comment 44

[Wil Clouser [:clouserw]]

Comment on attachment 378184 [details] [diff] [review]
first pass at the collections directory

I'm fine with this as an incremental patch then (with the changes above), but it sounds like 493864 is blocking resolving this bug.

Comment 45

[Fred Wenzel [:wenzel]]

Comment on attachment 378184 [details] [diff] [review]
first pass at the collections directory

>+        $tabs = array(
>+            array('href' => 'recommended',
>+                  'text' => ___('collections_index_li_recommended', 'Recommended')),
>+            array('href' => 'popular',
>+                  'text' => ___('collections_index_li_popular', 'Popular')),
>+        );

...

>+          <ul>
>+            <?php foreach ($tabs as $tab): ?>
>+              <?php $class = ($tab['href'] == $selected) ? 'class="selected"' : ''; ?>
>+              <li <?=$class?>>
>+                <a href="<?=$html->url('/collections/'.$tab['href'])?>">
>+                  <?=$tab['text']?>
>+                </a>
>+              </li>
>+            <?php endforeach; ?>
>+          </ul>

You are apparently linking to collections/popular rather than to the anchor collections#popular... Is it intended to make all these specific actions in the controller, or will you switch between the individual tabs with JavaScript (similar to what we do on the collections edit page)?

This is important to me in bug 492653, where I need to point a link to the "My Favorites" tab.

Comment 46

[Jeff Balogh (:jbalogh)]

They're linking to distinct URLs (/collections/favorites in your case).  I'm going for the full page reload at this point since these tabs are more distinct than your management tabs.  #favorites could be an RFE later on, but it will be /favorites in 5.0.6.

Comment 47

[Jeff Balogh (:jbalogh)]

Committed in r25983. Still todo: add/remove from favorites (bug 494040) and subscription tracking (bug 493864).

Comment 48

[Jeff Balogh (:jbalogh)]

No more blockers.