...

Research and Finds can be found on the PLP & Type-Ahead Preliminary Research page.

...

Design

Top-level

• Breadcrumb
• Search-result result 
• Selected refinements
• Sort
• Layout changer

Sidebar

• Refiners
  • Refiners by type
    • Checkbox
    • Swatch
  • Interaction: Store Pickup
  • See all

Product List

• Order of products displayed (store, dc, all)
• List item by type (grid, list, table, etc.)
• Pagination

Product List Items

Variations of product by type, status

...

Layout

The list items can be presented in various layouts. Research indicates that layouts have a significant impact on a user's ability to find relevant products. Grid list items allow for larger photos and are best suited for products where the imagery is a key factor in determinating, while List-style items provide the necessary space to display technical information. While the two main list item layouts we provide is Grid and List, additional views like Table are being explored as to their effectiveness in specific applications (such as when purchasing of multiple sku types is ideal)

Describe and visualize how information is positioned (ex: padding above price on grid, prices and everything below locked together, etc)

Grid View

TBD

List View

TBD

Table View

TBD

Other Views

TBD 

• List Item layout. 
  • Grid View
  • List View
  • Table View
  • Additional Views (Future)
• Information/anatomy
  • Compare
    • Interaction: Display what happens when a user hovers and selects the compare checkbox. What does the list item look like in the selected state? 
  • Status indicators
    • Purchase history, in my list, and in cart
  • Image
    • Dan has talked about altering what is a maximum size
  • Family description
    • May leave this out for now.
  • Refiners
    • Interaction: Swatch cycling. Present what it looks like to select different swatches and alter the contents of the list item. Additionally provide an example of how the whole row expands when one list item's height changes.
    • Interaction: Swatch + more. Display this interaction. What happens when a user hovers and clicks on +more? How do they get out of it? 
  • Title
    • Present variations of product titles according to product type
  • Code
    • Part # vs. Fast #
    • Explain when Fast replaces Part #.
  • Attributes
    • Explain what these are, how many can show, where they come from/who controls them, etc.
    • How they wrap
    • Loyalty is here for now
  • Price
    • Display variations of prices, including commodity 4th decimal place, various UoMs (each, price per) and include one with price description. 
  • Availability
    • Display variations of: in stock in store, not in stock in store, call for availability, pricing + 'not available online...' message, no pricing + 'not available online...' message. And the logged out message.
  • Action
    • Add to Cart
      • Interaction: Present everything from hover to quantity adjustments and variations (or refer to them where they already exist)

...