624584 - Design new add-on details page

Status: RESOLVED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect, P1)

Description

[Justin Scott [:fligtar]]

Please design an awesome add-on details page that is pleasing to everyone.

I would elaborate but chowse and I have been talking about ideas for months and he knows what's up.

Priorities worksheet: https://spreadsheets.google.com/ccc?key=0Aswo2Bn17-PrdC1qZGtlSDRNMzBsbTBJT29acW5nR0E&hl=en&authkey=CKCAvo0D

Comment 1

[Chris Howse [:chowse]]

Latest draft:

http://people.mozilla.com/~chowse/drop/amo/refresh/v2/02_detail.png

Secondary wires capturing the various states and styles of add-ons will soon follow.

Comment 2

[Chris Howse [:chowse]]

Alternate concept, which moves 'similar add-on' suggestions above the fold:

http://people.mozilla.com/~chowse/drop/amo/refresh/v2/02.2_detail_recommendations.png

Could provide an opportunity to draw in users that visit the site from external links (esp. search engines), as well as improve browsing for existing users.

Also considering a 'welcome bar' for first-time visitors, in the event that their first visit is not through the front page.

Comment 3

[Justin Scott [:fligtar]]

Thanks chowse. I think I like the first concept for a few reasons:

* I much prefer the icon and expanded details listing format for add-ons used at the bottom, and I don't want to go back to lists of add-ons in the sidebar.
* Related Add-ons isn't something we have right now and I don't think it's important enough to do in Q1.
* Screenshots aren't required, and if there's no screenshot block, we run into some big problems with the sidebar content.

A couple comments on the original concept:
* While the giant screenshots will be great if authors provide them, we can't have the giant viewer there for the many add-ons that will look bad until they update their screenshots. I think we'll probably need an alternate, smaller screenshot gallery that is used if the primary screenshot isn't above certain dimensions.

* A couple items are missing, like the link to stats dashboard (if public), view source (if chosen), Meet the Developers / Contributions, compatibility info for both the current app and other apps, 

* Developers should see a box to manage their listing when viewing their own add-on that links to the developer tools pages. We'll probably throw in some additional links there for admins.

* I'd like the primary interaction for viewing EULA/privacy policy and possibly contributions roadblock to move to a lightbox instead of a separate page.

Comment 4

[Justin Scott [:fligtar]]

And yes, I'd love to see the welcome bar as well for first-time visitors that explains what add-ons are.

Comment 5

[Jeff Balogh (:jbalogh)]

* What does Find More Add-ons on the sidebar do? It seems like an odd thing to have there with navigation and search up top already.
* I really like that the user-specific stuff is all together in its own little spot. That could be great for caching.
* Where will the "developer link replied" link show up in the reviews?
* I agree with fligtar about no sidebar add-ons.

<3 chowse.

Comment 6

[Chris Howse [:chowse]]

An updated add-on detail page:

http://people.mozilla.org/~chowse/drop/amo/refresh/v2/02.3_detail_kitchensink.png
http://people.mozilla.org/~chowse/drop/amo/refresh/v2/02.3_detail_kitchensink.pdf

This incorporates some of people's feedback from here and elsewhere, as well as including the myriad number of warnings, states, and developer-centered data that can appear on the detail page. Most of this content will not be visible for most users or add-ons, but it is all here to review.

Comment 7

[Justin Scott [:fligtar]]

chowse, your wireframes launched a thousand browsers.


I like them! Could you clarify what goes into the Other Versions box at the bottom? I see a beta version and... the current version?

Which makes me realize that we lost the version number from the top block, which I think is important enough to be there.

Comment 8

[Chris Howse [:chowse]]

(In reply to comment #7)
> I like them! Could you clarify what goes into the Other Versions box at the
> bottom? I see a beta version and... the current version?

My thinking for the 'Other Versions' block was to highlight other versions of the add-on that would be of most interest to the user, namely:

* A newer-but-unapproved version, such as a beta or RC.
* An older version of the add-on that might still support an older version
  of the browser that the user has.
* The current version of the browser, but with the option of downloading
  versions intended for other OSes.

In this example, the 1st and 3rd options are shown. If calculating these groups is too difficult, I could revert to the "Release Notes" style version data used in the current page, perhaps labeled "Version Info".


> Which makes me realize that we lost the version number from the top block,
> which I think is important enough to be there.

Could you elaborate why? Version info is already included beside the 'About this Add-on' block, and I'm not sure who but the savviest add-on user would be interested in the version number, let alone need to see it at a glance.

Comment 9

[Justin Scott [:fligtar]]

Okay, I like the Other Versions box! We should probably make the reasons/distinctions between those versions clearer though.

On the version number, I think it's not that uncommon for someone to check if they have the latest version of an add-on installed, whether a new version has propagated to the details page, or they read about an add-on version and want to know if that's it or not (this happened to me with Home Dash on Friday). Version is very relevant to the install button, so I think it should be visible somewhere around the install button.

Comment 10

[Potch [:potch]]

Darest I ask... Does this mean death to the install-button popup?

Comment 11

[Lee Tom]

Hi all,
Here's a pass at Details page using Chowse's wireframes via comment 6. There may be holes in my mockup, but it sounds like content details are still being worked out. Similar to the Homepage, I'm sure seeing the page in a skinned context will help move us forward.

http://intothefuzz.com/leetom/Addons/JPG/AMO_details_02.jpg

Comment 12

[John Slater]

Thanks Lee. I'll leave the specific comments up to the AMO team (overall I like this), but mainly want to weigh in with a plug that we start moving towards a resolution for this page.

Comment 13

[Jeff Balogh (:jbalogh)]

1. No Restart and Privacy Policy look like buttons and are competing with the Add to Firefox button. Privacy Policy still would be a link to display the policy so it should look actionable, but I don't know if we have an action for No Restart.
2. I like how pieces that are not the install button have muted colors, but the stars and Contribute should probably be a little more prominent.
3. The arrows and the breadcrumb text feel heavy. Aren't we switching to sans-serif for stuff like that?
4. I prefer where chowse has the slow warning in the wireframe. It feels like an afterthought and not very warning-like in this mock.
5. Is the Beta button going to have color?
6. The search box really feels out of place here without anything sharing the heavy dark blue. Are there plans to lighten up that piece?

Comment 14

[Wil Clouser [:clouserw]]

The wireframes should include "This add-on requires X add-on" notifications which is a new feature but one we've been putting off until this design.

Comment 15

[Chris Howse [:chowse]]

Quick update on the design status: the remaining changes for the detail and landing pages are being done as HTML prototypes. You can find a live version here:

   http://chowse.github.com/amo-redux/detail.html

And track changes here:

   https://github.com/chowse/amo-redux

Hopefully this will aid the transition from mock-ups to code, while making ongoing design changes easier to track (the detail page is quite complex and includes components/states that aren't obvious, so this seems unavoidable).

A few notes about what's different from the last mock-ups:

* Experimenting w/ a page-top navigation for the entire AMO site. This is more
  relevant to the landing page, but have included it here for completeness.
  I'm still discussing the IA w/ the AMO team, so this may be dropped.

* Full-size screenshots do not look possible for this iteration: too many 
  (popular) add-ons use small screenshots, and several include no screenshots
  whatsoever. Reverting back to screenshot thumbnails for the moment.

* Using Trebuchet in navigational/secondary content. This seems to be the
  trend for other Mozilla-themed pages, and avoids the legibility issues of
  using serif type at small sizes. All primary/copy text will still use
  Georgia.

* Many colors changes that weren't evident from the wireframes.


(The prototype will, by default, include every UI element that this page could include. I will be adding some chrome shortly that will let you toggle which elements are visible to get a better sense of how this page will commonly look.)

Comment 16

[Jeff Balogh (:jbalogh)]

(In reply to comment #15)
>    http://chowse.github.com/amo-redux/detail.html

That's really cool. I like where you're taking us.

1. I like the top-level nav.
2. No restart required doesn't look like a positive attribute, and the button section is already feeling full.
3. Are the thumbs supposed to stretch outside the main column?
4. The Other Versions section feels compressed.

Comment 17

[Chris Howse [:chowse]]

(In reply to comment #16)
> 2. No restart required doesn't look like a positive attribute, and the button
> section is already feeling full.

I can try different colors/arrangements for the no-restart decal after completing a few other details, but am preserving the current AMO style for now. As for crowding, a lot of the 'flair' around the install button typically won't be shown (privacy policies aren't too common and incompatibilities shouldn't be frequent).


> 3. Are the thumbs supposed to stretch outside the main column?

Yes. Since many add-ons lack screenshots, we can't include any (necessary) sidebar content in that space, so we'd be left with an empty sidebar and fewer screenshots/row.


> 4. The Other Versions section feels compressed.

It's still missing some necessary CSS. My next update should correct this.

Comment 18

[John Slater]

Thanks Chowse. Very nice to see this coming along so well...can't wait for it to go live.

As you're putting the final polish on everything, I do think there are some things we should do to bring it into greater consistency with mozilla.com:

- axe the hard cut to white at the top
- use Georgia in the sidebar elements
- more consistent search bar treatment 
- make the logo in the header a bit bigger (I think the way Lee had it looked nice)

Sean or Lee may have more in-depth comments, but I think those changes would go a long way towards ensuring greater consistency and all-around awesomeness.

Comment 19

[Wil Clouser [:clouserw]]

> - make the logo in the header a bit bigger

heh

Comment 20

[John Slater]

It's really not a ridiculous request. Something like the size shown here would be perfectly fine: http://intothefuzz.com/leetom/Addons/JPG/AMO_details_02.jpg.

Comment 21

[Chris Howse [:chowse]]

(In reply to comment #18)
> - use Georgia in the sidebar elements

Done.


> - more consistent search bar treatment 

Still a WIP, but will follow the style used in Lee's last mock.


> - axe the hard cut to white at the top
> - make the logo in the header a bit bigger (I think the way Lee had it looked
> nice)

These were done to accommodate the top-level nav. The selected 'section' show up as a tab that connects to the white portion of the page. I've updated the prototype to include an example.

I'm open to other treatments. I considered something in the style of the new MoCo headers (http://mozilla.seanmartell.com/engagement/mocodotcom/header-mocks/), but I'm concerned it might be TOO similar and the difference in navigation might go unnoticed when moving between .com and AMO. Also don't know how such a menu would gel w/ the login/register/other apps links.

Comment 22

[John Slater]

Thanks Chowse, appreciate the edits. Re: the trickiness around the top-level nav, I see how that's tough. 

Lee or Sean, any suggestions?

Comment 23

[Sean Martell]

thoughts:

http://grab.by/grabs/79b4c14bb9519ef4dc9e67fe397b8794.png

Using the same style as the new menu system, a bar strip could be made as the link above.  Current implementation of the menu can be found here:

http://www-trunk.stage.mozilla.com/en-US/firefox/

Comment 24

[Chris Howse [:chowse]]

(In reply to comment #23)
> thoughts:
> 
> http://grab.by/grabs/79b4c14bb9519ef4dc9e67fe397b8794.png

I like it. Here's a quick attempt to integrate it in the detail page:

http://grab.by/8Tnd

Ramblings:

* The glass bar would lend itself to menus, if we had to make the top-nav
  based around add-on types (e.g Extensions could drop down to reveal 
  featured, popular, even categories).

* Search box could become part of this bar, or be placed to the right of it
  w/ it's blue-box-green-button treatment.

* It'd be interesting to see the glass bar beside the add-ons logo, but w/o
  making the logo a lot taller, it won't play nice w/ the MozTab or login
  links. Search would be a problem too, unless we hid it under a menu (boo).

I'll steal some CSS from www-trunk and try to integrate this into one of my next builds.

Comment 25

[John Slater]

+1!!

Comment 26

[Justin Scott [:fligtar]]

I really don't like that version at all. The header has no color.

Comment 27

[Sean Martell]

Very nice adaptation.

To inject a bit more colour, perhaps have the links blue, with the current page grey, as in my mockup.

Also, I'd revisit the search item with a custom field and the green go button.  even more colour reintroduced.

That way we inject a bit more colour back in to even it out.

Comment 28

[Potch [:potch]]

I strongly dislike a large horizontal bar disrupting the whitespace of the header. If it's just me who dislikes this, I'll get over it.

Comment 29

[Sean Martell]

If it were broken into modules, with the custom search style reintroduced, it is far less disrupting: http://grab.by/grabs/f65dec74c5772778792c6dada9672694.png

Comment 30

[John Slater]

I like the solution in comment #29.

Comment 31

[Chris Howse [:chowse]]

Detail page w/ glass nav bars:

http://chowse.github.com/amo-redux/detail.html

Comment 32

[John Slater]

Looking good.

Comment 33

[Chris Howse [:chowse]]

After showing around the glass bar nav to a few people inside and outside, the feedback has been less than positive. While a top-level nav was received well, the large horizontal bars were considered too distracting and made the page feel too busy.

Rather than reintroduce the tab navigation, I've attempted to create a more lightweight menu, as a list of links directly below the page headings. Have a look at them (and be sure to hover over them as well):

http://chowse.github.com/amo-redux/detail.html

I think this strikes a good balance between ease of access and visual clutter, while still retaining the airy Mozilla.com style. If there are no serious objections, this is what I'm standing by for our top-level nav.

Comment 34

[Chris Howse [:chowse]]

Final changes: adding a carousel for screenshots, and a template for modal pop-ups (click on 'View privacy policy' for an example).

http://chowse.github.com/amo-redux/detail.html

There may be several small things that need to be tweaked, but I don't want to let these delay WebDev any further than I already have. I will track any changes that need to be made on the prototype's GitHub:

https://github.com/chowse/amo-redux