Epinions 2.0 working styleguide

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

Taxonomy T1-A

Multiple column display for displaying taxonomy and member advice navigation. Can contain multiple sections - basic taxonomy, related , a section dedicated to new areas of a section.
View interaction spec for more details...

Display details for Taxonomy
Row 1 (header)
bgcolor= navigation 2
header text=normal bold
valign = middle
row height = 21

Row 2 (taxonomy)
bgcolor =navigation 3
taxonomy text = normal bold, small text

Row 3 (AD-2)
bgcolor =navigation 3
text = normal bold, small text

Display details for Member advice
Row 1 (header)
bgcolor = member 2
header text=normal bold
valign = middle
row height = 21

Row 2 (taxonomy)
bgcolor =member 3
taxonomy text = normal
forward arrow = "arrow_double_blue.gif" (10x11)

T1-A: Top-level taxonomy for durable

Browse...

Audio Components Complete systems Portable	Video DVD Players VCRs Televisions	Communication Mobile phones Pagers PDAs
Car audio CD Changers Speakers Amplifiers	Photos and optics Digital Cameras Lenses Binoculars	Office machines Copy Machines Fax Machines Multi-Function

Related product or category 2

Homepage Taxonomy HPT

Single column display for displaying taxonomy and search.

Display details for Taxonomy

Row 1 (search)
bgcolor= navigation 3
text=normal bold
img src = "gobutton.gif"

Row2 (header)
bgcolor= navigation 2
header text=normal bold
valign = middle
row height = 21

Row 3-X (taxonomy)
bgcolor =navigation 3
taxonomy text = normal bold, small text

Search Epinions

Read opinions on...

Arts & Entertainment
Books, Movies, Music

Autos & Motorsports
Cars, Boating, Motorcycles�

Business & Technology
Office, Enterprise Technology�

Computers & Internet
Hardware, Software, Games�

Education
Colleges, Law Schools�

Electronics
DVD, Cameras, Mobile Phones�

Food & Drink
Restaurants, Beers, Wines�

Health & Beauty
Nutrition, Skin Care, Fitness�

Home & Garden
Tools, Appliances, Cooking�

Kids & Family
Toys, Strollers, Car Seats�

Personal Finance
Brokers, Banking, Credit�

Pets
Dogs, Cats, Birds, Fish�

Sports & Outdoors
Golf, Cycling, Running�

Travel
Destinations, Cruises, Resorts�

Subcategory navigation TF-A

Subcategory navigation introduces the use of the finder, but also displays a limited number of items in the taxonomy and member topics. All of the elements are enclosed in a box to unify the elements.

The look of the taxonomy differs in the replacement of background color with white.
View interaction spec for more details...

Display details for Finder
Refer to F-A

Details for Subcategory Taxonomy
Row 1(header)
bgcolor= navigation 2
header text = normal bold
valign = middle
row height = 21

Row 2 (taxonomy)
bgcolor = navigation 3
link text = normal text
header text = small text
forward arrow = "arrow_double_blue.gif" (10x11)

Row 3 (AD-2)
bgcolor =navigation 3
text = normal bold, small text

Display details for Member advice
Row 1 (header)
bgcolor= member 2
header text=normal bold
valign = middle
row height = 21

Row 2 (taxonomy)
bgcolor =member 3
taxonomy text = normal bold
forward arrow = "arrow_double_blue.gif" (10x11)

TF-A: Subcategory navigation for durable

Find...

BRAND

PRICE

TYPE

SUBJECTIVE QUANT

View all DVD players

Browse...

TOP GENRES

Aiwa Apex California Audio Labs Denon	Pioneer RCA Samsung Sharp Sonyo
View more

Related product or category 2

Member advice...

Home recording tips
Music education

Promote your music

See member advice

Finder F-A

The finder is the primary way of navigating to products in durables. This appears on subcategory pages along with a reduced taxonomy and on the product listing page.
View interaction spec for more details...

Details for Finder
Box
cellpadding = 3

Row 1 (header)
bgcolor = navigation 2
header text=bold body text
valign = middle
row height = 21

Row 2 (interaction elements)
bgcolor = navigation 3
header text = small uppercase text
horizontal line = "blue_pixel.gif" (160x1), aligned center
forward arrow = "arrow_double_blue.gif" (10 x 11)

F-A: Finder for durable products

Find...

BRAND

PRICE

TYPE

SUBJECTIVE QUANT

View all DVD players

Similar products SP-A

This module allows the user to move horizontally through the product space. It displays the top 5 products in similar or related categories as defined in the drop-down. These items are stack-ranked.
View interaction spec for more details...

Display details for view similar products
Row 1 (header)
bgcolor = navigation 2
header text=bold body text valign = middle

Row 2 (drop down)
row height = 21 pixels
bgcolor = navigation 1
valign = middle

Row 3 (product list)
bgcolor = white
product title = bold body text
Col 1 (nubmers)
numbers = bold body text

Col 2 (product titles)
products = bold body text

Row 5 (Show more)
bgcolor = white
valign = middle
"View..." = bold body text

Top ranked strollers

1.	Fitness First Boogie Deluxe
2.	Alternate product 2
3.	Alternate product 3
4.	Alternate product 4
5.	Alternate product 5

View Century 4-in-1 product line

Most Popular Products Module 1 MPP1

This module displays the 10 most popular products in the current node and allows them to navigate to a product listing of the top 50.

Details for Popular Products module
Box
cellpadding = 3

Row 1 (header)
header text=bold medium text
valign = left

Row 2-x (links)
number text = bold normal text
link text = normal text
forward arrow = "arrow_double_blue.gif" (10 x 11)

MPP1: Most popular products

Most popular products...
1.		Top product 1
2.		Top product 2
3.		Top product 3
4.		Top product 4
5.		Top product 5
6.		Top product 6
7.		Top product 7
8.		Top product 8
9.		Top product 9
10.		Top product 10

See more popular

Most Popular Products Module 2 MPP2

This module allows a user to navigate from one most popular products listing page to another in a different vertical. This is a CM-defined list.

Details for More Popular products
Box
cellpadding = 3

Row 1 (header)
bgcolor = navigation 2
header text=bold body text
valign = middle
row height = 21

Row 2 (interaction elements)
bgcolor = navigation 3
header text = small uppercase text
horizontal line = "blue_pixel.gif" (160x1), aligned center
forward arrow = "arrow_double_blue.gif" (10 x 11)

MPP2: More popular products

Other popular products in...

Autos
Books
Colleges
Health & Beauty
Toys
Home & Garden
Travel
Movies
Music
Pets

LINK STYLES LS

Arrows may be used with links for general navigation.

See cheaper DVD players
See better DVD players
See all DVD players