📐 UX/UI Principles — ตัดสินงาน AI ให้เป็น

หน้านี้ "ไม่ใช่" design school · เป็นพื้นฐานแค่พอ "อ่าน UI ที่ AI สร้างให้แล้วบอกได้ว่าดี/แย่" · AI เขียน UI ที่ "ดูเสร็จ" ได้ใน 30 วินาที — แต่ "ใช้จริงไม่ได้" · งานของคุณคือ จับให้ทัน

📑 สารบัญ

0. เลือก UI Technology ให้ตรงงาน 🎯
1. รู้จัก user ก่อนเขียน UI
2. ลำดับความสำคัญ (Hierarchy)
3. 5 States ที่ AI ลืมเสมอ
4. Feedback & Confirmation
5. Forms ที่ใช้ได้จริง
6. Tables & Lists
7. Layout Patterns ที่ใช้บ่อย
8. คิดถึงมือถือ
9. สี · ไอคอน · ความหมาย
10. 10 ข้อ "อย่าทำ"
11. Accessibility พื้นฐาน
12. ⚠️ AI-Era UX Traps
13. Checklist ก่อนส่งงาน

0. เลือก UI Technology ให้ตรงงาน 🎯

"คำถามแรก ก่อนพูดถึง design — UI ของคุณจะรันที่ไหน?" · ถ้าตอบผิดตรงนี้ → design ดีแค่ไหนก็ "ใช้ไม่ได้" · ตัวอย่างคลาสสิก: นักศึกษาสร้าง tkinter app สวย ๆ แล้วอยาก "deploy ขึ้น cloud" → ทำไม่ได้

🤔 ตอบ 3 คำถามนี้ก่อนเลือก tech

1. user จะใช้ที่ไหน? — เครื่องเดียวกับคุณ / เครื่องคนละเครื่อง / มือถือ / ที่ไหนก็ได้ที่มีเน็ต
2. user จะเปิดยังไง? — double-click .exe / เปิด browser แล้ว URL / chat กับ bot ใน LINE
3. มีกี่คนใช้พร้อมกัน? — แค่ฉัน / 5 คน / 100 คน / 10,000 คน

📊 7 UI Technologies — เปรียบเทียบ

🌳 Decision Tree — "ฉันควรใช้อะไร?"

ใครจะใช้ + ที่ไหน?
│
├─ แค่ฉัน · บนเครื่องฉัน · ออฟไลน์ก็ได้
│   ├─ งานสั้น · ใช้ครั้งเดียว        → CLI (W07)
│   ├─ ต้องมี GUI ปุ่มกด · ต่อ hardware → Tkinter
│   └─ data analysis · plot          → Jupyter / Colab
│
├─ คน 5–50 คน · มือถือ/desktop · ต้องการ URL
│   ├─ data dashboard · quick proto  → Streamlit (W09–W12)
│   ├─ form + DB + login + multi-page → Flask + HTML (W12+)
│   └─ ML demo · share link          → Gradio
│
├─ command บนมือถือ · ส่งข้อความ
│   └─ → LINE / Discord Bot
│
└─ คน 1,000+ · UI ขั้นสูง · real-time
    └─ → HTML/JS frontend + Python API
        (เกินขอบเขตคอร์สนี้ · เป็นเป้าหมายปี 2-3)

⚠️ Common Mismatches — กับดักที่นักศึกษาเจอบ่อย

🚢 Deployment Reality Check

เลือก tech แล้ว · ตรวจว่า "จริง ๆ deploy ยังไง" ก่อนใช้เวลาเขียน:

💪 ในคอร์สนี้เน้นอะไร

• W07: CLI tools (3 ตัว · ไม่มี GUI)
• W09–W10: Jupyter/Colab notebook (data analysis)
• W12: Streamlit (เริ่มต้น) + Flask (ถ้าต้องการ)
• W14: Deploy Streamlit/Flask ขึ้น Cloud Run / Streamlit Cloud
• W15 Final Project: ใช้อันไหนก็ได้ที่เหมาะกับ user persona

1. รู้จัก user ก่อนเขียน UI

ก่อนถาม AI ว่า "ทำหน้านี้ให้หน่อย" — ตอบ 4 คำถามนี้ในใจก่อน:

1. user ใช้บนอะไร? — มือถือ / desktop / tablet / TV / kiosk
2. user มีเวลาแค่ไหน? — อ่านยาวได้ / 3 วินาทีต้องเข้าใจ
3. user ทำสำเร็จเมื่อไหร่? — กดอะไรเสร็จ → success?
4. user พลาดเมื่อไหร่? — กดผิด / ใส่ผิด → จะเสียอะไร?

2. ลำดับความสำคัญ — Information Hierarchy

UI ที่ดี = "มองครั้งแรกรู้ทันทีว่าต้องกดอะไร"

กฎ 1-2-3 ของ primary action

• 1 หน้า = 1 primary action · มากกว่านี้ user สับสน
• 2 ปุ่มรอง (cancel + 1 อื่น) · เกินนั้นต้องคิดใหม่
• 3 วินาที · ถ้ามองหน้าครั้งแรกแล้วยังไม่รู้ว่ากดอะไร → ปรับ hierarchy

3. 5 States ที่ AI ลืมเสมอ 🔥

"#1 จุดที่ AI สร้าง UI ผิดบ่อยที่สุด" · AI สมมุติว่า data มีเสมอ · มีถูกต้อง · โหลดเสร็จ · ไม่มี error · realtime · — โลกจริงไม่ใช่

State ที่ทุก UI ต้องคิด

4. Feedback & Confirmation

4 กฎ "ตอบกลับ user"

1. การกระทำที่ใช้เวลา >0.5 วินาที ต้องโชว์ loading · ไม่ใช่ปล่อยให้นั่งงง
2. การกระทำที่กลับไม่ได้ (ลบ, ส่ง email, จ่ายเงิน) ต้องถาม confirm ก่อน
3. การกระทำที่กลับได้ (toggle, edit) ไม่ต้องถาม · ทำเลย · ถ้าผิด user กดกลับ
4. หลังกดสำเร็จ ต้องมี feedback (toast, change color, redirect) · ไม่ใช่หน้าเงียบ

5. Forms ที่ใช้ได้จริง

กฎพื้นฐาน 8 ข้อ

1. Label อยู่บนช่อง (ไม่ใช่ข้างใน) — ช่อง placeholder ไม่ใช่ label
2. Required ใส่ * หรือบอก "(จำเป็น)" · optional ใส่ "(ไม่จำเป็น)"
3. Validate ใต้ช่อง (ไม่ใช่ alert popup)
4. Validate ตอนกด Submit (ไม่ใช่ขณะพิมพ์) · ยกเว้น email/password ที่มี rule ชัด
5. Error message บอก "ทำยังไงต่อ" · ไม่ใช่แค่ "ผิด"
6. Default value ดี ๆ · ลด typing — user ไม่ต้องเดาว่าใส่อะไร
7. เรียง field ตามลำดับธรรมชาติ · ชื่อ → email → เบอร์ (ไม่ใช่ตรงข้าม)
8. กลุ่ม field ที่เกี่ยวกัน (ที่อยู่ทุก field ติดกัน · ไม่ใช่กระจาย)

6. Tables & Lists

ตาราง = 80% ของ admin panel

AI ชอบทำ table แบบ vanilla — ไม่มี sort, filter, empty state · ของจริงต้องมี:

• คอลัมน์ที่จำเป็นเท่านั้น · 5-7 คอลัมน์เกินไป → ซ่อนใน "detail view"
• Sort ได้ (คลิก header)
• Filter / Search · ถ้ามี >20 แถว · ขาดไม่ได้
• Pagination หรือ infinite scroll · ถ้ามี >100 แถว
• Empty state ถ้าตารางว่าง (filter หาไม่เจอ ก็ empty)
• Loading skeleton ตอนโหลด · ไม่ใช่ blank table
• Action ของแต่ละแถว · ปุ่มเดียวต่อแถว · ลึก ๆ ในเมนู ⋮
• Bulk action ถ้าต้องทำหลายแถวพร้อมกัน (checkbox + bar ขึ้นมา)

7. Layout Patterns ที่ใช้บ่อย

มี ~6 layout ที่ครอบ 95% ของแอปที่จะทำในคอร์สนี้ · เลือกให้ตรง "ก่อนสั่ง AI"

(a) List-Detail

ซ้าย = list · ขวา = detail ของที่เลือก · เหมาะกับ email, chat, file manager

┌─────────────┬──────────────────────┐
│ ▸ Ploy      │ Ploy                 │
│ ▾ Nat       │ ID: 640002           │
│   Mint      │ Email: nat@ubu...    │
│   Pim       │ Scores: 85, 72, 91   │
│             │ [Edit] [Mail]        │
└─────────────┴──────────────────────┘

(b) Dashboard / Cards

กลุ่ม metric / status · เหมาะกับ overview · "ระวัง — อย่าใส่ dashboard ถ้าไม่จำเป็น"

┌─────────┬─────────┬─────────┐
│ Total   │ Passed  │ Failed  │
│  42     │  35     │   7     │
└─────────┴─────────┴─────────┘
┌────────────────────────────┐
│ Recent Activity            │
│  • Ploy submitted lab 3    │
│  • Nat updated profile     │
└────────────────────────────┘

(c) Wizard / Stepper

สำหรับ workflow หลายขั้น · บังคับลำดับ · ใช้กับ form ยาว, registration, checkout

┌─────────────────────────────────┐
│ ●─────●─────○─────○             │
│ Info  Course Submit Confirm     │
├─────────────────────────────────┤
│  Step 2: Choose course          │
│  [ ] ENG101                     │
│  [ ] ENG102                     │
│  [x] CPM 101                    │
│                                 │
│         [Back]    [Next →]      │
└─────────────────────────────────┘

(d) Settings / Tabs

เมนูซ้าย / tab บน · เปลี่ยน content ขวา · เหมาะกับ admin / preferences

┌─────────┬──────────────────────┐
│ Profile │ ▸ Account            │
│ Account │                      │
│ Security│  Username: ploy      │
│ Notifs  │  Email:    ____      │
│         │       [Save]         │
└─────────┴──────────────────────┘

(e) Public landing

หน้าโฮม · hero + features + call-to-action · เหมาะกับ marketing / portfolio

┌─────────────────────────────────┐
│  [Logo]            [Sign in]    │
├─────────────────────────────────┤
│                                 │
│     Big Headline Here           │
│   Subtitle explaining what      │
│         [Get Started]           │
│                                 │
├─────────────────────────────────┤
│  Feature 1  Feature 2  Feature 3│
└─────────────────────────────────┘

(f) Single-action page

1 ปุ่มใหญ่กลางจอ · เหมาะกับ kiosk, quick action, mobile-first

┌─────────────────────────────────┐
│                                 │
│                                 │
│           Scan QR              │
│       ┏━━━━━━━━━━━┓             │
│       ┃   ▢▢▢▢   ┃             │
│       ┗━━━━━━━━━━━┛             │
│                                 │
│      [Open Camera]              │
│                                 │
└─────────────────────────────────┘

8. คิดถึงมือถือ

"นักศึกษาส่วนใหญ่เปิด web app บนมือถือ" · ถ้าไม่ทดสอบบนมือถือ → AI สร้าง UI ที่ใช้บนมือถือไม่ได้

5 กฎพื้นฐานมือถือ

1. ปุ่มอย่างน้อย 44×44 px · นิ้วต้องกดได้
2. font ≥ 16 px · ไม่งั้น iOS จะ zoom ทุกครั้งที่กรอก
3. 1 column · อย่ายัด 2-3 column บนหน้าจอแคบ
4. Form fields ใช้ type ที่ถูก · type="email", type="tel" · มือถือเปลี่ยน keyboard ให้
5. ไม่ต้อง hover · มือถือไม่มี · ทำให้ทุกอย่างกดได้

9. สี · ไอคอน · ความหมาย

สีมีความหมาย — อย่าใช้สุ่ม

3 กฎสี

1. 1 สี primary · 1 สี accent · neutral grayscale 4-5 ระดับ — มากกว่านี้จะดูเหมือนรุ้ง
2. contrast พอ — text สีเทาบนพื้นเทา = อ่านไม่ออก · ใช้ contrast checker
3. ใช้สีให้ตรงความหมาย — แดง = อันตราย · ไม่ใช่แดง = ปุ่มหลักเพราะเด่นดี (สับสน)

ไอคอน — ใช้ที่ user รู้

• 🔍 = search · ⚙️ = settings · 🗑️ = delete · ✏️ = edit · ➕ = add — มาตรฐาน · ใช้ได้
• ไอคอนแปลก ๆ → ใส่ label คู่ด้วย · อย่าให้ user เดา
• หลีกเลี่ยง icon-only buttons ถ้าไม่จำเป็น · text + icon ดีกว่า icon เปล่า

10. ❌ 10 ข้อ "อย่าทำ"

11. Accessibility พื้นฐาน

"a11y" = accessibility · ทำให้ user ที่ตาบอด/หูหนวก/มือไม่สะดวก ใช้ได้ · "ไม่ใช่แค่จริยธรรม · ส่วนหนึ่งของกฎหมายในหลายประเทศ"

6 ข้อขั้นต่ำ (เริ่มได้ทันที)

1. contrast ≥ 4.5:1 สำหรับ text · ตรวจที่ WebAIM Contrast Checker
2. alt attribute ใน <img> ทุกรูป · ถ้าเป็น decorative ใส่ alt=""
3. Button ใช้ <button> ไม่ใช่ <div onclick> · screen reader อ่านออก · keyboard ใช้ได้
4. Form ทุกช่องมี <label> · ผูกกับ <input> ด้วย for + id
5. ใช้ <h1> <h2> <h3> ตามลำดับ · ไม่ใช่ใช้ขนาด font อย่างเดียว
6. Keyboard navigation ใช้ได้ — Tab ผ่านทุกปุ่ม · กด Enter / Space ทำงาน · ทดสอบ: ปิด mouse, ใช้ Tab อย่างเดียว

12. ⚠️ AI-Era UX Traps — กับดักที่เจอบ่อย

AI สร้าง UI ที่ "ดูดี ใช้ไม่ได้" ในรูปแบบเหล่านี้:

Trap 1 — Dashboard syndrome

ถาม AI ให้ทำ "หน้าแรก" → ออกมาเป็น dashboard เต็มไปด้วย metric ที่ user ไม่ดู · AI default ทำแบบนี้เพราะเห็นใน training data เยอะ

Trap 2 — Feature creep

ขอ AI ทำ form login · มันใส่ "remember me" + "social login" + "magic link" + "2FA" + "captcha" ทั้งที่ไม่ได้ขอ

Trap 3 — State-less UI

AI สร้าง UI ที่ "ดูเสร็จ" แต่ไม่มี loading / empty / error state · ใช้กับ real data ไม่ได้

Trap 4 — Pretty placeholder data

AI ใส่ name "Lorem Ipsum", score "85, 92, 78" สวย ๆ · พอใช้ data จริง — ชื่อยาว 60 ตัวอักษร, score 0/null → layout พัง

Trap 5 — Desktop-first design

AI default ออกแบบบน desktop ก่อน · มือถือกลายเป็นของแถม · ของจริง 70% user อยู่บนมือถือ

Trap 6 — Over-animated

AI ชอบใส่ transition, fade-in, hover effect ทุกที่ · ของจริง animation นาน > 300ms = annoying

Trap 7 — Color = signal alone

AI ใช้สีบอกความหมาย (เขียว=success, แดง=fail) แต่ไม่มี icon/text ประกอบ · color-blind user เห็นเทาเหมือนกัน

13. ✅ Checklist ก่อนส่งงาน (W12 / W14 / W15)

ก่อนคิดว่า UI "เสร็จ" — เช็คตามนี้:

🧑 User

• ☐ มี user persona ชัด · "user ของหน้านี้คือใคร · มาทำอะไร"
• ☐ Primary action ของแต่ละหน้าชัด · มองครั้งแรกเห็นทันที

📐 Layout

• ☐ เลือก layout pattern ที่ตรงงาน (list-detail / dashboard / wizard / ...)
• ☐ Hierarchy ชัด — primary > secondary > tertiary
• ☐ ลอง responsive: desktop / tablet / mobile (375px) ใช้ได้

🔄 States

• ☐ Loading state ทุก async
• ☐ Empty state ทุก list / table
• ☐ Error state — บอกผิดอะไร + ทำยังไงต่อ
• ☐ Success feedback หลังกด action
• ☐ Partial / loading-some state

📝 Forms

• ☐ Label บนช่อง · required ระบุ
• ☐ Validation ใต้ช่อง · message ภาษาคน
• ☐ Default value ที่ดี · ลด typing
• ☐ ทดสอบด้วย: input ว่าง / ยาวมาก / มี emoji / มีภาษาไทย

♻️ Reversibility

• ☐ Destructive action มี confirm + undo
• ☐ ไม่มี action ที่กลับไม่ได้โดยไม่ถาม

♿ Accessibility

• ☐ Contrast ≥ 4.5:1
• ☐ ทุก image มี alt
• ☐ Keyboard nav ใช้ได้ (Tab + Enter)
• ☐ ใช้ <button> ไม่ใช่ <div onclick>

📱 Mobile

• ☐ ปุ่ม ≥ 44×44 px
• ☐ font ≥ 16 px ใน input
• ☐ 1 column บนมือถือ
• ☐ ทดสอบบนมือถือจริง · ไม่ใช่แค่ devtools

🤖 AI Output Review

• ☐ ตัด feature ที่ AI ใส่เกินมา
• ☐ เพิ่ม state ที่ AI ลืม (loading/empty/error)
• ☐ ทดสอบด้วย data extreme · ไม่ใช่แค่ Lorem Ipsum
• ☐ ตรวจ accessibility

📚 อ่านเพิ่ม (Optional)

• Nielsen Norman Group — usability research ที่อ้างอิงได้
• Refactoring UI — หนังสือสั้น ๆ ใช้ได้ทันที (Tailwind authors)
• Smashing Magazine — บทความ UX/UI ใหม่ ๆ
• checklist.design — UX/UI checklist ตามประเภทของแอป