Enhanced Search Results - Half Grid view for Apparel


  1. "Quick Info" button - may need to be larger / alternately phrased
  2. Left alignment of panel should completely cover underlying text (fixed, watch for this in implementation)
  3. Should consider rounded corners as in "Marketing Panel"
  4. "Polish" on alignment of chrome items
  5. Specs of "Magnifier" behavior
  6. Specs of Nav controls for future enhancements dependent on data feeds


1.  Quick Info

Options shown at right.

Behavior to be determined:

Should the panel spawn on hover or on click?

(Preload and distraction issues on hover, recommend click)

Update 09/05/07

Suggested alternatives for "more info" icon.

  • Present but ghosted by default (as in top row)
  • On mouse Hover, becomes opaque and shows text hint
  • Changes color as "indicator" while panel is displayed.

Clicking anywhere within the thumbnail image will display the panel, the clickthrough to merchant from the thumbnail is eliminated. 

fig 2 



5.  Magnifier Behavior

As shown in second column, third item on existing demo page.   

  1. "Reset" button returns zoom state to original full view. 
  2. "+" zooms in 2x in center of image
  3. "-" zooms out to 50% in center of image
  4. left click on image zooms in, right click zooms out, zoomed image is draggable within window.
  5. small thumbnail shows zoom position in overall image.

6.  Navigation / Information Controls & Behavior

As shown in second column, third item on existing demo page.   

  1. Price and Merchant info shown above image; both link to product on merchant site,
  2. Description and additional info (future versions) shown in transparent panel, bottom-justified directly above navigation tabs; this div hidden by default.  Information div has "x" icon in top right corner to close  panel.
  3. Space for three navigation tabs at bottom; first is "Description."  on click, tab is highlighted and information div is shown. 
  4. Second panel is reserved space for "Size / Color" tab for future versions when this data becomes available.  If this info is available only for certain items, the tab text is disabled and hidden.  .
  5. See It button provides redundant link to merchant site for increased conversions.

    (Not Shown) - There is room beneath a square image in magnification viewport to put a row of small buttons which could indicate alternate images. 

    Another option to think about is to use the third navigation tab with the text "more images" which on click would cycle the alternative images through the magnification viewport.