งานออกแบบประสบการณ์ผู้ใช้ (UX Deliverables)
อ้างอิง TOR: ข้อ 4.3.1 (ออกแบบ Layout/UX/UI), ข้อ 4.3.2 (Prototype หน้าจอหลัก), ข้อ 4.3.3 (อัตลักษณ์ มมร./Dhammaverse และ Responsive), ข้อ 7.1.3 (เอกสารส่งมอบงวดที่ 1) ประกอบภาคผนวก ก ข้อ 3.1–3.8 ฉบับ: 1.0 — วันที่ 3 ตุลาคม พ.ศ. 2569
Prototype: ระบบสาธิตใช้ หน้าจอที่ทำงานได้จริง เป็น Prototype (ไม่ได้จัดทำไฟล์ Figma) ผู้ตรวจสามารถทดลองทุกหน้าได้ด้วยบัญชีสาธิต (
seed/users.json) Wireframe ในเอกสารนี้เป็นภาพ ASCII ที่วาดจากโครงสร้าง component จริง (src/components/*) ภาพหน้าจอจริงสร้างได้ด้วย Playwright ตามขนาดหน้าจอในหัวข้อ 6 อัตลักษณ์:https://dhammaverse.mbu.ac.thยัง resolve DNS ไม่ได้ ณ วันที่พัฒนา จึงยึดอัตลักษณ์ของhttps://www.mbu.ac.th(โลโก้ สี ฟอนต์) — ข้อ 4.3.3 และ ก.3.1.2 จึงมีสถานะ partial ใน/torและจะปรับให้สอดคล้องกับ Dhammaverse เมื่อเว็บไซต์ดังกล่าวเผยแพร่
1. หลักการออกแบบ
- บรรณารักษ์ที่น่าเชื่อถือ: แสดงแหล่งอ้างอิงก่อนบทสรุป ทุกย่อหน้าผูก citation ที่คลิกตรวจสอบเนื้อหาเต็มได้ (ก.3.6.2, ก.3.6.3)
- ซื่อตรงต่อข้อจำกัด: ข้อความเตือนใต้กล่องคำถามและท้ายคำตอบ การปฏิเสธแสดงเหตุผลเป็นการ์ดแยก (ก.3.6.1, ก.4.5.3)
- อัตลักษณ์ มมร.: ใช้ตราสัญลักษณ์ สีแสด–น้ำตาล–ทอง และฟอนต์ Kanit/Prompt ตามเว็บไซต์มหาวิทยาลัยอย่างสม่ำเสมอทั้งฝั่งผู้ใช้และ Admin Portal
- เข้าถึงได้ทุกกลุ่ม: สองภาษา ธีมมืด/สว่าง contrast ตาม WCAG ลิงก์ข้ามไปเนื้อหา ใช้งานบนมือถือได้ (2.5, ก.3.1, ก.3.2)
- ไม่ hard-code: สีผ่าน CSS variables เท่านั้น ข้อความผ่าน
messages/{th,en}/*.json
2. Design Tokens (จาก src/styles/tokens.ts)
สีอ้างอิงจากเว็บไซต์ www.mbu.ac.th: สีแสด #F3690E เป็นสีประจำมหาวิทยาลัย แต่ contrast กับพื้นขาวเพียง 3.07:1 จึงใช้กับเส้น/ไอคอน/ตกแต่งเท่านั้น และใช้ โทนเข้ม #B34A06 กับปุ่มและลิงก์เพื่อให้ผ่าน 4.5:1 ค่าเดียวกันประกาศเป็น CSS variables ใน src/app/globals.css (:root และ .dark)
| Token | ค่า | CSS variable | ใช้กับ |
|---|---|---|---|
primary | #B34A06 | --color-primary | ปุ่มหลัก ลิงก์ แถบเมนูหลัก (light) |
primaryBright | #F3690E | --color-primary-bright | เส้นขอบ Footer ไอคอน การ์ด |
primaryDark | #5A2805 | --color-primary-dark | แถบบนสุด (top bar) Sidebar ผู้ดูแล |
primarySoft | #FDE8D7 | --color-primary-soft | พื้นหลัง hero/กล่องแจ้ง |
gold | #E0B54A | --color-gold | Citation chip, accent ใน Admin (ทองของตราพระมหามงกุฎ) |
goldInk | #2A1A0E | --color-gold-ink | ตัวอักษรบนพื้นทอง |
earth / sand | #815637 / #CCC2B7 | --color-earth | โทนน้ำตาล/ครีมของเว็บไซต์มหาวิทยาลัย |
cream | #FBF6EC | --color-bg | พื้นหลังหน้า (light) |
surface | #FFFFFF | --color-surface | การ์ด/แผง |
ink / muted | #313131 / #6B5E52 | --color-ink / --color-muted | ตัวอักษรหลัก/รอง |
border | #E7DCCB | --color-border | เส้นขอบ |
darkBg / darkSurface | #171311 / #241D19 | .dark → --color-bg / --color-surface | ธีมมืด |
darkInk / darkMuted | #F3EBDD / #C8BBA9 | .dark → --color-ink / --color-muted | ตัวอักษรธีมมืด |
darkPrimary / darkPrimarySoft | #FF8A3D / #3A2616 | .dark → --color-primary / --color-primary-soft | ปุ่ม/ลิงก์ธีมมืด |
success / warning / danger / info | #2E7D32 / #B26A00 / #B3261E / #1E5AA8 | --color-success ฯลฯ | สถานะ |
ฟอนต์ (next/font/google ใน src/app/[locale]/layout.tsx, display: swap):
| บทบาท | ฟอนต์ | variable |
|---|---|---|
| หัวข้อ | Kanit (400–700) | --font-heading |
| เนื้อหา | Prompt (300–600) | --font-sans |
| ข้อความคัมภีร์ใน Citation Modal | Noto Serif Thai (400, 600) | --font-serif-thai |
3. ตราสัญลักษณ์และตำแหน่งวางโลโก้
ไฟล์ดาวน์โหลดจาก www.mbu.ac.th: public/assets/mbu-logo.png, public/assets/mbu-logo-wordmark.png, public/icons/favicon-32.png, public/icons/apple-touch-icon.png component src/components/brand/Logo.tsx (alt “ตราสัญลักษณ์มหาวิทยาลัยมหามกุฏราชวิทยาลัย”)
| ตำแหน่ง | รายละเอียด |
|---|---|
| Header ทุกหน้า | มุมซ้ายในวงกลมพื้นขาว ขนาด 36px (มือถือ 28px) คู่ข้อความ “มมร. | MBU Buddhist AI” |
หน้า /login, /register | กึ่งกลางเหนือฟอร์ม (AuthShell) |
| Admin Sidebar | ด้านบนคู่ชื่อ Admin Portal และ role (สีทอง) |
| Footer | คอลัมน์แรกคู่ชื่อหน่วยงานและที่อยู่ |
| Favicon / Apple touch icon | metadata.icons |
หน้า /unavailable และหน้า 404 (not-found.tsx) | แสดงโลโก้ (หน้า error.tsx แสดงข้อความผิดพลาดโดยไม่มีโลโก้) |
4. User Flow
4.1 ผู้ใช้ทั่วไป
flowchart TD
A["หน้าแรก / (hero + 3 การ์ด + สถิติคลังความรู้ + disclaimer)"] --> B{"เข้าสู่ระบบแล้ว?"}
B -- ยัง --> C["/login"]
C --> C1["อีเมล + รหัสผ่าน"]
C --> C2["Gmail / Facebook (โหมดสาธิต → /mock-oauth/authorize)"]
C --> C3["/register (ยินยอมนโยบาย)"] --> C
B -- แล้ว --> D["/chat"]
C1 --> D
C2 --> D
D --> E["พิมพ์คำถาม หรือเลือกคำถามตัวอย่าง"]
E --> F{"ผลลัพธ์"}
F -- ปฏิเสธ --> F1["การ์ดปฏิเสธ + เหตุผล"]
F -- ตอบ --> G["รายการอ้างอิง (3 + Expand All)"] --> H["บทสรุป streaming + citation chip"]
H --> I["Citation Modal: เนื้อหาเต็ม + คัดลอกอ้างอิง"]
H --> J["👍 / 👎"]
H --> K["RAG Trace"]
D --> L["/chat/history"] --> D
D --> M["/privacy (สำเนา / ลบ / ถอนยินยอม)"]
4.2 Dhamma Talk
flowchart LR
A["/chat/dhamma-talk"] --> B{"มีสิทธิ์?"}
B -- ไม่ --> N["ข้อความแนะนำให้ขอสิทธิ์จากผู้ดูแล"]
B -- มี --> C["กล่องสนทนา: พิมพ์หัวข้อ"] --> D["Response Modal: artifact (แท็บแก้ไข/ตัวอย่าง)"]
D --> E["แก้ไข → บันทึกฉบับแก้ไข"] --> F["คำสั่งถัดไปใช้ฉบับที่แก้"] --> D
D --> G["ดาวน์โหลด .md"]
4.3 ผู้ดูแลระบบ
flowchart TD
L["/login (ADMIN/SUPER_ADMIN, IP ใน allowlist)"] --> D["/admin/dashboard"]
D --> O["ภาพรวม: Dashboard, Alerts"]
D --> U["ผู้ใช้: Users, Privacy Requests, Audit Log"]
D --> A["AI: AI Config, Prompts, Guardrails, Unavailable, Pricing"]
D --> K["ความรู้: Knowledge Base, Jobs"]
D --> E["ประเมินผล: Evaluation, Datasets, Compare, Security Report"]
D --> P["ปฏิบัติการ: Defect Log, SLA Report, Backup*, Data Destruction*"]
* แสดงผลสำหรับ SUPER_ADMIN (API ปฏิเสธบทบาทอื่น)
5. Wireframes (ASCII)
5.1 โครงหน้า (Header/Footer) และหน้าแรก /
┌──────────────────────────────────────────────────────────────────────────┐
│ มหาวิทยาลัยมหามกุฏราชวิทยาลัย · ระบบสาธิต เว็บไซต์มหาวิทยาลัย ติดต่อ │ ← top bar (primaryDark)
├──────────────────────────────────────────────────────────────────────────┤
│ (โลโก้) มมร. | MBU Buddhist AI หน้าแรก ถาม-ตอบ Dhamma Talk ประวัติ │ ← header (primary) sticky
│ เอกสาร TOR [☾/☀] [TH|EN] [เข้าสู่ระบบ] │ มือถือ: [☰]
├──────────────────────────────────────────────────────────────────────────┤
│ [แบนเนอร์ Unavailable — แสดงเมื่อเปิดโหมด] │
│ │
│ ระบบแชตบอตปัญญาประดิษฐ์เฉพาะทางพระพุทธศาสนา │ ← hero (primarySoft→bg)
│ ถาม-ตอบพระไตรปิฎก อรรถกถา หลักธรรม พร้อมอ้างอิงตรวจสอบได้ │
│ [ เริ่มถาม-ตอบ ] [ ดูเอกสาร ] │
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ ← 3 การ์ด (md: 3 คอลัมน์)
│ │ ถาม-ตอบ │ │ Dhamma Talk │ │ เอกสาร │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ คลังความรู้: N เอกสาร / M ข้อความอ้างอิง · บุคลิกบรรณารักษ์ │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ [ ข้อความปฏิเสธความรับผิด (disclaimer) ] │
├──────────────────────────────────────────────────────────────────────────┤
│ (โลโก้) ที่อยู่ มมร. ตาม TOR ข้อ 17 │ นโยบายความเป็นส่วนตัว /privacy │ ระบบสาธิต │ ← footer 3 คอลัมน์
│ โทร. 02 444 6000 │ /help /tor /documents │ เวอร์ชัน │
│ │ │ prompt ver. │
└──────────────────────────────────────────────────────────────────────────┘
[แบนเนอร์คุกกี้: ยอมรับ / ปฏิเสธ] ← ล่างจอ จนกว่าผู้ใช้เลือก
5.2 เข้าสู่ระบบ /login (และ /register)
┌─────────────────────────────────────┐
│ (โลโก้ มมร.) │
│ เข้าสู่ระบบ │
│ อีเมล [______________________] │
│ รหัสผ่าน [______________________] │
│ [ข้อความผิดพลาด / บัญชีถูกล็อก] │
│ [ เข้าสู่ระบบ ] │
│ ───────────── หรือ ───────────── │
│ [ G เข้าสู่ระบบด้วย Gmail ] │ ← ป้าย “โหมดสาธิต” เมื่อใช้ Mock Provider
│ [ f เข้าสู่ระบบด้วย Facebook ] │
│ ยังไม่มีบัญชี? สมัครสมาชิก │
└─────────────────────────────────────┘
/register: อีเมล, รหัสผ่าน (≥8 ตัว มีตัวอักษรและตัวเลข), ชื่อแสดง,
[✓] ยินยอมตามนโยบายความเป็นส่วนตัว (ลิงก์) [สมัครสมาชิก]
5.3 ถาม-ตอบ /chat
┌───────────────────┬────────────────────────────────────────────────────────┐
│ [+ บทสนทนาใหม่] │ ถาม-ตอบ [บทสนทนา] (มือถือ) │
│ บทสนทนา │ ┌─────────────────┐ │
│ • มงคลสูตร… 3 ต.ค.│ │ คำถามของผู้ใช้ │ │ ← user bubble
│ • อริยสัจ… 2 ต.ค.│ └─────────────────┘ │
│ │ ┌────────────────────────────────────────────────────┐ │
│ (ซ่อนในจอ < lg, │ │ รายการอ้างอิง · 7 รายการ [แสดงผลทั้งหมด ▾] │ │ ← ส่วนที่ 1 (≤10, แสดง 3)
│ เปิดเป็น overlay) │ │ 1. ขุ.ขุ. (ไทย) 25/5/3 — มงคลสูตร “…snippet…” │ │
│ │ │ 2. ขุ.ขุ.อ. (มมร.) 25/5 — อรรถกถามงคลสูตร │ │
│ │ │ 3. … │ │
│ │ └────────────────────────────────────────────────────┘ │
│ │ บทสรุป │ ← ส่วนที่ 2 (streaming)
│ │ จากการค้นคว้าพบว่า … [ขุ.ขุ. (ไทย) 25/5/3] … │ ← citation chip สีทอง
│ │ … (ไม่มีอ้างอิง — โปรดตรวจสอบ) │
│ │ ⚠ คำตอบนี้เป็นการสรุปจากแหล่งอ้างอิง ไม่ใช่การชี้ขาด… │ ← คำเตือนท้ายคำตอบ
│ │ [👍] [👎] [RAG Trace] │
│ │ ┌ RAG Trace ────────────────────────────────────────┐ │
│ │ │ 1 checkAvailability 3ms · 2 inputGuardrail 4ms │ │
│ │ │ 3 rewriteQuery · 4 hybridSearch · 5 rerank │ │
│ │ │ 6 generate (model, prompt v, tokens, TTFT) │ │
│ │ │ 7 outputGuardrail · 8 persist │ │
│ │ └────────────────────────────────────────────────────┘ │
│ │ ┌ การ์ดปฏิเสธ (เมื่อถูกปฏิเสธ) — เหตุผล + ข้อความสุภาพ ┐ │
│ ├────────────────────────────────────────────────────────┤
│ │ [พิมพ์คำถามเกี่ยวกับพระไตรปิฎก… ] [ส่ง] │ ← sticky ล่าง
│ │ คำเตือน: ระบบ AI อาจผิดพลาด โปรดตรวจสอบกับต้นฉบับ… │ ← ก.3.6.1
└───────────────────┴────────────────────────────────────────────────────────┘
Citation Modal (คลิก chip หรือรายการอ้างอิง)
┌──────────────────────────────────────────────────┐
│ ขุ.ขุ. (ไทย) 25/5/3 [✕] │
│ มงคลสูตร · ขุททกนิกาย ขุททกปาฐะ · เล่ม 25 ข้อ 5 │
│ หน้า 3 · พระไตรปิฎก · ฉบับ ไทย │
│ ─────────────────────────────────────────────── │
│ เนื้อหาเต็มของข้อ (ฟอนต์ Noto Serif Thai) │
│ … │
│ [ คัดลอกอ้างอิง ] │
└──────────────────────────────────────────────────┘
5.4 Dhamma Talk /chat/dhamma-talk
┌──────────────────────────────┬─────────────────────────────────────────┐
│ Dhamma Talk [+ ใหม่] │ Response Modal (artifact) │
│ ┌──────────────────────────┐ │ [ แก้ไข ] [ ตัวอย่าง ] [ดาวน์โหลด .md]│
│ │ ผู้ใช้: ขอบทธรรมบรรยาย… │ │ ┌─────────────────────────────────────┐ │
│ │ AI: สร้างฉบับร่างแล้ว │ │ │ # หัวเรื่องบทธรรมบรรยาย │ │
│ │ [เปิด artifact] │ │ │ ## บทนำ … │ │
│ │ ผู้ใช้: ปรับให้สั้นลง… │ │ │ … [ขุ.ขุ. (ไทย) 25/5/3] │ │
│ └──────────────────────────┘ │ │ (textarea markdown เมื่ออยู่แท็บแก้ไข) │ │
│ [พิมพ์คำสั่ง… ] [ส่ง] │ └─────────────────────────────────────┘ │
│ │ [ บันทึกฉบับแก้ไข ] │
│ │ ⚠ ข้อความเตือนโหมด Dhamma Talk (ก.3.7.4) │
└──────────────────────────────┴─────────────────────────────────────────┘
มือถือ: Response Modal แสดงเป็น overlay เต็มจอ
ไม่มีสิทธิ์: การ์ดอธิบาย “ฟีเจอร์นี้ต้องได้รับสิทธิ์จากผู้ดูแลระบบ”
5.5 โครง Admin Portal /admin/*
┌──────────────────────┬──────────────────────────────────────────────────┐
│ (โลโก้) Admin Portal │ หัวข้อหน้า [ปุ่มการกระทำ] │
│ SUPER_ADMIN │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ ← KPI cards
│ ภาพรวม │ │ KPI │ │ KPI │ │ KPI │ │ KPI │ │
│ ▌Dashboard │ └──────┘ └──────┘ └──────┘ └──────┘ │
│ Alerts │ ┌ Panel ───────────────────────────────────────┐ │
│ ผู้ใช้ │ │ ตัวกรอง [ค้นหา…] [สถานะ ▾] [ช่วงเวลา ▾] │ │
│ Users │ │ ┌ TableWrap (เลื่อนแนวนอนเฉพาะตาราง) ───────┐ │ │
│ Privacy Requests │ │ │ คอลัมน์ … │ … │ Badge │ [แก้ไข] [ลบ] │ │ │
│ Audit Log │ │ └──────────────────────────────────────────┘ │ │
│ AI │ │ ‹ ก่อนหน้า หน้า 1/5 ถัดไป › │ │
│ AI Config … │ └──────────────────────────────────────────────┘ │
│ ความรู้ · ประเมินผล │ [Modal ยืนยัน / ฟอร์มแก้ไข] │
│ ปฏิบัติการ │ │
└──────────────────────┴──────────────────────────────────────────────────┘
Sidebar พื้น primaryDark ตัวอักษรขาว accent ทอง (เส้นซ้ายของเมนูที่เลือก)
จอ < lg: Sidebar ยุบเป็นแถบบนสุดพร้อมปุ่ม [เมนู]
6. Responsive
ทดสอบอัตโนมัติด้วย Playwright 3 projects (playwright.config.ts) และตรวจว่าไม่มี horizontal scroll ของหน้า (E2E-01, E2E-14)
| ขนาด | อุปกรณ์อ้างอิง | พฤติกรรม |
|---|---|---|
| 390 × 844 (mobile, touch) | มือถือ | เมนู header ยุบเป็น hamburger, รายการบทสนทนาเป็น overlay (ปุ่ม “บทสนทนา”), Response Modal ของ Dhamma Talk เต็มจอ, การ์ดหน้าแรกเรียงแนวตั้ง, Admin sidebar ยุบเป็นปุ่มเมนู, ตารางกว้างเลื่อนภายใน TableWrap |
| 768 × 1024 | แท็บเล็ต | การ์ดหน้าแรก 3 คอลัมน์ (md:), แชตยังซ่อนรายการบทสนทนา |
| 1280 × 800 | เดสก์ท็อป | แชต 2 คอลัมน์ (รายการบทสนทนา 288px + เนื้อหา), Admin sidebar คงที่ 256px |
7. ธีมมืด/สว่าง และภาษา
- ปุ่มสลับธีม (
ThemeToggle,next-themesแบบ class) และสลับภาษา TH|EN (LanguageSwitcher) อยู่ใน header ทุกหน้า รวมหน้า admin, login, documents, tor — ค่าคงอยู่หลังโหลดใหม่ (E2E-01) - ธีมมืดแทนค่า CSS variables ใต้
.dark(หัวข้อ 2) component ทุกตัวใช้var(--color-*)จึงเปลี่ยนตามอัตโนมัติ - วันที่แสดงเป็นพุทธศักราชเมื่อ locale = th
8. ผลการตรวจ Contrast
ค่าด้านล่างคำนวณด้วยสูตร WCAG 2.x (contrastRatio() ใน src/styles/tokens.ts) จากคู่สีที่ใช้จริง (contrastPairs) และ tests/unit/contrast.test.ts บังคับทุกคู่ ≥4.5:1 (ข้อความปกติ) พร้อมตรวจว่าค่าใน globals.css ตรงกับ tokens
| คู่สี | ตัวอักษร | พื้นหลัง | อัตราส่วน |
|---|---|---|---|
| ink on cream | #313131 | #FBF6EC | 12.08:1 |
| ink on surface | #313131 | #FFFFFF | 13.01:1 |
| muted on cream | #6B5E52 | #FBF6EC | 5.82:1 |
| muted on surface | #6B5E52 | #FFFFFF | 6.27:1 |
| white on primary (ปุ่ม) | #FFFFFF | #B34A06 | 5.39:1 |
| primary link on cream | #B34A06 | #FBF6EC | 5.00:1 |
| primary link on surface | #B34A06 | #FFFFFF | 5.39:1 |
| primary on primarySoft | #B34A06 | #FDE8D7 | 4.54:1 |
| white on primaryDark (top bar / admin sidebar) | #FFFFFF | #5A2805 | 12.07:1 |
| gold on primaryDark (admin accent) | #E0B54A | #5A2805 | 6.25:1 |
| goldInk on gold (citation chip) | #2A1A0E | #E0B54A | 8.68:1 |
| earth on cream | #815637 | #FBF6EC | 5.87:1 |
| darkInk on darkBg | #F3EBDD | #171311 | 15.59:1 |
| darkInk on darkSurface | #F3EBDD | #241D19 | 14.02:1 |
| darkMuted on darkSurface | #C8BBA9 | #241D19 | 8.81:1 |
| darkPrimary on darkBg | #FF8A3D | #171311 | 7.87:1 |
| darkPrimary on darkSurface | #FF8A3D | #241D19 | 7.08:1 |
| goldInk on darkPrimary (ปุ่มธีมมืด) | #2A1A0E | #FF8A3D | 7.15:1 |
| darkInk on darkPrimarySoft | #F3EBDD | #3A2616 | 12.08:1 |
| white on danger | #FFFFFF | #B3261E | 6.54:1 |
| white on success | #FFFFFF | #2E7D32 | 5.13:1 |
ข้อสังเกต: สีแสดประจำมหาวิทยาลัย #F3690E บนพื้นขาวได้ 3.07:1 จึงไม่ใช้กับข้อความ (ใช้เป็นเส้น/ไอคอนเท่านั้น)
9. รายการหน้าจอ (Prototype ที่ใช้งานได้จริง)
| กลุ่ม | หน้า |
|---|---|
| สาธารณะ | /, /login, /register, /help, /privacy-policy, /unavailable, /tor, /documents, /documents/[slug], /mock-oauth/authorize |
| ผู้ใช้ที่เข้าสู่ระบบ | /chat, /chat/dhamma-talk, /chat/history, /privacy |
| ผู้ดูแล | /admin (= dashboard), /admin/dashboard, /admin/alerts, /admin/users, /admin/users/[id], /admin/privacy-requests, /admin/audit-log, /admin/ai-config, /admin/prompts, /admin/guardrails, /admin/unavailable, /admin/pricing, /admin/knowledge-base, /admin/knowledge-base/[id], /admin/knowledge-base/jobs, /admin/evaluation (+ datasets, runs, compare, security-report), /admin/defect-log, /admin/sla-report, /admin/backup, /admin/data-destruction |
รายการ route ทั้งหมดเป็น single source of truth ใน src/data/routes.ts
10. การเก็บความเห็นและปรับปรุง
- นำเสนอหน้าจอจริงต่อคณะกรรมการในการประชุมงวดที่ 1 และบันทึกความเห็นใน Defect Log (โมดูล UX/UI)
- ทดสอบกับกลุ่มผู้ใช้จริง (นักศึกษา พระภิกษุ บุคลากร) ระหว่าง UAT งวดที่ 2
- ปรับสี/ฟอนต์ให้สอดคล้อง Dhammaverse เมื่อเว็บไซต์เผยแพร่ โดยแก้เพียง
src/styles/tokens.tsและsrc/app/globals.css(contrast test จะยืนยันซ้ำอัตโนมัติ)