Closed Bug 561226 Opened 14 years ago Closed 14 years ago

New designs for collections

Categories

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

Product:
addons.mozilla.org Graveyard
Component:
Collections
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: fligtar, Assigned: chowse)

References

(
URL
)

Details

(Whiteboard: [z]) 

Please create some initial designs for the new collections pages and functionality as described in the Electric Bandwagon spec.

http://docs.google.com/Doc?docid=0Acwo2Bn17-PrZGZudHRobnJfNjVjYnFqMm5kZw&hl=en
Add-on Details and 'Add to Collections/Favorites' buttons:
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Addon_Details.png
Lots of new mock-ups, which should cover all the features described in the spec (as well as a few extras). Here's the rundown:


COLLECTION DIRECTORIES
======================

Collections landing:
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Collection_Landing.png

Collections directory:
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Collection_Directory.png


COLLECTION LISTINGS
===================

Ordinary collection:
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Collection_Listing.png

Persona collection:
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Collection_Listing_Personas.png

Synchronized (unlinked) collection:
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Collection_Listing_Synchronized.png

One-click install collection:
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Collection_Listing_OneClick.png

Multiple add-on install from listing:
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Collection_Listing_MultipleInstall.png


DETAIL PAGES
============

Add-on Detail Page and Add to Collection/Favorite buttons:
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Addon_Details.png

Persona Detail page:
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Persona_Details.png


MANAGING COLLECTIONS
====================

Collection creation:
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Collection_Create.png

Collection editing:
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Collection_Edit.png
If I'm not logged in, what happens when I click "Add to Favorites" or a thumb?
If I've already clicked thumbs-up, what happens when I click it again?
Is it possible to cancel a vote?
The add-on detail pages say "View Statistics".  These just say "Statistics".
Are those stats public?
Won't collections be a mix of extensions and personas?  Why would we have a personas-only view?
The personas detail page looks really noisy to me.
(In reply to comment #3)
> If I'm not logged in, what happens when I click "Add to Favorites" or a thumb?

We should reveal a pop-up that informs the user that they should log in, with the corresponding link to do so. You can see an example of this in the lower-right corner of http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Addon_Details.png . We'll need one for voting as well.


> If I've already clicked thumbs-up, what happens when I click it again?
> Is it possible to cancel a vote?

Right now, it toggles: if you gave a thumbs up before, clicking on it again removes the vote. Not the most intuitive interface. I can try adding a 'Remove vote' action, but space is limited.


> The add-on detail pages say "View Statistics".  These just say "Statistics".

Deliberate, due to limited space.


> Are those stats public?

Not currently. Do we want to make this an option, like with add-ons?


> Won't collections be a mix of extensions and personas?

Yes. However, collections that contain both extensions and Personas (with the exception of synchronized and favorite collection) will likely be the less common case.

There are 2 ways I've considered approaching mixed collections:

1. Display extensions and Personas in a single listing, all with similar styling. You can see an example of a Persona styled like an extension at the bottom of http://people.mozilla.com/~chowse/drop/amo/personas/v1/Persona_Anatomy.png .

2. Display extensions and Personas as separate groups, each with their most appropriate styling. This would work well with collections that contain significantly more of one kind than another (e.g. a collection w/ many Personas, plus 2 Persona-related extensions).


> Why would we have a personas-only view?

Collections of Personas are a very common use case we anticipate after releasing. If a collection contains exclusively Personas, it makes more sense to present it in the style of other Persona listings.


> The personas detail page looks really noisy to me.

No argument here. I'm looking for some ways to make that first block a little less dense.
The "remove" next to favorite seems unnecessary (or is that only on hover?) and do we need to label that Star means favorite?  Maybe we do because our overall UI is heavy and confusing.

+1 on the rounded boxes... it makes the boxes a bit nicer.
(In reply to comment #5)
> The "remove" next to favorite seems unnecessary (or is that only on hover?)

The "Remove" link only appears on hover.


> and do we need to label that Star means favorite?

A star by itself probably isn't indication enough, especially when we use stars for ratings as well. I had proposed a red heart earlier, but this conflicts with contribution iconography.


> Maybe we do because our overall UI is heavy and confusing.

If our options grow much larger (and 3 is already a lot), we might consider removing the labels and laying out the icons horizontally, using tooltips (JS, not title attr) to indicate their purpose.

We could also use other tricks to reduce clutter, such as hiding/fading the icons until the user mouses over the listing, using smaller type, or moving more controls to dropdowns.
These look awesome, chowse!

* I like the new directory pages. Is Featured still the default view when you go to the Collections Directory in your mocks? I think I'm okay if it's not, as long as we add a "featured" designation next to featured collections.

* I think we should take a look at the connection between "Add to Favorites" and becoming a "subscriber". We called them subscribers because favoriters isn't a word, but I'm wondering if we should explore more of a "follower" model, where you can follow collections, collections have x followers, and we show a Recent Activity pane where you can see all the recent activity on the collections you follow.

* I wonder if moving the sidebar from left to right depending on the page (directory vs. listing) is confusing.

* I like the collection metadata section on listing pages, though I think we could move Statistics back to View Statistics and have its own line or to the "More Options" bar. It'll only be shown to people with privileges on the collection anyway.

* There are a number of new features from the spec missing on the details page, like tags, "Other collections by", and cloning

* I like the management/edit page a lot. I think we need to add the slug field, where we show the URL as addons.mozilla.org/collections/{username}/[text field] where the text field is the slug that is automatically generated by the name but can be edited by the user (like WordPress). We should also add this to both collection creation screens, and perhaps ditch the description field from the "quick create" screen.

* Other contributors listed should have the ability to be made the owner or "transfer ownership" to make it clearer that only one person can be the owner. The confirmation should say that the URL will change to be under the new owner's username.

* I think the Application and Collection Type can stay dropdowns -- they should rarely ever be used and one is only for admins.

* If we're going with an alternate view when adding multiple add-ons, maybe we should kill pagination in that view and show all the add-ons. Also, I think the Back to Collection link isn't noticeable enough. Perhaps under the Install Selected button we could have a "Cancel and go back" link?

(In reply to comment #4)
> > Are those stats public?
> 
> Not currently. Do we want to make this an option, like with add-ons?

No, let's leave collection stats private for now.

Overall, I'm really excited about these new designs! Thanks for working on it so quickly.
(In reply to comment #7)
> * Is Featured still the default view when you go to the Collections Directory in your mocks? 

Sorry, I forgot the landing page mock, which answered my question.
Jeff convinced me that we can make collection stats public for everyone. Private collections won't have stats available since only the owner will be able to view the collection anyway.
(In reply to comment #7)
> * I like the new directory pages. Is Featured still the default view when you
> go to the Collections Directory in your mocks? I think I'm okay if it's not, as
> long as we add a "featured" designation next to featured collections.

It should be, if you selected 'Featured' from the menu. In other cases, it would likely be absent. How we present this will really depend on how we manage Featured Collections moving forward-- such as, how many will there be, will they be categorized in any way, etc.?


> * I think we should take a look at the connection between "Add to Favorites"
> and becoming a "subscriber". We called them subscribers because favoriters
> isn't a word, but I'm wondering if we should explore more of a "follower"
> model, where you can follow collections, collections have x followers, and we
> show a Recent Activity pane where you can see all the recent activity on the
> collections you follow.

Agreed, Favorites <-> Subscribers is confusing. Following/followers would also be more consistent. However, I'd only recommend using that terminology if we can implement an actual 'activity feed' for collections. If not, I'd recommend something like 'fan' or 'supporter': that would work if it's just a favoriting mechanism, but still make sense if we added feeds later.


> * I wonder if moving the sidebar from left to right depending on the page
> (directory vs. listing) is confusing.

It's not inconsistent with the rest of AMO. Navigation elements appear on the left, supplemental elements on the right.


> * I like the collection metadata section on listing pages, though I think we
> could move Statistics back to View Statistics and have its own line or to the
> "More Options" bar. It'll only be shown to people with privileges on the
> collection anyway.

Good point. I'll move the expanded text to somewhere with more room.


> * There are a number of new features from the spec missing on the details page,
> like tags, "Other collections by", and cloning

Noted.


> * I like the management/edit page a lot. I think we need to add the slug field,
> where we show the URL as addons.mozilla.org/collections/{username}/[text field]
> where the text field is the slug that is automatically generated by the name
> but can be edited by the user (like WordPress).

Easily done. Any problem with referring to this as a permalink, and making it static unless the user explicitly asks to edit it?


> We should also add this to both
> collection creation screens, and perhaps ditch the description field from the
> "quick create" screen.

I'm fine with this, but don't think we should eliminate the description from the quick create. The form will still be small, the description is clearly optional (I hope), an excluding the description might lead to people supplying overly long titles to compensate.


> * If we're going with an alternate view when adding multiple add-ons, maybe we
> should kill pagination in that view and show all the add-ons.

Fine by me, as long as we can handle the degenerate use case: huge collections.


> Also, I think the
> Back to Collection link isn't noticeable enough. Perhaps under the Install
> Selected button we could have a "Cancel and go back" link?

Hmm, I had this in an earlier design, not sure why I abandoned it. I'll add the 'cancel' link back.


Thanks for all the quick feedback, guys!
(In reply to comment #10)
> Agreed, Favorites <-> Subscribers is confusing. Following/followers would also
> be more consistent. However, I'd only recommend using that terminology if we
> can implement an actual 'activity feed' for collections. If not, I'd recommend
> something like 'fan' or 'supporter': that would work if it's just a favoriting
> mechanism, but still make sense if we added feeds later.

Okay, can you mock up what a Recent Activity feed would look like? I think we'd only need to show add-ons being added and removed from collections that the user follows, not truly every activity like editing a description and whatnot.

> > * I wonder if moving the sidebar from left to right depending on the page
> > (directory vs. listing) is confusing.
> 
> It's not inconsistent with the rest of AMO. Navigation elements appear on the
> left, supplemental elements on the right.

Right, but the supplemental elements get bounced around here. Directory pages have them on the left under navigation and display pages have them on the right.

> > * I like the management/edit page a lot. I think we need to add the slug field,
> > where we show the URL as addons.mozilla.org/collections/{username}/[text field]
> > where the text field is the slug that is automatically generated by the name
> > but can be edited by the user (like WordPress).
> 
> Easily done. Any problem with referring to this as a permalink, and making it
> static unless the user explicitly asks to edit it?

I think we can just call it the collection URL or collection link. I don't know if permalink is a mainstream term, and it's actually not a permalink as it will change if the collection owner changes.
Thanks for the feedback, everyone. I've taken your input and updated nearly every mock-up with your requests and comments.

The largest addition would be some interaction workflows for several of the widgets used throughout AMO:

  http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Interactions.png


Here's a (probably incomplete) summary of what's changed:

  * 'Add to Favorites'/'Favorite'/'Subscribers' in regard to collections has 
    been changed to 'Follow this Collection'/'Following'/'Followers'.

  * Slug editing has been added to anyplace collections can be created or
    edited. It is typically below the 'Name' field and is static by default.

  * I've added the interaction flow for cloning collections, but have not added
    it within the UI yet. More on this below.

  * I've removed the red/green bars from the rating controls; I think this
    makes the interface less cluttered, provides the needed space for a
    'remove' button, and will scale better if collection begin to get large
    numbers of votes. I'm interested in know what people think of this.

  * On Collection Listings, the Collection Statistics link has been moved 
    below the update date and is now labeled 'View Statistics'.

  * I've added the missing sidebar elements (More by Author, Common Tags) to
    the Collection Listing page.

  * I've removed the 'Add-on Collector' promo from Collection Listings, and am
    considering removing 'What are Collections?' if there's any indication that
    the user has any previous experience with them.

  * The 'Back to Collection' link on the Multi-Install page has been moved
    below the Install button, and renamed 'Cancel Multiple Install'.

  * I've added a small, faint marquee to the promo on the Collection Landing
    page. This is purely aesthetic and meant to fill the empty space, and
    should be considered purely optional.


What's left to do:

   * An 'activity feed' page for followed collections.

   * A 'Favorite Add-ons' (and maybe 'Favorite Personas') page. This may just
     be a typical Collection Listing page with a few tweaks.

   * Adding collection cloning to the UI. Where it goes will depend heavily
     on whether you can clone collections made by others.

   * An 'icon strip' of common collection actions, like mentioned in
     comment #6. This is definitely a long-reach feature, but I think it's
     a big shortcoming that you can't favorite/add to collections from
     various directory pages (categories, SERP, etc.).
I really like the changes! Just 2 comments:

* Having "Remove" show up to unfollow a collection sounds odd. What about "Stop Following" or "Unfollow"

* I'm okay with removing the rating bars, though I really liked being able to glance down a page and quickly see which collections are popular and the proportions. It's a lot more difficult to get an at-a-glance view with just the numbers.
Aw man, those bars were an epic experiment with -moz-box.

I prefer the github terminology of Watching a collection instead of Following.  It's an object, not a twitter account.

The note icon doesn't scream NOTE to me.  It looks like a piece of treasure.

I like all the arrows and flow.  Good work chowse.
More mocks:

FOLLOWED COLLECTIONS:
List of collections the user is following,
plus a feed of recent collection activity.
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Followed_Collections.png

FAVORITE ADD-ONS:
A collection of favorited add-ons, presented like a regular collection,
but stripped of some extra UI and w/ a streamlined path for making it
a public collection.
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Favorite_Collection.png

DIRECTORY INTERACTIONS:
Some ideas for how to surface collection actions in various add-on and collection directories (categories, SERP, etc.), without adding too much clutter. Still working on what to do with Personas.
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Interactions_Directories.png


(In reply to comment #14)

> I prefer the github terminology of Watching a collection instead of 
> Following. It's an object, not a twitter account.

I like this one. Perhaps with an eye icon? (http://bit.ly/db3hMV)


> The note icon doesn't scream NOTE to me.  It looks like a piece of treasure.

How about http://bit.ly/ckQAAn or http://bit.ly/cmfncR ?  Or perhaps renaming it something like 'Comment' and using something like http://bit.ly/d9wGNP ?
(In reply to comment #15)
> More mocks:

I like the grayed-out icon borders.  I wonder if we should show them there all the time, but with a low opacity?

> (In reply to comment #14)
> 
> > I prefer the github terminology of Watching a collection instead of 
> > Following. It's an object, not a twitter account.
> 
> I like this one. Perhaps with an eye icon? (http://bit.ly/db3hMV)

Sure.  The github eye is a little less creepy though: http://grab.by/4dyl 
 
> > The note icon doesn't scream NOTE to me.  It looks like a piece of treasure.
> 
> How about http://bit.ly/ckQAAn or http://bit.ly/cmfncR ?  Or perhaps renaming
> it something like 'Comment' and using something like http://bit.ly/d9wGNP ?

Comment sounds good to me.
We're really close to having these designs finished, and I'd like to wrap them up this week so we can implement them soon. Just a couple tweaks left I think:

* I agree that "watching" makes more sense since you would normally "follow" a person. Let's update the mocks with that.

* I'm fine with an eye icon, though I think the note icon looks good.

* I like the directory interactions. Can you remove the alternate options?

* Please remove the alternate options from the Add-on Detail page mock and just leave the ones we'll be using.

* On the landing page, I'd rather not fill the space with a marquee just to fill space. If we think the marquee can be useful I'd be interested, but I think for now we should probably just remove it and make that box shorter.

* What do you think of making Recently Viewed a full-blown sort/filter option along with the other 4, rather than a sidebar box?

Thanks chowse!
Final mock-ups ready!

Wireframes (PNG):
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/

Originals (OmniGraffle):
http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/00_Electric_Bandwagon_Masters.zip


(In reply to comment #17)
> * What do you think of making Recently Viewed a full-blown sort/filter option
> along with the other 4, rather than a sidebar box?

Can you describe the use case for this? My initial impression was that 'Recently Viewed' was peripheral, and worked like an alternate exit path from a listing or directory.
I thought we had decided to go with the star instead of heart for favoriting add-ons?

Also, do you mind updating the directory and landing page mocks to have the watching teminology instead of following?

(In reply to comment #18)
> 
> (In reply to comment #17)
> > * What do you think of making Recently Viewed a full-blown sort/filter option
> > along with the other 4, rather than a sidebar box?
> 
> Can you describe the use case for this? My initial impression was that
> 'Recently Viewed' was peripheral, and worked like an alternate exit path from a
> listing or directory.

Yeah, it was just an idea to free up some sidebar space and still keep the feature. I'm fine with it staying there though.


Thanks!
(In reply to comment #19)
> I thought we had decided to go with the star instead of heart for favoriting
> add-ons?

After reviewing everything, I'm leaning much harder toward a red heart for Favorites. Now that we're including an 'Add to Favorites' button in directories, having a star icon right beneath an add-on's stars/rating seems like a recipe for confusion. By contrast, any place that a heart is being used for both favorites and contributions, they're easily distinguished since 1.) the heart will be red, 2.) there will be descriptive text alongside both, and 3.) they will not be spatially close. I also feel the heart has a stronger connotation to liking something than a star, but YMMV.

That said, if there's a strong case in favor of using the star (perhaps of a different color), I won't debate it. However, changing this across all mock-ups is a pain, so I won't be updating it (everywhere) until the choice is finalized.


> Also, do you mind updating the directory and landing page mocks to have the
> watching teminology instead of following?

Done.


One last question: any decision on whether cloning collections will be limited to collections you own? The current mock-ups assume that any collection can be cloned by an anybody. If this isn't the case, I'd like to downplay that feature in the interface a bit.
Okay, I'm fine with the heart.

(In reply to comment #20)
> One last question: any decision on whether cloning collections will be limited
> to collections you own? The current mock-ups assume that any collection can be
> cloned by an anybody. If this isn't the case, I'd like to downplay that feature
> in the interface a bit.

Still under legal review.
Going ahead and marking this closed. If cloning permissions change, I'll update the mock-ups accordingly.
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
Quick addition: you can find the masters (Omnigraffle wireframes) and design assets (PNG & PSD icons) at the two links below:

http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/00_Electric_Bandwagon_Masters.zip

http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/00_Electric_Bandwagon_Assets.zip
Product: addons.mozilla.org → addons.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.