feat: implement header/footer visibility controls for checkout and thankyou pages
- Created LayoutWrapper component to conditionally render header/footer based on route - Created MinimalHeader component (logo only) - Created MinimalFooter component (trust badges + policy links) - Created usePageVisibility hook to get visibility settings per page - Wrapped ClassicLayout with LayoutWrapper for conditional rendering - Header/footer visibility now controlled directly in React SPA - Settings: show/minimal/hide for both header and footer - Background color support for checkout and thankyou pages
This commit is contained in:
Dwindi Ramadhana
533
PRODUCT_PAGE_ANALYSIS_REPORT.md
Normal file
533
PRODUCT_PAGE_ANALYSIS_REPORT.md
Normal file
@@ -0,0 +1,533 @@
|
||||
# Product Page Analysis Report
|
||||
## Learning from Tokopedia & Shopify
|
||||
|
||||
**Date:** November 26, 2025
|
||||
**Sources:** Tokopedia (Marketplace), Shopify (E-commerce), Baymard Institute, Nielsen Norman Group
|
||||
**Purpose:** Validate real-world patterns against UX research
|
||||
|
||||
---
|
||||
|
||||
## 📸 Screenshot Analysis
|
||||
|
||||
### Tokopedia (Screenshots 1, 2, 5)
|
||||
**Type:** Marketplace (Multi-vendor platform)
|
||||
**Product:** Nike Dunk Low Panda Black White
|
||||
|
||||
### Shopify (Screenshots 3, 4, 6)
|
||||
**Type:** E-commerce (Single brand store)
|
||||
**Product:** Modular furniture/shoes
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Pattern Analysis & Research Validation
|
||||
|
||||
### 1. IMAGE GALLERY PATTERNS
|
||||
|
||||
#### 📱 What We Observed:
|
||||
|
||||
**Tokopedia Mobile (Screenshot 1):**
|
||||
- ❌ NO thumbnails visible
|
||||
- ✅ Dot indicators at bottom
|
||||
- ✅ Swipe gesture for navigation
|
||||
- ✅ Image counter (e.g., "1/5")
|
||||
|
||||
**Tokopedia Desktop (Screenshot 2):**
|
||||
- ✅ Thumbnails displayed (5 small images)
|
||||
- ✅ Horizontal thumbnail strip
|
||||
- ✅ Active thumbnail highlighted
|
||||
|
||||
**Shopify Mobile (Screenshot 4):**
|
||||
- ❌ NO thumbnails visible
|
||||
- ✅ Dot indicators
|
||||
- ✅ Minimal navigation
|
||||
|
||||
**Shopify Desktop (Screenshot 3):**
|
||||
- ✅ Small thumbnails on left side
|
||||
- ✅ Vertical thumbnail column
|
||||
- ✅ Minimal design
|
||||
|
||||
---
|
||||
|
||||
#### 🔬 Research Validation:
|
||||
|
||||
**Source:** Baymard Institute - "Always Use Thumbnails to Represent Additional Product Images"
|
||||
|
||||
**Key Finding:**
|
||||
> "76% of mobile sites don't use thumbnails, but they should"
|
||||
|
||||
**Research Says:**
|
||||
|
||||
❌ **DOT INDICATORS ARE PROBLEMATIC:**
|
||||
1. **Hit Area Issues:** "Indicator dots are so small that hit area issues nearly always arise"
|
||||
2. **No Information Scent:** "Users are unable to preview different image types"
|
||||
3. **Accidental Taps:** "Often resulted in accidental taps during testing"
|
||||
4. **Endless Swiping:** "Users often attempt to swipe past the final image, circling endlessly"
|
||||
|
||||
✅ **THUMBNAILS ARE SUPERIOR:**
|
||||
1. **Lower Error Rate:** "Lowest incidence of unintentional taps"
|
||||
2. **Visual Preview:** "Users can quickly decide which images they'd like to see"
|
||||
3. **Larger Hit Area:** "Much easier for users to accurately target"
|
||||
4. **Information Scent:** "Users can preview different image types (In Scale, Accessories, etc.)"
|
||||
|
||||
**Quote:**
|
||||
> "Using thumbnails to represent additional product images resulted in the lowest incidence of unintentional taps and errors compared with other gallery indicators."
|
||||
|
||||
---
|
||||
|
||||
#### 🎯 VERDICT: Tokopedia & Shopify Are WRONG on Mobile
|
||||
|
||||
**Why they do it:** Save screen real estate
|
||||
**Why it's wrong:** Sacrifices usability for aesthetics
|
||||
**What we should do:** Use thumbnails even on mobile
|
||||
|
||||
**Exception:** Shopify's fullscreen lightbox (Screenshot 6) is GOOD
|
||||
- Provides better image inspection
|
||||
- Solves the "need to see details" problem
|
||||
- Should be implemented alongside thumbnails
|
||||
|
||||
---
|
||||
|
||||
### 2. TYPOGRAPHY HIERARCHY
|
||||
|
||||
#### 📱 What We Observed:
|
||||
|
||||
**Tokopedia (Screenshot 2):**
|
||||
```
|
||||
Product Title: ~24px, bold, black
|
||||
Price: ~36px, VERY bold, black
|
||||
"Pilih ukuran sepatu": ~14px, gray (variation label)
|
||||
```
|
||||
|
||||
**Shopify (Screenshot 3):**
|
||||
```
|
||||
Product Title: ~32px, serif, elegant
|
||||
Price: ~20px, regular weight, with strikethrough
|
||||
Star rating: Prominent, above price
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 🔬 Research Validation:
|
||||
|
||||
**Source:** Multiple UX sources on typographic hierarchy
|
||||
|
||||
**Key Principles:**
|
||||
1. **Title is Primary:** Product name establishes context
|
||||
2. **Price is Secondary:** But must be easily scannable
|
||||
3. **Visual Hierarchy ≠ Size Alone:** Weight, color, spacing matter
|
||||
|
||||
**Analysis:**
|
||||
|
||||
**Tokopedia Approach:**
|
||||
- ✅ Title is clear and prominent
|
||||
- ⚠️ Price is LARGER than title (unusual but works for marketplace)
|
||||
- ✅ Clear visual separation
|
||||
|
||||
**Shopify Approach:**
|
||||
- ✅ Title is largest element (traditional hierarchy)
|
||||
- ✅ Price is clear but not overwhelming
|
||||
- ✅ Rating adds social proof at top
|
||||
|
||||
---
|
||||
|
||||
#### 🎯 VERDICT: Both Are Valid, Context Matters
|
||||
|
||||
**Marketplace (Tokopedia):** Price-focused (comparison shopping)
|
||||
**Brand Store (Shopify):** Product-focused (brand storytelling)
|
||||
|
||||
**What we should do:**
|
||||
- **Title:** 28-32px (largest text element)
|
||||
- **Price:** 24-28px (prominent but not overwhelming)
|
||||
- **Use weight & color** for emphasis, not just size
|
||||
- **Our current 48-60px price is TOO BIG** ❌
|
||||
|
||||
---
|
||||
|
||||
### 3. VARIATION SELECTORS
|
||||
|
||||
#### 📱 What We Observed:
|
||||
|
||||
**Tokopedia (Screenshot 2):**
|
||||
- ✅ **Pills/Buttons** for size selection
|
||||
- ✅ All options visible at once
|
||||
- ✅ Active state clearly indicated (green border)
|
||||
- ✅ No dropdown needed
|
||||
- ✅ Quick visual scanning
|
||||
|
||||
**Shopify (Screenshot 6):**
|
||||
- ✅ **Pills for color** (visual swatches)
|
||||
- ✅ **Buttons for size** (text labels)
|
||||
- ✅ All visible, no dropdown
|
||||
- ✅ Clear active states
|
||||
|
||||
---
|
||||
|
||||
#### 🔬 Research Validation:
|
||||
|
||||
**Source:** Nielsen Norman Group - "Design Guidelines for Selling Products with Multiple Variants"
|
||||
|
||||
**Key Finding:**
|
||||
> "Variations for single products should be easily discoverable"
|
||||
|
||||
**Research Says:**
|
||||
|
||||
✅ **VISUAL SELECTORS (Pills/Swatches) ARE BETTER:**
|
||||
1. **Discoverability:** "Users are accustomed to this approach"
|
||||
2. **No Hidden Options:** All choices visible at once
|
||||
3. **Faster Selection:** No need to open dropdown
|
||||
4. **Better for Mobile:** Larger touch targets
|
||||
|
||||
❌ **DROPDOWNS HIDE INFORMATION:**
|
||||
1. **Extra Click Required:** Must open to see options
|
||||
2. **Poor Mobile UX:** Small hit areas
|
||||
3. **Cognitive Load:** Must remember what's in dropdown
|
||||
|
||||
**Quote:**
|
||||
> "The standard approach for showing color options is to show a swatch for each available color rather than an indicator that more colors exist."
|
||||
|
||||
---
|
||||
|
||||
#### 🎯 VERDICT: Pills/Buttons > Dropdowns
|
||||
|
||||
**Why Tokopedia/Shopify use pills:**
|
||||
- Faster selection
|
||||
- Better mobile UX
|
||||
- All options visible
|
||||
- Larger touch targets
|
||||
|
||||
**What we should do:**
|
||||
- Replace dropdowns with pill buttons
|
||||
- Use color swatches for color variations
|
||||
- Use text buttons for size/other attributes
|
||||
- Keep active state clearly indicated
|
||||
|
||||
---
|
||||
|
||||
### 4. VARIATION IMAGE AUTO-FOCUS
|
||||
|
||||
#### 📱 What We Observed:
|
||||
|
||||
**Tokopedia (Screenshot 2):**
|
||||
- ✅ Variation images in main slider
|
||||
- ✅ When size selected, image auto-focuses
|
||||
- ✅ Thumbnail shows which image is active
|
||||
- ✅ Seamless experience
|
||||
|
||||
**Shopify (Screenshot 6):**
|
||||
- ✅ Color swatches show mini preview
|
||||
- ✅ Clicking swatch changes main image
|
||||
- ✅ Immediate visual feedback
|
||||
|
||||
---
|
||||
|
||||
#### 🔬 Research Validation:
|
||||
|
||||
**Source:** Nielsen Norman Group - "UX Guidelines for Ecommerce Product Pages"
|
||||
|
||||
**Key Finding:**
|
||||
> "Shoppers considering options expected the same information to be available for all variations"
|
||||
|
||||
**Research Says:**
|
||||
|
||||
✅ **AUTO-SWITCHING IS EXPECTED:**
|
||||
1. **User Expectation:** Users expect image to change with variation
|
||||
2. **Reduces Confusion:** Clear which variation they're viewing
|
||||
3. **Better Decision Making:** See exactly what they're buying
|
||||
|
||||
**Implementation:**
|
||||
1. Variation images must be in the main gallery queue
|
||||
2. Auto-scroll/focus to variation image when selected
|
||||
3. Highlight corresponding thumbnail
|
||||
4. Smooth transition (not jarring)
|
||||
|
||||
---
|
||||
|
||||
#### 🎯 VERDICT: We Already Do This (Good!)
|
||||
|
||||
**What we have:** ✅ Auto-switch on variation select
|
||||
**What we need:** ✅ Ensure variation image is in gallery queue
|
||||
**What we need:** ✅ Highlight active thumbnail
|
||||
|
||||
---
|
||||
|
||||
### 5. PRODUCT DESCRIPTION PATTERNS
|
||||
|
||||
#### 📱 What We Observed:
|
||||
|
||||
**Tokopedia Mobile (Screenshot 5 - Drawer):**
|
||||
- ✅ **Folded description** with "Lihat Selengkapnya" (Show More)
|
||||
- ✅ Expands inline (not accordion)
|
||||
- ✅ Full text revealed on click
|
||||
- ⚠️ Uses horizontal tabs for grouping (Deskripsi, Panduan Ukuran, Informasi penting)
|
||||
- ✅ **BUT** tabs merge into single drawer on mobile
|
||||
|
||||
**Tokopedia Desktop (Screenshot 2):**
|
||||
- ✅ Description visible immediately
|
||||
- ✅ "Lihat Selengkapnya" for long text
|
||||
- ✅ Tabs for grouping related info
|
||||
|
||||
**Shopify Desktop (Screenshot 3):**
|
||||
- ✅ **Full description visible** immediately
|
||||
- ✅ No fold, no accordion
|
||||
- ✅ Clean, readable layout
|
||||
- ✅ Generous whitespace
|
||||
|
||||
**Shopify Mobile (Screenshot 4):**
|
||||
- ✅ Description in accordion
|
||||
- ✅ **Auto-expanded on first load**
|
||||
- ✅ Can collapse if needed
|
||||
- ✅ Other sections (Fit & Sizing, Shipping) collapsed
|
||||
|
||||
---
|
||||
|
||||
#### 🔬 Research Validation:
|
||||
|
||||
**Source:** Multiple sources on accordion UX
|
||||
|
||||
**Key Findings:**
|
||||
|
||||
**Show More vs Accordion:**
|
||||
|
||||
✅ **SHOW MORE (Tokopedia):**
|
||||
- **Pro:** Simpler interaction (one click)
|
||||
- **Pro:** Content stays in flow
|
||||
- **Pro:** Good for single long text
|
||||
- **Con:** Page becomes very long
|
||||
|
||||
✅ **ACCORDION (Shopify):**
|
||||
- **Pro:** Organized sections
|
||||
- **Pro:** User controls what to see
|
||||
- **Pro:** Saves space
|
||||
- **Con:** Can hide important content
|
||||
|
||||
**Best Practice:**
|
||||
> "Auto-expand the most important section (description) on first load"
|
||||
|
||||
---
|
||||
|
||||
#### 🎯 VERDICT: Hybrid Approach is Best
|
||||
|
||||
**For Description:**
|
||||
- ✅ Auto-expanded accordion (Shopify approach)
|
||||
- ✅ Or "Show More" for very long text (Tokopedia approach)
|
||||
- ❌ NOT collapsed by default
|
||||
|
||||
**For Other Sections:**
|
||||
- ✅ Collapsed accordions (Specifications, Shipping, Reviews)
|
||||
- ✅ Clear labels
|
||||
- ✅ Easy to expand
|
||||
|
||||
**About Tabs:**
|
||||
- ⚠️ Tokopedia uses tabs but merges to drawer on mobile (smart!)
|
||||
- ✅ Tabs can work for GROUPING (not primary content)
|
||||
- ✅ Must be responsive (drawer on mobile)
|
||||
|
||||
**What we should do:**
|
||||
- Keep vertical accordions
|
||||
- **Auto-expand description** on load
|
||||
- Keep other sections collapsed
|
||||
- Consider tabs for grouping (if needed later)
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Additional Lessons (Not Explicitly Mentioned)
|
||||
|
||||
### 6. SOCIAL PROOF PLACEMENT
|
||||
|
||||
**Tokopedia (Screenshot 2):**
|
||||
- ✅ **Rating at top** (5.0, 5.0/5.0, 5 ratings)
|
||||
- ✅ **Seller info** with rating (5.0/5.0, 2.3k followers)
|
||||
- ✅ **"99% pembeli merasa puas"** (99% buyers satisfied)
|
||||
- ✅ **Customer photos** section
|
||||
|
||||
**Shopify (Screenshot 6):**
|
||||
- ✅ **5-star rating** at top
|
||||
- ✅ **"5-star reviews"** section at bottom
|
||||
- ✅ **Review carousel** with quotes
|
||||
|
||||
**Lesson:**
|
||||
- Social proof should be near the top (not just bottom)
|
||||
- Multiple touchpoints (top, middle, bottom)
|
||||
- Visual elements (stars, photos) > text
|
||||
|
||||
---
|
||||
|
||||
### 7. TRUST BADGES & SHIPPING INFO
|
||||
|
||||
**Tokopedia (Screenshot 2):**
|
||||
- ✅ **Shipping info** very prominent (Ongkir Rp22.000, Estimasi 29 Nov)
|
||||
- ✅ **Seller location** (Kota Surabaya)
|
||||
- ✅ **Return policy** mentioned
|
||||
|
||||
**Shopify (Screenshot 6):**
|
||||
- ✅ **"Find Your Shoe Size"** tool (value-add)
|
||||
- ✅ **Size guide** link
|
||||
- ✅ **Fit & Sizing** accordion
|
||||
- ✅ **Shipping & Returns** accordion
|
||||
|
||||
**Lesson:**
|
||||
- Shipping info should be prominent (not hidden)
|
||||
- Estimated delivery date > generic "free shipping"
|
||||
- Size guides are important for apparel
|
||||
- Returns policy should be easy to find
|
||||
|
||||
---
|
||||
|
||||
### 8. MOBILE-FIRST DESIGN
|
||||
|
||||
**Tokopedia Mobile (Screenshot 1):**
|
||||
- ✅ **Sticky bottom bar** with price + "Beli Langsung" (Buy Now)
|
||||
- ✅ **Floating action** always visible
|
||||
- ✅ **Quantity selector** in sticky bar
|
||||
- ✅ **One-tap purchase**
|
||||
|
||||
**Shopify Mobile (Screenshot 4):**
|
||||
- ✅ **Large touch targets** for all buttons
|
||||
- ✅ **Generous spacing** between elements
|
||||
- ✅ **Readable text** sizes
|
||||
- ✅ **Collapsible sections** save space
|
||||
|
||||
**Lesson:**
|
||||
- Consider sticky bottom bar for mobile
|
||||
- Large, thumb-friendly buttons
|
||||
- Reduce friction (fewer taps to purchase)
|
||||
- Progressive disclosure (accordions)
|
||||
|
||||
---
|
||||
|
||||
### 9. BREADCRUMB & NAVIGATION
|
||||
|
||||
**Tokopedia (Screenshot 2):**
|
||||
- ✅ **Full breadcrumb** (Sepatu Wanita > Sneakers Wanita > Nike Dunk Low)
|
||||
- ✅ **Category context** clear
|
||||
- ✅ **Easy to navigate back**
|
||||
|
||||
**Shopify (Screenshot 3):**
|
||||
- ✅ **Minimal breadcrumb** (just back arrow)
|
||||
- ✅ **Clean, uncluttered**
|
||||
- ✅ **Brand-focused** (less category emphasis)
|
||||
|
||||
**Lesson:**
|
||||
- Marketplace needs detailed breadcrumbs (comparison shopping)
|
||||
- Brand stores can be minimal (focused experience)
|
||||
- We should have clear breadcrumbs (we do ✅)
|
||||
|
||||
---
|
||||
|
||||
### 10. QUANTITY SELECTOR PLACEMENT
|
||||
|
||||
**Tokopedia (Screenshot 2):**
|
||||
- ✅ **Quantity in sticky bar** (mobile)
|
||||
- ✅ **Next to size selector** (desktop)
|
||||
- ✅ **Simple +/- buttons**
|
||||
|
||||
**Shopify (Screenshot 6):**
|
||||
- ✅ **Quantity above Add to Cart**
|
||||
- ✅ **Large +/- buttons**
|
||||
- ✅ **Clear visual hierarchy**
|
||||
|
||||
**Lesson:**
|
||||
- Quantity should be near Add to Cart
|
||||
- Large, easy-to-tap buttons
|
||||
- Clear visual feedback
|
||||
- We have this ✅
|
||||
|
||||
---
|
||||
|
||||
## 📊 Summary: What We Learned
|
||||
|
||||
### ✅ VALIDATED (We Should Keep/Add)
|
||||
|
||||
1. **Thumbnails on Mobile** - Research says dots are bad, thumbnails are better
|
||||
2. **Auto-Expand Description** - Don't hide primary content
|
||||
3. **Variation Pills** - Better than dropdowns for UX
|
||||
4. **Auto-Focus Variation Image** - We already do this ✅
|
||||
5. **Social Proof at Top** - Not just at bottom
|
||||
6. **Prominent Shipping Info** - Near buy section
|
||||
7. **Sticky Bottom Bar (Mobile)** - Consider for mobile
|
||||
8. **Fullscreen Lightbox** - For better image inspection
|
||||
|
||||
---
|
||||
|
||||
### ❌ NEEDS CORRECTION (We Got Wrong)
|
||||
|
||||
1. **Price Size** - Our 48-60px is too big, should be 24-28px
|
||||
2. **Title Hierarchy** - Title should be primary, not price
|
||||
3. **Dropdown Variations** - Should be pills/buttons
|
||||
4. **Description Collapsed** - Should be auto-expanded
|
||||
5. **No Thumbnails on Mobile** - We need them (research-backed)
|
||||
|
||||
---
|
||||
|
||||
### ⚠️ CONTEXT-DEPENDENT (Depends on Use Case)
|
||||
|
||||
1. **Horizontal Tabs** - Can work for grouping (not primary content)
|
||||
2. **Price Prominence** - Marketplace vs Brand Store
|
||||
3. **Breadcrumb Detail** - Marketplace vs Brand Store
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Action Items (Priority Order)
|
||||
|
||||
### HIGH PRIORITY:
|
||||
|
||||
1. **Add thumbnails to mobile gallery** (research-backed)
|
||||
2. **Replace dropdown variations with pills/buttons** (better UX)
|
||||
3. **Auto-expand description accordion** (don't hide primary content)
|
||||
4. **Reduce price font size** (24-28px, not 48-60px)
|
||||
5. **Add fullscreen lightbox** for image zoom
|
||||
|
||||
### MEDIUM PRIORITY:
|
||||
|
||||
6. **Add social proof near top** (rating, reviews count)
|
||||
7. **Make shipping info more prominent** (estimated delivery)
|
||||
8. **Consider sticky bottom bar** for mobile
|
||||
9. **Add size guide** (if applicable)
|
||||
|
||||
### LOW PRIORITY:
|
||||
|
||||
10. **Review tabs vs accordions** for grouping
|
||||
11. **Add customer photo gallery** (if reviews exist)
|
||||
12. **Consider "Find Your Size" tool** (for apparel)
|
||||
|
||||
---
|
||||
|
||||
## 📚 Research Sources
|
||||
|
||||
1. **Baymard Institute** - "Always Use Thumbnails to Represent Additional Product Images (76% of Mobile Sites Don't)"
|
||||
- URL: https://baymard.com/blog/always-use-thumbnails-additional-images
|
||||
- Key: Thumbnails > Dots for mobile
|
||||
|
||||
2. **Nielsen Norman Group** - "Design Guidelines for Selling Products with Multiple Variants"
|
||||
- URL: https://www.nngroup.com/articles/products-with-multiple-variants/
|
||||
- Key: Visual selectors > Dropdowns
|
||||
|
||||
3. **Nielsen Norman Group** - "UX Guidelines for Ecommerce Product Pages"
|
||||
- URL: https://www.nngroup.com/articles/ecommerce-product-pages/
|
||||
- Key: Answer questions, enable comparison, show reviews
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Key Takeaway
|
||||
|
||||
**Tokopedia and Shopify are NOT perfect.**
|
||||
|
||||
They make trade-offs:
|
||||
- Tokopedia: Saves space with dots (but research says it's wrong)
|
||||
- Shopify: Minimal thumbnails (but research says more is better)
|
||||
|
||||
**We should follow RESEARCH, not just copy big players.**
|
||||
|
||||
The research is clear:
|
||||
- ✅ Thumbnails > Dots (even on mobile)
|
||||
- ✅ Pills > Dropdowns (for variations)
|
||||
- ✅ Auto-expand > Collapsed (for description)
|
||||
- ✅ Title > Price (in hierarchy)
|
||||
|
||||
**Our goal:** Build the BEST product page, not just copy others.
|
||||
|
||||
---
|
||||
|
||||
**Status:** ✅ Analysis Complete
|
||||
**Next Step:** Implement validated patterns
|
||||
**Confidence:** HIGH (research-backed)
|
||||
Reference in New Issue
Block a user