So. Currently I am building an UI/UX for an e-commerce website: Toktok.id. This is the summary article for my learning so that next time I can recall quickly from what I learned from Baymard.com “UX Research: 3 Key Design Principles for Product Listing Information”

List of item that should be included in the Product Listings:

1. Universal Attribute:

• Price ( including price per unit )
• Product Thumbnails
• Product Title/ Type
• Product Variations ( colors, sizes, materials, capacity )
• User Rating, eg:★★★★★ ( 34 reviews )

2. Category – Specific Attribute:

• Unit of measure
• Age Rating
• Screen size
• Storage Capacity

The perfect algorithm to get the best product listing:

Universal Attributes + 1–3 Category Specific Attributes

What should be included in the Product Listing:

1. Comparison through Information Consistency — both in terms of what information is included and the sequence in which it is displayed.
2. Scannability through Separate Entities — avoid embedding specs in titles; instead style attributes as separate entities.
3. Overview through Progressive Disclosure — consider utilizing mouse hover to show additional (secondary) item information and possible a new thumbnail (e.g. different product angle).

Do not mix this element into one loooong title in your product:

• Name
• Product Type
• Number of items/ Materials

More specifically, it’s important that the product information adopt:

1. Same structure, labelling and unit of measure (to increase comparability)
2. The specs are listed in a consistent sequence (to increase scannability)

 

 

 

I have observed that in some of the marketplace in Indonesia like Blibli.com, Lazada.com & Elevania.com that use this formula as their Product Name:

Brand + Product Type + Model/ Product Type + Attribute

But as stated in Baymard.com UX Research:

It’s therefore important that list item information is displayed as separate entities so users can easily distinguish them at a glance, and more easily compare them across products, with the user’s eyes being able to move from one clearly defined product attribute to another.

 

Or we can tweak the UI like this for item that has few attributes;

 

“ If wanting to keep the attributes on the same line they can be separated by either whitespace or font tweaks. ”

 

So, in this case, I believe that Product Listing in TokTok needs to be refined. Based on Indonesia`s people attachments to brands when searching on a product, my solution is using this formula as Product Title:

Brand + Product Type + One Specific Model/ Attribute ( If there is )

 

Study Case

Should be Laneige White Plus Renew Trial Kit

Number of items ( 4 items ) should be put inside the product desc, along with the “Set Perawatan …”

“Dapat 3 pcs” violates the scannability of the product as it described the amount of the product, not the product name

Solution: ( Brand ) Purbasari + ( Product Type ) Paket Perawatan Tubuh Zaitun = Purbasari Paket Perawatan Tubuh Zaitun

Not forgetting to mention that a product name should not consists of CAPITAL LETTER as it hurts the eyes of user to scan all those letters

 

 

The solution for this one is: Eliminate the “New!”, and show the specific attributes ( color & size ) into the listings.

The new Title should be: Branded Mens T- Shirt — White XL

 

 

 

 

We are still developing the new system inside Toktok.id. Current system allows Title and description in the product listing, thus there are limitation that make some of the products are uploaded in separate sizes and color, although they are the same items.

Beware of the labelling & unit of measure. The retail division should make one unified unit of measure, such as:

1. pc/pcs
2. M, L, XL

UI Tweak and improvement will be made step by step. Until then, the retail division and merchandiser should be able to fix the current product name issues.

Hit me on IG/Twitter: miawmiaw and tjoamegawaty and please do comments if you have more insights. I am still learning! ❤

Cheers,

Tjoa