User Flow

Ref - Ref - UI Design

1. ผู้ใช้งานทำการ Login ด้วย username: User01, password: pass

2. ผู้ใช้งานเข้ามาที่หน้าค้นหาสินค้า แล้วกรอกคำว่า "Nike" ลงในช่องค้นหา ได้ผลลัพท์เป็นรองเท้า Nike จำนวน 5 รายการ จากสินค้าทั้งหมด 350 รายการ

3. ผู้ใช้คลิกสินค้าที่แสดงผลในลำดับที่ 2 ชื่อสินค้าคือ "Nike Air flow-2" เพื่อไปยังหน้าแสดงรายละเอียดของสินค้า

4. ในหน้าแสดงรายละเอียดสินค้า ผู้ใช้งานทำการเลือกขนาดของสินค้าเป็น XL จากนั้นกดปุ่ม "ใส่ตะกร้า" เว็บไซต์จะเปลี่ยนไปหน้าแสดงรายการสินค้าที่อยู่ในตะกร้า

5. ในหน้าแสดงรายการสินค้าในตะกร้า มีรายการสินค้าที่ถูกเลือกทั้งหมด 1 รายการคือ รองเท้า "Nike Air flow-2" size XL และจะมีการสรุปยอดราคาสินค้าในตะกร้าทั้งหมดที่ราคา 1000 บาท

6. ผู้ใช้งานกดปุ่ม "ชำระค่าสินค้า" เพื่อไปยังหน้าสรุปการสั่งซื้อ

7. ในหน้าสรุปการสั่งซื้อ ภายใต้ Tab shipping จะแสดงที่อยู่การจัดส่งสินค้า โดยระบบจะทำการดึงข้อมูลที่เคยบันทึกไว้แล้วของผู้ใช้งานมาแสดงอัตโนมัติ, ข้อมูลการจัดส่งสินค้า และรายการสรุปการสั่งซื้อพร้อมยอดชำระเงินสุทธิเป็นจำนวนเงิน 1000 บาท

8. ผู้ใช้งานกดปุ่ม "ดำเนินการต่อ" เพื่อไปยัง Tab "ชำระเงิน"

9. ผู้ใช้งานเลือกการชำระเงินด้วย "บัตรเครดิตหรือเดบิต" แล้วกรอกหมายเลขบัตร ชื่อบนบัตร วันที่บัตรหมดอายุ แล้วเลข CVV โดยข้อมูลทั้งหมดเป็นข้อมูลที่ถูกต้อง

10. ผู้ใช้งานตรวจสอบรายละเอียดยอดของรายการสินค้าที่สั่งซื้อ ยอดเงินสุทธิที่ต้องจ่าย และที่อยู่การจัดส่งว่าถูกต้องหรือไม่ จากนั้นกดปุ่ม "สั่งซื้อสินค้า" เพื่อยืนยันการจ่าย

11. เมื่อดำเนินการชำระค่าสินค้าผ่านบัตรเครดิตสำเร็จ หน้าเว็บไซต์จะเปลี่ยนเป็นหน้าที่แสดงข้อมูลใบแจ้งการชำระเงินพร้อมรายละเอียด