สารบัญ
- เข้าใจที่มา: Normal UI มาจากการเปรียบเทียบกับ Database Normalization
- เข้าใจปัญหา: UI ซับซ้อนเกินไปทำให้ผู้ใช้สับสนและเสียเวลา
- ทำไม Normalization ถึงแก้ปัญหาได้
- วิธีตัดสินใจ Normalize หรือ Denormalize ด้วย 2 metrics
- สี่ควอดแรนต์ของการออกแบบ UI
- ประโยชน์ต่อทั้งผู้ใช้และนักพัฒนา
sandwiched-developer-get-to-know-normal-ui-symbols
เข้าใจที่มา
- ในฐานข้อมูล “Normalization” คือการแยกข้อมูลซ้ำ ๆ ออกไปเป็นตารางที่ชัดเจน
- ใน UI “Normalization” หมายถึงการแยก workflow ที่ซับซ้อนออกเป็นหลายหน้าจอที่โฟกัสชัดเจน
- ตรงข้ามคือ “Denormalization” — รวมทุกอย่างไว้ในจอเดียว เพื่อให้เร็วขึ้น
sandwiched-developer-get-to-know-normal-ui-denormalize-workflow
sandwiched-developer-get-to-know-normal-ui-normalize-workflow
เข้าใจปัญหา
UI ส่วนใหญ่ตกอยู่ในสองปัญหา:
- ซับซ้อนเกินไป ผู้ใช้ต้องคิดหลายขั้นตอนในหน้าจอเดียว → Cognitive Load สูง
- แยกย่อยเกินไป ผู้ใช้ต้องคลิกไปมาหลายจอ → เสียเวลา
ทำไม Normalization ถึงแก้ปัญหาได้
การ Normalize หมายถึงการ เพิ่มจอ เพื่อให้ผู้ใช้โฟกัสที่งานเดียวในแต่ละขั้นตอน → ลดความสับสน
การ Denormalize หมายถึงการ รวม workflow ให้น้อยหน้าจอ → เพิ่มความเร็วสำหรับงานที่ทำบ่อย
วิธีตัดสินใจ: ใช้ 2 Metrics
- Frequency (ความถี่) – งานนี้ผู้ใช้ทำบ่อยแค่ไหน
- Complexity (ความซับซ้อน) – มี action/frame ในจอเดียวเยอะแค่ไหน
สี่ควอดแรนต์
- Low-frequency / High-complexity → ควร Normalize
เช่น การสมัครใช้งาน, ตั้งค่า 2FA - High-frequency / High-complexity → ควร Denormalize
เช่น การกรองข้อมูลในระบบที่ผู้ใช้ทำทุกวัน - Low-frequency / Low-complexity → อาจ Normalize หรือไม่ก็ได้
เช่น หน้าการตั้งค่า (settings) - High-frequency / Low-complexity → ควร Denormalize
เช่น การ sort column ในตาราง
sandwiched-developer-get-to-know-normal-ui-decision-matrix
ประโยชน์ต่อ Dev และ User
- สำหรับ User: ลด cognitive load, ทำงานเร็วขึ้น, เข้าใจง่ายขึ้น
- สำหรับ Dev:
- ได้ UI ที่ใช้ native control → เขียนโค้ดง่าย, เข้าถึงได้, performance ดีขึ้น
- Lazy loading / Code split เป็นธรรมชาติ เพราะ workflow ถูกแยกจอ
- ลด scope creep → เมื่อฟีเจอร์เพิ่ม สามารถ normalize แยกจอออกไป
สรุป
Normal UI ไม่ได้บอกว่า ทุก workflow ต้อง Normalize แต่สอนให้เราคิดเป็นระบบว่า เมื่อไรควร Normalize และเมื่อไรควร Denormalize โดยใช้แค่ 2 metrics เท่านั้น การออกแบบ UI ไม่ใช่เรื่องของ “ดีไซน์สวย” เพียงอย่างเดียว แต่เป็นเรื่องของการทำให้ผู้ใช้ คิดน้อยลงและทำงานได้มากขึ้น และถ้าใครสนใจอ่านหนังสือเล่มนี้สามารถ ตามไปซื้อกันได้ที่เว็ปนี้ https://tonyalicea.dev/normalui/
