Product Listing Information in TokTok.id`s E-commerce Website

June 8, 2015 by BoldThemes0
ref-1280x661.png

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)

 

Rakuten’s product lists suffer from poor scannability. All product specifications are simply thrown into the product title. For the user to evaluate and compare these products, they will have to mentally break each title down into its various components. Source: Baymard.com

 

Notice how even for less spec-driven verticals, like for watches here seen at Macy’s, a few specs like brand, size and strap material can come across as a large block of text. Not only is this difficult to scan, but it also make it difficult to achieve an appealing list layout (important in visually-driven industries). Source: Baymard.com

 

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;

Notice how product type and name are separated at IKEA, making it much easier to scan both.

 

“ 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

Laneige Product sold at TokTok.id

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

TokTok.id`s CAPITAL Product Names hurt the eyes and to scan all the Title. This should be converted into normal Small/ Big Caps Title.

 

TokTok.id`s same item in several listings

 

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

 

Paket Hemat Minyak Telon Ny. Meneer 100ml 3pcs change to Minyak Telon Ny.Meneer

 

CELANA PANJANG VIOLA PRINT — L ( 4 pcs ) SERI WARNA is way to long and hard to read. My suggestion is we change it to Celana Panjang Viola Print — L

 

My suggestion for this section is: Focus on the brand and Product Title + 1 Attribute. The final title should be like: Fujifilm X-A2 Kit 16–50mm OIS II — Silver

 

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

BoldThemes


Leave a Reply

Your email address will not be published. Required fields are marked *