Update:Remora UI Review/Mockups/Home Page/mockups 2007-06-18/

Putting aside, for the moment, the issues of search/navigation, new categorization, the sandbox/public divide, and the front page, I thought I'd start with the layout for the detail page for a individual add-on. This is of benefit even on its own given that many people, I expect, will be linking directly to one of these pages after learning about an add-on elsewhere.

Some issues worth addressing in the previous design are as follows:

• losing the Install button off the bottom of the page / general prominence of the install button
• low prominence of the reviews
• low prominence of the ability to review or rate (esp. given that we want to push this)
• low prominence of list of similar/suggested add-ons (and perhaps not enough breadth to what a user might be looking for (just similar or also complimentary?)
• no at-a-glance overview of ratings, useful for quick assessment of quality
• additional images available only after clicking through to a secondary page (which also means it's not quickly obvious that others even exist)
• over-prominence of technical details perhaps not of use to typical end-user (version numbers, which versions of firefox it will work with (given that we can detect what the user is using)
• [possibly] excessive banner space

General Page Layout

The following is my first attempt at a redesign. These are all, incidentally, slightly fancy wireframes -- I'm making no suggestions other than layout (ie. not color, branding, typefaces, etc.).

Some things to call out regarding the mockup:

• The grey overview area
  • the short description is the one used here; the long description comes later
  • the numerical ratings for the add-on get rolled up into a high level 1-5 star rating show here; this rating should also be used a level up on the multi-add-ons listing (ie. search results or browsing)
  • version number, perhaps styled not to look like a link, could link further down the page to a version history section (not shown)
  • the install button could light up as soon as the user mouses over any of this top area; a click anywhere in the area could initiate the install if we're *particularly* concerned about users not finding the installer

• "More Images" section
  • all of the images/screenshots associated with the add-on, other than the featured one from the previous section, are shown here in thumbnail -- the result of clicking on one is covered by the next mockup

• "What did you think?" area (top right)
  • Promotes the prominence of the idea of reviewing/rating and, hopefully, the ease of doing so

• "Possibly of Interest" area (lower right) -- clearly not a final name
  • I've started on breaking this down into more than just add-ons from the same category -- it's worth thinking more about what we'd want to show people

Image Viewer

When a user clicks on either the featured image (in the overview/install section) or on any of the thumbnails in the "More Images" section, the image viewer will come up. This is an expansion on the dhtml viewer in use currently (off of the secondary images page). As in the next mockup, the user can go back and forth and view any images he or she wants, and then close the viewer.

For inspiration regarding a cool transition effect, see here: cabel.name: Apple's Next-Generation Themes (click on an image with a magnifying glass on it towards the end of the post)

Install Variants

Given that we can detect what version of Firefox the user is using, there's no need to call out, in terms of a range of version numbers, what versions the add-on will work with. Most users, esp. due to auto-update, have no real sense of what version of Firefox they have. Instead, if the add-on will work, we just let them have it, as in the first mockup; if they need a newer version of Fx in order for the add-on to work, we let them get both in one go (bundling). I'm not sure if the last of the three below is possible (letting them know if they already have it), but it would be a nice to have.