หน่วยที่ 3
การออกแบบประสบการณ์ผู้ใช้
User Experience Design (UX Design)
1️⃣ บทนำหน่วยการเรียนรู้
หลังจากที่นักศึกษาได้เรียนรู้
- การวิเคราะห์ UX/UI (หน่วยที่ 1)
- การวิเคราะห์ผู้ใช้และสร้าง User Persona (หน่วยที่ 2)
ขั้นตอนถัดไปคือ การออกแบบ UX (User Experience Design) ซึ่งเป็นการนำข้อมูลทั้งหมดมาวางแผนว่า
“ผู้ใช้จะใช้งานระบบอย่างไร ตั้งแต่เริ่มต้นจนจบ”
UX Design ไม่ใช่การทำหน้าจอให้สวย แต่คือการออกแบบ เส้นทางการใช้งาน เพื่อให้ผู้ใช้สามารถทำงานได้ง่าย สะดวก และไม่สับสน
2️⃣ UX Design คืออะไร
UX Design (User Experience Design) คือกระบวนการออกแบบประสบการณ์การใช้งานระบบ โดยเน้นที่
✔ ความง่าย (Simple)
✔ ความชัดเจน (Clear)
✔ ความสะดวก (Convenient)
✔ ความรู้สึกของผู้ใช้ (User Feeling)
UX Design ช่วยตอบคำถามสำคัญ เช่น
- ผู้ใช้เริ่มต้นใช้งานตรงไหน
- ต้องทำอะไรบ้างในแต่ละขั้นตอน
- มีขั้นตอนใดที่ไม่จำเป็นหรือซับซ้อนเกินไป
- จุดไหนที่ผู้ใช้อาจสับสน
3️⃣ ความสำคัญของ UX Design
หาก UX Design ไม่ดี มักเกิดปัญหา เช่น
❌ ผู้ใช้ใช้งานไม่เป็น
❌ ทำผิดขั้นตอน
❌ เลิกใช้งานกลางทาง
✨ UX Design ที่ดีจะช่วยให้
✔ ผู้ใช้เรียนรู้ระบบได้เร็ว
✔ ลดข้อผิดพลาดในการใช้งาน
✔ เพิ่มความพึงพอใจ
✔ เพิ่มโอกาสการกลับมาใช้งานซ้ำ
4️⃣ กระบวนการออกแบบ UX (UX Design Process)
โดยทั่วไป กระบวนการออกแบบ UX ประกอบด้วยขั้นตอนหลักดังนี้
4.1 เข้าใจผู้ใช้ (Understand User)
- ใช้ข้อมูลจาก User Research
- อ้างอิงจาก User Persona
4.2 กำหนดปัญหา (Define Problem)
- ผู้ใช้มีปัญหาอะไร
- ระบบควรช่วยแก้ปัญหาอะไร
4.3 ? ออกแบบโครงสร้าง (Design Structure)
- ออกแบบ User Flow
- ออกแบบ Wireframe
4.4 ทดสอบและปรับปรุง (Test & Improve)
- ทดลองใช้งาน
- ปรับแก้ก่อนออกแบบ UI จริง
5️⃣ User Flow คืออะไร
User Flow คือ
แผนภาพที่แสดงลำดับขั้นตอนการใช้งานของผู้ใช้ ตั้งแต่เริ่มต้นจนถึงเป้าหมายสุดท้าย
User Flow ช่วยให้เห็นภาพรวมว่า
- ผู้ใช้ต้องทำอะไรบ้าง
- แต่ละขั้นตอนเชื่อมโยงกันอย่างไร
6️⃣ ตัวอย่าง User Flow
ตัวอย่าง: แอปเช็กชื่อเข้าเรียน
- เปิดแอป
- เข้าสู่ระบบ
- เลือกรายวิชา
- เช็กชื่อ
- แสดงผลการเช็กชื่อ
User Flow ที่ดีควร
- ไม่ซับซ้อน
- ไม่วนซ้ำ
- มีจุดเริ่มต้นและจุดสิ้นสุดชัดเจน
7️⃣ ประโยชน์ของ User Flow
User Flow ช่วยให้
- มองเห็นปัญหาก่อนเริ่มพัฒนา
- ลดขั้นตอนที่ไม่จำเป็น
- วางโครงสร้างระบบได้ชัดเจน
? นักออกแบบควรสร้าง User Flow ก่อนวาดหน้าจอเสมอ
8️⃣ Wireframe คืออะไร
Wireframe คือโครงร่างของหน้าจอ ที่แสดงตำแหน่งองค์ประกอบต่าง ๆ โดย ไม่เน้นสีและความสวยงาม
“Wireframe เปรียบเสมือนพิมพ์เขียวของหน้าจอ”
9️⃣ ลักษณะของ Wireframe
Wireframe มักประกอบด้วย
- กล่องแทนเนื้อหา
- เส้นแทนรูปภาพ
- ข้อความตัวอย่าง
- ปุ่มพื้นฐาน
เป้าหมายของ Wireframe
✔ ดูโครงสร้าง
✔ ดูลำดับข้อมูล
✔ ดูการจัดวาง
ประโยชน์ของ Wireframe
Wireframe ช่วยให้
- แก้ไขงานได้ง่าย
- ประหยัดเวลา
- ลดความผิดพลาดก่อนออกแบบ UI จริง
1️⃣1️⃣ หลักการ UX Design ที่ควรรู้
✨ ความเรียบง่าย (Simplicity)
- ไม่ใส่ข้อมูลมากเกินไป
- แสดงเฉพาะสิ่งที่จำเป็น
ความชัดเจน (Clarity)
- ผู้ใช้เข้าใจทันทีว่าต้องทำอะไร
- ปุ่มและเมนูสื่อความหมายชัดเจน
ความสม่ำเสมอ (Consistency)
- ปุ่มเหมือนกันควรมีหน้าตาเหมือนกัน
- รูปแบบการใช้งานไม่เปลี่ยนไปมา
⚠ การป้องกันข้อผิดพลาด
- แจ้งเตือนก่อนทำสิ่งสำคัญ
- อธิบายข้อผิดพลาดอย่างเข้าใจง่าย
1️⃣2️⃣ ข้อผิดพลาดที่พบบ่อยในการออกแบบ UX
- ออกแบบตามความคิดของผู้ออกแบบ
- ไม่อ้างอิง User Persona
- User Flow ซับซ้อนเกินไป
- ข้ามขั้นตอน Wireframe
1️⃣3️⃣ ใบงานหน่วยที่ 3
หลังจากเรียนหน่วยนี้ นักศึกษาควรสามารถ
✔ ออกแบบ User Flow จาก Persona
✔ วาด Wireframe อย่างน้อย 3 หน้าจอ
✔ อธิบายแนวคิด UX ได้อย่างชัดเจน
นำความรู้นี้ไปใช้ทำ “ใบงานที่ 3 : User Flow & Wireframe”
✅ สรุปท้ายหน่วย
UX Design คือหัวใจของการออกแบบระบบ หากวางโครงสร้าง UX ได้ดี ขั้นตอนการออกแบบ UI และการพัฒนาระบบจะง่ายขึ้นมาก
นักศึกษาที่เข้าใจ UX Design จะสามารถออกแบบระบบที่ ใช้งานได้จริง ไม่ใช่แค่สวย