Update:Remora UI Review/Mockups/Home Page/2007-08-18 revisions/: Difference between revisions

← Older edit

Update:Remora UI Review/Mockups/Home Page/2007-08-18 revisions/ (view source)

Revision as of 18:36, 12 September 2007

3,761 bytes added , 12 September 2007

no edit summary

Madhava

Confirmed users

1,492

edits

@@ Line 1: / Line 1: @@
+== New Version Exits ==
+This is a old version of the designs -- newer versions exist here:
+[[Update:Remora_UI_Review/Mockups/Home_Page/2007-09-12_revisions/]]
 == Flow Overview ==
-Thought-provoking diagram to come.
+[[Image:overview_map.png]]
+== Notes on the mockups ==
+* The purpose of all of the mockups is primarily to demonstrate layout -- colors, branding, and icons are just placeholders
+* By their nature (as slightly higher-fidelity than wireframes), these mockups are a little "cartoony."  Areas, type, and icons are probably larger than they need be in a the real final version, and, because of this, more should fit on the screen in the end
+* [[Image:moreimages.png]] - I've used this icon, in the lower right-hand corner of image thumbnails as a placeholder for some visual indication that more images are available by clicking on the thumbnail
+* [[Image:add_to_firefox.png]]
 == Top level nav ==
@@ Line 17: / Line 32: @@
 == Front Page ==
+Some notes at far right >>
 [[Image:front_page.png]]
+Notes:
+* The existing mozilla.com navbar continues across the top of the screen, but all of the AMO nav is independent and sits within the top-level "Addons" category
+* Search: as noted in the mockup, search is extra prominent on the front page; search is, primarily, how people are going to want to find add-ons.  On other pages, the intent is that the search field along be displayed by default, but that a user can show the more advanced options (which would come up as an overlay) by clicking on an icon to the right of the field -- see a mockup further down this page.
+* At the suggestion of pkim and jslater, the page is more of an add-ons homepage or portal rather than simply a mechanism for getting add-ons;  thus the inclusion of the (still fairly minimal) "What is an add-on" concept description across the top and the "how to get add-ons walkthrough" or "add-ons blog" entry point, depending on whether the user is logged in.
+* The AMO top-level categories are as suggested here: [[Update:Remora_UI_Review/Mockups/Home_Page/categorization_2007-07-10/]]
 == Category Page ==
@@ Line 29: / Line 51: @@
 [[Image:subcategory_page.png]]
+'''What about the overflow page?'''
+Within each of these subcategory pages, there are two basic ways we can deal with the full list of add-ons for the subcategory.  The one shown in the mockup is to present the page simply as a portal, with the subset shown chosen according to some algorithm (some recommended, some popular, etc.) and the user having to click through (see the bottom right hand corner of the page) to see the full list for the subcategory.  The other approach is simply to have all of the add-ons for the category continue on off the bottom of this page, with some pagination.
+Within the first option (have the full list on an overflow page), we can lay out the addons either rows, as we will be for the search results, or as tiles, as we will be for the browsing pages.  My preference is for tiles, as, so long as we intend to include an image for each, the tiles allow for more add-ons on a page.
+[[Image:overflowvariants.png]]
 == Add-on Details Page ==
 [[Image:addon_page.png]]
+Notes:
+* Advance details (ie. things of interest to developers) should be in an expandable area below the reviews.  The area will will be closed by default if the user is not logged in, and, conversely, will be open by default if the user _is_ logged in.
+=== Rating/Reviewing UI flow ===
 [[Image:rating_process.png]]
@@ Line 43: / Line 78: @@
 ** Click on a thumbnail image for a great transition effect: [http://www.panic.com/coda/ http://www.panic.com/coda/]
 ** Slimbox, a Lightbox clone: [http://www.digitalia.be/software/slimbox Slimbox]  Look at the multi-image version
+** [2007/08/08] Apple now has the kind of viewer with thumbnails on a number of their pages.  See here for example: [http://www.apple.com/iwork/pages/#compatible Example page (click on preview at right)]
 Neither of these contains thumbnails of the other images in the set when an image is displayed -- this is something that we'd want to do, though.
+** [2007/08/08] Apple now has the kind of viewer with thumbnails I was thinking of on a number of their pages.  See here for example: [http://www.apple.com/iwork/pages/#compatible Example page (click on preview at right)]
+=== Installation interaction variants ===
+==== If Bundling is possible ====
+[[Image:Addon_install_options.png]]
+==== If Bundling is not possible ====
+[[Image:Upgrade_firefox_revised.png]]
 == Search Results Page ==