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
517
PRODUCT_PAGE_DECISION_FRAMEWORK.md
Normal file
517
PRODUCT_PAGE_DECISION_FRAMEWORK.md
Normal file
@@ -0,0 +1,517 @@
|
||||
# Product Page Design Decision Framework
|
||||
## Research vs. Convention vs. Context
|
||||
|
||||
**Date:** November 26, 2025
|
||||
**Question:** Should we follow research or follow what big players do?
|
||||
|
||||
---
|
||||
|
||||
## 🤔 The Dilemma
|
||||
|
||||
### The Argument FOR Following Big Players:
|
||||
|
||||
**You're absolutely right:**
|
||||
|
||||
1. **Cognitive Load is Real**
|
||||
- Users have learned Tokopedia/Shopify patterns
|
||||
- "Don't make me think" - users expect familiar patterns
|
||||
- Breaking convention = friction = lost sales
|
||||
|
||||
2. **They Have Data We Don't**
|
||||
- Tokopedia: Millions of transactions
|
||||
- Shopify: Thousands of stores tested
|
||||
- A/B tested to death
|
||||
- Real money on the line
|
||||
|
||||
3. **Convention > Research Sometimes**
|
||||
- Research is general, their data is specific
|
||||
- Research is lab, their data is real-world
|
||||
- Research is Western, their data is local (Indonesia for Tokopedia)
|
||||
|
||||
4. **Mobile Thumbnails Example:**
|
||||
- If 76% of sites don't use thumbnails...
|
||||
- ...then 76% of users are trained to use dots
|
||||
- Breaking this = re-training users
|
||||
|
||||
---
|
||||
|
||||
## 🔬 The Argument FOR Following Research:
|
||||
|
||||
### But Research Has Valid Points:
|
||||
|
||||
1. **Big Players Optimize for THEIR Context**
|
||||
- Tokopedia: Marketplace with millions of products (need speed)
|
||||
- Shopify: Multi-tenant platform (one-size-fits-all)
|
||||
- WooNooW: Custom plugin (we can do better)
|
||||
|
||||
2. **They Optimize for Different Metrics**
|
||||
- Tokopedia: Transaction volume (speed > perfection)
|
||||
- Shopify: Platform adoption (simple > optimal)
|
||||
- WooNooW: Conversion rate (quality > speed)
|
||||
|
||||
3. **Research Finds Universal Truths**
|
||||
- Hit area issues are physics, not preference
|
||||
- Information scent is cognitive science
|
||||
- Accidental taps are measurable errors
|
||||
|
||||
4. **Convention Can Be Wrong**
|
||||
- Just because everyone does it doesn't make it right
|
||||
- "Best practices" evolve
|
||||
- Someone has to lead the change
|
||||
|
||||
---
|
||||
|
||||
## 🎯 The REAL Answer: Context-Driven Decision Making
|
||||
|
||||
### Framework for Each Pattern:
|
||||
|
||||
```
|
||||
FOR EACH DESIGN PATTERN:
|
||||
├─ Is it LEARNED BEHAVIOR? (convention)
|
||||
│ ├─ YES → Follow convention (low friction)
|
||||
│ └─ NO → Follow research (optimize)
|
||||
│
|
||||
├─ Is it CONTEXT-SPECIFIC?
|
||||
│ ├─ Marketplace → Follow Tokopedia
|
||||
│ ├─ Brand Store → Follow Shopify
|
||||
│ └─ Custom Plugin → Follow Research
|
||||
│
|
||||
├─ What's the COST OF FRICTION?
|
||||
│ ├─ HIGH → Follow convention
|
||||
│ └─ LOW → Follow research
|
||||
│
|
||||
└─ Can we GET THE BEST OF BOTH?
|
||||
└─ Hybrid approach
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Pattern-by-Pattern Analysis
|
||||
|
||||
### 1. IMAGE GALLERY THUMBNAILS
|
||||
|
||||
#### Convention (Tokopedia/Shopify):
|
||||
- Mobile: Dots only
|
||||
- Desktop: Thumbnails
|
||||
|
||||
#### Research (Baymard):
|
||||
- Mobile: Thumbnails better
|
||||
- Desktop: Thumbnails essential
|
||||
|
||||
#### Analysis:
|
||||
|
||||
**Is it learned behavior?**
|
||||
- ✅ YES - Users know how to swipe
|
||||
- ✅ YES - Users know dots mean "more images"
|
||||
- ⚠️ BUT - Users also know thumbnails (from desktop)
|
||||
|
||||
**Cost of friction?**
|
||||
- 🟡 MEDIUM - Users can adapt
|
||||
- Research shows errors, but users still complete tasks
|
||||
|
||||
**Context:**
|
||||
- Tokopedia: Millions of products, need speed (dots save space)
|
||||
- WooNooW: Fewer products, need quality (thumbnails show detail)
|
||||
|
||||
#### 🎯 DECISION: **HYBRID APPROACH**
|
||||
|
||||
```
|
||||
Mobile:
|
||||
├─ Show 3-4 SMALL thumbnails (not full width)
|
||||
├─ Scrollable horizontally
|
||||
├─ Add dots as SECONDARY indicator
|
||||
└─ Best of both worlds
|
||||
|
||||
Why:
|
||||
├─ Thumbnails: Information scent (research)
|
||||
├─ Small size: Doesn't dominate screen (convention)
|
||||
├─ Dots: Familiar pattern (convention)
|
||||
└─ Users get preview + familiar UI
|
||||
```
|
||||
|
||||
**Rationale:**
|
||||
- Not breaking convention (dots still there)
|
||||
- Adding value (thumbnails for preview)
|
||||
- Low friction (users understand both)
|
||||
- Better UX (research-backed)
|
||||
|
||||
---
|
||||
|
||||
### 2. VARIATION SELECTORS
|
||||
|
||||
#### Convention (Tokopedia/Shopify):
|
||||
- Pills/Buttons for all variations
|
||||
- All visible at once
|
||||
|
||||
#### Our Current:
|
||||
- Dropdowns
|
||||
|
||||
#### Research (Nielsen Norman):
|
||||
- Pills > Dropdowns
|
||||
|
||||
#### Analysis:
|
||||
|
||||
**Is it learned behavior?**
|
||||
- ✅ YES - Pills are now standard
|
||||
- ✅ YES - E-commerce trained users on this
|
||||
- ❌ NO - Dropdowns are NOT e-commerce convention
|
||||
|
||||
**Cost of friction?**
|
||||
- 🔴 HIGH - Dropdowns are unexpected in e-commerce
|
||||
- Users expect to see all options
|
||||
|
||||
**Context:**
|
||||
- This is universal across all e-commerce
|
||||
- Not context-specific
|
||||
|
||||
#### 🎯 DECISION: **FOLLOW CONVENTION (Pills)**
|
||||
|
||||
```
|
||||
Replace dropdowns with pills/buttons
|
||||
|
||||
Why:
|
||||
├─ Convention is clear (everyone uses pills)
|
||||
├─ Research agrees (pills are better)
|
||||
├─ No downside (pills are superior)
|
||||
└─ Users expect this pattern
|
||||
```
|
||||
|
||||
**Rationale:**
|
||||
- Convention + Research align
|
||||
- No reason to use dropdowns
|
||||
- Clear winner
|
||||
|
||||
---
|
||||
|
||||
### 3. TYPOGRAPHY HIERARCHY
|
||||
|
||||
#### Convention (Varies):
|
||||
- Tokopedia: Price > Title (marketplace)
|
||||
- Shopify: Title > Price (brand store)
|
||||
|
||||
#### Our Current:
|
||||
- Price: 48-60px (HUGE)
|
||||
- Title: 24-32px
|
||||
|
||||
#### Research:
|
||||
- Title should be primary
|
||||
|
||||
#### Analysis:
|
||||
|
||||
**Is it learned behavior?**
|
||||
- ⚠️ CONTEXT-DEPENDENT
|
||||
- Marketplace: Price-focused (comparison)
|
||||
- Brand Store: Product-focused (storytelling)
|
||||
|
||||
**Cost of friction?**
|
||||
- 🟢 LOW - Users adapt to hierarchy quickly
|
||||
- Not a learned interaction, just visual weight
|
||||
|
||||
**Context:**
|
||||
- WooNooW: Custom plugin for brand stores
|
||||
- Not a marketplace
|
||||
- More like Shopify than Tokopedia
|
||||
|
||||
#### 🎯 DECISION: **FOLLOW SHOPIFY (Title Primary)**
|
||||
|
||||
```
|
||||
Title: 28-32px (primary)
|
||||
Price: 24-28px (secondary, but prominent)
|
||||
|
||||
Why:
|
||||
├─ We're not a marketplace (no price comparison)
|
||||
├─ Brand stores need product focus
|
||||
├─ Research supports this
|
||||
└─ Shopify (our closer analog) does this
|
||||
```
|
||||
|
||||
**Rationale:**
|
||||
- Context matters (we're not Tokopedia)
|
||||
- Shopify is better analog
|
||||
- Research agrees
|
||||
- Low friction to change
|
||||
|
||||
---
|
||||
|
||||
### 4. DESCRIPTION PATTERN
|
||||
|
||||
#### Convention (Varies):
|
||||
- Tokopedia: "Show More" (folded)
|
||||
- Shopify: Auto-expanded accordion
|
||||
|
||||
#### Our Current:
|
||||
- Collapsed accordion
|
||||
|
||||
#### Research:
|
||||
- Don't hide primary content
|
||||
|
||||
#### Analysis:
|
||||
|
||||
**Is it learned behavior?**
|
||||
- ⚠️ BOTH patterns are common
|
||||
- Users understand both
|
||||
- No strong convention
|
||||
|
||||
**Cost of friction?**
|
||||
- 🟢 LOW - Users know how to expand
|
||||
- But research shows some users miss collapsed content
|
||||
|
||||
**Context:**
|
||||
- Primary content should be visible
|
||||
- Secondary content can be collapsed
|
||||
|
||||
#### 🎯 DECISION: **FOLLOW SHOPIFY (Auto-Expand Description)**
|
||||
|
||||
```
|
||||
Description: Auto-expanded on load
|
||||
Other sections: Collapsed (Specs, Shipping, Reviews)
|
||||
|
||||
Why:
|
||||
├─ Description is primary content
|
||||
├─ Research says don't hide it
|
||||
├─ Shopify does this (our analog)
|
||||
└─ Low friction (users can collapse if needed)
|
||||
```
|
||||
|
||||
**Rationale:**
|
||||
- Best of both worlds
|
||||
- Primary visible, secondary hidden
|
||||
- Research-backed
|
||||
- Convention-friendly
|
||||
|
||||
---
|
||||
|
||||
## 🎓 The Meta-Lesson
|
||||
|
||||
### When to Follow Convention:
|
||||
|
||||
1. **Strong learned behavior** (e.g., hamburger menu, swipe gestures)
|
||||
2. **High cost of friction** (e.g., checkout flow, payment)
|
||||
3. **Universal pattern** (e.g., search icon, cart icon)
|
||||
4. **No clear winner** (e.g., both patterns work equally well)
|
||||
|
||||
### When to Follow Research:
|
||||
|
||||
1. **Convention is weak** (e.g., new patterns, no standard)
|
||||
2. **Low cost of friction** (e.g., visual hierarchy, spacing)
|
||||
3. **Research shows clear winner** (e.g., thumbnails vs dots)
|
||||
4. **We can improve on convention** (e.g., hybrid approaches)
|
||||
|
||||
### When to Follow Context:
|
||||
|
||||
1. **Marketplace vs Brand Store** (different goals)
|
||||
2. **Local vs Global** (cultural differences)
|
||||
3. **Mobile vs Desktop** (different constraints)
|
||||
4. **Our specific users** (if we have data)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Final Decision Framework
|
||||
|
||||
### For WooNooW Product Page:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ DECISION MATRIX │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Pattern Convention Research Decision │
|
||||
│ ─────────────────────────────────────────────────────── │
|
||||
│ Image Thumbnails Dots Thumbs HYBRID ⭐ │
|
||||
│ Variation Selector Pills Pills PILLS ✅ │
|
||||
│ Typography Varies Title>$ TITLE>$ ✅ │
|
||||
│ Description Varies Visible VISIBLE ✅ │
|
||||
│ Sticky Bottom Bar Common N/A YES ✅ │
|
||||
│ Fullscreen Lightbox Common Good YES ✅ │
|
||||
│ Social Proof Top Common Good YES ✅ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 The Hybrid Approach (Best of Both Worlds)
|
||||
|
||||
### Image Gallery - Our Solution:
|
||||
|
||||
```
|
||||
Mobile:
|
||||
┌─────────────────────────────────────┐
|
||||
│ │
|
||||
│ [Main Image] │
|
||||
│ │
|
||||
└─────────────────────────────────────┘
|
||||
┌─────────────────────────────────────┐
|
||||
│ [▭] [▭] [▭] [▭] ← Small thumbnails │
|
||||
│ ● ○ ○ ○ ← Dots below │
|
||||
└─────────────────────────────────────┘
|
||||
|
||||
Benefits:
|
||||
├─ Thumbnails: Information scent ✅
|
||||
├─ Small size: Doesn't dominate ✅
|
||||
├─ Dots: Familiar indicator ✅
|
||||
├─ Swipe: Still works ✅
|
||||
└─ Best of all worlds ⭐
|
||||
```
|
||||
|
||||
### Why This Works:
|
||||
|
||||
1. **Convention Respected:**
|
||||
- Dots are still there (familiar)
|
||||
- Swipe still works (learned behavior)
|
||||
- Doesn't look "weird"
|
||||
|
||||
2. **Research Applied:**
|
||||
- Thumbnails provide preview (information scent)
|
||||
- Larger hit areas (fewer errors)
|
||||
- Users can jump to specific image
|
||||
|
||||
3. **Context Optimized:**
|
||||
- Small thumbnails (mobile-friendly)
|
||||
- Not as prominent as desktop (saves space)
|
||||
- Progressive enhancement
|
||||
|
||||
---
|
||||
|
||||
## 📊 Real-World Examples of Hybrid Success
|
||||
|
||||
### Amazon (The Master of Hybrid):
|
||||
|
||||
**Mobile Image Gallery:**
|
||||
- ✅ Small thumbnails (4-5 visible)
|
||||
- ✅ Dots below thumbnails
|
||||
- ✅ Swipe gesture works
|
||||
- ✅ Tap thumbnail to jump
|
||||
|
||||
**Why Amazon does this:**
|
||||
- They have MORE data than anyone
|
||||
- They A/B test EVERYTHING
|
||||
- This is their optimized solution
|
||||
- Hybrid > Pure convention or pure research
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Our Final Recommendations
|
||||
|
||||
### HIGH PRIORITY (Implement Now):
|
||||
|
||||
1. **Variation Pills** ✅
|
||||
- Convention + Research align
|
||||
- Clear winner
|
||||
- No downside
|
||||
|
||||
2. **Auto-Expand Description** ✅
|
||||
- Research-backed
|
||||
- Low friction
|
||||
- Shopify does this
|
||||
|
||||
3. **Title > Price Hierarchy** ✅
|
||||
- Context-appropriate
|
||||
- Research-backed
|
||||
- Shopify analog
|
||||
|
||||
4. **Hybrid Thumbnail Gallery** ⭐
|
||||
- Best of both worlds
|
||||
- Small thumbnails + dots
|
||||
- Amazon does this
|
||||
|
||||
### MEDIUM PRIORITY (Consider):
|
||||
|
||||
5. **Sticky Bottom Bar (Mobile)** 🤔
|
||||
- Convention (Tokopedia does this)
|
||||
- Good for mobile UX
|
||||
- Test with users
|
||||
|
||||
6. **Fullscreen Lightbox** ✅
|
||||
- Convention (Shopify does this)
|
||||
- Research supports
|
||||
- Clear value
|
||||
|
||||
### LOW PRIORITY (Later):
|
||||
|
||||
7. **Social Proof at Top** ✅
|
||||
- Convention + Research align
|
||||
- When we have reviews
|
||||
|
||||
8. **Estimated Delivery** ✅
|
||||
- Convention (Tokopedia does this)
|
||||
- High value
|
||||
- When we have shipping data
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Key Takeaways
|
||||
|
||||
### 1. **Convention is Not Always Right**
|
||||
- But it's not always wrong either
|
||||
- Respect learned behavior
|
||||
- Break convention carefully
|
||||
|
||||
### 2. **Research is Not Always Applicable**
|
||||
- Context matters
|
||||
- Local vs global
|
||||
- Marketplace vs brand store
|
||||
|
||||
### 3. **Hybrid Approaches Win**
|
||||
- Don't choose sides
|
||||
- Get best of both worlds
|
||||
- Amazon proves this works
|
||||
|
||||
### 4. **Test, Don't Guess**
|
||||
- Convention + Research = hypothesis
|
||||
- Real users = truth
|
||||
- Be ready to pivot
|
||||
|
||||
---
|
||||
|
||||
## 🎯 The Answer to Your Question
|
||||
|
||||
> "So what is our best decision to refer?"
|
||||
|
||||
**Answer: NEITHER exclusively. Use a DECISION FRAMEWORK.**
|
||||
|
||||
```
|
||||
FOR EACH PATTERN:
|
||||
1. Identify the convention (what big players do)
|
||||
2. Identify the research (what studies say)
|
||||
3. Identify the context (what we need)
|
||||
4. Identify the friction (cost of change)
|
||||
5. Choose the best fit (or hybrid)
|
||||
```
|
||||
|
||||
**Specific to thumbnails:**
|
||||
|
||||
❌ **Don't blindly follow research** (full thumbnails might be too much)
|
||||
❌ **Don't blindly follow convention** (dots have real problems)
|
||||
✅ **Use hybrid approach** (small thumbnails + dots)
|
||||
|
||||
**Why:**
|
||||
- Respects convention (dots still there)
|
||||
- Applies research (thumbnails for preview)
|
||||
- Optimizes for context (mobile-friendly size)
|
||||
- Minimizes friction (users understand both)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Implementation Strategy
|
||||
|
||||
### Phase 1: Low-Friction Changes
|
||||
1. Variation pills (convention + research align)
|
||||
2. Auto-expand description (low friction)
|
||||
3. Typography adjustment (low friction)
|
||||
|
||||
### Phase 2: Hybrid Approaches
|
||||
4. Small thumbnails + dots (test with users)
|
||||
5. Sticky bottom bar (test with users)
|
||||
6. Fullscreen lightbox (convention + research)
|
||||
|
||||
### Phase 3: Data-Driven Optimization
|
||||
7. A/B test hybrid vs pure convention
|
||||
8. Measure: bounce rate, time on page, conversion
|
||||
9. Iterate based on real data
|
||||
|
||||
---
|
||||
|
||||
**Status:** ✅ Framework Complete
|
||||
**Philosophy:** Pragmatic, not dogmatic
|
||||
**Goal:** Best UX for OUR users, not theoretical perfection
|
||||
Reference in New Issue
Block a user