Epinions 2.0 Styleguide: Product elements
This is a working UI spec. Everything in this document is subject to change.

Top-rated products TR1-A  
Multi column display for top products. Appears on top category pages. Categories managers can define which sub-categories to display.
View interaction spec for more details...

Display details for top-recommended products
Module
outer table cellspacing = 1 px
outer table bgcolor = output 2

Row 1 (header)
bgcolor= output 2
header text=normal body text
valign = middle
row height = 21

Row 2 (secondary header)
bgcolor =output 3
header text = small text
number image = "top_ratedv_1.gif" (20 x 20)
Row 3 (products)
photo = basic product photo, vspace = 3
text = normal text
rating = basic star rating 		TR1-A: Top-rated products
Top rated by Epinions.com community | View the worst rated...
in DVDs

Sony DVD Player

$100.00
 
 in Cameras

Sony MVC-FD95

$100.00
 
in Mobile phones

Sanyo SCP-4000

$100.00
 
in PDAs

Handspring Visor

$100.00
Top-rated products TR1-B
Multi column display for top products. Appears on top category pages. Categories managers can define which quants segment products by.
View interaction spec for more details...

Display details for top-recommended products
Same as TR1-A except for Row 4

Row 4 (more)
row height = 30 pixels
valign = middle
align = right
link text = normal text
circular arrow = "arrow_blue_sm.gif" 		TR1-B: Top-rated products
Top rated by Epinions.com community... | View the worst rated...
Under $x00...

Sony DVD Player

$100.00
$x00 to x00...

Pioneer DV-434

$100.00
$x00 to x00...

Pioneer DV-434

$100.00
 
$x00 and up...

Panasonic DVD-L10

$100.00
More DVD players
Product listing PL1-A
Multiple column display for displaying a listing of products. Category managers can specify the quants to display in listing. User can sort columns with a drop down or linked column headers.
View interaction spec for more details...

Display details for Full product listing
Row 1 Header
bgcolor= output 2
header text=normal bold
valign = middle
row height = 21

Row 2 Secondary header
bgcolor =output 3
header text = small text
sort image = "arrow_sort_down.gif" (10 x 11)
Row 3-n listing
text = normal, normal bold
photo = basic product photo, vspace = 6
rating = basic star rating
Check prices button = "checkpricessmaller.gif" (118x21)
horizontal line = "lightgrey_pixel.gif" (1x 100%)

Row n...
row height = 21 pixels
valign = middle
bgcolor = output 2
link text = normal bold
next / previous arrows = "arrow_double_rev_blue.gif" & "arrow_double_blue.gif" (10 x 11)		 PL1-A: Full product listing with ad.
Advertisement provided by the manufacturer.
The new PalmTheater
Panasonic's new Palm Theater brings portable DVD power to and frequent traveller. Read Reviews or find more information at www.panasonic.com  
  184 products found matching X sorted by rating
SORT BY:  Product name Number of discs Type of sound decoder Rating / # of opinions Price

Panasonic DVD-L10

1 Dolby decoder, 5.1 output
Est. Price: $950

Zenith DVD-2200 		5 Dolby decoder
Est. Price: $650
Previous 20 Next 20
Product listing PL1-B
Same details as PL1-B, but it has additional navigation functionality.
View interaction spec for more details...

Display details for Full product listing
Row 1 (header)
bgcolor= output 2
header text=bold body text
valign = middle
row height = 21

Row 2 (alphanumeric navigation)
bgcolor =output 3
header text = small text

Row 3 (secondary header)
bgcolor =output 3
header text = small text
sort image = "arrow_sort_down.gif" (10 x 11)
Row 4-n (product listing)
text = body text, bold body text, small feature
photo = basic product photo, vspace = 6
rating = basic star rating
Check prices button = "checkpricessmaller.gif" (118x21)
horizontal line = "lightgrey_pixel.gif" (1x 100%)

Row n (see more)
row height = 21 pixels
valign = middle
bgcolor = output 2
link text = bold body text
next / previous arrows = "arrow_double_rev_blue.gif" & "arrow_double_blue.gif" (10 x 11)		 PL1-B: Full product listing with ad and additional navigation
Advertisement provided by the manufacturer.
The new X
X's new X brings portable X power to and frequent traveller. Read Reviews or find more information at www.x.com  
  184 products found
JUMP TO: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 - 9
SORT BY:  Artist / album Quant 1 Quant 2 Rating / # of opinions Price


Adderley/Evans
Know What I Mean?

Quant 1 Quant 2
EPINIONS TOP 100

56 opinions


Louis Armstrong
Complete Hot 5'S & Hot 7'S

Quant 1 Quant 2
EPINIONS TOP 100

56 opinions
Previous 20 Next 20
Product listing PL1-C
Same as PL1-A but usually is only a list of 5-10 items and has no paging navigation.
View interaction spec for more details...

Display details for Reduced product listing
Row 1 (header)
bgcolor = output 2
header text=normal bold
valign = middle
row height = 21

Row 2 (secondary header)
bgcolor =output 3
header text = small text
sort image = "arrow_sort_down.gif" (10 x 11)
Row 3-n (product listing)
text = normal, normal bold
Check prices button = "checkpricessmaller.gif" (118x21)
horizontal line = "lightgrey_pixel.gif" (1x 100%)

Row n (see more)
row height = 30 pixels
valign=middle
align=right
link text = normal
circular arrow = "arrow_blue_sm.gif" 		PL1-C: Reduced product listing
 Billboard Top 5
SORT BY:  Artist / album Quant 1 Quant 2 Rating / # of opinions Price
Adderley/Evans
Know What I Mean? 		Sept 12, 2000 Quant 2
Louis Armstrong
Complete Hot 5'S & Hot 7'S 		Sept 12, 2000 Quant 2
See more complete Billboard Top 20
Product listing PL1-D
Same as PL1-A but used to display the 50 most popular products, so there is a "popularity" column that displays the numerical popularity ranking and is sortable. There is also a generic "product information" column to hold quant information since above the schema level there can be products of different types in the list..
View interaction spec for more details...

Display details for Most Popular product listing
Row 1 (header)
bgcolor = output 2
header text=normal bold
valign = middle
row height = 21

Row 2 (secondary header)
bgcolor =output 3
header text = small text
sort image = "arrow_sort_down.gif" (10 x 11)
Row 3-n (product listing)
text = normal, normal bold
Check prices button = "checkpricessmaller.gif" (118x21)
horizontal line = "lightgrey_pixel.gif" (1x 100%)

Row n (see more)
row height = 30 pixels
valign=middle
align=right
link text = normal
circular arrow = "arrow_blue_sm.gif" 		PL1-D: Most popular product listing
Advertisement provided by the manufacturer.
The new PalmTheater
Panasonic's new Palm Theater brings portable DVD power to and frequent traveller. Read Reviews or find more information at www.panasonic.com  
  50 products found sorted by popularity
SORT BY:
Popularity Product name Product Information  Rating / # of opinions Price
1.  

Panasonic DVD-L10

Dolby decoder, 5.1 output
Est. Price: $950
2.  
Zenith DVD-2200 		Dolby decoder
Est. Price: $650
Previous 10 View All Opinions | 1-10 | 11-20 | More Next 10
Recently reviewed product listing PL2-A
Multiple column display for displaying a listing of products recently reviewed. Even though this module is product centered, a brief users opinion is displayed.
Spec not available yet...

Display details for recently reviewed product listing
Row 1 (header)
bgcolor= output 2
header text=normal bold
valign = middle
row height = 21
Row 2-n (product listing)
subhead = small text
product title = normal / normal bold
picture = thumbnail product photo, vspace = 3
colum 2 text = normal / normal bold
rating = basic star rating

Row n (see more)
row height = 30 pixels
valign=middle
align=right
link text = normal bold
circular arrow = "arrow_blue_sm.gif" 		PL2-A: Recently reviewed product listing
Recently reviewed products
In Component players

Fischer R109-E
The best dvd player I've ever seen
by dropin | Jun 18 '00
Pros: Easy to transport, great sound quality through headphones, very versatile
Cons: Unit heats up quite a bit after extended play
See all new reviews in DVD players...
Product Area w/ image P-A

This module includes the product image, rating summary, WTB module and product information.

Set to remainder width of the page. Embedded table set to 400 px for minimum resolution display.
View interaction spec for more details...

Display details for product area
Row 1 (header)
valign = middle
header text=defailt_bold
Col 1(ratings summary product details)
column width = large

row 1 (rating summary)
'OVERALL RATING' = small text
largestarrating.gif
'based on' = small text ('based on...')
horizontal line = "lightgrey_pixel.gif" (100% x 1)

row 2 (rating)
'RATINGS SUMMARY' = small uppercase text

col a, rows 1-5
text = small text, uppercase

col b, rows 1-5
barrating.gif

col c, rows 1-5
rating = small text

'based on...' = small text
opinion # = link

row 3
horizontal line = "lightgrey_pixel.gif" (100% x 1)

row 4 (objective quants)
text = <li>, small text, facts are bold
 sm_bluearrow.gif, 'More Information' = link

 Col 2 (product image)
column width = 240 pixels
valign = middle
align = center
product image= large product photo
'ESTIMATED PRICE' = small text, grey
price = bold
checklatestprices.gif


Col 3 (top ranked)
row 1 (header)
text = bold

row 2 (sort)
dropdownmenu

row 3-8 (top5)
1-5 = bold
text = link

row 1 (product family)
text = bold link

 P-A: Product area w/ image
Century 4-in-1 Travel Solutions Elite Sport Stroller
  
OVERALL RATING

Based on 24 ratings
RATINGS SUMMARY
DURABILITY
  
4.0
EASE OF USE
  
5.0
EASE OF USE
  
5.0
DURABILITY
  
5.0
COMFORT
  
5.0
Based on 13 opinions
  • This is quant: this is fact
  • Quant: Fact fact fact
  • Quant: Fact
    		•  
    ESTIMATED PRICE: $179.99
    		 
       
    Product Area no image P-B
    Same as P-A, but in case of no image, entire right column shifts left, but maintains it's size of 240. P-A: Product area w/ no image
    Century 4-in-1 Travel Solutions Elite Sport Stroller
    OVERALL RATING

    Based on 24 ratings
    RATINGS SUMMARY
    DURABILITY
    		  
    4.0
    EASE OF USE
    		  
    5.0
    EASE OF USE
    		  
    5.0
    DURABILITY
    		  
    5.0
    COMFORT
    		  
    5.0
    Based on 13 opinions
  • This is quant: this is fact
  • Quant: Fact fact fact
  • Quant: Fact
    		•   ESTIMATED PRICE: $179.99
    Product card PC-A
    Module is aligned right at the first line of the opinion.
    View interaction spec for more details...

    Display details for recently reviewed product listing
    Module
    width = 180 px

    Row 1 (product    )
    Col 2 (product image)
    column width = 240 pixels
    valign = middle
    align = center
    product image= large product photo
    'ESTIMATED PRICE' = small text, grey
    price = bold
    checklatestprices.gif

    Row 2 (product rating)
    Rating Summary = feature
    horizontal line = "lightgrey_pixel.gif" (100% x 1)
    'OVERALL RATING' = small uppercase text

    col a, rows 1-5
    text = small text, uppercase

    col b, rows 1-5
    barrating.gif, scale to 90x wide

    col c, rows 1-5
    rating = small text

    'based on...' = small text
    opinion # = link         		PC-A: Reduced product area

    Panasonic DVD-L10
    (13 opinions)

    Est price: $950
    Rating summary
    OVERALL RATING

    SOUND
    		4.0
    PORTABILITY
    		5.0
    BATTERY LIFE
    		4.0
    EASE OF USE
    		5.0
    PICTURE QUALITY
    		5.0
    DURABILITY
    		4.0
    Product card PC-B  

    Same as PC-A but appears only on the read an opinion page. Product image/WTB is flipped and boxed, with pros and cons appearing beneath the subjective ratings..

    Pros/Cons = smallfeature
    text = small text
    Rating summary
    OVERALL RATING

    SOUND
    		4.0
    PORTABILITY
    		5.0
    BATTERY LIFE
    		4.0
    EASE OF USE
    		5.0
    PICTURE QUALITY
    		5.0
    DURABILITY
    		4.0

    Panasonic DVD-L10
    (13 opinions)

    Est price: $950
    Product details PD
    This module contains the remainder of bulleted product detail information, defined by CM.
    View interaction spec for more details...

    Display details for Welcome module
    Row 1 (header)
    bgcolor = output 3
    header text=bold body text
    valign = middle
    row height = 21

    Row 2 (conent)
    product details = list, body text
     manufacturer's link = bold body text    		 PD: Product details
    Product details
    • Deluxe storage features, like oversized basket, mesh side and back storage, plus parent compartment in cup holder offers ample room for your on-the-go needs.
    • Child's tray always stays attached to stroller, pivoting out of the way when not in use.
    • Includes SmartFit infant car seat with adjustable stay-in-car base plus Century's exclusive LevelRight system.
    • Manufacturer's page
     
    Latest module WNM
    This module highlights new products at Epinions. Currently CM defined. Displays only 1 80 x 80 product thumbnail.
    The latest stuff
      Handspring Visor II
    Write an opinion!
    View more new products
    		 
    OTHER PRODUCTS RATING
    Nakamichi CD700 Rate it!
    Sony CCD-TR516 Rate it!
    Kodak Advantix 5800
    Minolta 200mm f/2.8 APO Rate it!
       
    Featured reviewer FR  
    This module combines Featured Reviewer and The Good and Bad aspects of This Just in...
    Featured reviewer


    endora60
    I belong to every race and every religion, and am technically both male and female.

    		  
    The good....
    		...and the bad
    		 

    "A great buy with amazing features. This one's definitely worth the price."
    Read this opinion

    		 
    		 

    Samsung 445-54

    "Save your cash. There's better out there for less."
     Read this opinion