alla-tms/docs/pre-sprint-6-mobile-ux-review.md

Pre-Sprint 6 Mobile UX Review

Summary

รอบนี้เป็น final Mobile and Tablet UX review ต่อจาก responsive audit เดิม โดยเน้นความใช้งานได้จริงบนจอเล็กมากขึ้น ไม่ใช่แค่ “ไม่ล้นจอ” แต่ต้อง “กดใช้งานได้, มองเห็น action, และอ่านข้อความไทยได้ชัด”

งานที่เก็บเพิ่มหลัก ๆ:

• เพิ่มการเข้าถึง search บน mobile
• ขยาย touch target ของ header/sidebar controls
• ปรับ mobile drawer/sidebar ให้ใช้งานง่ายขึ้นและปิดเองหลังเลือกเมนู
• ปรับ review dialog ให้เหมาะกับ mobile และข้อความไทย
• ตรวจซ้ำ shared surfaces ที่กระทบทุกหน้าของ TMS

Screens Reviewed

Breakpoint targets:

• 360px
• 390px
• 412px
• 768px
• 1024px
• 1440px

TMS surfaces reviewed:

• /dashboard/overview
• /dashboard/training-records
• /dashboard/training-records/[id]
• /dashboard/training-records/[id]/review
• /dashboard/pending-review
• /dashboard/courses
• /dashboard/training-policy
• /dashboard/import-employees
• /dashboard/master-review
• /dashboard/reports
• shared sidebar / header / dialog / table toolbar / pagination

Issues Found

1. Search ถูกซ่อนไว้บน mobile ทำให้ค้นหาใช้งานไม่ได้ในจอเล็ก
2. Sidebar trigger และ notification trigger มี touch target เล็กเกินไปสำหรับมือถือ
3. Sidebar menu item / sub item บน mobile สูงค่อนข้างเตี้ย กดพลาดได้ง่าย
4. Mobile sidebar drawer ยังไม่ปิดอัตโนมัติหลังเลือกเมนู ทำให้ flow ใช้งานช้ากว่าที่ควร
5. User dropdown ใน sidebar มีความเสี่ยงชนขอบจอเล็ก
6. Training record review dialog ยังเป็นอังกฤษ และ action buttons ยังไม่ optimize สำหรับ mobile
7. Mobile drawer width เดิมค่อนข้างแคบสำหรับข้อความไทยและชื่อเมนูยาว

Issues Fixed

1. SearchInput รองรับ compact mode และแสดงปุ่มค้นหาใน header บน mobile
2. ขยาย touch target ของ:
   • sidebar trigger
   • notification button
3. ปรับ SidebarMenuButton และ SidebarMenuSubButton ให้มีความสูงขั้นต่ำเหมาะกับ touch บน mobile
4. ปรับ mobile sidebar width ให้กว้างขึ้นแต่ยังไม่เกิน viewport
5. เพิ่ม behavior ปิด setOpenMobile(false) หลังเลือกเมนูหรือ sub menu ใน sidebar
6. จำกัดความกว้าง user dropdown ให้พอดีกับหน้าจอมือถือ
7. ปรับ training-record-review-dialog เป็นภาษาไทย และทำ action buttons เป็น full width บน mobile

Remaining Risks

1. รอบนี้ยังเป็น code-based UX review ร่วมกับ type/lint verification ยังไม่มี screenshot automation หรือ manual device run จริงใน session นี้
2. บาง data table ยังต้องพึ่ง horizontal scroll ตามธรรมชาติของข้อมูล เพราะไม่เหมาะกับการ collapse cell แบบ card ในรอบนี้
3. Notification panel และ non-TMS legacy surfaces ยังไม่ได้ทำ localization ทั้งหมด เพราะอยู่นอกขอบเขต sprint นี้

Go-Live Mobile Readiness Score

8.8 / 10

เหตุผล:

• Shared mobile UX blockers หลักถูกปิดแล้ว
• ไม่มี type error
• ไม่มี lint error ที่บล็อกงาน
• TMS pages หลักอยู่ในสภาพพร้อม QA ต่อบนอุปกรณ์จริง

คะแนนยังไม่เต็มเพราะ:

• ยังไม่มี visual/device verification จริง
• ยังมีบางส่วนที่ใช้ horizontal scroll โดยตั้งใจ

Recommendation

พร้อมเข้าสู่ Sprint 6 ได้ แต่ควรทำ final manual QA จริงก่อน go-live บน:

• iPhone width class: 390px
• Android width class: 360px และ 412px
• iPad / tablet portrait: 768px

จุดที่ควรเช็กด้วยคนจริงเป็นพิเศษ:

1. sidebar drawer flow หลังเปลี่ยน organization และเปลี่ยนหน้า
2. training records review flow บน mobile
3. report filters และ table scroll บน tablet
4. long Thai labels ในข้อมูลจริงที่ยาวกว่าชุด mock/development data