Customer Experience — ลูกค้าใช้ระบบยังไง
เข้าใจ flow ฝั่งลูกค้า เพื่อให้ตอบ support ได้แม่นยำ
เส้นทางลูกค้าโดยรวม
หาเว็บ → browse → ตะกร้า → checkout → จ่ายเงิน → รอของ → รับของ → รีวิว
หน้าที่ลูกค้าเจอ
Public (ไม่ต้อง login)
| URL | คือ |
|---|---|
/ |
หน้าแรก — hero + categories + featured |
/products |
สินค้าทั้งหมด + filter + sort + search |
/products/[slug] |
รายละเอียดสินค้า + gallery |
/categories/[slug] |
สินค้าในหมวด |
/login, /register |
login / สมัคร |
/docs/* |
คู่มือนี้ (สำหรับ owner) |
หลัง login
| URL | คือ |
|---|---|
/cart |
ตะกร้า |
/checkout |
สั่งซื้อ |
/payment/[orderNo] |
อัปโหลดสลิป |
/orders |
รายการคำสั่งซื้อ |
/orders/[id] |
รายละเอียดออเดอร์ |
/wishlist |
สินค้าที่ชอบ |
/addresses |
ที่อยู่จัดส่ง |
/profile |
โปรไฟล์ + เปลี่ยนรหัส |
สิ่งที่ลูกค้าถามบ่อย
“สมัครยังไง?”
- /register → กรอก ชื่อ + email + รหัสผ่าน → กดสมัคร
- ระบบ auto-login + ส่งไปหน้าแรก
“ลืมรหัสผ่าน”
⚠ ยังไม่มี UI — admin ต้อง reset ให้ผ่าน Prisma Studio:
- เปิด http://localhost:5555
- Table
User→ หาตามอีเมล - แก้ field
password(ต้อง hash bcrypt ก่อน)
หรือใช้ script:
cd ecommerce-api
node scripts/reset-password.ts <email> <new-password>
แล้วบอกลูกค้า
“จะซื้อยังไง?”
อธิบายลูกค้า 5 ขั้น:
- กดสินค้าที่ชอบ → เลือก size/color → จำนวน → “เพิ่มลงตะกร้า”
- icon ตะกร้าด้านบน → /cart → ตรวจดู → “ดำเนินการชำระเงิน”
- /checkout — เลือกที่อยู่จัดส่ง + วิธีจ่าย → “ยืนยันคำสั่งซื้อ”
- ถ้าโอนเงิน — อัปโหลดสลิป
- รอร้านตรวจ → รอของ → รับ
“ตรวจสถานะออเดอร์ยังไง?”
- /orders → เห็นทุกออเดอร์
- กดเข้า → เห็นสถานะปัจจุบัน + tracking number (ถ้ามี)
“ขอ refund / คืนของ”
- ปัจจุบัน manual — ทักร้านโดยตรง
- ร้านตกลง → admin เปลี่ยน status
refunded
เคล็ดลับ UX ที่ทำให้ลูกค้าไม่งง
กระตุ้น signup
- หน้าแรก: chip “เป็นสมาชิก 2× points” ใน top banner
- หลัง add to cart: ถ้ายังไม่ login → ขอ login (มี redirect กลับ)
- หลัง checkout: คะแนน +X point (ในอนาคต)
ลด cart abandonment
- email reminder ตอน cart ค้าง 24 ชม (ต้องเชื่อม email service)
- coupon “WELCOME10” ใส่อัตโนมัติให้สมาชิกใหม่
- guest checkout (option) — ปัจจุบันยังบังคับ login
ช่วยตัดสินใจ
- reviews ของสินค้า — แสดงด้านล่าง
- “ลูกค้า X คนซื้อแล้ว”
- related products (ในอนาคต)
Mobile vs Desktop
- ทั้ง 2 ใช้ component เดียวกัน (responsive)
- mobile: drawer menu (กด icon menu)
- desktop: nav horizontal
ดู screen size:
- xs: < 640px
- sm: ≥ 640px
- md: ≥ 768px
- lg: ≥ 1024px
- xl: ≥ 1280px
Accessibility
ระบบรองรับ:
- ✅ Keyboard navigation
- ✅ aria-label บนปุ่ม icon
- ✅ Alt text บนรูป (ถ้าใส่)
- ⚠ Contrast ratio ผ่าน WCAG AA (ไม่ใช่ AAA)
ขั้นต่อไป
- ทำแอปมือถือ → 06 — Mobile App
- ปรับแบรนด์ → 07 — Customization
